Basic post tagging system

Can get posts with some tags, but only using HTTP/S address.
Fixed SinglePostCard URL to work from anywhere
TODO: Add intelligent post filter
TODO: 404 Page

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

@@ -1,5 +1,4 @@
 ---
-import { LANGUAGES } from "../../../i18n/utils";
 import { getBlogPosts } from "../../../content/config";
 import BlogPost from "../../../layouts/BlogPost.astro";
 

src/pages/[lang]/blog/index.astro

@@ -3,16 +3,11 @@ import MainLayout from "../../../layouts/MainLayout.astro";
 import { getBlogPosts } from "../../../content/config";
 //@ts-ignore
 import { dictionary } from "../../../i18n/dictionary";
-import SinglePage from "../../../layouts/SinglePage.astro";
+import SinglePageBlogMode from "../../../layouts/SinglePageBlogMode.astro";
+import PostsList from "../../../components/PostsList.astro";
+
 const { title, description } = dictionary[Astro.currentLocale];
 
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "../../../components/ui/card";
 
 export async function getStaticPaths() {
   return ["en", "fr", "cs", "de"].map((lang) => {
@@ -26,29 +21,8 @@ var filtered_posts = posts.filter(
 ---
 
 <MainLayout title={title} description={description} lang={Astro.currentLocale}>
-  <SinglePage>
-    <div class="grid lg:flex gap-2">
-      {
-        filtered_posts.map((post) => (
-          <div>
-            <a href={post.blog_slug}>
-              <Card>
-                <CardHeader>
-                  <img src={post.data.image.url} alt={post.data.image.alt} class="rounded-md">
-                  <span class="py-2"/>
-                  <CardTitle>{post.data.title}</CardTitle>
-                  <CardDescription>
-                    <p>{post.data.author} • {post.data.publishDate.toLocaleString(Astro.currentLocale)}</p>
-                  </CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <p>{post.data.description}</p>
-                </CardContent>
-              </Card>
-            </a>
-          </div>
-        ))
-      }
+  <SinglePageBlogMode>
+    <PostsList filteredPosts={filtered_posts} />
     </div>
-  </SinglePage>
+  </SinglePageBlogMode>
 </MainLayout>

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

@@ -0,0 +1,36 @@
+---
+import MainLayout from "../../../../layouts/MainLayout.astro";
+import SinglePageBlogMode from "../../../../layouts/SinglePageBlogMode.astro";
+import { LANGUAGES } from "../../../../i18n/utils";
+import { getBlogPosts } from "../../../../content/config";
+import PostsList from "../../../../components/PostsList.astro";
+
+export async function getStaticPaths() {
+  const allPosts = await getBlogPosts();
+  const tags = ["test", "astro", "javascript"];
+
+  var paths = [];
+
+  tags.map((tag) => {
+    Object.keys(LANGUAGES).map((lang) => {
+      paths.push({
+        params: { lang: lang, tag: tag },
+        props: { posts: allPosts },
+      });
+    });
+  });
+
+  return paths;
+}
+
+const { lang, tag } = Astro.params;
+const { posts } = Astro.props;
+
+const filteredPosts = posts.filter((post) => post.data.tags?.includes(tag) && post.data.language == Astro.currentLocale);
+---
+
+<MainLayout title={tag} description={"desc"} lang={lang}>
+  <SinglePageBlogMode>
+    <PostsList filteredPosts={filteredPosts} />
+  </SinglePageBlogMode>
+</MainLayout>