@feathersdev/websites 0.0.1

package/app/components/content/ProseImg.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { withBase } from 'ufo'
+import { computed, useRuntimeConfig } from '#imports'
+
+const props = defineProps({
+  src: {
+    type: String,
+    default: '',
+  },
+  alt: {
+    type: String,
+    default: '',
+  },
+  width: {
+    type: [String, Number],
+    default: undefined,
+  },
+  height: {
+    type: [String, Number],
+    default: undefined,
+  },
+})
+
+const refinedSrc = computed(() => {
+  if (props.src?.startsWith('/') && !props.src.startsWith('//'))
+    return withBase(props.src, useRuntimeConfig().app.baseURL)
+
+  return props.src
+})
+</script>
+
+<template>
+  <div class="prose-img text-center mb-4">
+    <img :src="refinedSrc" :alt="alt" :width="width" :height="height" class="mb-1 rounded-md" />
+    <small v-if="alt">{{ alt }}</small>
+  </div>
+</template>

package/app/components/content/ProseLi.vue

@@ -0,0 +1,3 @@
+<template>
+  <li><slot /></li>
+</template>

package/app/components/content/ProseOl.vue

@@ -0,0 +1,5 @@
+<template>
+  <ol>
+    <slot />
+  </ol>
+</template>

package/app/components/content/ProseP.vue

@@ -0,0 +1,3 @@
+<template>
+  <p><slot /></p>
+</template>

package/app/components/content/ProsePre.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+interface Props {
+  code?: string
+  language?: string | null
+  filename?: string | null
+  highlights?: Array<number>
+  meta?: string | null
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  code: '',
+  language: null,
+  filename: null,
+  highlights: () => [],
+  meta: null,
+  class: ''
+})
+
+const copied = ref(false)
+
+const copyToClipboard = async () => {
+  if (!props.code) return
+
+  try {
+    await navigator.clipboard.writeText(props.code)
+    copied.value = true
+    setTimeout(() => {
+      copied.value = false
+    }, 1500)
+  } catch (err) {
+    console.error('Failed to copy text: ', err)
+  }
+}
+</script>
+
+<template>
+  <div class="my-6">
+    <div class="relative">
+      <Badge v-if="filename" sm neutral class="absolute top-2.5 left-2 font-mono text-base-content/50">
+        {{ filename }}
+      </Badge>
+      <Button v-if="code" xs neutral class="absolute top-2 right-4 cursor-pointer" @click="copyToClipboard">
+        {{ copied ? 'Copied!' : 'Copy' }}
+      </Button>
+      <pre :class="['overflow-x-auto rounded-lg p-4', filename ? 'pt-12' : '', $props.class]"><slot /></pre>
+    </div>
+  </div>
+</template>

package/app/components/content/ProsePre2.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import Button from '@/components/Button.vue'
+import { useClipboard } from '@vueuse/core'
+
+const props = defineProps({
+  code: {
+    type: String,
+    default: '',
+  },
+  language: {
+    type: String,
+    default: null,
+  },
+  filename: {
+    type: String,
+    default: null,
+  },
+  highlights: {
+    type: Array as () => number[],
+    default: () => [],
+  },
+  meta: {
+    type: String,
+    default: null,
+  },
+  class: {
+    type: String,
+    default: null,
+  },
+})
+
+const { copy, copied } = useClipboard({ source: computed(() => props.code) })
+</script>
+
+<template>
+  <div>
+    <CodeWrapper v-if="meta?.includes('collapse=true')" class="code-wrapper">
+      <div class="relative -my-6">
+        <div class="absolute flex flex-row items-center top-0 right-0">
+          <div v-if="copied" class="pr-2 text-sm text-neutral-content">
+            copied
+          </div>
+          <Button
+            ghost sm
+            class="text-neutral-content hover:bg-secondary hover:text-secondary-content rounded-tl-none rounded-br-none rounded-tr-md rounded-bl-md"
+            @click="() => copy(code)"
+          >
+            copy
+          </Button>
+        </div>
+        <div class="lg:max-w-[calc(100vw-380px)]">
+          <slot />
+        </div>
+      </div>
+    </CodeWrapper>
+    <slot v-else />
+  </div>
+</template>
+
+<style>
+.code-wrapper pre code .line {
+  display: block;
+  min-height: 1rem;
+}
+
+.code-wrapper pre {
+  max-width: calc(100vw - 3.5rem);
+}
+</style>

package/app/components/content/ProseScript.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+interface Props {
+  src?: string
+  async?: boolean
+  defer?: boolean
+  type?: string
+}
+
+const props = defineProps<Props>()
+
+// Only allow specific whitelisted scripts for security
+const allowedScripts = [
+  'https://embed.bsky.app/static/embed.js'
+]
+
+const isAllowed = props.src && allowedScripts.includes(props.src)
+
+if (isAllowed && props.src) {
+  useHead({
+    script: [
+      {
+        src: props.src,
+        async: props.async ?? true,
+        defer: props.defer,
+        type: props.type || 'text/javascript',
+      }
+    ]
+  })
+}
+</script>
+
+<template>
+  <!-- Empty template - script is loaded via useHead -->
+  <div v-if="!isAllowed && src" class="border border-yellow-200 rounded-lg p-4 bg-yellow-50 text-yellow-800">
+    <p class="text-sm">Script from "{{ src }}" is not in the allowlist and cannot be loaded.</p>
+  </div>
+</template>

package/app/components/content/ProseStrong.vue

@@ -0,0 +1,5 @@
+<template>
+  <strong>
+    <slot />
+  </strong>
+</template>

package/app/components/content/ProseTable.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="not-prose relative mb-10 mt-6 overflow-x-auto">
+    <table class="table table-sm">
+      <slot />
+    </table>
+  </div>
+</template>

package/app/components/content/ProseTbody.vue

@@ -0,0 +1,5 @@
+<template>
+  <tbody>
+    <slot />
+  </tbody>
+</template>

package/app/components/content/ProseTd.vue

@@ -0,0 +1,5 @@
+<template>
+  <td>
+    <slot />
+  </td>
+</template>

package/app/components/content/ProseTh.vue

@@ -0,0 +1,5 @@
+<template>
+  <th>
+    <slot />
+  </th>
+</template>

package/app/components/content/ProseThead.vue

@@ -0,0 +1,5 @@
+<template>
+  <thead>
+    <slot />
+  </thead>
+</template>

package/app/components/content/ProseTr.vue

@@ -0,0 +1,5 @@
+<template>
+  <tr class="hover">
+    <slot />
+  </tr>
+</template>

package/app/components/content/ProseUl.vue

@@ -0,0 +1,5 @@
+<template>
+  <ul>
+    <slot />
+  </ul>
+</template>

package/app/composables/useGlobalSearch.ts

@@ -0,0 +1,22 @@
+const isSearchOpen = ref(false)
+
+export function useGlobalSearch() {
+  function openSearch() {
+    isSearchOpen.value = true
+  }
+
+  function closeSearch() {
+    isSearchOpen.value = false
+  }
+
+  function toggleSearch() {
+    isSearchOpen.value = !isSearchOpen.value
+  }
+
+  return {
+    isSearchOpen,
+    openSearch,
+    closeSearch,
+    toggleSearch,
+  }
+}

package/app/composables/useTheme.ts

@@ -0,0 +1,17 @@
+export function useTheme() {
+  const colorMode = useCookie<'light' | 'dark'>('color-mode', {
+    default: () => 'light',
+  })
+
+  const isDark = computed(() => colorMode.value === 'dark')
+
+  function toggleTheme() {
+    colorMode.value = isDark.value ? 'light' : 'dark'
+  }
+
+  return {
+    isDark,
+    toggleTheme,
+    colorMode,
+  }
+}

package/app/layouts/default.vue

@@ -0,0 +1,46 @@
+<template>
+  <Drawer v-slot="{ openDrawer }" name="docs" class="lg:drawer-open">
+    <!-- Static sidebar for desktop -->
+    <Sidebar />
+
+    <DrawerContent name="docs">
+      <Flex class="sticky top-0 h-16 p-2 md:px-4 z-10 w-full items-center">
+        <div class="grow">
+          <Button square class="lg:hidden" @click="() => openDrawer()">
+            <span class="sr-only">Open sidebar</span>
+            <Icon name="heroicons-outline:menu-alt-2" aria-hidden="true" class="w-5 h-5" />
+          </Button>
+
+          <Search />
+        </div>
+
+        <div class="flex items-center ml-2 md:ml-6">
+          <ThemePicker />
+        </div>
+      </Flex>
+
+      <div class="grid grid-cols-4 pb-32">
+        <div class="flex flex-col col-span-4 md:col-span-3 order-2 md:order-1">
+          <Prose class="px-3 lg:px-6 pt-6">
+            <slot />
+          </Prose>
+        </div>
+        <div id="sidebar" class="col-span-4 md:col-span-1 md:pr-6 order-1 md:order-2">
+          <div class="hidden md:block md:sticky top-16">
+            <TableOfContents class="overflow-hidden" />
+          </div>
+
+          <Dropdown end class="z-20 md:hidden fixed right-2" close-on-click-outside>
+            <DropdownButton square>
+              <!-- Table of contents icon -->
+              <Icon name="heroicons-outline:menu-alt-3" class="w-5 h-5 pointer-events-none" aria-hidden="true" />
+            </DropdownButton>
+            <DropdownContent class="w-80 z-10 mt-1 max-h-[80vh] overflow-y-auto rounded-lg shadow-xl">
+              <TableOfContents class="bg-base-200" />
+            </DropdownContent>
+          </Dropdown>
+        </div>
+      </div>
+    </DrawerContent>
+  </Drawer>
+</template>

package/app/layouts/docs.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+const dropdownId = useId()
+</script>
+
+<template>
+  <div class="bg-base-200">
+    <div class="relative mx-auto max-w-328">
+      <TopNav class="mx-auto max-w-328 border-b border-b-base-100/20" />
+
+      <Drawer v-slot="{ toggleDrawer }" name="docs" class="lg:drawer-open">
+        <DrawerSide name="docs" class="z-40">
+          <DocsSidebar @close="toggleDrawer()" />
+        </DrawerSide>
+
+        <DrawerContent name="docs">
+          <Flex class="sticky top-0 h-16 p-2 md:px-4 z-10 w-full items-center lg:hidden">
+            <div class="grow flex items-center gap-2">
+              <Button square class="lg:hidden" @click="() => toggleDrawer()">
+                <span class="sr-only">Open sidebar</span>
+                <Icon name="heroicons-outline:menu-alt-2" aria-hidden="true" class="w-5 h-5" />
+              </Button>
+
+              <DocsSearch class="grow" />
+            </div>
+
+            <div class="flex items-center ml-2 md:ml-6">
+              <!-- <ThemePicker /> -->
+
+              <Dropdown
+                strategy="fixed"
+                placement="bottom-end"
+                class="z-20 md:hidden"
+                :random-id="dropdownId"
+                close-on-click-outside
+              >
+                <DropdownButton square>
+                  <Icon name="heroicons-outline:menu-alt-3" class="w-5 h-5 pointer-events-none" aria-hidden="true" />
+                </DropdownButton>
+                <DropdownContent class="w-80 z-10 mt-1 max-h-[80vh] overflow-y-auto rounded-lg shadow-xl">
+                  <TableOfContents class="bg-base-300" />
+                </DropdownContent>
+              </Dropdown>
+            </div>
+          </Flex>
+
+          <div class="grid grid-cols-4 pb-32">
+            <div class="flex flex-col col-span-4 md:col-span-3 overflow-hidden">
+              <NuxtPage />
+            </div>
+            <div id="right-sidebar" class="col-span-1 md:pr-6">
+              <div class="hidden md:block md:sticky top-16">
+                <TableOfContents class="overflow-hidden" />
+              </div>
+            </div>
+          </div>
+        </DrawerContent>
+      </Drawer>
+    </div>
+  </div>
+  <div class="mx-auto max-w-378 bg-base-200 rounded-b-xl h-12 mb-24" />
+  <FooterMain />
+</template>

package/app/layouts/page.vue

@@ -0,0 +1,11 @@
+<template>
+  <main class="relative w-full min-h-full bg-base-200">
+    <div class="absolute w-full z-50">
+      <TopNav class="max-w-[82rem] mx-auto" />
+    </div>
+    <div class="relative pt-0">
+      <NuxtPage />
+    </div>
+    <FooterMain />
+  </main>
+</template>

package/app/pages/help.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+definePageMeta({
+  layout: 'page',
+})
+</script>
+
+<template>
+  <div
+    class="bg-[url('/img/top_background.svg')] bg-no-repeat bg-cover bg-center text-base-content max-w-screen overflow-x-hidden"
+  >
+    <div class="relative mx-auto max-w-[82rem] lg:drawer-open pt-16 px-4">
+      <Titles title="Help Center" sub-title="Find answers to your questions" class="py-24" />
+    </div>
+    <div class="h-64"></div>
+  </div>
+  <div class="bg-base-200 min-h-screen max-w-[82rem] mx-auto -mt-64 rounded-4xl p-6 pt-12 lg:p-12">
+    <Discord />
+  </div>
+</template>

package/app/pages/privacy.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'page',
+})
+
+const { data: page } = await useAsyncData(() =>
+  queryCollection('sharedPages').where('path', '=', '/pages/privacy').first()
+)
+
+useSeoMeta({
+  title: page.value?.title,
+  description: page.value?.description,
+})
+</script>
+
+<template>
+  <div
+    class="bg-[url('/img/top_background.svg')] bg-no-repeat bg-cover bg-center text-base-content max-w-screen overflow-x-hidden"
+  >
+    <div class="relative mx-auto max-w-[82rem] lg:drawer-open pt-16 px-4">
+      <Titles v-if="page" :title="page.title" class="py-24" />
+    </div>
+    <div class="h-64"></div>
+  </div>
+  <div class="bg-base-200 min-h-screen max-w-[82rem] mx-auto -mt-64 rounded-4xl p-6 pt-12 lg:p-12">
+    <div v-if="page" class="prose mx-auto">
+      <ContentRenderer :value="page" />
+    </div>
+  </div>
+</template>

package/app/pages/tos.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'page',
+})
+
+const { data: page } = await useAsyncData(() => queryCollection('sharedPages').where('path', '=', '/pages/tos').first())
+
+useSeoMeta({
+  title: page.value?.title,
+  description: page.value?.description,
+})
+</script>
+
+<template>
+  <div
+    class="bg-[url('/img/top_background.svg')] bg-no-repeat bg-cover bg-center text-base-content max-w-screen overflow-x-hidden"
+  >
+    <div class="relative mx-auto max-w-[82rem] lg:drawer-open pt-16 px-4">
+      <Titles v-if="page" :title="page.title" class="py-24" />
+    </div>
+    <div class="h-64"></div>
+  </div>
+  <div class="bg-base-200 min-h-screen max-w-[82rem] mx-auto -mt-64 rounded-4xl p-6 pt-12 lg:p-12">
+    <div v-if="page" class="prose mx-auto">
+      <ContentRenderer :value="page" />
+    </div>
+  </div>
+</template>