feat(theme): rebuild home page related components

vuepress-theme-hope · Jan 4, 2023 · 3f76b8d · 3f76b8d
1 parent 33b0e69
commit 3f76b8d
Show file tree

Hide file tree

Showing 12 changed files with 408 additions and 393 deletions.
diff --git a/docs-shared/src/components/HopeHero.ts b/docs-shared/src/components/HopeHero.ts
@@ -1,11 +1,11 @@
 import { h } from "vue";
 import type { FunctionalComponent, VNode } from "vue";
 
-import HomeHero from "vuepress-theme-hope/components/HomeHero.js";
+import HeroInfo from "vuepress-theme-hope/components/HeroInfo.js";
 import HopeLogo from "./HopeLogo.js";
 
 const HopeHero: FunctionalComponent = (): VNode =>
-  h(HomeHero, {}, { heroImage: () => h(HopeLogo) });
+  h(HeroInfo, {}, { heroImage: () => h(HopeLogo) });
 
 HopeHero.displayName = "HopeHero";
 

diff --git a/docs-shared/src/config-wrapper.ts b/docs-shared/src/config-wrapper.ts
@@ -98,7 +98,7 @@ export const config = (
 
     alias: {
       "@NetlifyBadge": path.resolve(__dirname, "./components/NetlifyBadge.js"),
-      "@theme-hope/components/HomeHero": path.resolve(
+      "@theme-hope/components/HeroInfo": path.resolve(
         __dirname,
         "./components/HopeHero.js"
       ),

diff --git a/docs/theme/src/cookbook/advanced/replace.md b/docs/theme/src/cookbook/advanced/replace.md
@@ -80,8 +80,8 @@ Components:
 - `@theme-hope/components/AutoLink`: basic link
 - `@theme-hope/components/BreadCrumb`: breadcrumb
 - `@theme-hope/components/CommonWrapper`: basic layout integration
-- `@theme-hope/components/HomeFeatures`: homepage features
-- `@theme-hope/components/HomeHero`: homepage logo and introduction
+- `@theme-hope/components/FeaturePanel`: homepage features
+- `@theme-hope/components/HeroInfo`: homepage logo and introduction
 - `@theme-hope/components/HomePage`: home page
 - `@theme-hope/components/Icon`: icon
 - `@theme-hope/components/MarkdownContent`: Markdown content
@@ -283,7 +283,7 @@ Components that provide slots are as follows:
 
 - `AutoLink`: `default`, `before`, `after`
 - `CommonWrapper`: `default`, `navbarLeftStart`, `navbarLeftEnd`, `navbarCenterStart`, `navbarCenterEnd`, `navbarRightStart`, `navbarRightEnd`, `navScreenTop`, `navScreenBottom`, `sidebar`, `sidebarTop`, `sidebarBottom`
-- `HomeHero`: `heroImage`, `heroInfo`
+- `HeroInfo`: `heroImage`, `heroInfo`
 - `HomePage`: `top`, `center`, `bottom`
 - `NormalPage`: `top`, `contentBefore`, `contentAfter`, `bottom`
 

diff --git a/docs/theme/src/ru/cookbook/advanced/replace.md b/docs/theme/src/ru/cookbook/advanced/replace.md
@@ -80,8 +80,8 @@ export default {
 - `@theme-hope/components/AutoLink`: основная ссылка
 - `@theme-hope/components/BreadCrumb`: хлебная крошка
 - `@theme-hope/components/CommonWrapper`: базовая интеграция макета
-- `@theme-hope/components/HomeFeatures`: функции главной страницы
-- `@theme-hope/components/HomeHero`: логотип главной страницы и введение
+- `@theme-hope/components/FeaturePanel`: функции главной страницы
+- `@theme-hope/components/HeroInfo`: логотип главной страницы и введение
 - `@theme-hope/components/HomePage`: главная страница
 - `@theme-hope/components/Icon`: иконка
 - `@theme-hope/components/MarkdownContent`: контент разметки
@@ -285,7 +285,7 @@ import HopeHomePage from "vuepress-theme-hope/components/HomePage.js";
 
 - `AutoLink`: `default`, `before`, `after`
 - `CommonWrapper`: `default`, `navbarLeftStart`, `navbarLeftEnd`, `navbarCenterStart`, `navbarCenterEnd`, `navbarRightStart`, `navbarRightEnd`, `navScreenTop`, `navScreenBottom`, `sidebar`, `sidebarTop`, `sidebarBottom`
-- `HomeHero`: `heroImage`, `heroInfo`
+- `HeroInfo`: `heroImage`, `heroInfo`
 - `HomePage`: `top`, `center`, `bottom`
 - `NormalPage`: `top`, `contentBefore`, `contentAfter`, `bottom`
 

diff --git a/docs/theme/src/zh/cookbook/advanced/replace.md b/docs/theme/src/zh/cookbook/advanced/replace.md
@@ -82,8 +82,8 @@ export default {
 - `@theme-hope/components/AutoLink` 基础链接
 - `@theme-hope/components/BreadCrumb` 路径导航
 - `@theme-hope/components/CommonWrapper` 基本布局整合
-- `@theme-hope/components/HomeFeatures` 主页特性
-- `@theme-hope/components/HomeHero` 主页 Logo 及介绍
+- `@theme-hope/components/FeaturePanel` 主页特性
+- `@theme-hope/components/HeroInfo` 主页 Logo 及介绍
 - `@theme-hope/components/HomePage` 主页
 - `@theme-hope/components/Icon` 图标
 - `@theme-hope/components/MarkdownContent` Markdown 内容
@@ -286,7 +286,7 @@ import HopeHomePage from "vuepress-theme-hope/components/HomePage.js";
 
 - `AutoLink`: `default`, `before`, `after`
 - `CommonWrapper`: `default`, `navbarLeftStart`, `navbarLeftEnd`, `navbarCenterStart`, `navbarCenterEnd`, `navbarRightStart`, `navbarRightEnd`, `navScreenTop`, `navScreenBottom`, `sidebar`, `sidebarTop`, `sidebarBottom`
-- `HomeHero`: `heroImage`, `heroInfo`
+- `HeroInfo`: `heroImage`, `heroInfo`
 - `HomePage`: `top`, `center`, `bottom`
 - `NormalPage`: `top`, `contentBefore`, `contentAfter`, `bottom`
 

diff --git a/packages/theme/src/client/components/FeaturePanel.ts b/packages/theme/src/client/components/FeaturePanel.ts
@@ -0,0 +1,82 @@
+import { isLinkExternal } from "@vuepress/shared";
+import { defineComponent, h } from "vue";
+import { RouterLink } from "vue-router";
+
+import Icon from "@theme-hope/components/Icon";
+
+import type { PropType, VNode } from "vue";
+import type { ThemeProjectHomeFeatureItemOptions } from "../../shared/index.js";
+
+import "../styles/feature-panel.scss";
+
+export default defineComponent({
+  name: "FeaturePanel",
+
+  props: {
+    /**
+     * Feature config
+     */
+    items: {
+      type: Object as PropType<ThemeProjectHomeFeatureItemOptions[]>,
+      default: (): ThemeProjectHomeFeatureItemOptions[] =>
+        [] as ThemeProjectHomeFeatureItemOptions[],
+    },
+
+    /**
+     * Feature header
+     */
+    header: {
+      type: String,
+      default: "",
+    },
+  },
+
+  setup(props) {
+    return (): VNode =>
+      h("div", { class: "feature-panel" }, [
+        props.header
+          ? h("h2", { class: "feature-header" }, props.header)
+          : null,
+        props.items.length
+          ? h(
+              "div",
+              { class: "features" },
+              props.items.map((feature) => {
+                const children = [
+                  h("h3", [
+                    h(Icon, { icon: feature.icon }),
+                    h("span", { innerHTML: feature.title }),
+                  ]),
+                  h("p", { innerHTML: feature.details }),
+                ];
+
+                return feature.link
+                  ? isLinkExternal(feature.link)
+                    ? h(
+                        "a",
+                        {
+                          class: "feature link",
+                          href: feature.link,
+                          role: "navigation",
+                          "aria-label": feature.title,
+                          target: "_blank",
+                        },
+                        children
+                      )
+                    : h(
+                        RouterLink,
+                        {
+                          class: "feature link",
+                          to: feature.link,
+                          role: "navigation",
+                          "aria-label": feature.title,
+                        },
+                        () => children
+                      )
+                  : h("div", { class: "feature" }, children);
+              })
+            )
+          : null,
+      ]);
+  },
+});
diff --git a/...s/theme/src/client/components/HomeHero.ts → ...s/theme/src/client/components/HeroInfo.ts b/...s/theme/src/client/components/HomeHero.ts → ...s/theme/src/client/components/HeroInfo.ts
@@ -11,8 +11,10 @@ import DropTransition from "@theme-hope/components/transitions/DropTransition";
 import type { VNode } from "vue";
 import type { ThemeProjectHomePageFrontmatter } from "../../shared/index.js";
 
+import "../styles/hero-info.scss";
+
 export default defineComponent({
-  name: "HomeHero",
+  name: "HeroInfo",
 
   setup(_props, { slots }) {
     const frontmatter = usePageFrontmatter<ThemeProjectHomePageFrontmatter>();
@@ -53,7 +55,7 @@ export default defineComponent({
     const actions = computed(() => frontmatter.value.actions ?? []);
 
     return (): VNode =>
-      h("header", { class: "hero" }, [
+      h("header", { class: "hero-info-wrapper" }, [
         slots["heroImage"]?.() ||
           h(DropTransition, { appear: true, type: "group" }, () => [
             heroImage.value

diff --git a/packages/theme/src/client/components/HomeFeatures.ts b/packages/theme/src/client/components/HomeFeatures.ts
diff --git a/packages/theme/src/client/components/HomePage.ts b/packages/theme/src/client/components/HomePage.ts
@@ -3,9 +3,9 @@ import { usePageFrontmatter } from "@vuepress/client";
 import { isArray } from "@vuepress/shared";
 
 import DropTransition from "@theme-hope/components/transitions/DropTransition";
-import HomeFeatures from "@theme-hope/components/HomeFeatures";
+import FeaturePanel from "@theme-hope/components/FeaturePanel";
+import HeroInfo from "@theme-hope/components/HeroInfo";
 import MarkdownContent from "@theme-hope/components/MarkdownContent";
-import HomeHero from "@theme-hope/components/HomeHero";
 import { usePure } from "@theme-hope/composables/index";
 
 import type { VNode } from "vue";
@@ -46,12 +46,12 @@ export default defineComponent({
         },
         [
           slots["top"]?.(),
-          h(HomeHero),
+          h(HeroInfo),
           features.value.map(({ header = "", items }, index) =>
             h(
               DropTransition,
               { appear: true, delay: 0.16 + index * 0.08 },
-              () => h(HomeFeatures, { header, items })
+              () => h(FeaturePanel, { header, items })
             )
           ),
           slots["center"]?.(),