feat(socials): added og image

components/og-images/base-og-image.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{ title?: string; description?: string; headline?: string; icon?: string }>(), {
+  title: '',
+  description: '',
+  headline: 'deviz - developer quiz',
+  icon: 'i-tabler-terminal-2',
+});
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col justify-center bg-[#111827]">
+    <svg class="absolute right-0 top-0" width="629" height="593" viewBox="0 0 629 593" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g filter="url(#filter0_f_199_94966)">
+        <path
+          d="M628.5 -578L639.334 -94.4223L806.598 -548.281L659.827 -87.387L965.396 -462.344L676.925 -74.0787L1087.69 -329.501L688.776 -55.9396L1160.22 -164.149L694.095 -34.9354L1175.13 15.7948L692.306 -13.3422L1130.8 190.83L683.602 6.50012L1032.04 341.989L668.927 22.4412L889.557 452.891L649.872 32.7537L718.78 511.519L628.5 36.32L538.22 511.519L607.128 32.7537L367.443 452.891L588.073 22.4412L224.955 341.989L573.398 6.50012L126.198 190.83L564.694 -13.3422L81.8734 15.7948L562.905 -34.9354L96.7839 -164.149L568.224 -55.9396L169.314 -329.501L580.075 -74.0787L291.604 -462.344L597.173 -87.387L450.402 -548.281L617.666 -94.4223L628.5 -578Z"
+          fill="#818cf855"
+        />
+      </g>
+      <defs>
+        <filter id="filter0_f_199_94966" x="0.873535" y="-659" width="1255.25" height="1251.52" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feGaussianBlur stdDeviation="40.5" result="effect1_foregroundBlur_199_94966" />
+        </filter>
+      </defs>
+    </svg>
+
+    <div class="w-[700px] pl-[100px]">
+      <p v-if="headline" class="uppercase text-[24px] text-[#818cf8] mb-4 font-semibold">
+        {{ props.headline }}
+      </p>
+      <h1 class="w-[700px] m-0 text-[70px] font-semibold mb-2 text-white flex items-center">
+        <span>{{ props.title }}</span>
+      </h1>
+      <p class="text-[36px] text-[#b9b9be] leading-tight w-[650px] mt-0">
+        {{ props.description.slice(0, 200) }}
+      </p>
+    </div>
+
+    <UIcon :name="props.icon" class="text-[#818cf8] absolute top-[120px] right-[90px] h-[300px] w-[300px]" dynamic />
+  </div>
+</template>

src/modules/http-status/pages/index.vue

@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import { getHttpQuestions } from '../http-status.usecases';
 
+defineOgImageComponent('base-og-image', {
+  title: 'HTTP Status Quiz',
+  description: 'Test your knowledge of HTTP status codes with this online quiz.',
+  icon: 'i-tabler-terminal-2',
+});
+
 const questionCount = 10;
 
 const { currentQuestion, selectAnswer, isAnswered, selectedAnswer, goToNextQuestion, isFinished, reset, score, progress, currentQuestionIndex } = useQuiz({