Merge pull request #170 from matsn0w/feat/seo

feat: add seo meta tags

web/pages/configurator.vue

@@ -160,11 +160,21 @@ import { resetVcfConfiguration } from "~/composables/vcfConfiguration";
 import LocalStorageButton from "~/components/LocalStorageButton.vue";
 import { compareVersions } from "compare-versions";
 
+const url = useRequestURL();
+const config = useRuntimeConfig();
+
 useHead({
   title: "MISS-ELS VCF Configurator",
 });
 
-const config = useRuntimeConfig();
+useSeoMeta({
+  ogSiteName: "MISS-ELS",
+  title: "MISS-ELS VCF Configurator",
+  ogTitle: "MISS-ELS VCF Configurator",
+  ogDescription:
+    "Using our VCF Configurator, you can easily generate configuration files for your vehicles.",
+  ogImage: `${url.origin}/images/MISS-ELS.png`,
+});
 
 const isVcfSchemaVersionUpToDate = computed(() => {
   return (

web/pages/index.vue

@@ -25,6 +25,17 @@
 </template>
 
 <script setup lang="ts">
+const url = useRequestURL();
+
+useSeoMeta({
+  ogSiteName: "MISS-ELS",
+  title: "MISS-ELS - server sided sirens for FiveM",
+  ogTitle: "MISS-ELS - server sided sirens for FiveM",
+  ogDescription:
+    "Server-sided ELS for FiveM with custom patterns per vehicle, custom sirens, indicator control and more!",
+  ogImage: `${url.origin}/images/MISS-ELS.png`,
+});
+
 definePageMeta({
   layout: "fullscreen",
 });
@@ -52,7 +63,7 @@ const viewRelease = async () => {
 
 <style>
 .background {
-  background-image: url("~/assets/images/MISS-ELS.png");
+  background-image: url("/images/MISS-ELS.png");
   background-size: cover;
   background-position: center;
 }