Skip to content

Commit

Permalink
fix: make home page look better (#154)
Browse files Browse the repository at this point in the history
  • Loading branch information
kiaking authored Nov 27, 2020
1 parent 77bb75f commit a084cd3
Show file tree
Hide file tree
Showing 10 changed files with 367 additions and 194 deletions.
4 changes: 4 additions & 0 deletions docs/.vitepress/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,10 @@ function getConfigSidebar() {
{ text: 'Basics', link: '/config/basics' },
{ text: 'Carbon Ads', link: '/config/carbon-ads' }
]
},
{
text: 'Theme Config',
children: [{ text: 'Homepage', link: '/config/homepage' }]
}
]
}
23 changes: 23 additions & 0 deletions docs/config/homepage.md
Original file line number Diff line number Diff line change
@@ -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
---
```
8 changes: 8 additions & 0 deletions src/client/app/composables/frontmatter.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { Ref, computed } from 'vue'
import { usePageData } from './pageData'

export type FrontmatterRef = Ref<Record<string, any>>

export function useFrontmatter() {
return computed(() => usePageData().value.frontmatter)
}
1 change: 1 addition & 0 deletions src/client/app/exports.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export { useRouter, useRoute, Router, Route } from './router'
export { useSiteData } from './composables/siteData'
export { useSiteDataByRoute } from './composables/siteDataByRoute'
export { usePageData } from './composables/pageData'
export { useFrontmatter } from './composables/frontmatter'

// components
export { Content } from './components/Content'
Expand Down
2 changes: 1 addition & 1 deletion src/client/theme-default/Layout.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
188 changes: 9 additions & 179 deletions src/client/theme-default/components/Home.vue
Original file line number Diff line number Diff line change
@@ -1,184 +1,14 @@
<template>
<header class="hero">
<img
v-if="data.heroImage"
:src="$withBase(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>
<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>
<HomeHero />
<slot name="hero" />
<HomeFeatures />
<slot name="features" />
<HomeFooter />
<slot name="footer" />
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useSiteData } from 'vitepress'
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(() => data.value.heroImage)
const siteTitle = computed(() => siteData.value.title)
const siteDescription = computed(() => siteData.value.description)
import HomeHero from './HomeHero.vue'
import HomeFeatures from './HomeFeatures.vue'
import HomeFooter from './HomeFooter.vue'
</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>
129 changes: 129 additions & 0 deletions src/client/theme-default/components/HomeFeatures.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
<template>
<div v-if="hasFeatures" class="home-features">
<div class="wrapper">
<div class="container">
<div class="features">
<section v-for="(feature, index) in features" :key="index" class="feature">
<h2 class="title" v-if="feature.title">{{ feature.title }}</h2>
<p class="details" v-if="feature.details">{{ feature.details }}</p>
</section>
</div>
</div>
</div>
</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useSiteDataByRoute, useFrontmatter } from 'vitepress'
ref: data = useFrontmatter()
ref: hasFeatures = computed(() => data.features && data.features.length > 0)
ref: features = computed(() => data.features ? data.features : [])
</script>

<style scoped>
.home-features {
margin: 0 auto;
padding: 2.5rem 0 2.75rem;
max-width: 960px;
}
.home-hero + .home-features {
padding-top: 0;
}
@media (min-width: 420px) {
.home-features {
padding: 3.25rem 0 3.5rem;
}
.home-hero + .home-features {
padding-top: 0;
}
}
@media (min-width: 720px) {
.home-features {
padding-right: 1.5rem;
padding-left: 1.5rem;
}
}
.wrapper {
padding: 0 1.5rem;
}
.home-hero + .home-features .wrapper {
border-top: 1px solid var(--c-divider);
padding-top: 2.5rem;
}
@media (min-width: 420px) {
.home-hero + .home-features .wrapper {
padding-top: 3.25rem;
}
}
@media (min-width: 720px) {
.wrapper {
padding-right: 0;
padding-left: 0;
}
}
.container {
margin: 0 auto;
max-width: 392px;
}
@media (min-width: 720px) {
.container {
max-width: 960px;
}
}
.features {
display: flex;
flex-wrap: wrap;
margin: -20px -24px;
}
.feature {
flex-shrink: 0;
padding: 20px 24px;
width: 100%;
}
@media (min-width: 720px) {
.feature {
width: calc(100% / 3);
}
}
.title {
margin: 0;
border-bottom: 0;
line-height: 1.4;
font-size: 1.25rem;
font-weight: 500;
}
@media (min-width: 420px) {
.title {
font-size: 1.4rem;
}
}
.details {
margin: 0;
line-height: 1.6;
font-size: 1rem;
color: var(--c-text-light);
}
.title + .details {
padding-top: 0.25rem;
}
</style>
Loading

0 comments on commit a084cd3

Please sign in to comment.