feat(theme): improve empty hint

vuepress-theme-hope · Nov 17, 2023 · 5f46837 · 5f46837
1 parent 4cc8458
commit 5f46837
Show file tree

Hide file tree

Showing 25 changed files with 143 additions and 119 deletions.
diff --git a/docs/theme/src/config/theme/i18n.md b/docs/theme/src/config/theme/i18n.md
@@ -60,10 +60,8 @@ interface ThemeLocaleData {
     intro: string;
     /** 收藏文字 */
     star: string;
-    /** 幻灯片 */
-    slides: string;
-    /** 加密 */
-    encrypt: string;
+    /** 空文字 */
+    empty: string;
   };
 
   /**

diff --git a/docs/theme/src/zh/config/theme/i18n.md b/docs/theme/src/zh/config/theme/i18n.md
@@ -60,10 +60,6 @@ interface ThemeLocaleData {
     intro: string;
     /** 收藏文字 */
     star: string;
-    /** 幻灯片 */
-    slides: string;
-    /** 加密 */
-    encrypt: string;
   };
 
   /**

diff --git a/packages/theme/src/client/modules/blog/components/InfoList.ts b/packages/theme/src/client/modules/blog/components/InfoList.ts
@@ -1,6 +1,6 @@
 import type { FunctionalComponent, VNode } from "vue";
 import { computed, defineComponent, h, ref } from "vue";
-import { VPLink, keys } from "vuepress-shared/client";
+import { VPLink, entries, keys } from "vuepress-shared/client";
 
 import DropTransition from "@theme-hope/components/transitions/DropTransition";
 import { useNavigate, useThemeLocaleData } from "@theme-hope/composables/index";
@@ -24,6 +24,15 @@ import { ArticleInfoType } from "../../../../shared/index.js";
 
 import "../styles/info-list.scss";
 
+type InfoType = "article" | "category" | "tag" | "timeline";
+
+const buttons: Record<InfoType, FunctionalComponent> = {
+  article: ArticleIcon,
+  category: CategoryIcon,
+  tag: TagIcon,
+  timeline: TimelineIcon,
+};
+
 export default defineComponent({
   name: "InfoList",
 
@@ -37,51 +46,45 @@ export default defineComponent({
     const tagNumber = computed(() => keys(tagMap.value.map).length);
     const navigate = useNavigate();
 
-    const active = ref<"article" | "category" | "tag" | "timeline">("article");
+    const activeType = ref<InfoType>("article");
 
     const locale = computed(() => themeLocale.value.blogLocales);
 
-    const buttons: [
-      "article" | "category" | "tag" | "timeline",
-      FunctionalComponent,
-    ][] = [
-      ["article", ArticleIcon],
-      ["category", CategoryIcon],
-      ["tag", TagIcon],
-      ["timeline", TimelineIcon],
-    ];
-
     return (): VNode =>
       h("div", { class: "vp-blog-infos" }, [
         h(
           "div",
           { class: "vp-blog-type-switcher" },
-          buttons.map(([key, Icon]) =>
-            h(
-              "button",
-              {
-                type: "button",
-                class: "vp-blog-type-button",
-                onClick: () => {
-                  active.value = key;
-                },
-              },
+          (<[InfoType, FunctionalComponent][]>entries(buttons)).map(
+            ([key, Icon]) =>
               h(
-                "div",
+                "button",
                 {
-                  class: ["icon-wrapper", { active: active.value === key }],
-                  "aria-label": locale.value[key],
-                  "data-balloon-pos": "up",
+                  type: "button",
+                  class: "vp-blog-type-button",
+                  onClick: () => {
+                    activeType.value = key;
+                  },
                 },
-                h(Icon),
+                h(
+                  "div",
+                  {
+                    class: [
+                      "icon-wrapper",
+                      { active: activeType.value === key },
+                    ],
+                    "aria-label": locale.value[key],
+                    "data-balloon-pos": "up",
+                  },
+                  h(Icon),
+                ),
               ),
-            ),
           ),
         ),
 
         h(DropTransition, () =>
-          // article
-          active.value === "article"
+          // star articles
+          activeType.value === "article"
             ? h("div", { class: "vp-star-article-wrapper" }, [
                 h(
                   "div",
@@ -96,64 +99,87 @@ export default defineComponent({
                   ],
                 ),
                 h("hr"),
-                h(
-                  "ul",
-                  { class: "vp-star-articles" },
-                  stars.value.items.map(({ info, path }, index) =>
-                    h(
-                      DropTransition,
-                      { appear: true, delay: 0.08 * (index + 1) },
-                      () =>
+                stars.value.items.length
+                  ? h(
+                      "ul",
+                      { class: "vp-star-articles" },
+                      stars.value.items.map(({ info, path }, index) =>
                         h(
-                          "li",
-                          { class: "vp-star-article" },
-                          h(
-                            VPLink,
-                            { to: path },
-                            () => info[ArticleInfoType.title],
-                          ),
+                          DropTransition,
+                          { appear: true, delay: 0.08 * (index + 1) },
+                          () =>
+                            h(
+                              "li",
+                              { class: "vp-star-article" },
+                              h(
+                                VPLink,
+                                { to: path },
+                                () => info[ArticleInfoType.title],
+                              ),
+                            ),
                         ),
+                      ),
+                    )
+                  : h(
+                      "div",
+                      { class: "vp-star-article-empty" },
+                      locale.value.empty.replace("$text", locale.value.star),
                     ),
-                  ),
-                ),
               ])
-            : active.value === "category"
+            : activeType.value === "category"
               ? h("div", { class: "vp-category-wrapper" }, [
                   categoryNumber.value
-                    ? h(
-                        "div",
-                        {
-                          class: "title",
-                          onClick: () => navigate(categoryMap.value.path),
-                        },
-                        [
-                          h(CategoryIcon),
-                          h("span", { class: "num" }, categoryNumber.value),
-                          locale.value.category,
-                        ],
-                      )
-                    : null,
-                  h("hr"),
-                  h(DropTransition, { delay: 0.04 }, () => h(CategoryList)),
-                ])
-              : active.value === "tag"
-                ? h("div", { class: "vp-tag-wrapper" }, [
-                    tagNumber.value
-                      ? h(
+                    ? [
+                        h(
                           "div",
                           {
                             class: "title",
-                            onClick: () => navigate(tagMap.value.path),
+                            onClick: () => navigate(categoryMap.value.path),
                           },
                           [
-                            h(TagIcon),
-                            h("span", { class: "num" }, tagNumber.value),
-                            locale.value.tag,
+                            h(CategoryIcon),
+                            h("span", { class: "num" }, categoryNumber.value),
+                            locale.value.category,
                           ],
-                        )
-                      : null,
-                    h("hr"),
-                    h(DropTransition, { delay: 0.04 }, () => h(TagList)),
+                        ),
+                        h("hr"),
+                        h(DropTransition, { delay: 0.04 }, () =>
+                          h(CategoryList),
+                        ),
+                      ]
+                    : h(
+                        "div",
+                        { class: "vp-category-empty" },
+                        locale.value.empty.replace(
+                          "$text",
+                          locale.value.category,
+                        ),
+                      ),
+                ])
+              : activeType.value === "tag"
+                ? h("div", { class: "vp-tag-wrapper" }, [
+                    tagNumber.value
+                      ? [
+                          h(
+                            "div",
+                            {
+                              class: "title",
+                              onClick: () => navigate(tagMap.value.path),
+                            },
+                            [
+                              h(TagIcon),
+                              h("span", { class: "num" }, tagNumber.value),
+                              locale.value.tag,
+                            ],
+                          ),
+                          h("hr"),
+                          h(DropTransition, { delay: 0.04 }, () => h(TagList)),
+                        ]
+                      : h(
+                          "div",
+                          { class: "vp-tag-empty" },
+                          locale.value.empty.replace("$text", locale.value.tag),
+                        ),
                   ])
                 : h(DropTransition, () => h(TimelineList)),
         ),

diff --git a/packages/theme/src/client/modules/blog/layouts/BlogCategory.ts b/packages/theme/src/client/modules/blog/layouts/BlogCategory.ts
@@ -1,6 +1,6 @@
 import { usePageData, usePageFrontmatter } from "@vuepress/client";
 import type { VNode } from "vue";
-import { computed, defineComponent, h, resolveComponent } from "vue";
+import { defineComponent, h } from "vue";
 import type {
   BlogCategoryFrontmatterOptions,
   BlogPluginFrontmatter,
@@ -22,61 +22,42 @@ import "../styles/page.scss";
 export default defineComponent({
   name: "BlogPage",
 
-  components: {
-    CategoryList,
-    TagList,
-  },
-
   setup() {
     const page = usePageData();
     const frontmatter = usePageFrontmatter<BlogPluginFrontmatter>();
     const categoryMap = useCategoryMap();
     const tagMap = useTagMap();
-    const blogOptions = computed(
-      () => (frontmatter.value.blog || {}) as BlogCategoryFrontmatterOptions,
-    );
-
-    const componentName = computed(() => {
-      const { key = "" } = blogOptions.value;
-
-      return key === "category"
-        ? "CategoryList"
-        : key === "tag"
-          ? "TagList"
-          : null;
-    });
 
-    const items = computed(() => {
-      const { name = "", key = "" } = blogOptions.value;
+    return (): VNode => {
+      const { key = "", name = "" } =
+        <BlogCategoryFrontmatterOptions>frontmatter.value.blog || {};
 
-      return key === "category"
-        ? name
+      const items = name
+        ? key === "category"
           ? categoryMap.value.map[name].items
-          : []
-        : key === "tag"
-          ? name
+          : key === "tag"
             ? tagMap.value.map[name].items
             : []
-          : [];
-    });
+        : [];
 
-    return (): VNode =>
-      h(BlogWrapper, () =>
+      return h(BlogWrapper, () =>
         h(
           "div",
           { class: "vp-page vp-blog" },
           h("div", { class: "blog-page-wrapper" }, [
             h("main", { id: "main-content", class: "vp-blog-main" }, [
               h(DropTransition, () =>
-                componentName.value
-                  ? h(resolveComponent(componentName.value))
-                  : null,
+                key === "category"
+                  ? h(CategoryList)
+                  : key === "tag"
+                    ? h(TagList)
+                    : null,
               ),
-              blogOptions.value.name
+              name
                 ? h(DropTransition, { appear: true, delay: 0.24 }, () =>
                     h(ArticleList, {
                       key: page.value.path,
-                      items: items.value,
+                      items,
                     }),
                   )
                 : null,
@@ -87,5 +68,6 @@ export default defineComponent({
           ]),
         ),
       );
+    };
   },
 });
diff --git a/packages/theme/src/node/locales/br.ts b/packages/theme/src/node/locales/br.ts
@@ -36,6 +36,7 @@ export const brLocale: ThemeLocaleData = {
     all: "Todos",
     intro: "Intro Pessoal",
     star: "Estrela",
+    empty: "Nenhum $text",
   },
 
   paginationLocales: {

diff --git a/packages/theme/src/node/locales/de.ts b/packages/theme/src/node/locales/de.ts
@@ -36,6 +36,7 @@ export const deLocale: ThemeLocaleData = {
     all: "Alle",
     intro: "Persönliche Einleitung",
     star: "Star",
+    empty: "$text ist leer",
   },
 
   paginationLocales: {

diff --git a/packages/theme/src/node/locales/deAT.ts b/packages/theme/src/node/locales/deAT.ts
@@ -36,6 +36,7 @@ export const deATLocale: ThemeLocaleData = {
     all: "Alle",
     intro: "Persönliche Einleitung",
     star: "Star",
+    empty: "$text ist leer",
   },
 
   paginationLocales: {

diff --git a/packages/theme/src/node/locales/en.ts b/packages/theme/src/node/locales/en.ts
@@ -36,6 +36,7 @@ export const enLocale: ThemeLocaleData = {
     all: "All",
     intro: "Personal Intro",
     star: "Star",
+    empty: "No $text",
   },
 
   paginationLocales: {

diff --git a/packages/theme/src/node/locales/es.ts b/packages/theme/src/node/locales/es.ts
@@ -36,6 +36,7 @@ export const esLocale: ThemeLocaleData = {
     all: "Todos",
     intro: "Introducción personal",
     star: "Estrella",
+    empty: "$text está vacío",
   },
 
   paginationLocales: {

diff --git a/packages/theme/src/node/locales/fi.ts b/packages/theme/src/node/locales/fi.ts
@@ -36,6 +36,7 @@ export const fiLocale: ThemeLocaleData = {
     all: "Kaikki",
     intro: "Intro",
     star: "Tähti",
+    empty: "$text on tyhjä",
   },
 
   paginationLocales: {