Merge pull request #103 from chengpeiquan/develop

Develop
chengpeiquan · May 5, 2021 · 628cc18 · 628cc18
2 parents 760565a + f838f30
commit 628cc18
Show file tree

Hide file tree

Showing 28 changed files with 828 additions and 377 deletions.
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
   "scripts": {
     "dev": "cross-env NODE_ENV=development vite",
     "build": "cross-env NODE_ENV=production vite-ssg build && esno ./scripts/rss.ts",
-    "git": "git add . && git commit -m \"Back up some code adjustments.\" && git push"
+    "git": "git add . && git commit -m \"chore: back up some code adjustments.\" && git push"
   },
   "repository": {
     "type": "git",
@@ -21,7 +21,7 @@
     "@vueuse/head": "^0.5.1",
     "dayjs": "^1.10.4",
     "nprogress": "^0.2.0",
-    "vue": "^3.0.7",
+    "vue": "^3.0.11",
     "vue-router": "^4.0.5"
   },
   "devDependencies": {
@@ -31,15 +31,16 @@
     "@types/fs-extra": "^9.0.6",
     "@types/node": "^14.14.25",
     "@types/nprogress": "^0.2.0",
-    "@vitejs/plugin-vue": "^1.1.4",
-    "@vue/compiler-sfc": "^3.0.5",
-    "@vue/server-renderer": "^3.0.5",
+    "@vitejs/plugin-vue": "^1.2.2",
+    "@vue/compiler-sfc": "^3.0.11",
+    "@vue/server-renderer": "^3.0.11",
     "@vuedx/typecheck": "^0.6.0",
     "@vuedx/typescript-plugin-vue": "^0.6.0",
     "cross-env": "^7.0.3",
     "diacritics": "^1.3.0",
     "esno": "^0.4.3",
     "feed": "^4.2.2",
+    "flowchart.js": "^1.15.0",
     "fs-extra": "^9.1.0",
     "gray-matter": "^4.0.2",
     "markdown-it": "^12.0.4",
@@ -52,17 +53,18 @@
     "postcss": "^8.2.5",
     "postcss-nested": "^5.0.3",
     "prism-theme-vars": "^0.1.4",
-    "typescript": "^4.1.3",
-    "vite": "^2.0.5",
+    "typescript": "^4.2.4",
+    "vite": "^2.2.3",
     "vite-plugin-banner": "^0.1.3",
     "vite-plugin-components": "^0.8.2",
-    "vite-plugin-icons": "^0.3.2",
+    "vite-plugin-icons": "^0.5.0",
     "vite-plugin-md": "^0.6.1",
     "vite-plugin-pages": "^0.7.0",
     "vite-plugin-purge-icons": "^0.7.0",
     "vite-plugin-pwa": "^0.5.6",
-    "vite-plugin-windicss": "^0.8.2",
-    "vite-ssg": "^0.8.12",
-    "vue-baidu-analytics": "^2.0.3"
+    "vite-plugin-windicss": "^0.15.10",
+    "vite-ssg": "^0.9.3",
+    "vue-baidu-analytics": "^2.1.0",
+    "windicss": "^2.5.14"
   }
 }
diff --git a/src/assets/postcss/markdown.postcss b/src/assets/postcss/markdown.postcss
@@ -119,6 +119,11 @@ blockquote {
   text-align: justify;
   @apply text-base;
 
+  /* 段落 */
+  p {
+    text-indent: 2em;
+  }
+
   /* 图片 */
   img {
     border-radius: 0.25rem;
@@ -181,10 +186,12 @@ blockquote {
     border-spacing: 0;
     border-collapse: separate;
     border-radius: 0.2rem;
+    overflow: hidden;
 
     thead {
       color: var(--fg);
       font-weight: bold;
+      background-color: var(--prism-background);
     }
 
     tbody {
@@ -219,11 +226,27 @@ blockquote {
 
   /* 有序列表 */
   ol > li {
+    list-style-type: decimal;
     padding-left: 0.75rem;
+    margin-left: 3em;
 
     &::before {
       display: none;
     }
+
+    p {
+      text-indent: 0;
+    }
+  }
+
+  /* 无序列表 */
+  ul > li {
+    padding-left: 1.75rem;
+    margin-left: 2em;
+
+    p {
+      text-indent: 0;
+    }
   }
 
   /* 删除线 */
@@ -237,6 +260,37 @@ blockquote {
     margin-left: auto;
     margin-right: auto;
   }
+
+  /* 引用 */
+  blockquote {
+    position: relative;
+    color: var(--fg-light) !important;
+    padding-left: 2.5em;
+    padding-right: 2.5em;
+    overflow-wrap: break-word;
+    border: 0;
+    margin-top: 2em;
+    margin-bottom: 2em;
+
+    &::before {
+      content: "“";
+      position: absolute;
+      top: -.2em;
+      left: 0;
+      font-family: "Times New Roman", Times, serif;
+      font-size: 300%;
+      font-weight: 700;
+      line-height: 1;
+    }
+
+    p {
+      text-indent: 0;
+      &::before,
+      &::after {
+        display: none;
+      }
+    }
+  }
 }
 
 

diff --git a/src/components/blog/Article.vue b/src/components/blog/Article.vue
@@ -8,13 +8,24 @@
     <!-- 标题 -->
 
     <!-- 发布信息 -->
-    <p class="flex items-center w-full text-sm text-gray-400 md:mb-8 mb-4 md:pb-8 pb-4 border-b dark:border-white dark:border-opacity-5">
-      <span class="mr-8">作者：程沛权</span>
+    <div class="flex justify-between items-center w-full text-sm text-gray-400 md:mb-8 mb-4 md:pb-8 pb-4 border-b dark:border-white dark:border-opacity-5">
+      <div class="flex items-center">
+        <span class="md:mr-8 mr-4">作者：程沛权</span>
+        <span :title="date.substr(0, 10)">
+          {{ diffDays > 7 ? date.substr(0, 10) : dateAgo }}
+        </span>
+      </div>
 
-      <span :title="date.substr(0, 10)">
-        {{ diffDays > 7 ? date.substr(0, 10) : dateAgo }}
-      </span>
-    </p>
+      <div
+        v-if="repo && !isMobile"
+        class="flex items-center cursor-pointer hover:text-red-500 dark:hover:text-rose-500"
+        :title="lang === 'zh-CN' ? '给仓库一个Star' : 'Star this repository'"
+        @click="openRepo"
+      >
+        <ri-star-line />
+        <span class="ml-1">Star on GitHub</span>
+      </div>
+    </div>
     <!-- 发布信息 -->
 
     <!-- 过期提示 -->
@@ -49,10 +60,17 @@ import isMobile from '/@libs/isMobile'
 const route = useRoute();
 const router = useRouter();
 const { frontmatter } = defineProps<{ frontmatter: any }>();
-const { title, desc, keywords, date } = frontmatter;
+const { title, desc, keywords, date, repo } = frontmatter;
 const { diffDays, dateAgo } = dateDisplay(date);
 const lang: string = inject('lang') || '';
 
+/** 
+ * 打开仓库
+ */
+const openRepo = (): void => {
+  if (!repo || !String(repo).startsWith('http')) return;
+  window.open(repo);
+}
 
 /** 
  * 设置页面信息

diff --git a/src/components/blog/List.vue b/src/components/blog/List.vue
@@ -34,10 +34,14 @@
         :key="index"
       >
         <router-link
-          class="md:mb-4 mb-2"
+          class="flex md:items-center items-start md:mb-4 mb-2"
           :title="item.title"
           :to="item.path"
         >
+          <ri-fire-fill
+            v-if="item.isHot"
+            class="mr-2 text-xl text-red-500 dark:text-rose-500"
+          />
           <h2 class="md:text-2xl text-lg line-clamp-2">
             {{ item.title }}
           </h2>
@@ -68,7 +72,7 @@
               {{ item.desc }}
             </p>
 
-            <p class="md:text-sm text-xs text-gray-400" :title="item.date.substr(0, 10)">
+            <p class="flex justify-between md:text-sm text-xs text-gray-400" :title="item.date.substr(0, 10)">
               {{ item.diffDays > 7 ? item.date.substr(0, 10) : item.dateAgo }}
             </p>
           </div>
@@ -173,7 +177,7 @@ const getArticleList = (): void => {
   articleList.value = CUR_ROUTES.map( (route: RouteRecordRaw) => {
     const { path } = route;
     const { frontmatter } = route.meta;
-    const { title, desc, cover, date } = frontmatter;
+    const { title, desc, cover, date, isHot, repo } = frontmatter;
     const { diffDays, dateAgo } = dateDisplay(date);
     
     return {
@@ -182,6 +186,8 @@ const getArticleList = (): void => {
       desc,
       cover,
       date,
+      isHot,
+      repo,
       diffDays,
       dateAgo
     }

diff --git a/src/components/blog/Sidebar.vue b/src/components/blog/Sidebar.vue
@@ -188,4 +188,11 @@ onMounted(moveToc);
 .article-title {
   text-align: justify;
 }
+.article-toc-container {
+  :deep(.article-toc) {
+    li {
+      margin-left: 0;
+    }
+  }
+}
 </style>