docus 2.1.0 → 3.0.0-beta.1

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,32 @@
+<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/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,155 @@
+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,
+  }
+}