Compare commits
3 Commits
42039b0bac
...
b7a6971174
Author | SHA1 | Date |
---|---|---|
Bradlee Speice | b7a6971174 | |
Bradlee Speice | 2d3b9c0c3a | |
Bradlee Speice | 3c80fbab21 |
File diff suppressed because it is too large
Load Diff
|
@ -12,21 +12,22 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fontsource/jetbrains-mono": "^4.5.12",
|
"@fontsource/jetbrains-mono": "^4.5.12",
|
||||||
"@fontsource/lato": "^4.5.10",
|
"@fontsource/lato": "^4.5.10",
|
||||||
|
"highlight.js": "^11.7.0",
|
||||||
"normalize.css": "^8.0.1",
|
"normalize.css": "^8.0.1",
|
||||||
"prism-themes": "^1.9.0",
|
"prism-themes": "^1.9.0",
|
||||||
"react": "^18.2.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": {
|
"devDependencies": {
|
||||||
"@bspeice/vite-plugin-blog": "^1.1.0",
|
"@bspeice/vite-plugin-blog": "^1.1.0",
|
||||||
"@mdx-js/rollup": "^2.3.0",
|
"@mdx-js/rollup": "^2.3.0",
|
||||||
"@types/react": "^18.0.28",
|
"@types/react": "^18.0.28",
|
||||||
"@types/react-dom": "^18.0.11",
|
"@types/react-dom": "^18.0.11",
|
||||||
"@types/remark-prism": "^1.3.4",
|
|
||||||
"@vitejs/plugin-react-swc": "^3.0.0",
|
"@vitejs/plugin-react-swc": "^3.0.0",
|
||||||
"husky": "^8.0.0",
|
"husky": "^8.0.0",
|
||||||
"pretty-quick": "^3.1.3",
|
"pretty-quick": "^3.1.3",
|
||||||
"remark-prism": "^1.3.6",
|
|
||||||
"typescript": "^4.9.3",
|
"typescript": "^4.9.3",
|
||||||
"vite": "^4.2.0"
|
"vite": "^4.2.0"
|
||||||
}
|
}
|
||||||
|
|
|
@ -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";
|
import "./style.css";
|
||||||
|
|
||||||
const Sidebar: React.FC = () => (
|
const Navbar: React.FC = () => (
|
||||||
<span className={"navbar"}>
|
<span className="navbar">
|
||||||
<a href="/">Home</a>/<a href="/about">About</a>
|
<a href="/">
|
||||||
|
<FaHome />
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
<span>/</span>
|
||||||
|
<a href="/about">
|
||||||
|
<FaUser />
|
||||||
|
About
|
||||||
|
</a>
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
|
|
||||||
const Layout: React.FC<PropsWithChildren> = ({ children }) => (
|
const Layout: React.FC<PropsWithChildren> = ({ children }) => (
|
||||||
<div className="gridOffset">
|
<StrictMode>
|
||||||
<div className="gridOffsetSide">
|
<IconContext.Provider value={{ className: "icon" }}>
|
||||||
<Sidebar />
|
<div className="gridOffset">
|
||||||
</div>
|
<Navbar />
|
||||||
{children}
|
<hr style={{ marginTop: "0" }} />
|
||||||
</div>
|
{children}
|
||||||
|
</div>
|
||||||
|
</IconContext.Provider>
|
||||||
|
</StrictMode>
|
||||||
);
|
);
|
||||||
|
|
||||||
export default Layout;
|
export default Layout;
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import Layout from "./Page";
|
import Layout from "./LayoutPage";
|
||||||
export default Layout;
|
export default Layout;
|
||||||
|
|
||||||
Developer currently living in New York City
|
Developer currently living in New York City
|
||||||
|
|
|
@ -4,6 +4,7 @@ export default function () {
|
||||||
return (
|
return (
|
||||||
<Layout>
|
<Layout>
|
||||||
<p>Is this thing on?</p>
|
<p>Is this thing on?</p>
|
||||||
|
<a href="/2019/02/the-whole-world">Code</a>
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
102
pages/style.css
102
pages/style.css
|
@ -2,12 +2,23 @@
|
||||||
|
|
||||||
@import "@fontsource/lato";
|
@import "@fontsource/lato";
|
||||||
@import "@fontsource/jetbrains-mono";
|
@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 {
|
body {
|
||||||
font-family: "Lato", sans-serif;
|
font-family: "Lato", sans-serif;
|
||||||
font-size: 14pt;
|
font-size: 15pt;
|
||||||
line-height: 1.4;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
|
@ -20,6 +31,20 @@ h6 {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
color: var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
color: var(--color-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
p,
|
p,
|
||||||
ul {
|
ul {
|
||||||
margin-top: 0.5em;
|
margin-top: 0.5em;
|
||||||
|
@ -30,43 +55,80 @@ pre {
|
||||||
padding: 1em 0;
|
padding: 1em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
code,
|
code {
|
||||||
code[class*="language-"] {
|
|
||||||
font-family: "JetBrains Mono", monospace;
|
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 {
|
.gridOffset {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns:
|
grid-template-columns:
|
||||||
[full-start] minmax(1em, 2fr)
|
[full-start] minmax(1em, 2fr)
|
||||||
[main-start] minmax(0, 45em) [main-end]
|
[main-start] minmax(0, 42em) [main-end]
|
||||||
minmax(0, 1fr)
|
minmax(0, 5fr) [full-end];
|
||||||
[side-start] minmax(0, 3fr) [side-end]
|
|
||||||
minmax(1em, 2fr) [full-end];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.gridOffset > :not(.gridOffsetSide) {
|
.gridOffset > * {
|
||||||
grid-column: main;
|
grid-column: main;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gridOffset > div.remark-highlight,
|
.gridOffset hr {
|
||||||
.gridOffset > div.remark-highlight > pre {
|
display: inherit;
|
||||||
|
grid-column: main;
|
||||||
|
grid-template-columns: inherit;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridOffset > pre {
|
||||||
display: inherit;
|
display: inherit;
|
||||||
grid-column: full;
|
grid-column: full;
|
||||||
grid-template-columns: inherit;
|
grid-template-columns: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gridOffset > div.remark-highlight > pre > code {
|
.gridOffset > pre > code {
|
||||||
grid-column: main;
|
grid-column: main;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gridOffsetSide {
|
.navbar {
|
||||||
grid-column: side;
|
text-align: right;
|
||||||
margin-top: 1em;
|
margin-top: 0.5em;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar > * {
|
.navbar :not(.icon) {
|
||||||
margin-left: 0.5em;
|
padding-left: 0.25em;
|
||||||
margin-right: 0.5em;
|
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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,6 @@
|
||||||
import { PropsWithChildren } from "react";
|
import { PropsWithChildren } from "react";
|
||||||
|
import { IconContext } from "react-icons";
|
||||||
|
import { FaCalendar } from "react-icons/fa";
|
||||||
|
|
||||||
import Base from "../pages/LayoutBase";
|
import Base from "../pages/LayoutBase";
|
||||||
|
|
||||||
|
@ -19,16 +21,23 @@ export default function Layout({
|
||||||
<div className="header">
|
<div className="header">
|
||||||
<h1>{title}</h1>
|
<h1>{title}</h1>
|
||||||
<h3>{description}</h3>
|
<h3>{description}</h3>
|
||||||
<p>Published: {published}</p>
|
<h4>
|
||||||
|
<FaCalendar />
|
||||||
|
{published}
|
||||||
|
</h4>
|
||||||
{updated && <p>Last updated: {updated}</p>}
|
{updated && <p>Last updated: {updated}</p>}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
const withChildren: React.FC<PropsWithChildren> = ({ children }) => (
|
const withChildren: React.FC<PropsWithChildren> = ({ children }) => (
|
||||||
<Base>
|
<Base>
|
||||||
{header}
|
<IconContext.Provider
|
||||||
<hr />
|
value={{ className: "icon icon-post", size: "1.2em" }}
|
||||||
{children}
|
>
|
||||||
|
{header}
|
||||||
|
<div style={{ paddingTop: "2em" }} />
|
||||||
|
{children}
|
||||||
|
</IconContext.Provider>
|
||||||
</Base>
|
</Base>
|
||||||
);
|
);
|
||||||
return withChildren;
|
return withChildren;
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
"target": "ESNext",
|
"target": "ESNext",
|
||||||
"useDefineForClassFields": true,
|
"useDefineForClassFields": true,
|
||||||
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
||||||
"allowJs": false,
|
"allowJs": true,
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
"esModuleInterop": false,
|
"esModuleInterop": false,
|
||||||
"allowSyntheticDefaultImports": true,
|
"allowSyntheticDefaultImports": true,
|
||||||
|
|
|
@ -2,8 +2,39 @@ import { defineConfig } from "vite";
|
||||||
import blog from "@bspeice/vite-plugin-blog";
|
import blog from "@bspeice/vite-plugin-blog";
|
||||||
import mdx from "@mdx-js/rollup";
|
import mdx from "@mdx-js/rollup";
|
||||||
import react from "@vitejs/plugin-react-swc";
|
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({
|
export default defineConfig({
|
||||||
plugins: [
|
plugins: [
|
||||||
|
@ -12,7 +43,7 @@ export default defineConfig({
|
||||||
"/about": "/pages/about.mdx",
|
"/about": "/pages/about.mdx",
|
||||||
"/2019/02/the-whole-world": "/posts/2019/02/the-whole-world.mdx",
|
"/2019/02/the-whole-world": "/posts/2019/02/the-whole-world.mdx",
|
||||||
}),
|
}),
|
||||||
mdx({ remarkPlugins: [remarkPrism] }),
|
mdx({ rehypePlugins: [rehypeHighlight, highlightPre] }),
|
||||||
react(),
|
react(),
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue