feat: some shit

src/pages/blog/index.astro

@@ -2,6 +2,8 @@
 import { getCollection } from "astro:content";
 const pages = await getCollection("blog");
 import Layout from "@layouts/Layout.astro";
+import HeroCard from "@components/HeroCard.astro";
+import SmallCard from "@components/SmallCard.astro";
 
 import { getLocale } from "astro-i18n-aut";
 import { filterCollection } from "@i18n/utils";
@@ -9,17 +11,29 @@ import { filterCollection } from "@i18n/utils";
 const locale = getLocale(Astro.url);
 
 const posts = filterCollection(pages, locale);
+
+const featuredPosts = await Promise.all(
+  posts.slice(0, 3).map(async (post) => {
+    if (!post.data.headerImg) {
+      return post;
+    }
+    const { default: image } = await import(
+      `../../content/blog/${post.slug.split("/")[0]}/${post.data.headerImg}`
+    );
+    return {
+      ...post,
+      image,
+    };
+  }),
+);
+
+const otherPosts = posts.slice(3);
 ---
 
 <Layout title="Dude">
-  <hr />
-  {
-    posts.map((post) => (
-      <>
-        <a href={"blog/" + post.slug.split("/")[0]}>{post.data.title}</a>
-        <br />
-      </>
-    ))
-  }
-  <hr />
+  {featuredPosts.map((post) => <HeroCard post={post} />)}
+
+  <div class="grid grid-cols-2 gap-4 mt-4">
+    {otherPosts.map((post) => <SmallCard post={post} />)}
+  </div>
 </Layout>

src/pages/index.astro

@@ -1,54 +1,71 @@
 ---
 import Layout from "@layouts/Layout.astro";
 import Max from "@components/Max.astro";
-import { Card } from "@components/card";
 import { getCollection } from "astro:content";
-import { filterCollection, useTranslatedPath } from "@i18n/utils";
-import markdownToText from "@helpers/markdownToText";
+import {
+  filterCollection,
+  useTranslatedPath,
+  useTranslations,
+} from "@i18n/utils";
 import { getLocale } from "astro-i18n-aut";
+import HeroCard from "@components/HeroCard.astro";
+import SmallCard from "@components/SmallCard.astro";
+import LinkCard from "@components/LinkCard.astro";
+import ArrowA from "@components/arrows/ArrowA.astro";
+import ArrowB from "@components/arrows/ArrowB.astro";
 
 const projects = filterCollection(
   await getCollection("projects"),
   getLocale(Astro.url),
 );
 
-const translatePath = useTranslatedPath(Astro);
-
-const locale = getLocale(Astro.url);
-
-const projectSlides = await Promise.all(
-  projects.map(async (project) => ({
-    title: project.data.title,
-    description: markdownToText(project.body),
-    image: project.data.headerImg,
-    link: translatePath(project.slug),
-  })),
-);
+const t = useTranslations(Astro);
+const tp = useTranslatedPath(Astro);
 
 const featuredProject = projects.find((project) => project.data?.featured);
+const otherProjects = projects
+  .filter((project) => featuredProject !== project)
+  .sort((a) => (a?.data?.icon ? -1 : 1))
+  .slice(0, 3);
+
+const posts = filterCollection(
+  await getCollection("blog"),
+  getLocale(Astro.url),
+);
+
+const featuredPost = posts.find((post) => post.data?.featured);
+const otherPosts = posts.filter((post) => featuredPost !== post).slice(0, 3);
 ---
 
 <Layout title="Max Richter">
   <Max />
-  {
-    featuredProject && (
-      <Card classes="flex overflow-hidden gradient border-1 border-light">
-        <Card.Content classes="p-8">
-          <Card.Title>{featuredProject.data.title}</Card.Title>
-          <Card.Description>
-            {markdownToText(featuredProject.body).slice(0, 200)}
-          </Card.Description>
-          <Card.ReadMoreButton
-            link={translatePath(
-              `/projects/${featuredProject.slug.split("/")[0]}`,
-            )}
-          />
-        </Card.Content>
-        <Card.Image
-          src={featuredProject.data.headerImg}
-          alt={featuredProject.data.title}
-        />
-      </Card>
-    )
-  }
+  <section class="relative my-8">
+    <span class="i-tabler-circle-arrow-right-thin"></span>
+    <ArrowA />
+    {featuredProject && <HeroCard post={featuredProject} />}
+    <div class="grid grid-cols-2 gap-4 mt-4">
+      {
+        otherProjects.length > 0 &&
+          otherProjects.map((project) => <SmallCard post={project} />)
+      }
+      <LinkCard
+        link={tp("/projects")}
+        title={t("more-projects")}
+        icon="circle-arrow-right"
+      />
+    </div>
+  </section>
+
+  <section class="relative my-8">
+    {featuredPost && <HeroCard post={featuredPost} />}
+
+    <ArrowB />
+    <div class="grid grid-cols-2 gap-4 mt-4">
+      {
+        otherPosts.length > 0 &&
+          otherPosts.map((post) => <SmallCard post={post} />)
+      }
+      <LinkCard link={tp("/blog")} title={t("more-posts")} />
+    </div>
+  </section>
 </Layout>

src/pages/photos/index.astro

@@ -3,6 +3,7 @@ import { getCollection } from "astro:content";
 import Layout from "@layouts/Layout.astro";
 import { getLocale } from "astro-i18n-aut";
 import { filterCollection } from "@i18n/utils";
+import HeroCard from "@components/HeroCard.astro";
 
 const locale = getLocale(Astro.url);
 const pages = await getCollection("photos");
@@ -10,16 +11,5 @@ const posts = filterCollection(pages, locale);
 ---
 
 <Layout title="Dude">
-  <hr />
-  {
-    posts.map((post) => (
-      <>
-        <>
-          <a href={"photos/" + post.slug.split("/")[0]}>{post.data.title}</a>
-          <br />
-        </>
-      </>
-    ))
-  }
-  <hr />
+  {posts.map((post) => <HeroCard post={post} />)}
 </Layout>

src/pages/projects/index.astro

@@ -3,6 +3,7 @@ import { getCollection } from "astro:content";
 import Layout from "@layouts/Layout.astro";
 import { getLocale } from "astro-i18n-aut";
 import { filterCollection } from "@i18n/utils";
+import HeroCard from "@components/HeroCard.astro";
 
 const locale = getLocale(Astro.url);
 const pages = await getCollection("projects");
@@ -10,16 +11,5 @@ const posts = filterCollection(pages, locale);
 ---
 
 <Layout title="Dude">
-  <hr />
-  {
-    posts.map((post) => (
-      <>
-        <>
-          <a href={"projects/" + post.slug.split("/")[0]}>{post.data.title}</a>
-          <br />
-        </>
-      </>
-    ))
-  }
-  <hr />
+  {posts.map((post) => <HeroCard post={post} />)}
 </Layout>