astro-awesomeness 0.1.0

package/src/layouts/list-layout.astro

@@ -0,0 +1,37 @@
+---
+import type { Post } from "../content/index";
+
+import BaseLayout from "./base-layout.astro";
+import PostCard from "../astro/post-card.astro";
+import Pagination from "../astro/pagination.astro";
+
+type Props = {
+  title: string;
+  description: string;
+  posts: Array<{ id: string; data: Post }>;
+  page?: { currentPage: number; lastPage: number; url: { prev?: string; next?: string } };
+  urlForPage?: (page: number) => string;
+  locale?: string;
+  siteTitle?: string;
+};
+
+const { title, description, posts, page, urlForPage, locale, siteTitle } = Astro.props;
+---
+<BaseLayout title={title} description={description} siteTitle={siteTitle}>
+  <main class="mx-auto max-w-3xl px-4 py-10">
+    <header class="mb-8">
+      <h1 class="text-foreground text-3xl font-bold tracking-tight">{title}</h1>
+      <p class="text-muted-foreground mt-2">{description}</p>
+    </header>
+    <section>
+      {posts.map((post) => <PostCard post={post} locale={locale} />)}
+    </section>
+    {page && urlForPage && (
+      <Pagination
+        currentPage={page.currentPage}
+        lastPage={page.lastPage}
+        urlForPage={urlForPage}
+      />
+    )}
+  </main>
+</BaseLayout>

package/src/layouts/post-layout.astro

@@ -0,0 +1,41 @@
+---
+import type { Post } from "../content/index";
+
+import BaseLayout from "./base-layout.astro";
+import FormattedDate from "../astro/formatted-date.astro";
+import ReadingTime from "../astro/reading-time.astro";
+import TagList from "../astro/tag-list.astro";
+import Prose from "../astro/prose.astro";
+
+type Props = {
+  post: { id: string; data: Post; body?: string };
+  locale?: string;
+  siteTitle?: string;
+};
+
+const { post, locale, siteTitle } = Astro.props;
+const { title, description, pubDate, updatedDate, tags } = post.data;
+---
+<BaseLayout title={title} description={description} type="article" siteTitle={siteTitle}>
+  <article class="mx-auto max-w-3xl px-4 py-10">
+    <header class="mb-8">
+      <h1 class="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">{title}</h1>
+      <div class="text-muted-foreground mt-3 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
+        <FormattedDate date={pubDate} locale={locale} />
+        <span aria-hidden="true">·</span>
+        <ReadingTime text={post.body ?? ""} />
+        {updatedDate && (
+          <>
+            <span aria-hidden="true">·</span>
+            <span>Updated <FormattedDate date={updatedDate} locale={locale} /></span>
+          </>
+        )}
+      </div>
+      {tags.length > 0 && <TagList tags={tags} class="mt-4" />}
+    </header>
+
+    <Prose>
+      <slot />
+    </Prose>
+  </article>
+</BaseLayout>