improve API landing page

2026-04-16 15:36:36 +00:00 · 2023-05-05 19:39:42 +02:00
parent 05cbda8cd8
commit affd499f41
12 changed files with 59 additions and 42 deletions
--- a/public/img/logo-dark.svg
+++ b/public/img/logo-dark.svg
@@ -60,7 +60,7 @@
     inkscape:groupmode="layer"
     id="layer1">
    <path
-       style="fill:#ffe6d5;stroke:none;stroke-width:1.4928;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       style="fill:#fb923c;fill-opacity:0.2;stroke:none;stroke-width:1.4928;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="rect4955"
       width="43"
       height="18.151592"
--- a/public/img/logo.svg
+++ b/public/img/logo.svg
@@ -60,7 +60,7 @@
     inkscape:groupmode="layer"
     id="layer1">
    <path
-       style="fill:#ffe6d5;stroke:none;stroke-width:1.4928;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       style="fill:#fb923c;fill-opacity:0.2;stroke:none;stroke-width:1.4928;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="rect4955"
       width="43"
       height="18.151592"
--- a/src/components/Guides.jsx
+++ b/src/components/Guides.jsx
@@ -7,23 +7,12 @@ const guides = [
    name: 'Authentication',
    description: 'Learn how to authenticate your API requests.',
  },
-  {
-    href: '/pagination',
-    name: 'Pagination',
-    description: 'Understand how to work with paginated responses.',
-  },
  {
    href: '/errors',
    name: 'Errors',
    description:
      'Read about the different types of errors returned by the API.',
  },
-  {
-    href: '/webhooks',
-    name: 'Webhooks',
-    description:
-      'Learn how to programmatically configure webhooks for your app.',
-  },
 ]

 export function Guides() {
--- a/src/components/HeroPattern.jsx
+++ b/src/components/HeroPattern.jsx
@@ -4,7 +4,7 @@ export function HeroPattern() {
  return (
    <div className="absolute inset-0 -z-10 mx-0 max-w-none overflow-hidden">
      <div className="absolute left-1/2 top-0 ml-[-38rem] h-[25rem] w-[81.25rem] dark:[mask-image:linear-gradient(white,transparent)]">
-        <div className="absolute inset-0 bg-gradient-to-r from-[#FFAC1C] to-[#FF5F15] opacity-40 [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-[#FFAC1C]/30 dark:to-[#FF5F15]/30 dark:opacity-100">
+        <div className="absolute inset-0 bg-gradient-to-r from-[#FFAC1C] to-[#F28C28] opacity-40 [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-[#F28C28]/30 dark:to-[#FF7518]/30 dark:opacity-100">
          <GridPattern
            width={72}
            height={56}
--- a/src/components/How-To-Guides.jsx
+++ b/src/components/How-To-Guides.jsx
@@ -3,26 +3,27 @@ import { Heading } from '@/components/Heading'

 const howToGuides = [
  {
-    href: '/docs/getting-started',
-    name: 'Getting Started',
-    description: 'Learn how to start using NetBird.',
+    href: '/docs/managing-your-network#add-users-to-your-network',
+    name: 'Add Users to your network',
+    description: 'Learn how to add users to your network.',
  },
  {
-    href: '/docs/managing-your-network',
-    name: 'Managing your Network',
-    description: 'Learn everything you need to know about managing your network.',
-  },
-  {
-    href: '/docs/examples',
-    name: 'Examples',
+    href: '/docs/managing-your-network#configure-periodic-user-authentication',
+    name: 'Configure periodic user authentication',
    description:
-      'Read some examples of how to use NetBird.',
+      'Learn how to configure periodic user authentication.',
  },
  {
-    href: '/docs/cli',
-    name: 'CLI',
+    href: '/docs/managing-your-network#manage-dns-in-your-network',
+    name: 'DNS',
    description:
-      'Learn how to use the CLI of the NetBird client.',
+      'Learn how to configure DNS servers for your network.',
+  },
+  {
+    href: '/docs/managing-your-network#monitor-system-and-network-activity',
+    name: 'Monitoring system and network activities',
+    description:
+      'Learn how to keep track of system and network activities in your account.',
  },
 ]

--- a/src/components/Resources.jsx
+++ b/src/components/Resources.jsx
@@ -13,7 +13,7 @@ const resources = [
    href: '/accounts',
    name: 'Accounts',
    description:
-      'Learn about the contact model and how to create, retrieve, update, delete, and list contacts.',
+      'Learn how to list and update accounts.',
    icon: UserIcon,
    pattern: {
      y: 16,
@@ -27,7 +27,21 @@ const resources = [
    href: '/users',
    name: 'Users',
    description:
-      'Learn about the conversation model and how to create, retrieve, update, delete, and list conversations.',
+      'Learn how to create, update, delete, and list users.',
+    icon: ChatBubbleIcon,
+    pattern: {
+      y: -6,
+      squares: [
+        [-1, 2],
+        [1, 3],
+      ],
+    },
+  },
+  {
+    href: '/tokens',
+    name: 'Tokens',
+    description:
+      'Learn how to create, retrieve, delete, and list tokens.',
    icon: ChatBubbleIcon,
    pattern: {
      y: -6,
@@ -41,7 +55,7 @@ const resources = [
    href: '/peers',
    name: 'Peers',
    description:
-      'Learn about the message model and how to create, retrieve, update, delete, and list messages.',
+      'Learn how to retrieve, update, delete, and list peers.',
    icon: EnvelopeIcon,
    pattern: {
      y: 32,
@@ -55,7 +69,7 @@ const resources = [
    href: '/setup-keys',
    name: 'Setup Keys',
    description:
-      'Learn about the group model and how to create, retrieve, update, delete, and list groups.',
+      'Learn how to create, retrieve, update, and list setup keys.',
    icon: UsersIcon,
    pattern: {
      y: 22,
@@ -66,7 +80,7 @@ const resources = [
    href: '/groups',
    name: 'Groups',
    description:
-      'Learn about the group model and how to create, retrieve, update, delete, and list groups.',
+      'Learn how to create, retrieve, update, delete, and list groups.',
    icon: UsersIcon,
    pattern: {
      y: 22,
@@ -77,7 +91,7 @@ const resources = [
    href: '/rules',
    name: 'rules',
    description:
-      'Learn about the group model and how to create, retrieve, update, delete, and list groups.',
+      'Learn how to create, retrieve, update, delete, and list rules.',
    icon: UsersIcon,
    pattern: {
      y: 22,
@@ -88,7 +102,7 @@ const resources = [
    href: '/policies',
    name: 'Policies',
    description:
-      'Learn about the group model and how to create, retrieve, update, delete, and list groups.',
+      'Learn how to create, retrieve, update, delete, and list policies.',
    icon: UsersIcon,
    pattern: {
      y: 22,
@@ -99,7 +113,7 @@ const resources = [
    href: '/routes',
    name: 'Routes',
    description:
-      'Learn about the group model and how to create, retrieve, update, delete, and list groups.',
+      'Learn about how to create, retrieve, update, delete, and list routes.',
    icon: UsersIcon,
    pattern: {
      y: 22,
@@ -110,7 +124,7 @@ const resources = [
    href: '/dns',
    name: 'DNS',
    description:
-      'Learn about the group model and how to create, retrieve, update, delete, and list groups.',
+      'Learn about how to create, retrieve, update, delete, and list nameserver groups and update and retrieve DNS settings.',
    icon: UsersIcon,
    pattern: {
      y: 22,
@@ -121,7 +135,7 @@ const resources = [
    href: '/events',
    name: 'Events',
    description:
-      'Learn about the group model and how to create, retrieve, update, delete, and list groups.',
+      'Learn about how to list events.',
    icon: UsersIcon,
    pattern: {
      y: 22,
--- a/src/pages/authentication.mdx
+++ b/src/pages/authentication.mdx
@@ -1,6 +1,9 @@
+import {HeroPattern} from "@/components/HeroPattern";
 export const description =
  'In this guide, we’ll look at how authentication works. Protocol offers two ways to authenticate your API requests: Basic authentication and OAuth2 with a token.'

+<HeroPattern/>
+
 # Authentication

 You'll need to authenticate your requests to access any of the endpoints in the Protocol API. In this guide, we'll look at how authentication works. Protocol offers two ways to authenticate your API requests: Basic authentication and OAuth2 with a token — OAuth2 is the recommended way. {{ className: 'lead' }}
--- a/src/pages/docs/introductions.mdx
+++ b/src/pages/docs/introductions.mdx
@@ -9,7 +9,7 @@ export const description =

 <HeroPattern />

-# NetBird Documentation
+# NetBird Docs

 NetBird is a simple and fast alternative to corporate VPNs built on top of [WireGuard®](https://www.wireguard.com/) making it easy to create secure private networks for your organization or home.
 It requires near zero configuration effort leaving behind the hassle of opening ports, complex firewall rules, vpn gateways, and so forth. {{ className: 'lead' }}
--- a/src/pages/docs/selfhosted-guide.mdx
+++ b/src/pages/docs/selfhosted-guide.mdx
@@ -1,3 +1,6 @@
+import {HeroPattern} from "@/components/HeroPattern";
+
+<HeroPattern/>

 # Self-hosting Guide

--- a/src/pages/errors.mdx
+++ b/src/pages/errors.mdx
@@ -1,6 +1,9 @@
+import {HeroPattern} from "@/components/HeroPattern";
 export const description =
  'In this guide, we will talk about what happens when something goes wrong while you work with the API.'

+<HeroPattern/>
+
 # Errors

 In this guide, we will talk about what happens when something goes wrong while you work with the API. Mistakes happen, and mostly they will be yours, not ours. Let's look at some status codes and error types you might encounter. {{ className: 'lead' }}
--- a/src/pages/introductions.mdx
+++ b/src/pages/introductions.mdx
@@ -12,7 +12,7 @@ export const sections = [

 <HeroPattern />

-# NetBird API
+# NetBird REST API

 Use the NetBird Public API to manage users, peers, network rules and more from inside your application or scripts to automate the setup of your mesh network. {{ className: 'lead' }}

@@ -23,14 +23,15 @@ Use the NetBird Public API to manage users, peers, network rules and more from i

 ## Getting started {{ anchor: false }}

-To get started, create a new application in your [developer settings](#), then read about how to make requests for the resources you need to access using our HTTP APIs or dedicated client SDKs. When your integration is ready to go live, publish it to our [integrations directory](#) to reach the Protocol community. {{ className: 'lead' }}
+To get started, it is recommended to create a [service user](#), that can later be used to communicate with the NetBird API.
+To be able to send requests to our API you need [authenticate](#) on each request. This can be done either by Bearer token from you identity provider or by creating [personal access tokens](#) in the NetBird dashboard.{{ className: 'lead' }}

 <div className="not-prose">
  <Button
    href="/sdks"
    variant="text"
    arrow="right"
-    children="Get your API key"
+    children="Get your personal access token"
  />
 </div>

--- a/src/pages/quickstart.mdx
+++ b/src/pages/quickstart.mdx
@@ -1,6 +1,9 @@
+import {HeroPattern} from "@/components/HeroPattern";
 export const description =
  'This guide will get you all set up and ready to use the Protocol API. We’ll cover how to get started an API client and how to make your first API request.'

+<HeroPattern/>
+
 # Quickstart

 This guide will get you all set up and ready to use the Protocol API. We'll cover how to get started using one of our API clients and how to make your first API request. We'll also look at where to go next to find all the information you need to take full advantage of our powerful REST API. {{ className: 'lead' }}