Bring back the blog

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>