From 3a0af0b6141ed739aa4a2d72f43d0fa63739c695 Mon Sep 17 00:00:00 2001
From: kazuya kawaguchi <kawakazu80@gmail.com>
Date: Mon, 2 Nov 2020 17:07:11 +0900
Subject: [PATCH] feat: add home page feature (#108)

Co-authored-by: Kia Ishii <kia.king.08@gmail.com>
---
 src/client/app/composables/siteData.ts       |   2 +
 src/client/theme-default/Layout.vue          |  86 ++++++--
 src/client/theme-default/components/Home.vue | 219 +++++++++++++++++++
 src/client/theme-default/styles/layout.css   |  49 ++++-
 4 files changed, 336 insertions(+), 20 deletions(-)

diff --git a/src/client/app/composables/siteData.ts b/src/client/app/composables/siteData.ts
index f27f6c831929..41a43d5e81a9 100644
--- a/src/client/app/composables/siteData.ts
+++ b/src/client/app/composables/siteData.ts
@@ -4,6 +4,8 @@ import { SiteData } from '../../../../types/shared'
 
 const parse = (data: string) => readonly(JSON.parse(data)) as SiteData
 
+export type SiteDataRef<T = any> = Ref<SiteData<T>>
+
 export const siteDataRef: Ref<SiteData> = ref(parse(serialized))
 
 export function useSiteData<T = any>() {
diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index 8875d9d4a92f..366a90556440 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="theme">
-    <header>
+  <div class="theme" :class="pageClasses">
+    <header class="navbar" v-if="showNavbar">
       <NavBar>
         <template #search>
           <slot name="navbar-search" />
@@ -8,7 +8,7 @@
       </NavBar>
       <ToggleSideBarButton @toggle="toggleSidebar" />
     </header>
-    <aside :class="{ open }">
+    <aside :class="{ open: openSideBar }">
       <SideBar>
         <template #top>
           <slot name="sidebar-top" />
@@ -19,12 +19,21 @@
       </SideBar>
     </aside>
     <!-- TODO: make this button accessible -->
-    <div
-      class="sidebar-mask"
-      :class="{ 'sidebar-open': open }"
-      @click="toggleSidebar(false)"
-    />
-    <main>
+    <div class="sidebar-mask" @click="toggleSidebar(false)" />
+    <main class="home" aria-labelledby="main-title" v-if="enableHome">
+      <Home>
+        <template #hero>
+          <slot name="home-hero" />
+        </template>
+        <template #features>
+          <slot name="home-features" />
+        </template>
+        <template #footer>
+          <slot name="home-footer" />
+        </template>
+      </Home>
+    </main>
+    <main v-else>
       <Page>
         <template #top>
           <slot name="page-top" />
@@ -39,15 +48,17 @@
 </template>
 
 <script>
-import { ref, watch } from 'vue'
+import { ref, computed, watch } from 'vue'
 import NavBar from './components/NavBar.vue'
+import Home from './components/Home.vue'
 import ToggleSideBarButton from './components/ToggleSideBarButton.vue'
 import SideBar from './components/SideBar.vue'
 import Page from './components/Page.vue'
-import { useRoute } from 'vitepress'
+import { useRoute, usePageData, useSiteData, useSiteDataByRoute } from 'vitepress'
 
 export default {
   components: {
+    Home,
     NavBar,
     ToggleSideBarButton,
     SideBar,
@@ -55,11 +66,51 @@ export default {
   },
 
   setup() {
-    const open = ref(false)
     const route = useRoute()
+    const pageData = usePageData()
+    const siteData = useSiteData()
+    const siteRouteData = useSiteDataByRoute()
+
+    const openSideBar = ref(false)
+    const enableHome = computed(() => !!pageData.value.frontmatter.home)
+
+    const showNavbar = computed(() => {
+      const { themeConfig } = siteRouteData.value
+      const { frontmatter } = pageData.value
+      if (
+        frontmatter.navbar === false
+        || themeConfig.navbar === false) {
+        return false
+      }
+      return (
+        siteData.value.title
+        || themeConfig.logo
+        || themeConfig.repo
+        || themeConfig.nav
+      )
+    })
+
+    const showSidebar = computed(() => {
+      const { frontmatter } = pageData.value
+      const { themeConfig } = siteRouteData.value
+      return (
+        !frontmatter.home
+        && frontmatter.sidebar !== false
+        && ((typeof themeConfig.sidebar === 'object') && (Object.keys(themeConfig.sidebar).length != 0)
+        || (Array.isArray(themeConfig.sidebar) && themeConfig.sidebar.length != 0))
+      )
+    })
+
+    const pageClasses = computed(() => {
+      return [{
+        'no-navbar': !showNavbar.value,
+        'sidebar-open': openSideBar.value,
+        'no-sidebar': !showSidebar.value
+      }]
+    })
 
     const toggleSidebar = (to) => {
-      open.value = typeof to === 'boolean' ? to : !open.value
+      openSideBar.value = typeof to === 'boolean' ? to : !openSideBar.value
     }
 
     const hideSidebar = toggleSidebar.bind(null, false)
@@ -68,7 +119,14 @@ export default {
     // TODO: route only changes when the pathname changes
     // listening to hashchange does nothing because it's prevented in router
 
-    return { open, toggleSidebar }
+    return {
+      showNavbar,
+      showSidebar,
+      openSideBar,
+      pageClasses,
+      enableHome,
+      toggleSidebar
+    }
   }
 }
 </script>
diff --git a/src/client/theme-default/components/Home.vue b/src/client/theme-default/components/Home.vue
index e69de29bb2d1..6c7b77c248a5 100644
--- a/src/client/theme-default/components/Home.vue
+++ b/src/client/theme-default/components/Home.vue
@@ -0,0 +1,219 @@
+<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"
+    >
+      <NavBarLink :item="actionLink" />
+    </p>
+    <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>
+    <slot name="features" />
+  </div>
+
+  <div
+    v-if="data.footer"
+    class="footer"
+  >
+    {{ data.footer }}
+    <slot name="footer" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue'
+import NavBarLink from './NavBarLink.vue'
+import { withBase } from '../utils'
+import { usePageData, useSiteData } from 'vitepress'
+
+export default defineComponent({
+  components: {
+    NavBarLink
+  },
+
+  setup() {
+    const pageData = usePageData()
+    const siteData = useSiteData()
+
+    const data = computed(() => pageData.value.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
+    }
+  }
+})
+</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 `--text-color` */
+  color: #6a8bad;
+}
+
+::v-deep(.nav-link) {
+  display: inline-block;
+  font-size: 1.2rem;
+  color: #fff;
+  background-color: var(--accent-color);
+  margin-left: 0;
+  padding: 0.8rem 1.6rem;
+  border-radius: 4px;
+  transition: background-color .1s ease;
+  box-sizing: border-box;
+  /* TODO: calculating darken 10% color with using style vars from `--accent-color` */
+  border-bottom: 1px solid #389d70;
+}
+
+::v-deep(.nav-link:hover) {
+  /* TODO: calculating lighten 10% color with using style vars from `--accent-color` */
+  background-color: #4abf8a;
+}
+
+.features {
+  border-top: 1px solid var(--border-color);
+  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 `--text-color` */
+  color: #3a5169;
+}
+
+.feature p {
+  /* TODO: calculating lighten 25% color with using style :vars from `--text-color` */
+  color: #4e6e8e;
+}
+
+.footer {
+  padding: 2.5rem;
+  border-top: 1px solid var(--border-color);
+  text-align: center;
+  /* TODO: calculating lighten 25% color with using style :vars from `--text-color` */
+  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,
+  .hero .action {
+    margin: 1.2rem auto;
+  }
+
+  .hero .description {
+    font-size: 1.2rem;
+  }
+
+  .hero .action-button {
+    font-size: 1rem;
+    padding: 0.6rem 1.2rem;
+  }
+
+  .feature h2 {
+    font-size: 1.25rem;
+  }
+}
+</style>
diff --git a/src/client/theme-default/styles/layout.css b/src/client/theme-default/styles/layout.css
index 32244935e04f..ff76131dbe8c 100644
--- a/src/client/theme-default/styles/layout.css
+++ b/src/client/theme-default/styles/layout.css
@@ -17,7 +17,7 @@ body {
   color: var(--text-color);
 }
 
-.theme header {
+.theme .navbar {
   position: fixed;
   top: 0;
   left: 0;
@@ -33,7 +33,7 @@ body {
 }
 
 @media screen and (max-width: 719px) {
-  .theme header {
+  .theme .navbar {
     padding-left: 4rem;
   }
 }
@@ -51,6 +51,24 @@ body {
   overflow-y: auto;
 }
 
+.theme.sidebar-open .sidebar-mask {
+  display: block;
+}
+
+.theme.no-navbar > h1,
+.theme.no-navbar > h2,
+.theme.no-navbar > h3,
+.theme.no-navbar > h4,
+.theme.no-navbar > h5,
+.theme.no-navbar > h6 {
+  margin-top: 1.5rem;
+  padding-top: 0;
+}
+
+.theme.no-navbar aside {
+  top: 0;
+}
+
 @media screen and (max-width: 959px) {
   .theme aside {
     width: 16.4rem;
@@ -76,15 +94,20 @@ body {
   display: none;
 }
 
-.sidebar-mask.sidebar-open {
-  display: block;
-}
-
 .theme main {
   margin-top: var(--header-height);
   margin-left: var(--sidebar-width);
 }
 
+@media screen and (min-width: 720px) {
+  .theme.no-sidebar aside {
+    display: none;
+  }
+  .theme.no-sidebar main {
+    margin-left: 0;
+  }
+}
+
 @media screen and (max-width: 959px) {
   .theme main {
     margin-left: 16.4rem;
@@ -97,6 +120,20 @@ body {
   }
 }
 
+.theme main.home {
+  padding: var(--header-height) 2rem 0;
+  max-width: 960px;
+  margin: 0px auto;
+  display: block;
+}
+
+@media screen and (max-width: 429px) {
+  .theme main.home {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+}
+
 a {
   text-decoration: none;
 }