themekit-js 1.1.0

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

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData } from '../composables/data'
+import { useEditLink } from '../composables/edit-link'
+import { usePrevNext } from '../composables/prev-next'
+import VPLink from './VPLink.vue'
+import VPDocFooterLastUpdated from './VPDocFooterLastUpdated.vue'
+
+const { theme, page, frontmatter } = useData()
+
+const editLink = useEditLink()
+const control = usePrevNext()
+
+const hasEditLink = computed(() => {
+  return theme.value.editLink && frontmatter.value.editLink !== false
+})
+const hasLastUpdated = computed(() => {
+  return page.value.lastUpdated && frontmatter.value.lastUpdated !== false
+})
+const showFooter = computed(() => {
+  return hasEditLink.value || hasLastUpdated.value || control.value.prev || control.value.next
+})
+</script>
+
+<template>
+  <footer v-if="showFooter" class="VPDocFooter">
+    <slot name="doc-footer-before" />
+
+    <div v-if="hasEditLink || hasLastUpdated" class="edit-info">
+      <div v-if="hasEditLink" class="edit-link">
+        <VPLink class="edit-link-button" :href="editLink.url" :no-icon="true">
+          <span class="vpi-square-pen edit-link-icon" />
+          {{ editLink.text }}
+        </VPLink>
+      </div>
+
+      <div v-if="hasLastUpdated" class="last-updated">
+        <VPDocFooterLastUpdated />
+      </div>
+    </div>
+
+    <nav v-if="control.prev?.link || control.next?.link" class="prev-next">
+      <div class="pager">
+        <VPLink v-if="control.prev?.link" class="pager-link prev" :href="control.prev.link">
+          <span class="desc" v-html="theme.docFooter?.prev || 'Previous page'"></span>
+          <span class="title" v-html="control.prev.text"></span>
+        </VPLink>
+      </div>
+      <div class="pager">
+        <VPLink v-if="control.next?.link" class="pager-link next" :href="control.next.link">
+          <span class="desc" v-html="theme.docFooter?.next || 'Next page'"></span>
+          <span class="title" v-html="control.next.text"></span>
+        </VPLink>
+      </div>
+    </nav>
+  </footer>
+</template>
+
+<style scoped>
+.VPDocFooter {
+  margin-top: 64px;
+}
+
+.edit-info {
+  padding-bottom: 18px;
+}
+
+@media (min-width: 640px) {
+  .edit-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 14px;
+  }
+}
+
+.edit-link-button {
+  display: flex;
+  align-items: center;
+  border: 0;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
+  transition: color 0.25s;
+}
+
+.edit-link-button:hover {
+  color: var(--vp-c-brand-2);
+}
+
+.edit-link-icon {
+  margin-right: 8px;
+}
+
+.prev-next {
+  border-top: 1px solid var(--vp-c-divider);
+  padding-top: 24px;
+  display: grid;
+  grid-row-gap: 8px;
+}
+
+@media (min-width: 640px) {
+  .prev-next {
+    grid-template-columns: repeat(2, 1fr);
+    grid-column-gap: 16px;
+  }
+}
+
+.pager-link {
+  display: block;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 11px 16px 13px;
+  width: 100%;
+  height: 100%;
+  transition: border-color 0.25s;
+}
+
+.pager-link:hover {
+  border-color: var(--vp-c-brand-1);
+}
+
+.pager-link.next {
+  margin-left: auto;
+  text-align: right;
+}
+
+.desc {
+  display: block;
+  line-height: 20px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.title {
+  display: block;
+  line-height: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
+  transition: color 0.25s;
+}
+</style>

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

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref, computed, watchEffect, onMounted } from 'vue'
+import { useData } from '../composables/data'
+
+const { theme, page, frontmatter, lang } = useData()
+
+const date = computed(
+  () => new Date(frontmatter.value.lastUpdated ?? page.value.lastUpdated)
+)
+const isoDatetime = computed(() => date.value.toISOString())
+const datetime = ref('')
+
+// set time on mounted hook to avoid hydration mismatch due to
+// potential differences in timezones of the server and clients
+onMounted(() => {
+  watchEffect(() => {
+    datetime.value = new Intl.DateTimeFormat(
+      theme.value.lastUpdated?.formatOptions?.forceLocale ? lang.value : undefined,
+      theme.value.lastUpdated?.formatOptions ?? {
+        dateStyle: 'short',
+        timeStyle: 'short'
+      }
+    ).format(date.value)
+  })
+})
+</script>
+
+<template>
+  <p class="VPLastUpdated">
+    {{ theme.lastUpdated?.text || theme.lastUpdatedText || 'Last updated' }}:
+    <time :datetime="isoDatetime">{{ datetime }}</time>
+  </p>
+</template>
+
+<style scoped>
+.VPLastUpdated {
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+@media (min-width: 640px) {
+  .VPLastUpdated {
+    line-height: 32px;
+    font-size: 14px;
+    font-weight: 500;
+  }
+}
+</style>

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

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { MenuItem } from '../composables/outline'
+
+defineProps<{
+  headers: MenuItem[]
+  root?: boolean
+}>()
+
+function onClick({ target: el }: Event) {
+  const id = (el as HTMLAnchorElement).href!.split('#')[1]
+  const heading = document.getElementById(decodeURIComponent(id))
+  heading?.focus({ preventScroll: true })
+}
+</script>
+
+<template>
+  <ul class="VPDocOutlineItem" :class="root ? 'root' : 'nested'">
+    <li v-for="{ children, link, title } in headers">
+      <a class="outline-link" :href="link" @click="onClick" :title="title">{{ title }}</a>
+      <template v-if="children?.length">
+        <VPDocOutlineItem :headers="children" />
+      </template>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.root {
+  position: relative;
+  z-index: 1;
+}
+
+.nested {
+  padding-right: 16px;
+  padding-left: 16px;
+}
+
+.outline-link {
+  display: block;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--vp-c-text-2);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color 0.5s;
+}
+
+.outline-link:hover,
+.outline-link.active {
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+.outline-link.nested {
+  padding-left: 13px;
+}
+</style>

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

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import type { DefaultTheme } from 'vitepress/theme'
+import VPImage from './VPImage.vue'
+import VPLink from './VPLink.vue'
+
+defineProps<{
+  icon?: DefaultTheme.FeatureIcon
+  title: string
+  details?: string
+  link?: string
+  linkText?: string
+  rel?: string
+  target?: string
+}>()
+</script>
+
+<template>
+  <VPLink
+    class="VPFeature"
+    :href="link"
+    :rel="rel"
+    :target="target"
+    :no-icon="true"
+    :tag="link ? 'a' : 'div'"
+  >
+    <article class="box">
+      <div v-if="typeof icon === 'object' && icon.wrap" class="icon">
+        <VPImage
+          :image="icon"
+          :alt="icon.alt"
+          :height="icon.height || 48"
+          :width="icon.width || 48"
+        />
+      </div>
+      <VPImage
+        v-else-if="typeof icon === 'object'"
+        :image="icon"
+        :alt="icon.alt"
+        :height="icon.height || 48"
+        :width="icon.width || 48"
+      />
+      <div v-else-if="icon" class="icon" v-html="icon"></div>
+      <h2 class="title" v-html="title"></h2>
+      <p v-if="details" class="details" v-html="details"></p>
+
+      <div v-if="linkText" class="link-text">
+        <p class="link-text-value">
+          {{ linkText }} <span class="vpi-arrow-right link-text-icon" />
+        </p>
+      </div>
+    </article>
+  </VPLink>
+</template>
+
+<style scoped>
+.VPFeature {
+  display: block;
+  border: 1px solid var(--vp-c-bg-soft);
+  border-radius: 12px;
+  height: 100%;
+  background-color: var(--vp-c-bg-soft);
+  transition: border-color 0.25s, background-color 0.25s;
+}
+
+.VPFeature.link:hover {
+  border-color: var(--vp-c-brand-1);
+}
+
+.box {
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  height: 100%;
+}
+
+.box > :deep(.VPImage) {
+  margin-bottom: 20px;
+}
+
+.icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+  border-radius: 6px;
+  background-color: var(--vp-c-default-soft);
+  width: 48px;
+  height: 48px;
+  font-size: 24px;
+  transition: background-color 0.25s;
+}
+
+.title {
+  line-height: 24px;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.details {
+  flex-grow: 1;
+  padding-top: 8px;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.link-text {
+  padding-top: 8px;
+}
+
+.link-text-value {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
+}
+
+.link-text-icon {
+  margin-left: 6px;
+}
+</style>

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

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import type { DefaultTheme } from 'vitepress/theme'
+import { computed } from 'vue'
+import VPFeature from './VPFeature.vue'
+
+export interface Feature {
+  icon?: DefaultTheme.FeatureIcon
+  title: string
+  details: string
+  link?: string
+  linkText?: string
+  rel?: string
+  target?: string
+}
+
+const props = defineProps<{
+  features: Feature[]
+}>()
+
+const grid = computed(() => {
+  const length = props.features.length
+
+  if (!length) {
+    return
+  } else if (length === 2) {
+    return 'grid-2'
+  } else if (length === 3) {
+    return 'grid-3'
+  } else if (length % 3 === 0) {
+    return 'grid-6'
+  } else if (length > 3) {
+    return 'grid-4'
+  }
+})
+</script>
+
+<template>
+  <div v-if="features" class="VPFeatures">
+    <div class="container">
+      <div class="items">
+        <div
+          v-for="feature in features"
+          :key="feature.title"
+          class="item"
+          :class="[grid]"
+        >
+          <VPFeature
+            :icon="feature.icon"
+            :title="feature.title"
+            :details="feature.details"
+            :link="feature.link"
+            :link-text="feature.linkText"
+            :rel="feature.rel"
+            :target="feature.target"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.VPFeatures {
+  position: relative;
+  padding: 0 24px;
+}
+
+@media (min-width: 640px) {
+  .VPFeatures {
+    padding: 0 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPFeatures {
+    padding: 0 64px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 1152px;
+}
+
+.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/VPFlyout.vue

@@ -0,0 +1,136 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useFlyout } from '../composables/flyout'
+import VPMenu from './VPMenu.vue'
+
+defineProps<{
+  icon?: string
+  button?: string
+  label?: string
+  items?: any[]
+}>()
+
+const open = ref(false)
+const el = ref<HTMLElement>()
+
+useFlyout({ el, onBlur })
+
+function onBlur() {
+  open.value = false
+}
+</script>
+
+<template>
+  <div
+    class="VPFlyout"
+    ref="el"
+    @mouseenter="open = true"
+    @mouseleave="open = false"
+  >
+    <button
+      type="button"
+      class="button"
+      aria-haspopup="true"
+      :aria-expanded="open"
+      :aria-label="label"
+      @click="open = !open"
+    >
+      <span v-if="button || icon" class="text">
+        <span v-if="icon" :class="[icon, 'option-icon']" />
+        <span v-if="button" v-html="button"></span>
+        <span class="vpi-chevron-down text-icon" />
+      </span>
+
+      <span v-else class="vpi-more-horizontal icon" />
+    </button>
+
+    <div class="menu">
+      <VPMenu :items="items">
+        <slot />
+      </VPMenu>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.VPFlyout {
+  position: relative;
+}
+
+.VPFlyout:hover {
+  color: var(--vp-c-brand-1);
+  transition: color 0.25s;
+}
+
+.VPFlyout:hover .text {
+  color: var(--vp-c-text-2);
+}
+
+.VPFlyout:hover .icon {
+  fill: var(--vp-c-text-2);
+}
+
+.VPFlyout.active .text {
+  color: var(--vp-c-brand-1);
+}
+
+.VPFlyout.active:hover .text {
+  color: var(--vp-c-brand-2);
+}
+
+.VPFlyout:hover .menu,
+.button[aria-expanded="true"] + .menu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.button[aria-expanded="false"] + .menu {
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(0);
+}
+
+.button {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  height: var(--vp-nav-height);
+  color: var(--vp-c-text-1);
+  transition: color 0.5s;
+}
+
+.text {
+  display: flex;
+  align-items: center;
+  line-height: var(--vp-nav-height);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+.option-icon {
+  margin-right: 0px;
+  font-size: 16px;
+}
+
+.text-icon {
+  margin-left: 4px;
+  font-size: 14px;
+}
+
+.icon {
+  font-size: 20px;
+  transition: fill 0.25s;
+}
+
+.menu {
+  position: absolute;
+  top: calc(var(--vp-nav-height) / 2 + 20px);
+  right: 0;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
+}
+</style>

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

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { useData } from '../composables/data'
+import { useSidebar } from '../composables/sidebar'
+
+const { theme, frontmatter } = useData()
+const { hasSidebar } = useSidebar()
+</script>
+
+<template>
+  <footer v-if="theme.footer && frontmatter.footer !== false" class="VPFooter" :class="{ 'has-sidebar': hasSidebar }">
+    <div class="container">
+      <p v-if="theme.footer.message" class="message" v-html="theme.footer.message"></p>
+      <p v-if="theme.footer.copyright" class="copyright" v-html="theme.footer.copyright"></p>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.VPFooter {
+  position: relative;
+  z-index: var(--vp-z-index-footer);
+  border-top: 1px solid var(--vp-c-gutter);
+  padding: 32px 24px;
+  background-color: var(--vp-c-bg);
+}
+
+.VPFooter.has-sidebar {
+  display: none;
+}
+
+.VPFooter :deep(a) {
+  text-decoration-line: underline;
+  text-underline-offset: 2px;
+  transition: color 0.25s;
+}
+
+.VPFooter :deep(a:hover) {
+  color: var(--vp-c-text-1);
+}
+
+@media (min-width: 768px) {
+  .VPFooter {
+    padding: 32px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  max-width: var(--vp-layout-max-width);
+  text-align: center;
+}
+
+.message,
+.copyright {
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+</style>