docus 2.1.0 → 3.0.0-beta.11

package/README.md

@@ -1,9 +1,11 @@
 <h1>
-  <img src="./.github/banner.png" >
- </h1>
+<img src="https://user-images.githubusercontent.com/904724/105075054-872fac80-5a89-11eb-8aab-46dd254ad986.png">
+</h1>
 
- <p>
+<p>
   <a href="https://www.npmjs.com/package/docus"><img src="https://badgen.net/npm/dm/docus" alt="Downloads"></a>
   <a href="https://www.npmjs.com/package/docus"><img src="https://badgen.net/npm/v/docus" alt="Version"></a>
   <a href="https://www.npmjs.com/package/docus"><img src="https://badgen.net/npm/license/docus" alt="License"></a>
- </p>
+</p>
+
+Docus is the fastest way to create documentations websites with [**Nuxt3**](https://v3.nuxtjs.org).

package/package.json

@@ -1,91 +1,47 @@
 {
+  "version": "3.0.0-beta.11",
   "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.21.1",
+    "@nuxtjs/eslint-config-typescript": "^9.0.0",
+    "eslint": "^8.14.0",
+    "jiti": "^1.13.0",
+    "nuxt": "npm:nuxt3@latest",
+    "parse-entities": "^4.0.0",
+    "typescript": "^4.6.4"
   },
   "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.4.0",
+    "@tailwindcss/typography": "^0.5.2",
+    "@vueuse/core": "^8.3.1",
+    "@vueuse/motion": "2.0.0-beta.12",
+    "@vueuse/nuxt": "^8.3.1",
+    "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": {
+    "./theme": "./theme/nuxt.config.ts",
+    "./theme/*": "./theme/*/*.*"
+  },
+  "files": [
+    "README.md",
+    "theme"
+  ]
 }

package/theme/app/router.options.ts

@@ -0,0 +1,18 @@
+import type { RouterConfig } from '@nuxt/schema'
+
+// https://router.vuejs.org/api/#routeroptions
+export default <RouterConfig>{
+  scrollBehavior: (to) => {
+    if (to.params?.smooth) {
+      return {
+        el: to.params?.smooth,
+        behavior: 'smooth',
+      }
+    }
+
+    // Scroll to top of window
+    window.scrollTo({
+      top: 0,
+    })
+  },
+}

package/theme/assets/css/fonts.css

@@ -0,0 +1,84 @@
+/* `font-light` */
+@font-face {
+  font-family: "RoobertPRO";
+  src: url("/fonts/RoobertPRO-Light.woff2") format("woff2"),
+       url("/fonts/RoobertPRO-Light.woff") format("woff");
+  font-weight: 300;
+} 
+@font-face {
+  font-family: "RoobertPRO";
+  src: url("/fonts/RoobertPRO-LightItalic.woff2") format("woff2"),
+       url("/fonts/RoobertPRO-LightItalic.woff") format("woff");
+  font-weight: 300;
+  font-style: italic;
+}
+/* `font-normal` */
+@font-face {
+  font-family: "RoobertPRO";
+  src: url("/fonts/RoobertPRO-Regular.woff2") format("woff2"),
+       url("/fonts/RoobertPRO-Regular.woff") format("woff");
+  font-weight: 400;
+}
+@font-face {
+  font-family: "RoobertPRO";
+  src: url("/fonts/RoobertPRO-RegularItalic.woff2") format("woff2"),
+       url("/fonts/RoobertPRO-RegularItalic.woff") format("woff");
+  font-weight: 400;
+  font-style: italic;
+}
+/* `font-medium */
+@font-face {
+  font-family: "RoobertPRO";
+  src: url("/fonts/RoobertPRO-Medium.woff2") format("woff2"),
+       url("/fonts/RoobertPRO-Medium.woff") format("woff");
+  font-weight: 500;
+}
+@font-face {
+  font-family: "RoobertPRO";
+  src: url("/fonts/RoobertPRO-MediumItalic.woff2") format("woff2"),
+       url("/fonts/RoobertPRO-MediumItalic.woff") format("woff");
+  font-weight: 500;
+  font-style: italic;
+}
+/* `font-semibold` */
+@font-face {
+  font-family: "RoobertPRO";
+  src: url("/fonts/RoobertPRO-SemiBold.woff2") format("woff2"),
+       url("/fonts/RoobertPRO-SemiBold.woff") format("woff");
+  font-weight: 600;
+}
+@font-face {
+  font-family: "RoobertPRO";
+  src: url("/fonts/RoobertPRO-SemiBoldItalic.woff2") format("woff2"),
+       url("/fonts/RoobertPRO-SemiBoldItalic.woff") format("woff");
+  font-weight: 600;
+  font-style: italic;
+}
+/* `font-bold` */
+@font-face {
+  font-family: "RoobertPRO";
+  src: url("/fonts/RoobertPRO-Bold.woff2") format("woff2"),
+       url("/fonts/RoobertPRO-Bold.woff") format("woff");
+  font-weight: 700;
+}
+@font-face {
+  font-family: "RoobertPRO";
+  src: url("/fonts/RoobertPRO-BoldItalic.woff2") format("woff2"),
+       url("/fonts/RoobertPRO-BoldItalic.woff") format("woff");
+  font-weight: 700;
+  font-style: italic;
+}
+/* `font-extrabold` */
+@font-face {
+  font-family: "RoobertPRO";
+  src: url("/fonts/RoobertPRO-Heavy.woff2") format("woff2"),
+       url("/fonts/RoobertPRO-Heavy.woff") format("woff");
+  font-weight: 800;
+}
+@font-face {
+  font-family: "RoobertPRO";
+  src: url("/fonts/RoobertPRO-HeavyItalic.woff2") format("woff2"),
+       url("/fonts/RoobertPRO-HeavyItalic.woff") format("woff");
+  font-weight: 800;
+  font-style: italic;
+}

package/theme/assets/css/main.css

@@ -0,0 +1,104 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Variables */
+:root {
+  --header-height: 4rem;
+  --codeblocks-background: theme('colors.gray.900');
+}
+
+@layer components {
+  /* Text primary */
+
+  .text-primary {
+    @apply text-gray-900 dark:text-gray-50;
+  }
+
+  /* Text secondary */
+
+  .text-secondary {
+    @apply text-gray-500 dark:text-gray-400;
+  }
+
+  .text-secondary-active {
+    @apply text-primary-500 dark:text-primary-400;
+  }
+
+  .text-secondary-hover {
+    @apply hover:text-primary-500 hover:dark:text-primary-400;
+  }
+
+  .text-secondary-group-hover {
+    @apply group-hover:dark:text-primary-400 group-hover:text-primary-500;
+  }
+
+  /* Transitions */
+
+  .transition-base {
+    @apply transition-colors transition-opacity duration-100 ease-in-out;
+  }
+
+  /* Surface */
+
+  .surface {
+    @apply dark:bg-gray-900 bg-white;
+  }
+
+  .surface-secondary {
+    @apply bg-gray-500 dark:bg-gray-400;
+  }
+
+  .blurry-surface {
+    @apply backdrop-blur bg-white/95 dark:bg-gray-900/95;
+  }
+
+  /* Borders */
+
+  .surface-border {
+    @apply border-gray-200 dark:border-gray-800;
+  }
+
+  .surface-border-hover {
+    @apply border-primary-200 dark:border-gray-700;
+  }
+
+  .surface-border-header {
+    @apply border-b border-gray-200 dark:border-gray-800 border-opacity-50;
+  }
+
+  /* Icons */
+
+  .icon-base {
+    @apply transition-base text-secondary text-secondary-hover;
+  }
+
+  /* Code blocks */
+
+  .code-background {
+    /* background-color: var(--codeblocks-background); */
+    @apply bg-gray-800;
+  }
+
+  /* Images */
+
+  .light-img {
+    @apply dark:hidden;
+  }
+
+  .dark-img {
+    @apply hidden;
+  }
+}
+
+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;
+}

package/theme/components/app/Container.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { classNames, computed } from '#imports'
+
+const props = defineProps({
+  padded: {
+    type: Boolean,
+    default: false,
+  },
+  constrained: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const containerClass = computed(() => classNames(
+  'mx-auto max-w-7xl px-4 sm:px-6',
+  props.padded && 'px-4',
+))
+</script>
+
+<template>
+  <div :class="containerClass">
+    <slot />
+  </div>
+</template>

package/theme/components/app/Footer.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed, useDocus } from '#imports'
+
+const { theme } = useDocus()
+
+const icons = computed(() => theme.value?.footer?.icons || [])
+</script>
+
+<template>
+  <footer class="py-6 sm:py-0 bg-gray-50 dark:bg-gray-800 dark:bg-opacity-25 h-[8rem] sm:h-[4rem]">
+    <Container class="flex h-full flex-col gap-y-4 sm:flex-row justify-between items-center">
+      <a
+        v-if="theme.footer.credits"
+        href="https://nuxtlabs.com"
+        rel="noopener"
+        target="_blank"
+        class="flex items-end text-secondary transition-base dark:hover:text-gray-100 hover:text-gray-600 mb-3 sm:mb-0"
+      >
+        <IconNuxtLabs class="mr-2" />
+        <p class="font-semibold text-sm">Made by Nuxt Labs</p>
+      </a>
+
+      <div class="flex">
+        <a
+          v-for="icon in icons"
+          :key="icon.label"
+          rel="noopener"
+          :aria-label="icon.label"
+          :href="icon.href"
+          target="_blank"
+          class="text-sm flex items-center font-medium p-1 icon-base"
+        >
+          <Component :is="icon.component" class="w-8 h-8" />
+        </a>
+
+        <SocialIcons size="w-8 h-8" padding="p-1" />
+      </div>
+    </Container>
+  </footer>
+</template>

package/theme/components/app/MobileNav.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { computed, useDocus, useMenu, useUserAgent, watch } from '#imports'
+
+const { navigation } = useDocus()
+
+const tree = computed(() => {
+  return navigation.value.filter(
+    (item) => {
+      if (item.slug === '/' || item.slug === '/templates')
+        return false
+      return true
+    },
+  )
+})
+
+const { scrollBarGap, visible, open, close, toggle } = useMenu()
+
+const { isDesktopSafari, isDesktopFirefox } = useUserAgent()
+
+const buttonStyles = 'w-12 h-8 focus:outline-none bg-warmgray-50 hover:bg-warmgray-100 dark:bg-warmgray-800 rounded-xl'
+
+watch(visible, v => (v ? open() : close()))
+
+// Necessary because of body lock layout shift
+const buttonBodyLockHack = computed(
+  () => `top: 1rem; right: calc(1.5rem + ${isDesktopSafari.value || isDesktopFirefox.value ? scrollBarGap.value : 0}px);`,
+)
+
+const surfaceBodyLockHack = computed(
+  () => `top: 0.5rem; right: calc(1rem + ${isDesktopSafari.value || isDesktopFirefox.value ? scrollBarGap.value : 0}px); bottom: 0.5rem; max-height: calc(100vh- 2rem); min-width: calc(320px - 2rem);`,
+)
+</script>
+
+<template>
+  <div class="relative">
+    <button :class="[buttonStyles]" class="z-10 relative" @click="toggle">
+      <IconDots class="w-6 h-6 icon-base h-full mx-auto" />
+    </button>
+
+    <ClientOnly>
+      <teleport to="body">
+        <!-- Scrim overlay -->
+        <div
+          :class="[visible ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none']"
+          class="xl:hidden fixed top-0 left-0 z-10 w-full h-full bg-warmgray-100 bg-opacity-50 dark:bg-warmgray-800 dark:bg-opacity-50 backdrop-blur transition"
+          @click="toggle"
+        />
+
+        <!-- clone AppHeader button, due to stacking context limitations -->
+        <button
+          :style="buttonBodyLockHack"
+          :class="[
+            buttonStyles,
+            visible
+              ? 'opacity-100 pointer-events-auto'
+              : `opacity-0 transition ${
+                isDesktopSafari || isDesktopFirefox ? 'duration-0' : 'duration-400'
+              } pointer-events-none`
+          ]"
+          class="xl:hidden z-30 fixed"
+          @click="toggle"
+        >
+          <IconLine class="w-6 h-6 icon-base h-full mx-auto" />
+        </button>
+
+        <!-- Nav menu surface -->
+        <div
+          :style="surfaceBodyLockHack"
+          :class="[visible ? 'opacity-100 scale-100 pointer-events-auto' : 'opacity-0 scale-95 pointer-events-none']"
+          class="fixed z-20 w-[calc(100%-3rem)] md:w-auto min-w-full md:min-w-[calc(320px-2rem)] transform origin-top-right transition-transform ease-out"
+        >
+          <div
+            class="lg:hidden pl-8 pr-0 overflow-y-auto mb-2 surface pb-6 pt-12 rounded-2xl shadow-xl border-2 surface-border max-h-full"
+          >
+            <DocsAsideTree :tree="tree" />
+
+            <div class="flex items-center justify-end px-6">
+              <ThemeSelect class="block" />
+            </div>
+          </div>
+        </div>
+      </teleport>
+    </ClientOnly>
+  </div>
+</template>

package/theme/components/app/Navbar.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from '#imports'
+
+const onTop = ref(true)
+
+function setOnTop(): void {
+  if (window.pageYOffset <= 0)
+    onTop.value = true
+  else onTop.value = false
+}
+
+onMounted(() => {
+  setOnTop()
+  document.addEventListener('scroll', setOnTop)
+})
+
+onUnmounted(() => document.removeEventListener('scroll', setOnTop))
+</script>
+
+<template>
+  <header class="sticky w-full top-0 surface surface-blurry border-b border-gray-200 dark:border-gray-800 border-opacity-50 h-header surface surface-blurry z-10">
+    <Container class="grid grid-cols-12 items-center h-full">
+      <div class="col-span-6 lg:col-span-3">
+        <NavbarLogo />
+      </div>
+
+      <div class="hidden lg:block lg:col-span-6">
+        <!-- <HeaderNavigation /> -->
+      </div>
+
+      <div class="col-span-6 lg:col-span-3 flex justify-end">
+        <MobileNav class="flex lg:hidden" />
+        <ThemeSelect class="hidden lg:block" />
+      </div>
+    </Container>
+  </header>
+</template>

package/theme/components/app/NavbarLogo.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed, useDocus } from '#imports'
+
+const { theme } = useDocus()
+const hasLogo = computed(() => theme.value?.header?.logo)
+const hasTitle = computed(() => theme.value?.header?.title)
+</script>
+
+<template>
+  <NuxtLink to="/" :aria-label="theme.header.title">
+    <!-- Only title -->
+    <span v-if="!hasLogo && hasTitle">
+      {{ theme.header.title }}
+    </span>
+
+    <!-- Title and Logo -->
+    <template v-else-if="hasLogo && hasTitle">
+      <Logo />
+
+      <span>
+        {{ theme.header.title }}
+      </span>
+    </template>
+
+    <!-- Only Logo -->
+    <Logo v-else-if="hasLogo" class="w-12 h-12" />
+
+    <!-- Placeholder -->
+    <template v-else>
+      <IconDots class="w-12 h-12" />
+    </template>
+  </NuxtLink>
+</template>

package/theme/components/app/Page.vue

@@ -0,0 +1,7 @@
+<template>
+  <main class="relative flex-1 pb-4 sm:pb-6 lg:py-8">
+    <Container padded>
+      <slot />
+    </Container>
+  </main>
+</template>

package/theme/components/app/PoweredByDocus.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="p-3 text-center border-t border-gray-200 border-dashed dark:border-gray-800 dark:bg-gray-900">
+    <a
+      href="https://docus.dev"
+      target="_blank"
+      class="text-xs text-gray-400 hover:text-gray-600 dark:text-gray-600 group dark:hover:text-gray-400"
+    >
+      Powered by <strong class="font-bold">Docus</strong>
+    </a>
+  </div>
+</template>