@sugarat/theme 0.2.14 → 0.2.16

package/node.d.ts

@@ -73,6 +73,16 @@ declare namespace Theme {
          */
         album: string;
         publish?: boolean;
+        /**
+         * 文章作者，标签等信息插入位置
+         * @default 'h1'
+         */
+        docMetaInsertSelector?: string;
+        /**
+         * 文章作者，标签等信息插入位置
+         * @default 'after'
+         */
+        docMetaInsertPosition?: 'before' | 'after';
     }
     interface PageData {
         route: string;
@@ -307,6 +317,29 @@ declare namespace Theme {
          * 首页页脚
          */
         footer?: Footer | Footer[];
+        /**
+         * 文章作者，标签等信息插入位置
+         * @default 'h1'
+         */
+        docMetaInsertSelector?: string;
+        /**
+         * 文章作者，标签等信息插入位置
+         * @default 'after'
+         */
+        docMetaInsertPosition?: 'before' | 'after';
+        /**
+         * 配置内置的 markdown-it-task-checkbox 插件，设置 false 则关闭
+         * 详见 https://github.com/linsir/markdown-it-task-checkbox
+         */
+        taskCheckbox?: TaskCheckbox | boolean;
+    }
+    interface TaskCheckbox {
+        disabled?: boolean;
+        divWrap?: boolean;
+        divClass?: string;
+        idPrefix?: string;
+        ulClass?: string;
+        liClass?: string;
     }
     type RSSOptions = RSSPluginOptions;
     interface Footer {

package/node.js

@@ -36,7 +36,7 @@ __export(node_exports, {
 });
 module.exports = __toCommonJS(node_exports);
 
-// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.2.0_vitepress@1.0.0-rc.32_vue@3.3.4/node_modules/vitepress-plugin-tabs/dist/index.js
+// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.2.0_vitepress@1.0.0-rc.36_vue@3.3.4/node_modules/vitepress-plugin-tabs/dist/index.js
 var tabsMarker = "=tabs";
 var tabsMarkerLen = tabsMarker.length;
 var ruleBlockTabs = (state, startLine, endLine, silent) => {
@@ -295,8 +295,9 @@ function isBase64ImageURL(url) {
   const regex = /^data:image\/[a-z]+;base64,/;
   return regex.test(url);
 }
+var imageRegex = /!\[.*?\]\((.*?)\s*(".*?")?\)/;
 function getFirstImagURLFromMD(content, route) {
-  const url = content.match(/!\[.*\]\((.*)\)/)?.[1]?.replace(/['"]/g, "");
+  const url = content.match(imageRegex)?.[1];
   const isHTTPSource = url && url.startsWith("http");
   if (!url) {
     return "";
@@ -323,8 +324,19 @@ function getMarkdownPlugins(cfg) {
       markdownPlugin.push(MermaidMarkdown);
     }
   }
+  if (cfg) {
+    cfg.taskCheckbox = cfg?.taskCheckbox ?? true;
+    if (cfg.taskCheckbox !== false) {
+      markdownPlugin.push(taskCheckboxPlugin(cfg.taskCheckbox));
+    }
+  }
   return markdownPlugin;
 }
+function taskCheckboxPlugin(ops) {
+  return (md) => {
+    md.use(require("markdown-it-task-checkbox"), ops);
+  };
+}
 function registerMdPlugins(vpCfg, plugins) {
   if (plugins.length) {
     vpCfg.markdown = {
@@ -514,7 +526,7 @@ function coverImgTransform() {
       });
       for (const page of blogConfig.pagesData) {
         const { cover } = page.meta;
-        if (!cover?.startsWith("/")) {
+        if (!cover?.startsWith?.("/")) {
           continue;
         }
         try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.2.14",
+  "version": "0.2.16",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "author": "sugar",
   "license": "MIT",
@@ -40,10 +40,11 @@
     "@vueuse/core": "^9.6.0",
     "fast-glob": "^3.2.12",
     "gray-matter": "^4.0.3",
+    "markdown-it-task-checkbox": "^1.0.6",
     "mermaid": "^10.2.4",
     "vitepress-plugin-mermaid": "2.0.13",
     "vitepress-plugin-pagefind": "0.2.10",
-    "vitepress-plugin-rss": "0.2.0",
+    "vitepress-plugin-rss": "0.2.1",
     "vitepress-plugin-tabs": "0.2.0"
   },
   "devDependencies": {
@@ -55,7 +56,7 @@
     "pagefind": "1.0.3",
     "sass": "^1.56.1",
     "typescript": "^4.8.2",
-    "vitepress": "1.0.0-rc.32",
+    "vitepress": "1.0.0-rc.36",
     "vue": "^3.3.4"
   },
   "scripts": {

package/src/components/BlogArticleAnalyze.vue

@@ -11,7 +11,7 @@ import {
   EditPen,
   UserFilled
 } from '@element-plus/icons-vue'
-import { useBlogConfig, useCurrentArticle } from '../composables/config/blog'
+import { useBlogConfig, useCurrentArticle, useDocMetaInsertPosition, useDocMetaInsertSelector } from '../composables/config/blog'
 import countWord, { formatShowDate } from '../utils/client'
 import type { Theme } from '../composables/config'
 import BlogDocCover from './BlogDocCover.vue'
@@ -52,6 +52,9 @@ const readTime = computed(() => {
   return Math.ceil((wordTime.value + imageTime.value) / 60)
 })
 
+const docMetaInsertSelector = useDocMetaInsertSelector()
+const docMetaInsertPosition = useDocMetaInsertPosition()
+
 const route = useRoute()
 const $des = ref<HTMLDivElement>()
 
@@ -71,7 +74,12 @@ function analyze() {
     || ''
 
   wordCount.value = countWord(words)
-  docDomContainer?.querySelector('h1')?.after($des.value!)
+
+  let el = docDomContainer?.querySelector(docMetaInsertSelector.value)
+  if (!el) {
+    el = docDomContainer?.querySelector('h1')
+  }
+  el?.[docMetaInsertPosition.value]?.($des.value!)
 }
 
 onMounted(() => {

package/src/components/BlogRecommendArticle.vue

@@ -79,7 +79,8 @@ const recommendList = computed(() => {
 })
 
 function isCurrentDoc(value: string) {
-  return value === decodeURIComponent(route.path).replace(/.html$/, '')
+  const path = decodeURIComponent(route.path).replace(/.html$/, '')
+  return [value, value.replace(/index$/, '')].includes(path)
 }
 
 const currentPage = ref(1)

package/src/composables/config/blog.ts

@@ -77,6 +77,18 @@ export function withConfigProvider(App: Component) {
   })
 }
 
+export function useDocMetaInsertSelector() {
+  const blogConfig = useConfig()
+  const { frontmatter } = useData()
+  return computed(() => frontmatter.value?.docMetaInsertSelector || blogConfig.config?.blog?.docMetaInsertSelector || 'h1')
+}
+
+export function useDocMetaInsertPosition() {
+  const blogConfig = useConfig()
+  const { frontmatter } = useData()
+  return computed(() => frontmatter.value?.docMetaInsertPosition || blogConfig.config?.blog?.docMetaInsertPosition || 'after')
+}
+
 export function useConfig() {
   return {
     config: inject(configSymbol)!.value

package/src/composables/config/index.ts

@@ -79,6 +79,16 @@ export namespace Theme {
     album: string
     // 是否发布
     publish?: boolean
+    /**
+     * 文章作者，标签等信息插入位置
+     * @default 'h1'
+     */
+    docMetaInsertSelector?: string
+    /**
+     * 文章作者，标签等信息插入位置
+     * @default 'after'
+     */
+    docMetaInsertPosition?: 'before' | 'after'
   }
   export interface PageData {
     route: string
@@ -339,6 +349,30 @@ export namespace Theme {
      * 首页页脚
      */
     footer?: Footer | Footer[]
+    /**
+     * 文章作者，标签等信息插入位置
+     * @default 'h1'
+     */
+    docMetaInsertSelector?: string
+    /**
+     * 文章作者，标签等信息插入位置
+     * @default 'after'
+     */
+    docMetaInsertPosition?: 'before' | 'after'
+    /**
+     * 配置内置的 markdown-it-task-checkbox 插件，设置 false 则关闭
+     * 详见 https://github.com/linsir/markdown-it-task-checkbox
+     */
+    taskCheckbox?: TaskCheckbox | boolean
+  }
+
+  export interface TaskCheckbox {
+    disabled?: boolean
+    divWrap?: boolean
+    divClass?: string
+    idPrefix?: string
+    ulClass?: string
+    liClass?: string
   }
 
   export type RSSOptions = RSSPluginOptions

package/src/styles/index.scss

@@ -23,7 +23,7 @@ html.dark {
 }
 .VPHome {
   &::before {
-    content: '';
+    content: "";
     inset: 0;
     position: fixed;
     top: 0;
@@ -33,17 +33,13 @@ html.dark {
     min-height: 100%;
   }
   min-height: calc(100vh - var(--vp-nav-height));
-  background: radial-gradient(
-    ellipse,
-    rgba(var(--bg-gradient-home), 1) 0%,
-    rgba(var(--bg-gradient-home), 0) 700%
-  );
+  background: radial-gradient(ellipse, rgba(var(--bg-gradient-home), 1) 0%, rgba(var(--bg-gradient-home), 0) 700%);
 }
 
 @media screen and (min-width: 960px) {
-  #VPContent.is-home.VPContent{
+  #VPContent.is-home.VPContent {
     padding-top: 0;
-    .VPHome{
+    .VPHome {
       min-height: 100vh;
     }
   }
@@ -85,10 +81,7 @@ html.dark {
 // sidebar
 @media (min-width: 1440px) {
   aside.VPSidebar {
-    padding-left: max(
-      32px,
-      calc((100% - (var(--vp-layout-max-width) - 16px)) / 2)
-    ) !important;
+    padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 16px)) / 2)) !important;
     padding-right: 10px !important;
   }
 }
@@ -126,20 +119,53 @@ html.dark {
   background-color: var(--vp-c-brand-1);
 }
 
-
-main .vp-doc a{
+main .vp-doc a {
   text-decoration: none;
 }
-main .vp-doc a:hover{
+main .vp-doc a:hover {
   text-decoration: underline dotted;
 }
 
-
 // 自定义全局样式
-span.svg-icon{
-  svg{
+span.svg-icon {
+  svg {
     width: 14px;
     height: 14px;
     margin-right: 4px;
   }
-}
+}
+
+.vp-doc ul.task-list {
+  list-style: none;
+  padding-left: 10px;
+
+  input[type="checkbox"] {
+    cursor: pointer;
+    position: relative;
+    width: 13px;
+    height: 13px;
+  }
+
+  input[type="checkbox"]::after {
+    position: absolute;
+    top: 0;
+    color: #000;
+    width: 13px;
+    height: 13px;
+    display: inline-block;
+    visibility: visible;
+    padding-left: 0px;
+    text-align: center;
+    content: " ";
+    border-radius: 3px;
+  }
+
+  input[type="checkbox"]:checked::after {
+    content: "✓";
+    color: #fff;
+    line-height: 14px;
+    font-size: 10px;
+    font-weight: bold;
+    background-color: var(--vp-c-brand-1);
+  }
+}

package/src/utils/node/index.ts

@@ -126,12 +126,14 @@ function isBase64ImageURL(url: string) {
   return regex.test(url)
 }
 
+const imageRegex = /!\[.*?\]\((.*?)\s*(".*?")?\)/
+
 /**
  * 从文档内容中提取封面
  * @param content 文档内容
  */
 export function getFirstImagURLFromMD(content: string, route: string) {
-  const url = content.match(/!\[.*\]\((.*)\)/)?.[1]?.replace(/['"]/g, '')
+  const url = content.match(imageRegex)?.[1]
   const isHTTPSource = url && url.startsWith('http')
   if (!url) {
     return ''

package/src/utils/node/mdPlugins.ts

@@ -19,9 +19,23 @@ export function getMarkdownPlugins(cfg?: Partial<Theme.BlogConfig>) {
       markdownPlugin.push(MermaidMarkdown)
     }
   }
+
+  if (cfg) {
+    cfg.taskCheckbox = cfg?.taskCheckbox ?? true
+    if (cfg.taskCheckbox !== false) {
+      markdownPlugin.push(taskCheckboxPlugin(cfg.taskCheckbox))
+    }
+  }
+
   return markdownPlugin
 }
 
+export function taskCheckboxPlugin(ops: Theme.TaskCheckbox | boolean) {
+  return (md: any) => {
+    md.use(require('markdown-it-task-checkbox'), ops)
+  }
+}
+
 export function registerMdPlugins(vpCfg: any, plugins: any[]) {
   if (plugins.length) {
     vpCfg.markdown = {

package/src/utils/node/theme.ts

@@ -61,6 +61,7 @@ export function getArticles(cfg?: Partial<Theme.BlogConfig>) {
 
       const fileContent = fs.readFileSync(v, 'utf-8')
       // TODO：摘要生成优化
+      // TODO: 用上内容content
       const { data: frontmatter, excerpt } = matter(fileContent, {
         excerpt: true
       })
@@ -70,6 +71,7 @@ export function getArticles(cfg?: Partial<Theme.BlogConfig>) {
       }
 
       if (!meta.title) {
+        // TODO：优化标题的采集
         meta.title = getDefaultTitle(fileContent)
       }
       if (!meta.date) {

package/src/utils/node/vitePlugins.ts

@@ -147,7 +147,7 @@ export function coverImgTransform() {
       for (const page of blogConfig.pagesData) {
         const { cover } = page.meta
         // 是否相对路径引用
-        if (!cover?.startsWith('/')) {
+        if (!cover?.startsWith?.('/')) {
           continue
         }
         try {