Major progress on blog page, set defaults
Change-Id: I94ac9d96ff56fdb1b795ef938e37d4e91c4c6bc2
Reviewed-on: https://git.clicks.codes/c/Coded/thecoded.prof/+/678
Tested-by: Samuel Shuert <coded@clicks.codes>
Reviewed-by: Samuel Shuert <coded@clicks.codes>
diff --git a/sites/blog/src/pages/index.astro b/sites/blog/src/pages/index.astro
index 31269ef..13b3aef 100644
--- a/sites/blog/src/pages/index.astro
+++ b/sites/blog/src/pages/index.astro
@@ -1,8 +1,13 @@
---
import BaseHead from '../components/BaseHead.astro';
-import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
+import { getCollection } from 'astro:content';
+import FormattedDate from '../components/FormattedDate.astro';
+
+const posts = (await getCollection('blog')).sort(
+ (a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
+);
---
<!doctype html>
@@ -10,41 +15,39 @@
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head>
- <body>
- <Header />
- <main>
- <h1>🧑🚀 Hello, Astronaut!</h1>
- <p>
- Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This
- template serves as a lightweight, minimally-styled starting point for anyone looking to build
- a personal website, blog, or portfolio with Astro.
- </p>
- <p>
- This template comes with a few integrations already configured in your
- <code>astro.config.mjs</code> file. You can customize your setup with
- <a href="https://astro.build/integrations">Astro Integrations</a> to add tools like Tailwind,
- React, or Vue to your project.
- </p>
- <p>Here are a few ideas on how to get started with the template:</p>
- <ul>
- <li>Edit this page in <code>src/pages/index.astro</code></li>
- <li>Edit the site header items in <code>src/components/Header.astro</code></li>
- <li>Add your name to the footer in <code>src/components/Footer.astro</code></li>
- <li>Check out the included blog posts in <code>src/content/blog/</code></li>
- <li>Customize the blog post page layout in <code>src/layouts/BlogPost.astro</code></li>
- </ul>
- <p>
- Have fun! If you get stuck, remember to <a href="https://docs.astro.build/"
- >read the docs
- </a> or <a href="https://astro.build/chat">join us on Discord</a> to ask questions.
- </p>
- <p>
- Looking for a blog template with a bit more personality? Check out <a
- href="https://github.com/Charca/astro-blog-template"
- >astro-blog-template
- </a> by <a href="https://twitter.com/Charca">Maxi Ferreira</a>.
- </p>
- </main>
+ <body class="bg-mantle px-72 min-h-dvh flex flex-col max-md:px-4 transition-all">
+ <div class="w-full min-h-[90vh]">
+ <nav class="bg-mantle flex justify-center py-2 h-12">
+ <div class="flex flex-col items-center group">
+ <a href="/" class="text-text cursor-pointer hover:bg-surface0 rounded px-4 transition-colors">
+ Home
+ </a>
+ <div class="bg-text h-[2px] w-8 -mt-1 rounded-full group-hover:w-10 transition-all" />
+ </div>
+ </nav>
+ <main class="w-full bg-mantle mt-6 h-full">
+ <section id="posts" class="flex justify-center rounded-2xl min-h-full">
+ <div class="flex flex-wrap gap-4 m-0 p-0 w-full min-h-full">
+ {
+ posts.map((post) => (
+ <a href={`/blog/${post.slug}/`} class="
+ min-w-72
+ w-[calc(25%-0.75rem)] text-lg bg-base p-4 rounded-2xl
+ first:w-[calc(50%-0.5rem)] first:text-center first:text-2xl
+ first:max-md:text-lg first:max-md:text-left first:max-md:w-full first:max-md:h-auto
+ hover:bg-surface0 hover:-translate-y-2 transition-all
+ max-md:w-full">
+ <h4 class="text-text">{post.data.title}</h4>
+ <p class="text-subtext0">
+ <FormattedDate date={post.data.pubDate} />
+ </p>
+ </a>
+ ))
+ }
+ </div>
+ </section>
+ </main>
+ </div>
<Footer />
</body>
</html>