From 661367f8230ded5f84fbd310cd9aed523765f1b6 Mon Sep 17 00:00:00 2001
From: Todd Libby <toddlibby@protonmail.com>
Date: Fri, 17 Jan 2025 06:22:16 -0700
Subject: [PATCH] fix(web): add descriptive page titles (#73)

---
 packages/web/app/app.vue                          | 5 ++++-
 packages/web/app/pages/[owner]/[repo]/[issue].vue | 5 +++++
 packages/web/app/pages/[owner]/[repo]/index.vue   | 7 ++++++-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/web/app/app.vue b/packages/web/app/app.vue
index 065a2fb..46724cc 100644
--- a/packages/web/app/app.vue
+++ b/packages/web/app/app.vue
@@ -8,7 +8,10 @@ useHead({
 const version = useRuntimeConfig().public.version
 
 useSeoMeta({
-  title: 'unsight.dev',
+  titleTemplate: title => title ? `${title} - unsight.dev` : 'unsight.dev',
+})
+
+useServerSeoMeta({
   description: 'Detect duplicate GitHub issues, areas of concern and more across related repositories',
 })
 
diff --git a/packages/web/app/pages/[owner]/[repo]/[issue].vue b/packages/web/app/pages/[owner]/[repo]/[issue].vue
index 2e7068e..85ca27c 100644
--- a/packages/web/app/pages/[owner]/[repo]/[issue].vue
+++ b/packages/web/app/pages/[owner]/[repo]/[issue].vue
@@ -1,5 +1,10 @@
 <script setup lang="ts">
 const route = useRoute('owner-repo-issue')
+
+useSeoMeta({
+  title: () => `Similar issues - #${route.params.issue} - ${route.params.owner}/${route.params.repo}`
+})
+
 const { data: issues, status } = useFetch(`/api/similarity/${route.params.owner}/${route.params.repo}/${route.params.issue}`, {
   baseURL: useRuntimeConfig().public.remote,
   default: () => [],
diff --git a/packages/web/app/pages/[owner]/[repo]/index.vue b/packages/web/app/pages/[owner]/[repo]/index.vue
index 790fdd3..4520233 100644
--- a/packages/web/app/pages/[owner]/[repo]/index.vue
+++ b/packages/web/app/pages/[owner]/[repo]/index.vue
@@ -1,7 +1,12 @@
 <script setup lang="ts">
+const route = useRoute('owner-repo')
+
+useSeoMeta({
+  title: () => `Issue clusters - ${route.params.owner}/${route.params.repo}`
+})
+
 const { data: allowedRepos } = useRepos()
 
-const route = useRoute('owner-repo')
 const selectedRepo = computed(() => route.params.owner && route.params.repo ? `${route.params.owner}/${route.params.repo}` as 'nuxt/nuxt' : 'nuxt/nuxt')
 
 const { data: clusters, refresh, status } = useFetch(() => `/api/clusters/${selectedRepo.value}`, {
-- 
2.51.2