Update Docusaurus to latest (#407)

Author: kazk

.node-version

@@ -0,0 +1 @@
+v16.15.1

content/languages/agda/agda.md

@@ -13,6 +13,11 @@ module.exports = {
   projectName: "docs",
   // https://docusaurus.io/docs/next/api/themes/configuration
   themeConfig: {
+    docs: {
+      sidebar: {
+        hideable: true,
+      },
+    },
     colorMode: {
       defaultMode: "dark",
     },
@@ -47,7 +52,6 @@ module.exports = {
         },
       ],
     },
-    hideableSidebar: true,
     footer: {
       links: [],
       copyright: `Copyright © ${new Date().getFullYear()} Codewars`,

content/languages/lean/lean.md

@@ -16,8 +16,8 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.1",
-    "@docusaurus/preset-classic": "2.0.0-beta.1",
+    "@docusaurus/core": "^2.0.0-beta.21",
+    "@docusaurus/preset-classic": "^2.0.0-beta.21",
     "@mdx-js/react": "^1.6.21",
     "@tabler/icons": "^1.40.2",
     "clsx": "^1.1.1",

content/languages/rust/rust.md

@@ -106,7 +106,7 @@ module.exports = {
         {
           type: "category",
           label: "Agda",
-          items: ["languages/agda/index", "languages/agda/agda"],
+          items: ["languages/agda/index"],
         },
         {
           type: "category",
@@ -168,7 +168,10 @@ module.exports = {
             {
               type: "category",
               label: "Igloo",
-              items: ["languages/cpp/igloo/index", "languages/cpp/igloo/stringizers"],
+              items: [
+                "languages/cpp/igloo/index",
+                "languages/cpp/igloo/stringizers",
+              ],
             },
           ],
         },
@@ -210,7 +213,11 @@ module.exports = {
         {
           type: "category",
           label: "Factor",
-          items: ["languages/factor/index", "languages/factor/authoring", "languages/factor/testest"],
+          items: [
+            "languages/factor/index",
+            "languages/factor/authoring",
+            "languages/factor/testest",
+          ],
         },
         {
           type: "category",
@@ -288,12 +295,16 @@ module.exports = {
         {
           type: "category",
           label: "Lambda Calculus",
-          items: ["languages/lambdacalc/index", "languages/lambdacalc/authoring", "languages/lambdacalc/lc-test"],
+          items: [
+            "languages/lambdacalc/index",
+            "languages/lambdacalc/authoring",
+            "languages/lambdacalc/lc-test",
+          ],
         },
         {
           type: "category",
           label: "Lean",
-          items: ["languages/lean/index", "languages/lean/lean"],
+          items: ["languages/lean/index"],
         },
         {
           type: "category",
@@ -391,7 +402,7 @@ module.exports = {
         {
           type: "category",
           label: "Rust",
-          items: ["languages/rust/index", "languages/rust/rust"],
+          items: ["languages/rust/index"],
         },
         {
           type: "category",

docusaurus.config.js

@@ -84,7 +84,6 @@ const remapLanguageId = (id) => {
 };
 
 // Use shiki for syntax highlighting.
-// Also store Base64 encoded code in HTML, so we can use that to implement copy button.
 // TODO Decoration. Like Docusaurus builtin, or https://github.com/shikijs/shiki/issues/5
 //      or https://github.com/andrewbranch/gatsby-remark-vscode#line-highlighting
 const createHighlighter = ({ theme = "nord" } = {}) => {
@@ -159,8 +158,7 @@ const createHighlighter = ({ theme = "nord" } = {}) => {
         }
       }
 
-      const b64 = Buffer.from(code).toString("base64");
-      let html = `<pre style="background-color: ${bg}" codedata="${b64}">`;
+      let html = `<pre class="${theme}" style="background-color: ${bg}">`;
       html += `<code class="language-${lang}">`;
       for (const line of tokenLines) {
         html += `<span>`;

package.json

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { Props } from '@theme/CodeBlock';
+export default function CodeBlock({ children: rawChildren, ...props }: Props): JSX.Element;

sidebars.js

@@ -1,17 +1,24 @@
-import React, { useState } from "react";
 import copy from "copy-text-to-clipboard";
+import React, { useRef, useState } from "react";
 
-const CodeBlockWithCopy = ({ codedata, ...props }) => {
+const CodeBlock = ({ ...props }) => {
+  const pre = useRef(null);
   const [showCopied, setShowCopied] = useState(false);
   const handleCopyCode = () => {
-    copy(atob(codedata));
-    setShowCopied(true);
-    setTimeout(() => setShowCopied(false), 1500);
+    if (pre.current) {
+      copy(
+        Array.from(pre.current.querySelectorAll("code"))
+          .map((el) => el.textContent)
+          .join("\n")
+      );
+      setShowCopied(true);
+      setTimeout(() => setShowCopied(false), 1500);
+    }
   };
 
   return (
     <div className="relative group">
-      <pre {...props}></pre>
+      <pre ref={pre} {...props}></pre>
       <button
         type="button"
         aria-label={"Copy code to clipboard"}
@@ -24,4 +31,4 @@ const CodeBlockWithCopy = ({ codedata, ...props }) => {
   );
 };
 
-export default CodeBlockWithCopy;
+export default CodeBlock;

src/remark/shiki/index.js

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { Props } from '@theme/MDXComponents/Code';
+export default function MDXCode(props: Props): JSX.Element;

src/theme/CodeBlock/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export default function MDXCode(props) {
+  return <code {...props} />;
+}

src/theme/MDXComponents/CodeBlockWithCopy.jsx renamed to src/theme/CodeBlock/index.js

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { Props } from '@theme/MDXComponents/Pre';
+export default function MDXPre(props: Props): JSX.Element;

src/theme/MDXComponents/Code.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import CodeBlock from "@theme/CodeBlock";
+export default function MDXPre(props) {
+  return <CodeBlock {...props} />;
+}