fix local cover

astro.config.mts

@@ -7,6 +7,9 @@ import { visit } from "unist-util-visit"
 import tailwind from "@astrojs/tailwind"
 import react from "@astrojs/react"
 import md5 from "md5"
+import { type RehypePlugin } from "@astrojs/markdown-remark"
+import path from "path"
+import { convertImageToBase64URL } from "./src/utils/image"
 
 function pipeline() {
   return [
@@ -176,11 +179,42 @@ function pipeline() {
   ]
 }
 
+const handleLocalCoverPlugin: RehypePlugin = () => {
+  return async (tree, file) => {
+    const filePath = file.history[0]
+    type AstroData = {
+      frontmatter: {
+        cover:
+          | {
+              url: string
+            }
+          | string
+          | undefined
+      }
+    }
+    const astroData = file.data.astro as AstroData
+    if (!astroData.frontmatter.cover) {
+      return
+    }
+    const coverUrl = typeof astroData.frontmatter.cover === "string" ? astroData.frontmatter.cover : astroData.frontmatter.cover.url
+    if (coverUrl.includes("http")) {
+      return
+    }
+    const url = path.resolve(path.dirname(filePath), coverUrl)
+    const dataURL = await convertImageToBase64URL(url)
+    if (typeof astroData.frontmatter.cover === "string") {
+      astroData.frontmatter.cover = dataURL
+    } else {
+      astroData.frontmatter.cover.url = dataURL
+    }
+  }
+}
+
 // https://astro.build/config
 export default defineConfig({
   site: SITE_URL,
   markdown: {
-    rehypePlugins: pipeline(),
+    rehypePlugins: [handleLocalCoverPlugin, ...pipeline()],
     syntaxHighlight: "prism",
   },
   integrations: [

cspell.json

@@ -10,12 +10,13 @@
     "astrojs",
     "frontmatter",
     "logto",
-    "logtoClient",
     "Logto",
+    "logtoClient",
     "m_lfit",
     "N3ptune",
     "NBTCA",
     "openapi",
+    "Rehype",
     "rehypePlugins",
     "tseslint"
   ]

package.json

@@ -40,7 +40,9 @@
     "vue": "^3.4.21"
   },
   "devDependencies": {
+    "@astrojs/markdown-remark": "^5.2.0",
     "@cspell/eslint-plugin": "^8.8.1",
+    "@eslint/js": "^9.11.0",
     "@types/eslint__js": "^8.42.3",
     "@types/md5": "^2.3.5",
     "@types/qrcode": "^1.5.5",

src/layouts/MoreTile.astro

@@ -1,14 +1,10 @@
 ---
 import { formatDate } from "../utils"
 const { title, href, cover, tags, date } = Astro.props
-import { fixImage } from "../utils/image"
 const dateFormatted = formatDate(date)
 const type = tags?.[0] ?? "默认"
 
-let image = cover?.url ?? cover ?? "https://oss.nbtca.space/CA-logo.svg"
+const image = cover?.url ? cover : "https://oss.nbtca.space/CA-logo.svg"
-if (image.startsWith("./")) {
-  image = await fixImage(image, href)
-}
 
 const label = `${title} - ${type} - 发表时间 ${dateFormatted}`;
 ---

src/layouts/Tile.astro

@@ -1,15 +1,11 @@
 ---
 import { formatDate } from "../utils"
 const { title, href, cover, tags, date, level } = Astro.props
-import { fixImage } from "../utils/image"
 
 const dateFormatted = formatDate(date)
 const type = tags[0]
 const label = `${title} - ${type} - 发表时间 ${dateFormatted}`
-let image = cover?.url ?? cover ?? "https://oss.nbtca.space/CA-logo.svg"
+const image = cover?.url ?? cover ?? "https://oss.nbtca.space/CA-logo.svg"
-if (image.startsWith("./")) {
-  image = await fixImage(image, href)
-}
 
 // level 1: hero
 // level 2: 2up

src/pages/posts/劳动耕耘社联动.md

@@ -5,7 +5,7 @@ pubDate: 2024-09-22
 description: "和劳动耕耘社的一次联动"
 author: "小明"
 cover:
-  url: "https://oss.nbtca.space/CA-logo.svg"
+  url: "./_assets/duck/yuzhiboban.jpg"
   alt: "cover"
 tags: ["联动", "鹅社"]
 ---

src/utils/image.ts

@@ -1,20 +1,16 @@
-import { getImage } from "astro:assets"
+type Filename = string
+type ImageType = "png" | "jpg" | "jpeg" | "gif" | "webp"
+type Base64String = `data:image/${ImageType};base64,${string}`
 
-export async function fixImage(image: string, href: string) {
+import { readFile } from "fs/promises"
+export const convertImageToBase64URL = async (filename: Filename, imageType: ImageType = "png"): Promise<Base64String> => {
   try {
-    const sliceHref = href.slice(0, href.lastIndexOf("/") + 1)// get the dir of the current page(remove filename)
+    const buffer = await readFile(filename)
-    const imageLocation = await import(
+    const base64String = Buffer.from(buffer).toString("base64")
-      /* @vite-ignore */ `/src/pages${sliceHref}${image.slice(1)}`
+    // console.log(`base64String`, base64String.slice(0, 100));
-    )// static import of the image
+    return `data:image/${imageType};base64,${base64String}`
-    image = imageLocation.default
-    return (
-      await getImage({ // resolve the images
-        src: image,
-        inferSize: true,
-      })
-    ).src
   }
   catch (error) {
-    console.log(error)
+    throw new Error(`file ${filename} no exist ❌`)
   }
 }