feat: ✨ Add more SEO metadata to all pages

pages/[username]/[uuid].vue

@@ -11,6 +11,7 @@
 </template>
 
 <script setup lang="ts">
+import { useTitle } from "@vueuse/core";
 import { Loader } from "lucide-vue-next";
 import Note from "~/components/notes/note.vue";
 
@@ -54,10 +55,14 @@ watch(
     },
 );
 
-useServerSeoMeta({
-    title: note.value?.account.display_name,
-    description: note.value?.content,
-    ogImage: note.value?.media_attachments[0]?.preview_url,
+useSeoMeta({
+    title: computed(() =>
+        note.value ? note.value.account.display_name : "Loading",
+    ),
+    description: computed(() => (note.value ? note.value.content : undefined)),
+    ogImage: computed(() =>
+        note.value ? note.value.media_attachments[0]?.preview_url : undefined,
+    ),
     robots: computed(() => ({
         noindex: !!note.value?.account.noindex,
         nofollow: !!note.value?.account.noindex,

pages/[username]/index.vue

@@ -41,7 +41,7 @@ definePageMeta({
 const { account, isLoading } = useAccountFromAcct(client, username);
 const accountId = computed(() => account.value?.id ?? undefined);
 
-useServerSeoMeta({
+useSeoMeta({
     title: computed(() =>
         account.value ? account.value.display_name : "Loading",
     ),

pages/global.vue

@@ -10,6 +10,10 @@
 import Global from "~/components/timelines/global.vue";
 import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
 
+useHead({
+    title: "Global",
+});
+
 definePageMeta({
     layout: "app",
     breadcrumbs: [

pages/home.vue

@@ -10,6 +10,10 @@
 import Home from "~/components/timelines/home.vue";
 import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
 
+useHead({
+    title: "Home",
+});
+
 definePageMeta({
     layout: "app",
     breadcrumbs: [

pages/index.vue

@@ -13,6 +13,10 @@ import Home from "~/components/timelines/home.vue";
 import Public from "~/components/timelines/public.vue";
 import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
 
+useHead({
+    title: identity.value ? "Home" : "Public",
+});
+
 definePageMeta({
     layout: "app",
     breadcrumbs: [

pages/local.vue

@@ -11,6 +11,10 @@
 import Local from "~/components/timelines/local.vue";
 import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
 
+useHead({
+    title: "Local",
+});
+
 definePageMeta({
     layout: "app",
     breadcrumbs: [

pages/notifications.vue

@@ -23,6 +23,10 @@
 import Notifications from "~/components/timelines/notifications.vue";
 import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
 
+useHead({
+    title: "Notifications",
+});
+
 definePageMeta({
     layout: "app",
     breadcrumbs: [

pages/oauth/authorize.vue

@@ -6,6 +6,10 @@ import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
 import { Button } from "~/components/ui/button";
 import { NuxtLink } from "#components";
 
+useHead({
+    title: "Sign In",
+});
+
 const host = new URL(useBaseUrl().value).host;
 const instance = useInstanceFromClient(new Client(new URL(useBaseUrl().value)));
 const { error, error_description } = useUrlSearchParams();

pages/oauth/code.vue

@@ -24,5 +24,9 @@ import {
     CardTitle,
 } from "~/components/ui/card";
 
+useHead({
+    title: "Authorization Code",
+});
+
 const { code } = useUrlSearchParams();
 </script>

pages/oauth/consent.vue

@@ -44,6 +44,10 @@ import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import { NuxtLink } from "#components";
 
+useHead({
+    title: "Authorization",
+});
+
 const url = useRequestURL();
 const params = useUrlSearchParams();
 

pages/oauth/reset.vue

@@ -102,6 +102,10 @@ import {
 import { Input } from "~/components/ui/input";
 import { NuxtLink } from "#components";
 
+useHead({
+    title: "Reset Password",
+});
+
 identity.value = null;
 
 const formSchema = toTypedSchema(

pages/preferences/[page].vue

@@ -24,6 +24,10 @@ import {
     SettingType,
 } from "~/settings.ts";
 
+useHead({
+    title: "Preferences",
+});
+
 definePageMeta({
     layout: "app",
     breadcrumbs: [

pages/preferences/emojis.vue

@@ -26,6 +26,10 @@ import { Search } from "lucide-vue-next";
 import Category from "~/components/preferences/emojis/category.vue";
 import { Input } from "~/components/ui/input";
 
+useHead({
+    title: "Emoji Preferences",
+});
+
 definePageMeta({
     layout: "app",
     breadcrumbs: [

pages/public.vue

@@ -10,6 +10,10 @@
 import Public from "~/components/timelines/public.vue";
 import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
 
+useHead({
+    title: "Public",
+});
+
 definePageMeta({
     layout: "app",
     breadcrumbs: [