✏️ Bloques de código y procesar galería

package.json

@@ -18,20 +18,23 @@
     "server:restart": "pm2 restart ecosystem.config.js"
   },
   "dependencies": {
-    "@astrojs/sitemap": "^3.0.3",
+    "@astrojs/sitemap": "^3.0.5",
     "@enflujo/alquimia": "^2.0.0",
     "@rollup/plugin-graphql": "^2.0.4",
-    "astro": "^3.5.5",
-    "astro-compress": "^2.2.3",
+    "@speed-highlight/core": "^1.2.6",
+    "astro": "^4.2.1",
+    "astro-compress": "^2.2.8",
     "astro-robots-txt": "^1.0.0",
-    "autoprefixer": "^10.4.16",
-    "marked": "^10.0.0"
+    "autoprefixer": "^10.4.17",
+    "marked": "^11.1.1",
+    "marked-highlight": "^2.1.0",
+    "sharp": "^0.33.2"
   },
   "devDependencies": {
     "@types/marked": "^6.0.0",
     "graphql": "^16.8.1",
-    "postcss": "^8.4.31",
-    "prettier": "^3.1.0",
-    "sass": "^1.69.5"
+    "postcss": "^8.4.33",
+    "prettier": "^3.2.4",
+    "sass": "^1.70.0"
   }
 }

src/pages/proyectos/[slug].astro

@@ -2,7 +2,21 @@
 import DescripcionProyecto from '@/componentes/DescripcionProyecto.astro';
 import Plantilla from '@/plantillas/Plantilla.astro';
 import { gql, obtenerDatos, urlImagen } from '@/utilidades/ayudas';
-import { marked } from 'marked';
+import { Marked } from 'marked';
+import { markedHighlight } from 'marked-highlight';
+import { highlightText } from '@speed-highlight/core';
+import type { ShjLanguage } from '@speed-highlight/core';
+import '@speed-highlight/core/themes/github-dim.css';
+
+const marked = new Marked(
+  markedHighlight({
+    async: true,
+    langPrefix: 'shj-lang-',
+    highlight(codigo, lenguaje: ShjLanguage) {
+      return highlightText(codigo, lenguaje, true);
+    },
+  })
+);
 
 export async function getStaticPaths() {
   const Proyectos = gql`
@@ -49,6 +63,26 @@ if (proyectos && proyectos.length) {
   pagina = proyectos[0];
   pagina.fecha_publicacion = pagina.fecha_publicacion ? new Date(pagina.fecha_publicacion) : null;
   pagina.date_created = pagina.date_created ? new Date(pagina.date_created) : null;
+  if (pagina.contenido && pagina.contenido.length) {
+    const comando = /\/\/\/(.*?)\)/g;
+    const imgsGaleria = pagina.contenido.match(comando);
+    if (imgsGaleria) {
+      imgsGaleria.forEach((elemento: string) => {
+        const alt = elemento.match(/(?<=\[).+?(?=\])/);
+        const id = elemento.match(/(?<=\().+?(?=\))/);
+
+        const html = `<picture>
+          <source media="(max-width: 396px)" srcset="https://api.enflujo.com/assets/${id}?height=200&quality=75&format=webp" />
+          <source media="(max-width: 799px)" srcset="https://api.enflujo.com/assets/${id}?height=400&quality=80&format=webp" />
+          <source media="(min-width: 800px)" srcset="https://api.enflujo.com/assets/${id}?height=500&quality=90&format=webp" />
+          <img src="https://api.enflujo.com/assets/${id}?height=500&quality=90&format=webp" alt="${alt}" />
+        </picture>
+        `;
+
+        pagina.contenido = pagina.contenido.replace(elemento, html);
+      });
+    }
+  }
 }
 ---
 

src/scss/_normalizar.scss

@@ -104,3 +104,7 @@ p {
   line-height: 1.6;
   margin: 1em 0 0.3em 0;
 }
+
+code {
+  display: block;
+}