improve docs

docs/favicon-formats.ts

@@ -0,0 +1,80 @@
+interface Favicon {
+  rel: string | null;
+  dimensions: [number, number];
+  image_format: string;
+  prefix: string;
+}
+
+export default [
+  { dimensions: [64, 64], image_format: 'ico', prefix: 'favicon', rel: null },
+  { dimensions: [16, 16], image_format: 'png', prefix: 'favicon', rel: 'icon' },
+  { dimensions: [32, 32], image_format: 'png', prefix: 'favicon', rel: 'icon' },
+  { dimensions: [64, 64], image_format: 'png', prefix: 'favicon', rel: 'icon' },
+  { dimensions: [96, 96], image_format: 'png', prefix: 'favicon', rel: 'icon' },
+  { dimensions: [180, 180], image_format: 'png', prefix: 'favicon', rel: 'icon' },
+  {
+    dimensions: [57, 57],
+    image_format: 'png',
+    prefix: 'apple-touch-icon',
+    rel: 'apple-touch-icon',
+  },
+  {
+    dimensions: [60, 60],
+    image_format: 'png',
+    prefix: 'apple-touch-icon',
+    rel: 'apple-touch-icon',
+  },
+  {
+    dimensions: [72, 72],
+    image_format: 'png',
+    prefix: 'apple-touch-icon',
+    rel: 'apple-touch-icon',
+  },
+  {
+    dimensions: [76, 76],
+    image_format: 'png',
+    prefix: 'apple-touch-icon',
+    rel: 'apple-touch-icon',
+  },
+  {
+    dimensions: [114, 114],
+    image_format: 'png',
+    prefix: 'apple-touch-icon',
+    rel: 'apple-touch-icon',
+  },
+  {
+    dimensions: [120, 120],
+    image_format: 'png',
+    prefix: 'apple-touch-icon',
+    rel: 'apple-touch-icon',
+  },
+  {
+    dimensions: [144, 144],
+    image_format: 'png',
+    prefix: 'apple-touch-icon',
+    rel: 'apple-touch-icon',
+  },
+  {
+    dimensions: [152, 152],
+    image_format: 'png',
+    prefix: 'apple-touch-icon',
+    rel: 'apple-touch-icon',
+  },
+  {
+    dimensions: [167, 167],
+    image_format: 'png',
+    prefix: 'apple-touch-icon',
+    rel: 'apple-touch-icon',
+  },
+  {
+    dimensions: [180, 180],
+    image_format: 'png',
+    prefix: 'apple-touch-icon',
+    rel: 'apple-touch-icon',
+  },
+  { dimensions: [70, 70], image_format: 'png', prefix: 'mstile', rel: null },
+  { dimensions: [270, 270], image_format: 'png', prefix: 'mstile', rel: null },
+  { dimensions: [310, 310], image_format: 'png', prefix: 'mstile', rel: null },
+  { dimensions: [310, 150], image_format: 'png', prefix: 'mstile', rel: null },
+  { dimensions: [196, 196], image_format: 'png', prefix: 'favicon', rel: 'shortcut icon' },
+] as Favicon[];

docs/pages/_meta.json

@@ -1,7 +1,33 @@
 {
-  "index": "hyperglass",
+  "index": { "title": "Introduction", "theme": { "breadcrumb": false } },
-  "introduction": "Introduction",
+  "---": {
+    "type": "separator"
+  },
   "installation": "Installation",
   "configuration": "Configuration",
-  "plugins": "Plugins"
+  "plugins": "Plugins",
+  "documentation": {
+    "title": "Documentation",
+    "type": "menu",
+    "items": {
+      "installation": {
+        "title": "Installation",
+        "href": "/installation"
+      },
+      "configuration": {
+        "title": "Configuration",
+        "href": "/configuration"
+      },
+      "plugins": {
+        "title": "Plugins",
+        "href": "/plugins"
+      }
+    }
+  },
+  "demo": {
+    "title": "Demo",
+    "type": "page",
+    "href": "https://demo.hyperglass.dev",
+    "newWindow": true
+  }
 }

docs/pages/configuration/_meta.json

@@ -1,6 +1,4 @@
 {
-  "examples": "Examples",
+  "reference": "Reference",
-  "config-file-reference": "Config File Reference",
+  "examples": "Examples"
-  "devices-file-reference": "Devices File Reference",
-  "directives-file-reference": "Directives File Reference"
 }

docs/pages/configuration/examples/_meta.json

@@ -1,5 +1,5 @@
 {
-  "add-your-own-command": "Add Your Own Command",
   "basic-configuration": "Basic Configuration",
+  "add-your-own-command": "Add Your Own Command",
   "customize-the-ui": "Customize the UI"
 }

docs/pages/configuration/reference/_meta.json

@@ -0,0 +1,5 @@
+{
+  "config": "Config File",
+  "devices": "Devices File",
+  "directives": "Directives File"
+}

docs/pages/configuration/reference/config/_meta.json

@@ -1,5 +1,4 @@
 {
-  "index": "Config File",
   "logging": "Logging & Webhooks",
   "web-ui": "Web UI"
 }

docs/pages/configuration/reference/config/web-ui.mdx

@@ -1,5 +1,5 @@
 import { Callout } from 'nextra-theme-docs';
-import { Color } from '../../../components/color';
+import { Color } from '~/components/color';
 
 ## Web UI
 

docs/pages/index.mdx

@@ -1 +1,44 @@
-# Test
+---
+title: Introduction
+description: Get started with hyperglass
+---
+
+import Link from 'next/link';
+import { Button } from 'nextra/components';
+
+## What is hyperglass?
+
+**hyperglass** is an open source network looking glass written by a network engineer for other network engineers. The purpose of a looking glass is to provide customers, peers, and complete strangers with unattended visibility into the an operator's network.
+
+hyperglass was created with the lofty goal of benefiting the internet community at-large by providing a faster, easier, and more secure way for operators to provide looking glass services to their customers, peers, and other network operators.
+
+## Features
+
+- BGP Route, BGP Community, BGP AS Path, Ping, & Traceroute
+- Full IPv6 support
+- Customizable everything: features, theme, UI/API text, error messages, commands
+- Built in support for:
+  - Arista EOS
+  - BIRD
+  - Cisco IOS-XR
+  - Cisco IOS/IOS-XE
+  - Cisco NX-OS
+  - FRRouting
+  - Huawei
+  - Juniper JunOS
+  - Mikrotik
+  - Nokia SR OS
+  - TNSR
+  - VyOS
+- Configurable support for any other [supported platform](platforms.mdx)
+- Optionally access devices via an SSH proxy/jump server
+- VRF support
+- Access List/prefix-list style query control to whitelist or blacklist query targets on a per-VRF basis
+- REST API with automatic, configurable OpenAPI documentation
+- Modern, responsive UI
+- Query multiple devices simultaneously
+- Browser-based DNS-over-HTTPS resolution of FQDN queries
+
+<Link href="/installation">
+  <Button>Get Started</Button>
+</Link>

docs/pages/introduction.mdx

@@ -1,44 +0,0 @@
----
-title: Introduction
-description: Welcome to hyperglass
----
-
-import Link from 'next/link';
-import { Button } from 'nextra/components';
-
-## What is hyperglass?
-
-**hyperglass** is an open source network looking glass written by a network engineer for other network engineers. The purpose of a looking glass is to provide customers, peers, and complete strangers with unattended visibility into the an operator's network.
-
-hyperglass was created with the lofty goal of benefiting the internet community at-large by providing a faster, easier, and more secure way for operators to provide looking glass services to their customers, peers, and other network operators.
-
-## Features
-
-- BGP Route, BGP Community, BGP AS Path, Ping, & Traceroute
-- Full IPv6 support
-- Customizable everything: features, theme, UI/API text, error messages, commands
-- Built in support for:
-  - Arista EOS
-  - BIRD
-  - Cisco IOS-XR
-  - Cisco IOS/IOS-XE
-  - Cisco NX-OS
-  - FRRouting
-  - Huawei
-  - Juniper JunOS
-  - Mikrotik
-  - Nokia SR OS
-  - TNSR
-  - VyOS
-- Configurable support for any other [supported platform](platforms.mdx)
-- Optionally access devices via an SSH proxy/jump server
-- VRF support
-- Access List/prefix-list style query control to whitelist or blacklist query targets on a per-VRF basis
-- REST API with automatic, configurable OpenAPI documentation
-- Modern, responsive UI
-- Query multiple devices simultaneously
-- Browser-based DNS-over-HTTPS resolution of FQDN queries
-
-<Link href="/installation">
-  <Button>Get Started</Button>
-</Link>

docs/theme.config.tsx

@@ -1,5 +1,7 @@
 import styles from './global.module.css';
-import { DocsThemeConfig } from 'nextra-theme-docs';
+import { useRouter } from 'next/router';
+import { useConfig, type DocsThemeConfig } from 'nextra-theme-docs';
+import faviconFormats from './favicon-formats';
 
 const NO_INDEX_FOLLOW = process.env.CF_PAGES_BRANCH !== 'main';
 
@@ -68,10 +70,61 @@ const config: DocsThemeConfig = {
       </svg>
     </span>
   ),
+
+  useNextSeoProps: () => {
+    const { asPath } = useRouter();
+    const { frontMatter, title } = useConfig();
+    return {
+      titleTemplate: '%s | hyperglass',
+      title: frontMatter.title || title,
+      openGraph: {
+        type: 'website',
+        url: `https://hyperglass.dev${asPath}`,
+        title: frontMatter.title || title,
+        description: frontMatter.description || 'hyperglass Documentation',
+        images: [
+          {
+            url: 'https://hyperglass.dev/opengraph.jpg',
+            width: 1200,
+            height: 630,
+            alt: 'hyperglass',
+          },
+        ],
+      },
+      twitter: { handle: '@thatmattlove', site: '@thatmattlove', cardType: 'summary_large_image' },
+      noindex: NO_INDEX_FOLLOW,
+      nofollow: NO_INDEX_FOLLOW,
+      additionalLinkTags: faviconFormats.map(fmt => {
+        const { image_format, dimensions, prefix, rel } = fmt;
+        const [w, h] = dimensions;
+        const href = `/img/${prefix}-${w}x${h}.${image_format}`;
+        return { rel: rel ?? '', href, type: `image/${image_format}` };
+      }),
+    };
+  },
+  banner: {
+    dismissible: true,
+    text: '🎉 hyperglass 2.0 is here!',
+  },
+  feedback: { content: null },
+  footer: { text: `© ${new Date().getFullYear()} hyperglass` },
+  chat: {
+    link: 'https://netdev.chat/',
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 448 512"
+        width="24"
+        height="24"
+        fill="currentColor"
+      >
+        <path d="M94.12 315.1c0 25.9-21.16 47.06-47.06 47.06S0 341 0 315.1c0-25.9 21.16-47.06 47.06-47.06h47.06v47.06zm23.72 0c0-25.9 21.16-47.06 47.06-47.06s47.06 21.16 47.06 47.06v117.84c0 25.9-21.16 47.06-47.06 47.06s-47.06-21.16-47.06-47.06V315.1zm47.06-188.98c-25.9 0-47.06-21.16-47.06-47.06S139 32 164.9 32s47.06 21.16 47.06 47.06v47.06H164.9zm0 23.72c25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06H47.06C21.16 243.96 0 222.8 0 196.9s21.16-47.06 47.06-47.06H164.9zm188.98 47.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06h-47.06V196.9zm-23.72 0c0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06V79.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06V196.9zM283.1 385.88c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06v-47.06h47.06zm0-23.72c-25.9 0-47.06-21.16-47.06-47.06 0-25.9 21.16-47.06 47.06-47.06h117.84c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06H283.1z" />
+      </svg>
+    ),
+  },
   project: {
     link: 'https://github.com/thatmattlove/hyperglass',
   },
-  useNextSeoProps: () => ({ noindex: NO_INDEX_FOLLOW, nofollow: NO_INDEX_FOLLOW }),
 };
 
 export default config;

docs/tsconfig.json

@@ -15,8 +15,12 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "paths": {
+      "~/*": ["./*"]
+    }
   },
+
   "exclude": ["node_modules", ".next"],
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "next.config.js"]
 }