z0x/blog.z0x.ca
Code Actions

fix: add remark-sectionize in articles

Browse source
This commit is contained in:
enscribe 2025-03-22 02:18:42 -07:00
parent af62bcb39f
commit 04a06debde
No known key found for this signature in database
GPG key ID: 9BBD5C4114E25322
7 changed files with 77 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
astro.config.ts
View file

@ -13,6 +13,7 @@ import rehypePrettyCode from 'rehype-pretty-code'
// import sectionize from '@hbsnow/rehype-sectionize'
import remarkEmoji from 'remark-emoji'
import remarkMath from 'remark-math'
import remarkSectionize from 'remark-sectionize'
import remarkToc from 'remark-toc'
import { pluginCollapsibleSections } from '@expressive-code/plugin-collapsible-sections'
@ -102,6 +103,6 @@ export default defineConfig({
},
],
],
remarkPlugins: [remarkToc, remarkMath, remarkEmoji],
remarkPlugins: [remarkToc, remarkMath, remarkEmoji, remarkSectionize],
},
})

68
package-lock.json generated
View file

@ -7,6 +7,7 @@
"": {
"name": "astro-erudite",
"version": "1.3.0",
"hasInstallScript": true,
"dependencies": {
"@astrojs/check": "^0.9.4",
"@astrojs/markdown-remark": "^6.3.1",
@ -44,6 +45,7 @@
"rehype-pretty-code": "^0.14.1",
"remark-emoji": "^5.0.1",
"remark-math": "^6.0.0",
"remark-sectionize": "^2.1.0",
"remark-toc": "^9.0.0",
"tailwind-merge": "^3.0.1",
"tailwindcss": "^4.0.7",
@ -9137,6 +9139,72 @@
"url": "https://opencollective.com/unified"
}
},
"node_modules/remark-sectionize": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/remark-sectionize/-/remark-sectionize-2.1.0.tgz",
"integrity": "sha512-R/pHt1RLYrEqrbwOVXx8HnvvwOg+mxg8pE4kIWpIYE3/CuZhU8/PAx/0y1BbHWUA0jmTLTeWpUlDrS/B0pyd0g==",
"dependencies": {
"unist-util-find-after": "^4.0.1",
"unist-util-visit": "^4.1.2"
}
},
"node_modules/remark-sectionize/node_modules/@types/unist": {
"version": "2.0.11",
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
"integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="
},
"node_modules/remark-sectionize/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/remark-sectionize/node_modules/unist-util-is": {
"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==",
"dependencies": {
"@types/unist": "^2.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/remark-sectionize/node_modules/unist-util-visit": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-4.1.2.tgz",
"integrity": "sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==",
"dependencies": {
"@types/unist": "^2.0.0",
"unist-util-is": "^5.0.0",
"unist-util-visit-parents": "^5.1.1"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/remark-sectionize/node_modules/unist-util-visit-parents": {
"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==",
"dependencies": {
"@types/unist": "^2.0.0",
"unist-util-is": "^5.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/remark-smartypants": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/remark-smartypants/-/remark-smartypants-3.0.2.tgz",

3
package.json
View file

@ -21,7 +21,6 @@
"@astrojs/sitemap": "^3.3.0",
"@expressive-code/plugin-collapsible-sections": "^0.40.2",
"@expressive-code/plugin-line-numbers": "^0.40.2",
"@hbsnow/rehype-sectionize": "^1.0.7",
"@iconify-json/lucide": "^1.2.26",
"@radix-ui/react-avatar": "^1.1.3",
"@radix-ui/react-dropdown-menu": "^2.1.6",
@ -30,7 +29,6 @@
"@radix-ui/react-separator": "^1.1.2",
"@radix-ui/react-slot": "^1.1.2",
"@rehype-pretty/transformers": "^0.13.2",
"@shikijs/transformers": "^1.29.2",
"@tailwindcss/vite": "^4.0.7",
"@types/react": "19.0.0",
"@types/react-dom": "19.0.0",
@ -49,6 +47,7 @@
"rehype-pretty-code": "^0.14.1",
"remark-emoji": "^5.0.1",
"remark-math": "^6.0.0",
"remark-sectionize": "^2.1.0",
"remark-toc": "^9.0.0",
"tailwind-merge": "^3.0.1",
"tailwindcss": "^4.0.7",

2
src/components/TableOfContents.astro
View file

@ -63,7 +63,7 @@ function buildToc(headings: Heading[]): Heading[] {
</details>
<nav
class="sticky top-[5.5rem] col-start-1 hidden h-[calc(100vh-5.5rem)] text-xs leading-4 xl:block"
class="sticky top-20 col-start-1 hidden h-[calc(100vh-5rem)] text-xs leading-4 xl:block"
>
<div class="flex justify-end">
<ScrollArea client:load className="max-h-[calc(100vh-8rem)]" type="always">

4
src/content/blog/rehype-patch/index.mdx vendored
View file

@ -49,7 +49,7 @@ After I replied that I hadn't figured out a workaround yet, they sent me a brill
This happened to be exactly what I needed! I went into my `node_modules` directory and made the changes manually:
```js title="node_modules ＞ rehype-pretty-code ＞ dist ＞ index.js" startLineNumber=18 ins={9} del={8}
```js title="node_modules⠀›⠀rehype-pretty-code⠀›⠀dist⠀›⠀index.js" startLineNumber=18 ins={9} del={8}
function isInlineCode(element, parent, bypass = false) {
if (bypass) {
return false;
@ -64,7 +64,7 @@ function isBlockCode(element) {
From here, I ran `npx patch-package rehype-pretty-code`, which created a `patches/rehype-pretty-code+0.14.1.patch` file with the changes I made:
```diff title="patches ＞ rehype-pretty-code+0.14.1.patch"
```diff title="patches⠀›⠀rehype-pretty-code+0.14.1.patch"
--- a/node_modules/rehype-pretty-code/dist/index.js
+++ b/node_modules/rehype-pretty-code/dist/index.js
@@ -22,7 +22,7 @@ function isInlineCode(element, parent, bypass = false) {

4
src/content/blog/the-state-of-static-blogs/index.mdx vendored
View file

@ -123,7 +123,7 @@ This is a non-exhaustive list of features I believe are essential for a friction
- The `cn(){:js}` function is a utility function which combines [clsx](https://www.npmjs.com/package/clsx) and [tailwind-merge](https://www.npmjs.com/package/tailwind-merge), two packages which allow painless conditional class addition and concatenation:
```tsx title="src ＞ lib ＞ utils.ts" caption="A utility function for class name concatenation" showLineNumbers
```tsx title="src⠀›⠀lib⠀›⠀utils.ts" caption="A utility function for class name concatenation" showLineNumbers
import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'
@ -134,7 +134,7 @@ This is a non-exhaustive list of features I believe are essential for a friction
This needs to be in every single template. This is an example of it being used in my `<Link>{:html}` component:
```astro showLineNumbers title="src ＞ components ＞ Link.astro" caption="A custom Link component with tailwind-merge and clsx" {10-15} "cn"
```astro showLineNumbers title="src⠀›⠀components⠀›⠀Link.astro" caption="A custom Link component with tailwind-merge and clsx" {10-15} "cn"
---
import { cn } from '@/lib/utils'

2
src/styles/typography.css
View file

@ -2,7 +2,7 @@
@layer components {
.prose {
@apply text-foreground text-base leading-8 [&>*]:first:mt-0 [&>*]:last:mb-0;
@apply text-foreground text-base leading-8 [&>section:first-child>*]:mt-0 [&>section:last-child>*]:mb-0;
p {
@apply text-foreground/80 my-5 leading-7 not-first:mt-5;