Fix DynamicPage and useHead

Author: dansup

resources/js/app.js

@@ -8,6 +8,7 @@ import "./bootstrap";
 import { createApp } from "vue";
 import { createMemoryHistory, createRouter } from "vue-router";
 import { createPinia } from "pinia";
+import { createHead } from "@unhead/vue/client";
 import axiosPlugin from "./plugins/axios";
 import { VueQueryPlugin } from "@tanstack/vue-query";
 import AlertModalPlugin from "@/composables/useAlertModal.js";
@@ -21,6 +22,7 @@ import "../sass/next.css";
 import i18n from "./i18n/locales";
 
 const app = createApp(App);
+const head = createHead();
 const pinia = createPinia();
 
 Object.entries(import.meta.glob("./**/*.vue", { eager: true })).forEach(
@@ -40,6 +42,7 @@ app.provide("appConfig", window.appConfig);
 app.provide("appCaptcha", window.appCaptcha);
 
 app.use(pinia)
+    .use(head)
     .use(axiosPlugin)
     .use(router)
     .use(storePlugin)

resources/js/composables/useDynamicPage.js

@@ -1,6 +1,5 @@
 import { ref, computed, inject } from "vue";
 import { useRoute } from "vue-router";
-import { useHead } from "@unhead/vue";
 
 export function useDynamicPage() {
     const route = useRoute();
@@ -72,17 +71,6 @@ export function useDynamicPage() {
         const description =
             pageData.value.meta_description ||
             extractDescription(pageData.value.content);
-
-        useHead({
-            title: `${title} | Your App Name`,
-            meta: [
-                { name: "description", content: description },
-                { property: "og:title", content: title },
-                { property: "og:description", content: description },
-                { property: "og:type", content: "article" },
-                { property: "og:url", content: window.location.href },
-            ],
-        });
     };
 
     const extractDescription = (content) => {

resources/js/pages/DynamicPage.vue

@@ -162,9 +162,10 @@
 </template>
 
 <script setup>
-import { onMounted, watch } from "vue";
+import { onMounted, watch, computed } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import MainLayout from "@/layouts/FeedLayout.vue";
+import { useHead } from "@unhead/vue";
 import { useDynamicPage } from "@/composables/useDynamicPage";
 import {
     ExclamationTriangleIcon,
@@ -186,6 +187,44 @@ const {
     formatDate,
 } = useDynamicPage();
 
+const pageDescription = computed(() => {
+    if (pageData.value.meta_description) {
+        return pageData.value.meta_description;
+    }
+
+    if (!pageData.value.content) {
+        return `Learn more about ${pageTitle.value} on Loops`;
+    }
+
+    const tempDiv = document.createElement("div");
+    tempDiv.innerHTML = pageData.value.content;
+
+    const text = tempDiv.textContent || tempDiv.innerText || "";
+
+    const cleanText = text.replace(/\s+/g, " ").trim();
+    return cleanText.length > 160
+        ? cleanText.substring(0, 157) + "..."
+        : cleanText;
+});
+
+const pageUrl = computed(() => {
+    return window.location.origin + route.fullPath;
+});
+
+useHead({
+    title: computed(() => `${pageTitle.value} | Loops`),
+    meta: computed(() => [
+        { name: "description", content: pageDescription.value },
+        { property: "og:title", content: pageTitle.value },
+        { property: "og:description", content: pageDescription.value },
+        { property: "og:type", content: "article" },
+        { property: "og:url", content: pageUrl.value },
+        { name: "twitter:card", content: "summary" },
+        { name: "twitter:title", content: pageTitle.value },
+        { name: "twitter:description", content: pageDescription.value },
+    ]),
+});
+
 watch(
     () => currentSlug.value,
     (newSlug, oldSlug) => {