translate a better way for consuming content post

src/pages/es/index.astro

@@ -6,33 +6,39 @@ import Layout from "@/layouts/Layout.astro";
 import { sortContentByDate } from "@/utils/sorts";
 import { getCollection } from "astro:content";
 
+const pageData = {
+  title: "juancmandev",
+  description:
+    "Bienvenido a mi dominio, extraño. Soy juancmandev; Desarrollador Web, entusiasta de Linux, y defensor de la privacidad.",
+};
+
 const allPosts = await getCollection("blog", ({ data }) => data.draft !== true);
 const allEsPosts = allPosts.map((post) => {
-    const [lang, ...slug] = post.slug.split("/");
+  const [lang, ...slug] = post.slug.split("/");
 
-    if (lang === "es")
-        return {
-            ...post,
-            slug: slug.toString(),
-        };
-    else null;
+  if (lang === "es")
+    return {
+      ...post,
+      slug: slug.toString(),
+    };
+  else null;
 });
 sortContentByDate(allEsPosts);
 const last3Blogs = allEsPosts.slice(0, 3);
 
 const allProjects = await getCollection(
-    "portfolio",
-    ({ data }) => data.draft !== true,
+  "portfolio",
+  ({ data }) => data.draft !== true,
 );
 const allEnProjects = allProjects.map((project) => {
-    const [lang, ...slug] = project.slug.split("/");
+  const [lang, ...slug] = project.slug.split("/");
 
-    if (lang === "es")
-        return {
-            ...project,
-            slug: slug.toString(),
-        };
-    else null;
+  if (lang === "es")
+    return {
+      ...project,
+      slug: slug.toString(),
+    };
+  else null;
 });
 sortContentByDate(allEnProjects);
 const last3Projects = allEnProjects.slice(0, 3);
@@ -40,75 +46,68 @@ const last3Projects = allEnProjects.slice(0, 3);
 const lang = getLangFromUrl(Astro.url);
 ---
 
-<Layout
-    title="juancmandev"
-    description="Bienvenido a mi dominio, extraño. Soy juancmandev; Desarrollador Web, entusiasta de Linux, y defensor de la privacidad."
->
-    <div class="prose prose-invert">
-        <h1 class="text-primary">Bienvenido a mi dominio, extraño.</h1>
-        <p>
-            Soy <strong class="text-primary">juancmandev</strong>; <strong
-                >Desarrollador Web</strong
-            >, entusiasta de <strong>Linux</strong> y defensor de la <strong
-                >privacidad.</strong
-            >
-        </p>
-        <p>
-            Este es mi <strong>website</strong>, un pedazo de Internet al que
-            puedo llamar <strong>hogar</strong>. Aquí comparto mi pasión por
-            proyectos open source y otros temas.
-        </p>
-        <section>
-            <h2>Últimos posts</h2>
-            <ul class="mt-0 p-0 list-none">
-                {
-                    last3Blogs.map(
-                        (blogpost) =>
-                            blogpost && (
-                                <li class="p-0">
-                                    <PostItem
-                                        type="blog"
-                                        lang={lang}
-                                        slug={blogpost?.slug}
-                                        date={blogpost.data.date}
-                                        title={blogpost.data.title}
-                                    />
-                                </li>
-                            ),
-                    )
-                }
-            </ul>
-            <LinkButton
-                variant="secondary"
-                href="/blog"
-                className="no-underline">Más posts</LinkButton
-            >
-        </section>
-        <section>
-            <h2>Últimos proyectos</h2>
-            <ul class="mt-0 p-0 list-none">
-                {
-                    last3Projects.map(
-                        (project) =>
-                            project && (
-                                <li class="p-0">
-                                    <PostItem
-                                        lang={lang}
-                                        type="portfolio"
-                                        slug={project.slug}
-                                        date={project.data.date!}
-                                        title={project.data.title!}
-                                    />
-                                </li>
-                            ),
-                    )
-                }
-            </ul>
-            <LinkButton
-                variant="secondary"
-                href="/portfolio"
-                className="no-underline">More projects</LinkButton
-            >
-        </section>
-    </div>
+<Layout {...pageData}>
+  <div class="prose prose-invert">
+    <h1 class="text-primary">Bienvenido a mi dominio, extraño.</h1>
+    <p>
+      Soy <strong class="text-primary">juancmandev</strong>; <strong
+        >Desarrollador Web</strong
+      >, entusiasta de <strong>Linux</strong> y defensor de la <strong
+        >privacidad.</strong
+      >
+    </p>
+    <p>
+      Este es mi <strong>website</strong>, un pedazo de Internet al que puedo
+      llamar <strong>hogar</strong>. Aquí comparto mi pasión por proyectos open
+      source y otros temas.
+    </p>
+    <section>
+      <h2>Últimos posts</h2>
+      <ul class="mt-0 p-0 list-none">
+        {
+          last3Blogs.map(
+            (blogpost) =>
+              blogpost && (
+                <li class="p-0">
+                  <PostItem
+                    type="blog"
+                    lang={lang}
+                    slug={blogpost?.slug}
+                    date={blogpost.data.date}
+                    title={blogpost.data.title}
+                  />
+                </li>
+              ),
+          )
+        }
+      </ul>
+      <LinkButton variant="secondary" href="/blog" className="no-underline"
+        >Más posts</LinkButton
+      >
+    </section>
+    <section>
+      <h2>Últimos proyectos</h2>
+      <ul class="mt-0 p-0 list-none">
+        {
+          last3Projects.map(
+            (project) =>
+              project && (
+                <li class="p-0">
+                  <PostItem
+                    lang={lang}
+                    type="portfolio"
+                    slug={project.slug}
+                    date={project.data.date!}
+                    title={project.data.title!}
+                  />
+                </li>
+              ),
+          )
+        }
+      </ul>
+      <LinkButton variant="secondary" href="/portfolio" className="no-underline"
+        >Más proyectos</LinkButton
+      >
+    </section>
+  </div>
 </Layout>

src/pages/es/videos/[...slug].astro

@@ -4,6 +4,7 @@ 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 {
   project: CollectionEntry<"videos">;
@@ -12,7 +13,7 @@ interface Props {
 export async function getStaticPaths() {
   const allProjects = await getCollection(
     "videos",
-    ({ data }) => data.draft !== true
+    ({ data }) => data.draft !== true,
   );
 
   return allProjects.map((project) => ({
@@ -23,6 +24,8 @@ export async function getStaticPaths() {
 
 const { project } = Astro.props;
 const { Content } = await project.render();
+
+const lang = getLangFromUrl(Astro.url);
 ---
 
 <Layout title={project.data.title} description={project.data.description}>
@@ -32,7 +35,7 @@ const { Content } = await project.render();
     <hr />
     <p>
       <strong>Posted: </strong>
-      {project.data.date && formatDate(new Date(project.data.date))}
+      {project.data.date && formatDate(new Date(project.data.date), lang)}
     </p>
   </article>
 </Layout>

src/pages/es/videos/index.astro

@@ -1,5 +1,6 @@
 ---
 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";
@@ -11,9 +12,11 @@ const pageData = {
 
 const allVideos = await getCollection(
   "videos",
-  ({ data }) => data.draft !== true
+  ({ data }) => data.draft !== true,
 );
 sortContentByDate(allVideos);
+
+const lang = getLangFromUrl(Astro.url);
 ---
 
 <Layout {...pageData}>
@@ -26,6 +29,7 @@ sortContentByDate(allVideos);
       allVideos.map((video: any) => (
         <li>
           <PostItem
+            lang={lang}
             type="es/videos"
             slug={video.slug}
             date={video.data.date!}

src/pages/index.astro

@@ -6,33 +6,39 @@ import PostItem from "@/components/post-item";
 import { sortContentByDate } from "@/utils/sorts";
 import { getLangFromUrl } from "@/i18n/utils";
 
+const pageData = {
+  title: "juancmandev",
+  description:
+    "Welcome to my domain, stranger. I am juancmandev; Web Developer, Linux enthusiast, and privacy defender.",
+};
+
 const allPosts = await getCollection("blog", ({ data }) => data.draft !== true);
 const allEnPosts = allPosts.map((post) => {
-    const [lang, ...slug] = post.slug.split("/");
+  const [lang, ...slug] = post.slug.split("/");
 
-    if (lang !== "es")
-        return {
-            ...post,
-            slug: slug.toString(),
-        };
-    else null;
+  if (lang !== "es")
+    return {
+      ...post,
+      slug: slug.toString(),
+    };
+  else null;
 });
 sortContentByDate(allEnPosts);
 const last3Blogs = allEnPosts.slice(0, 3);
 
 const allProjects = await getCollection(
-    "portfolio",
-    ({ data }) => data.draft !== true,
+  "portfolio",
+  ({ data }) => data.draft !== true,
 );
 const allEnProjects = allProjects.map((project) => {
-    const [lang, ...slug] = project.slug.split("/");
+  const [lang, ...slug] = project.slug.split("/");
 
-    if (lang !== "es")
-        return {
-            ...project,
-            slug: slug.toString(),
-        };
-    else null;
+  if (lang !== "es")
+    return {
+      ...project,
+      slug: slug.toString(),
+    };
+  else null;
 });
 sortContentByDate(allEnProjects);
 const last3Projects = allEnProjects.slice(0, 3);
@@ -40,70 +46,63 @@ const last3Projects = allEnProjects.slice(0, 3);
 const lang = getLangFromUrl(Astro.url);
 ---
 
-<Layout
-    title="juancmandev"
-    description="Welcome to my domain, stranger. I am juancmandev; Web Developer, Linux enthusiast, and privacy defender."
->
-    <div class="prose prose-invert">
-        <h1 class="text-primary">Welcome to my domain, stranger.</h1>
-        <p>
-            I am <strong class="text-primary">juancmandev</strong>; <strong
-                >Web Developer</strong
-            >, <strong>Linux</strong> enthusiast, and <strong>privacy</strong> defender.
-        </p>
-        <p>
-            This is my <strong>website</strong>, a piece of the Internet that I
-            could call my <strong>home base</strong>. Here, I share my passion
-            about open source projects and other topics.
-        </p>
-        <section>
-            <h2>Latest posts</h2>
-            <ul class="mt-0 p-0 list-none">
-                {
-                    last3Blogs.map((blogpost: any) => (
-                        <li class="p-0">
-                            <PostItem
-                                type="blog"
-                                lang={lang}
-                                slug={blogpost.slug}
-                                date={blogpost.data.date!}
-                                title={blogpost.data.title!}
-                            />
-                        </li>
-                    ))
-                }
-            </ul>
-            <LinkButton
-                variant="secondary"
-                href="/blog"
-                className="no-underline">More posts</LinkButton
-            >
-        </section>
-        <section>
-            <h2>Latest projects</h2>
-            <ul class="mt-0 p-0 list-none">
-                {
-                    last3Projects.map(
-                        (project) =>
-                            project && (
-                                <li class="p-0">
-                                    <PostItem
-                                        lang={lang}
-                                        type="portfolio"
-                                        slug={project.slug}
-                                        date={project.data.date!}
-                                        title={project.data.title!}
-                                    />
-                                </li>
-                            ),
-                    )
-                }
-            </ul>
-            <LinkButton
-                variant="secondary"
-                href="/portfolio"
-                className="no-underline">More projects</LinkButton
-            >
-        </section>
-    </div>
+<Layout {...pageData}>
+  <div class="prose prose-invert">
+    <h1 class="text-primary">Welcome to my domain, stranger.</h1>
+    <p>
+      I am <strong class="text-primary">juancmandev</strong>; <strong
+        >Web Developer</strong
+      >, <strong>Linux</strong> enthusiast, and <strong>privacy</strong> defender.
+    </p>
+    <p>
+      This is my <strong>website</strong>, a piece of the Internet that I could
+      call my <strong>home base</strong>. Here, I share my passion about open
+      source projects and other topics.
+    </p>
+    <section>
+      <h2>Latest posts</h2>
+      <ul class="mt-0 p-0 list-none">
+        {
+          last3Blogs.map((blogpost: any) => (
+            <li class="p-0">
+              <PostItem
+                type="blog"
+                lang={lang}
+                slug={blogpost.slug}
+                date={blogpost.data.date!}
+                title={blogpost.data.title!}
+              />
+            </li>
+          ))
+        }
+      </ul>
+      <LinkButton variant="secondary" href="/blog" className="no-underline"
+        >More posts</LinkButton
+      >
+    </section>
+    <section>
+      <h2>Latest projects</h2>
+      <ul class="mt-0 p-0 list-none">
+        {
+          last3Projects.map(
+            (project) =>
+              project && (
+                <li class="p-0">
+                  <PostItem
+                    lang={lang}
+                    type="portfolio"
+                    slug={project.slug}
+                    date={project.data.date!}
+                    title={project.data.title!}
+                  />
+                </li>
+              ),
+          )
+        }
+      </ul>
+      <LinkButton variant="secondary" href="/portfolio" className="no-underline"
+        >More projects</LinkButton
+      >
+    </section>
+  </div>
 </Layout>

src/pages/portfolio/index.astro

@@ -6,23 +6,23 @@ import { sortContentByDate } from "@/utils/sorts";
 import { getCollection } from "astro:content";
 
 const pageData = {
-    title: "Portfolio",
-    description: "Check my projects.",
+  title: "Portfolio",
+  description: "Check my projects.",
 };
 
 const allProjects = await getCollection(
-    "portfolio",
-    ({ data }) => data.draft !== true,
+  "portfolio",
+  ({ data }) => data.draft !== true,
 );
 const allEnProjects = allProjects.map((project) => {
-    const [lang, ...slug] = project.slug.split("/");
+  const [lang, ...slug] = project.slug.split("/");
 
-    if (lang === "en")
-        return {
-            ...project,
-            slug: slug,
-        };
-    else null;
+  if (lang === "en")
+    return {
+      ...project,
+      slug: slug.toString(),
+    };
+  else null;
 });
 sortContentByDate(allEnProjects);
 
@@ -30,26 +30,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">
-        {
-            allEnProjects.map(
-                (project) =>
-                    project && (
-                        <li>
-                            <PostItem
-                                lang={lang}
-                                type="portfolio"
-                                slug={project.slug}
-                                date={project.data.date!}
-                                title={project.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">
+    {
+      allEnProjects.map(
+        (project) =>
+          project && (
+            <li>
+              <PostItem
+                lang={lang}
+                type="portfolio"
+                slug={project.slug}
+                date={project.data.date!}
+                title={project.data.title!}
+              />
+            </li>
+          ),
+      )
+    }
+  </ul>
 </Layout>