Add useHead to profile

Author: dansup

resources/js/pages/profile/index.vue

@@ -134,7 +134,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, watch, nextTick } from "vue";
+import { ref, onMounted, onUnmounted, watch, nextTick, computed } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { storeToRefs } from "pinia";
 import MainLayout from "~/layouts/MainLayout.vue";
@@ -143,6 +143,7 @@ import { useProfileStore } from "~/stores/profile";
 import { useAuthStore } from "~/stores/auth";
 import { useUtils } from "@/composables/useUtils";
 import { useI18n } from "vue-i18n";
+import { useHead } from "@unhead/vue";
 
 const { formatCount } = useUtils();
 const authStore = useAuthStore();
@@ -164,6 +165,90 @@ const tabBarRef = ref(null);
 
 const { posts, allLikes } = storeToRefs(profileStore);
 
+const metaTitle = computed(() => {
+    if (!profileStore.name) return "Loops";
+    return `${profileStore.name} (@${profileStore.username}) | Loops`;
+});
+
+const metaDescription = computed(() => {
+    if (!profileStore.username) return "Watch videos on Loops";
+
+    const parts = [];
+
+    if (profileStore.bio) {
+        parts.push(profileStore.bio);
+    }
+
+    const stats = [
+        `${formatCount(profileStore.postCount)} videos`,
+        `${formatCount(profileStore.followerCount)} followers`,
+        `${formatCount(profileStore.allLikes)} likes`,
+    ];
+
+    parts.push(stats.join(" · "));
+
+    return parts.join(" | ");
+});
+
+const profileUrl = computed(() => {
+    if (!profileStore.username) return "";
+    return `${window.location.origin}/@${profileStore.username}`;
+});
+
+const profileAvatar = computed(() => {
+    return profileStore.avatar || "/storage/avatars/default.jpg";
+});
+
+useHead({
+    title: metaTitle,
+    meta: [
+        {
+            name: "description",
+            content: metaDescription,
+        },
+        {
+            property: "og:title",
+            content: metaTitle,
+        },
+        {
+            property: "og:description",
+            content: metaDescription,
+        },
+        {
+            property: "og:image",
+            content: profileAvatar,
+        },
+        {
+            property: "og:url",
+            content: profileUrl,
+        },
+        {
+            property: "og:type",
+            content: "profile",
+        },
+        {
+            property: "profile:username",
+            content: () => profileStore.username || "",
+        },
+        {
+            name: "twitter:card",
+            content: "summary",
+        },
+        {
+            name: "twitter:title",
+            content: metaTitle,
+        },
+        {
+            name: "twitter:description",
+            content: metaDescription,
+        },
+        {
+            name: "twitter:image",
+            content: profileAvatar,
+        },
+    ],
+});
+
 let scrollTimeout = null;
 
 const handleTabChange = (tab) => {