blog: A first look at local-first Feathers (#8)

Author: daffl

app/app.vue

@@ -1,6 +1,12 @@
 <script setup lang="ts">
+const siteUrl = 'https://feathers.dev'
+const siteName = 'feathers.dev'
+const defaultTitle = 'feathers.dev - Identity. Data. Realtime. Beyond the Cloud.'
+const defaultDescription = 'Modern web application development with secure user logins, local-first data synchronization and real-time updates. All in one place.'
+const defaultImage = `${siteUrl}/img/moon-surface.svg`
+
 useHead({
-  title: 'feathers.dev',
+  title: defaultTitle,
   htmlAttrs: {
     lang: 'en',
     'data-theme': 'feathers',
@@ -12,6 +18,21 @@ useHead({
     },
   ],
 })
+
+useSeoMeta({
+  title: defaultTitle,
+  description: defaultDescription,
+  ogTitle: defaultTitle,
+  ogDescription: defaultDescription,
+  ogImage: defaultImage,
+  ogUrl: siteUrl,
+  ogType: 'website',
+  ogSiteName: siteName,
+  twitterCard: 'summary_large_image',
+  twitterTitle: defaultTitle,
+  twitterDescription: defaultDescription,
+  twitterImage: defaultImage,
+})
 </script>
 
 <template>

app/components/BlogPostTile.vue

@@ -9,7 +9,7 @@ defineProps<{
 
 <template>
   <NuxtLink :to="post.path" class="block h-full">
-    <Card :class="['h-full hover:shadow-xl transition-shadow cursor-pointer', cardClasses]">
+    <Card :class="['h-full cursor-pointer', cardClasses]">
       <figure class="h-52 !rounded-box md:m-4 overflow-hidden">
         <img :src="post.meta.imgSrc" :alt="post.title" class="object-cover h-full w-full object-center" />
       </figure>

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>

app/components/content/ProseImg.vue

@@ -30,5 +30,8 @@ const refinedSrc = computed(() => {
 </script>
 
 <template>
-  <img :src="refinedSrc" :alt="alt" :width="width" :height="height">
+  <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>

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>

app/pages/blog/posts/[...slug].vue

@@ -28,9 +28,21 @@ watch(
   { immediate: false },
 )
 
+const siteUrl = 'https://feathers.dev'
+const pageUrl = computed(() => `${siteUrl}/blog/posts/${slug.value}`)
+
 useSeoMeta({
   title: post.value?.title,
-  description: post.value?.description,
+  description: post.value?.meta?.tagline || post.value?.description,
+  ogTitle: post.value?.title,
+  ogDescription: post.value?.meta?.tagline || post.value?.description,
+  ogImage: post.value?.meta?.imgSrc,
+  ogUrl: pageUrl.value,
+  ogType: 'article',
+  twitterCard: 'summary_large_image',
+  twitterTitle: post.value?.title,
+  twitterDescription: post.value?.meta?.tagline || post.value?.description,
+  twitterImage: post.value?.meta?.imgSrc,
 })
 
 const { data: allRecentPosts } = await useAsyncData(() =>
@@ -60,7 +72,11 @@ const recentPosts = computed(() => {
   <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="post" class="prose mx-auto mb-24">
       <figure class="aspect-video">
-        <img :src="post?.meta?.imgSrc" :alt="post?.title!" class="object-cover h-full w-full object-center" />
+        <img
+          :src="post?.meta?.imgSrc"
+          :alt="post?.title!"
+          class="object-cover h-full w-full object-center rounded-lg"
+        />
       </figure>
 
       <Titles :title="post?.title!" :sub-title="post?.meta?.tagline!" />

app/pages/index.vue

@@ -3,7 +3,7 @@ definePageMeta({
   layout: 'page',
 })
 
-const { data: posts } = await useAsyncData(() => queryCollection('blogPosts').order('date', 'DESC').all())
+const { data: posts } = await useAsyncData(() => queryCollection('blogPosts').order('date', 'DESC').limit(3).all())
 const { data: products } = await useAsyncData(() => queryCollection('products').where('published', '=', true).all())
 
 useSeoMeta({

content/blog/posts/2024-08-19-dwebcamp-2024.md

@@ -7,7 +7,6 @@ author: The Feathers Crew
 category: DWeb
 imgSrc: https://imagedelivery.net/9JPgw8SmnowT-UlbCrbUxw/1b3d43ed-2400-4f42-6afb-4eaf7b968100/public
 imgContainerClasses: 'h-64 sm:h-96 md:h-120'
-pinned: false
 tags:
   - dweb
 ---

content/blog/posts/2025-01-03-lowfiwknd.md

@@ -7,7 +7,6 @@ author: David Luecke
 category: DWeb
 imgSrc: https://imagedelivery.net/9JPgw8SmnowT-UlbCrbUxw/0b83d606-e110-4fd8-f0c6-88266dfc1600/public
 imgContainerClasses: 'h-64 sm:h-96 md:h-120'
-pinned: true
 tags:
   - dweb
 ---