From a19339bd332bed4ae46a1cd472f35a8c72d57c6d Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Sat, 7 Dec 2024 11:21:13 +0100
Subject: [PATCH] feat: :sparkles: Add more SEO metadata to all pages

---
 pages/[username]/[uuid].vue  | 13 +++++++++----
 pages/[username]/index.vue   |  2 +-
 pages/global.vue             |  4 ++++
 pages/home.vue               |  4 ++++
 pages/index.vue              |  4 ++++
 pages/local.vue              |  4 ++++
 pages/notifications.vue      |  4 ++++
 pages/oauth/authorize.vue    |  4 ++++
 pages/oauth/code.vue         |  4 ++++
 pages/oauth/consent.vue      |  4 ++++
 pages/oauth/reset.vue        |  4 ++++
 pages/preferences/[page].vue |  4 ++++
 pages/preferences/emojis.vue |  4 ++++
 pages/public.vue             |  4 ++++
 14 files changed, 58 insertions(+), 5 deletions(-)

diff --git a/pages/[username]/[uuid].vue b/pages/[username]/[uuid].vue
index f5670af..a4fa487 100644
--- a/pages/[username]/[uuid].vue
+++ b/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,
diff --git a/pages/[username]/index.vue b/pages/[username]/index.vue
index d010c9d..a10b366 100644
--- a/pages/[username]/index.vue
+++ b/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",
     ),
diff --git a/pages/global.vue b/pages/global.vue
index a7f08ac..ad34cf1 100644
--- a/pages/global.vue
+++ b/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: [
diff --git a/pages/home.vue b/pages/home.vue
index 2b608b6..bba8235 100644
--- a/pages/home.vue
+++ b/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: [
diff --git a/pages/index.vue b/pages/index.vue
index 46eebea..f304ffb 100644
--- a/pages/index.vue
+++ b/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: [
diff --git a/pages/local.vue b/pages/local.vue
index d2da1d6..e3bb946 100644
--- a/pages/local.vue
+++ b/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: [
diff --git a/pages/notifications.vue b/pages/notifications.vue
index d6732f6..bd961d6 100644
--- a/pages/notifications.vue
+++ b/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: [
diff --git a/pages/oauth/authorize.vue b/pages/oauth/authorize.vue
index bf82472..7f6fb01 100644
--- a/pages/oauth/authorize.vue
+++ b/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();
diff --git a/pages/oauth/code.vue b/pages/oauth/code.vue
index 181af09..363623c 100644
--- a/pages/oauth/code.vue
+++ b/pages/oauth/code.vue
@@ -24,5 +24,9 @@ import {
     CardTitle,
 } from "~/components/ui/card";
 
+useHead({
+    title: "Authorization Code",
+});
+
 const { code } = useUrlSearchParams();
 </script>
diff --git a/pages/oauth/consent.vue b/pages/oauth/consent.vue
index 2a566b0..e5c0b65 100644
--- a/pages/oauth/consent.vue
+++ b/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();
 
diff --git a/pages/oauth/reset.vue b/pages/oauth/reset.vue
index a6521c9..8940d06 100644
--- a/pages/oauth/reset.vue
+++ b/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(
diff --git a/pages/preferences/[page].vue b/pages/preferences/[page].vue
index 1bea049..7abc7c8 100644
--- a/pages/preferences/[page].vue
+++ b/pages/preferences/[page].vue
@@ -24,6 +24,10 @@ import {
     SettingType,
 } from "~/settings.ts";
 
+useHead({
+    title: "Preferences",
+});
+
 definePageMeta({
     layout: "app",
     breadcrumbs: [
diff --git a/pages/preferences/emojis.vue b/pages/preferences/emojis.vue
index e954ce1..a5d2a32 100644
--- a/pages/preferences/emojis.vue
+++ b/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: [
diff --git a/pages/public.vue b/pages/public.vue
index e36cb8f..10293e4 100644
--- a/pages/public.vue
+++ b/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: [