🔎 Connect contentful response to meta tags (#14)

* 🔎 Resolve #6

* ✨ Start implementing contentful CMS (#10)
* 🔎 Connect contentful response to meta tags (#13)
* 📝 Update .env template
* ✨ Connect blog with Meta Tags

src/composables/useMenu.ts

@@ -28,8 +28,10 @@ const getDocumentos = async () => {
 }
 
 const getBlogPosts = async () => {
-  const data = await queryContent('/blog').find()
-  return data.map(documento => ({ to: documento._path, title: documento.title }))
+  const data = await $fetch<any>('/api/v1/blog')
+  return data.items?.map((item: {fields:{ path: string, title: string }}) => {
+    return ({ to: `/blog/${item.fields.path}`, title: item.fields.title })
+  })
 }
 
 const getBeneficios = async () => {

src/pages/blog/[slug].vue

@@ -17,8 +17,22 @@ import markdownParser from '@nuxt/content/transformers/markdown'
 
 const route = useRoute()
 const { data: content, error } = await useFetch<any>(`/api/v1/blog/${route.params.slug ?? ''}`)
-
 const parsedMarkdown = content.value ? await markdownParser.parse('md', content.value.items.at(0).fields.body ?? '') : null
+const filteredContent = computed(() => content.value.items.at(0))
 
+if (filteredContent) {
+  defineOgImage({
+    component: 'OGImageBlog',
+    title: filteredContent.value.fields.title,
+  })
+  useHead({
+    title: filteredContent.value.fields.title, 
+  })
+  useSchemaOrg([
+    defineArticle({
+      headline: filteredContent.value.fields.title,
+    })
+  ]) 
+}
 
 </script>

src/server/api/_sitemap-urls.ts

@@ -1,10 +1,12 @@
 export default defineEventHandler(async () => {
   const [
-    content
+    content,
+    blog
   ] = await Promise.all([
-    $fetch<{url: string, createdAt: string }[]>('/api/content')
+    $fetch<{url: string, createdAt: string }[]>('/api/content'),
+    $fetch<{url: string, createdAt: string, updatedAt: string}[]>('/api/blog'),
   ])
-  return [...content].map((p) => {
+  return [...content, ...blog].map((p) => {
     return { loc: p.url, lastmod: p.createdAt }
   })
 })

src/server/api/blog.get.ts

@@ -0,0 +1,19 @@
+import { createContent } from "@/contentful"
+
+export default defineEventHandler(async () => {
+  const client = createContent()
+  const response = await client.getEntries({
+    content_type: 'blog',
+    limit: 20,
+    // @ts-expect-error - Select got an type error.
+    select: 'fields.path, sys.updatedAt, sys.createdAt'
+  })
+  return response.items.map(item => {
+    console.log(item)
+    return ({
+      url: `/blog/${item.fields.path}`,
+      updatedAt: item.sys.updatedAt,
+      createdAt: item.sys.createdAt,
+    })
+  })
+})