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;