Merge pull request #13 from dually8/add-toc

Add ToC and Anchor Links

Author: dually8

.github/workflows/firebase-hosting-merge.yml

@@ -12,12 +12,12 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - name: Use Node.js 20
+      - name: Use Node.js 22
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
-          cache: "npm"
-          cache-dependency-path: "./package-lock.json"
+          node-version: '22'
+          cache: 'npm'
+          cache-dependency-path: './package-lock.json'
 
       - name: Install dependencies
         run: npm ci
@@ -27,7 +27,7 @@ jobs:
 
       - uses: FirebaseExtended/action-hosting-deploy@v0.9.0
         with:
-          repoToken: "${{ secrets.GITHUB_TOKEN }}"
-          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_MYWEBSITE_555F6 }}"
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MYWEBSITE_555F6 }}'
           channelId: live
           projectId: mywebsite-555f6

.prettierignore

@@ -0,0 +1,3 @@
+# Ignore markdown
+*.md
+*.mdx

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib"
-}
+}

astro.config.mjs

@@ -1,25 +1,42 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
+import remarkToc from 'remark-toc';
 import mdx from '@astrojs/mdx';
 import sitemap from '@astrojs/sitemap';
 import svelte from '@astrojs/svelte';
+import rehypeSlug from 'rehype-slug';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 
 // https://astro.build/config
 export default defineConfig({
   site: 'https://cjcoffey.com',
-  integrations: [mdx(), sitemap({
-    filter: filterSitemap,
-  }), svelte()],
+  integrations: [
+    mdx(),
+    sitemap({
+      filter: filterSitemap,
+    }),
+    svelte(),
+  ],
   prefetch: true,
   markdown: {
+    remarkPlugins: [remarkToc],
+    rehypePlugins: [
+      rehypeSlug,
+      [
+        rehypeAutolinkHeadings,
+        {
+          behavior: 'wrap',
+        },
+      ],
+    ],
     shikiConfig: {
       theme: 'dracula-soft',
       wrap: true,
-    }
+    },
   },
   experimental: {
     svg: true,
-  }
+  },
 });
 
 /**

firebase.json

@@ -1,10 +1,6 @@
 {
   "hosting": {
     "public": "dist",
-    "ignore": [
-      "firebase.json",
-      "**/.*",
-      "**/node_modules/**"
-    ]
+    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
   }
 }

package-lock.json

@@ -13,7 +13,8 @@
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui",
     "test:report": "playwright show-report",
-    "precommit": "npm run clean && npm run astro:check && npm run test:e2e && npm run build",
+    "format": "npx prettier . --write",
+    "precommit": "npm run clean && npm run format && npm run astro:check && npm run test:e2e && npm run build",
     "generate-images": "tsx ./scripts/generate-apple-icons.ts ./public/img/avatar.png ./public/img/"
   },
   "dependencies": {
@@ -25,12 +26,17 @@
     "@picocss/pico": "^2.0.6",
     "astro": "^5.1.1",
     "dayjs": "^1.11.13",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-slug": "^6.0.0",
+    "remark-toc": "^9.0.0",
     "svelte": "^5.14.0",
     "typescript": "^5.7.2"
   },
   "devDependencies": {
     "@playwright/test": "^1.49.1",
     "@types/node": "^22.10.2",
+    "prettier": "3.4.2",
+    "prettier-plugin-astro": "0.14.1",
     "rimraf": "^6.0.1",
     "sharp": "^0.33.5",
     "tsx": "^4.19.2"

package.json

@@ -0,0 +1,33 @@
+/**
+ * @see https://prettier.io/docs/en/configuration.html
+ * @type {import("prettier").Config}
+ */
+export default {
+  arrowParens: 'always',
+  bracketSameLine: true,
+  bracketSpacing: true,
+  embeddedLanguageFormatting: 'auto',
+  htmlWhitespaceSensitivity: 'ignore',
+  insertPragma: false,
+  jsxSingleQuote: false,
+  printWidth: 120,
+  proseWrap: 'preserve',
+  quoteProps: 'preserve',
+  requirePragma: false,
+  semi: true,
+  singleAttributePerLine: true,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'all',
+  useTabs: false,
+  vueIndentScriptAndStyle: false,
+  plugins: ['prettier-plugin-astro'],
+  overrides: [
+    {
+      files: '*.astro',
+      options: {
+        parser: 'astro',
+      },
+    },
+  ],
+};