From 3c80fbab21366e381de2150edd235f2ede37aa0e Mon Sep 17 00:00:00 2001 From: Bradlee Speice Date: Sat, 22 Apr 2023 01:39:53 +0000 Subject: [PATCH] tweak styling --- package-lock.json | 266 ++++++++++++++++++++++++++++++++++++++++--- package.json | 5 +- pages/LayoutBase.tsx | 9 +- pages/about.mdx | 2 +- pages/index.tsx | 1 + pages/style.css | 88 +++++++++++--- posts/LayoutBlog.tsx | 4 +- tsconfig.json | 2 +- vite.config.ts | 35 +++++- 9 files changed, 364 insertions(+), 48 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8b7a945..dcace39 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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" diff --git a/package.json b/package.json index 754324d..eea5a38 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/pages/LayoutBase.tsx b/pages/LayoutBase.tsx index a83abca..1f3ef3f 100644 --- a/pages/LayoutBase.tsx +++ b/pages/LayoutBase.tsx @@ -2,17 +2,16 @@ import { PropsWithChildren } from "react"; import "./style.css"; -const Sidebar: React.FC = () => ( - +const Navbar: React.FC = () => ( + Home/About ); const Layout: React.FC = ({ children }) => (
-
- -
+ +
{children}
); diff --git a/pages/about.mdx b/pages/about.mdx index 1626eaa..6a5911f 100644 --- a/pages/about.mdx +++ b/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 diff --git a/pages/index.tsx b/pages/index.tsx index 8662119..96a7836 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -4,6 +4,7 @@ export default function () { return (

Is this thing on?

+ Code ); } diff --git a/pages/style.css b/pages/style.css index 7527688..4274315 100644 --- a/pages/style.css +++ b/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,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; } diff --git a/posts/LayoutBlog.tsx b/posts/LayoutBlog.tsx index f672c80..1d1e7fb 100644 --- a/posts/LayoutBlog.tsx +++ b/posts/LayoutBlog.tsx @@ -19,7 +19,7 @@ export default function Layout({

{title}

{description}

-

Published: {published}

+

Published: {published}

{updated &&

Last updated: {updated}

}
); @@ -27,7 +27,7 @@ export default function Layout({ const withChildren: React.FC = ({ children }) => ( {header} -
+
{children} ); diff --git a/tsconfig.json b/tsconfig.json index 3c50edf..97d2803 100644 --- a/tsconfig.json +++ b/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, diff --git a/vite.config.ts b/vite.config.ts index 7d469dc..3b4034b 100644 --- a/vite.config.ts +++ b/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(), ], });