tweak styling

This commit is contained in:
Bradlee Speice 2023-04-22 01:39:53 +00:00
parent 42039b0bac
commit 3c80fbab21
9 changed files with 364 additions and 48 deletions

266
package-lock.json generated
View File

@ -10,13 +10,16 @@
"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",
"rehype-highlight": "^6.0.0"
},
"devDependencies": {
"@bspeice/vite-plugin-blog": "^1.1.0",
"@mapbox/rehype-highlight-code-block": "^1.0.0",
"@mdx-js/rollup": "^2.3.0",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
@ -31,9 +34,10 @@
},
"node_modules/@bspeice/vite-plugin-blog": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@bspeice/vite-plugin-blog/-/vite-plugin-blog-1.1.0.tgz",
"resolved": "https://git.speice.io/api/packages/bspeice/npm/%40bspeice%2Fvite-plugin-blog/-/1.1.0/vite-plugin-blog-1.1.0.tgz",
"integrity": "sha512-Hqf14EiCNrDavvvDmaU4LkC/ZzxZ0k9Ox/8gjvw1mkoWte/MABIIPmtpAgXNsbZ85cX5OyPysjzMkvsC0Hxfxg==",
"dev": true,
"license": "MIT",
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
@ -403,6 +407,61 @@
"resolved": "https://registry.npmjs.org/@fontsource/lato/-/lato-4.5.10.tgz",
"integrity": "sha512-2hYR6r661Cq9B8zugtu6yxuOKqrVhAgfOSaPSq8XoxbC4ebsl0KOTy/vPoP+9U7JuQVLfrmikirW4a9Z0nDUug=="
},
"node_modules/@mapbox/rehype-highlight-code-block": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@mapbox/rehype-highlight-code-block/-/rehype-highlight-code-block-1.0.0.tgz",
"integrity": "sha512-JdcWEJSwODwZi8mGAknjrRZsA1NBU6Y9br7d/cluVYCpGGcxt7C9xpEJ7p6SP0DL19YeUnCP/qloIK2w3PhBSA==",
"dev": true,
"dependencies": {
"hast-util-from-parse5": "^2.0.1",
"hast-util-to-string": "^1.0.0",
"parse5": "^3.0.2",
"unist-util-visit": "^1.1.3"
}
},
"node_modules/@mapbox/rehype-highlight-code-block/node_modules/hast-util-to-string": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-1.0.4.tgz",
"integrity": "sha512-eK0MxRX47AV2eZ+Lyr18DCpQgodvaS3fAQO2+b9Two9F5HEoRPhiUMNzoXArMJfZi2yieFzUBMRl3HNJ3Jus3w==",
"dev": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/@mapbox/rehype-highlight-code-block/node_modules/parse5": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz",
"integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==",
"dev": true,
"dependencies": {
"@types/node": "*"
}
},
"node_modules/@mapbox/rehype-highlight-code-block/node_modules/unist-util-is": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-3.0.0.tgz",
"integrity": "sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==",
"dev": true
},
"node_modules/@mapbox/rehype-highlight-code-block/node_modules/unist-util-visit": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz",
"integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==",
"dev": true,
"dependencies": {
"unist-util-visit-parents": "^2.0.0"
}
},
"node_modules/@mapbox/rehype-highlight-code-block/node_modules/unist-util-visit-parents": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz",
"integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==",
"dev": true,
"dependencies": {
"unist-util-is": "^3.0.0"
}
},
"node_modules/@mdx-js/mdx": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-2.3.0.tgz",
@ -728,7 +787,6 @@
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.4.tgz",
"integrity": "sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g==",
"dev": true,
"dependencies": {
"@types/unist": "*"
}
@ -760,6 +818,12 @@
"integrity": "sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==",
"dev": true
},
"node_modules/@types/node": {
"version": "18.15.13",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.13.tgz",
"integrity": "sha512-N+0kuo9KgrUQ1Sn/ifDXsvg0TTleP7rIy4zOBGECxAljqvqfqpTfzx0Q1NUedOixRMBfe2Whhb056a42cWs26Q==",
"dev": true
},
"node_modules/@types/prop-types": {
"version": "15.7.5",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@ -806,8 +870,7 @@
"node_modules/@types/unist": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
"integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==",
"dev": true
"integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ=="
},
"node_modules/@vitejs/plugin-react-swc": {
"version": "3.3.0",
@ -952,7 +1015,6 @@
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
"integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
"dev": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
@ -980,6 +1042,15 @@
"integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==",
"dev": true
},
"node_modules/camelcase": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
"integrity": "sha512-4nhGqUkc4BqbBBB4Q6zLuD7lzzrHYrjKGeYaEji/3tFR5VdJu9v+LilhGIVe8wxEJPPOeWo7eg8dwY13TZ1BNg==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/ccount": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
@ -1466,8 +1537,7 @@
"node_modules/extend": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
"dev": true
"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
},
"node_modules/fast-levenshtein": {
"version": "2.0.6",
@ -1475,6 +1545,18 @@
"integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
"dev": true
},
"node_modules/fault": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/fault/-/fault-2.0.1.tgz",
"integrity": "sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==",
"dependencies": {
"format": "^0.2.0"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/find-up": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@ -1502,6 +1584,14 @@
"node": ">= 6"
}
},
"node_modules/format": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
"integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
"engines": {
"node": ">=0.4.x"
}
},
"node_modules/fsevents": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@ -1558,6 +1648,90 @@
"node": ">=8"
}
},
"node_modules/hast-util-from-parse5": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-2.1.0.tgz",
"integrity": "sha512-SVS5RVojGiwCQ61Rc/k5TZg3mqfQ+h0B9jTdrz5qfI1MVNfS1YnoUpROOk6uSUnE74m0206ksGcv7wMiVFV8Pg==",
"dev": true,
"dependencies": {
"camelcase": "^3.0.0",
"hastscript": "^3.0.0",
"property-information": "^3.1.0",
"vfile-location": "^2.0.0"
}
},
"node_modules/hast-util-from-parse5/node_modules/comma-separated-tokens": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz",
"integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==",
"dev": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/hast-util-from-parse5/node_modules/hast-util-parse-selector": {
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz",
"integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==",
"dev": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/hast-util-from-parse5/node_modules/hastscript": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/hastscript/-/hastscript-3.1.0.tgz",
"integrity": "sha512-8V34dMSDT1Ik+ZSgTzCLdyp89MrWxcxctXPxhmb72GQj1Xkw1aHPM9UaHCWewvH2Q+PVkYUm4ZJVw4T0dgEGNA==",
"dev": true,
"dependencies": {
"camelcase": "^3.0.0",
"comma-separated-tokens": "^1.0.0",
"hast-util-parse-selector": "^2.0.0",
"property-information": "^3.0.0",
"space-separated-tokens": "^1.0.0"
}
},
"node_modules/hast-util-from-parse5/node_modules/property-information": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/property-information/-/property-information-3.2.0.tgz",
"integrity": "sha512-BKU45RMZAA+3npkQ/VxEH7EeZImQcfV6rfKH0O4HkkDz3uqqz+689dbkjiWia00vK390MY6EARPS6TzNS4tXPg==",
"dev": true
},
"node_modules/hast-util-from-parse5/node_modules/space-separated-tokens": {
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
"integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==",
"dev": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/hast-util-from-parse5/node_modules/vfile-location": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-2.0.6.tgz",
"integrity": "sha512-sSFdyCP3G6Ka0CEmN83A2YCMKIieHx0EDaj5IDP4g1pa5ZJ4FJDvpO0WODLxo4LUX4oe52gmSCK7Jw4SBghqxA==",
"dev": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/hast-util-is-element": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-2.1.3.tgz",
"integrity": "sha512-O1bKah6mhgEq2WtVMk+Ta5K7pPMqsBBlmzysLdcwKVrqzZQ0CHqUPiIVspNhAG1rvxpvJjtGee17XfauZYKqVA==",
"dependencies": {
"@types/hast": "^2.0.0",
"@types/unist": "^2.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/hast-util-to-estree": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/hast-util-to-estree/-/hast-util-to-estree-2.3.2.tgz",
@ -1585,6 +1759,21 @@
"url": "https://opencollective.com/unified"
}
},
"node_modules/hast-util-to-text": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-3.1.2.tgz",
"integrity": "sha512-tcllLfp23dJJ+ju5wCCZHVpzsQQ43+moJbqVX3jNWPB7z/KFC4FyZD6R7y94cHL6MQ33YtMZL8Z0aIXXI4XFTw==",
"dependencies": {
"@types/hast": "^2.0.0",
"@types/unist": "^2.0.0",
"hast-util-is-element": "^2.0.0",
"unist-util-find-after": "^4.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/hast-util-whitespace": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-2.0.1.tgz",
@ -1595,6 +1784,14 @@
"url": "https://opencollective.com/unified"
}
},
"node_modules/highlight.js": {
"version": "11.7.0",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.7.0.tgz",
"integrity": "sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==",
"engines": {
"node": ">=12.0.0"
}
},
"node_modules/html-encoding-sniffer": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
@ -1713,7 +1910,6 @@
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
"integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
"dev": true,
"funding": [
{
"type": "github",
@ -1768,7 +1964,6 @@
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
"integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
"dev": true,
"engines": {
"node": ">=12"
},
@ -1921,6 +2116,20 @@
"loose-envify": "cli.js"
}
},
"node_modules/lowlight": {
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/lowlight/-/lowlight-2.8.1.tgz",
"integrity": "sha512-HCaGL61RKc1MYzEYn3rFoGkK0yslzCVDFJEanR19rc2L0mb8i58XM55jSRbzp9jcQrFzschPlwooC0vuNitk8Q==",
"dependencies": {
"@types/hast": "^2.0.0",
"fault": "^2.0.0",
"highlight.js": "~11.7.0"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/markdown-extensions": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-1.1.1.tgz",
@ -3186,6 +3395,22 @@
"react-dom": ">=16.8"
}
},
"node_modules/rehype-highlight": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/rehype-highlight/-/rehype-highlight-6.0.0.tgz",
"integrity": "sha512-q7UtlFicLhetp7K48ZgZiJgchYscMma7XjzX7t23bqEJF8m6/s+viXQEe4oHjrATTIZpX7RG8CKD7BlNZoh9gw==",
"dependencies": {
"@types/hast": "^2.0.0",
"hast-util-to-text": "^3.0.0",
"lowlight": "^2.0.0",
"unified": "^10.0.0",
"unist-util-visit": "^4.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/remark": {
"version": "14.0.2",
"resolved": "https://registry.npmjs.org/remark/-/remark-14.0.2.tgz",
@ -3514,7 +3739,6 @@
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/trough/-/trough-2.1.0.tgz",
"integrity": "sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==",
"dev": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
@ -3549,7 +3773,6 @@
"version": "10.1.2",
"resolved": "https://registry.npmjs.org/unified/-/unified-10.1.2.tgz",
"integrity": "sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==",
"dev": true,
"dependencies": {
"@types/unist": "^2.0.0",
"bail": "^2.0.0",
@ -3564,6 +3787,19 @@
"url": "https://opencollective.com/unified"
}
},
"node_modules/unist-util-find-after": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-4.0.1.tgz",
"integrity": "sha512-QO/PuPMm2ERxC6vFXEPtmAutOopy5PknD+Oq64gGwxKtk4xwo9Z97t9Av1obPmGU0IyTa6EKYUfTrK2QJS3Ozw==",
"dependencies": {
"@types/unist": "^2.0.0",
"unist-util-is": "^5.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/unist-util-generated": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/unist-util-generated/-/unist-util-generated-2.0.1.tgz",
@ -3578,7 +3814,6 @@
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-5.2.1.tgz",
"integrity": "sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==",
"dev": true,
"dependencies": {
"@types/unist": "^2.0.0"
},
@ -3645,7 +3880,6 @@
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-3.0.3.tgz",
"integrity": "sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==",
"dev": true,
"dependencies": {
"@types/unist": "^2.0.0"
},
@ -3658,7 +3892,6 @@
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-4.1.2.tgz",
"integrity": "sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==",
"dev": true,
"dependencies": {
"@types/unist": "^2.0.0",
"unist-util-is": "^5.0.0",
@ -3673,7 +3906,6 @@
"version": "5.1.3",
"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz",
"integrity": "sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==",
"dev": true,
"dependencies": {
"@types/unist": "^2.0.0",
"unist-util-is": "^5.0.0"
@ -3724,7 +3956,6 @@
"version": "5.3.7",
"resolved": "https://registry.npmjs.org/vfile/-/vfile-5.3.7.tgz",
"integrity": "sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==",
"dev": true,
"dependencies": {
"@types/unist": "^2.0.0",
"is-buffer": "^2.0.0",
@ -3754,7 +3985,6 @@
"version": "3.1.4",
"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-3.1.4.tgz",
"integrity": "sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==",
"dev": true,
"dependencies": {
"@types/unist": "^2.0.0",
"unist-util-stringify-position": "^3.0.0"

View File

@ -12,13 +12,16 @@
"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",
"rehype-highlight": "^6.0.0"
},
"devDependencies": {
"@bspeice/vite-plugin-blog": "^1.1.0",
"@mapbox/rehype-highlight-code-block": "^1.0.0",
"@mdx-js/rollup": "^2.3.0",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",

View File

@ -2,17 +2,16 @@ import { PropsWithChildren } from "react";
import "./style.css";
const Sidebar: React.FC = () => (
<span className={"navbar"}>
const Navbar: React.FC = () => (
<span className="navbar">
<a href="/">Home</a>/<a href="/about">About</a>
</span>
);
const Layout: React.FC<PropsWithChildren> = ({ children }) => (
<div className="gridOffset">
<div className="gridOffsetSide">
<Sidebar />
</div>
<Navbar />
<hr />
{children}
</div>
);

View File

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

View File

@ -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>
);
}

View File

@ -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,70 @@ 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: 0.5em;
}
.navbar > * {
.navbar * {
margin-left: 0.5em;
margin-right: 0.5em;
text-decoration: none;
border-bottom-style: none;
}

View File

@ -19,7 +19,7 @@ export default function Layout({
<div className="header">
<h1>{title}</h1>
<h3>{description}</h3>
<p>Published: {published}</p>
<h4>Published: {published}</h4>
{updated && <p>Last updated: {updated}</p>}
</div>
);
@ -27,7 +27,7 @@ export default function Layout({
const withChildren: React.FC<PropsWithChildren> = ({ children }) => (
<Base>
{header}
<hr />
<div style={{ paddingTop: "2em" }} />
{children}
</Base>
);

View File

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

View File

@ -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(),
],
});