feat(SEO): better metadata and SEO tags

.env.example

@@ -1 +1,3 @@
-NUXT_PUBLIC_BACKEND_URL=http://localhost:3100
+NUXT_PUBLIC_API_BASE=http://localhost:3100
+NUXT_PUBLIC_URL_BASE=http://localhost:3000
+NUXT_PUBLIC_FEDIVERSE_CREATOR="@user@instance.example"

app/app.vue

@@ -13,11 +13,27 @@ import * as locales from '@nuxt/ui/locale';
 const { locale } = useI18n();
 const lang = computed(() => locales[locale.value].code);
 const dir = computed(() => locales[locale.value].dir);
+const { urlBase, fediverseCreator } = useRuntimeConfig().public;
+const route = useRoute();
+const url = computed(() => urlBase.replace(/\/+$/, '') + route.fullPath);
 
 useHead({
   htmlAttrs: {
     dir,
     lang,
   },
+  link: [
+    { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
+    { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
+    { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
+    { rel: 'manifest', href: '/site.webmanifest' },
+  ],
+  meta: fediverseCreator !== '' ? [{ name: 'fediverse:creator', content: fediverseCreator + '' }] : [],
+});
+
+useSeoMeta({
+  ogImage: '/leon.png',
+  twitterImage: '/leon.png',
+  ogUrl: url,
 });
 </script>

nuxt.config.ts

@@ -73,6 +73,8 @@ export default defineNuxtConfig({
   runtimeConfig: {
     public: {
       apiBase: process.env.NUXT_PUBLIC_API_BASE || 'http://localhost:3100/api',
+      urlBase: process.env.NUXT_PUBLIC_URL_BASE || 'http://localhost:3000/',
+      fediverseCreator: process.env.NUXT_PUBLIC_FEDIVERSE_CREATOR || ''
     }
   },
   nitro: {

public/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}