@indielayer/ui 2.0.0 → 2.1.0

package/docs/App.vue

@@ -3,17 +3,32 @@ import { provide, ref } from 'vue'
 import { RouterView } from 'vue-router'
 import { BaseTheme, CarbonTheme } from '@indielayer/ui'
 
-const lastTheme = localStorage.getItem('THEME') || ''
-
 const themes = [BaseTheme, CarbonTheme]
-const theme = ref(themes.find((t) => t.name === lastTheme) || BaseTheme)
+
+function readStoredTheme() {
+  if (import.meta.env.SSR || typeof localStorage === 'undefined') return ''
+
+  try {
+    return localStorage.getItem('THEME') || ''
+  } catch {
+    return ''
+  }
+}
+
+const theme = ref(themes.find((t) => t.name === readStoredTheme()) || BaseTheme)
 
 provide('selectTheme', {
   theme,
   themes,
   setTheme(key: string) {
     theme.value = themes.find((t) => t.name === key) || BaseTheme
-    localStorage.setItem('THEME', theme.value.name)
+    if (import.meta.env.SSR || typeof localStorage === 'undefined') return
+
+    try {
+      localStorage.setItem('THEME', theme.value.name)
+    } catch {
+      // ignore
+    }
   },
 })
 </script>

package/docs/assets/css/tailwind.css

@@ -2,7 +2,7 @@
 @import url("https://1.www.s81c.com/common/carbon/plex/sans.css");
 @import url("https://1.www.s81c.com/common/carbon/plex/mono.css");
 
-@import "tailwindcss";
+@import "tailwindcss/index.css";
 @import "../../../exports/tailwind.css";
 
 @source "../../../index.html";
@@ -14,6 +14,12 @@ body {
   height: 100%;
 }
 
+html.dark,
+html.dark body {
+  background-color: var(--color-gray-900, #111827);
+  color-scheme: dark;
+}
+
 @layer base {
   .text-2xs {
     font-size: 0.625rem;

package/docs/components/Cookies.vue

@@ -22,7 +22,9 @@ export default {
       show: false,
     }
   },
-  created() {
+  mounted() {
+    if (import.meta.env.SSR || typeof localStorage === 'undefined') return
+
     try {
       if (!localStorage.getItem('cookie-gotit')) this.show = true
     } catch (e) {

package/docs/components/common/CodePreview.vue

@@ -72,7 +72,7 @@ async function copy(text?: string) {
         <template #tooltip>{{ expandedSync ? 'Hide' : 'Show' }} code</template>
       </x-tooltip>
     </h2>
-    <p v-if="description" class="capitalize text-secondary-500 dark:text-secondary-400 mb-4">{{ description }}</p>
+    <p v-if="description" class="text-secondary-500 dark:text-secondary-400 mb-4">{{ description }}</p>
     <slot></slot>
     <x-accordion-item ref="codeRef" :expanded="expanded" :show-icon="false">
       <template #content>

package/docs/components/common/DocsCopyPage.vue

@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { useNotifications, type MenuArrayItem } from '@indielayer/ui'
+
+const route = useRoute()
+const notifications = useNotifications()
+const mounted = ref(false)
+const menuOpen = ref(false)
+const copying = ref(false)
+
+onMounted(() => {
+  mounted.value = true
+})
+
+const SITE_URL = 'https://indielayer.com'
+
+const componentSlug = computed(() => {
+  const path = route.path.replace(/\/$/, '')
+
+  if (!path.startsWith('/component/')) return null
+
+  return path.replace('/component/', '')
+})
+
+const markdownUrl = computed(() => {
+  if (!componentSlug.value) return null
+
+  const origin = typeof window !== 'undefined' ? window.location.origin : SITE_URL
+
+  return `${origin}/md/component/${componentSlug.value}.md`
+})
+
+const canonicalMarkdownUrl = computed(() => {
+  if (!componentSlug.value) return null
+
+  return `${SITE_URL}/md/component/${componentSlug.value}.md`
+})
+
+function aiPrompt(url: string) {
+  return `Read ${url} so I can ask questions about it.`
+}
+
+const chatGptUrl = computed(() => {
+  if (!canonicalMarkdownUrl.value) return '#'
+
+  return `https://chatgpt.com/?hints=search&q=${encodeURIComponent(aiPrompt(canonicalMarkdownUrl.value))}`
+})
+
+const claudeUrl = computed(() => {
+  if (!canonicalMarkdownUrl.value) return '#'
+
+  return `https://claude.ai/new?q=${encodeURIComponent(aiPrompt(canonicalMarkdownUrl.value))}`
+})
+
+async function copyText(text: string, message: string) {
+  try {
+    await navigator.clipboard.writeText(text)
+  } catch {
+    const el = document.createElement('textarea')
+
+    el.value = text
+    document.body.appendChild(el)
+    el.select()
+    document.execCommand('copy')
+    document.body.removeChild(el)
+  }
+
+  notifications?.success(message)
+}
+
+async function fetchMarkdown() {
+  if (!markdownUrl.value) throw new Error('No markdown URL')
+
+  const res = await fetch(markdownUrl.value)
+
+  if (!res.ok) throw new Error(`Failed to fetch markdown (${res.status})`)
+
+  return res.text()
+}
+
+async function copyPage() {
+  if (!markdownUrl.value || copying.value) return
+
+  copying.value = true
+  menuOpen.value = false
+
+  try {
+    const markdown = await fetchMarkdown()
+
+    await copyText(markdown, 'Copied page as Markdown')
+  } catch {
+    notifications?.error('Could not copy page markdown')
+  } finally {
+    copying.value = false
+  }
+}
+
+async function copyMarkdownLink() {
+  if (!canonicalMarkdownUrl.value) return
+
+  await copyText(canonicalMarkdownUrl.value, 'Copied Markdown link')
+}
+
+async function copyLlmsTxt() {
+  await copyText(`${SITE_URL}/llms.txt`, 'Copied llms.txt URL')
+}
+
+function closeMenu() {
+  menuOpen.value = false
+}
+
+const menuItems = computed<MenuArrayItem[]>(() => {
+  if (!markdownUrl.value || !canonicalMarkdownUrl.value) return []
+
+  return [
+    {
+      label: 'Copy Markdown link',
+      icon: 'link',
+      onClick: () => { void copyMarkdownLink() },
+    },
+    {
+      label: 'View as Markdown',
+      icon: 'code',
+      iconRight: 'external-link',
+      href: markdownUrl.value,
+      target: '_blank',
+      attrs: { rel: 'noopener noreferrer' },
+    },
+    {
+      label: 'Open in ChatGPT',
+      icon: 'sparkles',
+      iconRight: 'external-link',
+      href: chatGptUrl.value,
+      target: '_blank',
+      attrs: { rel: 'noopener noreferrer' },
+    },
+    {
+      label: 'Open in Claude',
+      icon: 'sparkles',
+      iconRight: 'external-link',
+      href: claudeUrl.value,
+      target: '_blank',
+      attrs: { rel: 'noopener noreferrer' },
+    },
+    { divider: true },
+    {
+      label: 'Copy llms.txt URL',
+      icon: 'link',
+      onClick: () => { void copyLlmsTxt() },
+    },
+    {
+      label: 'View llms.txt',
+      icon: 'book',
+      iconRight: 'external-link',
+      href: `${SITE_URL}/llms.txt`,
+      target: '_blank',
+      attrs: { rel: 'noopener noreferrer' },
+    },
+  ]
+})
+</script>
+
+<template>
+  <div v-if="mounted && markdownUrl" class="docs-copy-page inline-flex shrink-0">
+    <x-button-group size="xs" outlined>
+      <x-button
+        icon-left="copy"
+        :loading="copying"
+        @click="copyPage"
+      >
+        Copy page
+      </x-button>
+      <x-popover
+        v-model:shown="menuOpen"
+        placement="bottom-end"
+        :distance="6"
+      >
+        <x-button
+          icon="chevron-down"
+          aria-label="More copy options"
+        />
+        <template #content>
+          <x-popover-container class="w-64 p-1.5">
+            <x-menu
+              size="sm"
+              :items="menuItems"
+              @item-click="closeMenu"
+            />
+          </x-popover-container>
+        </template>
+      </x-popover>
+    </x-button-group>
+  </div>
+  <div
+    v-else-if="!mounted && markdownUrl"
+    class="inline-flex h-8 w-[7.5rem] shrink-0 rounded-md border border-transparent"
+    aria-hidden="true"
+  ></div>
+</template>

package/docs/components/common/DocumentPage.vue

@@ -29,6 +29,7 @@ useDocMeta({
 
 const headers = [
   { text: 'Name', value: 'name' },
+  { text: 'Description', value: 'description' },
   { text: 'Type', value: 'type' },
   { text: 'Default', value: 'default' },
   { text: 'Values', value: 'validator' },
@@ -40,10 +41,25 @@ const headersSimple = [
   { text: 'Description', value: 'description' },
 ]
 
+function mapDocEntries(source: Record<string, unknown> | undefined) {
+  if (!source || typeof source !== 'object') return []
+
+  return Object.keys(source).map((name) => {
+    const value = source[name]
+    const description = typeof value === 'string'
+      ? value
+      : (value && typeof value === 'object' && 'description' in value
+        ? String((value as { description?: unknown; }).description || '')
+        : '')
+
+    return { name, description }
+  })
+}
+
 const componentsProperties = computed(() => {
   if (!props.components) return null
   const components = Array.isArray(props.components) ? props.components : [props.components]
-  const properties = {}
+  const properties: Record<string, Record<string, unknown[]>> = {}
 
   components.forEach((comp: any) => {
     const componentName = comp.name.slice(1)
@@ -71,37 +87,66 @@ const componentsProperties = computed(() => {
       ...comp.props,
     }
 
+    properties[componentName] = properties[componentName] || {}
+
     if (Object.keys(allProps).length > 0) {
       const mappedProps = Object.keys(allProps).map((key) => {
-        const propFrom = allProps[key].type ?? allProps[key]
-        let propDefault = allProps[key].default
+        const propDef = allProps[key]
+        const propFrom = propDef?.type ?? propDef
+        let propDefault = propDef?.default
         let propType = []
 
         if (Array.isArray(propFrom)) {
           propType = propFrom.map((type) => type.name)
         } else {
           propType = [propFrom.name]
-          if (propFrom.name === 'Boolean' && !propDefault) propDefault = false
+          if (propFrom.name === 'Boolean' && propDefault === undefined) propDefault = false
         }
 
         return {
           name: key,
+          description: typeof propDef?.description === 'string' ? propDef.description : '',
           default: propDefault,
-          required: allProps[key].required,
+          required: propDef?.required,
           validator: allValidators[key],
           type: propType,
         }
       })
 
-      properties[componentName] = { props: mappedProps, ...properties[componentName] }
+      properties[componentName].props = mappedProps
     }
 
-    ['methods', 'slots'].forEach((property) => {
-      if (comp[property]) properties[componentName][property] = Object.keys(comp[property]).map((k) => ({ name: k }))
-    })
+    const docs = comp.docs || {}
+    const slotDocs = mapDocEntries(docs.slots)
+    const methodDocs = mapDocEntries(docs.methods)
+    const emitDocs = docs.emits || {}
 
-    if (comp['emits']) properties[componentName]['emits'] = Array.isArray(comp['emits']) ? comp['emits'].map((k) => ({ name: k })) : Object.keys(comp['emits']).map((k) => ({ name: k }))
-    if (comp['expose']) properties[componentName]['methods'] = comp['expose'].map((k) => ({ name: k }))
+    if (slotDocs.length > 0) {
+      properties[componentName].slots = slotDocs
+    } else if (comp.slots) {
+      properties[componentName].slots = Object.keys(comp.slots).map((k) => ({ name: k, description: '' }))
+    }
+
+    if (comp.emits) {
+      const emitNames = Array.isArray(comp.emits) ? comp.emits : Object.keys(comp.emits)
+
+      properties[componentName].emits = emitNames.map((name: string) => ({
+        name,
+        description: typeof emitDocs[name] === 'string'
+          ? emitDocs[name]
+          : (emitDocs[name]?.description || ''),
+      }))
+    } else if (Object.keys(emitDocs).length > 0) {
+      properties[componentName].emits = mapDocEntries(emitDocs)
+    }
+
+    if (methodDocs.length > 0) {
+      properties[componentName].methods = methodDocs
+    } else if (comp.expose) {
+      properties[componentName].methods = comp.expose.map((k: string) => ({ name: k, description: '' }))
+    } else if (comp.methods) {
+      properties[componentName].methods = Object.keys(comp.methods).map((k) => ({ name: k, description: '' }))
+    }
   })
 
   return properties
@@ -112,19 +157,24 @@ const nextTo = computed(() => (props.next ? `/component/${props.next}` : null))
 </script>
 
 <template>
-  <div class="document-page w-full">
-    <div class="text-4xl font-semibold">
-      {{ title }}
-      <x-tooltip>
-        <x-link :href="`${github}/index.vue`" target="_blank" color="#94a3b8">
-          <x-icon icon="edit" size="sm" />
-        </x-link>
-        <template #tooltip>
-          Edit on <span class="text-gray-300">GitHub</span>
-        </template>
-      </x-tooltip>
+  <div class="document-page docs-container w-full">
+    <div class="flex items-start justify-between gap-4">
+      <div class="min-w-0">
+        <h1 class="text-4xl font-semibold">
+          {{ title }}
+          <x-tooltip>
+            <x-link :href="`${github}/index.vue`" target="_blank" color="#94a3b8">
+              <x-icon icon="edit" size="sm" />
+            </x-link>
+            <template #tooltip>
+              Edit on <span class="text-gray-300">GitHub</span>
+            </template>
+          </x-tooltip>
+        </h1>
+        <div class="text-lg my-2 text-gray-500 dark:text-gray-400">{{ description }}</div>
+      </div>
+      <docs-copy-page class="mt-1"/>
     </div>
-    <div class="text-lg my-2 text-gray-500 dark:text-gray-400">{{ description }}</div>
     <div class="mt-6 space-y-12">
       <slot></slot>
 
@@ -172,6 +222,9 @@ const nextTo = computed(() => (props.next ? `/component/${props.next}` : null))
                   <template #item-name="{ item }">
                     <div class="text-primary-500">{{ item.name }}</div>
                   </template>
+                  <template #item-description="{ item }">
+                    <div class="text-secondary-600 dark:text-secondary-400">{{ item.description }}</div>
+                  </template>
                   <template #item-type="{ item }">
                     <div v-for="t in item.type" :key="t">{{ t }}</div>
                   </template>

package/docs/components/toolbar/ToolbarColorToggle.vue

@@ -1,41 +1,52 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 
 const colorMode = ref('light')
 
-try {
-  const storedMode = localStorage.getItem('color-mode')
+function updateMode() {
+  if (typeof document === 'undefined') return
+
+  colorMode.value === 'light'
+    ? document.querySelector('html')?.classList.remove('dark')
+    : document.querySelector('html')?.classList.add('dark')
+}
+
+function readInitialMode() {
+  if (import.meta.env.SSR || typeof localStorage === 'undefined') return 'light'
+
+  try {
+    const storedMode = localStorage.getItem('color-mode')
+
+    if (storedMode) return storedMode
 
-  if (storedMode) {
-    colorMode.value = storedMode
-  } else {
-    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      colorMode.value = 'dark'
+    if (typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches) {
+      return 'dark'
     }
+  } catch {
+    // ignore
   }
-} catch (e) {
-  colorMode.value = 'light'
+
+  return 'light'
 }
 
-updateMode()
+onMounted(() => {
+  colorMode.value = readInitialMode()
+  updateMode()
+})
 
 function toggle() {
   colorMode.value = (colorMode.value === 'light') ? 'dark' : 'light'
 
   updateMode()
 
+  if (import.meta.env.SSR || typeof localStorage === 'undefined') return
+
   try {
     localStorage.setItem('color-mode', colorMode.value)
-  } catch (e) {
+  } catch {
     colorMode.value = 'light'
   }
 }
-
-function updateMode() {
-  colorMode.value === 'light'
-    ? document.querySelector('html')?.classList.remove('dark')
-    : document.querySelector('html')?.classList.add('dark')
-}
 </script>
 
 <template>

package/docs/components/toolbar/ToolbarSearch.vue

@@ -133,7 +133,9 @@ function keydownInput(e: KeyboardEvent) {
   }
 }
 
-const { x: mouseX, y: mouseY } = useMouse({ type: 'page' })
+const { x: mouseX, y: mouseY } = import.meta.env.SSR
+  ? { x: ref(0), y: ref(0) }
+  : useMouse({ type: 'page' })
 
 function hoverResult(e: MouseEvent) {
   if (mouseX.value !== e.x || mouseY.value !== e.y) {
@@ -169,16 +171,14 @@ const metaKey = ref('')
 
 onMounted(() => {
   metaKey.value = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? '⌘' : 'Ctrl'
-})
 
-if (document) {
   useEventListener(document, 'keydown', (e: KeyboardEvent) => {
     if (e.key === 'k' && (e.ctrlKey || e.metaKey)) {
       e.preventDefault()
       openSearch()
     }
   })
-}
+})
 </script>
 
 <template>

package/docs/composables/useDocMeta.ts

@@ -3,7 +3,7 @@ import { useHead } from '@unhead/vue'
 const SITE_URL = 'https://indielayer.com'
 const SITE_NAME = 'Indielayer'
 const DEFAULT_OG_IMAGE = `${SITE_URL}/card.jpg`
-const DEFAULT_KEYWORDS = 'indielayer, vue, vue 3, nuxt, nuxt 3, tailwind css, ui kit, ui library, ui components, component library'
+const LLMS_TXT = `${SITE_URL}/llms.txt`
 
 export function useDocMeta(options: {
   title: string;
@@ -17,12 +17,67 @@ export function useDocMeta(options: {
   const description = options.description
     || 'Vue 3 and Tailwind CSS UI components for fast web applications.'
   const url = options.path ? `${SITE_URL}${options.path}` : SITE_URL
+  const isComponent = Boolean(options.path?.startsWith('/component/'))
+  const componentSlug = isComponent ? options.path!.replace('/component/', '') : null
+  const markdownUrl = componentSlug
+    ? `${SITE_URL}/md/component/${componentSlug}.md`
+    : undefined
+
+  const breadcrumbItems = [
+    {
+      '@type': 'ListItem',
+      position: 1,
+      name: 'Docs',
+      item: `${SITE_URL}/getting-started`,
+    },
+  ]
+
+  if (isComponent && options.title) {
+    breadcrumbItems.push({
+      '@type': 'ListItem',
+      position: 2,
+      name: options.title,
+      item: url,
+    })
+  }
+
+  const schema = [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'WebPage',
+      name: pageTitle,
+      description,
+      url,
+      isPartOf: {
+        '@type': 'WebSite',
+        name: SITE_NAME,
+        url: SITE_URL,
+      },
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'BreadcrumbList',
+      itemListElement: breadcrumbItems,
+    },
+  ]
+
+  const links: Array<Record<string, string>> = [
+    { rel: 'canonical', href: url },
+    { rel: 'describedby', href: LLMS_TXT },
+  ]
+
+  if (markdownUrl) {
+    links.push({
+      rel: 'alternate',
+      type: 'text/markdown',
+      href: markdownUrl,
+    })
+  }
 
   useHead({
     title: pageTitle,
     meta: [
       { name: 'description', content: description },
-      { name: 'keywords', content: DEFAULT_KEYWORDS },
       { property: 'og:site_name', content: SITE_NAME },
       { property: 'og:title', content: pageTitle },
       { property: 'og:description', content: description },
@@ -40,8 +95,12 @@ export function useDocMeta(options: {
       { name: 'twitter:title', content: pageTitle },
       { name: 'twitter:description', content: description },
     ],
-    link: [
-      { rel: 'canonical', href: url },
+    link: links,
+    script: [
+      {
+        type: 'application/ld+json',
+        children: JSON.stringify(schema),
+      },
     ],
   })
 }

package/docs/icons.ts

@@ -78,6 +78,9 @@ export default {
   'refresh-cw':'<polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>',
   'arrow-right': '<line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline>',
   'arrow-left': '<line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline>',
+  link: '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>',
+  'external-link': '<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line>',
+  sparkles: '<path d="M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z"/><path d="M19 14l.75 2.25L22 17l-2.25.75L19 20l-.75-2.25L16 17l2.25-.75L19 14z"/><path d="M5 15l.75 2.25L8 18l-2.25.75L5 21l-.75-2.25L2 18l2.25-.75L5 15z"/>',
   'wrench': '<path d="M21.75 6.75a4.5 4.5 0 01-4.884 4.484c-1.076-.091-2.264.071-2.95.904l-7.152 8.684a2.548 2.548 0 11-3.586-3.586l8.684-7.152c.833-.686.995-1.874.904-2.95a4.5 4.5 0 016.336-4.486l-3.276 3.276a3.004 3.004 0 002.25 2.25l3.276-3.276c.256.565.398 1.192.398 1.852z" /><path d="M4.867 19.125h.008v.008h-.008v-.008z" />',
 
   /**