Merge branch 'feat/atproto-blog-fe' of github.com:npmx-dev/npmx.dev into feat/atproto-blog-fe

Author: whitep4nth3r

app/components/AuthorAvatar.vue

@@ -2,7 +2,7 @@
 import type { ResolvedAuthor } from '#shared/schemas/blog'
 
 const props = defineProps<{
-  author: ResolvedAuthor
+  author: Partial<ResolvedAuthor> & Pick<ResolvedAuthor, 'name' | 'avatar'>
   size?: 'sm' | 'md' | 'lg'
 }>()
 

app/components/BlogPostFederatedArticles.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { FederatedArticleInput } from '#shared/types/blog-post'
 import type { Author } from '#shared/schemas/blog'
+import type { AtIdentifierString } from '@atproto/lex'
 
 const props = defineProps<{
   headline: string
@@ -11,7 +12,7 @@ const props = defineProps<{
 const authors = computed<Author[]>(() =>
   props.articles.map(article => ({
     name: article.authorHandle,
-    blueskyHandle: article.authorHandle,
+    blueskyHandle: article.authorHandle as AtIdentifierString,
   })),
 )
 
@@ -30,7 +31,7 @@ const federatedArticles = computed(() => {
       authorHandle: article.authorHandle,
       author: {
         name: profile?.name || article.authorHandle,
-        blueskyHandle: article.authorHandle,
+        blueskyHandle: article.authorHandle as AtIdentifierString,
         avatar: profile?.avatar || null,
         profileUrl: profile?.profileUrl || null,
       },

app/components/OgImage/BlogPost.d.vue.ts

@@ -0,0 +1,13 @@
+// This type declaration file is required to break a circular type resolution in vue-tsc.
+// And is based off Package.d.vue.ts
+
+import type { DefineComponent } from 'vue'
+
+declare const _default: DefineComponent<{
+  title: string
+  authors?: { name: string; blueskyHandle?: string }[]
+  date?: string
+  primaryColor?: string
+}>
+
+export default _default

app/components/Readme.vue

@@ -61,7 +61,7 @@ function handleClick(event: MouseEvent) {
 
 <template>
   <article
-    class="readme prose prose-invert max-w-[70ch] lg:max-w-none px-1"
+    class="readme max-w-[70ch] lg:max-w-none px-1"
     dir="auto"
     v-html="html"
     :style="{

app/components/global/BlueskyPostEmbed.client.vue

@@ -48,6 +48,8 @@ async function resolveAtUri(): Promise<string | null> {
   if (!match) return null
   const [, handle, rkey] = match
 
+  if (!handle || !rkey) return null
+
   // If the handle is already a DID, build the AT URI directly
   if (handle.startsWith('did:')) {
     return `at://${handle}/app.bsky.feed.post/${rkey}`

app/pages/about.vue

@@ -72,7 +72,7 @@ const roleLabels = computed(
         </p>
       </header>
 
-      <section class="prose prose-invert max-w-none space-y-12">
+      <section class="max-w-none space-y-12">
         <div>
           <h2 class="text-lg text-fg uppercase tracking-wider mb-4">
             {{ $t('about.what_we_are.title') }}

app/pages/accessibility.vue

@@ -37,7 +37,7 @@ const canGoBack = useCanGoBack()
         </div>
       </header>
 
-      <section class="prose prose-invert max-w-none space-y-8">
+      <section class="max-w-none space-y-8">
         <p class="text-fg-muted leading-relaxed">
           <i18n-t keypath="a11y.welcome" tag="span" scope="global">
             <template #app>

app/pages/blog/index.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-const router = useRouter()
-
 import type { BlogPostFrontmatter } from '#shared/schemas/blog'
 
 const blogModules = import.meta.glob<BlogPostFrontmatter>('./*.md', { eager: true })

app/pages/privacy.vue

@@ -54,7 +54,7 @@ const { locale } = useI18n()
         </i18n-t>
       </header>
 
-      <section class="prose prose-invert max-w-none space-y-8">
+      <section class="max-w-none space-y-8">
         <p class="text-fg-muted leading-relaxed">
           <i18n-t keypath="privacy_policy.welcome" tag="span" scope="global">
             <template #app>

app/pages/recharging.vue

@@ -106,7 +106,7 @@ const icons = [
         />
       </div>
 
-      <section class="prose prose-invert max-w-none space-y-8">
+      <section class="max-w-none space-y-8">
         <!-- What happened -->
         <div>
           <h2 class="text-lg text-fg-subtle uppercase tracking-wider mb-4">