docus 3.0.0-beta.1 → 3.0.0-beta.10

package/theme/utils/theme.ts

@@ -0,0 +1,66 @@
+export interface ThemeIcon {
+  label: string
+  href: string
+  component: string
+}
+
+export interface ThemeDebugConfig {
+  page: boolean
+  navigation: boolean
+  theme: boolean
+}
+
+export interface ThemeConfig {
+  title: string
+  url: string
+  description: string
+  twitter: string
+  github: string
+  cover: string
+  coverAlt: string
+  header: {
+    title: false | string
+    logo: boolean | string
+  }
+  footer: {
+    credits: false | {
+      icon: string
+      text: string
+    }
+    icons: ThemeIcon[]
+  }
+  debug: boolean | ThemeDebugConfig
+}
+
+export const defaultThemeConfig: ThemeConfig = {
+  title: 'Docus',
+  url: 'https://docus.dev',
+  twitter: '@docus_',
+  github: 'nuxtlabs/docus',
+  description: 'Write pages in markdown, use Vue components and enjoy the power of Nuxt with a blazing fast developer experience.',
+  header: {
+    title: false,
+    logo: true,
+  },
+  cover: 'https://user-images.githubusercontent.com/904724/105075054-872fac80-5a89-11eb-8aab-46dd254ad986.png',
+  coverAlt: 'A screenshot of a website built with Docus with the Docus logo on top of it.',
+  footer: {
+    credits: {
+      icon: 'IconNuxtLabs',
+      text: 'Made by NuxtLabs',
+    },
+    icons: [
+      {
+        label: 'NuxtJS',
+        href: 'https://nuxtjs.org',
+        component: 'IconNuxtLabs',
+      },
+      {
+        label: 'Vue Telescope',
+        href: 'https://vuetelescope.com',
+        component: 'IconVueTelescope',
+      },
+    ],
+  },
+  debug: true,
+}

package/assets/css/main.css

@@ -1,11 +0,0 @@
-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

@@ -1,282 +0,0 @@
-@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/Navbar.vue

@@ -1,26 +0,0 @@
-<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/docs/DocsPageContent.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-const { page } = useContent()
-
-const isOpen = ref(false)
-</script>
-
-<template>
-  <div class="flex flex-col-reverse lg:grid lg:grid-cols-10 gap-8 relative">
-    <div
-      class="col-span-10 lg:col-span-8"
-    >
-      <slot />
-    </div>
-
-    <div
-      class="lg:col-span-2 lg:self-start overflow-x-hidden sticky top-16 -mx-4 sm:-mx-6 px-4 sm:px-6 lg:mx-0 lg:px-0 lg:pt-8 lg:-mt-8 backdrop-blur-md lg:max-h-[calc(100vh-64px)]"
-    >
-      <div class="py-4 lg:py-0">
-        <button class="flex lg:hidden items-center gap-3" @click="isOpen = !isOpen">
-          <span class="u-text-gray-900 font-semibold text-sm">Table of Contents</span>
-
-          <Icon name="heroicons-outline:chevron-right" class="w-4 h-4 u-text-gray-400 transition-transform duration-100 transform" :class="[isOpen ? 'rotate-90' : 'rotate-0']" />
-        </button>
-
-        <DocsToc class="mt-4 lg:mt-0" :class="[isOpen ? 'lg:block' : 'hidden lg:block']" />
-      </div>
-    </div>
-  </div>
-</template>

package/components/prose/ProseImg.vue

@@ -1,32 +0,0 @@
-<script>
-export default {
-  props: {
-    src: {
-      type: String,
-      default: '',
-    },
-    alt: {
-      type: String,
-      default: '',
-    },
-    width: {
-      type: [String, Number],
-      default: undefined,
-    },
-    height: {
-      type: [String, Number],
-      default: undefined,
-    },
-  },
-}
-</script>
-
-<template>
-  <NuxtImg :src="src" :alt="alt" :width="width" :height="height" />
-</template>
-
-<style lang="postcss" scoped>
-:deep(img) {
-  @apply my-[1em];
-}
-</style>

package/composables/useContent.ts

@@ -1,155 +0,0 @@
-import { withoutTrailingSlash } from 'ufo'
-import type { NavItem, ParsedContent } from '@nuxt/content/dist/runtime/types'
-
-let closeHook
-
-export const useContent = () => {
-  const route = useRoute()
-
-  const path = computed(() => withoutTrailingSlash(route.path))
-
-  /**
-   * Navigation tree from root of app.
-   */
-  const navigation = useState<NavItem[]>('navigation', () => null)
-
-  /**
-   * Current page complete data.
-   */
-  const page = useState<ParsedContent>(`content-page-${path.value}`, () => null)
-
-  /**
-   * Previous and next page data.
-   * Format: [prev, next]
-   */
-  const surround = useState<ParsedContent[]>(`content-surround-${path.value}`, () => null)
-
-  /**
-   * Table of contents from parsed page.
-   */
-  const toc = computed(() => page?.value?.body?.toc?.links || [])
-
-  /**
-   * Content type from parsed page.
-   */
-  const type = computed(() => page.value?.meta?.type)
-
-  /**
-   * Next page from `surround`.
-   */
-  const next = computed(() => surround.value?.[1] || null)
-
-  /**
-   * Previous page from `surround`.
-   */
-  const prev = computed(() => surround.value?.[0] || null)
-
-  /**
-   * Page list fetching helper.
-   */
-  const fetchDir = async(path: string) => await queryContent(path).find()
-
-  /**
-   * Find first child link from a navigation node.
-   */
-  const findBottomLink = (link: NavItem) => {
-    let slug = link.slug
-
-    if (link.children && link.children.length)
-      slug = findBottomLink(link.children[0])
-
-    return slug
-  }
-
-  /**
-   * Find current navigation node from a path.
-   */
-  const navFromPath = (path: string, tree: NavItem[] = navigation.value) => {
-    for (const file of tree) {
-      if (file.children) {
-        const result = navFromPath(path, file.children)
-        if (result)
-          return result
-      }
-
-      if (file.slug === path)
-        return file
-    }
-  }
-
-  /**
-   * Navigation fetching helper.
-   */
-  const fetchNavigation = async(force = false) => {
-    if (navigation.value !== null && !force)
-      return
-
-    navigation.value = await fetchContentNavigation()
-  }
-
-  /**
-   * Local page fetching helper.
-   */
-  const fetchPage = async(force = false) => {
-    if (page.value !== null && !force)
-      return
-
-    const splitted = path.value.split('/')
-    const directory = splitted.slice(0, splitted.length - 1).join('/')
-
-    // Get navigation node from current path
-    const file = navFromPath(path.value, navigation.value)
-
-    if (file && !file.children) {
-      // Path queried has a page (and is not a directory)
-      await Promise.all([
-        queryContent().where({ id: file.id }).findOne() as Promise<ParsedContent>,
-        queryContent(directory).findSurround(path.value) as Promise<ParsedContent[]>,
-      ]).then(([_page, _surround]) => {
-        page.value = _page
-        surround.value = _surround
-      })
-    }
-    else if (file) {
-      navigateTo(findBottomLink(file))
-    }
-  }
-
-  // Re-fetch page on change (development only)
-  if (process.dev) {
-    onMounted(
-      () => {
-        // Cleanup previous hook before registering new one.
-        if (closeHook)
-          closeHook()
-
-        const { hook } = useNuxtApp()
-
-        closeHook = hook('app:data:refresh', async() => {
-          await fetchNavigation(true)
-          await fetchPage(true)
-        })
-      },
-    )
-    onBeforeUnmount(() => closeHook && closeHook())
-  }
-
-  return {
-    // useState references
-    navigation,
-    page,
-    surround,
-    // Fetching helpers
-    fetchDir,
-    fetchPage,
-    fetchNavigation,
-    // Computed values
-    next,
-    prev,
-    type,
-    toc,
-    // Methods
-    navFromPath,
-    findBottomLink,
-  }
-}

package/composables/useMenu.ts

@@ -1,20 +0,0 @@
-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/pages/[...slug].vue

@@ -1,24 +0,0 @@
-<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

@@ -1 +0,0 @@
-{"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"}