From 09030272b4a5c8f723b7e11303265f24b7481575 Mon Sep 17 00:00:00 2001
From: Jacob Hummer <jcbhmr@outlook.com>
Date: Sat, 17 Feb 2024 13:40:23 -0600
Subject: [PATCH] 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 <40380293+brc-dd@users.noreply.github.com>
---
 docs/reference/default-theme-home-page.md     | 27 ++++++++++
 .../theme-default/components/VPHome.vue       | 18 ++++---
 .../components/VPHomeContent.vue              | 52 +++++++++++++++++++
 .../components/VPHomeSponsors.vue             | 29 ++++++++++-
 .../theme-default/components/VPTeamPage.vue   |  9 +++-
 .../styles/components/vp-doc.css              |  4 ++
 .../styles/components/vp-sponsor.css          |  4 +-
 7 files changed, 129 insertions(+), 14 deletions(-)
 create mode 100644 src/client/theme-default/components/VPHomeContent.vue

diff --git a/docs/reference/default-theme-home-page.md b/docs/reference/default-theme-home-page.md
index b44c2e6b79bb..f7baecca0138 100644
--- a/docs/reference/default-theme-home-page.md
+++ b/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.
+:::
diff --git a/src/client/theme-default/components/VPHome.vue b/src/client/theme-default/components/VPHome.vue
index d69a79b21a73..445ff3162ad8 100644
--- a/src/client/theme-default/components/VPHome.vue
+++ b/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>
diff --git a/src/client/theme-default/components/VPHomeContent.vue b/src/client/theme-default/components/VPHomeContent.vue
new file mode 100644
index 000000000000..fe689b6ee5ef
--- /dev/null
+++ b/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>
diff --git a/src/client/theme-default/components/VPHomeSponsors.vue b/src/client/theme-default/components/VPHomeSponsors.vue
index 44878a949345..1343e776104b 100644
--- a/src/client/theme-default/components/VPHomeSponsors.vue
+++ b/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 {
diff --git a/src/client/theme-default/components/VPTeamPage.vue b/src/client/theme-default/components/VPTeamPage.vue
index 6af86f2e2972..71d9bdb51007 100644
--- a/src/client/theme-default/components/VPTeamPage.vue
+++ b/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;
diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css
index 50181a2f2825..90afe60e590a 100644
--- a/src/client/theme-default/styles/components/vp-doc.css
+++ b/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;
diff --git a/src/client/theme-default/styles/components/vp-sponsor.css b/src/client/theme-default/styles/components/vp-sponsor.css
index e0cf2a805189..9e677ab9bc9a 100644
--- a/src/client/theme-default/styles/components/vp-sponsor.css
+++ b/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;