| --- |
| import type { CollectionEntry } from 'astro:content'; |
| import BaseHead from '../components/BaseHead.astro'; |
| import Footer from '../components/Footer.astro'; |
| import FormattedDate from '../components/FormattedDate.astro'; |
| |
| type Props = CollectionEntry<'post'>['data']; |
| |
| const { title, description, pubDate, updatedDate } = Astro.props; |
| --- |
| |
| <html lang="en"> |
| <head> |
| <BaseHead title={title} description={description} /> |
| </head> |
| |
| <body class="flex items-center flex-col w-full bg-mantle px-10"> |
| <nav class="bg-mantle flex flex-col items-center justify-center py-2 mb-4 group"> |
| <a href="/" class="text-text cursor-pointer group-hover:text-text group-hover:bg-surface0 rounded px-4 transition-colors"> |
| Home |
| </a> |
| <div class="bg-text h-[2px] w-0 -mt-1 rounded-full group-hover:w-10 transition-all" /> |
| </nav> |
| <main class="bg-mantle w-full lg:w-[1024px]"> |
| <article class="flex flex-col items-center"> |
| <div class="w-11/12 lg:[720px]"> |
| <div class="text-left"> |
| <h1 class="my-2 text-text">{title}</h1> |
| <div class="text-subtext0 mb-2"> |
| <FormattedDate date={pubDate} /> |
| { |
| updatedDate && ( |
| <div class="italic"> |
| Last updated on <FormattedDate date={updatedDate} /> |
| </div> |
| ) |
| } |
| </div> |
| <hr /> |
| </div> |
| <slot /> |
| </div> |
| </article> |
| </main> |
| <Footer /> |
| </body> |
| </html> |