Fix OG image

apps/frontend/nuxt.config.ts

@@ -20,6 +20,9 @@ export default defineNuxtConfig({
 		},
 	],
 	fonts: {
+		defaults: {
+			formats: ["ttf"],
+		},
 		families: [
 			{
 				name: "Geist",

apps/frontend/package.json

@@ -17,7 +17,6 @@
 		"@regle/core": "^1.19.13",
 		"@regle/nuxt": "^1.19.13",
 		"@regle/rules": "^1.19.13",
-		"@takumi-rs/core": "^0.69.2",
 		"@vueuse/integrations": "^14.2.1",
 		"arktype": "^2.1.29",
 		"dayjs": "^1.11.19",
@@ -30,11 +29,12 @@
 	},
 	"devDependencies": {
 		"@iconify-json/tabler": "^1.2.27",
-		"@takumi-rs/wasm": "^0.69.2",
+		"@takumi-rs/core": "^0.69.5",
+		"@takumi-rs/wasm": "^0.69.5",
 		"@unocss/nuxt": "^66.6.0",
 		"@vueuse/core": "^14.2.1",
 		"@vueuse/nuxt": "^14.2.1",
-		"nuxt-og-image": "6.0.0-beta.41",
+		"nuxt-og-image": "6.0.0-beta.42",
 		"oxlint": "^1.50.0",
 		"oxlint-tsgolint": "^0.14.2",
 		"unocss": "^66.6.0",

apps/frontend/src/app/components/OgImage/Basic.takumi.vue

@@ -9,16 +9,12 @@ defineProps<Props>();
 
 <template>
 	<div class="relative h-full w-full overflow-hidden">
-		<img src="/og_template.png" alt="og" class="absolute z-1" width="1200px" height="630px" />
+		<img src="/og_template.png" alt="og" class="absolute" width="1200px" height="630px" />
 
-		<div class="relative flex flex-col justify-between my-12 mx-20 z-10">
-			<h1
-				class="text-7xl text-[#EDEDED]"
-				style="font-family: 'Orbitron', sans-serif">
-				Solitar
-			</h1>
+		<div class="relative flex flex-col justify-between my-12 mx-20">
+			<h1 class="text-7xl text-[#EDEDED]" style="font-family: Orbitron">Solitar</h1>
 
-			<div class="flex flex-col" style="font-family: 'Geist Mono', monospace">
+			<div class="flex flex-col" style="font-family: Geist Mono">
 				<h2 class="text-5xl text-[#EDEDED]" v-if="subtitle">{{ subtitle }}</h2>
 				<h3 v-if="description" class="text-[#A0A0A0] text-3xl">
 					{{ description }}

apps/frontend/src/app/pages/index.vue

@@ -1,5 +1,14 @@
 <script setup lang="ts">
 defineOgImage("Basic.takumi");
+
+useSeoMeta({
+	title: "url shortener - solitar",
+	ogTitle: "url shortener - solitar",
+	twitterTitle: "url shortener - solitar",
+	description: "Create short URLS for your website and social media pages in seconds",
+	ogDescription: "Create short URLS for your website and social media pages in seconds",
+	twitterDescription: "Create short URLS for your website and social media pages in seconds",
+});
 </script>
 
 <template>

apps/frontend/src/app/pages/qr.vue

@@ -3,6 +3,14 @@ import { useQRCode } from "@vueuse/integrations/useQRCode";
 import { type } from "arktype";
 
 defineOgImage("Basic.takumi", { subtitle: "./qr", description: "Generate QR code for url" });
+useSeoMeta({
+	title: "qr code generator - solitar",
+	ogTitle: "qr code generator - solitar",
+	twitterTitle: "qr code generator - solitar",
+	description: "Create QR code for your URLS in seconds, save and share it immediately",
+	ogDescription: "Create QR code for your URLS in seconds, save and share it immediately",
+	twitterDescription: "Create QR code for your URLS in seconds, save and share it immediately",
+});
 
 const permission = usePermission("clipboard-read");
 const inputUrl = ref();

apps/frontend/src/app/pages/settings.vue

@@ -3,6 +3,14 @@ defineOgImage("Basic.takumi", {
 	subtitle: "./settings",
 	description: "customize your solitar experience",
 });
+useSeoMeta({
+	title: "settings - Solitar",
+	ogTitle: "settings - Solitar",
+	twitterTitle: "settings - Solitar",
+	description: "Create QR code for your URLS in seconds, save and share it immediately",
+	ogDescription: "Create QR code for your URLS in seconds, save and share it immediately",
+	twitterDescription: "Create QR code for your URLS in seconds, save and share it immediately",
+});
 </script>
 
 <template>