Styling

Author: pomber

packages/mdx/dev/files.ts

@@ -9,13 +9,16 @@ export async function getFiles() {
     .filter(file => file.endsWith(".mdx"))
     .map(filename => filename.slice(0, -4))
 }
-
-export async function getCode(filename: string) {
+export async function getContent(filename: string) {
   const file = await fs.promises.readFile(
     `./dev/content/${filename}.mdx`,
     "utf8"
   )
 
+  return file
+}
+
+export async function getCode(file: string) {
   const code = String(
     await compile(file, {
       outputFormat: "function-body",

packages/mdx/pages/[name].tsx

@@ -2,7 +2,7 @@ import { runSync } from "@mdx-js/mdx"
 import * as runtime from "react/jsx-runtime.js"
 import { CH } from "../src/components"
 import Link from "next/link"
-import { getCode, getFiles } from "../dev/files"
+import { getCode, getContent, getFiles } from "../dev/files"
 
 export async function getStaticPaths() {
   const files = await getFiles()
@@ -14,8 +14,10 @@ export async function getStaticPaths() {
 
 export async function getStaticProps({ params }) {
   const { name = "test" } = params
+
   const files = await getFiles()
-  const code = await getCode(name)
+  const content = await getContent(name)
+  const code = await getCode(content)
   return {
     props: {
       tests: files,
@@ -25,7 +27,12 @@ export async function getStaticProps({ params }) {
   }
 }
 
-export default function Page({ current, code, tests }) {
+export default function Page({
+  current,
+  code,
+  tests,
+  content,
+}) {
   const { default: Content } = runSync(code, runtime)
   return (
     <div
@@ -36,44 +43,52 @@ export default function Page({ current, code, tests }) {
         margin: "8px",
       }}
     >
-      <nav
-        style={{
-          background: "#fafafa",
-          borderRadius: 4,
-          padding: 16,
-          minWidth: 180,
-        }}
-      >
-        <ul style={{ margin: 0, padding: 0 }}>
-          {tests.map(test => (
-            <li key={test} style={{ listStyle: "none" }}>
-              <Link href={`/${encodeURIComponent(test)}`}>
-                <a
-                  style={{
-                    color: "black",
-                    textDecoration: "none",
-                    fontWeight:
-                      test === current ? "bold" : "normal",
-                  }}
-                >
-                  {test}
-                </a>
-              </Link>
-            </li>
-          ))}
-        </ul>
-      </nav>
-      <div
-        style={{
-          maxWidth: 900,
-          minWidth: 600,
-          background: "#fafafa",
-          borderRadius: 4,
-          padding: 16,
-        }}
-      >
-        <Content components={{ CH }} />
-      </div>
+      <Sidebar tests={tests} current={current} />
+      <Result Content={Content} />
+    </div>
+  )
+}
+
+function Sidebar({ tests, current }) {
+  return (
+    <nav
+      style={{
+        background: "#fafafa",
+        borderRadius: 4,
+        padding: "16px 0",
+        minWidth: 180,
+      }}
+    >
+      <ul style={{ margin: 0, padding: 0 }}>
+        {tests.map(test => (
+          <li
+            key={test}
+            style={{ listStyle: "none" }}
+            className="sidebar-link"
+            data-active={test === current}
+          >
+            <Link href={`/${encodeURIComponent(test)}`}>
+              <a>{test}</a>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}
+
+function Result({ Content }) {
+  return (
+    <div
+      style={{
+        maxWidth: 900,
+        minWidth: 600,
+        background: "#fafafa",
+        borderRadius: 4,
+        padding: 16,
+      }}
+    >
+      <Content components={{ CH }} />
     </div>
   )
 }

packages/mdx/pages/styles.css

@@ -13,6 +13,26 @@ div#__next > div {
   /* --ch-scrollycoding-code-min-height: 500px;
   --ch-scrollycoding-sticker-width: 500px; */
 }
+
+.sidebar-link {
+  font-size: 14px;
+}
+
+.sidebar-link:hover {
+  background: rgba(30, 167, 253, 0.1);
+}
+
+.sidebar-link[data-active="true"] {
+  background: rgba(30, 167, 253, 0.15);
+}
+
+.sidebar-link a {
+  padding: 2px 16px;
+  display: block;
+  text-decoration: none;
+  color: black;
+}
+
 /* 
 nav {
   height: 40px;