docus 3.0.0-beta.3 → 3.0.0-beta.6

package/{components → theme/components}/docs/DocsToc.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { useContent, useRoute, useScrollToHeading, useScrollspy, watch } from '#imports'
+import { useDocus, useRoute, useScrollToHeading, useScrollspy, watch } from '#imports'
+
+const emit = defineEmits(['move'])
 
 const route = useRoute()
 
 const { activeHeadings, updateHeadings } = useScrollspy()
 
-const { toc, prev, next } = useContent()
+const { toc, prev, next } = useDocus()
 
 watch(
   () => route.path,
@@ -13,11 +15,11 @@ watch(
     if (process.client) {
       setTimeout(() => {
         updateHeadings([
-          ...document.querySelectorAll('.prose h1'),
-          ...document.querySelectorAll('.prose h2'),
-          ...document.querySelectorAll('.prose h3'),
+          ...document.querySelectorAll('.content h1'),
+          ...document.querySelectorAll('.content h2'),
+          ...document.querySelectorAll('.content h3'),
         ])
-      }, 1000)
+      }, 100)
     }
   }, {
     immediate: true,
@@ -25,30 +27,31 @@ watch(
 
 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-md text-secondary-group-hover transition-base">
+      <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.length">
+    <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-md">
+        <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">
-        <li v-for="link in toc" :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) ? 'u-border-gray-900' : 'u-border-gray-300'">
+      <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"
@@ -64,7 +67,7 @@ function scrollToHeading(id: string, scrollMarginCssVar: string) {
     </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-md text-secondary-group-hover transition-base">
+      <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>
 

package/{components → theme/components}/globals/Icon.vue

@@ -14,7 +14,7 @@ const icon = ref(null)
 
 icon.value = await loadIcon(props.name)
 
-watch(() => props.name, async() => {
+watch(() => props.name, async () => {
   icon.value = await loadIcon(props.name)
 })
 </script>

package/{components → theme/components}/globals/SocialIcons.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useTheme } from '#imports'
+import { useDocus } from '#imports'
 
 defineProps({
   size: {
@@ -12,7 +12,7 @@ defineProps({
   },
 })
 
-const theme = useTheme()
+const { theme } = useDocus()
 </script>
 
 <template>

package/theme/components/icons/IconTailwind.vue

@@ -0,0 +1,3 @@
+<template>
+  <svg fill="#06B6D4" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z" /></svg>
+</template>

package/{components → theme/components}/prose/ProseA.vue

@@ -26,7 +26,7 @@ defineProps({
 
 <style lang="postcss" scoped>
 :not(h1, h2, h3, h4) > a {
-  @apply font-medium no-underline d-prose-a-text d-prose-a-border hover:d-prose-a-border-hover;
+  @apply font-medium no-underline text-primary-500 border-b border-transparent hover:border-primary-500 transition-colors;
 }
 
 h1 a,
@@ -35,7 +35,7 @@ h3 a,
 h4 a {
   @apply relative;
   &::after {
-    @apply absolute pl-2 w-5 h-5 opacity-0;
+    @apply absolute pl-2 w-6 h-6 opacity-0;
     content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%23111827"%3E%3Cpath stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /%3E%3C/svg%3E');
   }
   &:hover {
@@ -51,7 +51,7 @@ h4 a {
     height: calc(100% + 4px);
   }
   &:hover:before {
-    @apply d-prose-a-headline-border;
+    @apply border-b border-dashed border-gray-900 dark:border-gray-100;
   }
 }
 

package/{components → theme/components}/prose/ProseBlockquote.vue

@@ -6,7 +6,7 @@
 
 <style lang="postcss" scoped>
 blockquote {
-  @apply text-base mt-[1.5em] mb-[1.5em] font-medium pl-4 d-prose-blockquote-text d-prose-blockquote-border;
+  @apply text-base mt-[1.5em] mb-[1.5em] font-medium pl-4 text-secondary border-l-2 border-gray-200 dark:border-gray-700;
 
   quotes: '201C' '201D' '2018' '2019';
 }

package/{components → theme/components}/prose/ProseCode.vue

@@ -23,8 +23,8 @@ defineProps({
 </script>
 
 <template>
-  <div class="prose-code w-full group">
-    <span v-if="filename" class="filename transition-base top-1 right-1 opacity-100 absolute right-0 z-0 m-1 py-1.5 px-2 text-gray-400 bg-gray-900 rounded-md font-mono text-xs leading-none tracking-tight">
+  <div class="prose-code text-gray-50 w-full group">
+    <span v-if="filename" class="filename transition-base top-2 right-2 opacity-100 absolute right-0 z-0 m-1 py-1.5 px-2 text-gray-400 bg-gray-900 rounded-lg font-mono text-xs leading-none tracking-tight">
       {{ filename }}
     </span>
 
@@ -40,8 +40,7 @@ div {
 }
 
 :deep(pre) {
-  @apply flex flex-1 p-4 my-0 overflow-x-auto leading-normal;
-  background-color: #282c34;
+  @apply flex flex-1 p-4 my-0 overflow-x-auto leading-relaxed text-sm code-background;
 }
 
 :deep(code) {

package/{components → theme/components}/prose/ProseCodeInline.vue

@@ -6,7 +6,7 @@
 
 <style lang="postcss" scoped>
 code {
-  @apply font-normal text-sm py-[3px] px-[6px] rounded-md bg-gray-100 text-gray-800 dark:text-gray-100 dark:bg-gray-800;
+  @apply font-normal text-sm py-[3px] px-[6px] rounded-lg bg-gray-100 text-gray-800 dark:text-gray-100 dark:bg-gray-800;
 }
 
 a code {
@@ -29,7 +29,7 @@ h4 a {
   }
 
   & code:before {
-    @apply absolute top-[-2px] left-[-2px] -z-[1] d-prose-code-inline-bg rounded-md pointer-events-none;
+    @apply absolute top-[-2px] left-[-2px] -z-[1] rounded-lg pointer-events-none;
     content: '';
     width: calc(100% + 4px);
     height: calc(100% + 4px);

package/{components → theme/components}/prose/ProseHr.vue

@@ -4,7 +4,7 @@
 
 <style lang="postcss" scoped>
 hr {
-  @apply d-prose-hr-border my-8;
+  @apply border-t border-gray-100 dark:border-gray-800 my-8;
 }
 
 hr + * {

package/{components → theme/components}/prose/ProseLi.vue

@@ -12,14 +12,14 @@ li {
 
 ul > li {
   &::before {
-    @apply absolute left-0 top-[0.5em] d-prose-ul-li-bullet rounded-full w-1.5 h-1.5;
+    @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 d-secondary-text;
+    @apply absolute left-0 top-0 text-secondary;
     content: counter(list-item, decimal) '.';
     content: counter(list-item, var(--list-counter-style, decimal)) '.';
   }

package/{components → theme/components}/prose/ProseTh.vue

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

package/{components → theme/components}/prose/ProseThead.vue

@@ -6,6 +6,6 @@
 
 <style lang="postcss" scoped>
 thead {
-  @apply d-prose-thead-border;
+  @apply border-b border-gray-200 dark:border-gray-700;
 }
 </style>

package/{components → theme/components}/prose/ProseTr.vue

@@ -6,6 +6,6 @@
 
 <style lang="postcss" scoped>
 tbody tr {
-  @apply d-prose-tr-border;
+  @apply border-b border-gray-100 dark:border-gray-800;
 }
 </style>

package/theme/composables/useDocus.ts

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

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

package/theme/composables/useUserAgent.ts

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

package/{composables/useTheme.ts → theme/composables/utils.ts}

@@ -1,11 +1,3 @@
-import { useRuntimeConfig } from '#imports'
-
-export const useTheme = () => {
-  const { theme } = useRuntimeConfig()
-
-  return theme
-}
-
 export const classNames = (...args: any[]) => {
   const classes = args.filter(Boolean).join(' ')
   return classes.length ? classes : undefined

package/{layouts → theme/layouts}/default.vue

@@ -1,19 +1,19 @@
-<script setup>
-import { useContent } from '#imports'
+<script setup lang="ts">
+import { useDocus } from '#imports'
 
-const { page, fetchNavigation } = useContent()
-
-await fetchNavigation()
+const { theme } = useDocus()
 </script>
 
 <template>
   <div class="w-full flex min-h-screen flex-col">
-    <Navbar />
+    <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 v-if="page?.value?.aside || typeof page?.value?.aside === 'undefined'" />
+          <DocsAside />
         </template>
 
         <DocsPageContent>

package/{layouts → theme/layouts}/page.vue

@@ -1,8 +1,16 @@
+<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 ">
+    <div class="min-h-[calc(100vh-12rem)] sm:min-h-[calc(100vh-8rem)] flex flex-col">
       <NuxtPage />
     </div>
 

package/theme/middleware/components.ts

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

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

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

package/theme/middleware/theme.global.ts

@@ -0,0 +1,12 @@
+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()
+  },
+)