vitepress 1.0.0-draft.1 → 1.0.0-draft.2

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/VPNavBar.vue

@@ -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/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>

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

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useSponsorsGrid } from '../composables/sponsor-grid'
+
+interface Sponsor {
+  name: string
+  img: string
+  url: string
+}
+
+const props = defineProps<{
+  size?: 'small' | 'medium' | 'big'
+  data: Sponsor[]
+}>()
+
+const el = ref(null)
+
+useSponsorsGrid({ el, size: props.size })
+</script>
+
+<template>
+  <div class="VPSponsorsGrid vp-sponsor-grid" :class="[props.size ?? 'medium']" ref="el">
+    <div v-for="sponsor in data" :key="sponsor.tier" class="vp-sponsor-grid-item">
+      <a class="vp-sponsor-grid-link" :href="sponsor.url" target="_blank" rel="sponsored noopener">
+        <article class="vp-sponsor-grid-box">
+          <h4 class="visually-hidden">{{ sponsor.name }}</h4>
+          <img class="vp-sponsor-grid-image" :src="sponsor.img" :alt="sponsor.name" />
+        </article>
+      </a>
+    </div>
+  </div>
+</template>

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

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { APPEARANCE_KEY } from '../../shared'
 import VPSwitch from './VPSwitch.vue'
 import VPIconSun from './icons/VPIconSun.vue'
 import VPIconMoon from './icons/VPIconMoon.vue'
@@ -6,11 +7,10 @@ import VPIconMoon from './icons/VPIconMoon.vue'
 const toggle = typeof localStorage !== 'undefined' ? useAppearance() : () => {}
 
 function useAppearance() {
-  const storageKey = 'vitepress-theme-appearance'
   const query = window.matchMedia('(prefers-color-scheme: dark)')
   const classList = document.documentElement.classList
 
-  let userPreference = localStorage.getItem(storageKey) || 'auto'
+  let userPreference = localStorage.getItem(APPEARANCE_KEY) || 'auto'
 
   let isDark = userPreference === 'auto'
     ? query.matches
@@ -29,7 +29,7 @@ function useAppearance() {
       ? query.matches ? 'auto' : 'dark'
       : query.matches ? 'light' : 'auto'
 
-    localStorage.setItem(storageKey, userPreference)
+    localStorage.setItem(APPEARANCE_KEY, userPreference)
   }
 
   function setClass(dark: boolean): void {

package/dist/client/theme-default/components/icons/VPIconHeart.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M12,22.2c-0.3,0-0.5-0.1-0.7-0.3l-8.8-8.8c-2.5-2.5-2.5-6.7,0-9.2c2.5-2.5,6.7-2.5,9.2,0L12,4.3l0.4-0.4c0,0,0,0,0,0C13.6,2.7,15.2,2,16.9,2c0,0,0,0,0,0c1.7,0,3.4,0.7,4.6,1.9l0,0c1.2,1.2,1.9,2.9,1.9,4.6c0,1.7-0.7,3.4-1.9,4.6l-8.8,8.8C12.5,22.1,12.3,22.2,12,22.2zM7,4C5.9,4,4.7,4.4,3.9,5.3c-1.8,1.8-1.8,4.6,0,6.4l8.1,8.1l8.1-8.1c0.9-0.9,1.3-2,1.3-3.2c0-1.2-0.5-2.3-1.3-3.2l0,0C19.3,4.5,18.2,4,17,4c0,0,0,0,0,0c-1.2,0-2.3,0.5-3.2,1.3c0,0,0,0,0,0l-1.1,1.1c-0.4,0.4-1,0.4-1.4,0l-1.1-1.1C9.4,4.4,8.2,4,7,4z" />
+  </svg>
+</template>

package/dist/client/theme-default/composables/outline.js

@@ -1,5 +1,6 @@
 import { onMounted, onUpdated, onUnmounted } from 'vue';
 import { useMediaQuery } from '@vueuse/core';
+import { throttleAndDebounce } from '../support/utils';
 // magic number to avoid repeated retrieval
 const PAGE_OFFSET = 56;
 export function resolveHeaders(headers) {
@@ -109,22 +110,3 @@ function isAnchorActive(index, anchor, nextAnchor) {
     }
     return [false, null];
 }
-function throttleAndDebounce(fn, delay) {
-    let timeout;
-    let called = false;
-    return () => {
-        if (timeout) {
-            clearTimeout(timeout);
-        }
-        if (!called) {
-            fn();
-            called = true;
-            setTimeout(() => {
-                called = false;
-            }, delay);
-        }
-        else {
-            timeout = setTimeout(fn, delay);
-        }
-    };
-}

package/dist/client/theme-default/composables/sponsor-grid.js

@@ -0,0 +1,92 @@
+import { onMounted, onUnmounted } from 'vue';
+import { throttleAndDebounce } from '../support/utils';
+/**
+ * Defines grid configuration for each sponsor size in touple.
+ *
+ * [Screen widh, Column size]
+ *
+ * It sets grid size on matching screen size. For example, `[768, 5]` will set
+ * 5 columns when screen size is bigger or equal to 768px.
+ *
+ * Column will set only when item size is bigger than the column size. For
+ * example, even we want 5 columns, if we only have 1 sponsor yet, we would
+ * like to show it in 1 column.
+ */
+const GridSettings = {
+    small: [
+        [920, 6],
+        [768, 5],
+        [640, 4],
+        [480, 3],
+        [0, 2]
+    ],
+    medium: [
+        [960, 5],
+        [832, 4],
+        [640, 3],
+        [480, 2]
+    ],
+    big: [
+        [832, 3],
+        [640, 2]
+    ]
+};
+export function useSponsorsGrid(options) {
+    const onResize = throttleAndDebounce(manage, 100);
+    onMounted(() => {
+        manage();
+        window.addEventListener('resize', onResize);
+    });
+    onUnmounted(() => {
+        window.removeEventListener('resize', onResize);
+    });
+    function manage() {
+        adjustSlots(options.el.value, options.size);
+    }
+}
+function adjustSlots(el, size) {
+    const tsize = el.children.length;
+    const asize = el.querySelectorAll('.vp-sponsor-grid-item:not(.empty)').length;
+    const grid = setGrid(el, size, asize);
+    manageSlots(el, grid, tsize, asize);
+}
+function setGrid(el, size, items) {
+    const settings = GridSettings[size];
+    const screen = window.innerWidth;
+    let grid = 1;
+    settings.some(([breakpoint, value]) => {
+        if (screen >= breakpoint) {
+            grid = items < value ? items : value;
+            return true;
+        }
+    });
+    setGridData(el, grid);
+    return grid;
+}
+function setGridData(el, value) {
+    el.dataset.vpGrid = String(value);
+}
+function manageSlots(el, grid, tsize, asize) {
+    const diff = tsize - asize;
+    const rem = asize % grid;
+    const drem = rem === 0 ? rem : grid - rem;
+    neutralizeSlots(el, drem - diff);
+}
+function neutralizeSlots(el, count) {
+    if (count === 0) {
+        return;
+    }
+    count > 0 ? addSlots(el, count) : removeSlots(el, count * -1);
+}
+function addSlots(el, count) {
+    for (let i = 0; i < count; i++) {
+        const slot = document.createElement('div');
+        slot.classList.add('vp-sponsor-grid-item', 'empty');
+        el.append(slot);
+    }
+}
+function removeSlots(el, count) {
+    for (let i = 0; i < count; i++) {
+        el.removeChild(el.lastElementChild);
+    }
+}