| --- |
| import BaseHead from '../components/BaseHead.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('post') |
| |
| const pinnedPosts = posts.filter(p => p.data.pinned); |
| const otherPosts = posts.filter(p => !(p.data.pinned || false)) |
| |
| --- |
| |
| <!doctype html> |
| <html lang="en"> |
| <head> |
| <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> |
| </head> |
| <body class="bg-mantle min-h-screen flex flex-col items-center"> |
| <div class="flex justify-center w-full flex-col gap-2 md:min-w-[768px] px-4 md:max-w-screen-lg"> |
| <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 min-h-[84vh]"> |
| <section id="posts"> |
| <div class="flex flex-wrap gap-4 justify-center mb-10"> |
| { |
| pinnedPosts.length > 0 ? pinnedPosts.map((post) => ( |
| <a href={`/post/${post.slug}/`} class=" |
| h-32 text-base bg-base p-4 rounded-2xl flex flex-col flex-grow border border-blue |
| hover:bg-surface0 hover:-translate-y-2 transition-all"> |
| <h4 class="text-text w-full text-ellipsis">{post.data.title}</h4> |
| <div class="text-subtext0 flex"> |
| <p title="Pinned">📌 </p> |
| <FormattedDate date={post.data.pubDate} /> |
| </div> |
| </a> |
| )) : null |
| } |
| </div> |
| <div class="flex flex-wrap gap-4 justify-center"> |
| { |
| otherPosts.length > 0 ? otherPosts.map((post, idx) => ( |
| <a href={`/post/${post.slug}/`} class=" |
| h-32 text-base bg-base p-4 rounded-2xl flex flex-col flex-grow |
| first:text-center first:text-xl first:border-yellow first:border first:box-border |
| first:max-md:text-left first:max-md:w-full |
| hover:bg-surface0 hover:-translate-y-2 transition-all |
| max-md:w-full"> |
| <h4 class="text-text w-full text-ellipsis">{post.data.title}</h4> |
| <div class="text-subtext0 flex"> |
| { idx === 0 ? <p title="Latest">✨ </p> : null } |
| <FormattedDate date={post.data.pubDate} /> |
| </div> |
| </a> |
| )) : null |
| } |
| </div> |
| <div class="flex justify-center h-40"> |
| { |
| posts.length === 0 ? |
| <div class="border border-dashed border-surface0 rounded-xl flex justify-center items-center w-1/2"> |
| No Posts Yet |
| </div> : |
| null |
| } |
| </div> |
| </section> |
| </main> |
| </div> |
| <Footer /> |
| </body> |
| </html> |