docus 3.0.0-beta.9 → 3.0.0

package/theme/components/content/CopyButton.vue

@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import Clipboard from 'clipboard'
-import { onMounted, ref } from '#imports'
-
-const copy = ref()
-const state = ref('init')
-
-onMounted(() => {
-  const copyCode = new Clipboard(copy.value, {
-    target(trigger) {
-      return trigger.previousElementSibling
-    },
-  })
-
-  copyCode.on('success', (event) => {
-    event.clearSelection()
-    state.value = 'copied'
-    window.setTimeout(() => {
-      state.value = 'init'
-    }, 1000)
-  })
-})
-</script>
-
-<template>
-  <button
-    ref="copy"
-    class="
-      copy
-      focus:outline-none
-      absolute
-      right-1
-      bottom-1
-      px-2
-      py-2
-      m-1
-      text-gray-400
-      bg-gray-900
-      text-xs
-      leading-none
-      rounded-lg
-      font-mono
-      font-semibold
-    "
-  >
-    <Icon v-if="state === 'copied'" name="fa-check" class="w-4 h-4" />
-    <Icon v-else name="fa-copy" class="w-4 h-4" />
-  </button>
-</template>

package/theme/components/content/List.vue

@@ -1,5 +0,0 @@
-<template>
-  <div>
-    <slot />
-  </div>
-</template>

package/theme/components/content/NeedContribution.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-defineProps({
-  to: {
-    type: String,
-    required: true,
-    default: '/community/contribution#documentation-guide',
-  },
-  icon: {
-    type: String,
-    required: true,
-    default: '🚧',
-  },
-})
-</script>
-
-<template>
-  <Alert type="warning" :icon="icon">
-    Documentation for this section is not yet complete. You can
-    <NuxtLink :to="to">
-      contribute to the documentation.
-    </NuxtLink>
-  </Alert>
-</template>

package/theme/components/content/ReadMore.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { splitByCase, upperFirst } from 'scule'
-import { computed } from '#imports'
-
-const props = defineProps({
-  link: {
-    type: String,
-    required: true,
-  },
-  title: {
-    type: String,
-    required: false,
-    default: '',
-  },
-})
-
-// Guess title from link!
-const computedTitle = computed(() => (props.title || props.link).split('/').filter(Boolean).map(part => splitByCase(part).map(p => upperFirst(p)).join(' ')).join(' > '))
-</script>
-
-<template>
-  <Alert icon="👉">
-    Read more in <NuxtLink :to="link" v-html="computedTitle" />.
-  </Alert>
-</template>

package/theme/components/content/Sandbox.vue

@@ -1,102 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, ref, useColorMode } from '#imports'
-
-const props = defineProps({
-  src: {
-    type: String,
-    default: '',
-  },
-  repo: {
-    type: String,
-    default: '',
-  },
-  branch: {
-    type: String,
-    default: '',
-  },
-  dir: {
-    type: String,
-    default: '',
-  },
-  file: {
-    type: String,
-    default: 'app.vue',
-  },
-})
-
-const colorMode = useColorMode()
-
-const providers = {
-  CodeSandBox: () => `https://codesandbox.io/embed/github/${props.repo}/tree/${props.branch}/${props.dir}?hidenavigation=1&theme=${colorMode.value}`,
-  StackBlitz: () => `https://stackblitz.com/github/${props.repo}/tree/${props.branch}/${props.dir}?embed=1&file=${props.file}&theme=${colorMode.value}`,
-}
-
-const providersTabs = Object.keys(providers).map(p => ({ label: p }))
-const activeTabIndex = ref(-1)
-const tabs = ref()
-const url = ref('')
-const provider = ref('')
-
-const changeProvider = (value) => {
-  provider.value = value
-  url.value = props.src || providers[provider.value]()
-  localStorage.setItem('docus_sandbox', value)
-}
-
-const sandBoxUrl = computed(() => url.value?.replace('?embed=1&', '?').replace('/embed/', '/s/'))
-
-const updateTab = (i: number) => {
-  activeTabIndex.value = i
-  changeProvider(providersTabs[i].label)
-}
-
-onMounted(() => {
-  // TODO: if Safari, use CodeSandBox by default: const defaultSandbox = ...
-  provider.value = window.localStorage.getItem('docus_sandbox') || 'CodeSandBox'
-
-  url.value = props.src || providers[provider.value]()
-
-  // Set active tab
-  activeTabIndex.value = Object.keys(providers).indexOf(provider.value)
-
-  setTimeout(() => tabs.value.updateTabs(activeTabIndex.value), 100)
-})
-</script>
-
-<template>
-  <div class="w-full min-h-[500px] mx-auto mb-6 overflow-hidden text-3xl rounded-lg sandbox mt-4">
-    <TabsHeader
-      v-if="!src"
-      ref="tabs"
-      :active-tab-index="activeTabIndex"
-      :tabs="providersTabs"
-      @update:active-tab-index="updateTab"
-    >
-      <template #footer>
-        <div class="absolute top-1/2 transform -translate-y-1/2 right-0 px-2">
-          <Link class="flex items-center text-gray-500 dark:text-gray-400" :to="sandBoxUrl" blank>
-            <IconExternalLink class="h-5 w-5" />
-          </Link>
-        </div>
-      </template>
-    </TabsHeader>
-
-    <iframe
-      v-if="url"
-      :src="url"
-      title="Sandbox editor"
-      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-      class="w-full h-full min-h-[700px] overflow-hidden bg-gray-100 dark:bg-gray-800"
-    />
-
-    <span v-else class="text-white flex-1">Loading Sandbox...</span>
-  </div>
-</template>
-
-<style lang="postcss" scoped>
-.sandbox,
-.sandbox iframe {
-  @apply w-full rounded-lg rounded-tl-none rounded-tr-none overflow-hidden h-64;
-  height: 700px;
-}
-</style>

package/theme/components/content/TabsHeader.vue

@@ -1,44 +0,0 @@
-<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

@@ -1,64 +0,0 @@
-<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

@@ -1,115 +0,0 @@
-<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

@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import type { PropType } from 'vue'
-import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
-import type { ThemeDebugConfig } from '../../utils/theme'
-import { useDocus } from '#imports'
-
-const { page, navigation, theme } = useDocus()
-
-const defaultConfig = {
-  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

@@ -1,21 +0,0 @@
-<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

@@ -1,104 +0,0 @@
-<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

@@ -1,39 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-<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>