make things pretty

packages/docs/app/components/external-link.tsx

@@ -0,0 +1,9 @@
+import type { ComponentPropsWithoutRef } from "react"
+
+export function ExternalLink(props: ComponentPropsWithoutRef<"a">) {
+  return (
+    <a target="_blank" rel="noopener noreferrer" {...props}>
+      {props.children}
+    </a>
+  )
+}

packages/docs/app/components/header-layout.tsx

@@ -0,0 +1,25 @@
+import clsx from "clsx"
+import { useScrolled } from "~/hooks/dom/use-scrolled"
+
+export function HeaderLayout({
+  header,
+  body,
+}: {
+  header: React.ReactNode
+  body: React.ReactNode
+}) {
+  const isScrolled = useScrolled()
+  return (
+    <div className="isolate">
+      <header
+        className={clsx(
+          isScrolled ? "bg-slate-700/30" : "bg-slate-800",
+          "shadow-md sticky top-0 py-3 backdrop-blur-sm transition z-10",
+        )}
+      >
+        <div className="m-auto max-w-screen-lg px-6">{header}</div>
+      </header>
+      <div className="m-auto max-w-screen-lg px-6 mt-6">{body}</div>
+    </div>
+  )
+}

packages/docs/app/components/header.tsx

@@ -1,16 +0,0 @@
-import clsx from "clsx"
-import { useScrolled } from "~/hooks/dom/use-scrolled"
-
-export function Header({ children }: { children: React.ReactNode }) {
-  const isScrolled = useScrolled()
-  return (
-    <header
-      className={clsx(
-        isScrolled ? "bg-slate-700/30" : "bg-slate-800",
-        "shadow-md sticky top-0 px-4 py-3 backdrop-blur-sm transition",
-      )}
-    >
-      {children}
-    </header>
-  )
-}

packages/docs/app/components/side-nav.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react"
+
+export function SideNav({
+  heading,
+  children,
+}: {
+  heading: ReactNode
+  children: ReactNode
+}) {
+  return (
+    <nav className="w-64 sticky top-0">
+      <h2 className="text-2xl mt-1">{heading}</h2>
+      <div className="mt-3 flex flex-col gap-2 items-start">{children}</div>
+    </nav>
+  )
+}

packages/docs/app/components/sidebar-layout.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react"
+import { useEffect, useRef, useState } from "react"
+
+export function SidebarLayout({
+  sidebar,
+  body,
+}: {
+  sidebar: ReactNode
+  body: ReactNode
+}) {
+  const [offsetTop, setOffsetTop] = useState(0)
+  const sidebarRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    setOffsetTop(sidebarRef.current?.offsetTop ?? 0)
+  }, [sidebarRef])
+
+  return (
+    <div className="flex items-start gap-6">
+      <div className="w-64 sticky" style={{ top: offsetTop }} ref={sidebarRef}>
+        {sidebar}
+      </div>
+      <div className="flex-1">{body}</div>
+    </div>
+  )
+}

packages/docs/app/prism-theme.css

@@ -0,0 +1,126 @@
+/**
+ * Nord Theme Originally by Arctic Ice Studio
+ * https://nordtheme.com
+ *
+ * Ported for PrismJS by Zane Hitchcoxc (@zwhitchcox) and Gabriel Ramos (@gabrieluizramos)
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #f8f8f2;
+  background: none;
+  /* font-family: "Fira Code", Consolas, Monaco, "Andale Mono", "Ubuntu Mono",
+    monospace; */
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+  border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  /* background: #2e3440; */
+  background: rgba(0, 0, 0, 0.3);
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #636f88;
+}
+
+.token.punctuation {
+  color: #81a1c1;
+}
+
+.namespace {
+  opacity: 0.7;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #81a1c1;
+}
+
+.token.number {
+  color: #b48ead;
+}
+
+.token.boolean {
+  color: #81a1c1;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #a3be8c;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+  color: #81a1c1;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name {
+  color: #88c0d0;
+}
+
+.token.keyword {
+  color: #81a1c1;
+}
+
+.token.regex,
+.token.important {
+  color: #ebcb8b;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

packages/docs/app/root.tsx

@@ -1,5 +1,12 @@
+import { CodeIcon } from "@heroicons/react/outline"
+import {
+  DatabaseIcon,
+  DocumentTextIcon,
+  ExternalLinkIcon,
+} from "@heroicons/react/solid"
 import type { LinksFunction, MetaFunction } from "remix"
 import {
+  Link,
   Links,
   LiveReload,
   Meta,
@@ -7,13 +14,17 @@ import {
   Scripts,
   ScrollRestoration,
 } from "remix"
-import { Header } from "~/components/header"
+import { ExternalLink } from "~/components/external-link"
+import { HeaderLayout } from "~/components/header-layout"
+import { linkClass } from "~/styles"
+import prismThemeCss from "./prism-theme.css"
 
 export const meta: MetaFunction = () => {
   return { title: "New Remix App" }
 }
 
 export const links: LinksFunction = () => [
+  { rel: "stylesheet", href: prismThemeCss },
   { rel: "stylesheet", href: "/tailwind.css" },
 ]
 
@@ -23,18 +34,48 @@ export default function App() {
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link
+          rel="preconnect"
+          href="https://fonts.gstatic.com"
+          crossOrigin=""
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Rubik:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
+          rel="stylesheet"
+        />
         <Meta />
         <Links />
       </head>
       <body>
-        <Header>
+        <HeaderLayout
-          <div className="m-auto max-w-screen-xl px-4">
+          header={
-            <h1 className="text-3xl font-light">reacord</h1>
+            <nav className="flex justify-between items-center">
-          </div>
+              <Link to="/">
-        </Header>
+                <h1 className="text-3xl font-light">
-        <div className="m-auto max-w-screen-xl px-4 mt-8">
+                  reacord{" "}
-          <Outlet />
+                  <CodeIcon className="inline w-8 align-sub opacity-50" />
+                </h1>
+              </Link>
+              <div className="flex gap-4">
+                <Link className={linkClass} to="/docs/getting-started">
+                  <DocumentTextIcon className="inline align-sub w-5" /> Guides
+                </Link>
+                <Link className={linkClass} to="/api">
+                  <DatabaseIcon className="inline align-sub w-5" /> API
+                  Reference
+                </Link>
+                <ExternalLink
+                  className={linkClass}
+                  href="https://github.com/itsMapleLeaf/reacord"
+                >
+                  <ExternalLinkIcon className="inline align-sub w-5" /> GitHub
+                </ExternalLink>
               </div>
+            </nav>
+          }
+          body={<Outlet />}
+        />
         <ScrollRestoration />
         <Scripts />
         {process.env.NODE_ENV === "development" && <LiveReload />}

packages/docs/app/routes/docs.tsx

@@ -0,0 +1,32 @@
+import { Link, Outlet } from "remix"
+import { SideNav } from "~/components/side-nav"
+import { SidebarLayout } from "~/components/sidebar-layout"
+import { linkClass } from "~/styles"
+
+export default function Docs() {
+  return (
+    <SidebarLayout
+      sidebar={
+        <SideNav heading="Guides">
+          <Link className={linkClass} to="getting-started">
+            Getting Started
+          </Link>
+          <Link className={linkClass} to="embeds">
+            Embeds
+          </Link>
+          <Link className={linkClass} to="buttons">
+            Buttons
+          </Link>
+          <Link className={linkClass} to="select-menus">
+            Select Menus
+          </Link>
+        </SideNav>
+      }
+      body={
+        <section className="prose max-w-none prose-invert prose-h1:font-light flex-1 prose-h1:mb-4 prose-p:my-4 prose-pre:text-[15px] prose-pre:font-monospace prose-h2:font-light h-[200vh]">
+          <Outlet />
+        </section>
+      }
+    />
+  )
+}

packages/docs/app/routes/docs/getting-started.md

@@ -0,0 +1,30 @@
+---
+meta:
+  title: Getting Started
+  description: Learn how to get started with Reacord.
+---
+
+# Getting Started
+
+welcome
+
+- install it and do the thing
+- then do another thing
+
+## here's a code block
+
+```tsx
+import React from "react"
+
+function Counter() {
+  const [count, setCount] = useState(0)
+  return (
+    <>
+      You clicked {count} times
+      <Button onClick={() => setCount(count + 1)}>Click me</Button>
+    </>
+  )
+}
+```
+
+yeah

packages/docs/app/styles.ts

@@ -0,0 +1,8 @@
+import clsx from "clsx"
+
+export const linkClass = clsx`
+  font-medium inline-block relative
+  opacity-60 hover:opacity-100 transition-opacity
+  after:absolute after:block after:w-full after:h-px after:bg-white/50 after:translate-y-[3px] after:opacity-0 after:transition
+  hover:after:translate-y-[-1px] hover:after:opacity-100
+`

packages/docs/package.json

@@ -10,8 +10,10 @@
     "start": "remix-serve build"
   },
   "dependencies": {
+    "@heroicons/react": "^1.0.5",
     "@remix-run/react": "^1.1.1",
     "@remix-run/serve": "^1.1.1",
+    "@tailwindcss/typography": "^0.5.0",
     "autoprefixer": "^10.4.1",
     "clsx": "^1.1.1",
     "postcss": "^8.4.5",
@@ -29,6 +31,8 @@
     "@types/react-dom": "^17.0.9",
     "concurrently": "^6.5.1",
     "prettier": "^2.5.1",
+    "rehype-highlight": "^5.0.2",
+    "rehype-prism-plus": "^1.1.3",
     "typedoc": "^0.22.10",
     "typescript": "^4.1.2"
   },

packages/docs/remix.config.js

@@ -1,7 +1,8 @@
+// @ts-nocheck
+/* eslint-disable unicorn/prefer-module */
 /**
  * @type {import('@remix-run/dev/config').AppConfig}
  */
-// eslint-disable-next-line unicorn/prefer-module
 module.exports = {
   appDirectory: "app",
   assetsBuildDirectory: "public/build",
@@ -9,4 +10,12 @@ module.exports = {
   serverBuildDirectory: "build",
   devServerPort: 8002,
   ignoredRouteFiles: [".*"],
+  mdx: async (filename) => {
+    const highlight = await import("rehype-prism-plus").then(
+      (mod) => mod.default,
+    )
+    return {
+      rehypePlugins: [highlight],
+    }
+  },
 }

packages/docs/remix.env.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="@remix-run/dev" />
 /// <reference types="@remix-run/node/globals" />
+declare module "@tailwindcss/typography"

packages/docs/tailwind.config.js

@@ -1,8 +1,13 @@
+/* eslint-disable unicorn/prefer-module */
 // eslint-disable-next-line unicorn/prefer-module
 module.exports = {
   content: ["./app/**/*.{ts,tsx}"],
   theme: {
+    fontFamily: {
+      sans: ["Rubik", "sans-serif"],
+      monospace: ["'JetBrains Mono'", "monospace"],
+    },
     extend: {},
   },
-  plugins: [],
+  plugins: [require("@tailwindcss/typography")],
 }

pnpm-lock.yaml

@@ -34,10 +34,12 @@ importers:
 
   packages/docs:
     specifiers:
+      '@heroicons/react': ^1.0.5
       '@itsmapleleaf/configs': ^1.1.2
       '@remix-run/dev': ^1.1.1
       '@remix-run/react': ^1.1.1
       '@remix-run/serve': ^1.1.1
+      '@tailwindcss/typography': ^0.5.0
       '@types/node': '*'
       '@types/react': ^17.0.24
       '@types/react-dom': ^17.0.9
@@ -48,14 +50,18 @@ importers:
       prettier: ^2.5.1
       react: ^17.0.2
       react-dom: ^17.0.2
+      rehype-highlight: ^5.0.2
+      rehype-prism-plus: ^1.1.3
       remix: ^1.1.1
       remix-tailwind: ^0.2.1
       tailwindcss: ^3.0.8
       typedoc: ^0.22.10
       typescript: ^4.1.2
     dependencies:
+      '@heroicons/react': 1.0.5_react@17.0.2
       '@remix-run/react': 1.1.1_react-dom@17.0.2+react@17.0.2
       '@remix-run/serve': 1.1.1_react-dom@17.0.2+react@17.0.2
+      '@tailwindcss/typography': 0.5.0_tailwindcss@3.0.8
       autoprefixer: 10.4.1_postcss@8.4.5
       clsx: 1.1.1
       postcss: 8.4.5
@@ -72,6 +78,8 @@ importers:
       '@types/react-dom': 17.0.11
       concurrently: 6.5.1
       prettier: 2.5.1
+      rehype-highlight: 5.0.2
+      rehype-prism-plus: 1.1.3
       typedoc: 0.22.10_typescript@4.5.4
       typescript: 4.5.4
 
@@ -539,6 +547,14 @@ packages:
     resolution: {integrity: sha512-82cpyJyKRoQoRi+14ibCeGPu0CwypgtBAdBhq1WfvagpCZNKqwXbKwXllYSMG91DhmG4jt9gN8eP6lGOtozuaw==}
     dev: true
 
+  /@heroicons/react/1.0.5_react@17.0.2:
+    resolution: {integrity: sha512-UDMyLM2KavIu2vlWfMspapw9yii7aoLwzI2Hudx4fyoPwfKfxU8r3cL8dEBXOjcLG0/oOONZzbT14M1HoNtEcg==}
+    peerDependencies:
+      react: '>= 16'
+    dependencies:
+      react: 17.0.2
+    dev: false
+
   /@humanwhocodes/config-array/0.9.2:
     resolution: {integrity: sha512-UXOuFCGcwciWckOpmfKDq/GyhlTf9pN/BzG//x8p8zTOFEcGuA68ANXheFS0AGvy3qgZqLBUkMs7hqzqCKOVwA==}
     engines: {node: '>=10.10.0'}
@@ -1002,6 +1018,18 @@ packages:
       defer-to-connect: 2.0.1
     dev: true
 
+  /@tailwindcss/typography/0.5.0_tailwindcss@3.0.8:
+    resolution: {integrity: sha512-1p/3C6C+JJziS/ghtG8ACYalbA2SyLJY27Pm33cVTlAoY6VQ7zfm2H64cPxUMBkVIlWXTtWHhZcZJPobMRmQAA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1 || insiders'
+    dependencies:
+      lodash.castarray: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      lodash.uniq: 4.5.0
+      tailwindcss: 3.0.8_cefe482e8d38053bbf3d5815e0c551b3
+    dev: false
+
   /@tootallnate/once/1.1.2:
     resolution: {integrity: sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==}
     engines: {node: '>= 6'}
@@ -1204,10 +1232,18 @@ packages:
     resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
     dev: false
 
+  /@types/parse5/6.0.3:
+    resolution: {integrity: sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==}
+    dev: true
+
   /@types/prettier/2.4.2:
     resolution: {integrity: sha512-ekoj4qOQYp7CvjX8ZDBgN86w3MqQhLE1hczEJbEIjgFEumDy+na/4AJAbLXfgEWFNB2pKadM5rPFtuSGMWK7xA==}
     dev: true
 
+  /@types/prismjs/1.16.6:
+    resolution: {integrity: sha512-dTvnamRITNqNkqhlBd235kZl3KfVJQQoT5jkXeiWSBK7i4/TLKBNLV0S1wOt8gy4E2TY722KLtdmv2xc6+Wevg==}
+    dev: true
+
   /@types/prop-types/15.7.4:
     resolution: {integrity: sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==}
 
@@ -2181,6 +2217,10 @@ packages:
       rsvp: 4.8.5
     dev: true
 
+  /ccount/2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+    dev: true
+
   /chalk/2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
     engines: {node: '>=4'}
@@ -4489,6 +4529,32 @@ packages:
     dependencies:
       function-bind: 1.1.1
 
+  /hast-util-from-parse5/7.1.0:
+    resolution: {integrity: sha512-m8yhANIAccpU4K6+121KpPP55sSl9/samzQSQGpb0mTExcNh2WlvjtMwSWFhg6uqD4Rr6Nfa8N6TMypQM51rzQ==}
+    dependencies:
+      '@types/hast': 2.3.4
+      '@types/parse5': 6.0.3
+      '@types/unist': 2.0.6
+      hastscript: 7.0.2
+      property-information: 6.1.1
+      vfile: 5.2.0
+      vfile-location: 4.0.1
+      web-namespaces: 2.0.1
+    dev: true
+
+  /hast-util-is-element/2.1.2:
+    resolution: {integrity: sha512-thjnlGAnwP8ef/GSO1Q8BfVk2gundnc2peGQqEg2kUt/IqesiGg/5mSwN2fE7nLzy61pg88NG6xV+UrGOrx9EA==}
+    dependencies:
+      '@types/hast': 2.3.4
+      '@types/unist': 2.0.6
+    dev: true
+
+  /hast-util-parse-selector/3.1.0:
+    resolution: {integrity: sha512-AyjlI2pTAZEOeu7GeBPZhROx0RHBnydkQIXlhnFzDi0qfXTmGUWoCYZtomHbrdrheV4VFUlPcfJ6LMF5T6sQzg==}
+    dependencies:
+      '@types/hast': 2.3.4
+    dev: true
+
   /hast-util-to-estree/2.0.2:
     resolution: {integrity: sha512-UQrZVeBj6A9od0lpFvqHKNSH9zvDrNoyWKbveu1a2oSCXEDUI+3bnd6BoiQLPnLrcXXn/jzJ6y9hmJTTlvf8lQ==}
     dependencies:
@@ -4510,10 +4576,54 @@ packages:
       - supports-color
     dev: true
 
+  /hast-util-to-html/8.0.3:
+    resolution: {integrity: sha512-/D/E5ymdPYhHpPkuTHOUkSatxr4w1ZKrZsG0Zv/3C2SRVT0JFJG53VS45AMrBtYk0wp5A7ksEhiC8QaOZM95+A==}
+    dependencies:
+      '@types/hast': 2.3.4
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.2
+      hast-util-is-element: 2.1.2
+      hast-util-whitespace: 2.0.0
+      html-void-elements: 2.0.1
+      property-information: 6.1.1
+      space-separated-tokens: 2.0.1
+      stringify-entities: 4.0.2
+      unist-util-is: 5.1.1
+    dev: true
+
+  /hast-util-to-string/2.0.0:
+    resolution: {integrity: sha512-02AQ3vLhuH3FisaMM+i/9sm4OXGSq1UhOOCpTLLQtHdL3tZt7qil69r8M8iDkZYyC0HCFylcYoP+8IO7ddta1A==}
+    dependencies:
+      '@types/hast': 2.3.4
+    dev: true
+
+  /hast-util-to-text/3.1.1:
+    resolution: {integrity: sha512-7S3mOBxACy8syL45hCn3J7rHqYaXkxRfsX6LXEU5Shz4nt4GxdjtMUtG+T6G/ZLUHd7kslFAf14kAN71bz30xA==}
+    dependencies:
+      '@types/hast': 2.3.4
+      hast-util-is-element: 2.1.2
+      unist-util-find-after: 4.0.0
+    dev: true
+
   /hast-util-whitespace/2.0.0:
     resolution: {integrity: sha512-Pkw+xBHuV6xFeJprJe2BBEoDV+AvQySaz3pPDRUs5PNZEMQjpXJJueqrpcHIXxnWTcAGi/UOCgVShlkY6kLoqg==}
     dev: true
 
+  /hastscript/7.0.2:
+    resolution: {integrity: sha512-uA8ooUY4ipaBvKcMuPehTAB/YfFLSSzCwFSwT6ltJbocFUKH/GDHLN+tflq7lSRf9H86uOuxOFkh1KgIy3Gg2g==}
+    dependencies:
+      '@types/hast': 2.3.4
+      comma-separated-tokens: 2.0.2
+      hast-util-parse-selector: 3.1.0
+      property-information: 6.1.1
+      space-separated-tokens: 2.0.1
+    dev: true
+
+  /highlight.js/11.3.1:
+    resolution: {integrity: sha512-PUhCRnPjLtiLHZAQ5A/Dt5F8cWZeMyj9KRsACsWT+OD6OP0x6dp5OmT5jdx0JgEyPxPZZIPQpRN2TciUT7occw==}
+    engines: {node: '>=12.0.0'}
+    dev: true
+
   /history/5.2.0:
     resolution: {integrity: sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==}
     dependencies:
@@ -4535,6 +4645,10 @@ packages:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
     dev: true
 
+  /html-void-elements/2.0.1:
+    resolution: {integrity: sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==}
+    dev: true
+
   /http-cache-semantics/4.1.0:
     resolution: {integrity: sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==}
     dev: true
@@ -5927,13 +6041,24 @@ packages:
     resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
     dev: true
 
+  /lodash.castarray/4.4.0:
+    resolution: {integrity: sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=}
+    dev: false
+
   /lodash.debounce/4.0.8:
     resolution: {integrity: sha1-gteb/zCmfEAF/9XiUVMArZyk168=}
     dev: true
 
+  /lodash.isplainobject/4.0.6:
+    resolution: {integrity: sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=}
+    dev: false
+
   /lodash.merge/4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
-    dev: true
+
+  /lodash.uniq/4.5.0:
+    resolution: {integrity: sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=}
+    dev: false
 
   /lodash/4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
@@ -5975,6 +6100,14 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /lowlight/2.4.1:
+    resolution: {integrity: sha512-mQkAG0zGQ9lcYecEft+hl9uV1fD6HpURA83/TYrsxKvb8xX2mfyB+aaV/A/aWmhhEcWVzr9Cc+l/fvUYfEUumw==}
+    dependencies:
+      '@types/hast': 2.3.4
+      fault: 2.0.1
+      highlight.js: 11.3.1
+    dev: true
+
   /lru-cache/6.0.0:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
@@ -7096,6 +7229,10 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /parse-numeric-range/1.3.0:
+    resolution: {integrity: sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ==}
+    dev: true
+
   /parse5/6.0.1:
     resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==}
     dev: true
@@ -7304,6 +7441,10 @@ packages:
       parse-ms: 2.1.0
     dev: true
 
+  /prismjs/1.25.0:
+    resolution: {integrity: sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg==}
+    dev: true
+
   /progress/2.0.3:
     resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
     engines: {node: '>=0.4.0'}
@@ -7526,6 +7667,16 @@ packages:
       strip-indent: 3.0.0
     dev: true
 
+  /refractor/4.3.0:
+    resolution: {integrity: sha512-avSi9ItM6ewXJJIid5KzAgGi7AWpGatAKvQYqLFqZYZsc9klJ7IZVBZv1ocbgZANnZQOVAX46geNd3XQZxWyuw==}
+    dependencies:
+      '@types/hast': 2.3.4
+      '@types/prismjs': 1.16.6
+      hastscript: 7.0.2
+      parse-entities: 4.0.0
+      prismjs: 1.25.0
+    dev: true
+
   /regenerator-runtime/0.13.9:
     resolution: {integrity: sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==}
 
@@ -7569,6 +7720,38 @@ packages:
       rc: 1.2.8
     dev: true
 
+  /rehype-highlight/5.0.2:
+    resolution: {integrity: sha512-ZNm8V8BQUDn05cJPzAu/PjiloaFFrh+Pt3bY+NCcdCggI7Uyl5mW0FGR7RATeIz5/ECUd1D8Kvjt4HaLPmnOMw==}
+    dependencies:
+      '@types/hast': 2.3.4
+      hast-util-to-text: 3.1.1
+      lowlight: 2.4.1
+      unified: 10.1.1
+      unist-util-visit: 4.1.0
+    dev: true
+
+  /rehype-parse/8.0.3:
+    resolution: {integrity: sha512-RGw0CVt+0S6KdvpE8bbP2Db9WXclQcIX7A0ufM3QFqAhTo/ddJMQrrI2j3cijlRPZlGK8R3pRgC8U5HyV76IDw==}
+    dependencies:
+      '@types/hast': 2.3.4
+      hast-util-from-parse5: 7.1.0
+      parse5: 6.0.1
+      unified: 10.1.1
+    dev: true
+
+  /rehype-prism-plus/1.1.3:
+    resolution: {integrity: sha512-ADk7Wr5HJO0igRfwYOzBi2AYu8Wd9YRsDOxp/fRtZXjelujr8PHjEkYNmH9TEKTJp2U72vU4tKaOn/49MuhDUw==}
+    dependencies:
+      hast-util-to-html: 8.0.3
+      hast-util-to-string: 2.0.0
+      parse-numeric-range: 1.3.0
+      refractor: 4.3.0
+      rehype-parse: 8.0.3
+      unified: 10.1.1
+      unist-util-filter: 4.0.0
+      unist-util-visit: 4.1.0
+    dev: true
+
   /remark-frontmatter/4.0.1:
     resolution: {integrity: sha512-38fJrB0KnmD3E33a5jZC/5+gGAC2WKNiPw1/fdXJvijBlhA7RCsvJklrYJakS0HedninvaCYW8lQGf9C918GfA==}
     dependencies:
@@ -8667,6 +8850,21 @@ packages:
       '@types/unist': 2.0.6
     dev: true
 
+  /unist-util-filter/4.0.0:
+    resolution: {integrity: sha512-H4iTOv2p+n83xjhx7eGFA3zSx7Xcv3Iv9lNQRpXiR8dmm9LtslhyjVlQrZLbkk4jwUrJgc8PPGkOOrfhb76s4Q==}
+    dependencies:
+      '@types/unist': 2.0.6
+      unist-util-is: 5.1.1
+      unist-util-visit-parents: 5.1.0
+    dev: true
+
+  /unist-util-find-after/4.0.0:
+    resolution: {integrity: sha512-gfpsxKQde7atVF30n5Gff2fQhAc4/HTOV4CvkXpTg9wRfQhZWdXitpyXHWB6YcYgnsxLx+4gGHeVjCTAAp9sjw==}
+    dependencies:
+      '@types/unist': 2.0.6
+      unist-util-is: 5.1.1
+    dev: true
+
   /unist-util-generated/2.0.0:
     resolution: {integrity: sha512-TiWE6DVtVe7Ye2QxOVW9kqybs6cZexNwTwSMVgkfjEReqy/xwGpAXb99OxktoWwmL+Z+Epb0Dn8/GNDYP1wnUw==}
     dev: true
@@ -8849,6 +9047,13 @@ packages:
     engines: {node: '>= 0.8'}
     dev: false
 
+  /vfile-location/4.0.1:
+    resolution: {integrity: sha512-JDxPlTbZrZCQXogGheBHjbRWjESSPEak770XwWPfw5mTc1v1nWGLB/apzZxsx8a0SJVfF8HK8ql8RD308vXRUw==}
+    dependencies:
+      '@types/unist': 2.0.6
+      vfile: 5.2.0
+    dev: true
+
   /vfile-message/3.1.0:
     resolution: {integrity: sha512-4QJbBk+DkPEhBXq3f260xSaWtjE4gPKOfulzfMFF8ZNwaPZieWsg3iVlcmF04+eebzpcpeXOOFMfrYzJHVYg+g==}
     dependencies:
@@ -8906,6 +9111,10 @@ packages:
       '@zxing/text-encoding': 0.9.0
     dev: false
 
+  /web-namespaces/2.0.1:
+    resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
+    dev: true
+
   /web-streams-polyfill/3.2.0:
     resolution: {integrity: sha512-EqPmREeOzttaLRm5HS7io98goBgZ7IVz79aDvqjD0kYXLtFZTc0T/U6wHTPKyIjb+MdN7DFIIX6hgdBEpWmfPA==}
     engines: {node: '>= 8'}