docus 2.1.0 → 3.0.0-beta.11

package/theme/components/content/TabsHeader.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+defineProps({
+  tabs: {
+    type: Array as PropType<{ label: string }[]>,
+    required: true,
+  },
+  activeTabIndex: {
+    type: Number,
+    required: true,
+  },
+})
+
+defineEmits(['update:activeTabIndex'])
+</script>
+
+<template>
+  <div class="relative text-white bg-gray-200 dark:bg-gray-700">
+    <div v-if="tabs" class="relative z-0 px-2">
+      <button
+        v-for="({ label }, i) in tabs"
+        ref="tabs"
+        :key="`${i}${label}`"
+        class="relative px-3 py-1.5 xs:py-3 my-1.5 xs:my-0 text-sm font-mono font-medium tracking-tight focus:outline-none font-bold"
+        :class="[activeTabIndex === i ? 'active text-gray-800 dark:text-white' : 'text-gray-600 dark:text-gray-400']"
+        @click="$emit('update:activeTabIndex', i)"
+      >
+        {{ label }}
+      </button>
+      <span ref="highlight-underline" class="absolute -z-[1] highlight-underline h-full xs:py-1.5">
+        <span class="flex w-full h-full bg-gray-300 dark:bg-gray-600 rounded-lg" />
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.highlight-underline {
+  /* bottom: -2px; */
+  /* height: 2px; */
+  transition: left 150ms, top 150ms, width 150ms, height 150ms;
+}
+</style>

package/theme/components/content/Terminal.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import Clipboard from 'clipboard'
+import { nextTick, onMounted, ref } from '#imports'
+
+const props = defineProps({
+  snippet: {
+    type: String,
+    required: true,
+  },
+})
+
+const copyInstall = ref()
+const copied = ref(false)
+
+const setupCopyInstall = () => {
+  if (!copyInstall.value)
+    return nextTick(setupCopyInstall)
+
+  const instance = new Clipboard(copyInstall.value)
+
+  instance.on('success', () => {
+    copied.value = true
+
+    setTimeout(() => {
+      copied.value = false
+    }, 1000)
+  })
+}
+
+onMounted(() => setupCopyInstall())
+
+</script>
+
+<template>
+  <div
+    ref="copyInstall"
+    :data-clipboard-text="snippet"
+    class="relative flex flex-col w-full h-64 overflow-hidden text-gray-600 bg-gray-800 rounded-lg cursor-pointer group"
+  >
+    <div v-if="copied" class="absolute top-0 left-0 z-10 flex items-center justify-center w-full h-full">
+      <div class="absolute top-0 left-0 w-full h-full bg-gray-900 opacity-75" />
+      <div class="z-10 text-lg font-medium text-gray-100">
+        Copied!
+      </div>
+    </div>
+    <div class="relative flex items-center w-full h-12 border-b border-gray-700">
+      <div class="flex ml-4">
+        <div class="w-3 h-3 bg-red-400 rounded-full" />
+        <div class="w-3 h-3 ml-2 bg-yellow-400 rounded-full" />
+        <div class="w-3 h-3 ml-2 bg-green-400 rounded-full" />
+      </div>
+      <div class="absolute top-0 left-0 flex items-center justify-center w-full h-full">
+        Bash
+      </div>
+    </div>
+    <div class="flex flex-1 p-4 font-mono">
+      <span class="inline-block mr-2 font-bold select-none">$</span>
+      <span class="inline-block text-gray-200">{{ snippet }}</span>
+    </div>
+    <div class="py-2 text-center transition-opacity opacity-0 group-hover:opacity-100">
+      Click to copy
+    </div>
+  </div>
+</template>

package/theme/components/content/VideoPlayer.vue

@@ -0,0 +1,115 @@
+<script lang="ts" setup>
+import { ref } from '#imports'
+
+const props = defineProps({
+  poster: {
+    type: String,
+    default: '',
+  },
+  src: {
+    type: String,
+    default: '',
+  },
+  sources: {
+    type: Array,
+    default: () => [],
+  },
+})
+
+const provider = ref(null)
+const loaded = ref(false)
+
+if (!props.src && !props.sources.length)
+  throw new Error('VideoPlayer: you need to provide either `src` or `sources` props')
+
+const src = props.src || props.sources[0].src
+
+if (src && src.includes('youtube.com/watch')) {
+  const match = src.match(/\?v=([^&]*)/)
+
+  provider.value = {
+    name: 'youtube',
+    src: `https://www.youtube-nocookie.com/embed/${match[1]}?autoplay=1`,
+    poster: props.poster || `https://i3.ytimg.com/vi/${match[1]}/hqdefault.jpg`,
+  }
+}
+</script>
+
+<template>
+  <div class="video-player relative my-4 bg-black bg-opacity-25 rounded-sm overflow-hidden" :class="{ loaded }">
+    <NuxtImg
+      v-if="provider ? provider.poster : poster"
+      class="video absolute top-0 left-0 w-full h-full object-cover"
+      :src="provider ? provider.poster : poster"
+      :width="670"
+      :height="377"
+    />
+    <div v-if="loaded" class="video absolute top-0 left-0 w-full h-full">
+      <!-- remote videos -->
+      <video v-if="!provider" :poster="poster" controls autoplay>
+        <source v-if="src" :src="src">
+        <source v-for="source in sources" :key="source.src || source" :src="source.src || source" :type="source.type">
+      </video>
+      <!-- youtube -->
+      <iframe
+        v-else-if="provider.name === 'youtube'"
+        width="560"
+        height="377"
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen=""
+        class="w-full h-full"
+        :src="provider.src"
+      />
+    </div>
+    <div v-if="!loaded" class="overlay absolute top-0 left-0 w-full h-full cursor-pointer" @click="loaded = true">
+      <button class="play" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.video-player {
+  &:not(.loaded):before {
+    content: ' ';
+    display: block;
+    position: absolute;
+    top: 0;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==');
+    background-position: top;
+    background-repeat: repeat-x;
+    height: 60px;
+    padding-bottom: 50px;
+    width: 100%;
+    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
+    z-index: 1;
+  }
+  &:after {
+    content: ' ';
+    display: block;
+    padding-bottom: 56.25%;
+  }
+
+  .play {
+    width: 68px;
+    height: 48px;
+    position: absolute;
+    cursor: pointer;
+    transform: translate3d(-50%, -50%, 0);
+    top: 50%;
+    left: 50%;
+    z-index: 1;
+    background-color: transparent;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="%23f00" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>');
+    filter: grayscale(100%);
+    transition: filter 0.1s cubic-bezier(0, 0, 0.2, 1);
+    border: none;
+  }
+  &:hover .play {
+    filter: none;
+  }
+}
+
+video {
+  @apply w-full;
+}
+</style>

package/theme/components/dev/Debug.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
+import type { ThemeDebugConfig } from '../../utils/theme'
+import { computed, useDocus, watchDebounced } from '#imports'
+
+const { page, navigation, theme } = useDocus()
+
+const defaultConfig: ThemeDebugConfig = {
+  page: true,
+  navigation: true,
+  theme: true,
+}
+
+const config = computed(
+  () => {
+    const _config = theme.value?.debug
+
+    if (typeof _config === 'object')
+      return Object.assign(defaultConfig, _config)
+
+    if (_config === true)
+      return defaultConfig
+
+    if (_config === false)
+      return _config
+  },
+)
+
+const icons = {
+  page: '📃',
+  navigation: '🔖',
+  theme: '🎨',
+}
+
+Object.entries({
+  page,
+  navigation,
+  theme,
+}).forEach(([key, reference]) => {
+  if (!config.value || !config.value?.[key])
+    return
+
+  watchDebounced(
+    reference,
+    () => {
+      if (key === 'page')
+        // eslint-disable-next-line no-console
+        console.log(`[${icons[key]}] Page updates detected! ${`(${(reference.value as ParsedContent)?.title})` || `(${(reference.value as ParsedContent)?.id})` || ''}`)
+      else
+        // eslint-disable-next-line no-console
+        console.log(`[${icons[key]}] ${key[0].toUpperCase() + key.slice(1, key.length)} updates detected!`)
+
+      // eslint-disable-next-line no-console
+      console.dir({ ...reference.value })
+    },
+    {
+      debounce: 100,
+    },
+  )
+})
+</script>
+
+<template>
+  <div class="hidden" />
+</template>

package/theme/components/docs/DocsAside.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed, useDocus } from '#imports'
+
+const { navigation } = useDocus()
+
+const tree = computed(() => {
+  return navigation.value.filter(
+    (item) => {
+      if (item.slug === '/' || item.slug === '/templates')
+        return false
+      return true
+    },
+  )
+})
+</script>
+
+<template>
+  <nav>
+    <DocsAsideTree :tree="tree" />
+  </nav>
+</template>

package/theme/components/docs/DocsAsideTree.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { reactive, useRoute, useRouter, watch } from '#imports'
+
+const props = defineProps({
+  tree: {
+    type: Array as PropType<any>,
+    default: () => [],
+  },
+  level: {
+    type: Number,
+    default: 0,
+  },
+  max: {
+    type: Number,
+    default: null,
+  },
+})
+const emit = defineEmits(['close', 'select'])
+
+const route = useRoute()
+const router = useRouter()
+
+const isChildOpen = reactive({})
+
+function isActive(link) {
+  return link.exact ? route.path === link.slug : route.path.startsWith(link.slug)
+}
+
+function onClick(link) {
+  if (link.children?.length) {
+    // Open dir when element is collapsible
+    toggleDir(link.slug)
+
+    // Select element for mobile nav
+    if (props.max !== null && props.level + 1 === props.max)
+      emit('select', link)
+  }
+  else {
+    router.push(link.slug)
+    emit('close')
+  }
+}
+
+function toggleDir(slug, force?) {
+  isChildOpen[slug] = force ? true : !isChildOpen[slug]
+}
+
+watch(
+  () => route.path,
+  () => {
+    const paths = route.path.split('/')
+    for (let i = paths.length; i > 1; i--) {
+      paths.pop()
+      toggleDir(paths.join('/'), true)
+    }
+
+    toggleDir(route.path, true)
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <ul :class="{ 'pl-4': level > 1 }">
+    <li
+      v-for="(link, index) in tree"
+      :key="link.slug"
+      :class="{
+        'border-l-2': level > 0,
+        'border-primary-600': isActive(link),
+        'border-primary-300 hover:border-primary-300': !isActive(link)
+      }"
+    >
+      <NuxtLink
+        class="block py-1.5 flex items-center justify-between focus:outline-none cursor-pointer"
+        :exact="link.exact"
+        :class="{
+          'pl-4': level > 0,
+          'text-xl !text-primary font-bold': level === 0,
+          '!pt-0': level === 0 && index === 0,
+          'text-secondary-active': isActive(link),
+          'text-secondary text-secondary-hover': !isActive(link)
+        }"
+        @click.stop.prevent="onClick(link)"
+      >
+        <span>{{ link.title }}</span>
+
+        <Icon v-if="link.icon" :name="link.icon" class="w-5 h-5 u-text-gray-500" />
+      </NuxtLink>
+
+      <DocsAsideTree
+        v-if="link.children?.length && (max === null || ((level + 1) < max))"
+        v-show="isChildOpen[link.slug]"
+        :tree="link.children"
+        :level="level + 1"
+        :max="max"
+        class="py-2"
+        @select="link => $emit('select', link)"
+        @close="$emit('close')"
+      />
+    </li>
+  </ul>
+</template>

package/theme/components/docs/DocsHero.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+defineProps({
+  buttons: {
+    type: Array as PropType<{ label?: string; variant?: string; to?: string; size?: string; icon?: string }[]>,
+    default: () => [],
+  },
+})
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center pb-48 gap-y-8 pt-36 md:pt-44 lg:pb-56 lg:pt-36 ">
+    <div v-if="$slots.badge" class="flex gap-x-2">
+      <UBadge rounded label="Warning" />
+
+      <span class="u-text-gray-500">
+        <Markdown unwrap="p" :use="$slots.badge" />
+      </span>
+    </div>
+    <h1 v-if="$slots.title" class="font-bold text-7xl text-center mb-0 u-text-gray-900">
+      <Markdown unwrap="p" :use="$slots.title" />
+    </h1>
+    <p v-if="$slots.description" class="w-1/2 text-lg text-center u-text-gray-500">
+      <Markdown unwrap="p" :use="$slots.description" />
+    </p>
+    <div class="flex gap-x-8">
+      <UButton
+        v-for="button of buttons"
+        :key="button.label"
+        :size="button.size || 'xl'"
+        :variant="button.variant || 'transparent'"
+        :icon="button.icon || undefined"
+        :label="button.label || ''"
+        :to="button.to || '#'"
+      />
+    </div>
+  </div>
+</template>

package/theme/components/docs/DocsPage.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="relative flex-1">
+    <slot name="header" />
+
+    <main class="relative pb-4 sm:pb-6 lg:py-8">
+      <Container padded>
+        <div class="grid grid-cols-10 gap-8 relative">
+          <aside
+            class="pb-8 overflow-x-hidden overflow-y-auto lg:pb-0 hidden lg:block lg:sticky lg:top-16 lg:pt-8 lg:-mt-8 lg:self-start col-span-2 lg:max-h-[calc(100vh-64px)]"
+          >
+            <slot name="aside" />
+          </aside>
+
+          <div class="relative" :class="{ 'col-span-10 lg:col-span-8': !!$slots.aside, 'col-span-10': !$slots.aside }">
+            <slot />
+          </div>
+        </div>
+      </Container>
+    </main>
+  </div>
+</template>

package/theme/components/docs/DocsPageContent.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref } from '#imports'
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div class="flex flex-col-reverse lg:grid lg:grid-cols-10 gap-8 relative">
+    <div
+      class="col-span-10 lg:col-span-8"
+    >
+      <slot />
+    </div>
+
+    <div
+      :class="{
+        'flex items-center lg:block': !isOpen
+      }"
+      class="lg:col-span-2 top-16 flex items-center lg:self-start overflow-x-hidden surface surface-blurry sticky -mx-4 sm:-mx-6 px-4 sm:px-6 lg:mx-0 lg:px-0 lg:pt-8 lg:-mt-8 lg:max-h-[calc(100vh-var(--header-height))] border-b lg:border-none border-gray-200 dark:border-gray-800"
+    >
+      <div class="py-4 lg:py-0">
+        <button class="flex lg:hidden items-center gap-3" @click="isOpen = !isOpen">
+          <span class="font-semibold">Table of Contents</span>
+
+          <Icon name="heroicons-outline:chevron-right" class="w-6 h-6 transition-transform duration-100 transform" :class="[isOpen ? 'rotate-90' : 'rotate-0']" />
+        </button>
+
+        <DocsToc class="mt-4 lg:mt-0" :class="[isOpen ? 'lg:block' : 'hidden lg:block']" @move="isOpen = false" />
+      </div>
+    </div>
+  </div>
+</template>

package/theme/components/docs/DocsToc.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { useDocus, useRoute, useScrollToHeading, useScrollspy, watch } from '#imports'
+
+const emit = defineEmits(['move'])
+
+const route = useRoute()
+
+const { activeHeadings, updateHeadings } = useScrollspy()
+
+const { toc, prev, next } = useDocus()
+
+watch(
+  () => route.path,
+  () => {
+    if (process.client) {
+      setTimeout(() => {
+        updateHeadings([
+          ...document.querySelectorAll('.content h1'),
+          ...document.querySelectorAll('.content h2'),
+          ...document.querySelectorAll('.content h3'),
+        ])
+      }, 100)
+    }
+  }, {
+    immediate: true,
+  })
+
+function scrollToHeading(id: string, scrollMarginCssVar: string) {
+  useScrollToHeading(id, scrollMarginCssVar)
+  emit('move', id)
+}
+</script>
+
+<template>
+  <div class="space-y-2">
+    <NuxtLink v-if="prev" :to="prev.slug" class="flex lg:flex-row-reverse items-center text-primary font-semibold group gap-x-3">
+      <div class="flex-shrink-0 p-1 rounded-lg text-secondary-group-hover transition-base">
+        <Icon name="heroicons-solid:chevron-double-left" class="w-6 h-6" />
+      </div>
+
+      <span>Previous page</span>
+    </NuxtLink>
+
+    <template v-if="toc?.links?.length">
+      <div class="flex lg:flex-row-reverse items-center font-semibold gap-x-3">
+        <div class="flex-shrink-0 p-1 rounded-lg">
+          <Icon name="heroicons-outline:view-grid" class="w-6 h-6" />
+        </div>
+
+        <span>On this page</span>
+      </div>
+
+      <ul class="pl-3 lg:pr-3 mr-1 border-gray-500">
+        <li v-for="link in toc.links" :key="link.text" class="group border-l-2 lg:border-r-2 lg:border-l-0 min-w-0 lg:text-right" :class="activeHeadings.includes(link.id) ? 'border-primary-600' : 'border-primary-600'">
+          <a
+            :href="`#${link.id}`"
+            class="text-secondary text-secondary-group-hover py-1 pl-3 lg:pr-3 block truncate"
+            :class="{
+              'text-primary-500 dark:text-primary-400': activeHeadings.includes(link.id),
+            }"
+            @click.prevent="scrollToHeading(link.id, '--docs-scroll-margin-block')"
+          >
+            {{ link.text }}
+          </a>
+        </li>
+      </ul>
+    </template>
+
+    <NuxtLink v-if="next" :to="next.slug" class="flex lg:flex-row-reverse items-center text-primary font-semibold group gap-x-3">
+      <div class="flex-shrink-0 p-1 rounded-lg text-secondary-group-hover transition-base">
+        <Icon name="heroicons-solid:chevron-double-right" class="w-6 h-6" />
+      </div>
+
+      <span>Next page</span>
+    </NuxtLink>
+  </div>
+</template>

package/theme/components/globals/Icon.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { Icon } from '@iconify/vue/dist/offline'
+import { loadIcon } from '@iconify/vue'
+import { ref, watch } from '#imports'
+
+const props = defineProps({
+  name: {
+    type: [String, Object],
+    required: true,
+  },
+})
+
+const icon = ref(null)
+
+icon.value = await loadIcon(props.name)
+
+watch(() => props.name, async () => {
+  icon.value = await loadIcon(props.name)
+})
+</script>
+
+<template>
+  <Icon :icon="icon" />
+</template>

package/{dist/runtime/app/components/prose/ProseHr.vue → theme/components/globals/Logo.vue}

@@ -1,3 +1,3 @@
 <template>
-  <hr />
+  <IconNuxt />
 </template>

package/theme/components/globals/NuxtImg.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+import { computed, useColorMode } from '#imports'
+
+export interface NuxtImg {
+  light: string
+  dark: string
+}
+
+const props = defineProps({
+  src: {
+    type: [String, Object] as PropType<NuxtImg>,
+    default: null,
+  },
+})
+
+const colorMode = useColorMode()
+
+const src = computed(
+  () => {
+    let src = props.src
+
+    try {
+      src = JSON.parse(src as any)
+    }
+    catch (e) {
+      src = props.src
+    }
+
+    if (typeof src === 'string')
+      return props.src
+
+    if (colorMode.value === 'dark')
+      return props.src.dark || props.src.light
+
+    if (colorMode.value === 'light')
+      return props.src.light || props.src.light
+  },
+)
+</script>
+
+<template>
+  <img :src="src">
+</template>