Add OG image support

composer.json

@@ -20,7 +20,7 @@
     "require": {
         "composer/installers": "^2.0",
         "cweagans/composer-patches": "~1.0",
-        "dobefu/nuxtify_profile": "^1.0.x-dev",
+        "dobefu/nuxtify_profile": "^1.0@beta",
         "drupal/core-composer-scaffold": "^10.2",
         "drupal/core-recommended": "^10"
     },

frontend/base/app.vue

@@ -43,6 +43,8 @@ async function onBeforeEnter() {
   lang.value = i18nHead.value.htmlAttrs.lang
   dir.value = i18nHead.value.htmlAttrs.dir
 }
+
+defineOgImageComponent('LayoutOgImage')
 </script>
 
 <template>

frontend/base/components/layout/LayoutOgImage.server.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+defineProps<{
+  title?: string
+  description?: string
+}>()
+
+const config = useRuntimeConfig()
+</script>
+
+<template>
+  <div class="w-full h-full px-12 text-2xl">
+    <div class="flex items-center gap-4 py-8 mb-12 border-b border-gray-200">
+      <img
+        src="/logo-512.png"
+        height="96px"
+        width="96px"
+        alt=""
+      >
+      <h1>
+        {{ config.public.siteName }}
+      </h1>
+    </div>
+
+    <h2 class="mt-0 mb-4 font-normal">
+      {{ title }}
+    </h2>
+
+    <p class="mt-0 leading-10 text-justify text-ellipsis line-clamp-4">
+      {{ description }}
+    </p>
+  </div>
+</template>

frontend/base/pages/user/index.vue

@@ -41,6 +41,10 @@ function setUserData() {
 
 setUserData()
 
+useHead({
+  title: userData.value?.name,
+})
+
 const unwatchData = watch(data, () => {
   setUserData()
 })
@@ -54,7 +58,7 @@ onBeforeRouteLeave((to, from) => {
 <template>
   <div class="max-w-6xl m-auto">
     <div v-if="userData" class="flex flex-col gap-8">
-      <div class="flex justify-between flex-wrap items-center">
+      <div class="flex flex-wrap items-center justify-between">
         <BasePageTitle>
           {{ userData.name }}
         </BasePageTitle>

frontend/themes/default/components/layout/LayoutOgImage.server.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+defineProps<{
+  title?: string
+  description?: string
+}>()
+
+const config = useRuntimeConfig()
+</script>
+
+<template>
+  <div class="w-full h-full text-3xl leading-6 text-white bg-stone-900">
+    <div
+      class="flex items-center gap-8 px-12 py-8 mb-12 border-b bg-stone-800 border-stone-700"
+    >
+      <img src="/logo-512.png" height="96px" width="96px" alt="">
+      <h1>
+        {{ config.public.siteName }}
+      </h1>
+    </div>
+
+    <div class="px-12">
+      <h2 class="mt-0 mb-8">
+        {{ title }}
+      </h2>
+
+      <p class="mt-0 leading-10 text-justify text-ellipsis line-clamp-4">
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>