diff options
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/blog.astro | 68 | ||||
| -rw-r--r-- | src/pages/blog.xml.js | 19 | ||||
| -rw-r--r-- | src/pages/blog/[slug].astro | 55 | ||||
| -rw-r--r-- | src/pages/index.astro | 29 |
4 files changed, 170 insertions, 1 deletions
diff --git a/src/pages/blog.astro b/src/pages/blog.astro new file mode 100644 index 0000000..4cfcea3 --- /dev/null +++ b/src/pages/blog.astro @@ -0,0 +1,68 @@ +---
+import { getCollection } from "astro:content";
+import Layout from "../layouts/Layout.astro";
+const blogCollection = (await getCollection("blog")).sort((a, b) => {
+ return b.data.publishedAt.getTime() - a.data.publishedAt.getTime();
+});
+const groupedPosts = blogCollection.reduce(
+ (acc: Record<string, any[]>, post) => {
+ const year = post.data.publishedAt.getFullYear();
+ const month = post.data.publishedAt.getMonth() + 1;
+ const key = `${year}-${month}`;
+ if (!acc[key]) {
+ acc[key] = [];
+ }
+ acc[key].push(post);
+ return acc;
+ },
+ {},
+);
+function humaniseDate(date: Date) {
+ const result = date.toLocaleDateString("es-ES", {
+ month: "long",
+ year: "numeric",
+ });
+ return result.charAt(0).toUpperCase() + result.slice(1);
+}
+const schema = {
+ "@context": "https://schema.org",
+ "@type": "Blog",
+ "headline": "Blog de Ariel Costas",
+ "description": "En este blog encontrarás artículos sobre desarrollo, tecnología y otras temáticas que pueda querer compartir. Disclaimer de siempre: las opiniones son mías, y no representan a ninguna empresa o institución.",
+ "publisher": {
+ "@type": "Person",
+ "name": "Ariel Costas",
+ },
+ "author": {
+ "@type": "Person",
+ "name": "Ariel Costas",
+ }
+};
+---
+
+<Layout title="Blog" description="Artículos sobre desarrollo, tecnología y otras temáticas que pueda querer compartir.">
+ <script type="application/ld+json" slot="head-jsonld" set:html={JSON.stringify(schema)}></script>
+
+ <h1>Blog de Ariel Costas</h1>
+
+ <p>
+ En este blog encontrarás artículos sobre desarrollo, tecnología y otras
+ temáticas que pueda querer compartir. Disclaimer de siempre: las
+ opiniones son mías, y no representan a ninguna empresa o institución.
+ </p>
+
+ {
+ Object.entries(groupedPosts).map(([key, posts]) => (
+ <section>
+ <h2>{humaniseDate(new Date(key))}</h2>
+ <ul>
+ {posts.map((post) => (
+ <li>
+ <a href={`/blog/${post.slug}`}>{post.data.title}</a>
+ </li>
+ ))}
+ </ul>
+ </section>
+ ))
+ }
+</Layout>
diff --git a/src/pages/blog.xml.js b/src/pages/blog.xml.js new file mode 100644 index 0000000..b4fbe38 --- /dev/null +++ b/src/pages/blog.xml.js @@ -0,0 +1,19 @@ +import rss from '@astrojs/rss';
+import { getCollection } from 'astro:content';
+
+
+export async function GET(context) {
+ const collection = await getCollection('blog');
+
+ return rss({
+ title: "Blog de Ariel Costas",
+ description: "Artículos del blog de Ariel Costas",
+ site: context.site,
+ items: collection.map((post) => ({
+ title: post.data.title,
+ link: `${context.site}blog/${post.slug}`,
+ description: post.data.metaDescription,
+ pubDate: post.data.publishedAt
+ }))
+ })
+}
diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro new file mode 100644 index 0000000..a1a0532 --- /dev/null +++ b/src/pages/blog/[slug].astro @@ -0,0 +1,55 @@ +---
+import type { GetStaticPaths } from "astro";
+import Layout from "../../layouts/Layout.astro";
+import { getCollection } from "astro:content";
+export const getStaticPaths = (async () => {
+ const entries = await getCollection("blog");
+ return entries.map((entry) => ({
+ params: { slug: entry.slug },
+ props: { entry },
+ }));
+}) satisfies GetStaticPaths;
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+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(),
+ author: {
+ "@type": "Person",
+ name: "Ariel Costas Guerrero",
+ },
+ publisher: {
+ "@type": "Person",
+ name: "Ariel Costas Guerrero",
+ logo: {
+ "@type": "ImageObject",
+ url: "https://www.costas.dev/favicon.png",
+ },
+ },
+};
+---
+
+<Layout title={entry.data.title} description={entry.data.metaDescription}>
+ <script type="application/ld+json" slot="head-jsonld" set:html={JSON.stringify(schema)}></script>
+
+ <h1>{entry.data.title}</h1>
+ <small>
+ Publicado el
+ <time datetime={entry.data.publishedAt.toISOString()}>
+ {formattedDate}
+ </time>
+ </small>
+
+ <Content />
+</Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro index 0f92a2d..5d1c24d 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -2,6 +2,10 @@ import { getCollection } from "astro:content"; import Layout from "../layouts/Layout.astro"; +const blogCollection = (await getCollection("blog")).sort((a, b) => { + return b.data.publishedAt.getTime() - a.data.publishedAt.getTime(); +}); + const schema = { "@context": "http://schema.org", "@type": "WebSite", @@ -29,6 +33,7 @@ const schema = { su conocimiento. Me gusta la programación, el diseño web y la creatividad. Me encanta crear cosas nuevas y aprender de los demás. </p> + <a href="/trajectory">Más información sobre mí</a> <h2>¿Qué hago?</h2> <p> @@ -36,6 +41,28 @@ const schema = { Cloud en una empresa de tecnología. Me encargo de desarrollar aplicaciones web en PHP y desplegarlas en la nube de forma segura y eficiente. </p> - <a href="/portfolio">Mi portfolio</a> + + <h2>Últimas entradas del blog</h2> + <ul> + { + blogCollection.slice(0, 5).map((p) => { + const date = Intl.DateTimeFormat("es-ES", { + day: "2-digit", + month: "short", + year: "numeric", + }).format(p.data.publishedAt); + return ( + <li> + <time datetime={p.data.publishedAt.toISOString()}> + {date} + </time> + <a href={`/blog/${p.slug}`}>{p.data.title}</a> + </li> + ); + }) + } + </ul> + <a href="/blog">Ver todas las entradas</a> + </Layout> |