Merge pull request #17 from zankhq/feat/blog-paths

Refactor dynamic page paths and localize blog posts

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "astros",
 	"type": "module",
-	"version": "0.0.4",
+	"version": "1.0.0",
 	"private": true,
 	"scripts": {
 		"dev": "astro dev --host",

scripts/change-language-in-dynamic-pages.js

@@ -3,7 +3,7 @@ import path from "path";
 
 const locales = ["it"];
 const defaultLocale = "en";
-const paths = ["[...blog]/[...page]", "[...blog]/[category]/[...page]", "[...blog]/[tag]/[...page]", "[...blog]/index"];
+const paths = ["blog/[...page]", "blog/category/[category]", "blog/tag/[tag]", "blog/[slug]"];
 
 async function main() {
 	const __dirname = path.resolve();

src/components/blog/posts.astro

@@ -38,7 +38,7 @@ const { posts } = Astro.props;
 					</div>
 
 					<h3 class="mt-3 text-lg font-semibold leading-6 text-white">
-						<a href={localizePath(`/${blogPostEntry.slug}`)}>
+						<a href={`${localizePath(`blog/${blogPostEntry.slug.split("/").slice(1).join("/")}`)}`}>
 							<span class="absolute inset-0" />
 							{blogPostEntry.data.title}
 						</a>

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

@@ -9,42 +9,42 @@ import { getArticleReadingTime } from "@utils/blog";
 
 changeLanguage("en");
 
-// Generate a new path for every collection entry
+// Generate a new path for every collection post
 export async function getStaticPaths() {changeLanguage('en')
     const blogEntries = await getCollection("blog");
-    return blogEntries.map((entry) => {
-        let slug = entry.slug;
-        if (i18next.language == "en" && slug.startsWith("en/")) {
-            slug = slug.substring(3);
-        }
+    var localizedBlogEntries = blogEntries.filter((entry) => entry.slug.startsWith(i18next.language));
+    return localizedBlogEntries.map((post) => {
+        let slug = post.slug;
+        slug = slug.substring(3).replaceAll("blog/", "");
         return {
-            params: { blog: slug },
-            props: { entry, lang: i18next.language },
+            params: { slug: slug },
+            props: { post: post },
         };
     });
 }
-// Get the entry directly from the prop on render
-const { entry, lang } = Astro.props;
-const { Content } = await entry.render();
-const readTime = getArticleReadingTime(entry.body);
+// Get the post directly from the prop on render
+const { post, lang } = Astro.props;
+const { data, render } = post;
+const { Content } = await render();
+const readTime = getArticleReadingTime(post.body);
 ---
 
-<Layout title={entry.data.title} lang={lang}>
+<Layout title={post.data.title} lang={lang}>
 	<Container>
 		<div class="mx-auto prose prose-lg dark:prose-invert mt-14">
 			<a
-				href={localizePath(`/category/${entry.data.category?.toLowerCase()}`)}
+				href={localizePath(`/blog/category/${post.data.category?.toLowerCase()}`)}
 				class="text-blue-400 dark:text-stone-400 uppercase tracking-wider text-sm font-medium no-underline">
-				{entry.data.category}
+				{post.data.category}
 			</a>
 			<h1 class="text-4xl mb-3 lg:text-5xl font-bold lg:tracking-tight mt-1 lg:leading-tight dark:text-white">
-				{entry.data.title}
+				{post.data.title}
 			</h1>
 			<div class="flex gap-2 items-center">
 				<div class="w-full md:w-auto flex flex-wrap gap-3">
 					{
-						entry.data.tags.map((tag) => (
-							<a href={localizePath(`/tag/${tag}`)} class="text-sm text-gray-500 dark:text-stone-300">
+						post.data.tags.map((tag) => (
+							<a href={localizePath(`/blog/tag/${tag?.toLowerCase()}`)} class="text-sm text-gray-500 dark:text-stone-300">
 								#{tag}
 							</a>
 						))
@@ -53,15 +53,15 @@ const readTime = getArticleReadingTime(entry.body);
 			</div>
 			<div class="flex gap-2 mt-4 items-center flex-wrap md:flex-nowrap">
 				<span class="text-gray-400 dark:text-stone-400">
-					{entry.data.author}
+					{post.data.author}
 				</span>
 				<span class="text-gray-400 dark:text-stone-400">•</span>
 				<span class="text-gray-400 dark:text-stone-400">
 					{readTime} min
 				</span>
 				<span class="text-gray-400 dark:text-stone-400">•</span>
-				<time class="text-gray-400 dark:text-stone-400" datetime={entry.data.publishDate.toISOString()}>
-					{entry.data.publishDate.toDateString()}
+				<time class="text-gray-400 dark:text-stone-400" datetime={post.data.publishDate.toISOString()}>
+					{post.data.publishDate.toDateString()}
 				</time>
 			</div>
 		</div>

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

@@ -0,0 +1,47 @@
+---
+import i18next, { changeLanguage } from "i18next";
+import { getCollection } from "astro:content";
+import Layout from "@layouts/Layout.astro";
+import Container from "@components/container.astro";
+import Posts from "@components/blog/posts.astro";
+import Sectionhead from "@components/sectionhead.astro";
+import Pagination from "@components/blog/pagination.astro";
+
+changeLanguage("en");
+
+export async function getStaticPaths() {changeLanguage('en')
+    const posts = await getCollection("blog", ({ data }) => {
+        return !data.draft && data.publishDate < new Date();
+    });
+    const localizedPosts = posts.filter((page) => {
+        const [lang, ...slug] = page.slug.split("/");
+        return lang === i18next.language;
+    });
+    const categories = new Set();
+    localizedPosts.map((post) => {
+        typeof post.data.category === "string" && categories.add(post.data.category.toLowerCase());
+    });
+    return Array.from(categories).map((category) => {
+        return {
+            params: { category: category },
+            props: {
+                posts: localizedPosts.filter((post) => typeof post.data.category === "string"),
+                category: category,
+                lang: i18next.language,
+            },
+        };
+    });
+}
+// Get the post directly from the prop on render
+const { posts, category, lang } = Astro.props;
+---
+
+<Layout title="Blog">
+	<Container>
+		<Sectionhead>
+			<Fragment slot="title">#{category}</Fragment>
+			<Fragment slot="desc">We write about building startups and thoughts going on our mind.</Fragment>
+		</Sectionhead>
+		<Posts posts={posts} />
+	</Container>
+</Layout>

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

@@ -0,0 +1,47 @@
+---
+import i18next, { changeLanguage } from "i18next";
+import { getCollection } from "astro:content";
+import Layout from "@layouts/Layout.astro";
+import Container from "@components/container.astro";
+import Posts from "@components/blog/posts.astro";
+import Sectionhead from "@components/sectionhead.astro";
+import Pagination from "@components/blog/pagination.astro";
+
+changeLanguage("en");
+
+export async function getStaticPaths() {changeLanguage('en')
+    const posts = await getCollection("blog", ({ data }) => {
+        return !data.draft && data.publishDate < new Date();
+    });
+    const localizedPosts = posts.filter((page) => {
+        const [lang, ...slug] = page.slug.split("/");
+        return lang === i18next.language;
+    });
+    const tags = new Set();
+    localizedPosts.map((post) => {
+        Array.isArray(post.data.tags) && post.data.tags.map((tag) => tags.add(tag.toLowerCase()));
+    });
+    return Array.from(tags).map((tag) => {
+        return {
+            params: { tag: tag },
+            props: {
+                posts: localizedPosts.filter((post) => Array.isArray(post.data.tags) && post.data.tags.find((elem) => elem.toLowerCase() === tag)),
+                tag: tag,
+                lang: i18next.language,
+            },
+        };
+    });
+}
+// Get the post directly from the prop on render
+const { posts, tag, lang } = Astro.props;
+---
+
+<Layout title="Blog">
+	<Container>
+		<Sectionhead>
+			<Fragment slot="title">#{tag}</Fragment>
+			<Fragment slot="desc">We write about building startups and thoughts going on our mind.</Fragment>
+		</Sectionhead>
+		<Posts posts={posts} />
+	</Container>
+</Layout>