themekit-js 1.1.0

package/dist/client/index.js

@@ -0,0 +1,9 @@
+// exports in this file are exposed to themes and md files via 'vitepress'
+// so the user can do `import { useRoute, useData } from 'vitepress'`
+// composables
+export { useData, dataSymbol } from './app/data';
+export { useRoute, useRouter } from './app/router';
+// utilities
+export { inBrowser, onContentUpdated, defineClientComponent, withBase, getScrollOffset } from './app/utils';
+// components
+export { Content } from './app/components/Content';

package/dist/client/shared.js

@@ -0,0 +1,139 @@
+export const EXTERNAL_URL_RE = /^(?:[a-z]+:|\/\/)/i;
+export const APPEARANCE_KEY = 'vitepress-theme-appearance';
+const HASH_RE = /#.*$/;
+const HASH_OR_QUERY_RE = /[?#].*$/;
+const INDEX_OR_EXT_RE = /(?:(^|\/)index)?\.(?:md|html)$/;
+export const inBrowser = typeof document !== 'undefined';
+export const notFoundPageData = {
+    relativePath: '',
+    filePath: '',
+    title: '404',
+    description: 'Not Found',
+    headers: [],
+    frontmatter: { sidebar: false, layout: 'page' },
+    lastUpdated: 0,
+    isNotFound: true
+};
+export function isActive(currentPath, matchPath, asRegex = false) {
+    if (matchPath === undefined) {
+        return false;
+    }
+    currentPath = normalize(`/${currentPath}`);
+    if (asRegex) {
+        return new RegExp(matchPath).test(currentPath);
+    }
+    if (normalize(matchPath) !== currentPath) {
+        return false;
+    }
+    const hashMatch = matchPath.match(HASH_RE);
+    if (hashMatch) {
+        return (inBrowser ? location.hash : '') === hashMatch[0];
+    }
+    return true;
+}
+function normalize(path) {
+    return decodeURI(path)
+        .replace(HASH_OR_QUERY_RE, '')
+        .replace(INDEX_OR_EXT_RE, '$1');
+}
+export function isExternal(path) {
+    return EXTERNAL_URL_RE.test(path);
+}
+/**
+ * this merges the locales data to the main data by the route
+ */
+export function resolveSiteDataByRoute(siteData, relativePath) {
+    const localeIndex = Object.keys(siteData.locales).find((key) => key !== 'root' &&
+        !isExternal(key) &&
+        isActive(relativePath, `/${key}/`, true)) || 'root';
+    return Object.assign({}, siteData, {
+        localeIndex,
+        lang: siteData.locales[localeIndex]?.lang ?? siteData.lang,
+        dir: siteData.locales[localeIndex]?.dir ?? siteData.dir,
+        title: siteData.locales[localeIndex]?.title ?? siteData.title,
+        titleTemplate: siteData.locales[localeIndex]?.titleTemplate ?? siteData.titleTemplate,
+        description: siteData.locales[localeIndex]?.description ?? siteData.description,
+        head: mergeHead(siteData.head, siteData.locales[localeIndex]?.head ?? []),
+        themeConfig: {
+            ...siteData.themeConfig,
+            ...siteData.locales[localeIndex]?.themeConfig
+        }
+    });
+}
+/**
+ * Create the page title string based on config.
+ */
+export function createTitle(siteData, pageData) {
+    const title = pageData.title || siteData.title;
+    const template = pageData.titleTemplate ?? siteData.titleTemplate;
+    if (typeof template === 'string' && template.includes(':title')) {
+        return template.replace(/:title/g, title);
+    }
+    const templateString = createTitleTemplate(siteData.title, template);
+    if (title === templateString.slice(3)) {
+        return title;
+    }
+    return `${title}${templateString}`;
+}
+function createTitleTemplate(siteTitle, template) {
+    if (template === false) {
+        return '';
+    }
+    if (template === true || template === undefined) {
+        return ` | ${siteTitle}`;
+    }
+    if (siteTitle === template) {
+        return '';
+    }
+    return ` | ${template}`;
+}
+function hasTag(head, tag) {
+    const [tagType, tagAttrs] = tag;
+    if (tagType !== 'meta')
+        return false;
+    const keyAttr = Object.entries(tagAttrs)[0]; // First key
+    if (keyAttr == null)
+        return false;
+    return head.some(([type, attrs]) => type === tagType && attrs[keyAttr[0]] === keyAttr[1]);
+}
+export function mergeHead(prev, curr) {
+    return [...prev.filter((tagAttrs) => !hasTag(curr, tagAttrs)), ...curr];
+}
+// https://github.com/rollup/rollup/blob/fec513270c6ac350072425cc045db367656c623b/src/utils/sanitizeFileName.ts
+const INVALID_CHAR_REGEX = /[\u0000-\u001F"#$&*+,:;<=>?[\]^`{|}\u007F]/g;
+const DRIVE_LETTER_REGEX = /^[a-z]:/i;
+export function sanitizeFileName(name) {
+    const match = DRIVE_LETTER_REGEX.exec(name);
+    const driveLetter = match ? match[0] : '';
+    return (driveLetter +
+        name
+            .slice(driveLetter.length)
+            .replace(INVALID_CHAR_REGEX, '_')
+            .replace(/(^|\/)_+(?=[^/]*$)/, '$1'));
+}
+export function slash(p) {
+    return p.replace(/\\/g, '/');
+}
+const KNOWN_EXTENSIONS = new Set();
+export function treatAsHtml(filename) {
+    if (KNOWN_EXTENSIONS.size === 0) {
+        const extraExts = (typeof process === 'object' && process.env?.VITE_EXTRA_EXTENSIONS) ||
+            import.meta.env?.VITE_EXTRA_EXTENSIONS ||
+            '';
+        ('3g2,3gp,aac,ai,apng,au,avif,bin,bmp,cer,class,conf,crl,css,csv,dll,' +
+            'doc,eps,epub,exe,gif,gz,ics,ief,jar,jpe,jpeg,jpg,js,json,jsonld,m4a,' +
+            'man,mid,midi,mjs,mov,mp2,mp3,mp4,mpe,mpeg,mpg,mpp,oga,ogg,ogv,ogx,' +
+            'opus,otf,p10,p7c,p7m,p7s,pdf,png,ps,qt,roff,rtf,rtx,ser,svg,t,tif,' +
+            'tiff,tr,ts,tsv,ttf,txt,vtt,wav,weba,webm,webp,woff,woff2,xhtml,xml,' +
+            'yaml,yml,zip' +
+            (extraExts && typeof extraExts === 'string' ? ',' + extraExts : ''))
+            .split(',')
+            .forEach((ext) => KNOWN_EXTENSIONS.add(ext));
+    }
+    const ext = filename.split('.').pop();
+    return ext == null || !KNOWN_EXTENSIONS.has(ext.toLowerCase());
+}
+// https://github.com/sindresorhus/escape-string-regexp/blob/ba9a4473850cb367936417e97f1f2191b7cc67dd/index.js
+export function escapeRegExp(str) {
+    return str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d');
+}

package/dist/client/theme-default/Layout.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { useRoute } from 'vitepress'
+import { computed, provide, useSlots, watch } from 'vue'
+import VPBackdrop from './components/VPBackdrop.vue'
+import VPContent from './components/VPContent.vue'
+import VPFooter from './components/VPFooter.vue'
+import VPLocalNav from './components/VPLocalNav.vue'
+import VPNav from './components/VPNav.vue'
+import VPSidebar from './components/VPSidebar.vue'
+import VPSkipLink from './components/VPSkipLink.vue'
+import { useData } from './composables/data'
+import { useCloseSidebarOnEscape, useSidebar } from './composables/sidebar'
+
+const {
+  isOpen: isSidebarOpen,
+  open: openSidebar,
+  close: closeSidebar
+} = useSidebar()
+
+const route = useRoute()
+watch(() => route.path, closeSidebar)
+
+useCloseSidebarOnEscape(isSidebarOpen, closeSidebar)
+
+const { frontmatter } = useData()
+
+const slots = useSlots()
+const heroImageSlotExists = computed(() => !!slots['home-hero-image'])
+
+provide('hero-image-slot-exists', heroImageSlotExists)
+</script>
+
+<template>
+  <div v-if="frontmatter.layout !== false" class="Layout" :class="frontmatter.pageClass" >
+    <slot name="layout-top" />
+    <VPSkipLink />
+    <VPBackdrop class="backdrop" :show="isSidebarOpen" @click="closeSidebar" />
+    <VPNav>
+      <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
+      <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
+      <template #nav-bar-content-before><slot name="nav-bar-content-before" /></template>
+      <template #nav-bar-content-after><slot name="nav-bar-content-after" /></template>
+      <template #nav-screen-content-before><slot name="nav-screen-content-before" /></template>
+      <template #nav-screen-content-after><slot name="nav-screen-content-after" /></template>
+    </VPNav>
+    <VPLocalNav :open="isSidebarOpen" @open-menu="openSidebar" />
+
+    <VPSidebar :open="isSidebarOpen">
+      <template #sidebar-nav-before><slot name="sidebar-nav-before" /></template>
+      <template #sidebar-nav-after><slot name="sidebar-nav-after" /></template>
+    </VPSidebar>
+
+    <VPContent>
+      <template #page-top><slot name="page-top" /></template>
+      <template #page-bottom><slot name="page-bottom" /></template>
+
+      <template #not-found><slot name="not-found" /></template>
+      <template #home-hero-before><slot name="home-hero-before" /></template>
+      <template #home-hero-info-before><slot name="home-hero-info-before" /></template>
+      <template #home-hero-info><slot name="home-hero-info" /></template>
+      <template #home-hero-info-after><slot name="home-hero-info-after" /></template>
+      <template #home-hero-actions-after><slot name="home-hero-actions-after" /></template>
+      <template #home-hero-image><slot name="home-hero-image" /></template>
+      <template #home-hero-after><slot name="home-hero-after" /></template>
+      <template #home-features-before><slot name="home-features-before" /></template>
+      <template #home-features-after><slot name="home-features-after" /></template>
+
+      <template #doc-footer-before><slot name="doc-footer-before" /></template>
+      <template #doc-before><slot name="doc-before" /></template>
+      <template #doc-after><slot name="doc-after" /></template>
+      <template #doc-top><slot name="doc-top" /></template>
+      <template #doc-bottom><slot name="doc-bottom" /></template>
+
+      <template #aside-top><slot name="aside-top" /></template>
+      <template #aside-bottom><slot name="aside-bottom" /></template>
+      <template #aside-outline-before><slot name="aside-outline-before" /></template>
+      <template #aside-outline-after><slot name="aside-outline-after" /></template>
+      <template #aside-ads-before><slot name="aside-ads-before" /></template>
+      <template #aside-ads-after><slot name="aside-ads-after" /></template>
+    </VPContent>
+
+    <VPFooter />
+    <slot name="layout-bottom" />
+  </div>
+  <Content v-else />
+</template>
+
+<style scoped>
+.Layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+</style>

package/dist/client/theme-default/NotFound.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { withBase } from 'vitepress'
+import { useData } from './composables/data'
+import { useLangs } from './composables/langs'
+
+const { site, theme } = useData()
+const { localeLinks } = useLangs({ removeCurrent: false })
+
+const root = ref('/')
+onMounted(() => {
+  const path = window.location.pathname
+    .replace(site.value.base, '')
+    .replace(/(^.*?\/).*$/, '/$1')
+  if (localeLinks.value.length) {
+    root.value =
+      localeLinks.value.find(({ link }) => link.startsWith(path))?.link ||
+      localeLinks.value[0].link
+  }
+})
+</script>
+
+<template>
+  <div class="NotFound">
+    <p class="code">{{ theme.notFound?.code ?? '404' }}</p>
+    <h1 class="title">{{ theme.notFound?.title ?? 'PAGE NOT FOUND' }}</h1>
+    <div class="divider" />
+    <blockquote class="quote">
+      {{
+        theme.notFound?.quote ??
+        "But if you don't change your direction, and if you keep looking, you may end up where you are heading."
+      }}
+    </blockquote>
+
+    <div class="action">
+      <a
+        class="link"
+        :href="withBase(root)"
+        :aria-label="theme.notFound?.linkLabel ?? 'go to home'"
+      >
+        {{ theme.notFound?.linkText ?? 'Take me home' }}
+      </a>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.NotFound {
+  padding: 64px 24px 96px;
+  text-align: center;
+}
+
+@media (min-width: 768px) {
+  .NotFound {
+    padding: 96px 32px 168px;
+  }
+}
+
+.code {
+  line-height: 64px;
+  font-size: 64px;
+  font-weight: 600;
+}
+
+.title {
+  padding-top: 12px;
+  letter-spacing: 2px;
+  line-height: 20px;
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.divider {
+  margin: 24px auto 18px;
+  width: 64px;
+  height: 1px;
+  background-color: var(--vp-c-divider);
+}
+
+.quote {
+  margin: 0 auto;
+  max-width: 256px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.action {
+  padding-top: 20px;
+}
+
+.link {
+  display: inline-block;
+  border: 1px solid var(--vp-c-brand-1);
+  border-radius: 16px;
+  padding: 3px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
+  transition:
+    border-color 0.25s,
+    color 0.25s;
+}
+
+.link:hover {
+  border-color: var(--vp-c-brand-2);
+  color: var(--vp-c-brand-2);
+}
+</style>

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

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import docsearch from '@docsearch/js'
+import { useRoute, useRouter } from 'vitepress'
+import type { DefaultTheme } from 'vitepress/theme'
+import { nextTick, onMounted, watch } from 'vue'
+import { useData } from '../composables/data'
+
+const props = defineProps<{
+  algolia: DefaultTheme.AlgoliaSearchOptions
+}>()
+
+const router = useRouter()
+const route = useRoute()
+const { site, localeIndex, lang } = useData()
+
+type DocSearchProps = Parameters<typeof docsearch>[0]
+
+onMounted(update)
+watch(localeIndex, update)
+
+async function update() {
+  await nextTick()
+  const options = {
+    ...props.algolia,
+    ...props.algolia.locales?.[localeIndex.value]
+  }
+  const rawFacetFilters = options.searchParameters?.facetFilters ?? []
+  const facetFilters = [
+    ...(Array.isArray(rawFacetFilters)
+      ? rawFacetFilters
+      : [rawFacetFilters]
+    ).filter((f) => !f.startsWith('lang:')),
+    `lang:${lang.value}`
+  ]
+  initialize({
+    ...options,
+    searchParameters: {
+      ...options.searchParameters,
+      facetFilters
+    }
+  })
+}
+
+function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
+  const options = Object.assign<
+    {},
+    DefaultTheme.AlgoliaSearchOptions,
+    Partial<DocSearchProps>
+  >({}, userOptions, {
+    container: '#docsearch',
+
+    navigator: {
+      navigate({ itemUrl }) {
+        const { pathname: hitPathname } = new URL(
+          window.location.origin + itemUrl
+        )
+
+        // router doesn't handle same-page navigation so we use the native
+        // browser location API for anchor navigation
+        if (route.path === hitPathname) {
+          window.location.assign(window.location.origin + itemUrl)
+        } else {
+          router.go(itemUrl)
+        }
+      }
+    },
+
+    transformItems(items) {
+      return items.map((item) => {
+        return Object.assign({}, item, {
+          url: getRelativePath(item.url)
+        })
+      })
+    },
+
+    hitComponent({ hit, children }) {
+      return {
+        __v: null,
+        type: 'a',
+        ref: undefined,
+        constructor: undefined,
+        key: undefined,
+        props: { href: hit.url, children }
+      }
+    }
+  }) as DocSearchProps
+
+  docsearch(options)
+}
+
+function getRelativePath(url: string) {
+  const { pathname, hash } = new URL(url, location.origin)
+  return pathname.replace(/\.html$/, site.value.cleanUrls ? '' : '.html') + hash
+}
+</script>
+
+<template>
+  <div id="docsearch" />
+</template>

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

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+defineProps<{
+  show: boolean
+}>()
+</script>
+
+<template>
+  <transition name="fade">
+    <div v-if="show" class="VPBackdrop" />
+  </transition>
+</template>
+
+<style scoped>
+.VPBackdrop {
+  position: fixed;
+  top: 0;
+  /*rtl:ignore*/
+  right: 0;
+  bottom: 0;
+  /*rtl:ignore*/
+  left: 0;
+  z-index: var(--vp-z-index-backdrop);
+  background: var(--vp-backdrop-bg-color);
+  transition: opacity 0.5s;
+}
+
+.VPBackdrop.fade-enter-from,
+.VPBackdrop.fade-leave-to {
+  opacity: 0;
+}
+
+.VPBackdrop.fade-leave-active {
+  transition-duration: .25s;
+}
+
+@media (min-width: 1280px) {
+  .VPBackdrop {
+    display: none;
+  }
+}
+</style>

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

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+interface Props {
+  text?: string
+  type?: 'info' | 'tip' | 'warning' | 'danger'
+}
+withDefaults(defineProps<Props>(), {
+  type: 'tip'
+})
+</script>
+
+<template>
+  <span class="VPBadge" :class="type">
+    <slot>{{ text }}</slot>
+  </span>
+</template>
+
+<style>
+.VPBadge {
+  display: inline-block;
+  margin-left: 2px;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  padding: 0 10px;
+  line-height: 22px;
+  font-size: 12px;
+  font-weight: 500;
+  transform: translateY(-2px);
+}
+
+.VPBadge.small {
+  padding: 0 6px;
+  line-height: 18px;
+  font-size: 10px;
+  transform: translateY(-8px);
+}
+
+.VPDocFooter .VPBadge {
+  display: none;
+}
+
+.vp-doc h1 > .VPBadge {
+  margin-top: 4px;
+  vertical-align: top;
+}
+
+.vp-doc h2 > .VPBadge {
+  margin-top: 3px;
+  padding: 0 8px;
+  vertical-align: top;
+}
+
+.vp-doc h3 > .VPBadge {
+  vertical-align: middle;
+}
+
+.vp-doc h4 > .VPBadge,
+.vp-doc h5 > .VPBadge,
+.vp-doc h6 > .VPBadge {
+  vertical-align: middle;
+  line-height: 18px;
+}
+
+.VPBadge.info {
+  border-color: var(--vp-badge-info-border);
+  color: var(--vp-badge-info-text);
+  background-color: var(--vp-badge-info-bg);
+}
+
+.VPBadge.tip {
+  border-color: var(--vp-badge-tip-border);
+  color: var(--vp-badge-tip-text);
+  background-color: var(--vp-badge-tip-bg);
+}
+
+.VPBadge.warning {
+  border-color: var(--vp-badge-warning-border);
+  color: var(--vp-badge-warning-text);
+  background-color: var(--vp-badge-warning-bg);
+}
+
+.VPBadge.danger {
+  border-color: var(--vp-badge-danger-border);
+  color: var(--vp-badge-danger-text);
+  background-color: var(--vp-badge-danger-bg);
+}
+</style>

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

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { normalizeLink } from '../support/utils'
+import { EXTERNAL_URL_RE } from '../../shared'
+
+interface Props {
+  tag?: string
+  size?: 'medium' | 'big'
+  theme?: 'brand' | 'alt' | 'sponsor'
+  text: string
+  href?: string
+  target?: string;
+  rel?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  size: 'medium',
+  theme: 'brand'
+})
+
+const isExternal = computed(
+  () => props.href && EXTERNAL_URL_RE.test(props.href)
+)
+
+const component = computed(() => {
+  return props.tag || props.href ? 'a' : 'button'
+})
+</script>
+
+<template>
+  <component
+    :is="component"
+    class="VPButton"
+    :class="[size, theme]"
+    :href="href ? normalizeLink(href) : undefined"
+    :target="props.target ?? (isExternal ? '_blank' : undefined)"
+    :rel="props.rel ?? (isExternal ? 'noreferrer' : undefined)"
+  >
+    {{ text }}
+  </component>
+</template>
+
+<style scoped>
+.VPButton {
+  display: inline-block;
+  border: 1px solid transparent;
+  text-align: center;
+  font-weight: 600;
+  white-space: nowrap;
+  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
+}
+
+.VPButton:active {
+  transition: color 0.1s, border-color 0.1s, background-color 0.1s;
+}
+
+.VPButton.medium {
+  border-radius: 20px;
+  padding: 0 20px;
+  line-height: 38px;
+  font-size: 14px;
+}
+
+.VPButton.big {
+  border-radius: 24px;
+  padding: 0 24px;
+  line-height: 46px;
+  font-size: 16px;
+}
+
+.VPButton.brand {
+  border-color: var(--vp-button-brand-border);
+  color: var(--vp-button-brand-text);
+  background-color: var(--vp-button-brand-bg);
+}
+
+.VPButton.brand:hover {
+  border-color: var(--vp-button-brand-hover-border);
+  color: var(--vp-button-brand-hover-text);
+  background-color: var(--vp-button-brand-hover-bg);
+}
+
+.VPButton.brand:active {
+  border-color: var(--vp-button-brand-active-border);
+  color: var(--vp-button-brand-active-text);
+  background-color: var(--vp-button-brand-active-bg);
+}
+
+.VPButton.alt {
+  border-color: var(--vp-button-alt-border);
+  color: var(--vp-button-alt-text);
+  background-color: var(--vp-button-alt-bg);
+}
+
+.VPButton.alt:hover {
+  border-color: var(--vp-button-alt-hover-border);
+  color: var(--vp-button-alt-hover-text);
+  background-color: var(--vp-button-alt-hover-bg);
+}
+
+.VPButton.alt:active {
+  border-color: var(--vp-button-alt-active-border);
+  color: var(--vp-button-alt-active-text);
+  background-color: var(--vp-button-alt-active-bg);
+}
+
+.VPButton.sponsor {
+  border-color: var(--vp-button-sponsor-border);
+  color: var(--vp-button-sponsor-text);
+  background-color: var(--vp-button-sponsor-bg);
+}
+
+.VPButton.sponsor:hover {
+  border-color: var(--vp-button-sponsor-hover-border);
+  color: var(--vp-button-sponsor-hover-text);
+  background-color: var(--vp-button-sponsor-hover-bg);
+}
+
+.VPButton.sponsor:active {
+  border-color: var(--vp-button-sponsor-active-border);
+  color: var(--vp-button-sponsor-active-text);
+  background-color: var(--vp-button-sponsor-active-bg);
+}
+</style>