fix: add remark-sectionize in articles

astro.config.ts

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

package-lock.json

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

package.json

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

src/components/TableOfContents.astro

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

src/content/blog/rehype-patch/index.mdx

@@ -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) {

src/content/blog/the-state-of-static-blogs/index.mdx

@@ -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'
 

src/styles/typography.css

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