✨ OpenGraph

app/pages/accounts/[name].vue

@@ -301,7 +301,36 @@ function getOffsetUTCString(targetTimeZone: string): string {
 }
 
 definePageMeta({
-  alias: ["/@[name]"]
+  alias: ["/@:name()"]
+})
+
+useHead({
+  title: computed(() => {
+    if (notFound.value) {
+      return "User not found"
+    }
+    if (user.value) {
+      return user.value.nick || user.value.name
+    }
+    return "Loading user..."
+  }),
+  meta: computed(() => {
+    if (user.value) {
+      const description = `View the profile of ${user.value.nick || user.value.name} on Solar Network.`
+      return [
+        { name: 'description', content: description },
+      ]
+    }
+    return []
+  })
+})
+
+defineOgImage({
+  component: 'WithAvatar',
+  title: computed(() => user.value ? user.value.nick || user.value.name : 'User Profile'),
+  description: computed(() => user.value ? `View the profile of ${user.value.nick || user.value.name} on Solar Network.` : ''),
+  avatarUrl: computed(() => userPicture.value),
+  backgroundImage: computed(() => userBackground.value),
 })
 </script>
 

app/pages/auth/authorize.vue

@@ -128,6 +128,10 @@ import IconDark from '~/assets/images/cloudy-lamb@dark.png'
 const route = useRoute()
 const api = useSolarNetwork()
 
+useHead({
+  title: "Authorize Application"
+})
+
 // State
 const isLoading = ref(true)
 const isAuthorizing = ref(false)

app/pages/auth/callback.vue

@@ -11,6 +11,10 @@
 </template>
 
 <script lang="ts" setup>
+useHead({
+  title: "Auth Completed"
+})
+
 definePageMeta({
   layout: "minimal"
 })

app/pages/auth/captcha.vue

@@ -36,6 +36,10 @@ import CaptchaWidget from "@/components/CaptchaWidget.vue"
 
 const route = useRoute()
 
+useHead({
+  title: "Captcha Verification"
+})
+
 const onCaptchaVerified = (token: string) => {
   if (window.parent !== window) {
     window.parent.postMessage(`captcha_tk=${token}`, "*")

app/pages/auth/create-account.vue

@@ -153,6 +153,10 @@ import IconDark from "~/assets/images/cloudy-lamb@dark.png"
 const router = useRouter()
 const api = useSolarNetwork()
 
+useHead({
+  title: "Create Account"
+})
+
 const stage = ref<"username-nick" | "email" | "password" | "captcha">(
   "username-nick"
 )

app/pages/auth/login.vue

@@ -11,6 +11,10 @@ import IconLight from "~/assets/images/cloudy-lamb.png"
 import IconDark from "~/assets/images/cloudy-lamb@dark.png"
 
 // State management
+useHead({
+  title: "Sign In"
+})
+
 const stage = ref<
   "find-account" | "select-factor" | "enter-code" | "token-exchange"
 >("find-account")

app/pages/index.vue

@@ -46,8 +46,22 @@ import type { SnVersion, SnActivity } from "~/types/api"
 import PostEditor from "~/components/PostEditor.vue"
 import PostItem from "~/components/PostItem.vue"
 
+import IconLight from '~/assets/images/cloudy-lamb.png'
+
 const router = useRouter()
 
+useHead({
+  title: "Home",
+  meta: [
+    { name: 'description', content: 'The open social network. Friendly to everyone.' },
+  ]
+})
+
+defineOgImage({
+  title: 'Home',
+  description: 'The open social network. Friendly to everyone.',
+})
+
 const userStore = useUserStore()
 
 const version = ref<SnVersion | null>(null)

app/pages/posts/[id].vue

@@ -58,7 +58,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from "vue"
+import { ref, onMounted, computed } from "vue"
 import { Marked } from "marked"
 import type { SnPost } from "~/types/api"
 
@@ -68,6 +68,29 @@ import AttachmentItem from "~/components/AttachmentItem.vue"
 const route = useRoute()
 const id = route.params.id as string
 
+useHead({
+  title: computed(() => {
+    if (loading.value) return 'Loading post...'
+    if (error.value) return 'Error'
+    if (!post.value) return 'Post not found'
+    return post.value.title || 'Post'
+  }),
+  meta: computed(() => {
+    if (post.value) {
+      const description = post.value.description || post.value.content?.substring(0, 150) || ''
+      return [
+        { name: 'description', content: description },
+      ]
+    }
+    return []
+  })
+})
+
+defineOgImage({
+  title: computed(() => post.value?.title || 'Post'),
+  description: computed(() => post.value?.description || post.value?.content?.substring(0, 150) || ''),
+})
+
 const post = ref<SnPost | null>(null)
 const loading = ref(true)
 const error = ref("")