switch back to fontawesome to fix SSR

This commit is contained in:
Bradlee Speice 2023-04-22 03:03:34 +00:00
parent b7a6971174
commit b2ff9535c9
6 changed files with 113 additions and 28 deletions

88
package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

@ -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>
</StrictMode>
);

View File

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

View File

@ -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>
</Base>
);
return withChildren;

View File

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