English astro 5 migration

src/pages/blog/tags/[tag].astro

@@ -1,5 +1,4 @@
 ---
-import type { InferGetStaticParamsType, InferGetStaticPropsType, GetStaticPaths } from 'astro';
 import BaseLayout from '@layouts/BaseLayout.astro';
 import BlogPost from '@components/BlogPost.astro';
 import { getCollection } from 'astro:content';
@@ -17,13 +16,10 @@ export const getStaticPaths = (async () => {
       props: { posts: filteredPosts, tags: uniqueTags },
     };
   });
-}) satisfies GetStaticPaths
+})
 
-type Params = InferGetStaticParamsType<typeof getStaticPaths>;
-type Props = InferGetStaticPropsType<typeof getStaticPaths>;
-
-const { tag } = Astro.params as Params;
-const { posts, tags } = Astro.props as Props;
+const { tag } = Astro.params;
+const { posts, tags } = Astro.props;
 ---
 <BaseLayout pageTitle={tag}>
   <BlogTags route="/blog/tags/" tags={tags} current={tag}/>

src/pages/charla/tags/[tag].astro

@@ -1,5 +1,4 @@
 ---
-import type { InferGetStaticParamsType, InferGetStaticPropsType, GetStaticPaths } from 'astro';
 import BaseLayout from '@layouts/BaseLayout.astro';
 import BlogPost from '@components/BlogPost.astro';
 import { getCollection } from 'astro:content';
@@ -17,13 +16,10 @@ export const getStaticPaths = (async () => {
       props: { posts: filteredPosts, tags: uniqueTags },
     };
   });
-}) satisfies GetStaticPaths
+})
 
-type Params = InferGetStaticParamsType<typeof getStaticPaths>;
-type Props = InferGetStaticPropsType<typeof getStaticPaths>;
-
-const { tag } = Astro.params as Params;
-const { posts, tags } = Astro.props as Props;
+const { tag } = Astro.params;
+const { posts, tags } = Astro.props;
 ---
 <BaseLayout pageTitle={tag}>
   <BlogTags route="/charla/tags/" tags={tags} current={tag}/>

src/pages/en/about.md

@@ -0,0 +1,16 @@
+---
+title: About me
+layout: "@layouts/MarkdownLayout.astro"
+---
+I'm Sergio Carlos Orozco Torres. I was born in Barranquilla, Atlántico on April 30, 1991..
+
+In my school days I was very fond of spending time in libraries, and my favorite subject was computer science, although at that time I damaged some of the computers at home after several attempts I could fix them, because of this I studied Systems Engineering, in addition to a Specialization in Computer Security at the [Corporación Universitaria Americana](/en/trabajo/coruniamericana/).
+
+Before finishing university I started working in software development within the same university where I studied and after graduating I followed this line of work, then I got a vacancy at [Informática y tributos](/en/trabajo/infortributos/) My contributions were mostly in the presentation of information about the software we developed, although at this time I saw the first talks about Python in the [Python Barranquilla](/en/comunidad/pybaq), I decided to bet on front-end development in a digital agency called [Joonik](/trabajo/joonik/) where I made my first test automation with selenium.
+And in 2018 a year full of changes, I graduated, changed jobs to [Perficient](/en/trabajo/perficient/) where I have been working in software quality for 6 years and decided to move to Medellín, Antioquia.
+
+I love software development so much that I participate in various software communities and wanted to create my own [web portfolio](/en/proyecto/scot3004) (this website) and you can see my [charlas](/en/charla) in they're in Spanish.
+
+I really like riding my bike and I managed to go from Barranquilla to Cartagena, Santa Marta and other nearby municipalities, and today that I live in Itagüí I continue riding my bike.
+
+I also like to play video games, my favorites are open world ones, including the Assassins Creeds saga, Genshin Impact or the GTA saga (Grand Theft Auto).

src/pages/en/blog/[...slug].astro → src/pages/en/blog/[...id].astro

@@ -1,21 +1,19 @@
 ---
-import type { InferGetStaticPropsType, GetStaticPaths } from 'astro';
-import { getCollection } from 'astro:content';
+import { getCollection, render } from 'astro:content';
 import BaseLayout from '@layouts/BaseLayout.astro';
 import BlogTags from '@components/BlogTags.astro';
 import { dateFormat } from 'src/scripts/dateFormat';
+import Comments from '@components/Comments.astro';
 
 export const getStaticPaths = (async () => {
   const blogEntries = await getCollection('blog');
   return blogEntries.map(entry => ({
-    params: { slug: entry.slug }, props: { entry },
+    params: { id: entry.id }, props: { entry },
   }));
-}) satisfies GetStaticPaths
-
-type Props = InferGetStaticPropsType<typeof getStaticPaths>;
+})
 
 const { entry } = Astro.props;
-const { Content } = await entry.render();
+const { Content } = await render(entry);
 
 ---
 <BaseLayout pageTitle={entry.data.title}>
@@ -29,5 +27,5 @@ const { Content } = await entry.render();
   {entry.data.gist &&
     <script src={`${entry.data.gist}.js`} is:inline></script>
   }
-
+  <Comments />
 </BaseLayout>

src/pages/en/blog/index.astro

@@ -5,13 +5,13 @@ import { getCollection } from 'astro:content';
 import BlogTags from '@components/BlogTags.astro';
 import { enDateFormat } from 'src/scripts/dateFormat';
 
-const allPosts = (await getCollection('blog')).reverse();
-const tags = [...new Set(allPosts.map((post) => post.data.tags).flat())];
+const allPosts = (await getCollection('blog')).sort((a, b)=> b.id.localeCompare(a.id));
+const tags = [...new Set(allPosts.map((post) => post.data.tags).flat())].sort((a, b)=> a.localeCompare(b));
 const pageTitle = "Blog";
 ---
 <BaseLayout pageTitle={pageTitle}>
   <BlogTags route="/en/blog/tags/" tags={tags} />
   <div class="post-list">
-    {allPosts.map((post) => <BlogPost url={`/en/blog/${post.slug}`} title={post.data.title} date={enDateFormat.format(post.data.date)} />)}
+    {allPosts.map((post) => <BlogPost url={`/en/blog/${post.id}`} title={post.data.title} date={enDateFormat.format(post.data.date)} />)}
   </div>
 </BaseLayout>

src/pages/en/blog/tags/[tag].astro

@@ -1,5 +1,4 @@
 ---
-import type { InferGetStaticParamsType, InferGetStaticPropsType, GetStaticPaths } from 'astro';
 import BaseLayout from '@layouts/BaseLayout.astro';
 import BlogPost from '@components/BlogPost.astro';
 import { getCollection } from 'astro:content';
@@ -17,18 +16,15 @@ export const getStaticPaths = (async () => {
       props: { posts: filteredPosts, tags: uniqueTags },
     };
   });
-}) satisfies GetStaticPaths
+})
 
-type Params = InferGetStaticParamsType<typeof getStaticPaths>;
-type Props = InferGetStaticPropsType<typeof getStaticPaths>;
-
-const { tag } = Astro.params as Params;
-const { posts, tags } = Astro.props as Props;
+const { tag } = Astro.params;
+const { posts, tags } = Astro.props;
 ---
 <BaseLayout pageTitle={tag}>
   <BlogTags route="/en/blog/tags/" tags={tags} current={tag}/>
   <p>Blog tagged with {tag}</p>
   <div class="post-list">
-    {posts.map((post) => <BlogPost url={`/en/blog/${post.slug}`} title={post.data.title} date={enDateFormat.format(post.data.date)} />)}
+    {posts.map((post) => <BlogPost url={`/en/blog/${post.id}`} title={post.data.title} date={enDateFormat.format(post.data.date)} />)}
   </div>
 </BaseLayout>

src/pages/en/charla/[...slug].astro → src/pages/en/charla/[...id].astro

@@ -1,6 +1,6 @@
 ---
 import type { InferGetStaticPropsType, GetStaticPaths } from 'astro';
-import { getCollection } from 'astro:content';
+import { getCollection, render } from 'astro:content';
 import BaseLayout from '@layouts/BaseLayout.astro';
 import BlogTags from '@components/BlogTags.astro';
 import ResponsiveIframe from '@components/ResponsiveIframe.astro';
@@ -9,14 +9,14 @@ import { enDateFormat } from 'src/scripts/dateFormat';
 export const getStaticPaths = (async () => {
   const blogEntries = await getCollection('talk');
   return blogEntries.map(entry => ({
-    params: { slug: entry.slug }, props: { entry },
+    params: { id: entry.id }, props: { entry },
   }));
 }) satisfies GetStaticPaths
 
 type Props = InferGetStaticPropsType<typeof getStaticPaths>;
 
 const { entry } = Astro.props;
-const { Content } = await entry.render();
+const { Content } = await render(entry);
 
 ---
 <BaseLayout pageTitle={entry.data.title}>
@@ -49,6 +49,5 @@ const { Content } = await entry.render();
     <script src={`${entry.data.gist}.js`} is:inline></script>
   }
 
-<BlogTags route="/en/charla/tags/" tags={entry.data.tags} />
-
+  <BlogTags route="/en/charla/tags/" tags={entry.data.tags} />
 </BaseLayout>

src/pages/en/charla/index.astro

@@ -15,7 +15,7 @@ const pageTitle = "Talks";
     {allPosts.map((post) =>
       <BlogPost
         image={post.data.image}
-        url={`/en/charla/${post.slug}`}
+        url={`/en/charla/${post.id}`}
         title={post.data.title}
         date={enDateFormat.format(post.data.date)}
       />

src/pages/en/charla/tags/[tag].astro

@@ -1,14 +1,13 @@
 ---
-import type { InferGetStaticParamsType, InferGetStaticPropsType, GetStaticPaths } from 'astro';
 import BaseLayout from '@layouts/BaseLayout.astro';
 import BlogPost from '@components/BlogPost.astro';
 import { getCollection } from 'astro:content';
 import { enDateFormat } from 'src/scripts/dateFormat';
 import BlogTags from '@components/BlogTags.astro';
 
 export const getStaticPaths = (async () => {
-  const allPosts = (await getCollection('talk')).reverse();
-  const uniqueTags = [...new Set(allPosts.map((post) => post.data.tags).flat())];
+  const allPosts = (await getCollection('talk')).sort((a, b)=> b.id.localeCompare(a.id));
+  const uniqueTags = [...new Set(allPosts.map((post) => post.data.tags).flat())].sort((a, b)=> a.localeCompare(b));
 
   return uniqueTags.map((tag) => {
     const filteredPosts = allPosts.filter((post) => post.data.tags.includes(tag));
@@ -17,13 +16,10 @@ export const getStaticPaths = (async () => {
       props: { posts: filteredPosts, tags: uniqueTags },
     };
   });
-}) satisfies GetStaticPaths
+})
 
-type Params = InferGetStaticParamsType<typeof getStaticPaths>;
-type Props = InferGetStaticPropsType<typeof getStaticPaths>;
-
-const { tag } = Astro.params as Params;
-const { posts, tags } = Astro.props as Props;
+const { tag } = Astro.params;
+const { posts, tags } = Astro.props;
 ---
 <BaseLayout pageTitle={tag}>
   <BlogTags route="/en/charla/tags/" tags={tags} current={tag}/>
@@ -32,7 +28,7 @@ const { posts, tags } = Astro.props as Props;
     {posts.map((post) =>
       <BlogPost
         image={post.data.image}
-        url={`/en/charla/${post.slug}`}
+        url={`/en/charla/${post.id}`}
         title={post.data.title}
         date={enDateFormat.format(post.data.date)}
       />

src/pages/en/comunidad/[...slug].astro → src/pages/en/comunidad/[...id].astro

@@ -1,5 +1,5 @@
 ---
-import { getCollection } from 'astro:content';
+import { getCollection, render } from 'astro:content';
 import BaseLayout from '@layouts/BaseLayout.astro';
 import { Image } from "astro:assets";
 import Gallery from '@components/Gallery.astro';
@@ -8,19 +8,19 @@ import Gallery from '@components/Gallery.astro';
 export async function getStaticPaths() {
   const entries = await getCollection('community');
   return entries.map(entry => ({
-    params: { slug: entry.slug }, props: { entry },
+    params: { id: entry.id }, props: { entry },
   }));
 }
 // 2. For your template, you can get the entry directly from the prop
 const { entry } = Astro.props;
-const { Content } = await entry.render();
+const { Content } = await render(entry);
 
 ---
 <BaseLayout pageTitle={entry.data.title}>
   <Image src={entry.data.image} alt="featured image" />
   <dl>
     <dt>Role:</dt><dd>{entry.data.role}</dd>
-    <dt>Responsabilities:</dt><dd>{entry.data.responsibilities}</dd>
+    <dt>Responsibilities:</dt><dd>{entry.data.responsibilities}</dd>
   </dl>
   <p><em>{entry.data.excerpt}</em></p>
   <a href={entry.data.website}>Website</a>
@@ -29,3 +29,4 @@ const { Content } = await entry.render();
     <Gallery items={entry.data.gallery}/>
   }
 </BaseLayout>
+

src/pages/en/comunidad/index.astro

@@ -9,7 +9,7 @@ const pageTitle = "Community";
   <div class="post-list">
     {allPosts.map((post) =>
       <BlogPost
-        url={`/en/comunidad/${post.slug}`}
+        url={`/en/comunidad/${post.id}`}
         title={post.data.title}
       >
         <p>{post.data.role}</p>

src/pages/en/proyecto/[...slug].astro → src/pages/en/proyecto/[...id].astro

@@ -1,5 +1,5 @@
 ---
-import { getCollection } from 'astro:content';
+import { getCollection, render } from 'astro:content';
 import BaseLayout from '@layouts/BaseLayout.astro';
 import { Image } from "astro:assets";
 import Gallery from '@components/Gallery.astro';
@@ -8,12 +8,12 @@ import Gallery from '@components/Gallery.astro';
 export async function getStaticPaths() {
   const entries = await getCollection('projects');
   return entries.map(entry => ({
-    params: { slug: entry.slug }, props: { entry },
+    params: { id: entry.id }, props: { entry },
   }));
 }
 // 2. For your template, you can get the entry directly from the prop
 const { entry } = Astro.props;
-const { Content } = await entry.render();
+const { Content } = await render(entry);
 
 ---
 <BaseLayout pageTitle={entry.data.title}>

src/pages/en/proyecto/index.astro

@@ -9,7 +9,7 @@ const pageTitle = "Projects";
   <div class="post-list">
     {allPosts.map((post) =>
       <BlogPost
-        url={`/en/proyecto/${post.slug}`}
+        url={`/en/proyecto/${post.id}`}
         title={post.data.title}
       >
         <p>{post.data.role}</p>

src/pages/en/trabajo/[...slug].astro → src/pages/en/trabajo/[...id].astro

@@ -1,28 +1,28 @@
 ---
-import { getCollection } from 'astro:content';
+import { getCollection, render } from 'astro:content';
 import BaseLayout from '@layouts/BaseLayout.astro';
 import { Image } from "astro:assets";
 import Gallery from '@components/Gallery.astro';
-export const dateFormat = new Intl.DateTimeFormat("en", { month: "long", year: "numeric", timeZone: 'UTC' });
+export const dateFormat = new Intl.DateTimeFormat("es-CO", { month: "long", year: "numeric", timeZone: 'UTC' });
 
 // 1. Generate a new path for every collection entry
 export async function getStaticPaths() {
   const workEntries = await getCollection('work');
   return workEntries.map(entry => ({
-    params: { slug: entry.slug }, props: { entry },
+    params: { id: entry.id }, props: { entry },
   }));
 }
 // 2. For your template, you can get the entry directly from the prop
 const { entry } = Astro.props;
-const { Content } = await entry.render();
+const { Content } = await render(entry);
 ---
 <BaseLayout pageTitle={entry.data.title}>
   <Image src={entry.data.image} alt="featured image" />
   <dl>
     <dt>Role:</dt><dd>{entry.data.role}</dd>
     <dt>Activity:</dt><dd>{dateFormat.format(entry.data.startDate)}
     - {entry.data.endDate ? dateFormat.format(entry.data.endDate) : "today"}</dd>
-    <dt>Responsabilities:</dt><dd>{entry.data.responsibilities}</dd>
+    <dt>Responsibilities:</dt><dd>{entry.data.responsibilities}</dd>
   </dl>
   <p><em>{entry.data.excerpt}</em></p>
   <a href={entry.data.website}>Website</a>
@@ -32,3 +32,4 @@ const { Content } = await entry.render();
     <Gallery items={entry.data.gallery}/>
   }
 </BaseLayout>
+

src/pages/en/trabajo/index.astro

@@ -10,7 +10,7 @@ const pageTitle = "Work";
   <div class="post-list">
     {allPosts.map((post) =>
       <BlogPost
-        url={`/en/trabajo/${post.slug}`}
+        url={`/en/trabajo/${post.id}`}
         title={post.data.title}
         date={`${dateFormat.format(post.data.startDate)} - ${post.data.endDate ? dateFormat.format(post.data.endDate) : "today"}`}
       >