docus 2.1.0 → 3.0.0-beta.11

package/theme/components/prose/ProseTh.vue

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

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

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

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

@@ -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/useScrollToHeading.ts

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

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

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

package/theme/composables/utils.ts

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

package/theme/layouts/default.vue

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

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

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

package/theme/nuxt.config.ts

@@ -0,0 +1,171 @@
+import { fileURLToPath } from 'url'
+import { defineNuxtConfig } from 'nuxt'
+import colors from 'tailwindcss/colors.js'
+import { resolve } from 'pathe'
+
+const themeDir = fileURLToPath(new URL('./', import.meta.url))
+const resolveThemeDir = (path: string) => resolve(themeDir, path)
+
+const plugins = []
+
+const components = [
+  {
+    prefix: '',
+    path: './components/app',
+    global: true,
+  },
+  {
+    prefix: '',
+    path: './components/docs',
+    global: true,
+  },
+  {
+    prefix: '',
+    path: './components/prose',
+    global: true,
+  },
+  {
+    prefix: '',
+    path: './components/globals',
+    global: true,
+  },
+  {
+    prefix: '',
+    path: './components/content',
+    global: true,
+  },
+  {
+    prefix: '',
+    path: './components/icons',
+    global: true,
+  },
+  {
+    prefix: '',
+    path: './components/icons',
+    global: true,
+  },
+]
+
+// Only register the plugin in development as it's not needed in production
+if (process.env.NODE_ENV === 'development') {
+  // Dev plugin
+  plugins.push({
+    src: resolveThemeDir('utils/plugin.ts'),
+  })
+}
+
+// Dev components
+components.push({
+  prefix: '',
+  path: './components/dev',
+  global: true,
+})
+
+export default defineNuxtConfig({
+  /*
+  runtimeConfig: {
+    public: {
+      plausible: {
+        domain: process.env.PLAUSIBLE_DOMAIN,
+      },
+    },
+  },
+  */
+  plugins,
+  head: {
+    title: 'Docus',
+    link: [
+      {
+        rel: 'stylesheet',
+        href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap',
+      },
+      { rel: 'preconnect', href: 'https://fonts.gstatic.com' },
+    ],
+    meta: [
+      { hid: 'og:site_name', property: 'og:site_name', content: 'Nuxt 3' },
+      { hid: 'og:type', property: 'og:type', content: 'website' },
+    ],
+  },
+  loading: {
+    color: '#00DC82',
+  },
+  /**
+   * Components
+   */
+  // To enable for `components` middleware
+  //
+  // components: [
+  //   './components/app',
+  //   './components/docs',
+  //   './components/prose',
+  //   './components/globals',
+  //   './components/content',
+  //   './components/dev',
+  //   {
+  //     prefix: '',
+  //     path: './components/icons',
+  //     global: true,
+  //   },
+  // ],
+  // To enable for working build
+  components,
+  css: [
+    resolveThemeDir('assets/css/fonts.css'),
+  ],
+  tailwindcss: {
+    viewer: false,
+    cssPath: resolveThemeDir('assets/css/main.css'),
+    config: {
+      darkMode: 'class',
+      theme: {
+        extend: {
+          colors: {
+            gray: colors.gray,
+            primary: colors.indigo,
+          },
+          fontFamily: {
+            sans: 'Inter, sans-serif',
+          },
+          spacing: {
+            base: '320px',
+            header: 'var(--header-height)',
+          },
+        },
+      },
+      plugins: [
+        require('@tailwindcss/typography'),
+        require('@tailwindcss/forms'),
+        require('@tailwindcss/line-clamp'),
+        require('@tailwindcss/aspect-ratio'),
+      ],
+      content: [
+        '~/content/**/*.{md,yml,json,json5,csv}',
+        resolveThemeDir('assets/**/*.{mjs,vue,js,ts}'),
+        resolveThemeDir('components/**/*.{mjs,vue,js,ts}'),
+        resolveThemeDir('layouts/**/*.{mjs,vue,js,ts}'),
+        resolveThemeDir('pages/**/*.{mjs,vue,js,ts}'),
+      ],
+      safelist: [24, 36, 48, 60, 72, 84, 96, 108, 120].map(number => `pl-[${number}px]`),
+    },
+  },
+  content: {
+    highlight: {
+      theme: 'one-dark-pro',
+      preload: ['json', 'js', 'ts', 'html', 'css', 'vue', 'diff', 'shell', 'markdown', 'yaml', 'bash'],
+    },
+  },
+  colorMode: {
+    classSuffix: '',
+  },
+  /**
+   * Modules
+   */
+  modules: [
+    '@nuxt/content',
+    '@nuxtjs/tailwindcss',
+    '@nuxtjs/color-mode',
+    '@nuxthq/admin',
+    // 'vue-plausible',
+    '@vueuse/nuxt',
+  ],
+})

package/theme/pages/[...slug].vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { useDocus, useHead } from '#imports'
+
+definePageMeta({
+  middleware: [
+    'page',
+    /* 'components' */
+  ],
+})
+
+const { page, theme } = useDocus()
+
+useHead({
+  title: `${theme.value?.title} | ${page.value?.title}`,
+  description: page.value?.description || theme.value?.description || '',
+  meta: [
+    { hid: 'og:site_name', property: 'og:site_name', content: 'Nuxt' },
+    { hid: 'og:type', property: 'og:type', content: 'website' },
+    { hid: 'twitter:site', name: 'twitter:site', content: theme.value?.url || theme.value?.twitter || '' },
+    {
+      hid: 'twitter:card',
+      name: 'twitter:card',
+      content: 'summary_large_image',
+    },
+    {
+      hid: 'og:image',
+      property: 'og:image',
+      content: theme.value?.cover || '',
+    },
+    {
+      hid: 'og:image:secure_url',
+      property: 'og:image:secure_url',
+      content: theme.value?.cover || '',
+    },
+    {
+      hid: 'og:image:alt',
+      property: 'og:image:alt',
+      content: theme.value?.coverAlt || '',
+    },
+    {
+      hid: 'twitter:image',
+      name: 'twitter:image',
+      content: theme.value?.cover || '',
+    },
+  ],
+})
+</script>
+
+<template>
+  <Content v-if="page" class="content" :document="page" />
+  <p v-else>
+    <Alert type="warning">
+      Page not found!
+    </Alert>
+  </p>
+</template>
+
+<style scoped>
+.content {
+  & > :first-child {
+    margin-top: 0 !important;
+  }
+}
+</style>

package/theme/plugins/menu.ts

@@ -0,0 +1,67 @@
+import { defineNuxtPlugin, ref } from '#imports'
+
+export default defineNuxtPlugin((ctx: any) => {
+  // Menu visible reference
+  const visible = ref(false)
+
+  // Current tab visible reference
+  const currentTab = ref()
+
+  // Scrollbar gap (used for responsive menu)
+  const scrollBarGap = ref()
+
+  // Open the menu
+  const open = () => (visible.value = true)
+
+  // Close the menu
+  const close = () => (visible.value = false)
+
+  // Toggle the menu (useful for one-off buttons)
+  const toggle = () => (visible.value = !visible.value)
+
+  // Toggle a tab from its id
+  const toggleTab = (tab: string) =>
+    currentTab.value === tab ? (currentTab.value = undefined) : (currentTab.value = tab)
+
+  // Watch route change, close on change
+  ctx.$router.afterEach(() => setTimeout(close, 50))
+
+  // Watch visible and remove overflow so the scrollbar disappears when menu is opened
+  if (process.client) {
+    watch(
+      visible,
+      (isVisible) => {
+        const html = document.querySelector('html')
+
+        if (isVisible) {
+          scrollBarGap.value = window.innerWidth - document.documentElement.clientWidth
+          html.style.overflow = 'hidden'
+          html.style.paddingRight = `${scrollBarGap.value}px`
+        }
+        else {
+          setTimeout(() => {
+            html.style.overflow = ''
+            html.style.paddingRight = ''
+          }, 100) /* had to put it, because of layout shift on leave transition */
+        }
+      },
+      {
+        immediate: true,
+      },
+    )
+  }
+
+  return {
+    provide: {
+      menu: {
+        scrollBarGap,
+        visible,
+        close,
+        open,
+        toggle,
+        currentTab,
+        toggleTab,
+      },
+    },
+  }
+})

package/theme/plugins/user-agent.ts

@@ -0,0 +1,27 @@
+import { defineNuxtPlugin, ref } from '#imports'
+
+export default defineNuxtPlugin(() => {
+  const isDesktopSafari = ref(false)
+  const isDesktopFirefox = ref(false)
+
+  const refresh = () => {
+    isDesktopSafari.value
+      = !/Mobi|Android/i.test(navigator.userAgent)
+      && /Safari/i.test(navigator.userAgent)
+      && !/Chrome|Chromium/i.test(navigator.userAgent)
+
+    isDesktopFirefox.value = !/Mobi|Android/i.test(navigator.userAgent) && /Firefox/i.test(navigator.userAgent)
+  }
+
+  if (process.client)
+    refresh()
+
+  return {
+    provide: {
+      userAgent: {
+        isDesktopSafari,
+        isDesktopFirefox,
+      },
+    },
+  }
+})

package/theme/utils/components.ts

@@ -0,0 +1,25 @@
+import { isHTMLTag } from '@vue/shared'
+import { pascalCase } from 'scule'
+import { useRuntimeConfig } from '#imports'
+
+export const flattenComponents = (body, flattened = []) => {
+  // Grab tags list from content config
+  const { content: { tags = {} } } = useRuntimeConfig().public
+
+  for (const node of body) {
+    if (node?.tag) {
+      let tag = node.tag
+
+      if (Object.keys(tags).includes(tag))
+        tag = pascalCase(`prose-${tag}`)
+
+      if (!isHTMLTag(tag) && !flattened.includes(tag))
+        flattened.push(pascalCase(tag))
+    }
+
+    if (node.children)
+      flattenComponents(node.children, flattened)
+  }
+
+  return flattened
+}