TomokiMiyauci · Dec 22, 2021 · Dec 26, 2021 · Jan 1, 2022 · Jan 1, 2022 · Jan 1, 2022
diff --git a/.github/workflows/release-egg.yaml b/.github/workflows/release-egg.yaml
@@ -11,7 +11,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        deno: [1.16.x]
+        deno: [1.17.x]
 
     steps:
       - name: Checkout

diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
@@ -14,7 +14,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        deno: [1.16.0, 1.15.0]
+        deno: [1.17.2, 1.15.0]
 
     steps:
       - name: Checkout
@@ -35,7 +35,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        deno: [1.16.0 ,1.15.0]
+        deno: [1.17.2 ,1.15.0]
 
     steps:
       - name: Checkout

diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
@@ -13,7 +13,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, ubuntu-18.04, macos-latest, windows-latest]
-        deno: [1.16.0, 1.15.0]
+        deno: [1.17.2, 1.15.0]
 
     steps:
       - name: Checkout
@@ -34,7 +34,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, ubuntu-18.04, macos-latest, windows-latest]
-        deno: [1.16.0, 1.15.0]
+        deno: [1.17.2, 1.15.0]
 
     steps:
       - name: Checkout

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,11 @@
+# [1.0.0-beta.79](https://github.com/TomokiMiyauci/unitest/compare/v1.0.0-beta.78...v1.0.0-beta.79) (2022-01-06)
+
+
+### Features
+
+* **dummy:** add `anyBigInt` function ([8c50d41](https://github.com/TomokiMiyauci/unitest/commit/8c50d4138f8762b87eb2ffccdcdfbfcd630f4224))
+* **dummy:** add `anySymbol` function ([ea5d2b4](https://github.com/TomokiMiyauci/unitest/commit/ea5d2b4f95bb789b2930c773a51f1340becf1005))
+
 # [1.0.0-beta.78](https://github.com/TomokiMiyauci/unitest/compare/v1.0.0-beta.77...v1.0.0-beta.78) (2021-12-22)
 
 

diff --git a/_docs/aleph.config.ts b/_docs/aleph.config.ts
@@ -1,5 +1,5 @@
 // Copyright 2021-Present the Unitest authors. All rights reserved. MIT license.
-import markdown from "https://deno.land/x/aleph/plugins/markdown.ts";
+import markdown from "./plugins/markdown.ts";
 import type { Config } from "aleph/types";
 import unocss from "./plugins/unocss.ts";
 
@@ -9,8 +9,9 @@ export default <Config> {
     markdown({
       highlight: {
         provider: "highlight.js",
-        theme: "nord",
+        theme: "rainbow",
       },
+      toc: [2, 3],
     }),
   ],
   css: {

diff --git a/_docs/app.tsx b/_docs/app.tsx
@@ -1,6 +1,5 @@
 import React, { ComponentType } from "react";
 import Header from "@component/header.tsx";
-import Footer from "@component/footer.tsx";
 
 import "https://esm.sh/@unocss/reset/tailwind.css";
 
@@ -11,12 +10,18 @@ export default function App(
     <>
       <head>
         <link rel="icon" href="/logo.svg" type="image/svg+xml" />
+        <style>
+          {`
+        html, body {
+          scroll-behavior: smooth;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+        }
+      `}
+        </style>
       </head>
-      <main className="text-gray-700 antialiased">
-        <Header />
-        <Page {...pageProps} />
-        <Footer />
-      </main>
+      <Header />
+      <Page {...pageProps} />
     </>
   );
 }
diff --git a/_docs/components/docs_footer.tsx b/_docs/components/docs_footer.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+export default function Footer() {
+  return (
+    <footer className="pb-30 px-4 lg:px-8 mt-6">
+      <span className="text-gray-400">
+        Copyright © 2021 TomokiMiyauci
+      </span>
+    </footer>
+  );
+}
diff --git a/_docs/components/header.tsx b/_docs/components/header.tsx
@@ -3,7 +3,7 @@ import React from "react";
 export default function Header() {
   return (
     <header
-      className={`py-2 px-4 flex items-center justify-between inset-x-0 text-gray-600 sticky top-0 backdrop-filter backdrop-blur`}
+      className={`py-2 px-4 flex items-center justify-between inset-x-0 text-gray-600 sticky top-0 backdrop-filter backdrop-blur max-w-screen-2xl mx-auto`}
     >
       <a href="/">
         <h1 className="text-2xl space-x-2">
@@ -22,15 +22,6 @@ export default function Header() {
           Document
         </a>
 
-        {
-          /* <span className="relative group">
-          <span>
-            Locale
-          </span>
-          <DropDown className="absolute group-hover:inline-block opacity-0 transform scale-0 group-hover:scale-100 top-5 group-hover:opacity-100 transition duration-300 shadow p-2 rounded right-0" />
-        </span> */
-        }
-
         <a
           className="hover:text-emerald-500 transition-colors duration-300"
           href="https://github.com/TomokiMiyauci/unitest"

diff --git a/_docs/hooks/use_boolean.ts b/_docs/hooks/use_boolean.ts
@@ -0,0 +1,45 @@
+// Copyright 2021-Present the Unitest authors. All rights reserved. MIT license.
+import { useState } from "react";
+
+type VFn = () => void;
+
+/**
+ * Stateful state
+ */
+type State = boolean;
+
+/**
+ * Functions to update state
+ */
+type StateUpdater = { on: VFn; off: VFn; toggle: VFn };
+
+/** Hooks for switchable `boolean` function
+ * ```ts
+ * const [state, { on, off, toggle }] = useBoolean()
+ * on()
+ * state // true
+ * off()
+ * state // false
+ * toggle()
+ * state // true
+ * toggle()
+ * state // false
+ * ```
+ */
+const useBoolean = (
+  /**
+   * @defaultValue false
+   */
+  initialState: boolean | (() => boolean) = false,
+): [State, StateUpdater] => {
+  const [state, setState] = useState<boolean>(initialState);
+
+  const on: VFn = () => setState(true);
+  const off: VFn = () => setState(false);
+  const toggle: VFn = () => setState((state) => !state);
+
+  return [state, { on, off, toggle }];
+};
+
+export { useBoolean };
+export type { State, StateUpdater };
diff --git a/_docs/pages/docs.tsx b/_docs/pages/docs.tsx
@@ -1,47 +1,77 @@
-import React, { type ComponentType, useState } from "react";
+import React, { type ComponentType, useMemo, useState } from "react";
+import { useRouter } from "aleph/react";
 import { clsx } from "../deps.ts";
+import Footer from "../components/docs_footer.tsx";
+import type { Markdown } from "../plugins/markdown.ts";
+import "../styles/prose.css";
 
-type Doc = {
-  name: string;
+type Menu = {
+  title: string;
   path: string;
 };
 
-const docs: Doc[] = [
-  {
-    name: "Get Started",
-    path: "get-started",
-  },
-  {
-    name: "matcher",
-    path: "matcher",
-  },
-  {
-    name: "expect",
-    path: "expect",
-  },
-  {
-    name: "dummy",
-    path: "dummy",
-  },
-  {
-    name: "mock",
-    path: "mock",
-  },
-  {
-    name: "test",
-    path: "test",
-  },
-];
+type NavMenu = {
+  name: string;
+  items: (Menu & { submenu?: Menu[] })[];
+};
+
+const navMenu: NavMenu = {
+  name: "Documentation",
+  items: [
+    { title: "Get Started", path: "/docs/get-started" },
+    {
+      title: "matcher",
+      path: "/docs/matcher",
+    },
+    {
+      title: "expect",
+      path: "/docs/expect",
+    },
+    {
+      title: "dummy",
+      path: "/docs/dummy",
+    },
+    {
+      title: "mock",
+      path: "/docs/mock",
+    },
+    {
+      title: "test",
+      path: "/docs/test",
+    },
+  ],
+};
 
 type DocsProps = {
-  Page?: ComponentType<any>;
+  Page?: ComponentType<any> & Markdown;
 };
 
 export default function Docs({ Page }: DocsProps) {
   const [isOpen, setOpen] = useState(false);
+  const { pathname } = useRouter();
+
+  const navLinks = useMemo<Menu[]>(() => {
+    return navMenu.items.reduce((acc, cur) => {
+      if (cur.submenu) {
+        return [...acc, ...cur.submenu];
+      }
+      return [...acc, cur];
+    }, [] as Menu[]);
+  }, [pathname]);
+
+  const preLink = useMemo<Menu | undefined>(() => {
+    const i = navLinks.findIndex(({ path }) => path === pathname);
+    return navLinks[i - 1];
+  }, [navLinks, pathname]);
+
+  const nextLink = useMemo<Menu | undefined>(() => {
+    const i = navLinks.findIndex(({ path }) => path === pathname);
+    return navLinks[i + 1];
+  }, [navLinks, pathname]);
+
   return (
-    <>
-      <div className="top-50px md:fixed md:w-72">
+    <main className="max-w-screen-2xl mx-auto">
+      <section className="top-72px md:sticky md:float-left md:w-72">
         <button
           className="flex md:hidden space-x-2 items-center w-full px-2"
           onClick={() => setOpen(!isOpen)}
@@ -59,11 +89,11 @@ export default function Docs({ Page }: DocsProps) {
           })}
         >
           <h2 className="uppercase px-2 text-gray-400 text-sm">
-            documentation
+            {navMenu.name}
           </h2>
           <nav className="mt-2">
             <ul>
-              {docs.map(({ name, path }) => {
+              {navMenu.items.map(({ title, path }) => {
                 return (
                   <li
                     key={path}
@@ -72,20 +102,80 @@ export default function Docs({ Page }: DocsProps) {
                       className="px-2 py-0.5 flex transition-colors duration-200 hover:bg-gray-100 rounded"
                       data-active-className="text-teal-500 bg-gray-100"
                       rel="nav"
-                      href={`/docs/${path}`}
+                      href={path}
                     >
-                      <span>{name}</span>
+                      <span>{title}</span>
                     </a>
                   </li>
                 );
               })}
             </ul>
           </nav>
         </aside>
-      </div>
+      </section>
+
+      {
+        <aside className="w-60 hidden xl:block xl:sticky overflow-y-scroll h-92vh xl:float-right top-72px right-0">
+          <h5 className="mb-3">On this page</h5>
+          <ul>
+            {Page?.toc.map(({ title, id, escapedTitle }) => (
+              <li key={id}>
+                <a
+                  className="block opacity-60 transition-colors duration-200 hover:opacity-100"
+                  href={`#${escapedTitle}`}
+                  onClick={(
+                    e,
+                  ) => {
+                    e.preventDefault();
+                    const el = document.getElementById(escapedTitle);
+                    if (el) {
+                      const header = document.getElementsByTagName("header");
+
+                      window.scrollTo({
+                        "behavior": "smooth",
+                        "top": el.offsetTop -
+                          (header.item(0)?.clientHeight ?? 0),
+                      });
+                    }
+                  }}
+                >
+                  {title}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </aside>
+      }
 
       {Page &&
-        <Page className="prose max-w-screen-lg md:ml-72 p-4 md:p-8" />}
-    </>
+        (
+          <article className="prose prose-gray max-w-none md:ml-72 xl:mx-72">
+            <Page className="px-4 lg:px-8" />
+
+            <nav className="px-4 lg:px-8">
+              <div className="flex justify-between">
+                {preLink && (
+                  <a className="space-x-2" href={preLink.path}>
+                    <span className="i-mdi-arrow-left-thin-circle-outline" />
+                    <span>
+                      {preLink.title}
+                    </span>
+                  </a>
+                )}
+                {nextLink && (
+                  <a className="space-x-2" href={nextLink.path}>
+                    <span>
+                      {nextLink.title}
+                    </span>
+                    <span className="i-mdi-arrow-right-thin-circle-outline" />
+                  </a>
+                )}
+              </div>
+            </nav>
+
+            <Footer />
+          </article>
+        )}
+    </main>
   );
 }