fix font sizing

The current site doesn't handle highlighting code links properly

package-lock.json

@@ -10,9 +10,12 @@
       "dependencies": {
         "@fontsource/jetbrains-mono": "^4.5.12",
         "@fontsource/lato": "^4.5.10",
+        "@fortawesome/fontawesome-svg-core": "^6.4.0",
+        "@fortawesome/free-regular-svg-icons": "^6.4.0",
+        "@fortawesome/free-solid-svg-icons": "^6.4.0",
+        "@fortawesome/react-fontawesome": "^0.2.0",
         "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-icons": "^4.8.0",
@@ -405,6 +408,63 @@
       "resolved": "https://registry.npmjs.org/@fontsource/lato/-/lato-4.5.10.tgz",
       "integrity": "sha512-2hYR6r661Cq9B8zugtu6yxuOKqrVhAgfOSaPSq8XoxbC4ebsl0KOTy/vPoP+9U7JuQVLfrmikirW4a9Z0nDUug=="
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz",
+      "integrity": "sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz",
+      "integrity": "sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz",
+      "integrity": "sha512-ZfycI7D0KWPZtf7wtMFnQxs8qjBXArRzczABuMQqecA/nXohquJ5J/RCR77PmY5qGWkxAZDxpnUFVXKwtY/jPw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz",
+      "integrity": "sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@mdx-js/mdx": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-2.3.0.tgz",
@@ -2475,6 +2535,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -2671,10 +2739,15 @@
         "prettier": ">=2.0.0"
       }
     },
-    "node_modules/prism-themes": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/prism-themes/-/prism-themes-1.9.0.tgz",
-      "integrity": "sha512-tX2AYsehKDw1EORwBps+WhBFKc2kxfoFpQAjxBndbZKr4fRmMkv47XN0BghC/K1qwodB1otbe4oF23vUTFDokw=="
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
     },
     "node_modules/property-information": {
       "version": "6.2.0",
@@ -2727,6 +2800,11 @@
         "react": "*"
       }
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/react-router": {
       "version": "6.10.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.10.0.tgz",

package.json

@@ -12,9 +12,11 @@
   "dependencies": {
     "@fontsource/jetbrains-mono": "^4.5.12",
     "@fontsource/lato": "^4.5.10",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "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-icons": "^4.8.0",

pages/LayoutBase.tsx

@@ -1,18 +1,18 @@
 import { PropsWithChildren, StrictMode } from "react";
-import { IconContext } from "react-icons";
-import { FaHome, FaUser } from "react-icons/fa";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faHome, faUser } from "@fortawesome/free-solid-svg-icons";
 
 import "./style.css";
 
 const Navbar: React.FC = () => (
   <span className="navbar">
     <a href="/">
-      <FaHome />
+      <FontAwesomeIcon icon={faHome} className="icon" />
       Home
     </a>
     <span>/</span>
     <a href="/about">
-      <FaUser />
+      <FontAwesomeIcon icon={faUser} className="icon" />
       About
     </a>
   </span>
@@ -20,13 +20,11 @@ const Navbar: React.FC = () => (
 
 const Layout: React.FC<PropsWithChildren> = ({ children }) => (
   <StrictMode>
-    <IconContext.Provider value={{ className: "icon" }}>
-      <div className="gridOffset">
-        <Navbar />
-        <hr style={{ marginTop: "0" }} />
-        {children}
-      </div>
-    </IconContext.Provider>
+    <div className="gridOffset">
+      <Navbar />
+      <hr style={{ marginTop: "0" }} />
+      {children}
+    </div>
   </StrictMode>
 );
 

pages/index.tsx

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

pages/style.css

@@ -57,7 +57,7 @@ pre {
 
 code {
   font-family: "JetBrains Mono", monospace;
-  font-size: 14pt;
+  font-size: 13pt;
   background-color: var(--color-highlight);
 }
 
@@ -75,6 +75,7 @@ a > code {
 }
 
 a:hover,
+a:hover > code,
 a > code:hover {
   color: var(--color-primary-highlight);
   background-color: var(--color-secondary-highlight);

posts/LayoutBlog.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from "react";
-import { IconContext } from "react-icons";
-import { FaCalendar } from "react-icons/fa";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCalendar } from "@fortawesome/free-solid-svg-icons";
 
 import Base from "../pages/LayoutBase";
 
@@ -22,7 +22,11 @@ export default function Layout({
       <h1>{title}</h1>
       <h3>{description}</h3>
       <h4>
-        <FaCalendar />
+        <FontAwesomeIcon
+          icon={faCalendar}
+          scale={1.2}
+          className="icon icon-post"
+        />
         {published}
       </h4>
       {updated && <p>Last updated: {updated}</p>}
@@ -31,13 +35,9 @@ export default function Layout({
 
   const withChildren: React.FC<PropsWithChildren> = ({ children }) => (
     <Base>
-      <IconContext.Provider
-        value={{ className: "icon icon-post", size: "1.2em" }}
-      >
-        {header}
-        <div style={{ paddingTop: "2em" }} />
-        {children}
-      </IconContext.Provider>
+      {header}
+      <div style={{ paddingTop: "2em" }} />
+      {children}
     </Base>
   );
   return withChildren;

vite.config.ts

@@ -37,6 +37,11 @@ const highlightPre: Plugin<[], Root> = () => {
 };
 
 export default defineConfig({
+  build: {
+    rollupOptions: {
+      external: ["react-icons"],
+    },
+  },
   plugins: [
     blog({
       "/": "/pages/index.tsx",