docus 2.1.0 → 3.0.0-beta.3

package/components/icons/IconXCircle.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M0.877075 7.49988C0.877075 3.84219 3.84222 0.877045 7.49991 0.877045C11.1576 0.877045 14.1227 3.84219 14.1227 7.49988C14.1227 11.1575 11.1576 14.1227 7.49991 14.1227C3.84222 14.1227 0.877075 11.1575 0.877075 7.49988ZM7.49991 1.82704C4.36689 1.82704 1.82708 4.36686 1.82708 7.49988C1.82708 10.6329 4.36689 13.1727 7.49991 13.1727C10.6329 13.1727 13.1727 10.6329 13.1727 7.49988C13.1727 4.36686 10.6329 1.82704 7.49991 1.82704ZM9.85358 5.14644C10.0488 5.3417 10.0488 5.65829 9.85358 5.85355L8.20713 7.49999L9.85358 9.14644C10.0488 9.3417 10.0488 9.65829 9.85358 9.85355C9.65832 10.0488 9.34173 10.0488 9.14647 9.85355L7.50002 8.2071L5.85358 9.85355C5.65832 10.0488 5.34173 10.0488 5.14647 9.85355C4.95121 9.65829 4.95121 9.3417 5.14647 9.14644L6.79292 7.49999L5.14647 5.85355C4.95121 5.65829 4.95121 5.3417 5.14647 5.14644C5.34173 4.95118 5.65832 4.95118 5.85358 5.14644L7.50002 6.79289L9.14647 5.14644C9.34173 4.95118 9.65832 4.95118 9.85358 5.14644Z"
+      fill="currentColor"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>

package/components/icons/IconZap.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 48 48" width="64" height="64">
+    <polygon
+      fill="#ffae0b"
+      points="16.828,5.828 29.966,5.828 25.172,19.414 33.966,19.414 18.621,43.138 21.034,26.379 12.828,26.379"
+    />
+  </svg>
+</template>

package/components/prose/ProseA.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+defineProps({
+  href: {
+    type: String,
+    default: '',
+  },
+  blank: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+     * `true` if `href` points to a static file
+     */
+  static: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>
+
+<template>
+  <NuxtLink :to="href" :blank="blank" :static="static">
+    <slot />
+  </NuxtLink>
+</template>
+
+<style lang="postcss" scoped>
+:not(h1, h2, h3, h4) > a {
+  @apply font-medium no-underline d-prose-a-text d-prose-a-border hover:d-prose-a-border-hover;
+}
+
+h1 a,
+h2 a,
+h3 a,
+h4 a {
+  @apply relative;
+  &::after {
+    @apply absolute pl-2 w-5 h-5 opacity-0;
+    content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%23111827"%3E%3Cpath stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /%3E%3C/svg%3E');
+  }
+  &:hover {
+    &::after {
+      @apply opacity-100;
+    }
+  }
+
+  /* Hover underline */
+  &:before {
+    @apply absolute top-0 left-0 w-full;
+    content: '';
+    height: calc(100% + 4px);
+  }
+  &:hover:before {
+    @apply d-prose-a-headline-border;
+  }
+}
+
+.dark h1 a,
+.dark h2 a,
+.dark h3 a,
+.dark h4 a {
+  &::after {
+    content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="white"%3E%3Cpath stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /%3E%3C/svg%3E');
+  }
+}
+</style>

package/components/prose/ProseBlockquote.vue

@@ -0,0 +1,21 @@
+<template>
+  <blockquote>
+    <slot />
+  </blockquote>
+</template>
+
+<style lang="postcss" scoped>
+blockquote {
+  @apply text-base mt-[1.5em] mb-[1.5em] font-medium pl-4 d-prose-blockquote-text d-prose-blockquote-border;
+
+  quotes: '201C' '201D' '2018' '2019';
+}
+
+blockquote p:first-of-type::before {
+  content: '';
+}
+
+blockquote p:last-of-type::after {
+  content: '';
+}
+</style>

package/components/prose/ProseCode.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { Lang } from 'shiki-es'
+
+defineProps({
+  code: {
+    type: String,
+    default: '',
+  },
+  language: {
+    type: String as PropType<Lang>,
+    default: null,
+  },
+  filename: {
+    type: String,
+    default: null,
+  },
+  highlights: {
+    type: Array as () => number[],
+    default: () => [],
+  },
+})
+</script>
+
+<template>
+  <div class="prose-code w-full group">
+    <span v-if="filename" class="filename transition-base top-1 right-1 opacity-100 absolute right-0 z-0 m-1 py-1.5 px-2 text-gray-400 bg-gray-900 rounded-md font-mono text-xs leading-none tracking-tight">
+      {{ filename }}
+    </span>
+
+    <slot />
+
+    <CopyButton class="copy-button opacity-0 transition-base" />
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+div {
+  @apply relative rounded-lg overflow-hidden my-4;
+}
+
+:deep(pre) {
+  @apply flex flex-1 p-4 my-0 overflow-x-auto leading-normal;
+  background-color: #282c34;
+}
+
+:deep(code) {
+  @apply flex flex-col;
+}
+
+:deep(.line) {
+  @apply inline-table min-h-[1rem];
+}
+
+:deep(.line.highlight) {
+  background-color: #3f3f46;
+}
+
+.group:hover {
+  .filename {
+    @apply opacity-0;
+  }
+
+  .copy-button {
+    @apply opacity-100;
+  }
+}
+</style>

package/components/prose/ProseCodeInline.vue

@@ -0,0 +1,38 @@
+<template>
+  <code>
+    <slot />
+  </code>
+</template>
+
+<style lang="postcss" scoped>
+code {
+  @apply font-normal text-sm py-[3px] px-[6px] rounded-md bg-gray-100 text-gray-800 dark:text-gray-100 dark:bg-gray-800;
+}
+
+a code {
+  &:hover {
+    @apply border-primary-500;
+  }
+}
+
+tbody code {
+  @apply text-[12px];
+}
+
+h1 a,
+h2 a,
+h3 a,
+h4 a {
+  code {
+    @apply relative;
+    font-size: inherit;
+  }
+
+  & code:before {
+    @apply absolute top-[-2px] left-[-2px] -z-[1] d-prose-code-inline-bg rounded-md pointer-events-none;
+    content: '';
+    width: calc(100% + 4px);
+    height: calc(100% + 4px);
+  }
+}
+</style>

package/components/prose/ProseEm.vue

@@ -0,0 +1,11 @@
+<template>
+  <em>
+    <slot />
+  </em>
+</template>
+
+<style lang="postcss" scoped>
+em {
+  @apply italic text-current;
+}
+</style>

package/components/prose/ProseH1.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps<{ id: string }>()
+</script>
+
+<template>
+  <h1 :id="id">
+    <NuxtLink :href="`#${id}`">
+      <slot />
+    </NuxtLink>
+  </h1>
+</template>>
+
+<style lang="postcss" scoped>
+h1 {
+  font-size: 2rem;
+  @apply tracking-tight leading-snug font-semibold mt-[1em] mb-[0.5em];
+}
+
+h1 + * {
+  @apply mt-0;
+}
+</style>

package/components/prose/ProseH2.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps<{ id: string }>()
+</script>
+
+<template>
+  <h2 :id="id">
+    <NuxtLink :href="`#${id}`">
+      <slot />
+    </NuxtLink>
+  </h2>
+</template>
+
+<style lang="postcss" scoped>
+h2 {
+  font-size: 1.5rem;
+  @apply tracking-tight leading-snug font-semibold mt-[1.25em] mb-[0.5em];
+}
+
+h2 + * {
+  @apply mt-0;
+}
+</style>

package/components/prose/ProseH3.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineProps<{ id: string }>()
+</script>
+
+<template>
+  <h3 :id="id">
+    <NuxtLink :href="`#${id}`">
+      <slot />
+    </NuxtLink>
+  </h3>
+</template>
+
+<style lang="postcss" scoped>
+h3 {
+  /* TODO */
+  /* extend.fontSize do not work in Windi */
+  font-size: 1.25rem;
+  @apply tracking-tight leading-snug font-semibold mt-[1.25em] mb-[0.5em];
+}
+
+h3 + * {
+  @apply mt-0;
+}
+</style>

package/components/prose/ProseH4.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineProps<{ id: string }>()
+</script>
+
+<template>
+  <h4 :id="id">
+    <NuxtLink :href="`#${id}`">
+      <slot />
+    </NuxtLink>
+  </h4>
+</template>
+
+<style lang="postcss" scoped>
+h4 {
+  /* TODO */
+  /* extend.fontSize do not work in Windi */
+  font-size: 1.125rem;
+  @apply tracking-tight leading-snug font-semibold mt-[1.25em] mb-[0.5em];
+}
+
+h4 + * {
+  @apply mt-0;
+}
+</style>

package/components/prose/ProseHr.vue

@@ -0,0 +1,13 @@
+<template>
+  <hr>
+</template>
+
+<style lang="postcss" scoped>
+hr {
+  @apply d-prose-hr-border my-8;
+}
+
+hr + * {
+  @apply mt-0;
+}
+</style>

package/components/prose/ProseImg.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps({
+  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/components/prose/ProseLi.vue

@@ -0,0 +1,31 @@
+<template>
+  <li><slot /></li>
+</template>
+
+<style lang="postcss" scoped>
+li {
+  @apply relative my-[0.25em] pl-4;
+  p {
+    @apply my-[0.75em];
+  }
+}
+
+ul > li {
+  &::before {
+    @apply absolute left-0 top-[0.5em] d-prose-ul-li-bullet rounded-full w-1.5 h-1.5;
+    content: '';
+  }
+}
+
+ol > li {
+  &::before {
+    @apply absolute left-0 top-0 d-secondary-text;
+    content: counter(list-item, decimal) '.';
+    content: counter(list-item, var(--list-counter-style, decimal)) '.';
+  }
+}
+
+:deep(.nuxt-content-highlight) {
+  @apply m-0;
+}
+</style>

package/components/prose/ProseOl.vue

@@ -0,0 +1,16 @@
+<template>
+  <ol>
+    <slot />
+  </ol>
+</template>
+
+<style lang="postcss" scoped>
+ol {
+  @apply mx-0 p-0 my-[1.25em] list-none;
+
+  :deep(ul),
+  :deep(ol) {
+    @apply !my-[0.5em];
+  }
+}
+</style>

package/components/prose/ProseP.vue

@@ -0,0 +1,14 @@
+<template>
+  <p><slot /></p>
+</template>
+
+<style lang="postcss" scoped>
+p {
+  @apply leading-relaxed my-4;
+
+  :deep(br) {
+    @apply block mt-4;
+    content: '';
+  }
+}
+</style>

package/components/prose/ProseStrong.vue

@@ -0,0 +1,14 @@
+<template>
+  <strong>
+    <slot />
+  </strong>
+</template>
+
+<style lang="postcss" scoped>
+strong {
+  @apply font-semibold;
+}
+a strong {
+  @apply text-current;
+}
+</style>

package/components/prose/ProseTable.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="max-w-full my-6 overflow-x-auto">
+    <table>
+      <slot />
+    </table>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+table {
+  @apply leading-5 text-sm w-full table-auto text-left;
+}
+</style>

package/components/prose/ProseTd.vue

@@ -0,0 +1,11 @@
+<template>
+  <td>
+    <slot />
+  </td>
+</template>
+
+<style lang="postcss" scoped>
+tbody td {
+  @apply align-top first:pl-0 last:pr-0 p-[0.5em];
+}
+</style>

package/components/prose/ProseTh.vue

@@ -0,0 +1,11 @@
+<template>
+  <th>
+    <slot />
+  </th>
+</template>
+
+<style lang="postcss" scoped>
+thead th {
+  @apply font-semibold d-secondary-text p-2 pt-0 align-bottom first:pl-0 last:pr-0;
+}
+</style>

package/components/prose/ProseThead.vue

@@ -0,0 +1,11 @@
+<template>
+  <thead>
+    <slot />
+  </thead>
+</template>
+
+<style lang="postcss" scoped>
+thead {
+  @apply d-prose-thead-border;
+}
+</style>

package/components/prose/ProseTr.vue

@@ -0,0 +1,11 @@
+<template>
+  <tr>
+    <slot />
+  </tr>
+</template>
+
+<style lang="postcss" scoped>
+tbody tr {
+  @apply d-prose-tr-border;
+}
+</style>

package/components/prose/ProseUl.vue

@@ -0,0 +1,15 @@
+<template>
+  <ul>
+    <slot />
+  </ul>
+</template>
+
+<style lang="postcss" scoped>
+ul {
+  @apply list-none mx-0 p-0 my-[1.25em];
+  :deep(ul),
+  :deep(ol) {
+    @apply !my-[0.5em];
+  }
+}
+</style>

package/composables/useContent.ts

@@ -0,0 +1,156 @@
+import { withoutTrailingSlash } from 'ufo'
+import type { NavItem, ParsedContent } from '@nuxt/content/dist/runtime/types'
+import { computed, fetchContentNavigation, onBeforeUnmount, onMounted, queryContent, useNuxtApp, useRoute, useState } from '#imports'
+
+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,
+  }
+}