docus 1.0.7 → 3.0.0-beta.10

package/README.md

@@ -1,24 +1,11 @@
-# Docus CLI
+<h1>
+<img src="https://user-images.githubusercontent.com/904724/105075054-872fac80-5a89-11eb-8aab-46dd254ad986.png">
+</h1>
 
-The Docus CLI.
+<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>
 
-## Quick Setup
-
-Add `docus` package globally:
-
-```bash
-# Using Yarn
-yarn install --global docus
-# Using NPM
-npm install --global docus
-```
-
-## Commands
-
-TODO
-
-## Development
-
-1. Clone this repository
-2. Install dependencies using `yarn install`
-3. Start dev server using `yarn dev`
+Docus is the fastest way to create documentations websites with [**Nuxt3**](https://v3.nuxtjs.org).

package/package.json

@@ -1,72 +1,47 @@
 {
+  "version": "3.0.0-beta.10",
   "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.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"
   },
-  "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.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": {
-    "@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": {
+    "./theme": "./theme/nuxt.config.ts",
+    "./theme/*": "./theme/*/*.*"
   },
-  "lint-staged": {
-    "*.js": [
-      "prettier --write"
-    ],
-    "*.ts?(x)": [
-      "prettier --parser=typescript --write"
-    ]
-  }
+  "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>