Update docs framework

docs/.gitignore

@@ -1,3 +1,6 @@
+# Project
+theme-og
+
 # Dependencies
 /node_modules
 

docs/docs/introduction.mdx

@@ -7,7 +7,7 @@ description: Welcome to hyperglass
 
 import Link from "@docusaurus/Link";
 import useBaseUrl from "@docusaurus/useBaseUrl";
-import classnames from "classnames";
+import clsx from "clsx";
 import styles from "./styles.module.css";
 
 ## What is hyperglass?
@@ -44,7 +44,7 @@ hyperglass was created with the lofty goal of benefiting the internet community
 - Browser-based DNS-over-HTTPS resolution of FQDN queries
 
 <Link
-  className={classnames(
+  className={clsx(
     "button button--outline button--secondary button--lg",
     styles.getStarted
   )}

docs/docusaurus.config.js

@@ -20,15 +20,23 @@ const docusaurusConfig = {
       apiKey: algoliaKey || "dev",
       indexName: "hyperglass",
     },
+    prism: {
+      additionalLanguages: ["shell-session", "ini", "nginx", "yaml"],
+      theme: require("./src/prism-dracula"),
+    },
     navbar: {
-      links: [
+      items: [
         { to: "docs/introduction", label: "Docs", position: "left" },
-        { to: "screenshots", label: "Screenshots", position: "left" },
         { href: "https://demo.hyperglass.io", label: "Demo", position: "left" },
+        {
+          href: githubURL,
+          position: "right",
+          className: "header-github-link",
+          "aria-label": "GitHub Repository",
+        },
       ],
     },
     footer: {
-      style: "dark",
       links: [
         {
           title: "Docs",
@@ -51,16 +59,12 @@ const docusaurusConfig = {
           title: "Community",
           items: [
             {
-              label: "Telegram",
-              href: "https://t.me/hyperglasslg",
-            },
-            {
-              label: "Gitter",
-              href: "https://gitter.im/hyperglass",
+              label: "Slack",
+              href: "https://netdev.chat",
             },
             {
-              label: "Keybase",
-              href: "https://keybase.io/team/hyperglass",
+              label: "Telegram",
+              href: "https://t.me/hyperglasslg",
             },
           ],
         },
@@ -89,7 +93,7 @@ const docusaurusConfig = {
           editUrl: githubURL + "/edit/v1.0.0/docs/",
         },
         theme: {
-          customCss: require.resolve("./src/css/custom.css"),
+          customCss: [require.resolve("./src/css/custom.css")],
         },
       },
     ],

docs/package.json

@@ -1,22 +1,30 @@
 {
-  "name": "docs",
-  "version": "0.0.0",
+  "name": "hyperglass-docs",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
+    "docusaurus": "docusaurus",
     "start": "docusaurus start",
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
-    "deploy": "docusaurus deploy"
+    "deploy": "docusaurus deploy",
+    "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.0-alpha.58",
-    "@docusaurus/preset-classic": "^2.0.0-alpha.58",
-    "classnames": "^2.2.6",
+    "@docusaurus/core": "^2.0.0-beta.0",
+    "@docusaurus/preset-classic": "^2.0.0-beta.0",
+    "@mdx-js/react": "^1.6.22",
+    "@svgr/webpack": "^5.5.0",
+    "clsx": "^1.1.1",
     "globby": "^11.0.1",
     "prismjs": "^1.19.0",
     "prop-types": "^15.7.2",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "url-loader": "^4.1.1",
     "use-media": "^1.4.0"
   },
   "browserslist": {
@@ -32,7 +40,13 @@
     ]
   },
   "devDependencies": {
-    "prettier": "^2.0.5"
+    "@docusaurus/module-type-aliases": "^2.0.0-beta.0",
+    "@tsconfig/docusaurus": "^1.0.2",
+    "@types/react": "^17.0.8",
+    "@types/react-helmet": "^6.1.1",
+    "@types/react-router-dom": "^5.1.7",
+    "prettier": "^2.0.5",
+    "typescript": "^4.3.2"
   },
   "prettier": {
     "[yaml]": {

docs/src/components/Font.js

@@ -1,12 +1,12 @@
 import React from "react";
-import classnames from "classnames";
+import clsx from "clsx";
 import styles from "./fonts.module.css";
 
 export default ({ name }) => {
-    const fontClass = { Nunito: "fontBody", "Fira Code": "fontMono" };
-    return (
-        <a href={`https://fonts.google.com/specimen/${name.split(" ").join("+")}`}>
-            <span className={classnames(styles.font, styles[fontClass[name]])}>{name}</span>
-        </a>
-    );
+  const fontClass = { Nunito: "fontBody", "Fira Code": "fontMono" };
+  return (
+    <a href={`https://fonts.google.com/specimen/${name.split(" ").join("+")}`}>
+      <span className={clsx(styles.font, styles[fontClass[name]])}>{name}</span>
+    </a>
+  );
 };