docus 1.0.7 → 3.0.0-beta.2

package/composables/useContent.ts

@@ -0,0 +1,156 @@
+import { withoutTrailingSlash } from 'ufo'
+import type { NavItem, ParsedContent } from '@nuxt/content/dist/runtime/types'
+import { computed, fetchContentNavigation, onBeforeUnmount, onMounted, queryContent, useNuxtApp, useRoute, useState } from '#imports'
+
+let closeHook
+
+export const useContent = () => {
+  const route = useRoute()
+
+  const path = computed(() => withoutTrailingSlash(route.path))
+
+  /**
+   * Navigation tree from root of app.
+   */
+  const navigation = useState<NavItem[]>('navigation', () => null)
+
+  /**
+   * Current page complete data.
+   */
+  const page = useState<ParsedContent>(`content-page-${path.value}`, () => null)
+
+  /**
+   * Previous and next page data.
+   * Format: [prev, next]
+   */
+  const surround = useState<ParsedContent[]>(`content-surround-${path.value}`, () => null)
+
+  /**
+   * Table of contents from parsed page.
+   */
+  const toc = computed(() => page?.value?.body?.toc?.links || [])
+
+  /**
+   * Content type from parsed page.
+   */
+  const type = computed(() => page.value?.meta?.type)
+
+  /**
+   * Next page from `surround`.
+   */
+  const next = computed(() => surround.value?.[1] || null)
+
+  /**
+   * Previous page from `surround`.
+   */
+  const prev = computed(() => surround.value?.[0] || null)
+
+  /**
+   * Page list fetching helper.
+   */
+  const fetchDir = async(path: string) => await queryContent(path).find()
+
+  /**
+   * Find first child link from a navigation node.
+   */
+  const findBottomLink = (link: NavItem) => {
+    let slug = link.slug
+
+    if (link.children && link.children.length)
+      slug = findBottomLink(link.children[0])
+
+    return slug
+  }
+
+  /**
+   * Find current navigation node from a path.
+   */
+  const navFromPath = (path: string, tree: NavItem[] = navigation.value) => {
+    for (const file of tree) {
+      if (file.children) {
+        const result = navFromPath(path, file.children)
+        if (result)
+          return result
+      }
+
+      if (file.slug === path)
+        return file
+    }
+  }
+
+  /**
+   * Navigation fetching helper.
+   */
+  const fetchNavigation = async(force = false) => {
+    if (navigation.value !== null && !force)
+      return
+
+    navigation.value = await fetchContentNavigation()
+  }
+
+  /**
+   * Local page fetching helper.
+   */
+  const fetchPage = async(force = false) => {
+    if (page.value !== null && !force)
+      return
+
+    const splitted = path.value.split('/')
+    const directory = splitted.slice(0, splitted.length - 1).join('/')
+
+    // Get navigation node from current path
+    const file = navFromPath(path.value, navigation.value)
+
+    if (file && !file.children) {
+      // Path queried has a page (and is not a directory)
+      await Promise.all([
+        queryContent().where({ id: file.id }).findOne() as Promise<ParsedContent>,
+        queryContent(directory).findSurround(path.value) as Promise<ParsedContent[]>,
+      ]).then(([_page, _surround]) => {
+        page.value = _page
+        surround.value = _surround
+      })
+    }
+    else if (file) {
+      navigateTo(findBottomLink(file))
+    }
+  }
+
+  // Re-fetch page on change (development only)
+  if (process.dev) {
+    onMounted(
+      () => {
+        // Cleanup previous hook before registering new one.
+        if (closeHook)
+          closeHook()
+
+        const { hook } = useNuxtApp()
+
+        closeHook = hook('app:data:refresh', async() => {
+          await fetchNavigation(true)
+          await fetchPage(true)
+        })
+      },
+    )
+    onBeforeUnmount(() => closeHook && closeHook())
+  }
+
+  return {
+    // useState references
+    navigation,
+    page,
+    surround,
+    // Fetching helpers
+    fetchDir,
+    fetchPage,
+    fetchNavigation,
+    // Computed values
+    next,
+    prev,
+    type,
+    toc,
+    // Methods
+    navFromPath,
+    findBottomLink,
+  }
+}

package/composables/useMenu.ts

@@ -0,0 +1,22 @@
+import { useState } from '#imports'
+
+export const useMenu = () => {
+  // Menu visible reference
+  const visible = useState('menu-visible', () => false)
+
+  // 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)
+
+  return {
+    open,
+    close,
+    toggle,
+    visible,
+  }
+}

package/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/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/composables/useTheme.ts

@@ -0,0 +1,12 @@
+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/default.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { useContent } from '#imports'
+
+const { page, fetchNavigation } = useContent()
+
+await fetchNavigation()
+</script>
+
+<template>
+  <div class="w-full flex min-h-screen flex-col">
+    <Navbar />
+
+    <div class="min-h-[calc(100vh-12rem)] sm:min-h-[calc(100vh-8rem)] flex flex-col">
+      <DocsPage>
+        <template #aside>
+          <DocsAside v-if="page?.value?.aside || typeof page?.value?.aside === 'undefined'" />
+        </template>
+
+        <DocsPageContent>
+          <div class="max-w-none">
+            <NuxtPage />
+          </div>
+        </DocsPageContent>
+      </DocsPage>
+    </div>
+
+    <Footer />
+  </div>
+</template>

package/layouts/page.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="w-full flex min-h-screen flex-col">
+    <Navbar />
+
+    <div class="min-h-[calc(100vh-12rem)] sm:min-h-[calc(100vh-8rem)] flex flex-col ">
+      <NuxtPage />
+    </div>
+
+    <Footer />
+  </div>
+</template>

package/nuxt.config.ts

@@ -0,0 +1,151 @@
+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)
+
+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',
+            },
+          ],
+        },
+      },
+    },
+  },
+  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
+   */
+  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,
+    },
+  ],
+  css: [
+    resolveThemeDir('assets/css/main.css'),
+    resolveThemeDir('assets/css/fonts.css'),
+    resolveThemeDir('assets/css/tailwind.css'),
+  ],
+  tailwindcss: {
+    viewer: false,
+
+    config: {
+      darkMode: 'class',
+      theme: {
+        extend: {
+          colors: {
+            gray: colors.gray,
+            primary: colors.indigo,
+          },
+          fontFamily: {
+            sans: 'Inter, sans-serif',
+          },
+        },
+      },
+      plugins: [
+        require('@tailwindcss/typography'),
+        require('@tailwindcss/forms'),
+        require('@tailwindcss/line-clamp'),
+        require('@tailwindcss/aspect-ratio'),
+      ],
+      content: [
+        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]`),
+      cssPath: resolveThemeDir('assets/css/tailwind.css'),
+    },
+  },
+  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',
+  ],
+})

package/package.json

@@ -1,72 +1,54 @@
 {
+  "version": "3.0.0-beta.2",
   "name": "docus",
-  "version": "1.0.7",
-  "description": "The Docus CLI.",
-  "repository": "https://github.com/docusgen/cli",
-  "bugs": {
-    "url": "https://github.com/docusgen/cli/issues"
-  },
-  "homepage": "https://github.com/docusgen/cli#readme",
-  "author": "Yaël GUILLOUX <yael.guilloux@gmail.com>",
-  "license": "MIT",
-  "keywords": [
-    "typescript",
-    "starter"
-  ],
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/src/index.d.ts",
   "scripts": {
-    "dev": "jiti scripts/watch.ts --cache",
-    "build": "unbuild",
-    "lint": "prettier -c --parser typescript \"{src,tests}/**/*.[jt]s?(x)\"",
-    "lint:fix": "yarn run lint --write",
-    "test:types": "tsc --build tsconfig.json",
-    "test:unit": "jest",
-    "test": "yarn run test:types && yarn run test:unit"
-  },
-  "engines": {
-    "node": ">=14.0.0"
+    "build": "nuxi build",
+    "dev": "nuxi dev",
+    "preview": "nuxi preview",
+    "lint": "eslint --ext .ts,.js,.vue,.css ."
   },
-  "bin": {
-    "create-docus": "dist/create-docus/create-docus.js"
+  "devDependencies": {
+    "@antfu/eslint-config": "^0.20.6",
+    "@nuxtjs/eslint-config-typescript": "^9.0.0",
+    "eslint": "^8.13.0",
+    "nuxt": "^3.0.0-rc.1",
+    "parse-entities": "^4.0.0",
+    "typescript": "^4.6.3"
   },
-  "files": [
-    "dist/**/*",
-    "LICENSE",
-    "README.md"
-  ],
   "dependencies": {
-    "degit": "^2.8.4",
-    "execa": "^5.1.1",
-    "kolorist": "^1.5.0",
-    "minimist": "^1.2.5",
-    "prompts": "^2.4.1"
+    "@iconify/vue": "^3.2.1",
+    "@nuxt/content": "npm:@nuxt/content-edge@latest",
+    "@nuxthq/admin": "npm:@nuxthq/admin-edge@latest",
+    "@nuxtjs/color-mode": "^3.0.2",
+    "@nuxtjs/tailwindcss": "^5.0.3",
+    "@tailwindcss/aspect-ratio": "^0.4.0",
+    "@tailwindcss/forms": "^0.5.0",
+    "@tailwindcss/line-clamp": "^0.3.1",
+    "@tailwindcss/typography": "^0.5.2",
+    "@vueuse/core": "^8.3.0",
+    "@vueuse/motion": "2.0.0-beta.12",
+    "clipboard": "^2.0.10",
+    "defu": "^6.0.0",
+    "lodash-es": "^4.17.21",
+    "tailwindcss": "^3.0.24",
+    "vue-plausible": "^1.3.1"
   },
-  "devDependencies": {
-    "@types/degit": "^2.8.3",
-    "@types/jest": "^27.0.1",
-    "@types/minimist": "^1.2.2",
-    "@types/prompts": "^2.0.14",
-    "chokidar": "^3.5.2",
-    "jest": "^27.0.6",
-    "jiti": "^1.11.0",
-    "lint-staged": "^11.1.2",
-    "pascalcase": "^1.0.0",
-    "prettier": "^2.3.2",
-    "ts-jest": "^27.0.5",
-    "typescript": "^4.3.5",
-    "unbuild": "^0.4.2"
-  },
-  "gitHooks": {
-    "pre-commit": "lint-staged"
+  "main": "./nuxt.config.ts",
+  "exports": {
+    ".": {
+      "require": "./nuxt.config.ts",
+      "import": "./nuxt.config.ts"
+    }
   },
-  "lint-staged": {
-    "*.js": [
-      "prettier --write"
-    ],
-    "*.ts?(x)": [
-      "prettier --parser=typescript --write"
-    ]
-  }
+  "files": [
+    "README.md",
+    "app",
+    "assets",
+    "components",
+    "composables",
+    "layouts",
+    "pages",
+    "public",
+    "nuxt.config.ts"
+  ]
 }

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useContent, useRouter } from '#imports'
+
+const router = useRouter()
+
+const { page, fetchPage } = useContent()
+
+await fetchPage()
+
+if (page.value && page.value.layout)
+  router.currentRoute.value.meta.layout = page.value.layout
+else
+  router.currentRoute.value.meta.layout = 'default'
+</script>
+
+<template>
+  <Content v-if="page" class="content" :document="page" />
+</template>
+
+<style scoped>
+.content {
+  & > :first-child {
+    margin-top: 0 !important;
+  }
+}
+</style>

package/public/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

package/dist/create-docus/create-docus.js

@@ -1,7 +0,0 @@
-#!/usr/bin/env node
-// #!/usr/bin/env node
-"use strict";
-
-var _index = require("./index");
-
-(0, _index.createDocus)().catch(console.log);