docus 2.1.0 → 3.0.0-beta.3

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,91 +1,54 @@
 {
+  "version": "3.0.0-beta.3",
   "name": "docus",
-  "version": "2.1.0",
-  "description": "The Modern Website Generator.",
-  "keywords": [
-    "nuxt",
-    "module",
-    "nuxt-module",
-    "docus-core"
-  ],
-  "repository": "https://github.com/docusgen/docus",
-  "license": "MIT",
-  "exports": {
-    ".": "./dist/index.mjs"
-  },
-  "main": "./dist/index.mjs",
-  "module": "./dist/index.mjs",
-  "types": "./types.d.ts",
-  "files": [
-    "dist",
-    "types.d.ts",
-    "shims.d.ts"
-  ],
   "scripts": {
-    "build": "unbuild",
-    "dev": "nuxt dev example",
-    "generate": "nuxt generate example",
-    "start": "nuxt start example",
-    "lint": "eslint --ext .js,.ts,.vue .",
-    "test": "yarn lint && mocha --timeout 10000 --exit -r jiti/register test/**/*.test.ts",
-    "clean:example": "rm -rf example/.nuxt example/node_modules",
-    "clean:dist": "rm -rf dist node_modules",
-    "clean": "yarn clean:example && yarn clean:dist"
+    "build": "nuxi build",
+    "dev": "nuxi dev",
+    "preview": "nuxi preview",
+    "lint": "eslint --ext .ts,.js,.vue,.css ."
   },
-  "resolutions": {
-    "mdast-util-from-markdown": "1.0.4"
+  "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"
   },
   "dependencies": {
-    "@docus/cli": "^1.1.0",
-    "@docus/mdc": "npm:@docus/mdc-edge@latest",
-    "@nuxt/image": "^0.6.0",
-    "@nuxt/kit": "npm:@nuxt/kit-edge@latest",
-    "@nuxtjs/i18n": "^7.2.0",
-    "chalk": "^4.1.2",
-    "clear-module": "^4.1.2",
-    "consola": "^2.15.3",
-    "core-js": "3",
-    "debounce": "^1.2.1",
-    "defu": "^5.0.0",
-    "glob": "^7.2.0",
-    "h3": "^0.3.3",
-    "iso-639-1": "^2.1.10",
-    "jiti": "^1.12.9",
-    "micromatch": "^4.0.4",
-    "murmurhash-es": "^0.1.1",
-    "node-fetch": "^2.6.6",
-    "nuxt-component-meta": "^0.0.7",
-    "pathe": "^0.2.0",
-    "property-information": "6.1.1",
-    "scule": "^0.2.1",
-    "ufo": "^0.7.9",
-    "unctx": "^1.0.2",
-    "unstorage": "^0.3.3",
-    "ws": "^8.3.0"
+    "@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": {
-    "@babel/preset-env": "latest",
-    "@babel/preset-typescript": "latest",
-    "@nuxt/bridge": "npm:@nuxt/bridge-edge@latest",
-    "@nuxt/test-utils": "latest",
-    "@nuxt/types": "^2.15.8",
-    "@nuxtjs/eslint-config-typescript": "latest",
-    "@types/chai": "^4.2.22",
-    "@types/debounce": "^1.2.1",
-    "@types/glob": "^7.2.0",
-    "@types/micromatch": "^4.0.2",
-    "@types/mocha": "^9.0.0",
-    "@types/node-fetch": "^3.0.3",
-    "@types/ws": "^8.2.0",
-    "chai": "^4.3.4",
-    "eslint": "^8.3.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-nuxt": "^3.0.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "mocha": "^9.1.3",
-    "nuxt-edge": "^2.16.0-27295215.ab1c6cb4",
-    "playwright": "^1.16.3",
-    "prettier": "^2.4.1",
-    "unbuild": "^0.5.13"
-  }
+  "main": "./nuxt.config.ts",
+  "exports": {
+    ".": {
+      "require": "./nuxt.config.ts",
+      "import": "./nuxt.config.ts"
+    }
+  },
+  "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/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.