@feathersdev/websites 0.0.1

package/app/components/NewsletterSubscribe.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <Titles title="Subscribe to our Newsletter" description="Get new Feathers content as it becomes available." />
+
+    <form
+      action="https://buttondown.email/api/emails/embed-subscribe/feathers"
+      method="post"
+      target="popupwindow"
+      onsubmit="window.open('https://buttondown.email/feathers', 'popupwindow')"
+      class="embeddable-buttondown-form flex flex-col"
+    >
+      <Join class="join-vertical md:join-horizontal mt-8">
+        <Label xl join floating input class="bg-white/10 py-3 px-3 w-full">
+          <Text>Enter your email</Text>
+          <Input id="bd-email" type="email" name="email" placeholder="Enter your email" />
+        </Label>
+        <Button join primary type="submit" value="Subscribe" name="Submit" size="xl"> Subscribe </Button>
+      </Join>
+    </form>
+  </div>
+</template>

package/app/components/SidebarMenuSection.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { MenuItem } from '../../content.config.schema'
+
+defineProps<{
+  section?: MenuItem
+}>()
+</script>
+
+<template>
+  <Menu class="w-full">
+    <li v-if="!section?.noDivider" class="mx-0" />
+    <MenuTitle v-if="section && !section.path" class="flex flex-row items-center gap-3">
+      <Icon v-if="section.icon" :name="section.icon" :class="section.iconClasses" />
+      {{ section.title }}
+    </MenuTitle>
+
+    <template v-for="link in section?.children" :key="link.title">
+      <!-- Menu item with children - render submenu -->
+      <MenuItem v-if="link.children">
+        <MenuExpand :close-on-click-outside="false">
+          <MenuExpandToggle class="flex flex-row items-center">
+            <Icon v-if="link.icon" :name="link.icon" class="w-5 h-5 mr-1" />
+            <Text class="grow">
+              {{ link.title }}
+            </Text>
+            <Badge v-if="link.meta?.new" sm accent class="ml-2"> new </Badge>
+          </MenuExpandToggle>
+          <!-- Recursively render child menu -->
+          <SidebarMenuSection :children="link.children" :no-divider="true" />
+        </MenuExpand>
+      </MenuItem>
+
+      <!-- Regular menu item without children -->
+      <MenuItem v-else>
+        <NuxtLink :to="link.path" exact-active-class="menu-active" class="flex flex-row items-center">
+          <Icon v-if="link.icon" :name="link.icon" class="w-5 h-5 mr-1" />
+          <Text class="grow">
+            {{ link.title }}
+          </Text>
+          <Badge v-if="link.meta?.new" sm accent class="ml-2"> new </Badge>
+        </NuxtLink>
+      </MenuItem>
+    </template>
+  </Menu>
+</template>

package/app/components/TableOfContents.vue

@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import TocTree from './TocTree.vue'
+
+const pageRoute = useRoute()
+
+// Interface for our TOC structure
+interface TocLink {
+  id: string
+  text: string
+  level: number
+  children: TocLink[]
+}
+
+// Create a reactive reference for our TOC links
+const tocLinks = ref<TocLink[]>([])
+const pageTitle = ref('Table of Contents')
+
+// Function to scan the page for headings and build the TOC
+function scanHeadings() {
+  // Wait for the DOM to be ready
+  if (typeof document === 'undefined') {
+    return
+  }
+
+  // Find all headings (h1-h6) with IDs
+  const headings = document.querySelectorAll('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]')
+  const links: TocLink[] = []
+
+  // Get the page title from the first h1
+  const h1 = document.querySelector('h1')
+  if (h1) {
+    pageTitle.value = h1.textContent || 'Table of Contents'
+  }
+
+  // If no headings found, it might mean content hasn't loaded yet
+  // But also check if we have at least an h1 to ensure page content exists
+  if (headings.length === 0 && !h1) {
+    return
+  }
+
+  // Process each heading
+  headings.forEach((heading) => {
+    // Skip the first h1 as it's the page title
+    if (heading.tagName === 'H1' && heading === h1) {
+      return
+    }
+
+    const id = heading.id
+    const level = Number.parseInt(heading.tagName.substring(1), 10)
+
+    // Create a TOC link
+    const link: TocLink = { id, text: heading.textContent || '', level, children: [] }
+    links.push(link)
+  })
+
+  // Build a robust hierarchical structure in a single pass
+  const hierarchicalLinks: TocLink[] = []
+  const parents: TocLink[] = []
+
+  for (const link of links) {
+    // Always ensure children is initialized
+    if (!('children' in link) || !Array.isArray(link.children)) {
+      (link as TocLink).children = []
+    }
+    // Find the last parent of lower level
+    while (parents.length > 0 && parents[parents.length - 1]!.level >= link.level) {
+      parents.pop()
+    }
+    if (parents.length === 0) {
+      hierarchicalLinks.push(link)
+    }
+    else {
+      parents[parents.length - 1]!.children.push(link)
+    }
+    parents.push(link)
+  }
+  tocLinks.value = hierarchicalLinks
+}
+
+// Check if we're in the browser
+let observer: MutationObserver | null = null
+
+onMounted(() => {
+  // Initial scan with a small delay to ensure content is rendered
+  setTimeout(() => {
+    scanHeadings()
+  }, 100)
+
+  // Re-scan when route changes (for SPA navigation)
+  watch(() => pageRoute.path, () => {
+    // Clear current TOC immediately when route changes
+    tocLinks.value = []
+    pageTitle.value = 'Table of Contents'
+    
+    // Use multiple strategies to ensure content is fully loaded
+    nextTick(() => {
+      // First attempt after nextTick
+      scanHeadings()
+      
+      // Second attempt with a delay to handle slow rendering
+      setTimeout(() => {
+        scanHeadings()
+      }, 200)
+      
+      // Third attempt with a longer delay as fallback
+      setTimeout(() => {
+        scanHeadings()
+      }, 500)
+    })
+  })
+
+  // Also watch for hash changes to update active states
+  watch(() => pageRoute.hash, () => {
+    // No need to rescan, just update active states
+  })
+
+  // Watch for DOM mutations affecting headings
+  observer = new MutationObserver((mutations) => {
+    let shouldRescan = false
+    for (const mutation of mutations) {
+      if (
+        Array.from(mutation.addedNodes).some(isHeadingNode)
+        || Array.from(mutation.removedNodes).some(isHeadingNode)
+        || (mutation.type === 'attributes' && isHeadingNode(mutation.target))
+      ) {
+        shouldRescan = true
+        break
+      }
+    }
+    if (shouldRescan) {
+      // Add a small delay to allow DOM to stabilize
+      setTimeout(() => {
+        scanHeadings()
+      }, 50)
+    }
+  })
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ['id'],
+  })
+})
+
+onBeforeUnmount(() => {
+  if (observer) {
+    observer.disconnect()
+    observer = null
+  }
+})
+
+function isHeadingNode(node: Node | EventTarget): boolean {
+  if (!(node instanceof HTMLElement)) {
+    return false
+  }
+  return /^H[1-6]$/.test(node.tagName)
+}
+
+function checkActive(hash: string) {
+  return pageRoute.hash === hash ? 'active' : null
+}
+
+function toTop() {
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth',
+  })
+  setTimeout(() => {
+    window.location.hash = ''
+  }, 600)
+}
+
+function toBottom() {
+  window.scrollTo({
+    top: document.body.scrollHeight,
+    behavior: 'smooth',
+  })
+}
+
+function scrollToHeading(id: string) {
+  const el = document.getElementById(id)
+  if (el) {
+    el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    // Update the hash after the scroll
+    history.replaceState(null, '', `#${id}`)
+  }
+}
+</script>
+
+<template>
+  <Flex col>
+    <Menu v-if="tocLinks.length" class="md:menu-sm xl:menu-md w-full">
+      <NuxtLink href="#" custom>
+        <template #default="{ route }">
+          <MenuItem class="text-base-content cursor-pointer">
+            <a
+              class="flex flex-row items-center justify-between font-semibold bg-neutral/30"
+              :class="checkActive(route?.hash || '')" @click="toTop"
+            >
+              {{ pageTitle }}
+              <Icon name="feather:arrow-up" class="text-base" />
+            </a>
+          </MenuItem>
+        </template>
+      </NuxtLink>
+
+      <TocTree
+        :links="tocLinks"
+        :check-active="checkActive"
+        :scroll-to-heading="scrollToHeading"
+      />
+
+      <MenuItem>
+        <a class="flex flex-row items-center justify-between hover:bg-accent/25 mt-6" @click="toBottom">
+          scroll to bottom
+          <Icon name="feather:arrow-down" class="text-base" />
+        </a>
+      </MenuItem>
+    </Menu>
+  </Flex>
+</template>

package/app/components/ThemeToggle.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const { isDark, toggleTheme } = useTheme()
+</script>
+
+<template>
+  <Button ghost circle aria-label="Toggle theme" @click="toggleTheme">
+    <Icon v-if="isDark" name="heroicons:moon" size="24" />
+    <Icon v-else name="heroicons:sun" size="24" />
+  </Button>
+</template>

package/app/components/Titles.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+defineProps<{ 
+  superTitle?: string 
+  title: string, 
+  subTitle?: string
+  description?: string
+}>()
+
+const slots = defineSlots<{ 
+  superTitle?: string 
+  title: string, 
+  subTitle?: string
+  description?: string
+}>()
+</script>
+
+<template>
+  <Flex col items-center class="gap-4">
+    <slot v-if="slots.superTitle" name="superTitle" />
+    <Text v-if="superTitle && !slots.superTitle" center size="md" class="text-balance md:text-lg">
+      {{ superTitle }}
+    </Text>
+    
+    <slot v-if="slots.title" name="title" />
+    <Text v-if="title && !slots.title" center size="4xl" class="text-balance md:text-5xl">
+      {{ title }}
+    </Text>
+
+    <slot v-if="slots.subTitle" name="subTitle" />
+    <Text v-if="subTitle && !slots.subTitle" center size="md" class="text-balance md:text-lg">
+      {{ subTitle }}
+    </Text>
+
+    <slot v-if="slots.description" name="description" />
+    <Text v-if="description && !slots.description" center size="md" class="text-balance md:text-lg">
+      {{ description }}
+    </Text>
+  </Flex>
+</template>

package/app/components/TocTree.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+interface TocLink {
+  id: string
+  text: string
+  level: number
+  children: TocLink[]
+}
+
+defineProps({
+  links: {
+    type: Array as PropType<TocLink[]>,
+    required: true
+  },
+  checkActive: {
+    type: Function as PropType<(hash: string) => string | null>,
+    required: true
+  },
+  scrollToHeading: {
+    type: Function as PropType<(id: string) => void>,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <Menu v-if="links && links.length" class="w-full">
+    <MenuItem v-for="link in links" :key="link.id">
+      <NuxtLink :href="`#${link.id}`" custom>
+        <template #default="{ route }">
+          <a
+            class="block px-2 py-1 text-base-content hover:bg-accent/10 rounded cursor-pointer"
+            :class="checkActive(route?.hash || '')"
+            @click.prevent="scrollToHeading(link.id)"
+          >
+            {{ link.text }}
+          </a>
+        </template>
+      </NuxtLink>
+      <TocTree
+        v-if="link.children && link.children.length"
+        :links="link.children"
+        :check-active="checkActive"
+        :scroll-to-heading="scrollToHeading"
+      />
+    </MenuItem>
+  </Menu>
+</template>

package/app/components/content/BlueskyEmbed.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+interface Props {
+  uri: string
+  cid: string
+}
+
+const props = defineProps<Props>()
+const embedContainer = ref<HTMLElement | null>(null)
+
+// Extract the post URL from the AT URI
+// Format: at://did:plc:xxx/app.bsky.feed.post/postId
+const getPostUrl = () => {
+  const parts = props.uri.split('/')
+  const did = parts[2]
+  const postId = parts[parts.length - 1]
+  return `https://bsky.app/profile/${did}/post/${postId}`
+}
+
+const postUrl = getPostUrl()
+
+onMounted(() => {
+  // Load the Bluesky embed script
+  const scriptId = 'bluesky-embed-script'
+
+  const initializeEmbed = () => {
+    // Wait a bit longer and check multiple times
+    let attempts = 0
+    const maxAttempts = 10
+
+    const checkAndScan = () => {
+      attempts++
+
+      if ((window as any).bluesky?.scan) {
+        console.log('Bluesky scan function found, triggering...')
+        ;(window as any).bluesky.scan()
+      } else if (attempts < maxAttempts) {
+        console.log(`Waiting for Bluesky script... attempt ${attempts}`)
+        setTimeout(checkAndScan, 200)
+      } else {
+        console.error('Bluesky embed script did not load properly')
+      }
+    }
+
+    setTimeout(checkAndScan, 100)
+  }
+
+  if (!document.getElementById(scriptId)) {
+    const script = document.createElement('script')
+    script.id = scriptId
+    script.src = 'https://embed.bsky.app/static/embed.js'
+    script.async = true
+    script.charset = 'utf-8'
+
+    script.onload = () => {
+      console.log('Bluesky embed script loaded')
+      initializeEmbed()
+    }
+
+    script.onerror = () => {
+      console.error('Failed to load Bluesky embed script')
+    }
+
+    document.head.appendChild(script)
+  } else {
+    initializeEmbed()
+  }
+})
+</script>
+
+<template>
+  <ClientOnly>
+    <div class="bluesky-embed-wrapper my-6 rounded-lg" ref="embedContainer">
+      <blockquote
+        class="bluesky-embed"
+        :data-bluesky-uri="uri"
+        :data-bluesky-cid="cid"
+        data-bluesky-embed-color-mode="dark"
+      >
+        <p lang="en">
+          Loading Bluesky post...
+          <a :href="postUrl" target="_blank" rel="noopener noreferrer">View on Bluesky</a>
+        </p>
+      </blockquote>
+    </div>
+  </ClientOnly>
+</template>
+
+<style scoped>
+.bluesky-embed-wrapper :deep(iframe) {
+  border-radius: 0.7rem !important;
+}
+</style>

package/app/components/content/CodeWrapper.vue

@@ -0,0 +1,10 @@
+<template>
+  <Collapse arrow toggle class="mb-8 rounded-b-xl rounded-t-none bg-base-200 p-0">
+    <CollapseTitle class="text-lg font-medium">
+      Code Example
+    </CollapseTitle>
+    <CollapseContent class="overflow-hidden">
+      <slot />
+    </CollapseContent>
+  </Collapse>
+</template>

package/app/components/content/ProseA.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps({
+  href: {
+    type: String,
+    default: '',
+  },
+  target: {
+    type: String,
+    default: undefined,
+    required: false,
+  },
+})
+</script>
+
+<template>
+  <NuxtLink :href="href" :target="target" class="daisy-link link-primary">
+    <slot />
+  </NuxtLink>
+</template>

package/app/components/content/ProseAlert.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  type: string
+}>()
+</script>
+
+<template>
+  <Alert class="not-prose" v-bind="$props">
+    <slot />
+  </Alert>
+</template>

package/app/components/content/ProseBlockquote.vue

@@ -0,0 +1,11 @@
+<template>
+  <Alert>
+    <slot />
+  </Alert>
+</template>
+
+<style>
+.alert p {
+  margin: 0;
+}
+</style>

package/app/components/content/ProseEm.vue

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

package/app/components/content/ProseH1.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { computed, useRuntimeConfig } from '#imports';
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h1)))
+</script>
+
+<template>
+  <h1 :id="props.id">
+    <a v-if="id || generate" :href="`#${props.id}`">
+      <slot />
+    </a>
+    <slot v-else />
+  </h1>
+</template>

package/app/components/content/ProseH2.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { computed, useRuntimeConfig } from '#imports';
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h2)))
+</script>
+
+<template>
+  <h2 :id="props.id">
+    <a v-if="id || generate" :href="`#${props.id}`">
+      <slot />
+    </a>
+    <slot v-else />
+  </h2>
+</template>

package/app/components/content/ProseH3.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { computed, useRuntimeConfig } from '#imports';
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h3)))
+</script>
+
+<template>
+  <h3 :id="props.id">
+    <a v-if="id || generate" :href="`#${props.id}`">
+      <slot />
+    </a>
+    <slot v-else />
+  </h3>
+</template>

package/app/components/content/ProseH4.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { computed, useRuntimeConfig } from '#imports';
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h4)))
+</script>
+
+<template>
+  <h4 :id="props.id">
+    <a v-if="id || generate" :href="`#${props.id}`">
+      <slot />
+    </a>
+    <slot v-else />
+  </h4>
+</template>

package/app/components/content/ProseH5.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { computed, useRuntimeConfig } from '#imports';
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h5)))
+</script>
+
+<template>
+  <h5 :id="props.id">
+    <a v-if="id || generate" :href="`#${props.id}`">
+      <slot />
+    </a>
+    <slot v-else />
+  </h5>
+</template>

package/app/components/content/ProseH6.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { computed, useRuntimeConfig } from '#imports';
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h6)))
+</script>
+
+<template>
+  <h6 :id="props.id">
+    <a v-if="id || generate" :href="`#${props.id}`">
+      <slot />
+    </a>
+    <slot v-else />
+  </h6>
+</template>

package/app/components/content/ProseHr.vue

@@ -0,0 +1,3 @@
+<template>
+  <hr>
+</template>