vitepress 1.0.0-draft.3 → 1.0.0-draft.6

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

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import '@docsearch/css'
-import { useData } from 'vitepress'
 import { defineAsyncComponent, ref, onMounted, onUnmounted } from 'vue'
+import { useData } from 'vitepress'
 
-const VPAlgoliaSearchBox = defineAsyncComponent(() => {
-  return import('./VPAlgoliaSearchBox.vue')
-})
+const VPAlgoliaSearchBox = __ALGOLIA__
+  ? defineAsyncComponent(() => import('./VPAlgoliaSearchBox.vue'))
+  : () => null
 
 const { theme } = useData()
 
@@ -161,12 +161,12 @@ function load() {
     padding: 0 10px 0 12px;
     width: 100%;
     height: 40px;
-    background-color: var(--vp-c-bg-sidebar);
+    background-color: var(--vp-c-bg-alt);
   }
 
   .DocSearch-Button:hover {
     border-color: var(--vp-c-brand);
-    background: var(--vp-c-bg-sidebar);
+    background: var(--vp-c-bg-alt);
   }
 }
 

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

@@ -18,14 +18,16 @@ const { hasSidebar } = useSidebar()
 <style scoped>
 .VPNavBarTitle {
   flex-shrink: 0;
+  border-bottom: 1px solid transparent;
+  transition: background-color 0.5s;
 }
 
 @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);
+    border-bottom-color: var(--vp-c-divider-light);
+    background-color: var(--vp-c-bg-alt);
   }
 }
 

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

@@ -1,16 +1,10 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
 import { useData } from 'vitepress'
 import VPIconLanguages from './icons/VPIconLanguages.vue'
 import VPFlyout from './VPFlyout.vue'
+import VPMenuLink from './VPMenuLink.vue'
 
 const { theme } = useData()
-
-const isOpen = ref(false)
-
-function toggle() {
-  isOpen.value = !isOpen.value
-}
 </script>
 
 <template>
@@ -19,16 +13,12 @@ function toggle() {
     class="VPNavBarTranslations"
     :icon="VPIconLanguages"
   >
-    <div class="container">
-      <p class="title">
-        {{ theme.localeLinks.text }}
-      </p>
+    <div class="items">
+      <p class="title">{{ theme.localeLinks.text }}</p>
 
-      <ul class="list">
-        <li v-for="locale in theme.localeLinks.items" :key="locale.link" class="lang">
-          <a class="link" :href="locale.link">{{ locale.text }}</a>
-        </li>
-      </ul>
+      <template v-for="locale in theme.localeLinks.items" :key="locale.link">
+        <VPMenuLink :item="locale" />
+      </template>
     </div>
   </VPFlyout>
 </template>
@@ -45,30 +35,11 @@ function toggle() {
   }
 }
 
-.container {
-  padding: 0 16px;
-}
-
 .title {
-  display: flex;
-  align-items: center;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-}
-
-.lang {
-  padding: 4px 0 0 0;
-}
-
-.link {
-  line-height: 28px;
-  font-size: 13px;
+  padding: 0 24px 0 12px;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 700;
   color: var(--vp-c-text-1);
-  transition: color 0.25s;
-}
-
-.link:hover {
-  color: var(--vp-c-brand);
 }
 </style>

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

@@ -1,13 +1,12 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import { DefaultTheme } from 'vitepress'
 import VPIconPlus from './icons/VPIconPlus.vue'
 import VPNavScreenMenuGroupLink from './VPNavScreenMenuGroupLink.vue'
 import VPNavScreenMenuGroupSection from './VPNavScreenMenuGroupSection.vue'
 
 const props = defineProps<{
   text: string
-  items: DefaultTheme.NavItemChild[]
+  items: any[]
 }>()
 
 const isOpen = ref(false)

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { DefaultTheme } from 'vitepress'
+import { DefaultTheme } from '../config'
 import VPNavScreenMenuGroupLink from './VPNavScreenMenuGroupLink.vue'
 
 defineProps<{

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

@@ -34,7 +34,12 @@ watchPostEffect(async () => {
       </span>
 
       <div v-for="group in sidebar" :key="group.text" class="group">
-        <VPSidebarGroup :text="group.text" :items="group.items" />
+        <VPSidebarGroup
+          :text="group.text"
+          :items="group.items"
+          :collapsible="group.collapsible"
+          :collapsed="group.collapsed"
+        />
       </div>
     </nav>
   </aside>
@@ -80,7 +85,7 @@ watchPostEffect(async () => {
     width: var(--vp-sidebar-width);
     max-width: 100%;
     width: var(--vp-sidebar-width);
-    background-color: var(--vp-c-bg-sidebar);
+    background-color: var(--vp-c-bg-alt);
     opacity: 1;
     visibility: visible;
     box-shadow: none;
@@ -91,8 +96,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);
   }
 }
 
@@ -103,12 +108,13 @@ watchPostEffect(async () => {
 .group + .group {
   margin-top: 32px;
   border-top: 1px solid var(--vp-c-divider-light);
-  padding-top: 8px;
+  padding-top: 10px;
 }
 
 @media (min-width: 960px) {
   .group {
-    padding-top: 8px;
+    padding-top: 10px;
+    width: calc(var(--vp-sidebar-width) - 64px);
   }
 
   .group + .group {

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

@@ -1,44 +1,107 @@
 <script lang="ts" setup>
-import { useData } from 'vitepress'
+import { ref } from 'vue'
 import { DefaultTheme } from '../config'
+import VPIconPlusSquare from './icons/VPIconPlusSquare.vue'
+import VPIconMinusSquare from './icons/VPIconMinusSquare.vue'
 import VPSidebarLink from './VPSidebarLink.vue'
 
 const props = defineProps<{
   text: string
   items: DefaultTheme.SidebarItem[]
+  collapsible?: boolean
+  collapsed?: boolean
 }>()
 
-const { page } = useData()
+const collapsed = ref(props.collapsible && props.collapsed)
+
+function toggle() {
+  if (props.collapsible) {
+    collapsed.value = !collapsed.value
+  }
+}
 </script>
 
 <template>
-  <section class="VPSidebarGroup">
-    <div class="title">
+  <section class="VPSidebarGroup" :class="{ collapsible, collapsed }">
+    <div class="title" :role="collapsible ? 'button' : undefined" @click="toggle">
       <h2 class="title-text">{{ text }}</h2>
+      <div class="action">
+        <VPIconMinusSquare class="icon minus" />
+        <VPIconPlusSquare class="icon plus" />
+      </div>
     </div>
 
-    <template v-for="item in items" :key="item.link">
-      <VPSidebarLink :item="item" />
-    </template>
+    <div class="items">
+      <template v-for="item in items" :key="item.link">
+        <VPSidebarLink :item="item" />
+      </template>
+    </div>
   </section>
 </template>
 
 <style scoped>
 .title {
-  padding: 6px 0;
-}
-
-@media (min-width: 960px) {
-  .title {
-    padding: 4px 0;
-  }
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  z-index: 2;
 }
 
 .title-text {
+  padding-top: 6px;
+  padding-bottom: 6px;
   line-height: 20px;
-  font-size: 13px;
-  font-weight: 600;
+  font-size: 14px;
+  font-weight: 700;
   color: var(--vp-c-text-1);
-  transition: color 0.5s;
+}
+
+.action {
+  display: none;
+  position: relative;
+  margin-right: -8px;
+  border-radius: 4px;
+  width: 32px;
+  height: 32px;
+  color: var(--vp-c-text-3);
+  transition: color 0.25s;
+}
+
+.VPSidebarGroup.collapsible .action {
+  display: block;
+}
+
+.title:hover .action {
+  color: var(--vp-c-text-2);
+}
+
+.icon {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+
+.icon.minus { opacity: 1; }
+.icon.plus  { opacity: 0; }
+
+.VPSidebarGroup.collapsed .icon.minus { opacity: 0; }
+.VPSidebarGroup.collapsed .icon.plus  { opacity: 1; }
+
+.items {
+  overflow: hidden;
+}
+
+.VPSidebarGroup.collapsed .items {
+  margin-bottom: -22px;
+  max-height: 0;
+}
+
+@media (min-width: 960px) {
+  .VPSidebarGroup.collapsed .items {
+    margin-bottom: -14px;
+  }
 }
 </style>

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

@@ -31,25 +31,18 @@ const closeSideBar = inject('close-sidebar') as () => void
 }
 
 .link:hover .link-text {
-  color: var(--vp-c-brand);
+  color: var(--vp-c-text-1);
   transition: color 0.25s;
 }
 
 .link.active .link-text {
-  font-weight: 600;
   color: var(--vp-c-brand);
   transition: color 0.25s;
 }
 
-@media (min-width: 960px) {
-  .link {
-    padding: 4px 0;
-  }
-}
-
 .link-text {
   line-height: 20px;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 500;
   color: var(--vp-c-text-2);
   transition: color 0.5s;

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { DefaultTheme } from 'vitepress'
+import { DefaultTheme } from '../config'
 import VPIconDiscord from './icons/VPIconDiscord.vue'
 import VPIconFacebook from './icons/VPIconFacebook.vue'
 import VPIconGitHub from './icons/VPIconGitHub.vue'
@@ -9,7 +9,7 @@ import VPIconSlack from './icons/VPIconSlack.vue'
 import VPIconTwitter from './icons/VPIconTwitter.vue'
 import VPIconYouTube from './icons/VPIconYouTube.vue'
 
-const props = defineProps<{
+defineProps<{
   icon: DefaultTheme.SocialLinkIcon
   link: string
 }>()

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { DefaultTheme } from 'vitepress'
+import { DefaultTheme } from '../config'
 import VPSocialLink from './VPSocialLink.vue'
 
 defineProps<{

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

@@ -2,26 +2,29 @@
 import { computed } from 'vue'
 import VPSponsorsGrid from './VPSponsorsGrid.vue'
 
-interface Sponsors {
+export interface Sponsors {
   tier?: string
   size?: 'small' | 'medium' | 'big'
   items: Sponsor[]
 }
 
-interface Sponsor {
+export interface Sponsor {
   name: string
   img: string
   url: string
 }
 
 const props = defineProps<{
+  mode?: 'normal' | 'aside'
   tier?: string
-  size?: 'small' | 'medium' | 'big'
-  data: Sposors[] | Sponsor[]
+  size?: 'xmini' | 'small' | 'medium' | 'big'
+  data: Sponsors[] | Sponsor[]
 }>()
 
 const sponsors = computed(() => {
-  const isSponsors = props.data.some((s: any) => s.items)
+  const isSponsors = props.data.some((s) => {
+    return !!(s as Sponsors).items
+  })
 
   if (isSponsors) {
     return props.data
@@ -36,42 +39,14 @@ const sponsors = computed(() => {
 </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>
+  <div class="VPSponsors vp-sponsor" :class="[mode ?? 'normal']">
+    <section
+      v-for="(sponsor, index) in sponsors"
+      :key="index"
+      class="vp-sponsor-section"
+    >
+      <h3 v-if="sponsor.tier" class="vp-sponsor-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

@@ -2,14 +2,14 @@
 import { ref } from 'vue'
 import { useSponsorsGrid } from '../composables/sponsor-grid'
 
-interface Sponsor {
+export interface Sponsor {
   name: string
   img: string
   url: string
 }
 
 const props = defineProps<{
-  size?: 'small' | 'medium' | 'big'
+  size?: 'xmini' | 'mini' | 'small' | 'medium' | 'big'
   data: Sponsor[]
 }>()
 

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

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M22,13H2a1,1,0,0,1,0-2H22a1,1,0,0,1,0,2Z" />
+  </svg>
+</template>

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

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+    <path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z" />
+    <path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z" />
+  </svg>
+</template>

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

@@ -0,0 +1,6 @@
+<template>
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z" />
+    <path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z" />
+  </svg>
+</template>

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

@@ -0,0 +1,17 @@
+import { computed } from 'vue';
+import { useMediaQuery } from '@vueuse/core';
+import { useSidebar } from './sidebar';
+export function useAside() {
+    const { hasSidebar } = useSidebar();
+    const is960 = useMediaQuery('(min-width: 960px)');
+    const is1280 = useMediaQuery('(min-width: 1280px)');
+    const isAsideEnabled = computed(() => {
+        if (!is1280.value && !is960.value) {
+            return false;
+        }
+        return hasSidebar.value ? is1280.value : is960.value;
+    });
+    return {
+        isAsideEnabled
+    };
+}

package/dist/client/theme-default/composables/copy-code.js

@@ -0,0 +1,33 @@
+import { nextTick, watch } from 'vue';
+import { inBrowser, useData } from 'vitepress';
+export function useCopyCode() {
+    const { page } = useData();
+    if (inBrowser)
+        watch(() => page.value.relativePath, () => {
+            nextTick(() => {
+                document
+                    .querySelectorAll('.vp-doc div[class*="language-"]>span.copy')
+                    .forEach(handleElement);
+            });
+        }, { immediate: true, flush: 'post' });
+}
+function handleElement(el) {
+    el.onclick = () => {
+        const parent = el.parentElement;
+        if (!parent) {
+            return;
+        }
+        const isShell = parent.classList.contains('language-sh') ||
+            parent.classList.contains('language-bash');
+        let { innerText: text = '' } = parent;
+        if (isShell) {
+            text = text.replace(/^ *\$ /gm, '');
+        }
+        navigator.clipboard.writeText(text).then(() => {
+            el.classList.add('copied');
+            setTimeout(() => {
+                el.classList.remove('copied');
+            }, 3000);
+        });
+    };
+}

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

@@ -1,8 +1,18 @@
-import { onMounted, onUpdated, onUnmounted } from 'vue';
-import { useMediaQuery } from '@vueuse/core';
+import { computed, onMounted, onUpdated, onUnmounted } from 'vue';
+import { useData } from 'vitepress';
+import { useAside } from '../composables/aside';
 import { throttleAndDebounce } from '../support/utils';
 // magic number to avoid repeated retrieval
 const PAGE_OFFSET = 56;
+export function useOutline() {
+    const { page } = useData();
+    const hasOutline = computed(() => {
+        return page.value.headers.length > 0;
+    });
+    return {
+        hasOutline
+    };
+}
 export function resolveHeaders(headers) {
     return mapHeaders(groupHeaders(headers));
 }
@@ -29,7 +39,7 @@ function mapHeaders(headers) {
     }));
 }
 export function useActiveAnchor(container, marker) {
-    const isOutlineEnabled = useMediaQuery('(min-width: 1280px)');
+    const { isAsideEnabled } = useAside();
     const onScroll = throttleAndDebounce(setActiveLink, 100);
     let prevActiveLink = null;
     onMounted(() => {
@@ -44,7 +54,7 @@ export function useActiveAnchor(container, marker) {
         window.removeEventListener('scroll', onScroll);
     });
     function setActiveLink() {
-        if (!isOutlineEnabled.value) {
+        if (!isAsideEnabled.value) {
             return;
         }
         const links = [].slice.call(container.value.querySelectorAll('.outline-link'));

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

@@ -5,14 +5,16 @@ import { throttleAndDebounce } from '../support/utils';
  *
  * [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.
+ * 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.
+ * example, even we define 5 columns, if we only have 1 sponsor yet, we would
+ * like to show it in 1 column to make it stand out.
  */
 const GridSettings = {
+    xmini: [[0, 2]],
+    mini: [],
     small: [
         [920, 6],
         [768, 5],
@@ -31,7 +33,7 @@ const GridSettings = {
         [640, 2]
     ]
 };
-export function useSponsorsGrid(options) {
+export function useSponsorsGrid({ el, size = 'medium' }) {
     const onResize = throttleAndDebounce(manage, 100);
     onMounted(() => {
         manage();
@@ -41,7 +43,7 @@ export function useSponsorsGrid(options) {
         window.removeEventListener('resize', onResize);
     });
     function manage() {
-        adjustSlots(options.el.value, options.size);
+        adjustSlots(el.value, size);
     }
 }
 function adjustSlots(el, size) {

package/dist/client/theme-default/index.js

@@ -2,13 +2,15 @@ import './styles/fonts.css';
 import './styles/vars.css';
 import './styles/base.css';
 import './styles/utils.css';
-import './styles/vp-doc.css';
-import './styles/vp-sponsor.css';
+import './styles/components/custom-block.css';
+import './styles/components/vp-doc.css';
+import './styles/components/vp-sponsor.css';
 import Layout from './Layout.vue';
 import NotFound from './NotFound.vue';
 export { default as VPHomeHero } from './components/VPHomeHero.vue';
 export { default as VPHomeFeatures } from './components/VPHomeFeatures.vue';
 export { default as VPHomeSponsors } from './components/VPHomeSponsors.vue';
+export { default as VPDocAsideSponsors } from './components/VPDocAsideSponsors.vue';
 const theme = {
     Layout,
     NotFound