feat: basic heading and use dynamic image og preview

Author: SergioRibera

app.vue

@@ -4,33 +4,11 @@
   const route = useRoute()
   const nodeId = route.params.slug
 
-  const title = 'Hoja de Ruta Definitiva para Aprender Rust: Desde Principiante hasta Experto'
-  const description = `
-¿Estás listo para dominar uno de los lenguajes de programación más potentes y eficientes? Nuestra hoja de ruta te guiará paso a paso en tu viaje de aprendizaje de Rust, desde los conceptos básicos hasta las técnicas avanzadas. Diseñada para principiantes y desarrolladores experimentados, esta guía exhaustiva te ayudará a construir una sólida base en Rust y a aprovechar al máximo su rendimiento, seguridad y concurrencia.
-Aprenderás a través de ejemplos prácticos, ejercicios desafiantes y proyectos reales, lo que te permitirá aplicar tus nuevas habilidades de inmediato. Además, explorarás las mejores prácticas y las últimas tendencias en el ecosistema de Rust, asegurándote de estar siempre un paso adelante.
-Ya sea que desees desarrollar aplicaciones de sistemas, videojuegos, criptomonedas o cualquier otro proyecto, nuestra hoja de ruta te preparará para dominar Rust y destacarte en el mundo del desarrollo de software. ¡Comienza tu viaje hoy y conviértete en un experto en Rust!
-    `
   useHead({
     bodyAttrs: {
       class: 'bg-orange-200 dark:bg-[#131313]/90 w-screen min-h-screen bg-center bg-fixed dark:bg-kaku dark:bg-cover dark:bg-blend-darken overflow-x-hidden dark:text-[#e2cea9]' + ((nodeId && !route.query.fromClick) ? ' overflow-hidden' : '')
     }
   })
-
-  useSeoMeta({
-    title,
-    description,
-    ogTitle: title,
-    ogDescription: description,
-    twitterTitle: title,
-    twitterDescription: description,
-    twitterCard: 'summary_large_image',
-    icon: '/favicon.ico',
-    lang: 'es',
-    ogImage: '[og:image]',
-    twitterImage: '[twitter:image]'
-  })
-
-  // defineOgImageComponent('Home', { title })
 </script>
 
 <template>

components/OgImage/Home.vue

@@ -11,8 +11,8 @@
 
   const roadmapNodes = ref([
     { id: 'topics', type: 'topics', position: { x: 0, y: -150 }, data: { topicLevel: 'start' } },
-    ...data.value.map(({ title, _path, data: { position, width, sourcePosition, targetPosition, topicLevel, type, align } }) => (
-    { id: _path.substring(1).replaceAll('/', "-").replaceAll('_', ''), type, position, width, label: title, data: { align, topicLevel, sourcePosition, targetPosition, path: _path } }
+    ...data.value.map(({ title, _path, description, data: { position, width, sourcePosition, targetPosition, topicLevel, type, align } }) => (
+    { id: _path.substring(1).replaceAll('/', "-").replaceAll('_', ''), description, type, position, width, label: title, data: { align, topicLevel, sourcePosition, targetPosition, path: _path } }
   ))
   ])
 

components/Roadmap.vue

@@ -2,21 +2,14 @@
 export default defineNuxtConfig({
   ssr: false,
   devtools: { enabled: true },
-  modules: [ "@nuxt/content", "@nuxtjs/tailwindcss", "@nuxtjs/seo" ],
+  modules: ["@nuxt/content", "@nuxtjs/tailwindcss", "@nuxtjs/seo"],
   site: {
     url: 'https://roadmap.rustlang-es.org',
-    name: 'Hoja de Ruta Definitiva para Aprender Rust: Desde Principiante hasta Experto',
-    description: `
-¿Estás listo para dominar uno de los lenguajes de programación más potentes y eficientes? Nuestra hoja de ruta te guiará paso a paso en tu viaje de aprendizaje de Rust, desde los conceptos básicos hasta las técnicas avanzadas. Diseñada para principiantes y desarrolladores experimentados, esta guía exhaustiva te ayudará a construir una sólida base en Rust y a aprovechar al máximo su rendimiento, seguridad y concurrencia.
-Aprenderás a través de ejemplos prácticos, ejercicios desafiantes y proyectos reales, lo que te permitirá aplicar tus nuevas habilidades de inmediato. Además, explorarás las mejores prácticas y las últimas tendencias en el ecosistema de Rust, asegurándote de estar siempre un paso adelante.
-Ya sea que desees desarrollar aplicaciones de sistemas, videojuegos, criptomonedas o cualquier otro proyecto, nuestra hoja de ruta te preparará para dominar Rust y destacarte en el mundo del desarrollo de software. ¡Comienza tu viaje hoy y conviértete en un experto en Rust!
-    `,
+    name: 'Hoja de Ruta Definitiva para Aprender Rust',
+    description: 'Nuestra hoja de ruta te guiará paso a paso en tu viaje de aprendizaje de Rust diseñada para principiantes y desarrolladores experimentados',
     defaultLocale: 'es'
   },
-  ogImage: {
-    enabled: false,
-    runtimeChromium: false,
-  },
+  ogImage: { enabled: false },
   app: {
     head: {
       charset: 'utf-8',

nuxt.config.ts

@@ -19,10 +19,8 @@
         >
           <Dropdown
             ref="statusDropDown"
-            :customTriggerClass="[
-              'px-3 py-1 hover:bg-orange-100 dark:hover:bg-gray-700 dark:border-gray-700 border',
-              status.toLowerCase(),
-            ]"
+            :customTriggerClass="
+              'px-3 py-1 hover:bg-orange-100 dark:hover:bg-gray-700 dark:border-gray-700 border ' + status.toLowerCase()"
             :border="false"
           >
             <!-- trigger element -->
@@ -118,11 +116,22 @@ const isScrolled = ref(false);
 
 onMounted(async () => {
   if (!nodeId) return;
-  const contentResult = await queryContent(nodeId.join("/")).findOne();
+  const contentResult = await queryContent((nodeId || []).join("/")).findOne();
   content.value = contentResult;
   showSidebar.value = contentResult && (route.query.fromClick || false);
+
+  useContentHead(contentResult)
+
 });
 
+useSeoMeta({
+  twitterCard: 'summary_large_image',
+  icon: '/favicon.ico',
+  lang: 'es',
+  ogImage: `/${(nodeId && nodeId.join('-')) || 'ogpreview'}.png`,
+  twitterImage: `/${(nodeId && nodeId.join('-')) || 'ogpreview'}.png`,
+})
+
 const closeSidebar = () => {
   content.value = null;
   document.body.classList.remove("overflow-hidden");