@feathersdev/websites 0.0.1

package/app/assets/icons/feathers.svg

@@ -0,0 +1,12 @@
+<svg width="114" height="134" viewBox="0 0 114 134" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3_343)">
+<path d="M85.5 0C79.8 0 74.3 2.2 70.2 6.3L68.7 7.8C68 18.6 64.4 28.4 58.7 37.5C60.7 28.8 62.9 20 61.4 15.1L47.5 29C46.8 39.7 43.2 49.5 37.5 58.5C39.8 49.9 41.3 42 40.4 36.1L26.3 50.1C21.5 54.9 18.8 61.4 18.7 68.2V106.8C18.6 106.8 5.2 120 5.2 120C1.9 123.2 0 127.7 0 132.3V133.4L99.2 34.9C108.5 25.7 113.7 13.1 113.7 0.1H85.5V0Z" fill="black"/>
+<path d="M77.8 83L105.1 55.7999C110.5 50.5 113.5 43.2 113.5 35.7V19.2C112.6 22.8 111.4 26.2 109.5 28.9C105.9 33.9 101.9 38.6 97.5 42.9L50.6 89.3999L68.7 87.3C72.1 86.9 75.3 85.3999 77.7 83H77.8Z" fill="black"/>
+<path d="M45.5 94.6L23.5 116.5L35.9 116.7C40.9 116.7 45.6 114.9 49.2 111.4L70.4 90.4C69 91.3 67.7 91.8 66.3 92.2L45.6 94.6H45.5Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_3_343">
+<rect width="114" height="134" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/app/assets/icons/pinion.svg

@@ -0,0 +1,3 @@
+<svg width="114" height="115" viewBox="0 0 114 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M74.1 0.1V15.1C69.2 5.1 61.8 1.8 51.8 0H0C3.4 15.8 10.7 27.5 21.6 35C30.3 40.9 41.5 44.3 55.1 45.1H69.5V49C64.5 49.3 59.6 49.3 55 49H19.1C28.3 78.6 50.7 84.6 83.7 84.6V88.5H38C50 114.8 71.8 114.8 85.6 114.8H113.7V41.4C113.7 19.2 96.1 1 74.1 0.1Z" fill="black"/>
+</svg>

package/app/assets/icons/talon.svg

@@ -0,0 +1,3 @@
+<svg width="149" height="152" viewBox="0 0 149 152" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M85.165 0.849446C110.203 4.58736 132.512 21.7936 144.26 46.5944C148.532 55.6129 149.778 60.3595 148.176 61.3681C146.811 62.2581 142.895 61.5461 137.199 59.4695C127.528 55.9689 124.799 55.1976 119.696 54.4856C111.271 53.3583 111.627 53.5956 102.965 43.6278C98.5147 38.466 89.2589 31.9394 84.2751 30.4561C82.9698 30.0408 82.9104 30.1001 83.6817 31.2274C84.1564 31.8801 85.9957 33.9567 87.7756 35.9147C102.312 51.5783 103.321 52.8836 107.474 61.6055C113.704 74.6585 116.552 87.0589 116.552 101.061C116.552 110.792 115.899 112.631 112.517 112.631C110.796 112.631 109.966 111.919 105.338 106.638C99.5827 100.171 96.3788 97.3233 91.3356 94.2381C86.2923 91.1528 85.521 90.2035 84.1564 85.6943C79.4098 69.9713 78.8758 68.7253 73.5953 60.7155C70.0947 55.3756 62.8562 48.1371 58.8216 46.0011C57.101 45.0518 55.5584 44.3992 55.4397 44.5178C55.321 44.6365 56.567 46.2978 58.169 48.2557C68.4927 60.5375 74.4853 72.5225 77.4519 86.5249C78.8758 93.4668 78.8758 108.062 77.4519 114.945C75.3753 124.675 72.3493 132.745 68.1961 139.627C64.2802 146.035 62.8562 148.824 62.8562 150.01C62.8562 150.9 62.4409 151.197 61.3729 151.197C59.5929 151.197 58.8809 149.892 56.745 142.89C55.9143 140.102 54.3717 135.059 53.3037 131.617C50.3371 121.827 46.2432 114.47 40.6067 108.715C35.9194 104.028 34.3175 102.901 20.4338 94.7721C12.6613 90.2628 5.89743 83.9143 3.34615 78.7524C-2.34973 67.3013 -0.688428 54.2483 7.67739 44.0432C10.288 40.8392 13.2546 38.1693 25.3583 27.8455C27.7316 25.7689 32.0035 21.2597 34.9108 17.8184C37.8181 14.3178 41.3187 10.6392 42.802 9.57126C48.0232 5.83334 57.3976 2.33274 65.2888 1.1461C67.7214 0.790109 70.332 0.374785 71.1627 0.256121C74.6039 -0.218536 79.2318 -0.0405349 85.165 0.849446Z" fill="black"/>
+</svg>

package/app/components/CodePreview.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { codeToHtml } from 'shiki'
+import { computed, onMounted, ref, watch } from 'vue'
+
+const props = defineProps<{
+  path: string
+  minHeight?: string
+  previewClasses?: string
+  prose?: boolean
+}>()
+
+const code = ref('')
+const highlightedCode = ref('')
+
+// Extract filename from path for display
+const filename = computed(() => {
+  return props.path.split('/').pop() || 'code.txt'
+})
+
+// Determine language from file extension
+const language = computed(() => {
+  const extension = props.path.split('.').pop() || 'text'
+  const languageMap: Record<string, string> = {
+    ts: 'typescript',
+    js: 'javascript',
+    vue: 'vue',
+    svelte: 'svelte', // Add this line
+    html: 'html',
+    css: 'css',
+    json: 'json',
+    md: 'markdown',
+    tsx: 'tsx',
+    jsx: 'jsx'
+  }
+  return languageMap[extension] || 'text'
+})
+
+async function loadCodeAndComponent() {
+  try {
+    // Look in the app/.cache/examples directory
+    const files = import.meta.glob(
+      [
+        '../code/examples/**/*.ts',
+        '../code/examples/**/*.tsx',
+        '../code/examples/**/*.js',
+        '../code/examples/**/*.jsx',
+        '../code/examples/**/*.vue',
+        '../code/examples/**/*.svelte',
+        '../code/examples/**/*.md'
+      ],
+      {
+        as: 'raw',
+        eager: false
+      }
+    )
+
+    // Normalize the path by removing prefixes and cleaning up
+    let normalizedPath = props.path
+      .replace(/^@\/examples\//, '') // Remove @/examples/ prefix
+      .replace(/^\.\.\/\.\.\/\.\.\/\.\.\/examples\//, '') // Remove ../../../../examples/ prefix
+      .replace(/^examples\//, '') // Remove examples/ prefix if present
+      .replace(/^\/*|\/*$/g, '') // Remove leading/trailing slashes
+
+    // Try to find the file with the normalized path
+    let fileKey = Object.keys(files).find((key) => key.includes(`/${normalizedPath}`))
+
+    // If not found, try to find it by just the filename
+    if (!fileKey) {
+      const filename = normalizedPath.split('/').pop()
+      fileKey = Object.keys(files).find((key) => key.endsWith(`/${filename}`))
+    }
+
+    if (!fileKey) {
+      throw new Error(
+        `File not found: ${normalizedPath}. Make sure the file exists in the examples directory and has been copied to the cache.`
+      )
+    }
+
+    const loadRaw = files[fileKey]
+    if (!loadRaw) {
+      throw new Error(
+        `File not found: ${normalizedPath}. Make sure the file exists in the examples directory and has been copied to the cache.`
+      )
+    }
+    code.value = await loadRaw()
+
+    highlightedCode.value = await codeToHtml(code.value, {
+      lang: language.value,
+      theme: 'github-dark'
+    })
+  } catch (error) {
+    console.error(`Error loading file: ${props.path}`, error)
+    code.value = `// Error loading file: ${props.path}\n// ${error instanceof Error ? error.message : String(error)}`
+    highlightedCode.value = await codeToHtml(code.value, {
+      lang: 'javascript',
+      theme: 'github-dark'
+    })
+  }
+}
+
+onMounted(loadCodeAndComponent)
+
+watch(
+  () => props.path,
+  () => {
+    loadCodeAndComponent()
+  }
+)
+</script>
+
+<template>
+  <ProsePre :code="code" :filename="filename" class="code-preview">
+    <div v-html="highlightedCode" />
+  </ProsePre>
+</template>
+
+<style>
+.code-preview > div > pre {
+  padding-left: 0;
+}
+.code-preview {
+  margin-top: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.code-preview pre code span.line:not(:last-of-type):empty {
+  display: block;
+  margin-bottom: 1.5rem;
+}
+pre.shiki {
+  background-color: var(--tw-prose-pre-bg) !important;
+  color: var(--tw-prose-pre-code) !important;
+  font-size: 16px;
+}
+pre.shiki code {
+  display: flex;
+  flex-direction: column;
+}
+</style>

package/app/components/CodeSnippet.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { codeToHtml } from 'shiki'
+import { computed, onMounted, ref, resolveComponent, watch } from 'vue'
+
+const props = defineProps<{
+  slug: string
+  name: string
+  minHeight?: string
+  previewClasses?: string
+  prose?: boolean
+}>()
+
+const code = ref('')
+const highlightedCode = ref('')
+const copied = ref(false)
+
+function pascalCase(str: string): string {
+  return str
+    .replace(/(^|[-_/])(\w)/g, (_: string, __: string, c: string) => c ? c.toUpperCase() : '')
+}
+
+const componentName = computed(() => {
+  // e.g., DemoSwapFlip for slug="swap", name="Flip"
+  return `Demo${pascalCase(props.slug)}${pascalCase(props.name)}`
+})
+
+const resolvedComponent = computed(() => {
+  return resolveComponent(componentName.value)
+})
+
+const filename = computed(() => `${props.name}.vue`)
+
+async function loadCodeAndComponent() {
+  const files = import.meta.glob('~/components-docs/demo/**/*.vue', { as: 'raw' })
+  const key = `/components-docs/demo/${props.slug}/${props.name}.vue`
+
+  const loadRaw = files[key]
+  if (!loadRaw) {
+    console.error(`Missing file: ${key}`)
+    return
+  }
+
+  code.value = await loadRaw()
+
+  highlightedCode.value = await codeToHtml(code.value, {
+    lang: 'vue',
+    theme: 'github-dark',
+  })
+}
+
+async function copyCode() {
+  await navigator.clipboard.writeText(code.value)
+  copied.value = true
+  setTimeout(() => (copied.value = false), 1500)
+}
+
+onMounted(loadCodeAndComponent)
+
+watch([() => props.slug, () => props.name], () => {
+  loadCodeAndComponent()
+})
+</script>
+
+<template>
+  <div class="code-preview my-6">
+    <div
+      :style="minHeight ? { minHeight } : undefined"
+      class="flex overflow-x-auto p-6 lg:p-10 flex-nowrap items-start mt-4 border-4 rounded-t-xl border-base-300 gap-2 code-preview-bg"
+      :class="[previewClasses, prose ? 'prose' : 'not-prose']"
+    >
+      <component :is="resolvedComponent" />
+    </div>
+
+    <Collapse arrow toggle class="mb-8 rounded-b-xl rounded-t-none bg-base-300 p-0">
+      <CollapseTitle class="text-lg font-medium bg-base-300">
+        Code Example
+      </CollapseTitle>
+      <CollapseContent class="overflow-hidden !pb-0 -mt-4">
+        <div class="relative">
+          <Badge sm neutral class="absolute top-2.5 left-2 font-mono text-base-content/50">
+            {{ filename }}
+          </Badge>
+          <Button xs neutral class="copy-button" @click="copyCode">
+            {{ copied ? 'Copied!' : 'Copy' }}
+          </Button>
+          <pre class="overflow-x-auto rounded-lg p-4" v-html="highlightedCode" />
+        </div>
+      </CollapseContent>
+    </Collapse>
+  </div>
+</template>
+
+<style scoped>
+.copy-button {
+  position: absolute;
+  top: 0.5rem;
+  right: 1rem;
+  font-size: 0.75rem;
+  color: white;
+  cursor: pointer;
+}
+
+.code-preview-bg {
+  /* Diagonal stripes, subtle effect */
+  background-image: repeating-linear-gradient(
+    -45deg,
+    rgba(0,0,0,0.06) 0,
+    rgba(0,0,0,0.06) 8px,
+    transparent 8px,
+    transparent 16px
+  );
+}
+</style>
+
+<style>
+.shiki code {
+  @apply flex flex-col;
+}
+</style>

package/app/components/Discord.vue

@@ -0,0 +1,33 @@
+<template>
+  <Flex col items-center justify-center class="md:flex-row py-8 md:py-24 bg-base-300/25 rounded-4xl">
+    <Flex col class="md:flex-row-reverse items-center gap-6">
+      <Flex class="px-6 md:pl-24">
+        <img src="/img/bird-comms.png" alt="Discord" />
+      </Flex>
+      <Flex col items-center class="gap-4 md:items-start py-5 md:pl-8">
+        <!-- <Text size="md" class="text-center md:text-left text-base-content/70">Need more support?</Text> -->
+        <Text is="h3" size="3xl" bold class="text-center md:text-left">Join our community</Text>
+        <Text size="md" class="text-center md:text-left text-base-content/70 text-balance line-clamp-2"
+          >Get help and support <br />
+          from the Feathers community</Text
+        >
+        <Flex>
+          <NuxtLink
+            primary
+            href="https://discord.gg/qa8kez8QBx"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="btn btn-primary btn-xl gap-2 mt-4"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
+              <path
+                d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.105 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.8 8.18 1.8 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.293a.077.077 0 01-.008.127 12.27 12.27 0 01-1.873.892.077.077 0 00-.041.105c.36.698.774 1.362 1.225 1.993a.076.076 0 00.084.028 19.84 19.84 0 005.99-3.03.077.077 0 00.032-.054c.5-5.18-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.418 0-1.333.946-2.415 2.157-2.415 1.21 0 2.175 1.08 2.157 2.415 0 1.333-.946 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.418 0-1.333.954-2.415 2.157-2.415 1.203 0 2.175 1.08 2.157 2.415 0 1.333-.955 2.418-2.157 2.418z"
+              />
+            </svg>
+            Join our Discord
+          </NuxtLink>
+        </Flex>
+      </Flex>
+    </Flex>
+  </Flex>
+</template>

package/app/components/DocsPage.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import type { AuthDocsCollectionItem, FeathersDocsCollectionItem, PinionDocsCollectionItem } from '@nuxt/content'
+
+defineProps<{ page: PinionDocsCollectionItem | AuthDocsCollectionItem | FeathersDocsCollectionItem }>()
+</script>
+
+<template>
+  <div v-if="page" class="pt-6 px-3 lg:px-6 prose mx-auto max-w-full w-full">
+    <ContentRenderer v-if="page" :value="page" />
+  </div>
+</template>

package/app/components/DocsSearch.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps<{
+  /** Array of Nuxt Content collection names to search. If not provided, auto-detects from route. */
+  collections?: string[]
+  /** Display name for the search (e.g., "Feathers Docs"). If not provided, auto-generates. */
+  searchLabel?: string
+  /** Array of doc paths to show as popular/featured when search is empty */
+  popularPaths?: string[]
+}>()
+
+const isModalOpen = ref(false)
+const isMac = ref(false)
+
+onMounted(() => {
+  // Detect platform for keyboard shortcut display
+  isMac.value = navigator.platform.toLowerCase().includes('mac')
+
+  // Register global keyboard shortcut
+  const handleGlobalKeydown = (event: KeyboardEvent) => {
+    // Cmd+K on Mac, Ctrl+K on Windows/Linux
+    if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
+      event.preventDefault()
+      isModalOpen.value = true
+    }
+  }
+
+  document.addEventListener('keydown', handleGlobalKeydown)
+
+  onUnmounted(() => {
+    document.removeEventListener('keydown', handleGlobalKeydown)
+  })
+})
+
+function openModal() {
+  isModalOpen.value = true
+}
+</script>
+
+<template>
+  <div class="w-full">
+    <!-- Search Trigger Button -->
+    <Button
+      ghost
+      class="bg-base-100 border border-base-300 w-full justify-start gap-2 font-normal text-base-content/60 hover:text-base-content hover:bg-base-100 hover:border-base-content/20 whitespace-nowrap"
+      @click="openModal"
+    >
+      <Icon name="heroicons:magnifying-glass" class="w-4 h-4" />
+      <Text class="grow text-left">Search docs...</Text>
+      <Kbd sm class="hidden sm:inline-flex">{{ isMac ? '⌘' : 'Ctrl' }}k</Kbd>
+    </Button>
+
+    <!-- Search Modal -->
+    <DocsSearchModal
+      v-model="isModalOpen"
+      :collections="props.collections"
+      :search-label="props.searchLabel"
+      :popular-paths="props.popularPaths"
+    />
+  </div>
+</template>