docus 1.0.6 → 3.0.0-beta.1

package/composables/useMenu.ts

@@ -0,0 +1,20 @@
+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,45 @@
+import type { Ref } from 'vue'
+
+/**
+ * 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,10 @@
+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,27 @@
+<script setup>
+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.1",
   "name": "docus",
-  "version": "1.0.6",
-  "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,24 @@
+<script setup lang="ts">
+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);

package/dist/create-docus/index.js

@@ -1,122 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createDocus = createDocus;
-
-var _fs = _interopRequireDefault(require("fs"));
-
-var _path = _interopRequireDefault(require("path"));
-
-var _minimist = _interopRequireDefault(require("minimist"));
-
-var _prompts = _interopRequireDefault(require("prompts"));
-
-var _execa = _interopRequireDefault(require("execa"));
-
-var _helpers = require("../helpers");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const argv = (0, _minimist.default)(process.argv.slice(2));
-const {
-  motd,
-  primary,
-  secondary,
-  bold,
-  space,
-  broadcast
-} = (0, _helpers.log)();
-const cwd = process.cwd();
-
-async function createDocus() {
-  motd();
-  let targetDir = argv._[0];
-
-  if (!targetDir) {
-    const {
-      projectName
-    } = await (0, _prompts.default)({
-      type: "text",
-      name: "projectName",
-      message: "Project name:",
-      initial: "my-website"
-    });
-    targetDir = projectName.trim();
-  }
-
-  const packageName = await (0, _helpers.getValidPackageName)(targetDir);
-
-  const root = _path.default.join(cwd, targetDir);
-
-  await (0, _helpers.overwriteDir)(root);
-  space();
-  broadcast(secondary("Scaffolding project in ") + targetDir + secondary("..."));
-  const {
-    templateDir
-  } = await (0, _helpers.getTemplate)();
-
-  const write = (file, content = void 0) => {
-    const targetPath = _path.default.join(root, file);
-
-    if (content) _fs.default.writeFileSync(targetPath, content);else (0, _helpers.copy)(_path.default.join(templateDir, file), targetPath);
-  };
-
-  const files = _fs.default.readdirSync(templateDir);
-
-  for (const file of files.filter(f => f !== "package.json")) write(file);
-
-  const pkg = require(_path.default.join(templateDir, "package.json"));
-
-  pkg.name = packageName;
-  write("package.json", JSON.stringify(pkg, null, 2));
-  const pkgManager = /pnpm/.test(process.env.npm_execpath || "") || /pnpm/.test(process.env.npm_config_user_agent || "") ? "pnpm" : /yarn/.test(process.env.npm_execpath || "") ? "yarn" : "npm";
-
-  const related = _path.default.relative(cwd, root);
-
-  broadcast(primary("Done."));
-  space();
-  const {
-    yes
-  } = await (0, _prompts.default)({
-    type: "confirm",
-    name: "yes",
-    initial: "Y",
-    message: "Install and start it now?"
-  });
-  if (yes) await startProject(root);else startItLater(pkgManager, root, related);
-}
-
-async function startProject(projectPath) {
-  space();
-  const {
-    agent
-  } = await (0, _prompts.default)({
-    name: "agent",
-    type: "select",
-    message: "Choose the agent",
-    choices: ["yarn", "npm", "pnpm"].map(i => ({
-      value: i,
-      title: i
-    }))
-  });
-  if (!agent) return;
-  await (0, _execa.default)(agent, ["install"], {
-    stdio: "inherit",
-    cwd: projectPath
-  });
-  await (0, _execa.default)(agent, ["run", "dev"], {
-    stdio: "inherit",
-    cwd: projectPath
-  });
-}
-
-function startItLater(pkgManager, root, dir) {
-  space();
-  broadcast(secondary("Start it later with:"));
-  space();
-  if (root !== cwd) broadcast(primary(`cd ${bold(dir)}`));
-  broadcast(primary(`${pkgManager === "yarn" ? "yarn" : `${pkgManager} install`}`));
-  broadcast(primary(`${pkgManager === "yarn" ? "yarn dev" : `${pkgManager} run dev`}`));
-}