vitepress 0.22.3 → 1.0.0-draft.2

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,97 @@
+<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;
+}
+
+.sponsor + .sponsor {
+  padding-top: 0px;
+}
+
+.action {
+  padding-top: 40px;
+  text-align: center;
+}
+</style>

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

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import VPIconExternalLink from './icons/VPIconExternalLink.vue'
+
+const props = defineProps<{
+  href?: string
+  noIcon?: boolean
+}>()
+
+const isExternal = computed(() => props.href && /^[a-z]+:/i.test(props.href))
+</script>
+
+<template>
+  <component
+    :is="href ? 'a' : 'span'"
+    class="VPLink"
+    :class="{ link: href }"
+    :href="href"
+    :target="isExternal ? '_blank' : undefined"
+    :rel="isExternal ? 'noopener noreferrer' : undefined"
+  >
+    <slot />
+    <VPIconExternalLink v-if="isExternal && !noIcon" class="icon" />
+  </component>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  margin-top: -1px;
+  margin-left: 4px;
+  width: 11px;
+  height: 11px;
+  fill: var(--vp-c-text-3);
+  transition: fill 0.25s;
+}
+</style>

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

@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+import { useSidebar } from '../composables/sidebar'
+import VPIconAlignLeft from './icons/VPIconAlignLeft.vue'
+
+defineProps<{
+  open: boolean
+}>()
+
+defineEmits<{
+  (e: 'open-menu'): void
+}>()
+
+const { hasSidebar } = useSidebar()
+
+function scrollToTop() {
+  window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
+}
+</script>
+
+<template>
+  <div v-if="hasSidebar" class="VPLocalNav">
+    <button
+      class="menu"
+      :aria-expanded="open"
+      aria-controls="VPSidebarNav"
+      @click="$emit('open-menu')"
+    >
+      <VPIconAlignLeft class="menu-icon" />
+      <span class="menu-text">Menu</span>
+    </button>
+
+    <a class="top-link" href="#" @click="scrollToTop">
+      Return to top
+    </a>
+  </div>
+</template>
+
+<style scoped>
+.VPLocalNav {
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: var(--vp-z-index-local-nav);
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--vp-c-divider-light);
+  width: 100%;
+  background-color: var(--vp-c-bg-content);
+  transition: border-color 0.5s, background-color 0.5s;
+}
+
+@media (min-width: 960px) {
+  .VPLocalNav {
+    display: none;
+  }
+}
+
+.menu {
+  display: flex;
+  align-items: center;
+  padding: 0 24px;
+  line-height: 47px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  transition: color 0.5s;
+}
+
+.menu:hover {
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+@media (min-width: 768px) {
+  .menu {
+    padding: 0 32px;
+  }
+}
+
+.menu-icon {
+  margin-right: 8px;
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+
+.top-link {
+  padding: 0 24px;
+  line-height: 47px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  transition: color 0.5s;
+}
+
+.top-link:hover {
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+@media (min-width: 768px) {
+  .top-link {
+    padding: 0 32px;
+  }
+}
+</style>

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

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import VPMenuLink from './VPMenuLink.vue'
+import VPMenuGroup from './VPMenuGroup.vue'
+
+defineProps<{
+  items?: any[]
+}>()
+</script>
+
+<template>
+  <div class="VPMenu">
+    <div v-if="items" class="items">
+      <template v-for="item in items" :key="item.text">
+        <VPMenuLink v-if="'link' in item" :item="item" />
+        <VPMenuGroup v-else :text="item.text" :items="item.items" />
+      </template>
+    </div>
+
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.VPMenu {
+  border-radius: 8px;
+  padding: 12px 0;
+  min-width: 192px;
+  border: 1px solid transparent;
+  background: var(--vp-c-bg);
+  box-shadow: var(--vp-shadow-3);
+  transition: background-color 0.5s;
+}
+
+.dark .VPMenu {
+  background: var(--vp-c-bg);
+  box-shadow: var(--vp-shadow-1);
+  border: 1px solid var(--vp-c-divider-light);
+}
+
+.VPMenu :deep(.items) {
+  transition: border-color .5s;
+}
+
+.VPMenu :deep(.group) {
+  padding: 0 0 12px;
+}
+
+.VPMenu :deep(.group + .group) {
+  border-top: 1px solid var(--vp-c-divider-light);
+  padding: 11px 0 12px;
+}
+
+.VPMenu :deep(.group:last-child) {
+  padding-bottom: 0;
+}
+
+.VPMenu :deep(.group + .item) {
+  border-top: 1px solid var(--vp-c-divider-light);
+  padding: 11px 16px 0;
+}
+
+.VPMenu :deep(.item) {
+  padding: 0 16px;
+  white-space: nowrap;
+}
+
+.VPMenu :deep(.label) {
+  flex-grow: 1;
+  line-height: 28px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  transition: color .5s;
+}
+
+.VPMenu :deep(.action) {
+  padding-left: 24px;
+}
+</style>

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

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import VPMenuLink from './VPMenuLink.vue'
+
+defineProps<{
+  text?: string
+  items: any[]
+}>()
+</script>
+
+<template>
+  <div class="VPMenuGroup">
+    <p v-if="text" class="title">{{ text }}</p>
+
+    <template v-for="item in items">
+      <VPMenuLink v-if="'link' in item" :item="item" />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.VPMenuGroup + .VPMenuGroup {
+  margin-top: 8px;
+  border-top: 1px solid var(--vp-c-divider-light);
+  padding-top: 8px;
+}
+
+.title {
+  padding: 0 16px;
+  line-height: 28px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  transition: color 0.25s;
+}
+</style>

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

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import VPLink from './VPLink.vue'
+
+defineProps<{
+  item: any
+}>()
+</script>
+
+<template>
+  <VPLink class="VPMenuLink" :href="item.link">
+    {{ item.text }}
+  </VPLink>
+</template>
+
+<style scoped>
+.VPMenuLink {
+  display: block;
+  padding: 0 16px;
+  line-height: 28px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  white-space: nowrap;
+  transition: color 0.25s;
+}
+
+.VPMenuLink:hover {
+  color: var(--vp-c-brand);
+}
+</style>

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

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { provide } from 'vue'
+import { useNav } from '../composables/nav'
+import VPNavBar from './VPNavBar.vue'
+import VPNavScreen from './VPNavScreen.vue'
+
+const { isScreenOpen, closeScreen, toggleScreen } = useNav()
+
+provide('close-screen', closeScreen)
+</script>
+
+<template>
+  <header class="VPNav">
+    <VPNavBar :is-screen-open="isScreenOpen" @toggle-screen="toggleScreen" />
+    <VPNavScreen :open="isScreenOpen" />
+  </header>
+</template>
+
+<style scoped>
+.VPNav {
+  position: relative;
+  top: 0;
+  left: 0;
+  z-index: var(--vp-z-index-nav);
+  width: 100%;
+}
+
+@media (min-width: 960px) {
+  .VPNav {
+    position: fixed;
+  }
+}
+</style>