SEO

frontend/app/pages/blog/[slug].vue

@@ -1,6 +1,8 @@
-<script setup>
+<script setup lang="ts">
 import FixedLayout from '~/components/layouts/FixedLayout.vue';
 import TableHeader from '~/components/parts/TableHeader.vue';
+import { useSeo } from '~/composables/seo';
+import { computed, onBeforeMount } from 'vue';
 
 const slug = useRoute().params.slug;
 const { locale } = useI18n();
@@ -8,21 +10,81 @@ const { locale } = useI18n();
 const { data: post } = await useAsyncData(`blog-${slug}`, () => 
   queryCollection(`blog`).path(`/blog/${locale.value}/${slug}`).first()
 , {watch: [locale]})
+
+useSeo({
+  title: post.value?.title || '',
+  description: post.value?.description || '',
+  canonicalUrl: `/blog/${locale.value}/${slug}`,
+  articleDate: post.value?.date,
+  structuredData: post.value ? {
+    '@context': 'https://schema.org',
+    '@type': 'BlogPosting',
+    headline: post.value.title,
+    description: post.value.description,
+    datePublished: post.value.date,
+    dateModified: post.value.date,
+    author: {
+      '@type': 'Person',
+      name: 'Aran Roig'
+    },
+    publisher: {
+      '@type': 'Organization',
+      name: 'Aran Roig',
+      url: 'https://aranroig.com'
+    },
+    mainEntityOfPage: {
+      '@type': 'WebPage',
+      '@id': `https://aranroig.com/blog/${locale.value}/${slug}`
+    }
+  } : undefined,
+  ogImage: post.value ? `https://aranroig.com/blog/${locale.value}/${slug}/cover.png` : undefined
+});
 </script>
 
 <template>
-  <!-- Render the blog post as Prose & Vue components -->
   <div class="no-sprite">
       <TableHeader></TableHeader>
     </div>
   <FixedLayout>
     <Container>
+      <h1 v-if="post" class="blog-post-title">{{ post.title }}</h1>
       <ContentRenderer v-if="post" :value="post" class="blog" />
     </Container>
   </FixedLayout>
   <Footer></Footer>
 </template>
 
+<style lang="scss">
+.blog {
+    h2 {
+        a {
+            text-decoration: none;
+            color: var(--color-text);
+        }   
+    }
+
+    img {
+        margin: auto;
+        display: flex;
+        max-height: 400px;
+    }
+}
+
+.blog-post-title {
+  font-family: 'Hurmit', monospace;
+  font-size: 1.8rem;
+  color: var(--color-text);
+  margin-bottom: 16px;
+  line-height: 1.3;
+}
+</style>
+
+<style lang="scss">
+.no-sprite .undertable-wrapper {
+  display: none;
+}
+</style>
+
 <style lang="scss">
 .blog {
     h2 {