docus 3.0.0-beta.4 → 3.0.0-beta.7

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.0-beta.4",
+  "version": "3.0.0-beta.7",
   "name": "docus",
   "scripts": {
     "build": "nuxi build",
@@ -8,12 +8,13 @@
     "lint": "eslint --ext .ts,.js,.vue,.css ."
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.20.6",
+    "@antfu/eslint-config": "^0.21.1",
     "@nuxtjs/eslint-config-typescript": "^9.0.0",
-    "eslint": "^8.13.0",
-    "nuxt": "^3.0.0-rc.1",
+    "eslint": "^8.14.0",
+    "jiti": "^1.13.0",
+    "nuxt": "npm:nuxt3@latest",
     "parse-entities": "^4.0.0",
-    "typescript": "^4.6.3"
+    "typescript": "^4.6.4"
   },
   "dependencies": {
     "@iconify/vue": "^3.2.1",
@@ -23,10 +24,11 @@
     "@nuxtjs/tailwindcss": "^5.0.3",
     "@tailwindcss/aspect-ratio": "^0.4.0",
     "@tailwindcss/forms": "^0.5.0",
-    "@tailwindcss/line-clamp": "^0.3.1",
+    "@tailwindcss/line-clamp": "^0.4.0",
     "@tailwindcss/typography": "^0.5.2",
-    "@vueuse/core": "^8.3.0",
+    "@vueuse/core": "^8.3.1",
     "@vueuse/motion": "2.0.0-beta.12",
+    "@vueuse/nuxt": "^8.3.1",
     "clipboard": "^2.0.10",
     "defu": "^6.0.0",
     "lodash-es": "^4.17.21",
@@ -35,20 +37,11 @@
   },
   "main": "./nuxt.config.ts",
   "exports": {
-    ".": {
-      "require": "./nuxt.config.ts",
-      "import": "./nuxt.config.ts"
-    }
+    "./theme": "./theme/nuxt.config.ts",
+    "./theme/*": "./theme/*/*.*"
   },
   "files": [
     "README.md",
-    "app",
-    "assets",
-    "components",
-    "composables",
-    "layouts",
-    "pages",
-    "public",
-    "nuxt.config.ts"
+    "theme"
   ]
 }

package/theme/assets/css/main.css

@@ -0,0 +1,104 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Variables */
+:root {
+  --header-height: 4rem;
+  --codeblocks-background: theme('colors.gray.900');
+}
+
+@layer components {
+  /* Text primary */
+
+  .text-primary {
+    @apply text-gray-900 dark:text-gray-50;
+  }
+
+  /* Text secondary */
+
+  .text-secondary {
+    @apply text-gray-500 dark:text-gray-400;
+  }
+
+  .text-secondary-active {
+    @apply text-primary-500 dark:text-primary-400;
+  }
+
+  .text-secondary-hover {
+    @apply hover:text-primary-500 hover:dark:text-primary-400;
+  }
+
+  .text-secondary-group-hover {
+    @apply group-hover:dark:text-primary-400 group-hover:text-primary-500;
+  }
+
+  /* Transitions */
+
+  .transition-base {
+    @apply transition-colors transition-opacity duration-100 ease-in-out;
+  }
+
+  /* Surface */
+
+  .surface {
+    @apply dark:bg-gray-900 bg-white;
+  }
+
+  .surface-secondary {
+    @apply bg-gray-500 dark:bg-gray-400;
+  }
+
+  .blurry-surface {
+    @apply backdrop-blur bg-white/95 dark:bg-gray-900/95;
+  }
+
+  /* Borders */
+
+  .surface-border {
+    @apply border-gray-200 dark:border-gray-800;
+  }
+
+  .surface-border-hover {
+    @apply border-primary-200 dark:border-gray-700;
+  }
+
+  .surface-border-header {
+    @apply border-b border-gray-200 dark:border-gray-800 border-opacity-50;
+  }
+
+  /* Icons */
+
+  .icon-base {
+    @apply transition-base text-secondary text-secondary-hover;
+  }
+
+  /* Code blocks */
+
+  .code-background {
+    /* background-color: var(--codeblocks-background); */
+    @apply bg-gray-800;
+  }
+
+  /* Images */
+
+  .light-img {
+    @apply dark:hidden;
+  }
+
+  .dark-img {
+    @apply hidden;
+  }
+}
+
+html {
+  @apply text-primary bg-white overflow-y-scroll;
+
+  &.dark {
+    @apply bg-gray-900;
+  }
+}
+
+body {
+  @apply antialiased font-sans text-gray-700 dark:text-gray-200;
+}

package/{components → theme/components}/app/Footer.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { computed, useTheme } from '#imports'
+import { computed, useDocus } from '#imports'
 
-const { footer } = useTheme()
+const { theme } = useDocus()
 
-const icons = computed(() => footer?.icons || [])
+const icons = computed(() => theme.value?.footer?.icons || [])
 </script>
 
 <template>
   <footer class="py-6 sm:py-0 bg-gray-50 dark:bg-gray-800 dark:bg-opacity-25 h-[8rem] sm:h-[4rem]">
     <Container class="flex h-full flex-col gap-y-4 sm:flex-row justify-between items-center">
       <a
-        v-if="footer.credits"
+        v-if="theme.footer.credits"
         href="https://nuxtlabs.com"
         rel="noopener"
         target="_blank"

package/theme/components/app/MobileNav.vue

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

@@ -0,0 +1,37 @@
+<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/{components → theme/components}/app/NavbarLogo.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed, useTheme } from '#imports'
+import { computed, useDocus } from '#imports'
 
-const theme = useTheme()
-const hasLogo = computed(() => theme.header.logo)
-const hasTitle = computed(() => theme.header.title)
+const { theme } = useDocus()
+const hasLogo = computed(() => theme.value?.header?.logo)
+const hasTitle = computed(() => theme.value?.header?.title)
 </script>
 
 <template>

package/{components → theme/components}/content/ButtonLink.vue

@@ -32,7 +32,7 @@ const isExternal = computed(
 
 <style lang="postcss" scoped>
 a.button-link {
-  @apply inline-flex items-center flex-none rounded-md 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;
+  @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;

package/{components → theme/components}/content/CodeGroup.vue

@@ -91,18 +91,16 @@ export default defineComponent({
 </script>
 
 <style lang="postcss">
-.prose {
-  li {
-    .code-group {
+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-lg rounded-tl-none rounded-tr-none z-0;
+      @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;
     }
   }
 }
@@ -110,8 +108,10 @@ html.dark {
 
 <style scoped lang="postcss">
 .code-group {
+  @apply rounded-lg overflow-hidden border-2 surface-border;
+
   :deep(.prose-code) {
-    @apply mt-0 rounded-tl-none rounded-tr-none !important;
+    @apply mt-0 mb-0 rounded-none !important;
   }
 
   :deep(pre) {

package/{components → theme/components}/content/Sandbox.vue

@@ -64,7 +64,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="w-full min-h-[500px] mx-auto mb-6 overflow-hidden text-3xl rounded-md sandbox mt-4">
+  <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"
@@ -96,7 +96,7 @@ onMounted(() => {
 <style lang="postcss" scoped>
 .sandbox,
 .sandbox iframe {
-  @apply w-full rounded-md rounded-tl-none rounded-tr-none overflow-hidden h-64;
+  @apply w-full rounded-lg rounded-tl-none rounded-tr-none overflow-hidden h-64;
   height: 700px;
 }
 </style>

package/{components → theme/components}/content/TabsHeader.vue

@@ -16,7 +16,7 @@ defineEmits(['update:activeTabIndex'])
 </script>
 
 <template>
-  <div class="relative text-white rounded-t-lg bg-gray-200 dark:bg-gray-700">
+  <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"
@@ -29,7 +29,7 @@ defineEmits(['update:activeTabIndex'])
         {{ 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-md" />
+        <span class="flex w-full h-full bg-gray-300 dark:bg-gray-600 rounded-lg" />
       </span>
     </div>
   </div>

package/theme/components/dev/Debug.vue

@@ -0,0 +1,66 @@
+<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/{components → theme/components}/docs/DocsAside.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, useContent } from '#imports'
+import { computed, useDocus } from '#imports'
 
-const { navigation } = useContent()
+const { navigation } = useDocus()
 
 const tree = computed(() => {
   return navigation.value.filter(

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

@@ -30,7 +30,7 @@ function isActive(link) {
 function onClick(link) {
   if (link.children?.length) {
     // Open dir when element is collapsible
-    openDir(link.slug)
+    toggleDir(link.slug)
 
     // Select element for mobile nav
     if (props.max !== null && props.level + 1 === props.max)
@@ -42,7 +42,7 @@ function onClick(link) {
   }
 }
 
-function openDir(slug, force?) {
+function toggleDir(slug, force?) {
   isChildOpen[slug] = force ? true : !isChildOpen[slug]
 }
 
@@ -50,10 +50,12 @@ watch(
   () => route.path,
   () => {
     const paths = route.path.split('/')
-    for (let i = paths.length - 1; i > 1; i--) {
+    for (let i = paths.length; i > 1; i--) {
       paths.pop()
-      openDir(paths.join('/'), true)
+      toggleDir(paths.join('/'), true)
     }
+
+    toggleDir(route.path, true)
   },
   { immediate: true },
 )
@@ -71,11 +73,11 @@ watch(
       }"
     >
       <NuxtLink
-        class="block py-1.5 flex items-center justify-between focus:outline-none cursor-pointer font-semibold"
+        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': 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)

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

@@ -6,7 +6,6 @@
       <Container padded>
         <div class="grid grid-cols-10 gap-8 relative">
           <aside
-            v-if="$slots.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" />

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>