SEO

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

@@ -1,5 +1,6 @@
-<script setup>
+<script setup lang="ts">
 import TableHeader from '~/components/parts/TableHeader.vue';
+import { useSeo } from '~/composables/seo';
 
 const slug = useRoute().params.slug;
 const { locale } = useI18n();
@@ -7,14 +8,37 @@ const { locale } = useI18n();
 const { data: post } = await useAsyncData(`art-${slug}`, () => 
   queryCollection(`art`).path(`/art/${locale.value}/${slug}`).first()
 , {watch: [locale]})
+
+useSeo({
+  title: post.value?.title || '',
+  description: `Art piece: ${post.value?.title || ''} by Aran Roig`,
+  canonicalUrl: `/art/${locale.value}/${slug}`,
+  structuredData: post.value ? {
+    '@context': 'https://schema.org',
+    '@type': 'CreativeWork',
+    name: post.value.title,
+    description: `Art piece by Aran Roig titled "${post.value.title}"`,
+    author: {
+      '@type': 'Person',
+      name: 'Aran Roig'
+    },
+    datePublished: post.value.date,
+    image: post.value.thumb ? `${post.value.thumb.startsWith('http') ? '' : 'https://aranroig.com'}${post.value.thumb}` : undefined,
+    creativeWorkTheme: {
+      '@type': 'Thing',
+      name: 'Digital Art'
+    }
+  } : undefined,
+  ogImage: post.value?.thumb
+});
 </script>
 
 <template>
-  <!-- Render the blog post as Prose & Vue components -->
   <div class="no-sprite">
       <TableHeader></TableHeader>
     </div>
   <div class="extended-container">
+    <h1 v-if="post" class="art-title">{{ post.title }}</h1>
     <ContentRenderer v-if="post" :value="post" class="art" />
   </div>
 </template>
@@ -26,6 +50,44 @@ const { data: post } = await useAsyncData(`art-${slug}`, () =>
     margin-top: 32px;
 }
 
+.art {
+    h2 {
+        a {
+            text-decoration: none;
+            color: var(--color-text);
+        }   
+    }
+
+    img {
+        margin: auto;
+        display: flex;
+        max-height: 77vh;
+        max-width: 100%;
+    }
+}
+
+.art-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">
+.extended-container {
+    width: 100%;
+    margin: auto;
+    margin-top: 32px;
+}
+
 .art {
     h2 {
         a {