fix: make home page look better

vuejs · Nov 25, 2020 · 669267f · 669267f
1 parent 136a56e
commit 669267f
Show file tree

Hide file tree

Showing 8 changed files with 432 additions and 219 deletions.
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -55,6 +55,10 @@ function getConfigSidebar() {
     {
       text: 'App Config',
       children: [{ text: 'Basics', link: '/config/basics' }]
+    },
+    {
+      text: 'Theme Config',
+      children: [{ text: 'Homepage', link: '/config/homepage' }]
     }
   ]
 }
diff --git a/docs/config/homepage.md b/docs/config/homepage.md
@@ -0,0 +1,23 @@
+# Theme Config: Homepage
+
+VitePress provides a homepage layout. To use it, specify `home: true` plus some other metadata in your root `index.md`'s [YAML frontmatter](../guide/frontmatter). This is an example of how it works:
+
+```yaml
+---
+home: true
+heroImage: /logo.png
+heroAlt: Logo image
+heroText: Hero Title
+tagline: Hero subtitle
+actionText: Get Started
+actionLink: /guide/
+features:
+- title: Simplicity First
+  details: Minimal setup with markdown-centered project structure helps you focus on writing.
+- title: Vue-Powered
+  details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
+- title: Performant
+  details: VitePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
+footer: MIT Licensed | Copyright © 2019-present Evan You
+---
+```
diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
@@ -18,7 +18,7 @@
     </SideBar>
     <!-- TODO: make this button accessible -->
     <div class="sidebar-mask" @click="toggleSidebar(false)" />
-    <main class="home" aria-labelledby="main-title" v-if="enableHome">
+    <main class="main-home" aria-labelledby="main-title" v-if="enableHome">
       <Home>
         <template #hero>
           <slot name="home-hero" />

diff --git a/src/client/theme-default/components/Home.vue b/src/client/theme-default/components/Home.vue
@@ -1,217 +1,25 @@
 <template>
-  <header class="hero">
-    <img
-      v-if="data.heroImage"
-      :src="heroImageSrc"
-      :alt="data.heroAlt || 'hero'"
-    >
-
-    <h1
-      v-if="data.heroText !== null"
-      id="main-title"
-    >
-      {{ data.heroText || siteTitle || 'Hello' }}
-    </h1>
-
-    <p
-      v-if="data.tagline !== null"
-      class="description"
-    >
-      {{ data.tagline || siteDescription || 'Welcome to your VitePress site' }}
-    </p>
-
-    <p
-      v-if="data.actionText && data.actionLink"
-      class="action"
-    >
-      <a class="action-link" :href="actionLink.link">
-        {{ actionLink.text }}
-      </a>
-    </p>
+  <div class="home">
+    <HomeHero />
     <slot name="hero" />
-  </header>
-
-  <div
-    v-if="data.features && data.features.length"
-    class="features"
-  >
-    <div
-      v-for="(feature, index) in data.features"
-      :key="index"
-      class="feature"
-    >
-      <h2>{{ feature.title }}</h2>
-      <p>{{ feature.details }}</p>
-    </div>
+    <HomeFeatures />
     <slot name="features" />
-  </div>
-
-  <div
-    v-if="data.footer"
-    class="footer"
-  >
-    {{ data.footer }}
+    <HomeFooter />
     <slot name="footer" />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue'
-import { useRoute, useSiteData } from 'vitepress'
-import { withBase } from '../utils'
+import { defineComponent } from 'vue'
+import HomeHero from './HomeHero.vue'
+import HomeFeatures from './HomeFeatures.vue'
+import HomeFooter from './HomeFooter.vue'
 
 export default defineComponent({
-  setup() {
-    const route = useRoute()
-    const siteData = useSiteData()
-
-    const data = computed(() => route.data.frontmatter)
-    const actionLink = computed(() => ({
-      link: data.value.actionLink,
-      text: data.value.actionText
-    }))
-    const heroImageSrc = computed(() => withBase(data.value.heroImage))
-    const siteTitle = computed(() => siteData.value.title)
-    const siteDescription = computed(() => siteData.value.description)
-
-    return {
-      data,
-      actionLink,
-      heroImageSrc,
-      siteTitle,
-      siteDescription
-    }
+  components: {
+    HomeHero,
+    HomeFeatures,
+    HomeFooter
   }
 })
 </script>
-
-<style scoped>
-.hero {
-  text-align: center;
-}
-
-.hero img {
-  max-width: 100%;
-  max-height: 280px;
-  display: block;
-  margin: 3rem auto 1.5rem;
-}
-
-.hero h1 {
-  font-size: 3rem;
-}
-
-.hero h1,
-.hero .description,
-.hero .action {
-  margin: 1.8rem auto;
-}
-
-.hero .description {
-  max-width: 35rem;
-  font-size: 1.6rem;
-  line-height: 1.3;
-  /* TODO: calculating lighten 40% color with using style :vars from `--c-text` */
-  color: #6a8bad;
-}
-
-.action-link {
-  display: inline-block;
-  border-radius: 4px;
-  padding: 0 20px;
-  line-height: 48px;
-  font-size: 1rem;
-  font-weight: 500;
-  color: #ffffff;
-  background-color: var(--c-brand);
-  transition: background-color .1s ease;
-}
-
-.action-link:hover {
-  text-decoration: none;
-  background-color: var(--c-brand-light);
-}
-
-@media (min-width: 420px) {
-  .action-link {
-    padding: 0 24px;
-    line-height: 56px;
-    font-size: 1.2rem;
-    font-weight: 500;
-  }
-}
-
-.features {
-  border-top: 1px solid var(--c-divider);
-  padding: 1.2rem 0;
-  margin-top: 2.5rem;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  align-content: stretch;
-  justify-content: space-between;
-}
-
-.feature {
-  flex-grow: 1;
-  flex-basis: 30%;
-  max-width: 30%;
-}
-
-.feature h2 {
-  font-size: 1.4rem;
-  font-weight: 500;
-  border-bottom: none;
-  padding-bottom: 0;
-  /* TODO: calculating lighten 10% color with using style :vars from `--c-text` */
-  color: #3a5169;
-}
-
-.feature p {
-  /* TODO: calculating lighten 25% color with using style :vars from `--c-text` */
-  color: #4e6e8e;
-}
-
-.footer {
-  padding: 2.5rem;
-  border-top: 1px solid var(--c-divider);
-  text-align: center;
-  /* TODO: calculating lighten 25% color with using style :vars from `--c-text` */
-  color: #4e6e8e;
-}
-
-@media screen and (max-width: 719px) {
-  .features {
-    flex-direction: column;
-  }
-
-  .feature {
-    max-width: 100%;
-    padding: 0 2.5rem;
-  }
-}
-
-@media screen and (max-width: 429px) {
-  .hero img {
-    max-height: 210px;
-    margin: 2rem auto 1.2rem;
-  }
-
-  .hero h1 {
-    font-size: 2rem;
-  }
-
-  .hero h1,
-  .hero .description {
-    margin: 1.2rem auto;
-  }
-
-  .hero .description {
-    font-size: 1.2rem;
-  }
-
-  .feature h2 {
-    font-size: 1.25rem;
-  }
-}
-</style>