different icons package

package.json

@@ -12,21 +12,22 @@
   "dependencies": {
     "@fontsource/jetbrains-mono": "^4.5.12",
     "@fontsource/lato": "^4.5.10",
+    "highlight.js": "^11.7.0",
     "normalize.css": "^8.0.1",
     "prism-themes": "^1.9.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.8.0",
+    "rehype-highlight": "^6.0.0"
   },
   "devDependencies": {
     "@bspeice/vite-plugin-blog": "^1.1.0",
     "@mdx-js/rollup": "^2.3.0",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
-    "@types/remark-prism": "^1.3.4",
     "@vitejs/plugin-react-swc": "^3.0.0",
     "husky": "^8.0.0",
     "pretty-quick": "^3.1.3",
-    "remark-prism": "^1.3.6",
     "typescript": "^4.9.3",
     "vite": "^4.2.0"
   }

pages/LayoutBase.tsx

@@ -1,20 +1,33 @@
-import { PropsWithChildren } from "react";
+import { PropsWithChildren, StrictMode } from "react";
+import { IconContext } from "react-icons";
+import { FaHome, FaUser } from "react-icons/fa";
 
 import "./style.css";
 
-const Sidebar: React.FC = () => (
-  <span className={"navbar"}>
-    <a href="/">Home</a>/<a href="/about">About</a>
+const Navbar: React.FC = () => (
+  <span className="navbar">
+    <a href="/">
+      <FaHome />
+      Home
+    </a>
+    <span>/</span>
+    <a href="/about">
+      <FaUser />
+      About
+    </a>
   </span>
 );
 
 const Layout: React.FC<PropsWithChildren> = ({ children }) => (
-  <div className="gridOffset">
-    <div className="gridOffsetSide">
-      <Sidebar />
-    </div>
-    {children}
-  </div>
+  <StrictMode>
+    <IconContext.Provider value={{ className: "icon" }}>
+      <div className="gridOffset">
+        <Navbar />
+        <hr style={{ marginTop: "0" }} />
+        {children}
+      </div>
+    </IconContext.Provider>
+  </StrictMode>
 );
 
 export default Layout;

pages/about.mdx

@@ -1,4 +1,4 @@
-import Layout from "./Page";
+import Layout from "./LayoutPage";
 export default Layout;
 
 Developer currently living in New York City

pages/index.tsx

@@ -4,6 +4,7 @@ export default function () {
   return (
     <Layout>
       <p>Is this thing on?</p>
+      <a href="/2019/02/the-whole-world">Code</a>
     </Layout>
   );
 }

pages/style.css

@@ -2,12 +2,23 @@
 
 @import "@fontsource/lato";
 @import "@fontsource/jetbrains-mono";
-@import "prism-themes/themes/prism-material-dark";
+
+@import "highlight.js/styles/atom-one-dark.css";
+
+:root {
+  --color-primary: #000;
+  --color-secondary: #777;
+  --color-tertiary: #999;
+  --color-highlight: #f4f4f4;
+
+  --color-primary-highlight: #fff;
+  --color-secondary-highlight: #999;
+}
 
 body {
   font-family: "Lato", sans-serif;
-  font-size: 14pt;
-  line-height: 1.4;
+  font-size: 15pt;
+  line-height: 1.5;
 }
 
 h1,
@@ -20,6 +31,20 @@ h6 {
   margin-bottom: 0;
 }
 
+h3 {
+  color: var(--color-secondary);
+}
+
+h4,
+h5,
+h6 {
+  color: var(--color-tertiary);
+}
+
+a {
+  color: var(--color-secondary);
+}
+
 p,
 ul {
   margin-top: 0.5em;
@@ -30,43 +55,80 @@ pre {
   padding: 1em 0;
 }
 
-code,
-code[class*="language-"] {
+code {
   font-family: "JetBrains Mono", monospace;
+  font-size: 14pt;
+  background-color: var(--color-highlight);
+}
+
+a,
+a > code {
+  text-decoration: dotted;
+  border-color: var(--color-secondary);
+  border-bottom-style: dotted;
+  border-bottom-width: 1px;
+}
+
+a,
+a > code {
+  transition: all ease 0.5s;
+}
+
+a:hover,
+a > code:hover {
+  color: var(--color-primary-highlight);
+  background-color: var(--color-secondary-highlight);
+  border-bottom: none;
 }
 
 .gridOffset {
   display: grid;
   grid-template-columns:
     [full-start] minmax(1em, 2fr)
-    [main-start] minmax(0, 45em) [main-end]
-    minmax(0, 1fr)
-    [side-start] minmax(0, 3fr) [side-end]
-    minmax(1em, 2fr) [full-end];
+    [main-start] minmax(0, 42em) [main-end]
+    minmax(0, 5fr) [full-end];
 }
 
-.gridOffset > :not(.gridOffsetSide) {
+.gridOffset > * {
   grid-column: main;
 }
 
-.gridOffset > div.remark-highlight,
-.gridOffset > div.remark-highlight > pre {
+.gridOffset hr {
+  display: inherit;
+  grid-column: main;
+  grid-template-columns: inherit;
+  border-style: solid;
+  border-color: var(--color-secondary);
+}
+
+.gridOffset > pre {
   display: inherit;
   grid-column: full;
   grid-template-columns: inherit;
 }
 
-.gridOffset > div.remark-highlight > pre > code {
+.gridOffset > pre > code {
   grid-column: main;
 }
 
-.gridOffsetSide {
-  grid-column: side;
-  margin-top: 1em;
-  margin-bottom: 1em;
+.navbar {
+  text-align: right;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
 }
 
-.navbar > * {
-  margin-left: 0.5em;
-  margin-right: 0.5em;
+.navbar :not(.icon) {
+  padding-left: 0.25em;
+  padding-right: 0.25em;
+  text-decoration: none;
+  border-bottom-style: none;
+}
+
+.icon {
+  vertical-align: middle;
+  margin-right: 0.3em;
+}
+
+.icon-post {
+  vertical-align: text-top;
 }

posts/LayoutBlog.tsx

@@ -1,4 +1,6 @@
 import { PropsWithChildren } from "react";
+import { IconContext } from "react-icons";
+import { FaCalendar } from "react-icons/fa";
 
 import Base from "../pages/LayoutBase";
 
@@ -19,16 +21,23 @@ export default function Layout({
     <div className="header">
       <h1>{title}</h1>
       <h3>{description}</h3>
-      <p>Published: {published}</p>
+      <h4>
+        <FaCalendar />
+        {published}
+      </h4>
       {updated && <p>Last updated: {updated}</p>}
     </div>
   );
 
   const withChildren: React.FC<PropsWithChildren> = ({ children }) => (
     <Base>
-      {header}
-      <hr />
-      {children}
+      <IconContext.Provider
+        value={{ className: "icon icon-post", size: "1.2em" }}
+      >
+        {header}
+        <div style={{ paddingTop: "2em" }} />
+        {children}
+      </IconContext.Provider>
     </Base>
   );
   return withChildren;

tsconfig.json

@@ -3,7 +3,7 @@
     "target": "ESNext",
     "useDefineForClassFields": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
+    "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,

vite.config.ts

@@ -2,8 +2,39 @@ import { defineConfig } from "vite";
 import blog from "@bspeice/vite-plugin-blog";
 import mdx from "@mdx-js/rollup";
 import react from "@vitejs/plugin-react-swc";
+import rehypeHighlight from "rehype-highlight";
 
-import remarkPrism from "remark-prism";
+import { Root, Element } from "hast";
+import { Plugin } from "unified";
+import { visit } from "unist-util-visit";
+
+// Add the `hljs` class to `pre` so it picks up the highlight background color
+const highlightPre: Plugin<[], Root> = () => {
+  return (tree) => {
+    visit(tree, (node, _, parent) => {
+      if (
+        !parent ||
+        (parent as Element).tagName !== "pre" ||
+        (node as Element).tagName !== "code"
+      ) {
+        return;
+      }
+
+      const parentElement = parent as Element;
+      const parentProperties = parentElement.properties;
+
+      if (!parentProperties) {
+        return;
+      }
+
+      if (!Array.isArray(parentProperties["className"])) {
+        parentProperties["className"] = ["hljs"];
+      } else {
+        parentProperties["className"].unshift("hljs");
+      }
+    });
+  };
+};
 
 export default defineConfig({
   plugins: [
@@ -12,7 +43,7 @@ export default defineConfig({
       "/about": "/pages/about.mdx",
       "/2019/02/the-whole-world": "/posts/2019/02/the-whole-world.mdx",
     }),
-    mdx({ remarkPlugins: [remarkPrism] }),
+    mdx({ rehypePlugins: [rehypeHighlight, highlightPre] }),
     react(),
   ],
 });