Update to Next.js 13, React 18 (tokio-rs#688)

Author: luooooob

.gitignore

@@ -16,6 +16,7 @@ tutorial-code/Cargo.lock
 # next.js
 /.next/
 /out/
+/dist/
 
 # production
 /build

components/content.tsx

@@ -1,66 +1,8 @@
 import Menu from "../components/menu";
-import classnames from "classnames";
 import { DiscordIcon, GitHubIcon } from "./icons";
-import React from "react";
-import ReactMarkdown from "react-markdown/with-html";
-import SyntaxHighlighter from "react-syntax-highlighter";
-import GithubSlugger from "github-slugger";
-import CustomBlocks from "remark-custom-blocks";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import Link from "next/link";
 
-const CodeBlock = ({ language, value }) => {
-  // Remove lines starting with `# `. This is code to make the doc tests pass
-  // but should not be displayed.
-  value = value
-    .split("\n")
-    .filter((line) => !line.startsWith("# "))
-    .join("\n");
-
-  return (
-    <SyntaxHighlighter useInlineStyles={false} language={language}>
-      {value}
-    </SyntaxHighlighter>
-  );
-};
-
-const Blocks = {
-  warning: {
-    classes: "is-warning",
-  },
-  info: {
-    classes: "is-info",
-  },
-};
-
-function Heading(slugger, headings, props) {
-  let children = React.Children.toArray(props.children);
-  let text = children.reduce(flatten, "");
-  let slug = slugger.slug(text);
-  headings.push({ level: props.level, title: text, slug });
-  return React.createElement("h" + props.level, { id: slug }, props.children);
-}
-
-function Block({
-  children,
-  data: {
-    hProperties: { className },
-  },
-}) {
-  return (
-    <blockquote className={classnames(...className)}>{children}</blockquote>
-  );
-}
-
-function BlockBody({ children }) {
-  return children;
-}
-
-function flatten(text, child) {
-  return typeof child === "string"
-    ? text + child
-    : React.Children.toArray(child.props.children).reduce(flatten, text);
-}
-
 function Footer({ next, prev, mdPath }) {
   let edit = `https://github.com/tokio-rs/website/edit/master/content/${mdPath}`;
   return (
@@ -127,32 +69,33 @@ function insertHeading(heading, menu, level = 1) {
 }
 
 function TableOfContents({ headings }) {
-  let menu = [];
+  const list = useMemo(() => {
+    let menu = [];
+    for (const heading of headings) {
+      insertHeading(heading, menu);
+    }
 
-  for (const heading of headings) {
-    insertHeading(heading, menu);
-  }
+    return menu.map((entry) => {
+      const heading = entry.heading;
 
-  const list = menu.map((entry) => {
-    const heading = entry.heading;
+      let nested = entry.nested.map((entry) => {
+        const heading = entry.heading;
 
-    let nested = entry.nested.map((entry) => {
-      const heading = entry.heading;
+        return (
+          <li key={heading.slug}>
+            <a href={`#${heading.slug}`}>{heading.title}</a>
+          </li>
+        );
+      });
 
       return (
         <li key={heading.slug}>
           <a href={`#${heading.slug}`}>{heading.title}</a>
+          {entry.nested.length > 0 && <ul>{nested}</ul>}
         </li>
       );
     });
-
-    return (
-      <li key={heading.slug}>
-        <a href={`#${heading.slug}`}>{heading.title}</a>
-        {entry.nested.length > 0 && <ul>{nested}</ul>}
-      </li>
-    );
-  });
+  }, [headings]);
 
   return (
     <aside className="column is-one-third tk-content-summary">
@@ -161,46 +104,52 @@ function TableOfContents({ headings }) {
   );
 }
 
-export default function Content({ menu, href, title, next, prev, body, mdPath }) {
-  const slugger = new GithubSlugger();
-  let headings = [{ level: 1, title, slug: "" }];
-  const HeadingRenderer = (props) => {
-    return Heading(slugger, headings, props);
-  };
+export default function Content({
+  menu,
+  href,
+  title,
+  next,
+  prev,
+  body,
+  mdPath,
+}) {
+  const isBlogRoute = href.startsWith("/blog");
+
+  const [headings, setHeadings] = useState([]);
+  const mdRef = useRef<HTMLDivElement>(null);
 
-  let isBlogRoute = href.startsWith("/blog");
+  useEffect(() => {
+    mdRef.current?.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach((el) => {
+      const level = Number(el.tagName.slice(-1));
+      const title = el.textContent;
+      const slug = el.id;
+      setHeadings((headings) => [...headings, { level, title, slug }]);
+    });
+    return () => {
+      setHeadings([]);
+    };
+  }, [mdRef]);
 
   return (
     <>
       <div className="columns is-marginless tk-docs">
         <div className="column is-one-quarter tk-docs-nav">
           <Menu href={href} menu={menu}>
-            { isBlogRoute && (
-                <div className="all-posts-link">
-                  <Link href="/blog"><a>More Blog Posts</a></Link>
-                </div>
-              )
-            }
+            {isBlogRoute && (
+              <div className="all-posts-link">
+                <Link href="/blog">More Blog Posts</Link>
+              </div>
+            )}
           </Menu>
         </div>
         <div className="column is-three-quarters tk-content">
           <section className="section content">
             <div className="columns">
-              <div className="column is-two-thirds tk-markdown">
-                <h1 className="title">{title}</h1>
-                <ReactMarkdown
-                  escapeHtml={false}
-                  source={body}
-                  renderers={{
-                    code: CodeBlock,
-                    heading: HeadingRenderer,
-                    warningCustomBlock: Block,
-                    warningCustomBlockBody: BlockBody,
-                    infoCustomBlock: Block,
-                    infoCustomBlockBody: BlockBody,
-                  }}
-                  plugins={[[CustomBlocks, Blocks]]}
-                />
+              <div className="column is-two-thirds tk-markdown" ref={mdRef}>
+                <h1 className="title" id="">
+                  {title}
+                </h1>
+                <div dangerouslySetInnerHTML={{ __html: body }}></div>
                 <Footer next={next} prev={prev} mdPath={mdPath} />
               </div>
               <TableOfContents headings={headings} />

components/footer.tsx

@@ -61,19 +61,31 @@ export default function Footer() {
         </div>
         <div className="container has-text-centered">
           <p>
-            Built with all the love in the world by <a href="https://twitter.com/carllerche" target="_blank"
-                                                       rel="noopener">@carllerche</a>
+            Built with all the love in the world by{" "}
+            <a
+              href="https://twitter.com/carllerche"
+              target="_blank"
+              rel="noopener"
+            >
+              @carllerche
+            </a>
           </p>
         </div>
         <div className="container has-text-centered">
           <p>
-            with the help of <a
-            href="https://github.com/tokio-rs/tokio/graphs/contributors">our contributors</a>.
+            with the help of{" "}
+            <a href="https://github.com/tokio-rs/tokio/graphs/contributors">
+              our contributors
+            </a>
+            .
           </p>
         </div>
         <div className="container has-text-centered">
           <p>
-            Hosted by <a href="https://netlify.com" rel="sponsored nofollow">Netlify</a>
+            Hosted by{" "}
+            <a href="https://netlify.com" rel="sponsored nofollow">
+              Netlify
+            </a>
           </p>
         </div>
       </div>

components/layout.tsx

@@ -2,6 +2,13 @@ import React, { FC, ReactNode } from "react";
 
 import Head from "next/head";
 import Navigation from "./nav";
+import { Roboto } from "@next/font/google";
+
+const roboto = Roboto({
+  weight: ["300", "400", "500", "700"],
+  display: "swap",
+  subsets: ["latin"],
+});
 
 type Props = {
   title?: string;
@@ -19,19 +26,22 @@ const Layout: FC<Props> = ({ title, blog, children }) => (
     <Head>
       <title>{pageTitle(title)}</title>
       <meta name="viewport" content="width=device-width, initial-scale=1" />
-      <meta name="description" content="Tokio is a runtime for writing reliable asynchronous applications with Rust. It provides async I/O, networking, scheduling, timers, and more."></meta>
+      <meta
+        name="description"
+        content="Tokio is a runtime for writing reliable asynchronous applications with Rust. It provides async I/O, networking, scheduling, timers, and more."
+      ></meta>
       <link rel="alternate icon" type="image/png" href="/favicon-32x32.png" />
       <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-      <link rel="alternate" type="application/rss+xml" href="/_next/static/feed.xml" />
-
       <link
-        href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"
-        rel="stylesheet"
+        rel="alternate"
+        type="application/rss+xml"
+        href="/_next/static/feed.xml"
       />
-      <script defer src="/tk-stack.js"></script>
     </Head>
-    <Navigation blog={blog} />
-    {children}
+    <main className={roboto.className}>
+      <Navigation blog={blog} />
+      {children}
+    </main>
   </>
 );
 

components/libs.tsx

@@ -11,14 +11,12 @@ const LIBS: Library[] = [
   {
     id: "runtime",
     name: "Reliable",
-    desc:
-      "Tokio's APIs are memory-safe, thread-safe, and misuse-resistant. This helps prevent common bugs, such as unbounded queues, buffer overflows, and task starvation.",
+    desc: "Tokio's APIs are memory-safe, thread-safe, and misuse-resistant. This helps prevent common bugs, such as unbounded queues, buffer overflows, and task starvation.",
   },
   {
     id: "hyper",
     name: "Fast",
-    desc:
-      "Building on top of Rust, Tokio provides a multi-threaded, work-stealing scheduler. Applications can process hundreds of thousands of requests per second with minimal overhead.",
+    desc: "Building on top of Rust, Tokio provides a multi-threaded, work-stealing scheduler. Applications can process hundreds of thousands of requests per second with minimal overhead.",
   },
   {
     id: "tonic",
@@ -34,8 +32,7 @@ const LIBS: Library[] = [
   {
     id: "tower",
     name: "Flexible",
-    desc:
-      "The needs of a server application differ from that of an embedded device. Although Tokio comes with defaults that work well out of the box, it also provides the knobs needed to fine tune to different cases.",
+    desc: "The needs of a server application differ from that of an embedded device. Although Tokio comes with defaults that work well out of the box, it also provides the knobs needed to fine tune to different cases.",
   },
 ];
 

components/menu.jsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { Fragment, useCallback, useState } from "react";
 import classnames from "classnames";
 import Link from "next/link";
 
@@ -20,10 +20,10 @@ const monthNames = [
 export default function Menu({ href, menu, children }) {
   const groups = menu.map(({ key, title, nested }) => {
     return (
-      <React.Fragment key={key}>
+      <Fragment key={key}>
         <p className="menu-label">{title}</p>
         <Level1 href={href} menu={nested} />
-      </React.Fragment>
+      </Fragment>
     );
   });
 
@@ -120,11 +120,11 @@ function Level2({ href, menu }) {
 
   if (menu.data.subtitle) {
     const className = href == menu.href ? "is-active" : "";
-    items.unshift((
+    items.unshift(
       <li key={menu.key} className={className}>
         <a href={menu.href}>{menu.data.subtitle}</a>
       </li>
-    ));
+    );
   }
 
   return <ul>{items}</ul>;