undocs 0.3.1 → 0.3.3

package/app/app.config.ts

@@ -3,9 +3,7 @@ export default defineAppConfig({
     socialBackground: 'https://github.com/unjs/docs/blob/main/assets/ellipse.png?raw=true',
     logo: '/icon.svg',
     github: undefined,
-    socials: {
-      x: 'unjsio',
-    },
+    socials: {},
   },
   ui: {
     colors: {

package/app/components/AppFooterNotes.vue

@@ -1,7 +1,5 @@
 <script lang="ts" setup>
 const appConfig = useAppConfig()
-
-console.log(JSON.stringify(appConfig.docs, null, 2))
 </script>
 
 <template>
@@ -19,7 +17,7 @@ console.log(JSON.stringify(appConfig.docs, null, 2))
     &middot; Generated with
     <NuxtLink class="font-medium hover:text-primary" to="https://undocs.unjs.io" target="_blank">UnDocs </NuxtLink>
     and
-    <NuxtLink class="font-medium hover:text-primary" to="https://ui.nuxt.com/pro" target="_blank">Nuxt UI Pro</NuxtLink
-    >.
+    <NuxtLink class="font-medium hover:text-primary" to="https://ui.nuxt.com/pro" target="_blank">Nuxt UI Pro</NuxtLink>
+    .
   </p>
 </template>

package/app/components/AppHeader.vue

@@ -35,7 +35,6 @@ const headerLinks = computed(() => {
       <UTooltip text="Search" :kbds="['meta', 'K']">
         <UContentSearchButton />
       </UTooltip>
-      <!-- <div class="flex items-center border-l border-slate-200 ml-6 pl-6 dark:border-slate-800"> -->
       <UColorModeButton />
       <SocialButtons />
     </template>

package/app/components/SocialButtons.vue

@@ -1,33 +1,35 @@
 <script setup lang="ts">
 const appConfig = useAppConfig()
 
-const props = defineProps({
-  socials: {
-    type: Array,
-    required: false,
-    default: () => ['github', 'twitter', 'discord'],
-  },
-})
+// const props = defineProps({
+//   socials: {
+//     type: Array,
+//     required: false,
+//     default: () => ['github', 'twitter', 'discord'],
+//   },
+// })
 
 const socialLinks = computed(() => {
-  return Object.entries({ github: appConfig.docs.github, ...appConfig.docs.socials })
-    .reverse() // x<>github
-    .filter(([key]) => props.socials?.includes(key) || !props.socials)
-    .map(([key, value]) => {
-      if (typeof value === 'object') {
-        return value
-      }
-      if (typeof value === 'string' && value) {
-        return {
-          // Workaround: i-simple-icons-x i-simple-icons-github
-          icon: `i-simple-icons-${key}`,
-          label: value,
-          to: /^https?:\/\//.test(value) ? value : `https://${key}.com/${value}`,
+  return (
+    Object.entries({ github: appConfig.docs.github, ...appConfig.docs.socials })
+      .reverse() // x<>github
+      // .filter(([key]) => props.socials?.includes(key) || !props.socials)
+      .map(([key, value]) => {
+        if (typeof value === 'object') {
+          return value
+        }
+        if (typeof value === 'string' && value) {
+          return {
+            // Workaround: i-simple-icons-x i-simple-icons-github
+            icon: `i-simple-icons-${key}`,
+            label: value,
+            to: /^https?:\/\//.test(value) ? value : `https://${key}.com/${value}`,
+          }
         }
-      }
-      return undefined
-    })
-    .filter(Boolean)
+        return undefined
+      })
+      .filter(Boolean)
+  )
 })
 </script>
 <template>

package/app/composables/useSponsors.ts

@@ -0,0 +1,16 @@
+export interface Sponsors {
+  username: string
+  sponsors: {
+    name: string
+    image: string
+    website: string
+  }[][]
+}
+
+export async function useSponsors(): Promise<Sponsors | undefined> {
+  const appConfig = useAppConfig()
+  const sponsorsAPI = appConfig.docs.sponsors.api
+  if (sponsorsAPI) {
+    return (await $fetch<Sponsors>(sponsorsAPI)) || undefined
+  }
+}

package/app/layouts/blog.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <UContainer>
+    <UPage>
+      <slot />
+    </UPage>
+  </UContainer>
+</template>

package/app/layouts/docs.vue

@@ -7,7 +7,7 @@ const docsNav = useDocsNav()
     <UPage :ui="{ left: 'lg:col-span-2 pr-2 border-r border-default' }">
       <template #left>
         <UPageAside>
-          <UPageAnchors :links="docsNav.links" />
+          <UPageAnchors :links="docsNav.links.filter((l) => l.title !== 'Blog')" />
           <USeparator v-if="docsNav.activeLinks?.length" type="dashed" class="py-6" />
           <UContentNavigation
             :navigation="docsNav.activeLinks"

package/app/modules/content/hooks.ts

@@ -129,14 +129,15 @@ function removeFirstH1AndBlockquote(body: MarkdownRoot, content: ParsedContentFi
 
   // Use the first blockquote as the description
   const firstEl = body.value[0]
-  const bloquoteText = _getTextContent(firstEl)
-
-  if (firstEl[0] === 'blockquote' && content.description === '' && !bloquoteText.startsWith('!')) {
-    content.description = bloquoteText
-    if (content.seo) {
-      ;(content.seo as any).description = bloquoteText
+  if (firstEl) {
+    const bloquoteText = _getTextContent(firstEl)
+    if (firstEl[0] === 'blockquote' && content.description === '' && !bloquoteText.startsWith('!')) {
+      content.description = bloquoteText
+      if (content.seo) {
+        ;(content.seo as any).description = bloquoteText
+      }
+      body.value.shift()
     }
-    body.value.shift()
   }
 }
 

package/app/modules/content/icons.ts

@@ -23,4 +23,8 @@ export const CommonIcons = [
     pattern: 'utils',
     icon: 'i-lucide-square-function',
   },
+  {
+    pattern: 'blog',
+    icon: 'i-lucide-file-text',
+  },
 ]

package/app/pages/[...slug].vue

@@ -33,71 +33,28 @@ usePageSEO({
   description: page.value?.description,
 })
 
-const headline = computed(() => findPageHeadline(page.value))
-
-const tocLinks = computed(() => {
-  return (page.value.body?.toc?.links || []).map((link) => ({
-    ...link,
-    children: undefined,
-  }))
-})
-
-const tocMobileOpen = ref(false)
-
-const tocMobileLinks = computed(() => {
-  return [
-    [
-      {
-        label: 'Return to top',
-        click: () => {
-          window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
-        },
-      },
-    ],
-    (page.value.body?.toc?.links || []).map((link) => ({
-      label: link.text,
-      // href: `#${link.id}`,
-      click: () => {
-        tocMobileOpen.value = false
-        document.getElementById(link.id)?.scrollIntoView({ behavior: 'smooth' })
-      },
-    })),
-  ]
-})
-
-const isMobile = ref(false)
-
 onMounted(() => {
-  isMobile.value = 'ontouchstart' in document.documentElement
+  const hash = window.location.hash
+  if (hash) {
+    document.querySelector(hash)?.scrollIntoView()
+  }
 })
 </script>
 
 <template>
   <UPage v-if="page">
-    <UPageHeader :title="page.title" :description="page.description" :links="page.links" :headline="headline" />
+    <UPageHeader
+      :title="page.title"
+      :description="page.description"
+      :links="page.links"
+      :headline="findPageHeadline(page)"
+    />
 
-    <!-- TOC -->
-    <!-- large screen -->
-    <template v-if="tocLinks.length > 0" #right>
-      <UContentToc title="On this page" :links="tocLinks" class="hidden lg:block" />
+    <template #right>
+      <UContentToc title="On this page" :links="page.body?.toc?.links || []" highlight />
     </template>
-    <!-- mobile -->
-    <div
-      v-if="tocMobileLinks.length > 1"
-      class="float-right mt-4 top-[calc(var(--header-height)_+_0.5rem)] z-10 flex justify-end sticky mb-2 lg:hidden"
-    >
-      <UDropdownMenu v-model:open="tocMobileOpen" :items="tocMobileLinks" :mode="isMobile ? 'click' : 'hover'">
-        <UButton
-          color="neutral"
-          label="On this page"
-          :trailing="false"
-          :icon="`i-heroicons-chevron-${tocMobileOpen ? 'down' : 'left'}-20-solid`"
-        />
-      </UDropdownMenu>
-    </div>
 
     <UPageBody prose class="break-words">
-      <br v-if="tocMobileLinks.length > 1" class="lg:hidden mb-2" />
       <ContentRenderer v-if="page.body" :value="page" />
 
       <div class="space-y-6">

package/app/pages/blog/[...slug].vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { kebabCase } from 'scule'
+
+definePageMeta({
+  layout: 'blog',
+})
+
+const route = useRoute()
+
+const { data: page } = await useAsyncData(kebabCase(route.path), () =>
+  queryCollection('content').path(route.path).first(),
+)
+
+if (!page.value) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Page not found',
+    message: `${route.path} does not exist`,
+    fatal: true,
+  })
+}
+
+const appConfig = useAppConfig()
+
+usePageSEO({
+  title: `${page.value?.title} - ${appConfig.site.name}`,
+  ogTitle: page.value?.title,
+  description: page.value?.description,
+})
+</script>
+
+<template>
+  <UPage v-if="page">
+    <UPageHeader v-bind="page" :ui="{ headline: 'flex flex-col gap-y-8 items-start' }">
+      <template #headline>
+        <UBreadcrumb
+          :items="[{ label: 'Blog', icon: 'i-lucide-newspaper', to: '/blog' }, { label: page.title }]"
+          class="max-w-full"
+        />
+        <div class="flex items-center space-x-2">
+          <span>
+            {{ page.meta.category }}
+          </span>
+          <span class="text-muted"
+            >&nbsp;&middot;&nbsp;<time>{{ page.meta.date }}</time></span
+          >
+        </div>
+      </template>
+      <div class="mt-4 flex flex-wrap items-center gap-6">
+        <UUser
+          v-for="(author, index) in page.meta.authors || []"
+          :key="index"
+          :name="author.name"
+          :avatar="{ src: `https://github.com/${author.github}.png?size=64` }"
+          :to="`https://github.com/${author.github}`"
+          target="_blank"
+          :description="author.to ? `@${author.to.split('/').pop()}` : undefined"
+        />
+      </div>
+    </UPageHeader>
+    <ContentRenderer v-if="page.body" :value="page" />
+  </UPage>
+</template>

package/app/pages/blog/index.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+const { data: page } = await useAsyncData('/blog', () => queryCollection('content').path('/blog').first())
+
+if (!page.value) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Page not found',
+    message: '/blog does not exist',
+    fatal: true,
+  })
+}
+
+const { data: articles } = await useAsyncData(() =>
+  queryCollection('content')
+    .where('path', 'LIKE', '/blog/%')
+    .order('id', 'DESC')
+    .all()
+    .then((res) => res),
+)
+
+const appConfig = useAppConfig()
+
+usePageSEO({
+  title: `${page.value?.title} - ${appConfig.site.name}`,
+  ogTitle: page.value?.title,
+  description: page.value?.description,
+})
+</script>
+
+<template>
+  <UContainer v-if="page">
+    <UPageHero :title="page.title" orientation="horizontal">
+      <template #description>{{ page.description }}</template>
+    </UPageHero>
+
+    <UPageBody>
+      <UContainer>
+        <UBlogPosts class="mb-12 md:grid-cols-2 lg:grid-cols-3">
+          <UBlogPost
+            v-for="(article, index) in articles"
+            :key="article.path"
+            :to="article.path"
+            :title="article.title"
+            :description="article.description"
+            :date="article.meta?.date"
+            :badge="
+              article.meta?.category ? { label: article.meta.category, color: 'primary', variant: 'subtle' } : undefined
+            "
+            :variant="index > 0 ? 'outline' : 'subtle'"
+            :orientation2="index === 0 ? 'horizontal' : 'vertical'"
+            :class="[index === 0 && 'col-span-full']"
+          />
+        </UBlogPosts>
+      </UContainer>
+    </UPageBody>
+  </UContainer>
+</template>

package/app/pages/index.vue

@@ -8,8 +8,6 @@ const appConfig = useAppConfig()
 
 const docsConfig = appConfig.docs as DocsConfig
 
-// console.log('docsConfig', JSON.stringify(docsConfig, null, 2))
-
 const landing: LandingConfig & { _github: string } = defu(docsConfig.landing || {}, {
   // Meta
   navigation: false,
@@ -90,6 +88,16 @@ const hero = computed(() => {
     code: landing!.heroCode,
   } as const
 })
+
+const { data: latest } = await useAsyncData(() =>
+  queryCollection('content')
+    .where('path', 'LIKE', '/blog/%')
+    .order('id', 'DESC')
+    .first()
+    .then((res) => res),
+)
+
+const { data: sponsors } = await useAsyncData(() => useSponsors())
 </script>
 
 <template>
@@ -109,6 +117,18 @@ const hero = computed(() => {
         <LandingBackground />
       </template>
 
+      <template #headline>
+        <NuxtLink v-if="latest" :to="latest.path">
+          <UBadge
+            variant="subtle"
+            size="lg"
+            class="px-3 relative rounded-full font-semibold dark:hover:bg-primary-400/15 dark:hover:ring-primary-700"
+          >
+            {{ latest.title }}
+          </UBadge>
+        </NuxtLink>
+      </template>
+
       <template #title>
         {{ landing.heroTitle }}<br /><span class="text-primary text-4xl">{{ landing.heroSubtitle }}</span>
       </template>
@@ -170,12 +190,50 @@ const hero = computed(() => {
       </template>
     </UPageSection>
 
-    <UPageSection v-if="landing.contributors && landing._github" title="Made by community">
+    <UPageSection v-if="landing.contributors && landing._github" title="💛 Contributors">
       <div class="flex justify-center">
         <a :href="`https://github.com/${landing._github}/graphs/contributors`" target="_blank">
           <img :src="`https://contrib.rocks/image?repo=${landing._github}`" />
         </a>
       </div>
     </UPageSection>
+
+    <UPageSection v-if="sponsors?.sponsors.length" title="💜 Sponsors">
+      <div class="flex flex-col items-center">
+        <div
+          v-for="(tier, i) of sponsors.sponsors"
+          :key="i"
+          class="flex flex-wrap justify-center gap-4 mb-6 mt-6 max-w-4xl"
+        >
+          <div v-for="s in tier" :key="s.name" class="flex items-center gap-2 max-w-[300px]">
+            <a
+              :href="s.website"
+              target="_blank"
+              class="flex items-center gap-2"
+              :class="`font-size-${i === 0 ? '4xl' : i === 1 ? '3xl' : 'lg'}`"
+            >
+              <img
+                v-if="s.image"
+                :src="s.image"
+                :alt="s.name"
+                class="object-contain rounded-lg"
+                :class="`w-${i === 0 ? 16 : 8} h-${i === 0 ? 16 : 8}`"
+              />
+              <span v-if="i < 2" class="text-lg font-semibold">{{ s.name }}</span>
+            </a>
+          </div>
+        </div>
+      </div>
+      <div class="text-center">
+        <UButton
+          v-if="sponsors.username"
+          :to="`https://github.com/sponsors/${sponsors.username}`"
+          target="_blank"
+          color="neutral"
+        >
+          Become a Sponsor
+        </UButton>
+      </div>
+    </UPageSection>
   </div>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "undocs",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "repository": "unjs/undocs",
   "license": "MIT",
   "type": "module",

package/schema/config.d.ts

@@ -5,11 +5,13 @@ export interface DocsConfig {
   shortDescription?: string
   url?: string
   github?: string
+  socials?: Record<string, string>
   branch?: string
   themeColor?: string
   redirects?: Record<string, string>
   automd?: unknown
   buildCache?: boolean
+  sponsors?: { api: string }
   landing?:
     | false
     | {

package/schema/config.json

@@ -30,6 +30,22 @@
       "type": "string",
       "description": "The GitHub repository for the documentation site."
     },
+    "socials": {
+      "type": "object",
+      "description": "Social media links for the documentation site.",
+      "additionalProperties": {
+        "type": "string"
+      }
+    },
+    "sponsors": {
+      "type": "object",
+      "properties": {
+        "api": {
+          "type": "string",
+          "description": "The URL to the sponsors JSON API."
+        }
+      }
+    },
     "branch": {
       "type": "string",
       "description": "The branch of the GitHub repository for the documentation site."