start work on doc footer (tokio-rs#35)

Author: carllerche

components/content.tsx

@@ -1,4 +1,5 @@
 import Menu from "../components/menu";
+import { DiscordIcon, GitHubIcon } from "./icons";
 import ReactMarkdown from "react-markdown/with-html";
 import SyntaxHighlighter from "react-syntax-highlighter";
 
@@ -10,7 +11,7 @@ const CodeBlock = ({ language, value }) => {
   );
 };
 
-export default function Content({ menu, href, title, body }) {
+export default function Content({ menu, href, title, next, prev, body }) {
   return (
     <>
       <div className="columns is-marginless tk-docs">
@@ -31,6 +32,60 @@ export default function Content({ menu, href, title, body }) {
               source={body}
               renderers={{ code: CodeBlock }}
             />
+            <div className="tk-doc-footer">
+              <div className="level">
+                <div className="level-left">
+                  <div className="level-item tk-prev">
+                    {next && (
+                      <a href={next.href}>
+                        <span
+                          className="tk-arrow"
+                          style={{ marginRight: "0.5rem" }}
+                        >
+                          <img src="/img/arrow-left.svg" />
+                        </span>
+                        {next.title}
+                      </a>
+                    )}
+                  </div>
+                </div>
+                <div className="level-right">
+                  <div className="level-item tk-next">
+                    {prev && (
+                      <a href={prev.href}>
+                        {prev.title}
+                        <span
+                          className="tk-arrow"
+                          style={{ marginLeft: "0.5rem" }}
+                        >
+                          <img src="/img/arrow-right.svg" />
+                        </span>
+                      </a>
+                    )}
+                  </div>
+                </div>
+              </div>
+              <div className="level">
+                <div className="level-left">
+                  <div className="level-item tk-help-links">
+                    <p>
+                      Get Help:
+                      <a href="https://github.com/tokio-rs/tokio/discussions">
+                        <GitHubIcon className="is-medium" />
+                      </a>
+                      <a href="https://discord.gg/tokio">
+                        <DiscordIcon className="is-medium" />
+                      </a>
+                    </p>
+                  </div>
+                </div>
+                <div className="level-right">
+                  <div className="level-item tk-edit-this-page">
+                    <a href="#">Edit this page</a>
+                  </div>
+                </div>
+              </div>
+            </div>
           </section>
         </div>
       </div>

components/footer.tsx

@@ -2,20 +2,28 @@ import React from "react";
 import { DiscordIcon, GitHubIcon, TwitterIcon } from "./icons";
 
 export default function Footer() {
-    const libs = [
-        ["Tokio", "/tokio", "https://github.com/tokio-rs/tokio"],
-        ["Hyper", "https://docs.rs/hyper", "https://github.com/hyperium/hyper"],
-        ["Tonic", "https://docs.rs/tonic", "https://github.com/hyperium/tonic"],
-        ["Tower", "https://docs.rs/tower", "https://github.com/tower-rs/tower"],
-        ["Mio", "https://docs.rs/mio", "https://github.com/tokio-rs/mio"],
-        ["Tracing", "https://docs.rs/tracing", "https://github.com/tokio-rs/tracing"],
-    ].map(([name, docs, github]) => (
-        <div key={name} className="column is-one-third">
-            <p className="tk-lib-name">{name}</p>
-            <p><a href={docs}>Docs</a></p>
-            <p><a href={github}>Github</a></p>
-        </div>
-    ));
+  const libs = [
+    ["Tokio", "/tokio", "https://github.com/tokio-rs/tokio"],
+    ["Hyper", "https://docs.rs/hyper", "https://github.com/hyperium/hyper"],
+    ["Tonic", "https://docs.rs/tonic", "https://github.com/hyperium/tonic"],
+    ["Tower", "https://docs.rs/tower", "https://github.com/tower-rs/tower"],
+    ["Mio", "https://docs.rs/mio", "https://github.com/tokio-rs/mio"],
+    [
+      "Tracing",
+      "https://docs.rs/tracing",
+      "https://github.com/tokio-rs/tracing",
+    ],
+  ].map(([name, docs, github]) => (
+    <div key={name} className="column is-one-third">
+      <p className="tk-lib-name">{name}</p>
+      <p>
+        <a href={docs}>Docs</a>
+      </p>
+      <p>
+        <a href={github}>Github</a>
+      </p>
+    </div>
+  ));
   return (
     <footer className="footer">
       <div className="container">
@@ -28,27 +36,27 @@ export default function Footer() {
               height="56"
             />
             <div className="tk-help-links">
-                <p>
-                    Get Help:
-                    <a href="https://github.com/tokio-rs/tokio/discussions">
-                        <GitHubIcon className="is-medium"/>
-                    </a>
-                    <a href="https://discord.gg/tokio">
-                        <DiscordIcon className="is-medium"/>
-                    </a>
-                </p>
-                <p>
-                    Stay up to date:
-                    <a href="https://twitter.com/tokio_rs">
-                        <TwitterIcon className="is-medium"/>
-                    </a>
-                </p>
+              <p>
+                Get Help:
+                <a href="https://github.com/tokio-rs/tokio/discussions">
+                  <GitHubIcon className="is-medium" />
+                </a>
+                <a href="https://discord.gg/tokio">
+                  <DiscordIcon className="is-medium" />
+                </a>
+              </p>
+              <p>
+                Stay up to date:
+                <a href="https://twitter.com/tokio_rs">
+                  <TwitterIcon className="is-medium" />
+                </a>
+              </p>
             </div>
           </div>
           <div className="column is-half">
-              <div className="columns is-multiline is-mobile tk-footer-libs">
-                {libs}
-              </div>
+            <div className="columns is-multiline is-mobile tk-footer-libs">
+              {libs}
+            </div>
           </div>
         </div>
       </div>

components/icons.tsx

@@ -5,11 +5,15 @@ const DISCORD_VIEW_BOX = "0 0 245 240";
 
 type Props = {
   children: ReactNode;
-  className?: string,
+  className?: string;
   viewBox?: string;
 };
 
-const Icon: FC<Props> = ({ children, className = "", viewBox = DEFAULT_VIEW_BOX }) => (
+const Icon: FC<Props> = ({
+  children,
+  className = "",
+  viewBox = DEFAULT_VIEW_BOX,
+}) => (
   <span className={`icon ${className}`}>
     <svg
       width="45"
@@ -22,36 +26,40 @@ const Icon: FC<Props> = ({ children, className = "", viewBox = DEFAULT_VIEW_BOX
   </span>
 );
 
-export function GitHubIcon({className = ""}) {
+export function GitHubIcon({ className = "" }) {
   return (
     <Icon className={className}>
       <path
+        className="tk-svg-path"
         d="M896 128q209 0 385.5 103t279.5 279.5 103 385.5q0 251-146.5 451.5t-378.5 277.5q-27 5-40-7t-13-30q0-3 .5-76.5t.5-134.5q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-119-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-85-13.5q-45 113-8 204-79 87-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-39 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 88.5t.5 54.5q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103zm-477 1103q3-7-7-12-10-3-13 2-3 7 7 12 9 6 13-2zm31 34q7-5-2-16-10-9-16-3-7 5 2 16 10 10 16 3zm30 45q9-7 0-19-8-13-17-6-9 5 0 18t17 7zm42 42q8-8-4-19-12-12-20-3-9 8 4 19 12 12 20 3zm57 25q3-11-13-16-15-4-19 7t13 15q15 6 19-6zm63 5q0-13-17-11-16 0-16 11 0 13 17 11 16 0 16-11zm58-10q-2-11-18-9-16 3-14 15t18 8 14-14z"
         fill="#fff"
       />
     </Icon>
   );
 }
 
-export function TwitterIcon({className = ""}) {
+export function TwitterIcon({ className = "" }) {
   return (
     <Icon className={className}>
       <path
+        className="tk-svg-path"
         d="M1684 408q-67 98-162 167 1 14 1 42 0 130-38 259.5t-115.5 248.5-184.5 210.5-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5t-114-159.5q33 5 61 5 43 0 85-11-112-23-185.5-111.5t-73.5-205.5v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5t371.5 99.5q-8-38-8-74 0-134 94.5-228.5t228.5-94.5q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z"
         fill="#fff"
       />
     </Icon>
   );
 }
 
-export function DiscordIcon({className = ""}) {
+export function DiscordIcon({ className = "" }) {
   return (
     <Icon className={className} viewBox={DISCORD_VIEW_BOX}>
       <path
+        className="tk-svg-path"
         fill="#FFF"
         d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zM140.9 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z"
       />
       <path
+        className="tk-svg-path"
         fill="#FFF"
         d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z"
       />

components/menu.jsx

@@ -30,7 +30,7 @@ export default function Menu({ href, menu }) {
       {/* TODO: hook this up, only when needed */}
       <p className="menu-label tk-menu-back">
         <img
-          src="/img/left-arrow.svg"
+          src="/img/arrow-left-small.svg"
           style={{
             display: "inline-block",
             verticalAlign: "middle",

components/social-links.tsx

@@ -22,7 +22,11 @@ const DATA = [
 const SocialLinks: FC = () => (
   <>
     {DATA.map((link) => (
-      <a className="navbar-item navbar-icon tk-social" href={link.url} key={link.name}>
+      <a
+        className="navbar-item navbar-icon tk-social"
+        href={link.url}
+        key={link.name}
+      >
         {link.icon}
       </a>
     ))}

components/syn.tsx

@@ -0,0 +1,109 @@
+export default {
+  hljs: {
+    display: "block",
+    overflowX: "auto",
+    padding: "0.5em",
+    color: "#000",
+    background: "#f8f8ff",
+  },
+  "hljs-comment": {
+    color: "#408080",
+    fontStyle: "italic",
+  },
+  "hljs-quote": {
+    color: "#408080",
+    fontStyle: "italic",
+  },
+  "hljs-keyword": {
+    color: "#954121",
+  },
+  "hljs-selector-tag": {
+    color: "#954121",
+  },
+  "hljs-literal": {
+    color: "#954121",
+  },
+  "hljs-subst": {
+    color: "#954121",
+  },
+  "hljs-number": {
+    color: "#40a070",
+  },
+  "hljs-string": {
+    color: "#219161",
+  },
+  "hljs-doctag": {
+    color: "#219161",
+  },
+  "hljs-selector-id": {
+    color: "#19469d",
+  },
+  "hljs-selector-class": {
+    color: "#19469d",
+  },
+  "hljs-section": {
+    color: "#19469d",
+  },
+  "hljs-type": {
+    color: "#19469d",
+  },
+  "hljs-params": {
+    color: "#00f",
+  },
+  "hljs-title": {
+    color: "#458",
+    fontWeight: "bold",
+  },
+  "hljs-tag": {
+    color: "#000080",
+    fontWeight: "normal",
+  },
+  "hljs-name": {
+    color: "#000080",
+    fontWeight: "normal",
+  },
+  "hljs-attribute": {
+    color: "#000080",
+    fontWeight: "normal",
+  },
+  "hljs-variable": {
+    color: "#008080",
+  },
+  "hljs-template-variable": {
+    color: "#008080",
+  },
+  "hljs-regexp": {
+    color: "#b68",
+  },
+  "hljs-link": {
+    color: "#b68",
+  },
+  "hljs-symbol": {
+    color: "#990073",
+  },
+  "hljs-bullet": {
+    color: "#990073",
+  },
+  "hljs-built_in": {
+    color: "#0086b3",
+  },
+  "hljs-builtin-name": {
+    color: "#0086b3",
+  },
+  "hljs-meta": {
+    color: "#999",
+    fontWeight: "bold",
+  },
+  "hljs-deletion": {
+    background: "#fdd",
+  },
+  "hljs-addition": {
+    background: "#dfd",
+  },
+  "hljs-emphasis": {
+    fontStyle: "italic",
+  },
+  "hljs-strong": {
+    fontWeight: "bold",
+  },
+};

lib/page.js

@@ -2,10 +2,25 @@ import Content from "../components/content";
 import Layout from "../components/layout";
 
 export default function Page({ app, menu, page: { href, title, body } }) {
+  const next = {
+    href: "#",
+    title: "Reducing tail latencies wit...",
+  };
+  const prev = {
+    href: "#",
+    title: "Announcing Mio 0.7-alpha.1",
+  };
   return (
     <>
       <Layout blog={app.blog}>
-        <Content href={href} title={title} menu={menu} body={body} />
+        <Content
+          href={href}
+          title={title}
+          menu={menu}
+          next={next}
+          prev={prev}
+          body={body}
+        />
       </Layout>
     </>
   );