docus 3.0.0-beta.8 → 3.0.0

package/theme/components/app/MobileNav.vue

@@ -1,85 +0,0 @@
-<script setup lang="ts">
-import { computed, useDocus, useMenu, useUserAgent, watch } from '#imports'
-
-const { navigation } = useDocus()
-
-const tree = computed(() => {
-  return navigation.value.filter(
-    (item) => {
-      if (item.slug === '/' || item.slug === '/templates')
-        return false
-      return true
-    },
-  )
-})
-
-const { scrollBarGap, visible, open, close, toggle } = useMenu()
-
-const { isDesktopSafari, isDesktopFirefox } = useUserAgent()
-
-const buttonStyles = 'w-12 h-8 focus:outline-none bg-warmgray-50 hover:bg-warmgray-100 dark:bg-warmgray-800 rounded-xl'
-
-watch(visible, v => (v ? open() : close()))
-
-// Necessary because of body lock layout shift
-const buttonBodyLockHack = computed(
-  () => `top: 1rem; right: calc(1.5rem + ${isDesktopSafari.value || isDesktopFirefox.value ? scrollBarGap.value : 0}px);`,
-)
-
-const surfaceBodyLockHack = computed(
-  () => `top: 0.5rem; right: calc(1rem + ${isDesktopSafari.value || isDesktopFirefox.value ? scrollBarGap.value : 0}px); bottom: 0.5rem; max-height: calc(100vh- 2rem); min-width: calc(320px - 2rem);`,
-)
-</script>
-
-<template>
-  <div class="relative">
-    <button :class="[buttonStyles]" class="z-10 relative" @click="toggle">
-      <IconDots class="w-6 h-6 icon-base h-full mx-auto" />
-    </button>
-
-    <ClientOnly>
-      <teleport to="body">
-        <!-- Scrim overlay -->
-        <div
-          :class="[visible ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none']"
-          class="xl:hidden fixed top-0 left-0 z-10 w-full h-full bg-warmgray-100 bg-opacity-50 dark:bg-warmgray-800 dark:bg-opacity-50 backdrop-blur transition"
-          @click="toggle"
-        />
-
-        <!-- clone AppHeader button, due to stacking context limitations -->
-        <button
-          :style="buttonBodyLockHack"
-          :class="[
-            buttonStyles,
-            visible
-              ? 'opacity-100 pointer-events-auto'
-              : `opacity-0 transition ${
-                isDesktopSafari || isDesktopFirefox ? 'duration-0' : 'duration-400'
-              } pointer-events-none`
-          ]"
-          class="xl:hidden z-30 fixed"
-          @click="toggle"
-        >
-          <IconLine class="w-6 h-6 icon-base h-full mx-auto" />
-        </button>
-
-        <!-- Nav menu surface -->
-        <div
-          :style="surfaceBodyLockHack"
-          :class="[visible ? 'opacity-100 scale-100 pointer-events-auto' : 'opacity-0 scale-95 pointer-events-none']"
-          class="fixed z-20 w-[calc(100%-3rem)] md:w-auto min-w-full md:min-w-[calc(320px-2rem)] transform origin-top-right transition-transform ease-out"
-        >
-          <div
-            class="lg:hidden pl-8 pr-0 overflow-y-auto mb-2 surface pb-6 pt-12 rounded-2xl shadow-xl border-2 surface-border max-h-full"
-          >
-            <DocsAsideTree :tree="tree" />
-
-            <div class="flex items-center justify-end px-6">
-              <ThemeSelect class="block" />
-            </div>
-          </div>
-        </div>
-      </teleport>
-    </ClientOnly>
-  </div>
-</template>

package/theme/components/app/Navbar.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import { onMounted, onUnmounted, ref } from '#imports'
-
-const onTop = ref(true)
-
-function setOnTop(): void {
-  if (window.pageYOffset <= 0)
-    onTop.value = true
-  else onTop.value = false
-}
-
-onMounted(() => {
-  setOnTop()
-  document.addEventListener('scroll', setOnTop)
-})
-
-onUnmounted(() => document.removeEventListener('scroll', setOnTop))
-</script>
-
-<template>
-  <header class="sticky w-full top-0 surface surface-blurry border-b border-gray-200 dark:border-gray-800 border-opacity-50 h-header surface surface-blurry z-10">
-    <Container class="grid grid-cols-12 items-center h-full">
-      <div class="col-span-6 lg:col-span-3">
-        <NavbarLogo />
-      </div>
-
-      <div class="hidden lg:block lg:col-span-6">
-        <!-- <HeaderNavigation /> -->
-      </div>
-
-      <div class="col-span-6 lg:col-span-3 flex justify-end">
-        <MobileNav class="flex lg:hidden" />
-        <ThemeSelect class="hidden lg:block" />
-      </div>
-    </Container>
-  </header>
-</template>

package/theme/components/app/NavbarLogo.vue

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { computed, useDocus } from '#imports'
-
-const { theme } = useDocus()
-const hasLogo = computed(() => theme.value?.header?.logo)
-const hasTitle = computed(() => theme.value?.header?.title)
-</script>
-
-<template>
-  <NuxtLink to="/" :aria-label="theme.header.title">
-    <!-- Only title -->
-    <span v-if="!hasLogo && hasTitle">
-      {{ theme.header.title }}
-    </span>
-
-    <!-- Title and Logo -->
-    <template v-else-if="hasLogo && hasTitle">
-      <Logo />
-
-      <span>
-        {{ theme.header.title }}
-      </span>
-    </template>
-
-    <!-- Only Logo -->
-    <Logo v-else-if="hasLogo" class="w-12 h-12" />
-
-    <!-- Placeholder -->
-    <template v-else>
-      <IconDots class="w-12 h-12" />
-    </template>
-  </NuxtLink>
-</template>

package/theme/components/app/Page.vue

@@ -1,7 +0,0 @@
-<template>
-  <main class="relative flex-1 pb-4 sm:pb-6 lg:py-8">
-    <Container padded>
-      <slot />
-    </Container>
-  </main>
-</template>

package/theme/components/app/PoweredByDocus.vue

@@ -1,11 +0,0 @@
-<template>
-  <div class="p-3 text-center border-t border-gray-200 border-dashed dark:border-gray-800 dark:bg-gray-900">
-    <a
-      href="https://docus.dev"
-      target="_blank"
-      class="text-xs text-gray-400 hover:text-gray-600 dark:text-gray-600 group dark:hover:text-gray-400"
-    >
-      Powered by <strong class="font-bold">Docus</strong>
-    </a>
-  </div>
-</template>

package/theme/components/content/Alert.vue

@@ -1,124 +0,0 @@
-<script setup lang="ts">
-defineProps({
-  /**
-   * @values info, success, warning, danger
-   */
-  type: {
-    type: String,
-    default: 'info',
-    validator(value: string) {
-      return ['info', 'success', 'warning', 'danger'].includes(value)
-    },
-  },
-})
-</script>
-
-<template>
-  <div
-    class="px-4 py-3 mt-4 mb-4 rounded-xl alert text-sm leading-relaxed"
-    :class="[type]"
-  >
-    <div class="flex items-start">
-      <div class="flex-grow alert-content">
-        <Markdown unwrap="p" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="postcss" scoped>
-.alert {
-  &.success {
-    @apply bg-green-50 dark:bg-green-800 dark:bg-opacity-25 text-green-600 dark:text-green-200 border border-green-100 dark:border-green-900;
-
-    :deep() {
-      code {
-        @apply bg-green-100 dark:bg-green-900 dark:bg-opacity-50 shadow-none text-current border-green-200 dark:border-green-800;
-      }
-      a:hover {
-        code {
-          @apply border-green-400 dark:border-green-700;
-        }
-      }
-    }
-  }
-
-  &.info {
-    @apply bg-blue-50 dark:bg-blue-800 dark:bg-opacity-25 text-blue-600 dark:text-blue-200 border border-blue-100 dark:border-blue-900;
-
-    :deep() {
-      code {
-        @apply bg-blue-100 dark:bg-blue-900 dark:bg-opacity-50 shadow-none text-current border-blue-200 dark:border-blue-800;
-      }
-      a:hover {
-        code {
-          @apply border-blue-400 dark:border-blue-700;
-        }
-      }
-    }
-  }
-
-  &.warning {
-    @apply bg-yellow-50 dark:bg-yellow-800 dark:bg-opacity-25 text-yellow-600 dark:text-yellow-100 border border-yellow-100 dark:border-yellow-900;
-
-    :deep() {
-      code {
-        @apply bg-yellow-100 dark:bg-yellow-900 dark:bg-opacity-50 shadow-none text-current border-yellow-200 dark:border-yellow-800;
-      }
-      a:hover {
-        code {
-          @apply border-yellow-400 dark:border-yellow-700;
-        }
-      }
-    }
-  }
-
-  &.danger {
-    @apply bg-red-50 dark:bg-red-800 dark:bg-opacity-25 text-red-600 dark:text-red-100 border border-red-100 dark:border-red-900;
-
-    :deep() {
-      code {
-        @apply bg-red-100 dark:bg-red-900 dark:bg-opacity-50 shadow-none text-current border-red-200 dark:border-red-800;
-      }
-      a:hover {
-        code {
-          @apply border-red-400 dark:border-red-700;
-        }
-      }
-    }
-  }
-
-  :deep() {
-    strong {
-      @apply font-semibold text-current;
-    }
-
-    a {
-      @apply underline border-none font-semibold text-current;
-      code {
-        @apply border border-transparent border-dashed;
-      }
-    }
-
-    .prose-code {
-      @apply my-4;
-
-      code {
-        @apply bg-gray-50 dark:bg-gray-900;
-      }
-    }
-  }
-}
-
-.alert :deep(p) {
-  @apply m-0 !important;
-}
-
-.dark .alert {
-  :deep() {
-    a {
-      @apply text-current;
-    }
-  }
-}
-</style>

package/theme/components/content/BlockHero.vue

@@ -1,54 +0,0 @@
-<script setup lang="ts">
-defineProps({
-  cta: {
-    type: Array,
-    default: () => ['Get started', '/get-started'],
-  },
-  secondary: {
-    type: Array,
-    default: () => ['Open on GitHub', 'https://github.com'],
-  },
-  snippet: {
-    type: [String, Boolean],
-    default: () => false,
-  },
-})
-</script>
-
-<template>
-  <section class="py-12 lg:py-24">
-    <Container class="flex flex-col lg:flex-row my-8 md:my-16">
-      <div class="flex flex-col items-center pr-0 lg:items-start lg:pr-8 lg:w-2/3">
-        <h2
-          class="mb-4 text-4xl xs:text-5xl font-semibold sm:leading-none tracking-tighter text-center text-gray-900 lg:text-left dark:text-gray-100 sm:text-6xl lg:text-7xl sm:mb-8"
-        >
-          <Markdown use="title" unwrap="p" />
-        </h2>
-        <p
-          class="mb-8 text-lg text-center text-gray-700 font-medium tracking-tight lg:text-left sm:text-xl xl:text-xl leading-base sm:mb-12 dark:text-gray-300"
-        >
-          <Markdown use="description" unwrap="p" />
-        </p>
-
-        <div class="flex flex-col sm:flex-row items-center space-y-4 sm:space-y-0 sm:space-x-4 lg:space-x-6 mb-8">
-          <ButtonLink v-if="cta" class="mx-auto md:mx-0" bold size="large" :href="cta[1]">
-            {{ cta[0] }}
-          </ButtonLink>
-
-          <a
-            v-if="secondary"
-            :href="secondary[1]"
-            class="py-px mt-px font-medium text-primary-500 border-b-1 border-transparent dark:text-primary-400 hover:border-primary-500 dark:hover:border-primary-400"
-          >
-            {{ secondary[0] }}
-          </a>
-        </div>
-      </div>
-      <div v-if="snippet" class="w-full mx-auto lg:w-1/3 sm:w-580px">
-        <div class="md:pl-2 md:mx">
-          <Terminal :snippet="snippet" />
-        </div>
-      </div>
-    </Container>
-  </section>
-</template>

package/theme/components/content/ButtonLink.vue

@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import { hasProtocol } from 'ufo'
-import { computed } from '#imports'
-
-const props = defineProps({
-  href: {
-    type: String,
-    default: '',
-  },
-  size: {
-    type: String,
-    default: 'medium',
-  },
-  bold: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const isExternal = computed(
-  () => hasProtocol(props.href, true),
-)
-</script>
-
-<template>
-  <NuxtLink class="button-link" :class="[size, bold ? 'font-semibold' : 'font-medium']" :to="href">
-    <Markdown :use="$slots.default" unwrap="p ul li" />
-
-    <IconExternalLink v-if="isExternal" class="w-4 h-4 ml-2" />
-  </NuxtLink>
-</template>
-
-<style lang="postcss" scoped>
-a.button-link {
-  @apply inline-flex items-center flex-none rounded-lg px-3 py-1.5 text-sm leading-4 text-white transition-colors duration-200 border border-transparent bg-primary-500 hover:bg-primary-600  focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 focus:ring-primary-600 focus:outline-none;
-
-  &.medium {
-    @apply px-4 py-2 text-base leading-4;
-  }
-
-  &.large {
-    @apply px-6 py-2.5 text-lg leading-6;
-  }
-}
-</style>

package/theme/components/content/Card.vue

@@ -1,46 +0,0 @@
-<script setup lang="ts">
-defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-  icon: {
-    type: String,
-    default: '',
-  },
-  iconClass: {
-    type: String,
-    default: '',
-  },
-})
-
-const isImage = (icon: string) => String(icon).includes('.')
-</script>
-
-<template>
-  <div class="flex">
-    <div class="relative w-full p-6 bg-gray-200 rounded-lg dark:bg-gray-800 dark:bg-opacity-50">
-      <img v-if="isImage(icon)" :src="icon" class="inline-block w-16 h-16 mb-3">
-      <component :is="icon" v-else class="inline-block w-16 h-16 mb-3 text-6xl" />
-
-      <slot />
-
-      <div class="text-lg">
-        <h3 class="mb-2 font-semibold tracking-tight inline mr-1">
-          {{ title }}
-        </h3>
-        <div class="inline font-medium text-primary">
-          <slot name="description">
-            <p v-if="description" class="inline font-medium tracking-tight">
-              {{ description }}
-            </p>
-          </slot>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

package/theme/components/content/CardGrid.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-defineProps({
-  title: {
-    type: String,
-    default: 'Features',
-  },
-})
-</script>
-
-<template>
-  <section class="py-12 lg:py-24 bg-gray-50 dark:bg-gray-800 dark:bg-opacity-25">
-    <Container>
-      <h2 class="mb-8 text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl dark:text-gray-100">
-        <slot name="title" />
-      </h2>
-      <div
-        class="grid gap-4 font-semibold text-left text-gray-900 dark:text-gray-100 sm:grid-cols-2 lg:grid-cols-3 2xl:gap-8"
-      >
-        <slot />
-      </div>
-    </Container>
-  </section>
-</template>

package/theme/components/content/CodeBlock.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-defineProps({
-  /**
-     * Label to display for the tab
-     */
-  label: {
-    type: String,
-    required: true,
-  },
-  /**
-     * Select which tab should be active
-     */
-  active: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-     * Preiew block are bordered and have small padding.
-     */
-  preview: {
-    type: Boolean,
-    default: false,
-  },
-})
-</script>
-
-<template>
-  <div
-    class="code-block"
-    :class="{
-      active: active,
-      'p-4 border-2 border-t-0 border-gray-100 dark:border-gray-800 rounded-b-lg': preview
-    }"
-  >
-    <slot />
-  </div>
-</template>
-
-<style scoped>
-.code-block {
-  display: none;
-}
-
-.code-block.active {
-  display: block;
-}
-</style>

package/theme/components/content/CodeGroup.vue

@@ -1,135 +0,0 @@
-<script lang="ts">
-import TabsHeader from './TabsHeader.vue'
-import { defineComponent } from '#imports'
-
-const isTag = (slot: any, tag: string) => {
-  return slot.type && slot.type.tag && slot.type.tag === tag
-}
-
-export default defineComponent({
-  data() {
-    return {
-      activeTabIndex: 0,
-      /**
-       * A simple number that increases on every changes
-       */
-      counter: 0,
-    }
-  },
-  render() {
-    const slots = this.$slots.default()
-    const tabs = slots
-      .filter(
-        slot =>
-          isTag(slot, 'code-block')
-            || isTag(slot, 'code'),
-      )
-      .map((slot, index) => {
-        return {
-          label: slot?.props?.filename || slot?.props?.label || `${index}`,
-          active: slot?.props?.active || false,
-          component: slot,
-        }
-      })
-
-    return h(
-      'div',
-      {
-        class: {
-          'code-group': true,
-          'first-tab': this.activeTabIndex === 0,
-        },
-      },
-      [
-        h(
-          TabsHeader,
-          {
-            'ref': 'tabs-header',
-            'activeTabIndex': this.activeTabIndex,
-            tabs,
-            'onUpdate:activeTabIndex': $event => (this.activeTabIndex = $event),
-          },
-        ),
-        h(
-          'div',
-          {
-            class: 'code-group-content',
-            text: this.activeTabIndex,
-          },
-          // Map slots to content children
-          slots.map(
-            (slot, index) => h(
-              'div',
-              {
-                // Current slot is displayed, others are hidden
-                style: { display: index === this.activeTabIndex ? 'block' : 'none' },
-                class: {
-                  '': !isTag(slot, 'code'),
-                },
-              },
-              // Display direct children if not a ```code``` block
-              [
-                isTag(slot, 'code')
-                  ? slot
-                  : h(
-                    'div',
-                    {
-                      class: {
-                        'preview-canvas': true,
-                      },
-                    },
-                    [slot.children.default()],
-                  ),
-              ],
-            ),
-          ),
-        ),
-      ],
-    )
-  },
-})
-</script>
-
-<style lang="postcss">
-li {
-  .code-group {
-      @apply my-4;
-  }
-}
-
-html.dark {
-  .code-group-content {
-    .preview-canvas {
-      @apply p-4 my-0 overflow-x-auto leading-normal bg-gray-900 rounded-bl-lg rounded-br-lg rounded-tl-none rounded-tr-none z-0;
-    }
-  }
-}
-</style>
-
-<style scoped lang="postcss">
-.code-group {
-  @apply rounded-lg overflow-hidden border-2 surface-border;
-
-  :deep(.prose-code) {
-    @apply mt-0 mb-0 rounded-none !important;
-  }
-
-  :deep(pre) {
-    @apply mt-0 !important;
-  }
-
-  :deep(.filename) {
-    @apply hidden;
-  }
-}
-
-.code-group-content {
-  .preview-canvas {
-    @apply p-4 my-0 overflow-x-auto leading-normal bg-gray-100 dark:bg-gray-800 rounded-bl-lg rounded-br-lg z-0;
-
-    & > * {
-      @apply my-0;
-    }
-  }
-}
-</style>