Very first version of pantosite-astro

src/components/Showcase.astro

@@ -0,0 +1,109 @@
+---
+import type { Post } from '../models/Post.ts';
+import FormattedDate from './FormattedDate.astro';
+
+const posts: Post[] = Astro.props.posts;
+const collection: string = Astro.props.collection;
+
+const color = Astro.props.color || 'var(--text)';
+---
+<section>
+    <ul>
+        {
+            posts.map((post) => (
+                <li>
+                    <a href={`/${collection}/${post.id}/`}>
+                        {
+                            post.heroImage && (
+                                <img class="heroImage" src={post.heroImage} alt="" />
+                            )
+                        }
+                        {
+                            !post.heroImage && (
+                                <div class="heroImage" />
+                            )
+                        }
+                        <h4 class="title">{post.title}</h4>
+                        <p class="date">
+                            <FormattedDate date={post.pubDate} />
+                        </p>
+                    </a>
+                </li>
+            ))
+        }
+    </ul>
+</section>
+
+<style define:vars={{ color }}>
+    main {
+        width: 100%;
+        padding: 0 20vw;
+    }
+    ul {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 2rem;
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    ul li {
+        width: calc(50% - 1rem);
+    }
+    ul li * {
+        text-decoration: none;
+        transition: 0.2s ease;
+    }
+    ul li:first-child {
+        width: 100%;
+        margin-bottom: 1rem;
+        text-align: center;
+    }
+    ul li:first-child .heroImage {
+        width: 100%;
+    }
+    ul li:first-child .title {
+        font-size: 2.369rem;
+    }
+    ul li .heroImage {
+        margin-bottom: 0.5rem;
+        border-radius: 12px;
+        height: 360px;
+        object-fit: cover;
+        background-color: var(--secondary);
+    }
+    ul li a {
+        display: block;
+    }
+    .title {
+        margin: 0;
+        color: var(--color);
+        line-height: 1;
+    }
+    .date {
+        margin: 0;
+        color: var(--color);
+    }
+    ul li a:hover h4,
+    ul li a:hover .date {
+        color: var(--accent);
+    }
+    ul a:hover .heroImage {
+        box-shadow: var(--standard-box-shadow);
+    }
+    @media (max-width: 720px) {
+        ul {
+            gap: 0.5em;
+        }
+        ul li {
+            width: 100%;
+            text-align: center;
+        }
+        ul li:first-child {
+            margin-bottom: 0;
+        }
+        ul li:first-child .title {
+            font-size: 1.563em;
+        }
+    }
+</style>