themekit-js 1.1.0

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

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import { useData } from '../composables/data'
+import VPNavBarMenuLink from './VPNavBarMenuLink.vue'
+import VPNavBarMenuGroup from './VPNavBarMenuGroup.vue'
+
+const { theme } = useData()
+</script>
+
+<template>
+  <nav v-if="theme.nav" aria-labelledby="main-nav-aria-label" class="VPNavBarMenu">
+    <span id="main-nav-aria-label" class="visually-hidden">Main Navigation</span>
+    <template v-for="item in theme.nav" :key="item.text">
+      <VPNavBarMenuLink v-if="'link' in item" :item="item" />
+      <VPNavBarMenuGroup v-else :item="item" />
+    </template>
+  </nav>
+</template>
+
+<style scoped>
+.VPNavBarMenu {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .VPNavBarMenu {
+    display: flex;
+  }
+}
+</style>

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

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import type { DefaultTheme } from 'vitepress/theme'
+import { computed } from 'vue'
+import { useData } from '../composables/data'
+import { isActive } from '../../shared'
+import VPFlyout from './VPFlyout.vue'
+
+const props = defineProps<{
+  item: DefaultTheme.NavItemWithChildren
+}>()
+
+const { page } = useData()
+
+const isChildActive = (navItem: DefaultTheme.NavItem) => {
+  if ('link' in navItem) {
+    return isActive(
+      page.value.relativePath,
+      navItem.link,
+      !!props.item.activeMatch
+    )
+  } else {
+    return navItem.items.some(isChildActive)
+  }
+}
+
+const childrenActive = computed(() => isChildActive(props.item))
+</script>
+
+<template>
+  <VPFlyout
+    :class="{
+      VPNavBarMenuGroup: true,
+      active: isActive(
+        page.relativePath,
+        item.activeMatch,
+        !!item.activeMatch
+      ) || childrenActive
+    }"
+    :button="item.text"
+    :items="item.items"
+  />
+</template>

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

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import type { DefaultTheme } from 'vitepress/theme'
+import { useData } from '../composables/data'
+import { isActive } from '../../shared'
+import VPLink from './VPLink.vue'
+
+defineProps<{
+  item: DefaultTheme.NavItemWithLink
+}>()
+
+const { page } = useData()
+</script>
+
+<template>
+  <VPLink
+    :class="{
+      VPNavBarMenuLink: true,
+      active: isActive(
+        page.relativePath,
+        item.activeMatch || item.link,
+        !!item.activeMatch
+      )
+    }"
+    :href="item.link"
+    :noIcon="item.noIcon"
+    :target="item.target"
+    :rel="item.rel"
+    tabindex="0"
+  >
+    <span v-html="item.text"></span>
+  </VPLink>
+</template>
+
+<style scoped>
+.VPNavBarMenuLink {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  line-height: var(--vp-nav-height);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+.VPNavBarMenuLink.active {
+  color: var(--vp-c-brand-1);
+}
+
+.VPNavBarMenuLink:hover {
+  color: var(--vp-c-brand-1);
+}
+</style>

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

@@ -0,0 +1,194 @@
+<script lang="ts" setup>
+import '@docsearch/css'
+import { onKeyStroke } from '@vueuse/core'
+import {
+  defineAsyncComponent,
+  onMounted,
+  onUnmounted,
+  ref
+} from 'vue'
+import type { DefaultTheme } from '../../shared'
+import { useData } from '../composables/data'
+import VPNavBarSearchButton from './VPNavBarSearchButton.vue'
+
+const VPLocalSearchBox = __VP_LOCAL_SEARCH__
+  ? defineAsyncComponent(() => import('./VPLocalSearchBox.vue'))
+  : () => null
+
+const VPAlgoliaSearchBox = __ALGOLIA__
+  ? defineAsyncComponent(() => import('./VPAlgoliaSearchBox.vue'))
+  : () => null
+
+const { theme } = useData()
+
+// to avoid loading the docsearch js upfront (which is more than 1/3 of the
+// payload), we delay initializing it until the user has actually clicked or
+// hit the hotkey to invoke it.
+const loaded = ref(false)
+const actuallyLoaded = ref(false)
+
+const preconnect = () => {
+  const id = 'VPAlgoliaPreconnect'
+
+  const rIC = window.requestIdleCallback || setTimeout
+  rIC(() => {
+    const preconnect = document.createElement('link')
+    preconnect.id = id
+    preconnect.rel = 'preconnect'
+    preconnect.href = `https://${
+      ((theme.value.search?.options as DefaultTheme.AlgoliaSearchOptions) ??
+        theme.value.algolia)!.appId
+    }-dsn.algolia.net`
+    preconnect.crossOrigin = ''
+    document.head.appendChild(preconnect)
+  })
+}
+
+onMounted(() => {
+  if (!__ALGOLIA__) {
+    return
+  }
+
+  preconnect()
+
+  const handleSearchHotKey = (event: KeyboardEvent) => {
+    if (
+      (event.key.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey)) ||
+      (!isEditingContent(event) && event.key === '/')
+    ) {
+      event.preventDefault()
+      load()
+      remove()
+    }
+  }
+
+  const remove = () => {
+    window.removeEventListener('keydown', handleSearchHotKey)
+  }
+
+  window.addEventListener('keydown', handleSearchHotKey)
+
+  onUnmounted(remove)
+})
+
+function load() {
+  if (!loaded.value) {
+    loaded.value = true
+    setTimeout(poll, 16)
+  }
+}
+
+function poll() {
+  // programmatically open the search box after initialize
+  const e = new Event('keydown') as any
+
+  e.key = 'k'
+  e.metaKey = true
+
+  window.dispatchEvent(e)
+
+  setTimeout(() => {
+    if (!document.querySelector('.DocSearch-Modal')) {
+      poll()
+    }
+  }, 16)
+}
+
+function isEditingContent(event: KeyboardEvent): boolean {
+  const element = event.target as HTMLElement
+  const tagName = element.tagName
+
+  return (
+    element.isContentEditable ||
+    tagName === 'INPUT' ||
+    tagName === 'SELECT' ||
+    tagName === 'TEXTAREA'
+  )
+}
+
+// Local search
+
+const showSearch = ref(false)
+
+if (__VP_LOCAL_SEARCH__) {
+  onKeyStroke('k', (event) => {
+    if (event.ctrlKey || event.metaKey) {
+      event.preventDefault()
+      showSearch.value = true
+    }
+  })
+
+  onKeyStroke('/', (event) => {
+    if (!isEditingContent(event)) {
+      event.preventDefault()
+      showSearch.value = true
+    }
+  })
+}
+
+const provider = __ALGOLIA__ ? 'algolia' : __VP_LOCAL_SEARCH__ ? 'local' : ''
+</script>
+
+<template>
+  <div class="VPNavBarSearch">
+    <template v-if="provider === 'local'">
+      <VPLocalSearchBox
+        v-if="showSearch"
+        @close="showSearch = false"
+      />
+
+      <div id="local-search">
+        <VPNavBarSearchButton @click="showSearch = true" />
+      </div>
+    </template>
+
+    <template v-else-if="provider === 'algolia'">
+      <VPAlgoliaSearchBox
+        v-if="loaded"
+        :algolia="theme.search?.options ?? theme.algolia"
+        @vue:beforeMount="actuallyLoaded = true"
+      />
+
+      <div v-if="!actuallyLoaded" id="docsearch">
+        <VPNavBarSearchButton @click="load" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<style>
+.VPNavBarSearch {
+  display: flex;
+  align-items: center;
+}
+
+@media (min-width: 768px) {
+  .VPNavBarSearch {
+    flex-grow: 1;
+    padding-left: 24px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPNavBarSearch {
+    padding-left: 32px;
+  }
+}
+
+.dark .DocSearch-Footer {
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.DocSearch-Form {
+  border: 1px solid var(--vp-c-brand-1);
+  background-color: var(--vp-c-white);
+}
+
+.dark .DocSearch-Form {
+  background-color: var(--vp-c-default-soft);
+}
+
+.DocSearch-Screen-Icon > svg {
+  margin: auto;
+}
+</style>

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

@@ -0,0 +1,208 @@
+<script lang="ts" setup>
+import type { ButtonTranslations } from '../../../../types/local-search'
+import { createSearchTranslate } from '../support/translation'
+
+// Button-Translations
+const defaultTranslations: { button: ButtonTranslations } = {
+  button: {
+    buttonText: 'Search',
+    buttonAriaLabel: 'Search'
+  }
+}
+
+const translate = createSearchTranslate(defaultTranslations)
+</script>
+
+<template>
+  <button type="button" class="DocSearch DocSearch-Button" :aria-label="translate('button.buttonAriaLabel')">
+    <span class="DocSearch-Button-Container">
+      <span class="vp-icon DocSearch-Search-Icon"></span>
+      <span class="DocSearch-Button-Placeholder">{{ translate('button.buttonText') }}</span>
+    </span>
+    <span class="DocSearch-Button-Keys">
+      <kbd class="DocSearch-Button-Key"></kbd>
+      <kbd class="DocSearch-Button-Key">K</kbd>
+    </span>
+  </button>
+</template>
+
+<style>
+[class*='DocSearch'] {
+  --docsearch-primary-color: var(--vp-c-brand-1);
+  --docsearch-highlight-color: var(--docsearch-primary-color);
+  --docsearch-text-color: var(--vp-c-text-1);
+  --docsearch-muted-color: var(--vp-c-text-2);
+  --docsearch-searchbox-shadow: none;
+  --docsearch-searchbox-background: transparent;
+  --docsearch-searchbox-focus-background: transparent;
+  --docsearch-key-gradient: transparent;
+  --docsearch-key-shadow: none;
+  --docsearch-modal-background: var(--vp-c-bg-soft);
+  --docsearch-footer-background: var(--vp-c-bg);
+}
+
+.dark [class*='DocSearch'] {
+  --docsearch-modal-shadow: none;
+  --docsearch-footer-shadow: none;
+  --docsearch-logo-color: var(--vp-c-text-2);
+  --docsearch-hit-background: var(--vp-c-default-soft);
+  --docsearch-hit-color: var(--vp-c-text-2);
+  --docsearch-hit-shadow: none;
+}
+
+.DocSearch-Button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  width: 48px;
+  height: 55px;
+  background: transparent;
+  transition: border-color 0.25s;
+}
+
+.DocSearch-Button:hover {
+  background: transparent;
+}
+
+.DocSearch-Button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.DocSearch-Button:focus:not(:focus-visible) {
+  outline: none !important;
+}
+
+@media (min-width: 768px) {
+  .DocSearch-Button {
+    justify-content: flex-start;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    padding: 0 10px 0 12px;
+    width: 100%;
+    height: 40px;
+    background-color: var(--vp-c-bg-alt);
+  }
+
+  .DocSearch-Button:hover {
+    border-color: var(--vp-c-brand-1);
+    background: var(--vp-c-bg-alt);
+  }
+}
+
+.DocSearch-Button .DocSearch-Button-Container {
+  display: flex;
+  align-items: center;
+}
+
+.DocSearch-Button .DocSearch-Search-Icon {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  color: var(--vp-c-text-1);
+  fill: currentColor;
+  transition: color 0.5s;
+}
+
+.DocSearch-Button:hover .DocSearch-Search-Icon {
+  color: var(--vp-c-text-1);
+}
+
+@media (min-width: 768px) {
+  .DocSearch-Button .DocSearch-Search-Icon {
+    top: 1px;
+    margin-right: 8px;
+    width: 14px;
+    height: 14px;
+    color: var(--vp-c-text-2);
+  }
+}
+
+.DocSearch-Button .DocSearch-Button-Placeholder {
+  display: none;
+  margin-top: 2px;
+  padding: 0 16px 0 0;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  transition: color 0.5s;
+}
+
+.DocSearch-Button:hover .DocSearch-Button-Placeholder {
+  color: var(--vp-c-text-1);
+}
+
+@media (min-width: 768px) {
+  .DocSearch-Button .DocSearch-Button-Placeholder {
+    display: inline-block;
+  }
+}
+
+.DocSearch-Button .DocSearch-Button-Keys {
+  /*rtl:ignore*/
+  direction: ltr;
+  display: none;
+  min-width: auto;
+}
+
+@media (min-width: 768px) {
+  .DocSearch-Button .DocSearch-Button-Keys {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.DocSearch-Button .DocSearch-Button-Key {
+  display: block;
+  margin: 2px 0 0 0;
+  border: 1px solid var(--vp-c-divider);
+  /*rtl:begin:ignore*/
+  border-right: none;
+  border-radius: 4px 0 0 4px;
+  padding-left: 6px;
+  /*rtl:end:ignore*/
+  min-width: 0;
+  width: auto;
+  height: 22px;
+  line-height: 22px;
+  font-family: var(--vp-font-family-base);
+  font-size: 12px;
+  font-weight: 500;
+  transition: color 0.5s, border-color 0.5s;
+}
+
+.DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
+  /*rtl:begin:ignore*/
+  border-right: 1px solid var(--vp-c-divider);
+  border-left: none;
+  border-radius: 0 4px 4px 0;
+  padding-left: 2px;
+  padding-right: 6px;
+  /*rtl:end:ignore*/
+}
+
+.DocSearch-Button .DocSearch-Button-Key:first-child {
+  font-size: 0 !important;
+}
+
+.DocSearch-Button .DocSearch-Button-Key:first-child:after {
+  content: 'Ctrl';
+  font-size: 12px;
+  letter-spacing: normal;
+  color: var(--docsearch-muted-color);
+}
+
+.mac .DocSearch-Button .DocSearch-Button-Key:first-child:after {
+  content: '\2318';
+}
+
+.DocSearch-Button .DocSearch-Button-Key:first-child > * {
+  display: none;
+}
+
+.DocSearch-Search-Icon {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke-width='1.6' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='m14.386 14.386 4.088 4.088-4.088-4.088A7.533 7.533 0 1 1 3.733 3.733a7.533 7.533 0 0 1 10.653 10.653z'/%3E%3C/svg%3E");
+}
+</style>

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

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { useData } from '../composables/data'
+import VPSocialLinks from './VPSocialLinks.vue'
+
+const { theme } = useData()
+</script>
+
+<template>
+  <VPSocialLinks
+    v-if="theme.socialLinks"
+    class="VPNavBarSocialLinks"
+    :links="theme.socialLinks"
+  />
+</template>
+
+<style scoped>
+.VPNavBarSocialLinks {
+  display: none;
+}
+
+@media (min-width: 1280px) {
+  .VPNavBarSocialLinks {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

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

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData } from '../composables/data'
+import { useLangs } from '../composables/langs'
+import { useSidebar } from '../composables/sidebar'
+import { normalizeLink } from '../support/utils'
+import VPImage from './VPImage.vue'
+
+const { site, theme } = useData()
+const { hasSidebar } = useSidebar()
+const { currentLang } = useLangs()
+
+const link = computed(() =>
+  typeof theme.value.logoLink === 'string'
+    ? theme.value.logoLink
+    : theme.value.logoLink?.link
+)
+
+const rel = computed(() =>
+  typeof theme.value.logoLink === 'string'
+    ? undefined
+    : theme.value.logoLink?.rel
+)
+
+const target = computed(() =>
+  typeof theme.value.logoLink === 'string'
+    ? undefined
+    : theme.value.logoLink?.target
+)
+</script>
+
+<template>
+  <div class="VPNavBarTitle" :class="{ 'has-sidebar': hasSidebar }">
+    <a
+      class="title"
+      :href="link ?? normalizeLink(currentLang.link)"
+      :rel="rel"
+      :target="target"
+    >
+      <slot name="nav-bar-title-before" />
+      <VPImage v-if="theme.logo" class="logo" :image="theme.logo" />
+      <template v-if="theme.siteTitle"><span>{{ theme.siteTitle }}</span></template>
+      <template v-else-if="theme.siteTitle === undefined"><span>{{ site.title }}</span></template>
+      <slot name="nav-bar-title-after" />
+    </a>
+  </div>
+</template>
+
+<style scoped>
+.title {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid transparent;
+  width: 100%;
+  height: var(--vp-nav-height);
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  transition: opacity 0.25s;
+}
+
+@media (min-width: 960px) {
+  .title {
+    flex-shrink: 0;
+  }
+
+  .VPNavBarTitle.has-sidebar .title {
+    border-bottom-color: var(--vp-c-divider);
+  }
+}
+
+:deep(.logo) {
+  margin-right: 8px;
+  height: var(--vp-nav-logo-height);
+}
+</style>

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

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import VPFlyout from './VPFlyout.vue'
+import VPMenuLink from './VPMenuLink.vue'
+import { useData } from '../composables/data'
+import { useLangs } from '../composables/langs'
+
+const { theme } = useData()
+const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
+</script>
+
+<template>
+  <VPFlyout
+    v-if="localeLinks.length && currentLang.label"
+    class="VPNavBarTranslations"
+    icon="vpi-languages"
+    :label="theme.langMenuLabel || 'Change language'"
+  >
+    <div class="items">
+      <p class="title">{{ currentLang.label }}</p>
+
+      <template v-for="locale in localeLinks" :key="locale.link">
+        <VPMenuLink :item="locale" />
+      </template>
+    </div>
+  </VPFlyout>
+</template>
+
+<style scoped>
+.VPNavBarTranslations {
+  display: none;
+}
+
+@media (min-width: 1280px) {
+  .VPNavBarTranslations {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.title {
+  padding: 0 24px 0 12px;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+}
+</style>