@sugarat/theme 0.2.11 → 0.2.13

package/node.js

@@ -202,6 +202,7 @@ var tabsPlugin = (md) => {
 
 // src/utils/node/index.ts
 var import_node_child_process = require("child_process");
+var import_node_path = __toESM(require("path"));
 
 // src/utils/client/index.ts
 function formatDate(d, fmt = "yyyy-MM-dd hh:mm:ss") {
@@ -287,6 +288,27 @@ function aliasObjectToArray(obj) {
     replacement
   }));
 }
+function joinPath(base, path4) {
+  return `${base}${path4}`.replace(/\/+/g, "/");
+}
+function isBase64ImageURL(url) {
+  const regex = /^data:image\/[a-z]+;base64,/;
+  return regex.test(url);
+}
+function getFirstImagURLFromMD(content, route) {
+  const url = content.match(/!\[.*\]\((.*)\)/)?.[1]?.replace(/['"]/g, "");
+  const isHTTPSource = url && url.startsWith("http");
+  if (!url) {
+    return "";
+  }
+  if (isHTTPSource || isBase64ImageURL(url)) {
+    return url;
+  }
+  const paths = joinPath("/", route).split("/");
+  paths.splice(paths.length - 1, 1);
+  const relativePath = url.startsWith("/") ? url : import_node_path.default.join(paths.join("/") || "", url);
+  return joinPath("/", relativePath);
+}
 
 // src/utils/node/mdPlugins.ts
 function getMarkdownPlugins(cfg) {
@@ -338,7 +360,7 @@ function patchOptimizeDeps(config) {
 
 // src/utils/node/theme.ts
 var import_node_fs = __toESM(require("fs"));
-var import_node_path = __toESM(require("path"));
+var import_node_path2 = __toESM(require("path"));
 var import_node_process = __toESM(require("process"));
 var import_fast_glob = __toESM(require("fast-glob"));
 var import_gray_matter = __toESM(require("gray-matter"));
@@ -361,14 +383,14 @@ function getArticles(cfg) {
     if (route.startsWith("./")) {
       route = route.replace(
         new RegExp(
-          `^\\.\\/${import_node_path.default.join(srcDir, "/").replace(new RegExp(`\\${import_node_path.default.sep}`, "g"), "/")}`
+          `^\\.\\/${import_node_path2.default.join(srcDir, "/").replace(new RegExp(`\\${import_node_path2.default.sep}`, "g"), "/")}`
         ),
         ""
       );
     } else {
       route = route.replace(
         new RegExp(
-          `^${import_node_path.default.join(srcDir, "/").replace(new RegExp(`\\${import_node_path.default.sep}`, "g"), "/")}`
+          `^${import_node_path2.default.join(srcDir, "/").replace(new RegExp(`\\${import_node_path2.default.sep}`, "g"), "/")}`
         ),
         ""
       );
@@ -399,7 +421,7 @@ function getArticles(cfg) {
     ]);
     const wordCount = 100;
     meta.description = meta.description || getTextSummary(fileContent, wordCount);
-    meta.cover = meta.cover ?? (fileContent.match(/[!]\[.*?\]\((https:\/\/.+)\)/)?.[1] || "");
+    meta.cover = meta.cover ?? getFirstImagURLFromMD(fileContent, `/${route}`);
     if (meta.publish === false) {
       meta.hidden = true;
       meta.recommend = false;
@@ -417,15 +439,18 @@ function patchVPThemeConfig(cfg, vpThemeConfig = {}) {
 }
 
 // src/utils/node/vitePlugins.ts
-var import_node_path2 = __toESM(require("path"));
+var import_node_path3 = __toESM(require("path"));
 var import_node_child_process2 = require("child_process");
 var import_node_process2 = __toESM(require("process"));
+var import_node_fs2 = require("fs");
+var import_node_buffer = require("buffer");
 var import_vitepress_plugin_pagefind = require("vitepress-plugin-pagefind");
 var import_vitepress_plugin_rss = require("vitepress-plugin-rss");
 function getVitePlugins(cfg) {
   const plugins = [];
   const buildEndFn = [];
   plugins.push(inlineBuildEndPlugin(buildEndFn));
+  plugins.push(coverImgTransform());
   if (cfg && cfg.search !== false) {
     const ops = cfg.search instanceof Object ? cfg.search : {};
     plugins.push(
@@ -468,6 +493,42 @@ function inlineBuildEndPlugin(buildEndFn) {
     }
   };
 }
+function coverImgTransform() {
+  let blogConfig;
+  let vitepressConfig;
+  let assetsDir;
+  return {
+    name: "@sugarat/theme-plugin-cover-transform",
+    apply: "build",
+    enforce: "pre",
+    configResolved(config) {
+      vitepressConfig = config.vitepress;
+      assetsDir = vitepressConfig.assetsDir;
+      blogConfig = config.vitepress.site.themeConfig.blog;
+    },
+    async generateBundle(_, bundle) {
+      const assetsMap = Object.entries(bundle).filter(([key]) => {
+        return key.startsWith(assetsDir);
+      }).map(([_2, value]) => {
+        return value;
+      });
+      for (const page of blogConfig.pagesData) {
+        const { cover } = page.meta;
+        if (!cover?.startsWith("/")) {
+          continue;
+        }
+        try {
+          const realPath = import_node_path3.default.join(vitepressConfig.root, cover);
+          const fileBuffer = (0, import_node_fs2.readFileSync)(realPath);
+          const matchAsset = assetsMap.find((v) => import_node_buffer.Buffer.compare(fileBuffer, v.source));
+          page.meta.cover = joinPath("/", matchAsset.fileName);
+        } catch (e) {
+          vitepressConfig.logger.warn(e?.message);
+        }
+      }
+    }
+  };
+}
 
 // src/node.ts
 function getThemeConfig(cfg) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "author": "sugar",
   "license": "MIT",
@@ -51,6 +51,7 @@
     "@documate/vue": "^0.3.1",
     "@element-plus/icons-vue": "^2.1.0",
     "element-plus": "^2.3.4",
+    "javascript-stringify": "^2.1.0",
     "pagefind": "1.0.3",
     "sass": "^1.56.1",
     "typescript": "^4.8.2",

package/src/components/BlogItem.vue

@@ -64,7 +64,7 @@ const showTime = computed(() => {
       <div
         v-if="cover"
         class="cover-img"
-        :style="`background-image: url(${cover});`"
+        :style="`background-image: url(${withBase(`${cover}`)});`"
       />
     </div>
     <!-- 底部补充描述 -->

package/src/utils/node/index.ts

@@ -1,6 +1,7 @@
 /* eslint-disable global-require */
 /* eslint-disable prefer-rest-params */
 import { spawn, spawnSync } from 'node:child_process'
+import path from 'node:path'
 import { formatDate } from '../client'
 
 export function clearMatterContent(content: string) {
@@ -118,3 +119,33 @@ export function withBase(base: string, path: string) {
     ? path
     : joinPath(base, path)
 }
+
+function isBase64ImageURL(url: string) {
+  // Base64 图片链接的格式为 data:image/[image format];base64,[Base64 编码的数据]
+  const regex = /^data:image\/[a-z]+;base64,/
+  return regex.test(url)
+}
+
+/**
+ * 从文档内容中提取封面
+ * @param content 文档内容
+ */
+export function getFirstImagURLFromMD(content: string, route: string) {
+  const url = content.match(/!\[.*\]\((.*)\)/)?.[1]?.replace(/['"]/g, '')
+  const isHTTPSource = url && url.startsWith('http')
+  if (!url) {
+    return ''
+  }
+
+  if (isHTTPSource || isBase64ImageURL(url)) {
+    return url
+  }
+
+  // TODO: 其它协议，待补充
+
+  const paths = joinPath('/', route).split('/')
+  paths.splice(paths.length - 1, 1)
+  const relativePath = url.startsWith('/') ? url : path.join(paths.join('/') || '', url)
+
+  return joinPath('/', relativePath)
+}

package/src/utils/node/theme.ts

@@ -6,7 +6,7 @@ import glob from 'fast-glob'
 import matter from 'gray-matter'
 import type { Theme } from '../../composables/config/index'
 import { formatDate } from '../client'
-import { getDefaultTitle, getFileBirthTime, getTextSummary } from './index'
+import { getDefaultTitle, getFileBirthTime, getFirstImagURLFromMD, getTextSummary } from './index'
 
 export function patchDefaultThemeSideBar(cfg?: Partial<Theme.BlogConfig>) {
   return cfg?.blog !== false && cfg?.recommend !== false
@@ -105,7 +105,7 @@ export function getArticles(cfg?: Partial<Theme.BlogConfig>) {
       // 获取封面图
       meta.cover
         = meta.cover
-        ?? (fileContent.match(/[!]\[.*?\]\((https:\/\/.+)\)/)?.[1] || '')
+        ?? (getFirstImagURLFromMD(fileContent, `/${route}`))
 
       // 是否发布 默认发布
       if (meta.publish === false) {

package/src/utils/node/vitePlugins.ts

@@ -1,13 +1,17 @@
 import path from 'node:path'
 import { execSync } from 'node:child_process'
 import process from 'node:process'
+import { readFileSync } from 'node:fs'
+import { Buffer } from 'node:buffer'
 import type { SiteConfig } from 'vitepress'
+
 import {
   chineseSearchOptimize,
   pagefindPlugin
 } from 'vitepress-plugin-pagefind'
 import { RssPlugin } from 'vitepress-plugin-rss'
 import type { Theme } from '../../composables/config/index'
+import { joinPath } from './index'
 
 export function getVitePlugins(cfg?: Partial<Theme.BlogConfig>) {
   const plugins: any[] = []
@@ -16,7 +20,8 @@ export function getVitePlugins(cfg?: Partial<Theme.BlogConfig>) {
   const buildEndFn: any[] = []
   // 执行自定义的 buildEnd 钩子
   plugins.push(inlineBuildEndPlugin(buildEndFn))
-
+  // 处理cover image的路径（暂只支持自动识别的文章首图）
+  plugins.push(coverImgTransform())
   // 内置简化版的pagefind
   if (cfg && cfg.search !== false) {
     const ops = cfg.search instanceof Object ? cfg.search : {}
@@ -118,3 +123,44 @@ export function inlineBuildEndPlugin(buildEndFn: any[]) {
     }
   }
 }
+
+// TODO: 支持frontmatter中的相对路径图片自动处理
+export function coverImgTransform() {
+  let blogConfig: Theme.BlogConfig
+  let vitepressConfig: SiteConfig
+  let assetsDir: string
+  return {
+    name: '@sugarat/theme-plugin-cover-transform',
+    apply: 'build',
+    enforce: 'pre',
+    configResolved(config: any) {
+      vitepressConfig = config.vitepress
+      assetsDir = vitepressConfig.assetsDir
+      blogConfig = config.vitepress.site.themeConfig.blog
+    },
+    async generateBundle(_: any, bundle: Record<string, any>) {
+      const assetsMap = Object.entries(bundle).filter(([key]) => {
+        return key.startsWith(assetsDir)
+      }).map(([_, value]) => {
+        return value
+      })
+      for (const page of blogConfig.pagesData) {
+        const { cover } = page.meta
+        // 是否相对路径引用
+        if (!cover?.startsWith('/')) {
+          continue
+        }
+        try {
+          // 寻找构建后的
+          const realPath = path.join(vitepressConfig.root, cover)
+          const fileBuffer = readFileSync(realPath)
+          const matchAsset = assetsMap.find(v => Buffer.compare(fileBuffer, v.source))
+          page.meta.cover = joinPath('/', matchAsset.fileName)
+        }
+        catch (e: any) {
+          vitepressConfig.logger.warn(e?.message)
+        }
+      }
+    }
+  }
+}