docus 3.0.0-beta.8 → 3.0.0

package/theme/components/prose/ProseH3.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-defineProps<{ id: string }>()
-</script>
-
-<template>
-  <h3 :id="id">
-    <NuxtLink :href="`#${id}`">
-      <slot />
-    </NuxtLink>
-  </h3>
-</template>
-
-<style lang="postcss" scoped>
-h3 {
-  /* TODO */
-  /* extend.fontSize do not work in Windi */
-  font-size: 1.25rem;
-  @apply tracking-tight leading-snug font-semibold mt-[1.25em] mb-[0.5em];
-}
-
-h3 + * {
-  @apply mt-0;
-}
-</style>

package/theme/components/prose/ProseH4.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-defineProps<{ id: string }>()
-</script>
-
-<template>
-  <h4 :id="id">
-    <NuxtLink :href="`#${id}`">
-      <slot />
-    </NuxtLink>
-  </h4>
-</template>
-
-<style lang="postcss" scoped>
-h4 {
-  /* TODO */
-  /* extend.fontSize do not work in Windi */
-  font-size: 1.125rem;
-  @apply tracking-tight leading-snug font-semibold mt-[1.25em] mb-[0.5em];
-}
-
-h4 + * {
-  @apply mt-0;
-}
-</style>

package/theme/components/prose/ProseHr.vue

@@ -1,13 +0,0 @@
-<template>
-  <hr>
-</template>
-
-<style lang="postcss" scoped>
-hr {
-  @apply border-t border-gray-100 dark:border-gray-800 my-8;
-}
-
-hr + * {
-  @apply mt-0;
-}
-</style>

package/theme/components/prose/ProseImg.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-defineProps({
-  src: {
-    type: String,
-    default: '',
-  },
-  alt: {
-    type: String,
-    default: '',
-  },
-  width: {
-    type: [String, Number],
-    default: undefined,
-  },
-  height: {
-    type: [String, Number],
-    default: undefined,
-  },
-})
-</script>
-
-<template>
-  <NuxtImg :src="src" :alt="alt" :width="width" :height="height" />
-</template>
-
-<style lang="postcss" scoped>
-:deep(img) {
-  @apply my-[1em];
-}
-</style>

package/theme/components/prose/ProseLi.vue

@@ -1,31 +0,0 @@
-<template>
-  <li><slot /></li>
-</template>
-
-<style lang="postcss" scoped>
-li {
-  @apply relative my-[0.25em] pl-4;
-  p {
-    @apply my-[0.75em];
-  }
-}
-
-ul > li {
-  &::before {
-    @apply absolute left-0 top-[0.5em] surface-secondary rounded-full w-1.5 h-1.5;
-    content: '';
-  }
-}
-
-ol > li {
-  &::before {
-    @apply absolute left-0 top-0 text-secondary;
-    content: counter(list-item, decimal) '.';
-    content: counter(list-item, var(--list-counter-style, decimal)) '.';
-  }
-}
-
-:deep(.nuxt-content-highlight) {
-  @apply m-0;
-}
-</style>

package/theme/components/prose/ProseOl.vue

@@ -1,16 +0,0 @@
-<template>
-  <ol>
-    <slot />
-  </ol>
-</template>
-
-<style lang="postcss" scoped>
-ol {
-  @apply mx-0 p-0 my-[1.25em] list-none;
-
-  :deep(ul),
-  :deep(ol) {
-    @apply !my-[0.5em];
-  }
-}
-</style>

package/theme/components/prose/ProseP.vue

@@ -1,14 +0,0 @@
-<template>
-  <p><slot /></p>
-</template>
-
-<style lang="postcss" scoped>
-p {
-  @apply leading-relaxed my-4;
-
-  :deep(br) {
-    @apply block mt-4;
-    content: '';
-  }
-}
-</style>

package/theme/components/prose/ProseStrong.vue

@@ -1,14 +0,0 @@
-<template>
-  <strong>
-    <slot />
-  </strong>
-</template>
-
-<style lang="postcss" scoped>
-strong {
-  @apply font-semibold;
-}
-a strong {
-  @apply text-current;
-}
-</style>

package/theme/components/prose/ProseTable.vue

@@ -1,13 +0,0 @@
-<template>
-  <div class="max-w-full my-6 overflow-x-auto">
-    <table>
-      <slot />
-    </table>
-  </div>
-</template>
-
-<style lang="postcss" scoped>
-table {
-  @apply leading-5 text-sm w-full table-auto text-left;
-}
-</style>

package/theme/components/prose/ProseTbody.vue

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

package/theme/components/prose/ProseTd.vue

@@ -1,11 +0,0 @@
-<template>
-  <td>
-    <slot />
-  </td>
-</template>
-
-<style lang="postcss" scoped>
-tbody td {
-  @apply align-top first:pl-0 last:pr-0 p-[0.5em];
-}
-</style>

package/theme/components/prose/ProseTh.vue

@@ -1,11 +0,0 @@
-<template>
-  <th>
-    <slot />
-  </th>
-</template>
-
-<style lang="postcss" scoped>
-thead th {
-  @apply font-semibold text-secondary p-2 pt-0 align-bottom first:pl-0 last:pr-0;
-}
-</style>

package/theme/components/prose/ProseThead.vue

@@ -1,11 +0,0 @@
-<template>
-  <thead>
-    <slot />
-  </thead>
-</template>
-
-<style lang="postcss" scoped>
-thead {
-  @apply border-b border-gray-200 dark:border-gray-700;
-}
-</style>

package/theme/components/prose/ProseTr.vue

@@ -1,11 +0,0 @@
-<template>
-  <tr>
-    <slot />
-  </tr>
-</template>
-
-<style lang="postcss" scoped>
-tbody tr {
-  @apply border-b border-gray-100 dark:border-gray-800;
-}
-</style>

package/theme/components/prose/ProseUl.vue

@@ -1,15 +0,0 @@
-<template>
-  <ul>
-    <slot />
-  </ul>
-</template>
-
-<style lang="postcss" scoped>
-ul {
-  @apply list-none mx-0 p-0 my-[1.25em];
-  :deep(ul),
-  :deep(ol) {
-    @apply !my-[0.5em];
-  }
-}
-</style>

package/theme/composables/useDocus.ts

@@ -1,43 +0,0 @@
-import { useDocusState } from '../utils/state'
-import { computed } from '#imports'
-
-export const useDocus = () => {
-  const { theme, navigation, page, surround } = useDocusState()
-
-  /**
-   * Table of contents from parsed page.
-   */
-  const toc = computed(() => page?.value?.body?.toc || [])
-
-  /**
-   * Content type from parsed page.
-   */
-  const type = computed(() => page.value?.meta?.type)
-
-  /**
-   * Layout type from parsed page.
-   */
-  const layout = computed(() => page.value?.meta?.layout)
-
-  /**
-   * Next page from `surround`.
-   */
-  const next = computed(() => surround.value?.[1] || null)
-
-  /**
-   * Previous page from `surround`.
-   */
-  const prev = computed(() => surround.value?.[0] || null)
-
-  return {
-    theme,
-    navigation,
-    surround,
-    page,
-    toc,
-    type,
-    layout,
-    next,
-    prev,
-  }
-}

package/theme/composables/useMenu.ts

@@ -1,7 +0,0 @@
-import { useNuxtApp } from '#imports'
-
-export const useMenu = () => {
-  const { $menu } = useNuxtApp()
-
-  return $menu
-}

package/theme/composables/useScrollToHeading.ts

@@ -1,35 +0,0 @@
-export const useConvertPropToPixels = (prop: string): number => {
-  const tempDiv = document.createElement('div')
-
-  tempDiv.style.position = 'absolute'
-  tempDiv.style.opacity = '0'
-  tempDiv.style.height = getComputedStyle(document.documentElement).getPropertyValue(prop)
-
-  document.body.appendChild(tempDiv)
-
-  const pixels = parseInt(getComputedStyle(tempDiv).height)
-
-  document.body.removeChild(tempDiv)
-
-  return pixels
-}
-
-export const useScrollToHeading = (id: string, scrollMarginCssVar: string) => {
-  // Use replaceState to prevent page jump when adding hash
-  history.replaceState({}, '', `#${id}`)
-
-  // Do not remove setTimeout (does not work in Safari)
-  setTimeout(() => {
-    const escapedId = id.replace(/\./g, '\\.')
-
-    const heading = document.querySelector(`#${escapedId}`) as any
-
-    const offset = heading.offsetTop - useConvertPropToPixels(scrollMarginCssVar)
-
-    window.scrollTo({
-      top: offset,
-      left: 0,
-      behavior: 'smooth',
-    })
-  })
-}

package/theme/composables/useScrollspy.ts

@@ -1,46 +0,0 @@
-import type { Ref } from 'vue'
-import { onBeforeMount, onBeforeUnmount, ref, watch } from '#imports'
-
-/**
- * Scrollspy allows you to watch visible headings in a specific page.
- * Useful for table of contents live style updates.
- */
-export const useScrollspy = () => {
-  const observer = ref() as Ref<IntersectionObserver>
-  const visibleHeadings = ref([]) as Ref<string[]>
-  const activeHeadings = ref([]) as Ref<string[]>
-
-  const observerCallback = (entries: IntersectionObserverEntry[]) =>
-    entries.forEach((entry) => {
-      const id = entry.target.id
-
-      if (entry.isIntersecting)
-        visibleHeadings.value.push(id)
-      else
-        visibleHeadings.value = visibleHeadings.value.filter(t => t !== id)
-    })
-
-  const updateHeadings = (headings: Element[]) =>
-    headings.forEach((heading) => {
-      observer.value.observe(heading)
-    })
-
-  watch(visibleHeadings, (val, oldVal) => {
-    if (val.length === 0)
-      activeHeadings.value = oldVal
-    else
-      activeHeadings.value = val
-  })
-
-  // Create intersection observer
-  onBeforeMount(() => (observer.value = new IntersectionObserver(observerCallback)))
-
-  // Destroy it
-  onBeforeUnmount(() => observer.value?.disconnect())
-
-  return {
-    visibleHeadings,
-    activeHeadings,
-    updateHeadings,
-  }
-}

package/theme/composables/useUserAgent.ts

@@ -1,7 +0,0 @@
-import { useNuxtApp } from '#imports'
-
-export const useUserAgent = () => {
-  const { $userAgent } = useNuxtApp()
-
-  return $userAgent
-}

package/theme/composables/utils.ts

@@ -1,4 +0,0 @@
-export const classNames = (...args: any[]) => {
-  const classes = args.filter(Boolean).join(' ')
-  return classes.length ? classes : undefined
-}

package/theme/layouts/default.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { useDocus } from '#imports'
-
-const { theme } = useDocus()
-</script>
-
-<template>
-  <div class="w-full flex min-h-screen flex-col">
-    <Debug v-if="theme?.debug" :config="theme?.debug" />
-
-    <div class="min-h-[calc(100vh-12rem)] sm:min-h-[calc(100vh-8rem)] flex flex-col">
-      <Navbar />
-
-      <DocsPage>
-        <template #aside>
-          <DocsAside />
-        </template>
-
-        <DocsPageContent>
-          <div class="max-w-none">
-            <NuxtPage />
-          </div>
-        </DocsPageContent>
-      </DocsPage>
-    </div>
-
-    <Footer />
-  </div>
-</template>

package/theme/layouts/page.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import { useDocus } from '#imports'
-
-const { theme } = useDocus()
-</script>
-
-<template>
-  <div class="w-full flex min-h-screen flex-col">
-    <Debug v-if="theme?.debug" :config="theme?.debug" />
-
-    <Navbar />
-
-    <div class="min-h-[calc(100vh-12rem)] sm:min-h-[calc(100vh-8rem)] flex flex-col">
-      <NuxtPage />
-    </div>
-
-    <Footer />
-  </div>
-</template>

package/theme/middleware/components.ts

@@ -1,26 +0,0 @@
-import { flattenComponents } from '../utils/components'
-import { useDocusState } from '../utils/state'
-import * as Components from '#components'
-import { useNuxtApp } from '#imports'
-
-export default defineNuxtRouteMiddleware(
-  async () => {
-    const { page } = useDocusState()
-    const nuxtApp = useNuxtApp()
-
-    if (page.value) {
-      // Components used in page (prose + Vue components)
-      const components: string[] = flattenComponents(page.value.body.children)
-
-      // Preload components before rendering
-      for (const name of components) {
-        if (!nuxtApp.vueApp.component(name)) {
-          // eslint-disable-next-line no-console
-          console.log({ name, component: (Components as any)[name] })
-
-          nuxtApp.vueApp.component(name, (Components as any)[name])
-        }
-      }
-    }
-  },
-)

package/theme/middleware/navigation.global.ts

@@ -1,12 +0,0 @@
-import { useDocusState } from '../utils/state'
-import { queryNavigation } from '../utils/queries'
-import { defineNuxtRouteMiddleware } from '#imports'
-
-export default defineNuxtRouteMiddleware(
-  async () => {
-    const { navigation } = useDocusState()
-
-    if (!navigation.value)
-      await queryNavigation()
-  },
-)

package/theme/middleware/page.ts

@@ -1,8 +0,0 @@
-import { queryPage } from '../utils/queries'
-import { defineNuxtRouteMiddleware } from '#imports'
-
-export default defineNuxtRouteMiddleware(
-  async (to) => {
-    await queryPage(to)
-  },
-)

package/theme/middleware/theme.global.ts

@@ -1,12 +0,0 @@
-import { useDocusState } from '../utils/state'
-import { queryTheme } from '../utils/queries'
-import { defineNuxtRouteMiddleware } from '#imports'
-
-export default defineNuxtRouteMiddleware(
-  async () => {
-    const { theme } = useDocusState()
-
-    if (!theme.value)
-      await queryTheme()
-  },
-)