feat(theme): rebuild HomePage

vuepress-theme-hope · Jun 4, 2022 · 7c3f866 · 7c3f866
1 parent 893747a
commit 7c3f866
Show file tree

Hide file tree

Showing 5 changed files with 158 additions and 269 deletions.
diff --git a/packages/theme/components/Home.ts b/packages/theme/components/Home.ts
@@ -1,31 +1,10 @@
 import Vue from "vue";
+import HomeFeatures from "@theme/components/HomeFeatures.vue";
 import HomeHero from "@theme/components/HomeHero.vue";
 import MyTransition from "@theme/components/MyTransition.vue";
-import { navigate } from "@theme/utils/navigate";
-
-interface ActionConfig {
-  text: string;
-  link: string;
-}
 
 export default Vue.extend({
   name: "Home",
 
-  components: { HomeHero, MyTransition },
-
-  computed: {
-    actionLinks(): ActionConfig[] {
-      const { action } = this.$frontmatter;
-
-      if (Array.isArray(action)) return action as ActionConfig[];
-
-      return [action] as ActionConfig[];
-    },
-  },
-
-  methods: {
-    navigate(link: string): void {
-      navigate(link, this.$router, this.$route);
-    },
-  },
+  components: { HomeFeatures, HomeHero, MyTransition },
 });
diff --git a/packages/theme/components/Home.vue b/packages/theme/components/Home.vue
@@ -6,34 +6,7 @@
     <HomeHero />
 
     <MyTransition :delay="0.16">
-      <div
-        v-if="$frontmatter.features && $frontmatter.features.length"
-        class="features"
-      >
-        <template v-for="(feature, index) in $frontmatter.features">
-          <div
-            v-if="feature.link"
-            :key="index"
-            class="feature link"
-            :class="`feature${index % 9}`"
-            tabindex="0"
-            role="navigation"
-            @click="navigate(feature.link)"
-          >
-            <h2>{{ feature.title }}</h2>
-            <p>{{ feature.details }}</p>
-          </div>
-          <div
-            v-else
-            :key="index"
-            class="feature"
-            :class="`feature${index % 9}`"
-          >
-            <h2>{{ feature.title }}</h2>
-            <p>{{ feature.details }}</p>
-          </div>
-        </template>
-      </div>
+      <HomeFeatures />
     </MyTransition>
 
     <MyTransition :delay="0.24">
@@ -63,225 +36,8 @@
     padding-right: 1.5rem;
   }
 
-  .hero {
-    text-align: center;
-
-    @media (min-width: $MQNarrow) {
-      display: flex;
-      justify-content: space-evenly;
-      align-items: center;
-      text-align: left;
-    }
-
-    img {
-      display: block;
-      max-width: 100%;
-      max-height: 320px;
-      margin: 0;
-
-      @media (max-width: $MQNarrow) {
-        max-height: 280px;
-        margin: 3rem auto 1.5rem;
-      }
-
-      @media (max-width: $MQMobile) {
-        max-height: 240px;
-        margin: 2rem auto 1.2rem;
-      }
-
-      @media (max-width: $MQMobileNarrow) {
-        max-height: 210px;
-        margin: 1.5rem auto 1rem;
-      }
-
-      html.light & {
-        &.light {
-          display: block;
-        }
-
-        &.dark {
-          display: none;
-        }
-      }
-
-      html.dark & {
-        &.light {
-          display: none;
-        }
-
-        &.dark {
-          display: block;
-        }
-      }
-    }
-
-    h1 {
-      font-size: 3rem;
-
-      @media (max-width: $MQMobile) {
-        font-size: 2.5rem;
-      }
-
-      @media (max-width: $MQMobileNarrow) {
-        font-size: 2rem;
-      }
-    }
-
-    h1, .description, .action {
-      margin: 1.8rem auto;
-
-      @media (max-width: $MQMobile) {
-        margin: 1.5rem auto;
-      }
-
-      @media (max-width: $MQMobileNarrow) {
-        margin: 1.2rem auto;
-      }
-    }
-
-    .description {
-      max-width: 35rem;
-      color: var(--text-color-l40);
-      font-size: 1.6rem;
-      line-height: 1.3;
-
-      @media (max-width: $MQMobile) {
-        font-size: 1.4rem;
-      }
-
-      @media (max-width: $MQMobileNarrow) {
-        font-size: 1.2rem;
-      }
-    }
-
-    .action-button {
-      display: inline-block;
-      margin: 0.6rem 0.8rem;
-      padding: 1rem 1.5rem;
-      border: 2px solid var(--accent-color);
-      border-radius: 2rem;
-      color: var(--accent-color);
-      font-size: 1.2rem;
-      transition: background 0.1s ease;
-      overflow: hidden;
-
-      @media (max-width: $MQMobile) {
-        padding: 0.8rem 1.2rem;
-        font-size: 1.1rem;
-      }
-
-      @media (max-width: $MQMobileNarrow) {
-        font-size: 1rem;
-      }
-
-      &:hover {
-        color: var(--white);
-        background-color: var(--accent-color);
-      }
-
-      &.primary {
-        color: var(--white);
-        background-color: var(--accent-color);
-
-        &:hover {
-          border-color: var(--accent-color-l10);
-          background-color: var(--accent-color-l10);
-        }
-
-        html.dark & {
-          &:hover {
-            border-color: var(--accent-color-d10);
-            background-color: var(--accent-color-d10);
-          }
-        }
-      }
-    }
-  }
-
-  .features {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: stretch;
-    align-content: stretch;
-    margin: 0 -2rem;
-    padding: 1.2rem 0;
-    border-top: 1px solid var(--border-color);
-
-    @media (max-width: $MQMobileNarrow) {
-      margin: 0 -1.5rem;
-    }
-
-    .feature {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      flex-basis: calc(33% - 4rem);
-      margin: 0.5rem;
-      padding: 0 1.5rem;
-      border-radius: 0.5rem;
-      transition: transform 0.3s, box-shadow 0.3s;
-      overflow: hidden;
-
-      @media (max-width: $MQNarrow) {
-        flex-basis: calc(50% - 4rem);
-      }
-
-      @media (max-width: $MQMobile) {
-        font-size: 0.95rem;
-      }
-
-      @media (max-width: $MQMobileNarrow) {
-        flex-basis: calc(100%);
-        font-size: 0.9rem;
-        margin: 0.5rem 0;
-        border-radius: 0;
-      }
-
-      &.link {
-        cursor: pointer;
-      }
-
-      &:hover {
-        transform: scale(1.05);
-        box-shadow: 0 2px 12px 0 var(--card-shadow-color);
-      }
-
-      h2 {
-        margin-bottom: 0.25rem;
-        border-bottom: none;
-        color: var(--text-color-l10);
-        font-size: 1.25rem;
-        font-weight: 500;
-
-        @media (max-width: $MQMobileNarrow) {
-          font-size: 1.2rem;
-        }
-      }
-
-      p {
-        margin-top: 0;
-        color: var(--text-color-l25);
-      }
-    }
-  }
-
   {$contentClass} {
     padding-bottom: 1.5rem;
   }
 }
-
-@require '~vuepress-shared/styles/colors.styl';
-
-for $color, $index in $colors {
-  .home .features .feature{$index} {
-    &, html.light & {
-      background: lighten($color, 90%);
-    }
-
-    html.dark & {
-      background: darken($color, 75%);
-    }
-  }
-}
 </style>
diff --git a/packages/theme/components/HomeFeatures.ts b/packages/theme/components/HomeFeatures.ts
@@ -0,0 +1,19 @@
+import Vue from "vue";
+import { navigate } from "@theme/utils/navigate";
+
+export default Vue.extend({
+  name: "HomeFeatures",
+
+  methods: {
+    getIconType(icon = ""): string {
+      return icon.match(/(?:https?:)?\/\//)
+        ? "link"
+        : icon.startsWith("/")
+        ? "path"
+        : "class";
+    },
+    navigate(link: string): void {
+      navigate(link, this.$router, this.$route);
+    },
+  },
+});