@sugarat/theme 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 sugar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,35 @@
+# @sugarat/theme
+
+简约风的 Vitepress 博客主题，更多细节见 https://theme.sugarat.top
+
+![图片](https://img.cdn.sugarat.top/mdImg/MTY3MzE3MDUxOTMwMw==673170519303)
+
+## Quick Start
+① 初始化项目模板
+```sh
+npx degit ATQQ/sugar-blog/packages/template my-blog-demo
+```
+
+② 安装依赖
+```sh
+pnpm install
+```
+
+③ 开发启动
+```sh
+pnpm dev
+```
+
+④ 构建产物
+```sh
+pnpm build
+```
+## Advanced Ssage
+详细配置见文档 https://theme.sugarat.top
+
+## Thanks
+从以下项目中获得了灵感&经验
+* [vuepress-reco/vuepress-theme-reco-1.x](https://github.com/vuepress-reco/vuepress-theme-reco-1.x)
+* [@vue/theme](https://github.com/vuejs/theme)
+* [vitest](https://vitest.dev/)
+* [element-plus](https://github.com/element-plus/element-plus)

package/node.d.ts

@@ -0,0 +1,174 @@
+import { DefaultTheme, UserConfig } from 'vitepress';
+import { ElButton } from 'element-plus';
+
+declare namespace BlogPopover {
+    interface Title {
+        type: 'title';
+        content: string;
+        style?: string;
+    }
+    interface Text {
+        type: 'text';
+        content: string;
+        style?: string;
+    }
+    interface Image {
+        type: 'image';
+        src: string;
+        style?: string;
+    }
+    interface Button {
+        type: 'button';
+        link: string;
+        content: string;
+        style?: string;
+        props?: InstanceType<typeof ElButton>['$props'];
+    }
+    type Value = Title | Text | Image | Button;
+}
+declare namespace Theme {
+    interface PageMeta {
+        title: string;
+        date: string;
+        tag?: string[];
+        description?: string;
+        cover?: string;
+        sticky?: number;
+        author?: string;
+        hidden?: boolean;
+        layout?: string;
+        categories: string[];
+        tags: string[];
+    }
+    interface PageData {
+        route: string;
+        meta: PageMeta;
+    }
+    interface activeTag {
+        label: string;
+        type: string;
+    }
+    interface GiscusConfig {
+        repo: string;
+        repoId: string;
+        category: string;
+        categoryId: string;
+        mapping?: string;
+        inputPosition?: 'top' | 'bottom';
+        lang?: string;
+        loading?: 'lazy' | '';
+    }
+    interface HotArticle {
+        title?: string;
+        pageSize?: number;
+        nextText?: string;
+        empty?: string | boolean;
+    }
+    interface RecommendArticle {
+        title?: string;
+        pageSize?: number;
+        nextText?: string;
+        empty?: string | boolean;
+    }
+    interface HomeBlog {
+        name?: string;
+        motto?: string;
+        inspiring?: string;
+        pageSize?: number;
+    }
+    interface ArticleConfig {
+        readingTime?: boolean;
+    }
+    interface Alert {
+        type: 'success' | 'warning' | 'info' | 'error';
+        /**
+         * 细粒度的时间控制
+         * 默认展示时间，-1 只展示1次，其它数字为每次都展示，一定时间后自动消失，0为不自动消失
+         * 配置改变时，会重新触发展示
+         */
+        duration: number;
+        title?: string;
+        description?: string;
+        closable?: boolean;
+        center?: boolean;
+        closeText?: string;
+        showIcon?: boolean;
+        html?: string;
+    }
+    interface Popover {
+        title: string;
+        /**
+         * 细粒度的时间控制
+         * 默认展示时间，-1 只展示1次，其它数字为每次都展示，一定时间后自动消失，0为不自动消失
+         * 配置改变时，会重新触发展示
+         */
+        duration: number;
+        body?: BlogPopover.Value[];
+        footer?: BlogPopover.Value[];
+        /**
+         * 手动重新打开
+         */
+        reopen?: boolean;
+    }
+    interface FriendLink {
+        nickname: string;
+        des: string;
+        url: string;
+        avatar: string;
+    }
+    interface BlogConfig {
+        pagesData: PageData[];
+        srcDir?: string;
+        author?: string;
+        hotArticle?: HotArticle;
+        home?: HomeBlog;
+        search?: boolean;
+        /**
+         * 配置评论
+         * power by https://giscus.app/zh-CN
+         */
+        comment?: GiscusConfig | false;
+        recommend?: RecommendArticle;
+        article?: ArticleConfig;
+        /**
+         * el-alert
+         */
+        alert?: Alert;
+        popover?: Popover;
+        friend?: FriendLink[];
+    }
+    interface Config extends DefaultTheme.Config {
+        blog: BlogConfig;
+    }
+    interface HomeConfig {
+        handleChangeSlogan?: (oldSlogan: string) => string | Promise<string>;
+    }
+}
+
+declare function getThemeConfig(cfg?: Partial<Theme.BlogConfig>): {
+    blog: {
+        pagesData: Theme.PageData[];
+        srcDir?: string | undefined;
+        author?: string | undefined;
+        hotArticle?: Theme.HotArticle | undefined;
+        home?: Theme.HomeBlog | undefined;
+        search?: boolean | undefined;
+        comment?: false | Theme.GiscusConfig | undefined;
+        recommend?: Theme.RecommendArticle | undefined;
+        article?: Theme.ArticleConfig | undefined;
+        alert?: Theme.Alert | undefined;
+        popover?: Theme.Popover | undefined;
+        friend?: Theme.FriendLink[] | undefined;
+    };
+    sidebar: {
+        text: string;
+        items: never[];
+    }[];
+};
+declare function getDefaultTitle(content: string): string;
+declare function clearMatterContent(content: string): string;
+declare function getFileBirthTime(url: string): string;
+declare function getGitTimestamp(file: string): Promise<unknown>;
+declare function defineConfig(config: UserConfig<Theme.Config>): UserConfig<Theme.Config>;
+
+export { clearMatterContent, defineConfig, getDefaultTitle, getFileBirthTime, getGitTimestamp, getThemeConfig };

package/node.js

@@ -0,0 +1,185 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/node.ts
+var node_exports = {};
+__export(node_exports, {
+  clearMatterContent: () => clearMatterContent,
+  defineConfig: () => defineConfig,
+  getDefaultTitle: () => getDefaultTitle,
+  getFileBirthTime: () => getFileBirthTime,
+  getGitTimestamp: () => getGitTimestamp,
+  getThemeConfig: () => getThemeConfig
+});
+module.exports = __toCommonJS(node_exports);
+var import_fast_glob = __toESM(require("fast-glob"));
+var import_gray_matter = __toESM(require("gray-matter"));
+var import_fs = __toESM(require("fs"));
+var import_child_process = require("child_process");
+var import_path = __toESM(require("path"));
+
+// src/utils/index.ts
+function formatDate(d, fmt = "yyyy-MM-dd hh:mm:ss") {
+  if (!(d instanceof Date)) {
+    d = new Date(d);
+  }
+  const o = {
+    "M+": d.getMonth() + 1,
+    "d+": d.getDate(),
+    "h+": d.getHours(),
+    "m+": d.getMinutes(),
+    "s+": d.getSeconds(),
+    "q+": Math.floor((d.getMonth() + 3) / 3),
+    S: d.getMilliseconds()
+  };
+  if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(
+      RegExp.$1,
+      `${d.getFullYear()}`.substr(4 - RegExp.$1.length)
+    );
+  }
+  for (const k in o) {
+    if (new RegExp(`(${k})`).test(fmt))
+      fmt = fmt.replace(
+        RegExp.$1,
+        RegExp.$1.length === 1 ? o[k] : `00${o[k]}`.substr(`${o[k]}`.length)
+      );
+  }
+  return fmt;
+}
+
+// src/node.ts
+function getThemeConfig(cfg) {
+  const srcDir = cfg?.srcDir || process.argv.slice(2)?.[1] || ".";
+  const files = import_fast_glob.default.sync(`${srcDir}/**/*.md`, { ignore: ["node_modules"] });
+  const data = files.map((v) => {
+    let route = v.replace(".md", "");
+    if (route.startsWith("./")) {
+      route = route.replace(
+        new RegExp(`^\\.\\/${import_path.default.join(srcDir, "/")}`),
+        ""
+      );
+    } else {
+      route = route.replace(new RegExp(`^${import_path.default.join(srcDir, "/")}`), "");
+    }
+    const fileContent = import_fs.default.readFileSync(v, "utf-8");
+    const meta = {
+      ...(0, import_gray_matter.default)(fileContent).data
+    };
+    if (!meta.title) {
+      meta.title = getDefaultTitle(fileContent);
+    }
+    if (!meta.date) {
+      meta.date = getFileBirthTime(v);
+    } else {
+      meta.date = formatDate(
+        new Date(`${new Date(meta.date).toUTCString()}+8`)
+      );
+    }
+    meta.tag = (meta.tag || []).concat([
+      .../* @__PURE__ */ new Set([...meta.categories || [], ...meta.tags || []])
+    ]);
+    const wordCount = 100;
+    meta.description = meta.description || getTextSummary(fileContent, wordCount);
+    meta.cover = meta.cover || fileContent.match(/[!]\[.+?\]\((https:\/\/.+)\)/)?.[1] || "";
+    return {
+      route: `/${route}`,
+      meta
+    };
+  }).filter((v) => v.meta.layout !== "home");
+  return {
+    blog: {
+      pagesData: data,
+      ...cfg
+    },
+    sidebar: [
+      {
+        text: "",
+        items: []
+      }
+    ]
+  };
+}
+function getDefaultTitle(content) {
+  const title = clearMatterContent(content).split("\n")?.find((str) => {
+    return str.startsWith("# ");
+  })?.slice(2).replace(/[\s]/g, "") || "";
+  return title;
+}
+function clearMatterContent(content) {
+  let first___;
+  let second___;
+  const lines = content.split("\n").reduce((pre, line) => {
+    if (!line.trim() && pre.length === 0) {
+      return pre;
+    }
+    if (line.trim() === "---") {
+      if (first___ === void 0) {
+        first___ = pre.length;
+      } else if (second___ === void 0) {
+        second___ = pre.length;
+      }
+    }
+    pre.push(line);
+    return pre;
+  }, []);
+  return lines.slice(second___ || 0).join("\n");
+}
+function getFileBirthTime(url) {
+  const infoStr = (0, import_child_process.execSync)(`git log -1 --pretty="%ci" ${url}`).toString("utf-8").trim();
+  let date = new Date();
+  if (infoStr) {
+    date = new Date(infoStr);
+  }
+  return formatDate(date);
+}
+function getGitTimestamp(file) {
+  return new Promise((resolve, reject) => {
+    const child = (0, import_child_process.spawn)("git", ["log", "-1", '--pretty="%ci"', file]);
+    let output = "";
+    child.stdout.on("data", (d) => {
+      output += String(d);
+    });
+    child.on("close", () => {
+      resolve(+new Date(output));
+    });
+    child.on("error", reject);
+  });
+}
+function getTextSummary(text, count = 100) {
+  return clearMatterContent(text).match(/^# ([\s\S]+)/m)?.[1]?.replace(/#/g, "")?.replace(/!\[.*?\]\(.*?\)/g, "")?.replace(/\[(.*?)\]\(.*?\)/g, "$1")?.replace(/\*\*(.*?)\*\*/g, "$1")?.split("\n")?.filter((v) => !!v)?.slice(1)?.join("\n")?.replace(/>(.*)/, "")?.slice(0, count);
+}
+function defineConfig(config) {
+  return config;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  clearMatterContent,
+  defineConfig,
+  getDefaultTitle,
+  getFileBirthTime,
+  getGitTimestamp,
+  getThemeConfig
+});

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@sugarat/theme",
+  "version": "0.1.0",
+  "description": "粥里有勺糖的博客主题，sugarat vitepress blog theme",
+  "main": "src/index.ts",
+  "exports": {
+    "./node": {
+      "types": "./node.d.ts",
+      "default": "./node.js"
+    },
+    ".": "./src/index.ts"
+  },
+  "files": [
+    "src",
+    "types",
+    "node.js",
+    "node.d.ts"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ATQQ/sugar-blog.git"
+  },
+  "keywords": [
+    "vitepress",
+    "theme",
+    "粥里有勺糖"
+  ],
+  "author": "sugar",
+  "license": "MIT",
+  "homepage": "https://next.sugarat.top",
+  "bugs": {
+    "url": "https://github.com/ATQQ/sugar-blog/issues"
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.0.10",
+    "@vue/shared": "^3.2.45",
+    "@vueuse/core": "^9.6.0",
+    "element-plus": "^2.2.26",
+    "fast-glob": "^3.2.12",
+    "gray-matter": "^4.0.3"
+  },
+  "devDependencies": {
+    "sass": "^1.56.1",
+    "tsup": " ^6.5.0",
+    "typescript": "^4.8.2",
+    "vitepress": "^1.0.0-alpha.33",
+    "vue": "^3.2.45"
+  },
+  "scripts": {
+    "dev": "vitepress dev demo",
+    "dev:lib": "npm run build:node && vitepress dev demo",
+    "build": "npm run build:node && npm run build:docs",
+    "build:docs": "vitepress build demo",
+    "build:node": "npx tsup src/node.ts --dts --out-dir=./",
+    "serve": "npm run build && vitepress serve demo"
+  }
+}

package/src/components/BlogAlert.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="global-alert" v-if="show">
+    <el-alert
+      :title="alertProps?.title"
+      :type="alertProps?.type"
+      :show-icon="alertProps?.showIcon"
+      :center="alertProps?.center"
+      :closable="alertProps?.closable"
+      :close-text="alertProps?.closeText"
+      :description="alertProps?.description"
+    >
+      <div v-if="alertProps?.html" v-html="alertProps?.html"></div>
+    </el-alert>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ElAlert } from 'element-plus'
+import { ref, onMounted } from 'vue'
+import { useBlogConfig } from '../composables/config/blog'
+
+const { alert: alertProps } = useBlogConfig()
+const show = ref(false)
+
+onMounted(() => {
+  const storageKey = 'theme-blog-alert'
+  // 取旧值
+  const oldValue = localStorage.getItem(storageKey)
+  const newValue = JSON.stringify(alertProps)
+  localStorage.setItem(storageKey, newValue)
+
+  // >= 0 每次都展示，区别是否自动消失
+  if (Number(alertProps?.duration) >= 0) {
+    show.value = true
+    if (alertProps?.duration) {
+      setTimeout(() => {
+        show.value = false
+      }, alertProps?.duration)
+    }
+  }
+
+  if (oldValue !== newValue && alertProps?.duration === -1) {
+    // 当做新值处理
+    show.value = true
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.global-alert {
+  position: fixed;
+  z-index: 999;
+  top: 66px;
+  max-width: 500px;
+  margin: 0 auto;
+  left: 50%;
+  transform: translateX(-50%);
+  width: auto;
+  :deep(.el-alert__content) {
+    padding-right: 20px;
+  }
+}
+@media screen and (max-width: 1100px) {
+  .global-alert {
+    width: 50%;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .global-alert {
+    width: 90%;
+  }
+}
+</style>

package/src/components/BlogApp.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts" name="BlogApp">
+import Theme from 'vitepress/theme'
+import BlogHomeInfo from './BlogHomeInfo.vue'
+import BlogHomeBanner from './BlogHomeBanner.vue'
+import BlogList from './BlogList.vue'
+import BlogComment from './BlogComment.vue'
+import BlogSearch from './BlogSearch.vue'
+import BlogSidebar from './BlogSidebar.vue'
+import BlogImagePreview from './BlogImagePreview.vue'
+import BlogArticleAnalyze from './BlogArticleAnalyze.vue'
+import BlogAlert from './BlogAlert.vue'
+import BlogPopover from './BlogPopover.vue'
+
+const { Layout } = Theme
+</script>
+
+<template>
+  <Layout>
+    <template #layout-top>
+      <BlogAlert />
+      <BlogPopover />
+    </template>
+
+    <template #doc-before>
+      <!-- 阅读时间分析 -->
+      <ClientOnly>
+        <BlogArticleAnalyze />
+      </ClientOnly>
+      <!-- 图片预览 -->
+      <BlogImagePreview />
+    </template>
+
+    <!-- 自定义搜索，临时替代Algolia -->
+    <template #nav-bar-content-before>
+      <BlogSearch />
+    </template>
+    <!-- 自定义首页 -->
+    <template #home-hero-before>
+      <div class="home">
+        <div class="header-banner">
+          <BlogHomeBanner />
+        </div>
+        <div class="content-wrapper">
+          <div class="blog-list-wrapper"><blog-list /></div>
+          <div class="blog-info-wrapper"><BlogHomeInfo /></div>
+        </div>
+      </div>
+    </template>
+    <template #sidebar-nav-after>
+      <BlogSidebar />
+    </template>
+    <!-- 评论 -->
+    <template #doc-after>
+      <BlogComment />
+    </template>
+  </Layout>
+</template>
+<style scoped lang="scss">
+.home {
+  margin: 0 auto;
+  padding: 20px;
+  max-width: 1126px;
+}
+
+.header-banner {
+  width: 100%;
+  padding: 60px 0;
+}
+
+.content-wrapper {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.blog-list-wrapper {
+  width: 100%;
+}
+.blog-info-wrapper {
+  margin-left: 16px;
+  position: sticky;
+  top: 100px;
+}
+
+@media screen and (max-width: 959px) {
+  .blog-info-wrapper {
+    margin-left: 16px;
+    position: sticky;
+    top: 40px;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .content-wrapper {
+    flex-wrap: wrap;
+  }
+
+  .blog-info-wrapper {
+    margin: 20px 0;
+    width: 100%;
+  }
+}
+</style>