feat(theme): auto style markdown content in home page (#3561)

BREAKING CHANGES: styles are now applied by default to markdown content when `layout: home` is set in frontmatter. If they conflict with the styles of your custom component, please set `markdownStyles: false` in frontmatter.

---------

Co-authored-by: Divyansh Singh <[email protected]>

docs/reference/default-theme-home-page.md

@@ -166,3 +166,30 @@ type FeatureIcon =
  height: string
  }
 ```
+
+## Markdown Content
+
+You can add additional content to your site's homepage just by adding Markdown below the `---` frontmatter divider.
+
+````md
+---
+layout: home
+
+hero:
+ name: VitePress
+ text: Vite & Vue powered static site generator.
+---
+
+## Getting Started
+
+You can get started using VitePress right away using `npx`!
+
+```sh
+npm init
+npx vitepress init
+```
+````
+
+::: info
+VitePress didn't always auto-style the extra content of the `layout: home` page. To revert to older behavior, you can add `markdownStyles: false` to the frontmatter.
+:::

src/client/theme-default/components/VPHome.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import VPHomeHero from './VPHomeHero.vue'
 import VPHomeFeatures from './VPHomeFeatures.vue'
+import VPHomeContent from './VPHomeContent.vue'
+import { useData } from '../composables/data'
+
+const { frontmatter } = useData()
 </script>
 
 <template>
@@ -19,23 +23,21 @@ import VPHomeFeatures from './VPHomeFeatures.vue'
  <VPHomeFeatures />
  <slot name="home-features-after" />
 
- <Content />
+ <VPHomeContent v-if="frontmatter.markdownStyles !== false">
+ <Content />
+ </VPHomeContent>
+ <Content v-else />
  </div>
 </template>
 
 <style scoped>
 .VPHome {
- padding-bottom: 96px;
-}
-
-.VPHome :deep(.VPHomeSponsors) {
- margin-top: 112px;
- margin-bottom: -128px;
+ margin-bottom: 96px;
 }
 
 @media (min-width: 768px) {
  .VPHome {
- padding-bottom: 128px;
+ margin-bottom: 128px;
  }
 }
 </style>

src/client/theme-default/components/VPHomeContent.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core'
+
+const { width: vw } = useWindowSize({ includeScrollbar: false })
+</script>
+
+<template>
+ <div
+ class="vp-doc container"
+ :style="vw ? { '--vp-offset': `calc(50% - ${vw / 2}px)` } : {}"
+ >
+ <slot />
+ </div>
+</template>
+
+<style scoped>
+.container {
+ margin: auto;
+ width: 100%;
+ max-width: 1280px;
+ padding: 0 24px;
+}
+
+@media (min-width: 640px) {
+ .container {
+ padding: 0 48px;
+ }
+}
+
+@media (min-width: 960px) {
+ .container {
+ width: 100%;
+ padding: 0 64px;
+ }
+}
+
+.vp-doc :deep(.VPHomeSponsors),
+.vp-doc :deep(.VPTeamPage) {
+ margin-left: var(--vp-offset, calc(50% - 50vw));
+ margin-right: var(--vp-offset, calc(50% - 50vw));
+}
+
+.vp-doc :deep(.VPHomeSponsors h2) {
+ border-top: none;
+ letter-spacing: normal;
+}
+
+.vp-doc :deep(.VPHomeSponsors a),
+.vp-doc :deep(.VPTeamPage a){
+ text-decoration: none;
+}
+</style>

src/client/theme-default/components/VPHomeSponsors.vue

@@ -49,8 +49,33 @@ withDefaults(defineProps<Props>(), {
 <style scoped>
 .VPHomeSponsors {
  border-top: 1px solid var(--vp-c-gutter);
- padding: 88px 24px 96px;
- background-color: var(--vp-c-bg);
+ padding-top: 88px !important;
+}
+
+.VPHomeSponsors {
+ margin: 96px 0;
+}
+
+@media (min-width: 768px) {
+ .VPHomeSponsors {
+ margin: 128px 0;
+ }
+}
+
+.VPHomeSponsors {
+ padding: 0 24px;
+}
+
+@media (min-width: 768px) {
+ .VPHomeSponsors {
+ padding: 0 48px;
+ }
+}
+
+@media (min-width: 960px) {
+ .VPHomeSponsors {
+ padding: 0 64px;
+ }
 }
 
 .container {

src/client/theme-default/components/VPTeamPage.vue

@@ -6,15 +6,20 @@
 
 <style scoped>
 .VPTeamPage {
- padding-bottom: 96px;
+ margin: 96px 0;
 }
 
 @media (min-width: 768px) {
  .VPTeamPage {
- padding-bottom: 128px;
+ margin: 128px 0;
  }
 }
 
+.VPHome :slotted(.VPTeamPageTitle) {
+ border-top: 1px solid var(--vp-c-gutter);
+ padding-top: 88px !important;
+}
+
 :slotted(.VPTeamPageSection + .VPTeamPageSection),
 :slotted(.VPTeamMembers + .VPTeamPageSection) {
  margin-top: 64px;

src/client/theme-default/styles/components/vp-doc.css

@@ -540,6 +540,10 @@
  max-width: calc((100% - 24px) / 2) !important;
 }
 
+/**
+ * External links
+ * -------------------------------------------------------------------------- */
+
 /* prettier-ignore */
 :is(.vp-external-link-icon, .vp-doc a[href*='://'], .vp-doc a[target='_blank']):not(.no-icon)::after {
  display: inline-block;

src/client/theme-default/styles/components/vp-sponsor.css

@@ -16,9 +16,9 @@
 }
 
 .vp-sponsor-tier {
- margin-bottom: 4px;
+ margin: 0 0 4px !important;
  text-align: center;
- letter-spacing: 1px;
+ letter-spacing: 1px !important;
  line-height: 24px;
  width: 100%;
  font-weight: 600;