reestructure content lang

src/pages/blog/[...slug].astro

@@ -4,35 +4,48 @@ 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">;
+    post: CollectionEntry<"blog">;
 }
 
 export async function getStaticPaths() {
-  const allBlogPosts = await getCollection(
-    "blog",
-    ({ data }) => data.draft !== true
-  );
+    const allBlogPosts = await getCollection(
+        "blog",
+        ({ data }) => data.draft !== true,
+    );
+    const filterEnPosts = allBlogPosts.map((post) => {
+        const [lang, ...slug] = post.slug.split("/");
 
-  return allBlogPosts.map((post) => ({
-    params: { slug: post.slug },
-    props: { post },
-  }));
+        if (lang === "en")
+            return {
+                ...post,
+                slug: slug.toString(),
+            };
+        else null;
+    });
+
+    return filterEnPosts.map((post) => ({
+        params: { slug: post?.slug },
+        props: { post },
+    }));
 }
 
 const { post } = Astro.props;
 const { Content } = await post.render();
+
+const lang = getLangFromUrl(Astro.url);
 ---
 
 <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))}
-    </p>
-  </article>
+    <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>

src/pages/blog/index.astro

@@ -1,35 +1,52 @@
 ---
 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);
-sortContentByDate(allPosts);
+const filterEnPosts = allPosts.map((post) => {
+    const [lang, ...slug] = post.slug.split("/");
+
+    if (lang === "en")
+        return {
+            ...post,
+            slug: slug.toString(),
+        };
+    else null;
+});
+sortContentByDate(filterEnPosts);
+
+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">
-    {
-      allPosts.map((blogpost: any) => (
-        <li>
-          <PostItem
-            type="blog"
-            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}
+                                slug={blogpost.slug}
+                                date={blogpost.data.date!}
+                                title={blogpost.data.title!}
+                            />
+                        </li>
+                    ),
+            )
+        }
+    </ul>
 </Layout>