docus 2.1.0 → 3.0.0-beta.1

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/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/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/assets/css/main.css

@@ -0,0 +1,11 @@
+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/assets/css/tailwind.css

@@ -0,0 +1,282 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  /* Base */
+  .text-primary {
+    @apply text-gray-900 dark:text-gray-50;
+  }
+
+  .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;
+  }
+
+  .transition-base {
+    @apply transition-colors transition-opacity duration-100 ease-in-out;
+  }
+
+  /* Icons */
+  .icon-base {
+    @apply transition-base text-secondary text-secondary-hover;
+  }
+
+  /* ProseA */
+  .d-prose-a-text {
+    @apply text-primary-500;
+  }
+
+  .d-prose-a-border {
+    @apply border-b border-transparent;
+  }
+
+  .d-prose-a-border-hover {
+    @apply border-b border-primary-500;
+  }
+
+  .d-prose-a-headline-border {
+    @apply border-b border-dashed border-gray-900 dark:border-gray-100;
+  }
+
+  /* ProseBlockquote */
+  .d-prose-blockquote-border {
+    @apply border-l-2 border-gray-200 dark:border-gray-700;
+  }
+
+  .d-prose-blockquote-text {
+    @apply text-secondary;
+  }
+
+  /** UNCONVERTED **/
+  .d-body-bg {
+    @apply bg-white dark:bg-gray-900;
+  }
+
+  .d-body-text-color {
+    @apply text-gray-900 dark:text-gray-50;
+  }
+
+  .d-secondary-bg {
+    @apply bg-gray-500 dark:bg-gray-400;
+  }
+
+  .d-secondary-text {
+    @apply text-gray-500 dark:text-gray-400;
+  }
+
+  .d-secondary-text-hover {
+    @apply text-primary-500 dark:text-primary-400;
+  }
+
+  .d-tertiary-text {
+    @apply text-gray-400 dark:text-gray-500;
+  }
+
+  .d-border-tertiary {
+    @apply border-gray-400 dark:border-gray-500;
+  }
+
+  .d-primary-text-hover {
+    @apply text-gray-600 dark:text-gray-400;
+  }
+
+  .d-secondary-text-active {
+    @apply text-gray-900 dark:text-gray-300;
+  }
+
+  .d-prose-code-inline-bg {
+    background-color: #282c34;
+  }
+
+  .d-prose-code-bg {
+    background-color: #282c34;
+  }
+
+  .d-prose-thead-border {
+    @apply border-b border-gray-200 dark:border-gray-700;
+  }
+
+  .d-prose-tr-border {
+    @apply border-b border-gray-100 dark:border-gray-800;
+  }
+
+  .d-prose-blockquote-border {
+    @apply border-l-2 border-gray-200 dark:border-gray-700;
+  }
+
+  .d-prose-blockquote-text {
+    @apply d-secondary-text;
+  }
+
+  .d-prose-a-text {
+    @apply text-primary-500;
+  }
+
+  .d-prose-a-border {
+    @apply border-b border-transparent;
+  }
+
+  .d-prose-a-border-hover {
+    @apply border-b border-primary-500;
+  }
+
+  .d-prose-a-headline-border {
+    @apply border-b border-dashed border-gray-900 dark:border-gray-100;
+  }
+
+  .d-text-primary {
+    @apply text-primary-500 dark:text-primary-400;
+  }
+
+  .d-border-primary {
+    @apply border-primary-500 dark:border-primary-400;
+  }
+
+  .d-bg-primary {
+    @apply bg-primary-500 dark:bg-primary-400;
+  }
+
+  .d-page-mobile-toc-bg {
+    @apply bg-white bg-opacity-80 dark:bg-gray-900 dark:bg-opacity-80;
+  }
+
+  .d-aside-header-bg {
+    @apply bg-gray-50 dark:bg-gray-800;
+  }
+
+  .d-active-aside-navigation-item-bg {
+    @apply bg-primary-50 dark:bg-primary-900;
+  }
+
+  .d-active-aside-navigation-item-text {
+    @apply text-primary-500 dark:text-primary-400 ;
+  }
+
+  .d-code-group-header-bg {
+    @apply bg-gray-200 dark:bg-gray-700;
+  }
+
+  .d-code-group-tab {
+    @apply bg-gray-300 dark:bg-gray-600;
+  }
+
+  .d-prose-code-inline-in-heading-border-hover {
+    @apply border-gray-500 dark:border-gray-200;
+  }
+
+  .d-prose-hr-border {
+    @apply border-t border-gray-100 dark:border-gray-800;
+  }
+
+  .d-prose-ul-li-bullet {
+    @apply d-secondary-bg;
+  }
+
+  .d-text-icon {
+    @apply d-secondary-text hover:d-secondary-text-hover;
+  }
+
+  .d-icon {
+    @apply d-text-icon focus:outline-none;
+  }
+
+  .light-img {
+    @apply dark:hidden;
+  }
+
+  .dark-img {
+    @apply light:hidden;
+  }
+
+  .d-max-w-container {
+    @apply max-w-7xl;
+  }
+
+  .d-px-container {
+    @apply px-4 sm:px-6;
+  }
+
+  .d-container {
+    @apply d-max-w-container mx-auto;
+  }
+
+  .d-container-content {
+    @apply d-container d-px-container;
+  }
+
+  .d-blur-header {
+    @apply blur-12;
+  }
+
+  .d-bg-header {
+    @apply bg-white bg-opacity-80 dark:bg-gray-900 dark:bg-opacity-80;
+  }
+
+  .d-border {
+    @apply light:border-gray-200 light:border-opacity-50 dark:border-gray-800;
+  }
+
+  .d-border-hover {
+    @apply border-primary-200 dark:border-gray-700;
+  }
+
+  .d-border-header {
+    @apply border-b border-gray-200 dark:border-gray-800 border-opacity-50;
+  }
+
+  .d-header {
+    @apply sticky w-full top-0 z-50 d-bg-header d-border-header d-blur-header h-header;
+  }
+
+  .d-header-title {
+    @apply text-2xl font-bold tracking-tighter text-gray-900 dark:text-gray-100;
+  }
+
+  .d-header-title-logo {
+    @apply d-header-title ml-4;
+  }
+
+  .d-header-logo {
+    @apply flex items-center flex-none lg:w-60;
+  }
+
+  .d-logo-color {
+    @apply text-black dark:text-white;
+  }
+
+  .d-logo {
+    @apply w-auto h-6 md:h-8 d-logo-color;
+  }
+
+  .d-heading-title {
+    @apply !mb-0 !mt-0 flex-1 !text-4xl font-semibold tracking-tight;
+  }
+
+  .d-heading-description {
+    @apply !mt-2 !mb-0 text-lg font-medium d-secondary-text;
+  }
+
+  .d-heading-hr {
+    @apply !mt-4 !mb-0 d-border;
+  }
+
+  .d-aside-title {
+    @apply py-2 text-base font-semibold text-gray-900 cursor-pointer dark:text-gray-100;
+  }
+
+  .d-badge {
+    @apply text-gray-600 dark:text-gray-400 bg-gray-900;
+  }
+}

package/components/app/Container.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+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/components/app/Footer.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const { footer } = useTheme()
+
+const icons = computed(() => 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="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/components/app/Navbar.vue

@@ -0,0 +1,26 @@
+<template>
+  <header class="sticky w-full h-[4rem] top-0 z-50 bg-white bg-opacity-80 dark:bg-gray-900 dark:bg-opacity-80 border-b border-gray-200 dark:border-gray-800 border-opacity-50 sticky w-full top-0 z-50 backdrop-blur supports-backdrop-blur:bg-white/95">
+    <Container class="flex flex-none h-full">
+      <!-- <NavigationButton v-if="aside" /> -->
+
+      <div class="justify-center flex items-center flex-1 lg:flex-none">
+        <NavbarLogo />
+      </div>
+
+      <div class="items-center hidden lg:flex lg:flex-1">
+        <!-- <HeaderNavigation /> -->
+      </div>
+
+      <!-- Desktop: Right section -->
+      <div class="flex items-center justify-end lg:flex-none">
+        <!-- <ColorSwitcher /> -->
+
+        <div class="items-center justify-end hidden lg:flex">
+          <!-- <LangSwitcher /> -->
+          <ThemeSelect />
+          <!-- <SocialIcons /> -->
+        </div>
+      </div>
+    </Container>
+  </header>
+</template>

package/components/app/NavbarLogo.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const theme = useTheme()
+const hasLogo = computed(() => theme.header.logo)
+const hasTitle = computed(() => theme.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/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/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>

package/components/content/Alert.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+defineProps({
+  /**
+   * @values info, success, warning, danger
+   */
+  type: {
+    type: String,
+    default: 'info',
+    validator(value: string) {
+      return ['info', 'success', 'warning', 'danger'].includes(value)
+    },
+  },
+})
+</script>
+
+<template>
+  <div
+    class="px-4 py-3 mt-4 mb-4 rounded-xl alert text-sm leading-relaxed"
+    :class="[type]"
+  >
+    <div class="flex items-start">
+      <div class="flex-grow alert-content">
+        <Markdown unwrap="p" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.alert {
+  &.success {
+    @apply bg-green-50 dark:bg-green-800 dark:bg-opacity-25 text-green-600 dark:text-green-200 border border-green-100 dark:border-green-900;
+
+    :deep() {
+      code {
+        @apply bg-green-100 dark:bg-green-900 dark:bg-opacity-50 shadow-none text-current border-green-200 dark:border-green-800;
+      }
+      a:hover {
+        code {
+          @apply border-green-400 dark:border-green-700;
+        }
+      }
+    }
+  }
+
+  &.info {
+    @apply bg-blue-50 dark:bg-blue-800 dark:bg-opacity-25 text-blue-600 dark:text-blue-200 border border-blue-100 dark:border-blue-900;
+
+    :deep() {
+      code {
+        @apply bg-blue-100 dark:bg-blue-900 dark:bg-opacity-50 shadow-none text-current border-blue-200 dark:border-blue-800;
+      }
+      a:hover {
+        code {
+          @apply border-blue-400 dark:border-blue-700;
+        }
+      }
+    }
+  }
+
+  &.warning {
+    @apply bg-yellow-50 dark:bg-yellow-800 dark:bg-opacity-25 text-yellow-600 dark:text-yellow-100 border border-yellow-100 dark:border-yellow-900;
+
+    :deep() {
+      code {
+        @apply bg-yellow-100 dark:bg-yellow-900 dark:bg-opacity-50 shadow-none text-current border-yellow-200 dark:border-yellow-800;
+      }
+      a:hover {
+        code {
+          @apply border-yellow-400 dark:border-yellow-700;
+        }
+      }
+    }
+  }
+
+  &.danger {
+    @apply bg-red-50 dark:bg-red-800 dark:bg-opacity-25 text-red-600 dark:text-red-100 border border-red-100 dark:border-red-900;
+
+    :deep() {
+      code {
+        @apply bg-red-100 dark:bg-red-900 dark:bg-opacity-50 shadow-none text-current border-red-200 dark:border-red-800;
+      }
+      a:hover {
+        code {
+          @apply border-red-400 dark:border-red-700;
+        }
+      }
+    }
+  }
+
+  :deep() {
+    strong {
+      @apply font-semibold text-current;
+    }
+
+    a {
+      @apply underline border-none font-semibold text-current;
+      code {
+        @apply border border-transparent border-dashed;
+      }
+    }
+
+    .prose-code {
+      @apply my-4;
+
+      code {
+        @apply bg-gray-50 dark:bg-gray-900;
+      }
+    }
+  }
+}
+
+.alert :deep(p) {
+  @apply m-0 !important;
+}
+
+.dark .alert {
+  :deep() {
+    a {
+      @apply text-current;
+    }
+  }
+}
+</style>