Add new images and update portfolio layouts for enhanced presentation

1 files changed, 4 insertions, 121 deletions

diff --git a/src/pages/blog/[id].astro b/src/pages/blog/[id].astro
index 3dc324a..8f02b65 100644
--- a/src/pages/blog/[id].astro
+++ b/src/pages/blog/[id].astro
@@ -1,11 +1,7 @@
 ---
-import Layout from "@/layouts/Layout.astro";
-import { getCollection, render } from "astro:content";
-import { type GetStaticPaths } from "astro";
-
-interface Props {
-  entry: any;
-}
+import type { GetStaticPaths } from "astro";
+import { getCollection } from "astro:content";
+import BlogSingleLayout from "@/layouts/BlogSingleLayout.astro";
 
 export const getStaticPaths: GetStaticPaths = async () => {
   const entries = await getCollection("blog");
@@ -16,119 +12,6 @@ export const getStaticPaths: GetStaticPaths = async () => {
 };
 
 const { entry } = Astro.props;
-const { Content } = await render(entry);
-const formattedDate = new Date(entry.data.publishedAt).toLocaleDateString(
-  "es-ES",
-  {
-    year: "numeric",
-    month: "long",
-    day: "numeric",
-    weekday: "long",
-  },
-);
-
-const schema = {
-  "@context": "https://schema.org",
-  "@type": "BlogPosting",
-  headline: entry.data.title,
-  datePublished: entry.data.publishedAt.toISOString(),
-  keywords: entry.data.tags || [],
-  author: {
-    "@type": "Person",
-    name: "Ariel Costas Guerrero",
-  },
-  publisher: {
-    "@type": "Person",
-    name: "Ariel Costas Guerrero",
-    url: "https://www.costas.dev",
-    image: {
-      "@type": "ImageObject",
-      url: "https://www.costas.dev/favicon.png",
-    },
-  },
-};
 ---
 
-<Layout title={entry.data.title} description={entry.data.metaDescription}>
-  <script
-    is:inline
-    type="application/ld+json"
-    slot="head-jsonld"
-    set:html={JSON.stringify(schema)}
-  />
-
-  <h1>{entry.data.title}</h1>
-  <small>
-    Publicado el
-    <time datetime={entry.data.publishedAt.toISOString()}>
-      {formattedDate}
-    </time>
-    {entry.data.tags && entry.data.tags.length > 0 && (
-      <>
-        • Etiquetas:
-        <ul class="tags">
-          {entry.data.tags.map((tag: string) => (
-            <li><a href={`/blog/?tag=${encodeURIComponent(tag)}`}>{tag}</a></li>
-          ))}
-        </ul>
-      </>
-    )}
-  </small>
-
-  <Content />
-
-  <p>
-    <a href="/blog">Volver al blog</a>
-  </p>
-</Layout>
-
-<style lang="scss">
-  @use "../../../styles/variables" as v;
-  @use "sass:color";
-
-  .tags {
-    display: inline-flex;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    gap: 0.75rem;
-  }
-
-  .tags li {
-    display: inline;
-  }
-
-  .tags a {
-    // Estilo de enlace normal, siguiendo los estilos predefinidos en Layout.astro
-    color: v.$accentDark;
-    font-size: 0.85rem;
-    font-family: v.$monoFontStack;
-    text-decoration: none;
-    box-shadow: 0 1px v.$accent;
-    transition: all 0.2s ease;
-
-    &:hover {
-      box-shadow: 0 2px v.$accentDark;
-    }
-
-    &:focus {
-      color: v.$accentDark;
-      outline: none;
-      background-color: v.$secondary;
-      box-shadow: 0 4px #0b0c0c;
-    }
-  }
-
-  /* Estilos para la información de la publicación */
-  small {
-    display: block;
-    margin-top: -1rem;
-    margin-bottom: 1.5rem;
-    font-size: 0.85rem;
-    color: color.adjust(v.$dark, $lightness: 30%);
-  }
-
-  time {
-    font-style: italic;
-  }
-</style>
+<BlogSingleLayout entry={entry} />