vitepress 1.0.0-draft.1 → 1.0.0-draft.4

package/dist/client/theme-default/components/VPFooter.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { useSidebar } from '../composables/sidebar'
+
+const { theme } = useData()
+const { hasSidebar } = useSidebar()
+</script>
+
+<template>
+  <footer v-if="theme.footer" class="VPFooter" :class="{ 'has-sidebar': hasSidebar }">
+    <div class="container">
+      <p class="message">{{ theme.footer.message }}</p>
+      <p class="copyright">{{ theme.footer.copyright }}</p>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.VPFooter {
+  position: relative;
+  z-index: var(--vp-z-index-footer);
+  border-top: 1px solid var(--vp-c-divider-light);
+  padding: 32px 24px;
+  background-color: var(--vp-c-bg-content);
+}
+
+.VPFooter.has-sidebar {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .VPFooter {
+    padding: 32px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  max-width: var(--vp-layout-max-width);
+  text-align: center;
+}
+
+.message,
+.copyright {
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.message   { order: 2; }
+.copyright { order: 1; }
+</style>

package/dist/client/theme-default/components/VPHero.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import VPButton from './VPButton.vue'
+
+interface HeroAction {
+  theme?: 'brand' | 'alt'
+  text: string
+  link: string
+}
+
+defineProps<{
+  name?: string
+  text: string
+  tagline?: string
+  actions?: HeroAction[]
+}>()
+</script>
+
+<template>
+  <div class="VPHero">
+    <div class="container">
+      <p v-if="name" class="name"><span class="clip">{{ name }}</span></p>
+      <h1 v-if="text" class="text">{{ text }}</h1>
+      <p v-if="tagline" class="tagline">{{ tagline }}</p>
+
+      <div v-if="actions" class="actions">
+        <div v-for="action in actions" :key="action.link" class="action">
+          <VPButton
+            tag="a"
+            size="big"
+            :theme="action.theme"
+            :text="action.text"
+            :href="action.link"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.VPHero {
+  margin-top: calc(var(--vp-nav-height) * -1);
+  padding: calc(var(--vp-nav-height) + 48px) 24px 48px;
+}
+
+@media (min-width: 640px) {
+  .VPHero {
+    padding: calc(var(--vp-nav-height) + 80px) 48px 64px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 960px;
+}
+
+.name,
+.text {
+  line-height: 40px;
+  font-size: 32px;
+  font-weight: 700;
+}
+
+.name {
+  padding-bottom: 4px;
+  color: var(--vp-home-hero-name-color);
+}
+
+.clip {
+  background: var(--vp-home-hero-name-background);
+  -webkit-text-fill-color: var(--vp-home-hero-name-color);
+  -webkit-background-clip: text;
+}
+
+@media (min-width: 640px) {
+  .name,
+  .text {
+    max-width: 640px;
+    line-height: 56px;
+    font-size: 48px;
+  }
+
+  .name {
+    padding-bottom: 6px;
+  }
+}
+
+@media (min-width: 960px) {
+  .name,
+  .text {
+    max-width: 720px;
+    line-height: 64px;
+    font-size: 56px;
+  }
+
+  .name {
+    padding-bottom: 6px;
+  }
+}
+
+.tagline {
+  padding-top: 16px;
+  line-height: 28px;
+  font-size: 18px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+@media (min-width: 640px) {
+  .tagline {
+    padding-top: 24px;
+    max-width: 540px;
+    line-height: 32px;
+    font-size: 20px;
+  }
+}
+
+@media (min-width: 960px) {
+  .tagline {
+    padding-top: 24px;
+    max-width: 640px;
+    line-height: 36px;
+    font-size: 24px;
+  }
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -8px;
+  padding-top: 24px;
+}
+
+@media (min-width: 640px) {
+  .actions {
+    padding-top: 32px;
+  }
+}
+
+.action {
+  flex-shrink: 0;
+  padding: 8px;
+}
+</style>

package/dist/client/theme-default/components/VPHome.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import VPHomeHero from './VPHomeHero.vue'
+import VPHomeFeatures from './VPHomeFeatures.vue'
+</script>
+
+<template>
+  <div class="VPHome">
+    <slot name="home-hero-before" />
+    <VPHomeHero />
+    <slot name="home-hero-after" />
+
+    <slot name="home-features-before" />
+    <VPHomeFeatures />
+    <slot name="home-features-after" />
+  </div>
+</template>
+
+<style scoped>
+.VPHome {
+  padding-bottom: 96px;
+}
+
+.VPHome :deep(.VPHomeSponsors) {
+  margin-top: 112px;
+  margin-bottom: -128px;
+}
+
+@media (min-width: 768px) {
+  .VPHome {
+    padding-bottom: 128px;
+  }
+}
+</style>

package/dist/client/theme-default/components/VPHomeFeatures.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData } from 'vitepress'
+import VPBox from './VPBox.vue'
+
+const { frontmatter: fm } = useData()
+
+const grid = computed(() => {
+  const length = fm.value.features?.length
+
+  if (!length) {
+    return
+  }
+
+  if (length === 2) {
+    return 'grid-2'
+  } else if (length === 3) {
+    return 'grid-3'
+  } else if (length % 3 === 0) {
+    return 'grid-6'
+  } else if (length % 2 === 0) {
+    return 'grid-4'
+  }
+})
+</script>
+
+<template>
+  <div v-if="fm.features" class="VPHomeFeatures">
+    <div class="container">
+      <div class="items">
+        <div v-for="feature in fm.features" :key="feature.title" class="item" :class="[grid]">
+          <VPBox
+            :icon="feature.icon"
+            :title="feature.title"
+            :details="feature.details"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.VPHomeFeatures {
+  padding: 0 24px;
+}
+
+@media (min-width: 640px) {
+  .VPHomeFeatures {
+    padding: 0 48px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 960px;
+}
+
+.items {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -8px;
+}
+
+.item {
+  padding: 8px;
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .item.grid-2,
+  .item.grid-4,
+  .item.grid-6 {
+    width: calc(100% / 2);
+  }
+}
+
+@media (min-width: 768px) {
+  .item.grid-2,
+  .item.grid-4 {
+    width: calc(100% / 2);
+  }
+
+  .item.grid-3,
+  .item.grid-6 {
+    width: calc(100% / 3);
+  }
+}
+
+@media (min-width: 960px) {
+  .item.grid-4 {
+    width: calc(100% / 4);
+  }
+}
+
+</style>

package/dist/client/theme-default/components/VPHomeHero.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import VPHero from './VPHero.vue'
+
+const { frontmatter: fm } = useData()
+</script>
+
+<template>
+  <div v-if="fm.hero" class="VPHomeHero">
+    <VPHero
+      :name="fm.hero.name"
+      :text="fm.hero.text"
+      :tagline="fm.hero.tagline"
+      :actions="fm.hero.actions"
+    />
+  </div>
+</template>

package/dist/client/theme-default/components/VPHomeSponsors.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import VPIconHeart from './icons/VPIconHeart.vue'
+import VPButton from './VPButton.vue'
+import VPSponsors from './VPSponsors.vue'
+
+interface Sponsors {
+  tier: string
+  size?: 'medium' | 'big'
+  items: Sponsor[]
+}
+
+interface Sponsor {
+  name: string
+  img: string
+  url: string
+}
+
+defineProps<{
+  message?: string
+  actionText?: string
+  actionLink?: string
+  data: Sponsors[]
+}>()
+</script>
+
+<template>
+  <section class="VPHomeSponsors">
+    <div class="container">
+      <div class="header">
+        <div class="love"><VPIconHeart class="icon" /></div>
+        <h2 v-if="message" class="message">{{ message }}</h2>
+      </div>
+
+      <div class="sponsors">
+        <VPSponsors :data="data" />
+      </div>
+
+      <div v-if="actionLink" class="action">
+        <VPButton
+          theme="sponsor"
+          :text="actionText ?? 'Become a sponsor'"
+          :href="actionLink"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.VPHomeSponsors {
+  border-top: 1px solid var(--vp-c-divider-light);
+  padding: 88px 24px 96px;
+  background-color: var(--vp-c-bg-content);
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 960px;
+}
+
+.love {
+  margin: 0 auto;
+  width: 28px;
+  height: 28px;
+  color: var(--vp-c-text-3);
+}
+
+.icon {
+  width: 28px;
+  height: 28px;
+  fill: currentColor;
+}
+
+.message {
+  margin: 0 auto;
+  padding-top: 10px;
+  max-width: 320px;
+  text-align: center;
+  line-height: 24px;
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.sponsors {
+  padding-top: 32px;
+}
+
+.action {
+  padding-top: 40px;
+  text-align: center;
+}
+</style>

package/dist/client/theme-default/components/VPNavBar.vue

@@ -66,7 +66,7 @@ defineEmits<{
   display: flex;
   justify-content: space-between;
   margin: 0 auto;
-  max-width: var(--vp-layout-max-width);
+  max-width: calc(var(--vp-layout-max-width) - 64px);
 }
 
 .content {
@@ -84,6 +84,7 @@ defineEmits<{
 
 .menu + .translations::before,
 .menu + .appearance::before,
+.menu + .social-links::before,
 .translations + .appearance::before,
 .appearance + .social-links::before {
   margin-right: 8px;

package/dist/client/theme-default/components/VPNavBarAppearance.vue

@@ -1,9 +1,12 @@
 <script lang="ts" setup>
+import { useData } from 'vitepress'
 import VPSwitchAppearance from './VPSwitchAppearance.vue'
+
+const { site } = useData()
 </script>
 
 <template>
-  <div class="VPNavBarAppearance">
+  <div v-if="site.appearance" class="VPNavBarAppearance">
     <VPSwitchAppearance />
   </div>
 </template>

package/dist/client/theme-default/components/VPNavBarExtra.vue

@@ -4,7 +4,7 @@ import VPFlyout from './VPFlyout.vue'
 import VPSwitchAppearance from './VPSwitchAppearance.vue'
 import VPSocialLinks from './VPSocialLinks.vue'
 
-const { theme } = useData()
+const { site, theme } = useData()
 </script>
 
 <template>
@@ -23,7 +23,7 @@ const { theme } = useData()
       </div>
     </div>
 
-    <div class="group">
+    <div v-if="site.appearance" class="group">
       <div class="item">
         <p class="label">Appearance</p>
         <div class="appearance-action">

package/dist/client/theme-default/components/VPNavBarSearch.vue

@@ -3,9 +3,9 @@ import '@docsearch/css'
 import { useData } from 'vitepress'
 import { defineAsyncComponent, ref, onMounted, onUnmounted } from 'vue'
 
-const VPAlgoliaSearchBox = defineAsyncComponent(
-  () => import('./VPAlgoliaSearchBox.vue')
-)
+const VPAlgoliaSearchBox = defineAsyncComponent(() => {
+  return import('./VPAlgoliaSearchBox.vue')
+})
 
 const { theme } = useData()
 

package/dist/client/theme-default/components/VPNavBarTitle.vue

@@ -1,39 +1,52 @@
 <script setup lang="ts">
 import { useData } from 'vitepress'
+import { useSidebar } from '../composables/sidebar'
 
 const { site, theme } = useData()
+const { hasSidebar } = useSidebar()
 </script>
 
 <template>
-  <a class="VPNavBarTitle" href="/">
-    <img v-if="theme.logo" class="logo" :src="theme.logo" :alt="site.title">
-    {{ site.title }}
-  </a>
+  <div class="VPNavBarTitle" :class="{ 'has-sidebar': hasSidebar }">
+    <a class="title" href="/">
+      <img v-if="theme.logo" class="logo" :src="theme.logo" :alt="site.title">
+      {{ site.title }}
+    </a>
+  </div>
 </template>
 
 <style scoped>
 .VPNavBarTitle {
+  flex-shrink: 0;
+}
+
+@media (min-width: 960px) {
+  .VPNavBarTitle.has-sidebar {
+    margin-right: 32px;
+    width: calc(var(--vp-sidebar-width) - 64px);
+    border-bottom: 1px solid var(--vp-c-divider-light);
+    background-color: var(--vp-c-bg-sidebar);
+  }
+}
+
+.title {
   display: flex;
   align-items: center;
-  height: var(--vp-nav-height-mobile);
+  width: 100%;
+  height: var(--vp-nav-height);
   font-size: 16px;
   font-weight: 600;
   color: var(--vp-c-text-1);
-  transition: background-color 0.5s, opacity 0.25s;
+  transition: opacity 0.25s;
 }
 
-.VPNavBarTitle:hover {
+.title:hover {
   opacity: 0.6;
 }
 
 @media (min-width: 960px) {
-  .VPNavBarTitle {
+  .title {
     flex-shrink: 0;
-    margin-right: 32px;
-    border-bottom: 1px solid var(--vp-c-divider-light);
-    width: calc(var(--vp-sidebar-width) - 64px);
-    height: var(--vp-nav-height-desktop);
-    background-color: var(--vp-c-bg-sidebar);
   }
 }
 

package/dist/client/theme-default/components/VPNavScreenAppearance.vue

@@ -1,9 +1,12 @@
 <script lang="ts" setup>
+import { useData } from 'vitepress'
 import VPSwitchAppearance from './VPSwitchAppearance.vue'
+
+const { site } = useData()
 </script>
 
 <template>
-  <div class="VPNavScreenAppearance">
+  <div v-if="site.appearance" class="VPNavScreenAppearance">
     <p class="text">Appearance</p>
     <VPSwitchAppearance />
   </div>

package/dist/client/theme-default/components/VPPage.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="VPPage">
+    <Content />
+  </div>
+</template>

package/dist/client/theme-default/components/VPSidebar.vue

@@ -91,8 +91,8 @@ watchPostEffect(async () => {
 
 @media (min-width: 1440px) {
   .VPSidebar {
-    padding-left: calc((100% - var(--vp-layout-max-width)) / 2);
-    width: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width) - 32px);
+    padding-left: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2);
+    width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
   }
 }
 

package/dist/client/theme-default/components/VPSponsors.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import VPSponsorsGrid from './VPSponsorsGrid.vue'
+
+interface Sponsors {
+  tier?: string
+  size?: 'small' | 'medium' | 'big'
+  items: Sponsor[]
+}
+
+interface Sponsor {
+  name: string
+  img: string
+  url: string
+}
+
+const props = defineProps<{
+  tier?: string
+  size?: 'small' | 'medium' | 'big'
+  data: Sposors[] | Sponsor[]
+}>()
+
+const sponsors = computed(() => {
+  const isSponsors = props.data.some((s: any) => s.items)
+
+  if (isSponsors) {
+    return props.data
+  }
+
+  return [{
+    tier: props.tier,
+    size: props.size,
+    items: props.data
+  }]
+})
+</script>
+
+<template>
+  <div class="VPSponsors">
+    <section v-for="(sponsor, index) in sponsors" :key="index" class="section">
+      <h3 v-if="sponsor.tier" class="tier">{{ sponsor.tier }}</h3>
+      <VPSponsorsGrid :size="sponsor.size" :data="sponsor.items" />
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.VPSponsors {
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.section + .section {
+  margin-top: 4px;
+}
+
+.tier {
+  margin-bottom: 4px;
+  padding: 13px 0 11px;
+  text-align: center;
+  letter-spacing: 1px;
+  line-height: 24px;
+  width: 100%;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  background-color: var(--vp-c-white-soft);
+}
+
+.dark .tier {
+  background-color: var(--vp-c-black-mute);
+}
+
+.VPSponsorsGrid + .tier {
+  margin-top: 4px;
+}
+</style>