M2: content collections — case studies, blog, RSS, tags, sitemap

Projects + blog as schema-validated content collections; structured case
studies (problem/design/outcome), blog with tag pages, reading time, RSS
feed (drafts excluded), sitemap, and Shiki dual-theme code highlighting.

src/components/ProjectCard.astro

@@ -1,30 +1,30 @@
 ---
-import type { Project } from "../data/projects";
+import type { CollectionEntry } from "astro:content";
 interface Props {
-  project: Project;
+  entry: CollectionEntry<"projects">;
 }
-const { project } = Astro.props;
-const href = project.hasCaseStudy ? `/projects/${project.slug}` : undefined;
-const Tag = href ? "a" : "article";
+const { entry } = Astro.props;
+const p = entry.data;
+const href = `/projects/${entry.id}`;
 ---
 
-<Tag class="project card" href={href} data-reveal>
+<a class="project card" href={href} data-reveal>
   <div class="project__top">
-    <h3 class="project__title">{project.title}</h3>
-    {href && <span class="project__arrow" aria-hidden="true">→</span>}
+    <h3 class="project__title">{p.title}</h3>
+    <span class="project__arrow" aria-hidden="true">→</span>
   </div>
 
-  <p class="project__outcome">{project.outcome}</p>
-  <p class="project__summary">{project.summary}</p>
+  <p class="project__outcome">{p.outcome}</p>
+  <p class="project__summary">{p.summary}</p>
 
   <ul class="project__stack">
-    {project.stack.map((s) => <li class="tag">{s}</li>)}
+    {p.stack.map((s) => <li class="tag">{s}</li>)}
   </ul>
 
   <p class="project__meta mono">
-    <span>{project.role}</span><span class="project__sep">·</span><span>{project.period}</span>
+    <span>{p.role}</span><span class="project__sep">·</span><span>{p.period}</span>
   </p>
-</Tag>
+</a>
 
 <style>
   .project {
@@ -81,6 +81,7 @@ const Tag = href ? "a" : "article";
     color: var(--text-faint);
     display: flex;
     gap: 0.5rem;
+    flex-wrap: wrap;
   }
   .project__sep {
     opacity: 0.6;