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

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,7 +1,18 @@
-import { onMounted, onUpdated, onUnmounted } from 'vue';
+import { computed, onMounted, onUpdated, onUnmounted } from 'vue';
+import { useData } from 'vitepress';
 import { useMediaQuery } from '@vueuse/core';
+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));
 }
@@ -109,22 +120,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);
+    }
+}

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

@@ -2,9 +2,14 @@ import './styles/fonts.css';
 import './styles/vars.css';
 import './styles/base.css';
 import './styles/utils.css';
-import './styles/vp-doc.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';
 const theme = {
     Layout,
     NotFound

package/dist/client/theme-default/styles/base.css

@@ -39,6 +39,9 @@ h4,
 h5,
 h6 {
   margin: 0;
+  line-height: 24px;
+  font-size: 16px;
+  font-weight: 400;
 }
 
 p {

package/dist/client/theme-default/styles/components/custom-block.css

@@ -0,0 +1,90 @@
+.custom-block {
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 16px 16px 8px;
+  line-height: 20px;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.custom-block.info {
+  border-color: var(--vp-custom-block-info-border);
+  color: var(--vp-custom-block-info-text);
+  background-color: var(--vp-custom-block-info-bg);
+}
+
+.custom-block.info code {
+  background-color: var(--vp-custom-block-info-code-bg);
+}
+
+.custom-block.tip {
+  border-color: var(--vp-custom-block-tip-border);
+  color: var(--vp-custom-block-tip-text);
+  background-color: var(--vp-custom-block-tip-bg);
+}
+
+.custom-block.tip code {
+  background-color: var(--vp-custom-block-tip-code-bg);
+}
+
+.custom-block.warning {
+  border-color: var(--vp-custom-block-warning-border);
+  color: var(--vp-custom-block-warning-text);
+  background-color: var(--vp-custom-block-warning-bg);
+}
+
+.custom-block.warning code {
+  background-color: var(--vp-custom-block-warning-code-bg);
+}
+
+.custom-block.danger {
+  border-color: var(--vp-custom-block-danger-border);
+  color: var(--vp-custom-block-danger-text);
+  background-color: var(--vp-custom-block-danger-bg);
+}
+
+.custom-block.danger code {
+  background-color: var(--vp-custom-block-danger-code-bg);
+}
+
+.custom-block.details {
+  border-color: var(--vp-custom-block-details-border);
+  color: var(--vp-custom-block-details-text);
+  background-color: var(--vp-custom-block-details-bg);
+}
+
+.custom-block.details code {
+  background-color: var(--vp-custom-block-details-code-bg);
+}
+
+.custom-block-title {
+  font-weight: 700;
+}
+
+.custom-block p + p {
+  margin: 8px 0;
+}
+
+.custom-block.details summary {
+  margin: 0 0 8px;
+  font-weight: 700;
+}
+
+.custom-block.details summary + p {
+  margin: 8px 0;
+}
+
+.custom-block a {
+  color: inherit;
+  font-weight: 600;
+  text-decoration: underline;
+  transition: opacity .25s;
+}
+
+.custom-block a:hover {
+  opacity: 0.6;
+}
+
+.custom-block code {
+  font-size: var(--vp-custom-block-code-font-size);
+}

package/dist/client/theme-default/styles/{vp-doc.css → components/vp-doc.css}

@@ -115,14 +115,27 @@
 
 .vp-doc ul,
 .vp-doc ol {
+  padding-left: 1.25rem;
   margin: 16px 0;
 }
 
 .vp-doc ul {
-  padding-left: 1.25rem;
   list-style: disc;
 }
 
+.vp-doc ol {
+  list-style: decimal;
+}
+
+.vp-doc li + li {
+  margin-top: 8px;
+}
+
+.vp-doc li > ol,
+.vp-doc li > ul {
+  margin: 8px 0 0;
+}
+
 /**
  * Table
  * -------------------------------------------------------------------------- */
@@ -173,6 +186,49 @@
   border-top: 1px solid var(--vp-c-divider-light);
 }
 
+/**
+ * Custom Block
+ * -------------------------------------------------------------------------- */
+
+.vp-doc .custom-block {
+  margin: 16px 0;
+}
+
+.vp-doc .custom-block p {
+  margin: 8px 0;
+  line-height: 24px;
+}
+
+.vp-doc .custom-block p:first-child {
+  margin: 0;
+}
+
+.vp-doc .custom-block a {
+  color: inherit;
+  font-weight: 600;
+  text-decoration: underline;
+  transition: opacity .25s;
+}
+
+.vp-doc .custom-block a:hover {
+  opacity: 0.6;
+}
+
+.vp-doc .custom-block code {
+  font-size: var(--vp-custom-block-code-font-size);
+  font-weight: 600;
+  color: inherit;
+}
+
+.vp-doc .custom-block div[class*='language-'] {
+  margin: 8px 0;
+}
+
+.vp-doc .custom-block div[class*='language-'] code {
+  font-weight: 400;
+  background-color: var(--vp-code-block-bg);
+}
+
 /**
  * Code
  * -------------------------------------------------------------------------- */
@@ -184,7 +240,7 @@
 
 .vp-doc :not(pre) > code {
   border-radius: 4px;
-  padding: 4px 6px;
+  padding: 3px 6px;
   color: var(--vp-c-text-code);
   background-color: var(--vp-c-bg-mute);
   transition: color 0.5s, background-color 0.5s;
@@ -196,19 +252,13 @@
   font-size: 0.9em;
 }
 
-@media (min-width: 768px) {
-  .vp-doc :not(pre) > code {
-    white-space: nowrap;
-  }
-}
-
 .vp-doc a > code {
   color: var(--vp-c-brand-dark);
 }
 
 .vp-doc div[class*='language-'] {
   position: relative;
-  margin: 20px -24px;
+  margin: 16px -24px;
   background-color: var(--vp-code-block-bg);
   overflow-x: auto;
   transition: background-color 0.5s;
@@ -217,7 +267,7 @@
 @media (min-width: 640px) {
   .vp-doc div[class*='language-'] {
     border-radius: 8px;
-    margin: 20px 0;
+    margin: 16px 0;
   }
 }
 
@@ -230,7 +280,7 @@
 .vp-doc div[class*='language-'] + div[class*='language-'],
 .vp-doc div[class$='-api'] + div[class*='language-'],
 .vp-doc div[class*='language-'] + div[class$='-api'] > div[class*='language-'] {
-  margin-top: -12px;
+  margin-top: -8px;
 }
 
 .vp-doc [class*='language-'] pre,
@@ -331,6 +381,8 @@
 .vp-doc [class~='language-ts']:before       { content: 'ts'; }
 .vp-doc [class~='language-tsx']:before      { content: 'tsx'; }
 .vp-doc [class~='language-json']:before     { content: 'json'; }
+.vp-doc [class~='language-yaml']:before     { content: 'yaml'; }
+.vp-doc [class~='language-yml']:before      { content: 'yaml'; }
 .vp-doc [class~='language-sh']:before       { content: 'sh'; }
 .vp-doc [class~='language-bash']:before     { content: 'sh'; }
 

package/dist/client/theme-default/styles/components/vp-sponsor.css

@@ -0,0 +1,86 @@
+.vp-sponsor-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.vp-sponsor-grid.small .vp-sponsor-grid-link   { height: 96px; }
+.vp-sponsor-grid.small .vp-sponsor-grid-image  { max-width: 96px; max-height: 24px }
+
+.vp-sponsor-grid.medium .vp-sponsor-grid-link  { height: 112px; }
+.vp-sponsor-grid.medium .vp-sponsor-grid-image { max-width: 120px; max-height: 36px }
+
+.vp-sponsor-grid.big .vp-sponsor-grid-link     { height: 184px; }
+.vp-sponsor-grid.big .vp-sponsor-grid-image    { max-width: 192px; max-height: 56px }
+
+.vp-sponsor-grid[data-vp-grid="2"] .vp-sponsor-grid-item {
+  width: calc((100% - 4px) / 2);
+}
+
+.vp-sponsor-grid[data-vp-grid="3"] .vp-sponsor-grid-item {
+  width: calc((100% - 4px * 2) / 3);
+}
+
+.vp-sponsor-grid[data-vp-grid="4"] .vp-sponsor-grid-item {
+  width: calc((100% - 4px * 3) / 4);
+}
+
+.vp-sponsor-grid[data-vp-grid="5"] .vp-sponsor-grid-item {
+  width: calc((100% - 4px * 4) / 5);
+}
+
+.vp-sponsor-grid[data-vp-grid="6"] .vp-sponsor-grid-item {
+  width: calc((100% - 4px * 5) / 6);
+}
+
+.vp-sponsor-grid-item {
+  flex-shrink: 0;
+  width: 100%;
+  background-color: var(--vp-c-white-soft);
+  transition: background-color 0.25s;
+}
+
+.vp-sponsor-grid-item:hover {
+  background-color: var(--vp-c-white-mute);
+}
+
+.vp-sponsor-grid-item:hover .vp-sponsor-grid-image {
+  filter: grayscale(0) invert(0);
+}
+
+.vp-sponsor-grid-item.empty:hover {
+  background-color: var(--vp-c-white-soft);
+}
+
+.dark .vp-sponsor-grid-item {
+  background-color: var(--vp-c-black-mute);
+}
+
+.dark .vp-sponsor-grid-item:hover {
+  background-color: var(--vp-c-white-soft);
+}
+
+.dark .vp-sponsor-grid-item.empty:hover {
+  background-color: var(--vp-c-black-mute);
+}
+
+.vp-sponsor-grid-link {
+  display: flex;
+}
+
+.vp-sponsor-grid-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.vp-sponsor-grid-image {
+  max-width: 100%;
+  filter: grayscale(1);
+  transition: filter 0.25s;
+}
+
+.dark .vp-sponsor-grid-image {
+  filter: grayscale(1) invert(1);
+}