docus 3.0.0-beta.4 → 3.0.0-beta.5

package/{nuxt.config.ts → theme/nuxt.config.ts}

@@ -6,41 +6,72 @@ 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,
       },
-      theme: {
-        title: 'Docus',
-        twitter: '@docus_',
-        github: 'nuxtlabs/docus',
-        header: {
-          title: false,
-          logo: true,
-        },
-        footer: {
-          credits: {
-            icon: 'IconNuxtLabs',
-            text: 'Made by Nuxt Labs',
-          },
-          icons: [
-            {
-              label: 'NuxtJS',
-              href: 'https://nuxtjs.org',
-              component: 'IconNuxt',
-            },
-            {
-              label: 'Vue Telescope',
-              href: 'https://vuetelescope.com',
-              component: 'IconVueTelescope',
-            },
-          ],
-        },
-      },
     },
   },
+  */
+  plugins,
   head: {
     title: 'Docus',
     link: [
@@ -61,46 +92,29 @@ export default defineNuxtConfig({
   /**
    * Components
    */
-  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,
-    },
-  ],
+  // 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/main.css'),
     resolveThemeDir('assets/css/fonts.css'),
-    resolveThemeDir('assets/css/tailwind.css'),
   ],
   tailwindcss: {
     viewer: false,
-    cssPath: resolveThemeDir('assets/css/tailwind.css'),
+    cssPath: resolveThemeDir('assets/css/main.css'),
     config: {
       darkMode: 'class',
       theme: {
@@ -112,6 +126,10 @@ export default defineNuxtConfig({
           fontFamily: {
             sans: 'Inter, sans-serif',
           },
+          spacing: {
+            base: '320px',
+            header: 'var(--header-height)',
+          },
         },
       },
       plugins: [
@@ -121,6 +139,7 @@ export default defineNuxtConfig({
         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}'),
@@ -146,6 +165,7 @@ export default defineNuxtConfig({
     '@nuxtjs/tailwindcss',
     '@nuxtjs/color-mode',
     '@nuxthq/admin',
-    'vue-plausible',
+    // 'vue-plausible',
+    '@vueuse/nuxt',
   ],
 })

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

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+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,65 @@
+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,25 @@
+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
+}

package/theme/utils/navigation.ts

@@ -0,0 +1,49 @@
+import type { NavItem } from '@nuxt/content/dist/runtime/types'
+
+/**
+ * Find first child link from a navigation node.
+ */
+export const findBottomLink = (link: NavItem) => {
+  for (const child of link.children) {
+    if (!child.children)
+      return child.slug
+  }
+
+  for (const child of link.children) {
+    const result = findBottomLink(child)
+    if (result)
+      return result
+  }
+}
+
+/**
+ * Find current navigation directory from a path.
+ */
+export const navFromPath = (path: string, tree: NavItem[]) => {
+  for (const file of tree) {
+    if (file.slug === path && !file.id)
+      return file
+
+    if (file.children) {
+      const result = navFromPath(path, file.children)
+      if (result)
+        return result
+    }
+  }
+}
+
+/**
+ * Find a navigation node from a path.
+ */
+export const fileFromPath = (path: string, tree: NavItem[]) => {
+  for (const file of tree) {
+    if (file.children) {
+      const result = fileFromPath(path, file.children)
+      if (result)
+        return result
+    }
+
+    if (file.slug === path)
+      return file
+  }
+}

package/theme/utils/plugin.ts

@@ -0,0 +1,21 @@
+import { queryNavigation, queryPage, queryTheme } from './queries'
+import { useRoute } from '#imports'
+
+/**
+ * Plugin enabled only in development
+ * Ensure hot reload works with content sources
+ */
+export default defineNuxtPlugin(
+  (nuxt) => {
+    nuxt.hook(
+      'app:data:refresh',
+      async() => {
+        const route = useRoute()
+
+        await queryNavigation()
+        await queryTheme()
+        await queryPage(route)
+      },
+    )
+  },
+)

package/theme/utils/queries.ts

@@ -0,0 +1,68 @@
+import { withoutTrailingSlash } from 'ufo'
+import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
+import type { RouteLocationNormalized, RouteLocationNormalizedLoaded } from 'vue-router'
+import { defaultThemeConfig } from './theme'
+import { useDocusState } from './state'
+import { fetchContentNavigation, queryContent } from '#imports'
+
+export const queryPage = async(route: RouteLocationNormalized | RouteLocationNormalizedLoaded) => {
+  const path = withoutTrailingSlash(route.path)
+
+  const { page, surround } = useDocusState()
+
+  try {
+    await Promise.all([
+      queryContent().where({ slug: path }).findOne() as Promise<ParsedContent>,
+      queryContent().where({ partial: { $not: true }, navigation: { $not: false } }).findSurround(path) as Promise<ParsedContent[]>,
+    ]).then(
+      ([_page, _surround]) => {
+        if (_page)
+          page.value = _page
+        else page.value = undefined
+
+        if (_surround && _surround.length)
+          surround.value = _surround
+        else surround.value = undefined
+
+        // Handle layout update from page
+        if (_page?.layout)
+          route.meta.layout = _page?.layout
+        else
+          route.meta.layout = 'default'
+      },
+    )
+  }
+  catch (e) {
+    console.warn(`Could not find page for path ${path}!`)
+    page.value = undefined
+    surround.value = undefined
+  }
+}
+
+export const queryNavigation = async() => {
+  const { navigation } = useDocusState()
+
+  navigation.value = await fetchContentNavigation(queryContent().where({
+    navigation: {
+      $not: false,
+    },
+  }))
+}
+
+export const queryTheme = async() => {
+  const { theme } = useDocusState()
+
+  // Fetch _theme.yml at `content/` root.
+  const query = await queryContent().where({
+    id: 'content:_theme.yml',
+  }).findOne()
+
+  if (!query) {
+    // Assign default theme config if none found.
+    theme.value = defaultThemeConfig
+
+    return
+  }
+
+  theme.value = query.body
+}

package/theme/utils/state.ts

@@ -0,0 +1,32 @@
+import type { NavItem, ParsedContent } from '@nuxt/content/dist/runtime/types'
+import type { ThemeConfig } from './theme'
+
+export const useDocusState = () => {
+  /**
+   * Navigation tree from root of app.
+   */
+  const navigation = useState<NavItem[]>('docus-navigation', () => null)
+
+  /**
+   * Current page complete data.
+   */
+  const page = useState<ParsedContent>('docus-page', () => null)
+
+  /**
+   * Previous and next page data.
+   * Format: [prev, next]
+   */
+  const surround = useState<ParsedContent[]>('docus-page-surround', () => null)
+
+  /**
+   * Theme configuration.
+   */
+  const theme = useState<ThemeConfig>('docus-theme', () => null)
+
+  return {
+    navigation,
+    page,
+    surround,
+    theme,
+  }
+}

package/theme/utils/theme.ts

@@ -0,0 +1,64 @@
+export interface ThemeIcon {
+  label: string
+  href: string
+  component: string
+}
+
+export interface ThemeDebugConfig {
+  page: boolean
+  navigation: boolean
+  theme: boolean
+}
+
+export interface ThemeConfig {
+  title: string
+  description: string
+  twitter: string
+  github: string
+  cover: string
+  coverAlt: string
+  header: {
+    title: false | string
+    logo: boolean | string
+  }
+  footer: {
+    credits: false | {
+      icon: string
+      text: string
+    }
+    icons: ThemeIcon[]
+  }
+  debug: boolean | ThemeDebugConfig
+}
+
+export const defaultThemeConfig: ThemeConfig = {
+  title: 'Docus',
+  twitter: '@docus_',
+  github: 'nuxtlabs/docus',
+  description: 'Write pages in markdown, use Vue components and enjoy the power of Nuxt with a blazing fast developer experience.',
+  header: {
+    title: false,
+    logo: true,
+  },
+  cover: 'https://user-images.githubusercontent.com/904724/105075054-872fac80-5a89-11eb-8aab-46dd254ad986.png',
+  coverAlt: 'A screenshot of a website built with Docus with the Docus logo on top of it.',
+  footer: {
+    credits: {
+      icon: 'IconNuxtLabs',
+      text: 'Made by NuxtLabs',
+    },
+    icons: [
+      {
+        label: 'NuxtJS',
+        href: 'https://nuxtjs.org',
+        component: 'IconNuxtLabs',
+      },
+      {
+        label: 'Vue Telescope',
+        href: 'https://vuetelescope.com',
+        component: 'IconVueTelescope',
+      },
+    ],
+  },
+  debug: true,
+}

package/assets/css/main.css

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