From dd061ea465208cf72a2949473eab7bc5c025b6de Mon Sep 17 00:00:00 2001
From: Connor van Spronssen <info@dobefu.com>
Date: Sun, 28 Apr 2024 18:00:19 +0200
Subject: [PATCH] Add OG image support

---
 composer.json                                 |  2 +-
 composer.lock                                 |  7 ++--
 frontend/base/app.vue                         |  2 ++
 .../layout/LayoutOgImage.server.vue           | 32 +++++++++++++++++++
 frontend/base/pages/user/index.vue            |  6 +++-
 .../layout/LayoutOgImage.server.vue           | 31 ++++++++++++++++++
 6 files changed, 74 insertions(+), 6 deletions(-)
 create mode 100644 frontend/base/components/layout/LayoutOgImage.server.vue
 create mode 100644 frontend/themes/default/components/layout/LayoutOgImage.server.vue

diff --git a/composer.json b/composer.json
index 9c4b1c7..1962c93 100644
--- a/composer.json
+++ b/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"
     },
diff --git a/composer.lock b/composer.lock
index 1802b0d..eee858f 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "6fa19c6f369fbfafd628b8f76e20d2c2",
+    "content-hash": "09d508115d697980602b24b9164ef7ad",
     "packages": [
         {
             "name": "asm89/stack-cors",
@@ -989,7 +989,7 @@
         },
         {
             "name": "dobefu/nuxtify_profile",
-            "version": "1.0.x-dev",
+            "version": "1.0.0-beta1",
             "source": {
                 "type": "git",
                 "url": "https://git.drupalcode.org/project/nuxtify",
@@ -1024,7 +1024,6 @@
                 "composer/installers": "^2.0",
                 "drupal/core-dev": "^10.2"
             },
-            "default-branch": true,
             "type": "drupal-profile",
             "extra": {
                 "installer-name": "nuxtify",
@@ -8318,7 +8317,7 @@
     "aliases": [],
     "minimum-stability": "dev",
     "stability-flags": {
-        "dobefu/nuxtify_profile": 20
+        "dobefu/nuxtify_profile": 10
     },
     "prefer-stable": true,
     "prefer-lowest": false,
diff --git a/frontend/base/app.vue b/frontend/base/app.vue
index edeb48b..6468652 100644
--- a/frontend/base/app.vue
+++ b/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>
diff --git a/frontend/base/components/layout/LayoutOgImage.server.vue b/frontend/base/components/layout/LayoutOgImage.server.vue
new file mode 100644
index 0000000..8ca07af
--- /dev/null
+++ b/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>
diff --git a/frontend/base/pages/user/index.vue b/frontend/base/pages/user/index.vue
index 691e214..a89fdb2 100644
--- a/frontend/base/pages/user/index.vue
+++ b/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>
diff --git a/frontend/themes/default/components/layout/LayoutOgImage.server.vue b/frontend/themes/default/components/layout/LayoutOgImage.server.vue
new file mode 100644
index 0000000..e1cef54
--- /dev/null
+++ b/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>