Migrate to Astro V5 (#22)

* fix video url

* update deploy script for using rsync

* remove delete from script

* translate resources page

* fix images dimensions and favicon

* add css optimization plugin and improve images

* update project dependencies

* refactor lang

* post translated to spanish

* fix metadata

* update dependencies

* update dependencies

* update dependencies

* update to Astro 5.x

* format index.astro

* Migrate content layer to Astro V5
This commit is contained in:
Juan Manzanero
2025-02-01 17:33:00 -06:00
committed by GitHub
parent 9363bf7a20
commit 4f0e80b988
46 changed files with 2265 additions and 2034 deletions

View File

@@ -1,51 +1,48 @@
---
import Layout from "@/layouts/Layout.astro";
import { getCollection } from "astro:content";
import components from "@/components/mdx/wrapper";
import formatDate from "@/utils/format-date";
import type { CollectionEntry } from "astro:content";
import { getLangFromUrl } from "@/i18n/utils";
interface Props {
post: CollectionEntry<"blog">;
}
import Layout from '@/layouts/Layout.astro';
import components from '@/components/mdx/wrapper';
import formatDate from '@/utils/format-date';
import { getLangFromUrl } from '@/i18n/utils';
import { getCollection, getEntry, render } from 'astro:content';
export async function getStaticPaths() {
const allBlogPosts = await getCollection(
"blog",
({ data }) => data.draft !== true,
);
const filterEnPosts = allBlogPosts.map((post) => {
const [lang, ...slug] = post.slug.split("/");
const allBlogPosts = await getCollection(
'blog',
({ data }) => data.draft !== true
);
const filterEnPosts = allBlogPosts.map((post) => {
const [lang, id] = post.id.split('/');
if (lang === "en")
return {
...post,
slug: slug.toString(),
};
else null;
});
if (lang === 'en')
return {
...post,
id: id.split('.')[0],
};
else null;
});
return filterEnPosts.map((post) => ({
params: { slug: post?.slug },
props: { post },
}));
return filterEnPosts.map((post) => ({
params: { slug: post?.id },
}));
}
const { post } = Astro.props;
const { Content } = await post.render();
const lang = getLangFromUrl(Astro.url);
const { slug } = Astro.params;
const post = await getEntry('blog', `${lang}/${slug}`)!;
const { Content, remarkPluginFrontmatter: data } = await render(post);
---
<Layout title={post.data.title} description={post.data.description}>
<article class="prose prose-invert">
<h1>{post.data.title}</h1>
<Content components={{ ...components }} />
<hr />
<p>
<strong>Posted: </strong>
{post.data.date && formatDate(new Date(post.data.date), lang)}
</p>
</article>
<Layout
title={data.title}
description={data.description}
>
<article class='prose prose-invert'>
<h1>{data.title}</h1>
<Content components={{ ...components }} />
<hr />
<p>
<strong>Posted: </strong>
{data.date && formatDate(new Date(data.date), lang)}
</p>
</article>
</Layout>

View File

@@ -1,25 +1,25 @@
---
import PostItem from "@/components/post-item";
import { getLangFromUrl } from "@/i18n/utils";
import Layout from "@/layouts/Layout.astro";
import { sortContentByDate } from "@/utils/sorts";
import { getCollection } from "astro:content";
import PostItem from '@/components/post-item';
import { getLangFromUrl } from '@/i18n/utils';
import Layout from '@/layouts/Layout.astro';
import { sortContentByDate } from '@/utils/sorts';
import { getCollection } from 'astro:content';
const pageData = {
title: "Blog",
description: "Long format about thoughts and other topics.",
title: 'Blog',
description: 'Long format about thoughts and other topics.',
};
const allPosts = await getCollection("blog", ({ data }) => data.draft !== true);
const allPosts = await getCollection('blog', ({ data }) => data.draft !== true);
const filterEnPosts = allPosts.map((post) => {
const [lang, ...slug] = post.slug.split("/");
const [lang, id] = post.id.split('/');
if (lang === "en")
return {
...post,
slug: slug.toString(),
};
else null;
if (lang === 'en')
return {
...post,
id: id.split('.')[0],
};
else null;
});
sortContentByDate(filterEnPosts);
@@ -27,26 +27,26 @@ const lang = getLangFromUrl(Astro.url);
---
<Layout {...pageData}>
<section class="prose prose-invert">
<h1>{pageData.title}</h1>
<p>{pageData.description}</p>
</section>
<ul class="mt-4 flex flex-col gap-4">
{
filterEnPosts.map(
(blogpost) =>
blogpost && (
<li>
<PostItem
type="blog"
lang={lang}
slug={blogpost.slug}
date={blogpost.data.date!}
title={blogpost.data.title!}
/>
</li>
),
)
}
</ul>
<section class='prose prose-invert'>
<h1>{pageData.title}</h1>
<p>{pageData.description}</p>
</section>
<ul class='mt-4 flex flex-col gap-4'>
{
filterEnPosts.map(
(blogpost) =>
blogpost && (
<li>
<PostItem
type='blog'
lang={lang}
id={blogpost.id}
date={blogpost.data.date!}
title={blogpost.data.title!}
/>
</li>
)
)
}
</ul>
</Layout>