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>
+ );
 };