chore: refine plugins and astro config

astro.config.ts

@@ -1,6 +1,8 @@
+// Plugins
 import type { ThemeConfig } from './src/types'
 import mdx from '@astrojs/mdx'
 import sitemap from '@astrojs/sitemap'
+import { transformerCopyButton } from '@rehype-pretty/transformers'
 import swup from '@swup/astro'
 import compress from 'astro-compress'
 import robotsTxt from 'astro-robots-txt'
@@ -17,14 +19,13 @@ import remarkDirective from 'remark-directive'
 import remarkGithubAdmonitionsToDirectives from 'remark-github-admonitions-to-directives'
 import remarkMath from 'remark-math'
 import remarkSectionize from 'remark-sectionize'
-//
+// Markdown Extensions
 import UnoCSS from 'unocss/astro'
 import { themeConfig } from './src/config'
 import { AdmonitionComponent } from './src/plugins/rehype-component-admonition.ts'
 import { GithubCardComponent } from './src/plugins/rehype-component-github-card.ts'
 import { parseDirectiveNode } from './src/plugins/remark-directive-rehype.ts'
 import { remarkExcerpt } from './src/plugins/remark-excerpt.ts'
-
 import { remarkReadingTime } from './src/plugins/remark-reading-time.ts'
 
 const { url }: { url: ThemeConfig['site']['url'] } = themeConfig.site
@@ -36,8 +37,15 @@ export default defineConfig({
   integrations: [
     UnoCSS({ injectReset: true }),
     mdx(),
-    sitemap(),
-    robotsTxt(),
+    sitemap({
+      changefreq: 'weekly',
+      priority: 0.7,
+      lastmod: new Date(),
+    }),
+    robotsTxt({
+      policy: [{ userAgent: '*', allow: '/' }],
+      sitemap: true,
+    }),
     compress(),
     swup({
       theme: false,
@@ -66,14 +74,22 @@ export default defineConfig({
       [
         rehypePrettyCode,
         {
+          // TODO: Add auto theme switcher
           theme: 'github-dark',
+          transformers: [
+            transformerCopyButton({
+              visibility: 'hover',
+              feedbackDuration: 2_500,
+            }),
+          ],
         },
       ],
       [
         rehypeExternalLinks,
         {
           target: '_blank',
-          rel: ['nofollow', 'noopener', 'noreferrer'],
+          rel: ['nofollow', 'noopener', 'noreferrer', 'external'],
+          protocols: ['http', 'https', 'mailto'],
         },
       ],
       [
@@ -114,5 +130,4 @@ export default defineConfig({
       ],
     ],
   },
-
 })

package.json

@@ -18,12 +18,13 @@
     "@astrojs/mdx": "^4.0.5",
     "@astrojs/rss": "^4.0.11",
     "@astrojs/sitemap": "^3.2.1",
+    "@rehype-pretty/transformers": "^0.13.2",
     "@swup/astro": "^1.5.0",
+    "@unocss/reset": "^65.4.0",
     "astro": "^5.1.6",
     "astro-compress": "^2.3.6",
     "astro-robots-txt": "^1.0.0",
     "astro-seo": "^0.8.4",
-    "markdown-it": "^14.1.0",
     "overlayscrollbars": "^2.10.1",
     "photoswipe": "^5.4.4",
     "rehype-autolink-headings": "^7.1.0",
@@ -33,39 +34,33 @@
     "rehype-pretty-code": "^0.14.0",
     "rehype-slug": "^6.0.0",
     "remark-directive": "^3.0.0",
-    "remark-directive-rehype": "^0.4.2",
     "remark-github-admonitions-to-directives": "^2.1.0",
     "remark-math": "^6.0.0",
     "remark-sectionize": "^2.1.0",
     "sanitize-html": "^2.14.0",
     "sharp": "^0.33.5",
-    "shiki": "^1.26.2",
     "typescript": "~5.7.3",
     "unist-util-visit": "^5.0.0",
     "vite": "^6.0.7"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.14.0",
-    "@types/markdown-it": "^14.1.2",
+    "@types/hast": "^3.0.4",
     "@types/mdast": "^4.0.4",
-    "@types/node": "^22.10.5",
+    "@types/node": "^22.10.6",
     "@types/sanitize-html": "^2.13.0",
     "@types/unist": "^3.0.3",
     "@unocss/eslint-plugin": "^65.4.0",
-    "@unocss/preset-attributify": "^65.4.0",
-    "@unocss/reset": "^65.4.0",
-    "@unocss/transformer-directives": "^65.4.0",
     "astro-eslint-parser": "^1.1.0",
-    "consola": "^3.3.3",
     "eslint": "^9.18.0",
     "eslint-plugin-astro": "^1.3.1",
-    "esno": "^4.8.0",
     "hastscript": "^9.0.0",
     "lint-staged": "^15.3.0",
     "mdast-util-to-string": "^4.0.0",
     "reading-time": "^1.5.0",
     "unocss": "^65.4.0",
-    "unocss-preset-theme": "^0.14.1"
+    "unocss-preset-theme": "^0.14.1",
+    "vfile": "^6.0.3"
   },
   "lint-staged": {
     "*.{js,ts,jsx,tsx,astro}": "eslint --fix"

src/pages/index.astro

@@ -1,8 +1,6 @@
 ---
-import Welcome from '@/components/Welcome.astro'
 import Layout from '@/layouts/Layout.astro'
 ---
 
 <Layout>
-  <Welcome />
 </Layout>

src/plugins/rehype-component-admonition.ts

@@ -1,5 +1,4 @@
 import type { Element, Properties as HastProperties, Node } from 'hast'
-/// <reference types="mdast" />
 import { h } from 'hastscript'
 
 interface AdmonitionProperties extends HastProperties {
@@ -7,25 +6,19 @@ interface AdmonitionProperties extends HastProperties {
   'has-directive-label'?: boolean
 }
 
-/**
- * Creates an admonition component.
- *
- * @param properties - The properties of the component.
- * @param type - The admonition type.
- * @param children - The children elements of the component.
- * @returns The created admonition component as a Hast Element.
- */
+type AdmonitionType = 'tip' | 'note' | 'important' | 'caution' | 'warning'
+
+const ADMONITION_CLASS_PREFIX = 'bdm-'
+const DEFAULT_ERROR_MESSAGE = 'Invalid admonition directive. (Admonition directives must be of block type ":::note{name="name"} <content> :::")'
+
 export function AdmonitionComponent(
   properties: AdmonitionProperties,
-  type: 'tip' | 'note' | 'important' | 'caution' | 'warning',
+  type: AdmonitionType,
   children: Node[],
 ): Element {
   if (!Array.isArray(children) || children.length === 0) {
-    return h(
-      'div',
-      { class: 'hidden' },
-      'Invalid admonition directive. (Admonition directives must be of block type ":::note{name="name"} <content> :::")',
-    )
+    console.warn('Invalid admonition directive: empty or invalid children')
+    return h('div', { class: 'hidden' }, DEFAULT_ERROR_MESSAGE)
   }
 
   let label: Element | string | null = null
@@ -36,14 +29,14 @@ export function AdmonitionComponent(
 
     if (firstChild && firstChild.type === 'element') {
       label = firstChild as Element
-      label.tagName = 'div' // Change the tag <p> to <div>
+      label.tagName = 'div'
     }
     else {
       label = ''
     }
   }
 
-  return h('blockquote', { class: `admonition bdm-${type}` }, [
+  return h('blockquote', { class: `${ADMONITION_CLASS_PREFIX}${type}` }, [
     h('span', { class: 'bdm-title' }, label || type.toUpperCase()),
     ...(children as Element[]),
   ] as Element[])

src/plugins/rehype-component-github-card.ts

@@ -1,17 +1,10 @@
 /// <reference types="mdast" />
+import type { RootContent } from 'mdast'
 import { h } from 'hastscript'
 
-/**
- * Creates a GitHub Card component.
- *
- * @param {object} properties - The properties of the component.
- * @param {string} properties.repo - The GitHub repository in the format "owner/repo".
- * @param {import('mdast').RootContent[]} children - The children elements of the component.
- * @returns {import('mdast').Parent} The created GitHub Card component.
- */
 export function GithubCardComponent(
   properties: { repo: string },
-  children: import('mdast').RootContent[],
+  children: RootContent[],
 ): import('mdast').Parent {
   if (Array.isArray(children) && children.length !== 0) {
     return h('div', { class: 'hidden' }, [
@@ -28,7 +21,7 @@ export function GithubCardComponent(
   }
 
   const repo = properties.repo
-  const cardUuid = `GC${Math.random().toString(36).slice(-6)}` // Collisions are not important
+  const cardUuid = `GC${Math.random().toString(36).slice(-6)}`
 
   const nAvatar = h(`div#${cardUuid}-avatar`, { class: 'gc-avatar' })
   const nLanguage = h(
@@ -63,29 +56,39 @@ export function GithubCardComponent(
     `script#${cardUuid}-script`,
     { type: 'text/javascript', defer: true },
     `
-      fetch('https://api.github.com/repos/${repo}', { referrerPolicy: "no-referrer" }).then(response => response.json()).then(data => {
-        if (data.description) {
-          document.getElementById('${cardUuid}-description').innerText = data.description.replace(/:[a-zA-Z0-9_]+:/g, '');
-        } else {
-          document.getElementById('${cardUuid}-description').innerText = "Description not set"
+      fetch('https://api.github.com/repos/${repo}', {
+        referrerPolicy: "no-referrer",
+        headers: {
+          'Accept': 'application/vnd.github.v3+json',
+        },
+        signal: AbortSignal.timeout(5000)
+      }).then(response => {
+        if (!response.ok)
+          throw new Error(\`HTTP error! status: \${response.status}\`)
+        return response.json()
+      }).then(data => {
+        const elements = {
+          description: document.getElementById('${cardUuid}-description'),
+          language: document.getElementById('${cardUuid}-language'),
+          stars: document.getElementById('${cardUuid}-stars'),
         }
-        document.getElementById('${cardUuid}-language').innerText = data.language;
-        document.getElementById('${cardUuid}-forks').innerText = Intl.NumberFormat('en-us', { notation: "compact", maximumFractionDigits: 1 }).format(data.forks).replaceAll("\\u202F", '');
-        document.getElementById('${cardUuid}-stars').innerText = Intl.NumberFormat('en-us', { notation: "compact", maximumFractionDigits: 1 }).format(data.stargazers_count).replaceAll("\\u202F", '');
-        const avatarEl = document.getElementById('${cardUuid}-avatar');
-        avatarEl.style.backgroundImage = 'url(' + data.owner.avatar_url + ')';
-        avatarEl.style.backgroundColor = 'transparent';
-        if (data.license?.spdx_id) {
-          document.getElementById('${cardUuid}-license').innerText = data.license?.spdx_id
-        } else {
-          document.getElementById('${cardUuid}-license').innerText = "no-license"
-        };
-          document.getElementById('${cardUuid}-card').classList.remove("fetch-waiting");
-          console.log("[GITHUB-CARD] Loaded card for ${repo} | ${cardUuid}.")
+
+        elements.description.innerText = data.description?.replace(/:[a-zA-Z0-9_]+:/g, '') ?? 'Description not set'
+        elements.language.innerText = data.language
+        elements.stars.innerText = Intl.NumberFormat('en-us', { notation: "compact", maximumFractionDigits: 1 }).format(data.stargazers_count).replaceAll("\\u202F", '')
+
+        const avatarEl = document.getElementById('${cardUuid}-avatar')
+        avatarEl.style.backgroundImage = 'url(' + data.owner.avatar_url + ')'
+        avatarEl.style.backgroundColor = 'transparent'
+
+        document.getElementById('${cardUuid}-license').innerText = data.license?.spdx_id ?? 'no-license'
+        document.getElementById('${cardUuid}-card').classList.remove("fetch-waiting")
+        console.log("[GITHUB-CARD] Loaded card for ${repo} | ${cardUuid}.")
       }).catch(err => {
-        const c = document.getElementById('${cardUuid}-card');
-        c.classList.add("fetch-error");
-         console.warn("[GITHUB-CARD] (Error) Loading card for ${repo} | ${cardUuid}.")
+        const c = document.getElementById('${cardUuid}-card')
+        c.classList.add("fetch-error")
+        document.getElementById('${cardUuid}-description').innerText = "Failed to load repository data"
+        console.warn("[GITHUB-CARD] (Error) Loading card for ${repo} | ${cardUuid}:", err.message)
       })
     `,
   )
@@ -98,11 +101,6 @@ export function GithubCardComponent(
       target: '_blank',
       repo,
     },
-    [
-      nTitle,
-      nDescription,
-      h('div', { class: 'gc-infobar' }, [nStars, nForks, nLicense, nLanguage]),
-      nScript,
-    ],
+    [nTitle, nDescription, h('div', { class: 'gc-infobar' }, [nStars, nForks, nLicense, nLanguage]), nScript],
   ) as unknown as import('mdast').Parent
 }

src/plugins/remark-directive-rehype.ts

@@ -28,14 +28,11 @@ export function parseDirectiveNode() {
       ) {
         const data = directiveNode.data || (directiveNode.data = {})
         directiveNode.attributes = directiveNode.attributes || {}
-        if (
-          directiveNode.children.length > 0
-          && directiveNode.children[0].data?.directiveLabel
-        ) {
-          directiveNode.attributes['has-directive-label'] = true
-        }
-        const hast = h(directiveNode.name, directiveNode.attributes)
 
+        if (directiveNode.children[0]?.data?.directiveLabel)
+          directiveNode.attributes['has-directive-label'] = true
+
+        const hast = h(directiveNode.name, directiveNode.attributes)
         data.hName = hast.tagName
         data.hProperties = hast.properties
       }

src/plugins/remark-excerpt.ts

@@ -4,18 +4,9 @@ import { toString } from 'mdast-util-to-string'
 
 export function remarkExcerpt() {
   return function (tree: Root, file: VFile) {
-    let excerpt = ''
-    for (const node of tree.children) {
-      if (node.type === 'paragraph') {
-        excerpt = toString(node)
-        break
-      }
-    }
-
-    // 确保 data.astro.frontmatter 存在
-    file.data.astro = file.data.astro || {}
-    file.data.astro.frontmatter = file.data.astro.frontmatter || {}
-
-    file.data.astro.frontmatter.excerpt = excerpt
+    const firstParagraph = tree.children.find(node => node.type === 'paragraph')
+    const excerpt = firstParagraph ? toString(firstParagraph) : ''
+    const frontmatter = (file.data.astro ??= {}).frontmatter ??= {}
+    frontmatter.excerpt = excerpt
   }
 }

src/plugins/remark-reading-time.ts

@@ -7,12 +7,8 @@ export function remarkReadingTime() {
   return function (tree: Root, file: VFile) {
     const textOnPage = toString(tree)
     const readingTime = getReadingTime(textOnPage)
-
-    // 确保 data.astro.frontmatter 存在
-    file.data.astro = file.data.astro || {}
-    file.data.astro.frontmatter = file.data.astro.frontmatter || {}
-
-    file.data.astro.frontmatter.minutes = Math.max(1, Math.round(readingTime.minutes))
-    file.data.astro.frontmatter.words = readingTime.words
+    const frontmatter = (file.data.astro ??= {}).frontmatter ??= {}
+    frontmatter.minutes = Math.max(1, Math.round(readingTime.minutes))
+    frontmatter.words = readingTime.words
   }
 }

src/styles/global.css

@@ -0,0 +1,5 @@
+:root {
+    --uno-colors-primary: theme('colors.primary');
+    --uno-colors-backgroundStart: theme('colors.backgroundStart');
+    --uno-colors-backgroundEnd: theme('colors.backgroundEnd');
+  }