@indielayer/ui 1.18.1 → 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/hljs.css

@@ -1,4 +1,3 @@
-/* stylelint-disable */
 .hljs {
   display: block;
   overflow-x: auto;

package/docs/assets/css/tailwind.css

@@ -2,14 +2,23 @@
 @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/index.css";
+@import "../../../exports/tailwind.css";
+
+@source "../../../index.html";
+@source "../../**/*.{vue,js,ts,jsx,tsx}";
+@source "../../../src/**/*.{vue,js,ts,jsx,tsx}";
+
 html,
 body {
   height: 100%;
 }
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+html.dark,
+html.dark body {
+  background-color: var(--color-gray-900, #111827);
+  color-scheme: dark;
+}
 
 @layer base {
   .text-2xs {
@@ -18,29 +27,51 @@ body {
   }
 
   .text-h1 {
-    @apply text-5xl font-black;
+    font-size: var(--text-5xl);
+    line-height: var(--text-5xl--line-height);
+    font-weight: 900;
   }
 
   .text-h2 {
-    @apply text-4xl font-black;
+    font-size: var(--text-4xl);
+    line-height: var(--text-4xl--line-height);
+    font-weight: 900;
   }
 
   .text-h3 {
-    @apply text-2xl font-black;
+    font-size: var(--text-2xl);
+    line-height: var(--text-2xl--line-height);
+    font-weight: 900;
   }
 
   .text-h4 {
-    @apply text-xl font-black;
+    font-size: var(--text-xl);
+    line-height: var(--text-xl--line-height);
+    font-weight: 900;
   }
 
   .text-overline {
-    @apply tracking-widest uppercase text-2xs;
+    letter-spacing: var(--tracking-widest);
+    text-transform: uppercase;
+    font-size: 0.625rem;
+    line-height: 1rem;
   }
 }
 
 @layer components {
   .docs-container {
-    @apply max-w-screen-2xl mx-auto w-full px-4 md:px-8 mt-8 md:mt-16;
+    max-width: var(--breakpoint-2xl);
+    margin-inline: auto;
+    width: 100%;
+    padding-inline: 1rem;
+    margin-top: 2rem;
+  }
+
+  @media (width >= 48rem) {
+    .docs-container {
+      padding-inline: 2rem;
+      margin-top: 4rem;
+    }
   }
 }
 

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>{{ 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/CodeSnippet.vue

@@ -1,12 +1,6 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import { createHighlighter } from 'shiki'
-import indielayerTheme from './Indielayer-theme.json'
-
-const highlighter = createHighlighter({
-  langs: ['js', 'ts', 'vue-html', 'bash', 'vue'],
-  themes: [indielayerTheme as any],
-})
+import { ref, watch } from 'vue'
+import { docsHighlighter, INDIELAYER_THEME } from '../../utils/shikiHighlighter'
 
 const props = defineProps({
   code: String,
@@ -22,27 +16,45 @@ const props = defineProps({
 
 const highlighted = ref('')
 
-onMounted(async () => {
-  await (await highlighter).loadTheme(indielayerTheme as any)
-  highlighted.value = (await highlighter).codeToHtml(props.code || '', { lang: props.lang, theme: 'Indielayer' })
-})
+async function updateHighlight() {
+  const highlighter = await docsHighlighter
+
+  highlighted.value = highlighter.codeToHtml(props.code ?? '', {
+    lang: props.lang,
+    theme: INDIELAYER_THEME,
+  })
+}
+
+watch(
+  () => [props.code, props.lang] as const,
+  updateHighlight,
+  { immediate: true },
+)
 </script>
 
 <template>
   <div class="relative">
     <div v-html="highlighted"></div>
-    <copy-button v-if="showCopyButton" class="!absolute top-2 right-2" :text="code"/>
+    <copy-button v-if="showCopyButton" class="absolute! top-2 right-2" :text="code"/>
   </div>
 </template>
 
-<style lang="postcss">
+<style>
 .shiki {
-  @apply rounded-md overflow-x-auto p-4 text-sm;
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+  line-height: var(--text-sm--line-height);
+  overflow-x: auto;
+  padding: 1rem;
+}
 
-  code { font-family: "Fira Code", monospace; }
+.shiki code {
+  font-family: "Fira Code", monospace;
+}
 
-  @supports (font-variation-settings: normal) {
-    code { font-family: "Fira Code VF", monospace; }
+@supports (font-variation-settings: normal) {
+  .shiki code {
+    font-family: "Fira Code VF", monospace;
   }
 }
 </style>

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/DocsHero.vue

@@ -90,7 +90,7 @@ function scrollToInstallation() {
             width="52"
             height="49"
             alt=""
-            class="shrink-0 drop-shadow-sm"
+            class="shrink-0 drop-shadow-xs"
           />
           <div>
             <div class="flex items-center gap-2 flex-wrap">
@@ -141,7 +141,7 @@ function scrollToInstallation() {
           <x-tag size="sm" outlined rounded>{{ componentCount }}+ components</x-tag>
           <x-tag size="sm" outlined rounded>Vue 3</x-tag>
           <x-tag size="sm" outlined rounded>Nuxt 3</x-tag>
-          <x-tag size="sm" outlined rounded>Tailwind CSS 3</x-tag>
+          <x-tag size="sm" outlined rounded>Tailwind CSS 4</x-tag>
         </div>
       </div>
 
@@ -166,7 +166,7 @@ function scrollToInstallation() {
   </section>
 </template>
 
-<style lang="postcss" scoped>
+<style scoped>
 .docs-hero {
   background: radial-gradient(50% 100% at 25% 100%, #f8fafc 0%, rgb(248 250 252 / 0%) 100%);
 }

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 (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)
 
-    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 }))
+      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>
@@ -211,32 +264,34 @@ const nextTo = computed(() => (props.next ? `/component/${props.next}` : null))
   </div>
 </template>
 
-<style lang="postcss">
-.document-page {
-  h1,
-  h2,
-  h3 {
-    position: relative;
-  }
-
-  h2 {
-    @apply text-xl font-semibold mb-4 mt-8;
-  }
-
-  h1 .anchor,
-  h2 .anchor,
-  h3 .anchor {
-    position: absolute;
-    left: -24px;
-    width: 30px;
-    display: none;
-    color: #96a1b3 !important;
-  }
-
-  h1:hover .anchor,
-  h2:hover .anchor,
-  h3:hover .anchor {
-    display: block;
-  }
+<style>
+.document-page h1,
+.document-page h2,
+.document-page h3 {
+  position: relative;
+}
+
+.document-page h2 {
+  font-size: var(--text-xl);
+  font-weight: 600;
+  line-height: var(--text-xl--line-height);
+  margin-bottom: 1rem;
+  margin-top: 2rem;
+}
+
+.document-page h1 .anchor,
+.document-page h2 .anchor,
+.document-page h3 .anchor {
+  position: absolute;
+  left: -24px;
+  width: 30px;
+  display: none;
+  color: #96a1b3 !important;
+}
+
+.document-page h1:hover .anchor,
+.document-page h2:hover .anchor,
+.document-page h3:hover .anchor {
+  display: block;
 }
 </style>