use the reusable CofestProject card component in the blog post

Author: ahmedhamidawan

astro/src/build/normalize-content.mjs

@@ -456,6 +456,7 @@ const KNOWN_COMPONENTS = [
   'ReleaseGuardiansLabelPill',
   'ReleaseGuardiansCoordination',
   'CofestBoard',
+  'CofestProject',
 ];
 
 function bodyHasComponents(body) {

astro/src/components/CofestProject.vue

@@ -5,11 +5,14 @@ import { Badge } from '@/components/ui/badge';
 
 defineProps<{
   project: Project;
+  standalone?: boolean;
+  postEvent?: boolean;
+  hasOutcomes?: boolean;
 }>();
 </script>
 
 <template>
-  <Card class="gx-tile h-full border-galaxy-primary/10 py-0 gap-0">
+  <Card :class="['gx-tile border-galaxy-primary/10 py-0 gap-0', { 'h-full': !standalone }]">
     <CardHeader class="pt-4 pb-1">
       <CardTitle class="m-0 text-galaxy-dark text-base leading-tight">{{ project.project }}</CardTitle>
     </CardHeader>
@@ -19,15 +22,19 @@ defineProps<{
         <span class="text-galaxy-grey">Lead: </span>
         <span class="font-semibold text-galaxy-primary">{{ project.lead }}</span>
       </div>
-      <div class="team-section">
-        <span class="team-label">TEAM</span>
+      <div v-if="project.assignees.length > 0 || !postEvent" class="team-section">
+        <span class="section-label">TEAM</span>
         <div v-if="project.assignees.length > 0" class="flex flex-wrap gap-1.5">
           <Badge v-for="name in project.assignees" :key="name" variant="default" class="text-xs font-normal">
             {{ name }}
           </Badge>
         </div>
         <p v-else class="text-xs text-galaxy-primary italic">✨ Open spot — come join this project!</p>
       </div>
+      <div v-if="postEvent && hasOutcomes" class="outcomes-section">
+        <span class="section-label">OUTCOMES</span>
+        <slot />
+      </div>
     </CardContent>
   </Card>
 </template>
@@ -42,10 +49,20 @@ defineProps<{
   gap: 0.35rem;
 }
 
-.team-label {
+.section-label {
   font-size: 0.7rem;
   font-weight: 700;
   letter-spacing: 0.08em;
   color: var(--color-galaxy-grey, #6b7280);
 }
+
+.outcomes-section {
+  padding-top: 0.45rem;
+  border-top: 1px solid color-mix(in srgb, var(--color-galaxy-primary, #25537b) 12%, transparent);
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  font-size: 0.875rem;
+  line-height: 1.6;
+}
 </style>

astro/src/components/mdx/CofestProject.astro

@@ -0,0 +1,28 @@
+---
+import CofestProject from '@/components/CofestProject.vue';
+
+interface Props {
+  name: string;
+  description?: string;
+  lead?: string;
+  assignees?: string;
+}
+
+const { name, description = '', lead = '', assignees = '' } = Astro.props;
+
+const project = {
+  project: name,
+  description,
+  lead,
+  assignees: assignees
+    ? assignees
+        .split(',')
+        .map((s) => s.trim())
+        .filter(Boolean)
+    : [],
+};
+---
+
+<CofestProject project={project} standalone postEvent hasOutcomes={Astro.slots.has('default')} client:load>
+  <slot />
+</CofestProject>

astro/src/pages/news/[...slug].astro

@@ -16,6 +16,7 @@ import Supporters from '../../components/mdx/Supporters.astro';
 import Contacts from '../../components/mdx/Contacts.astro';
 import Icon from '../../components/mdx/Icon.astro';
 import Insert from '../../components/mdx/Insert.astro';
+import CofestProject from '../../components/mdx/CofestProject.astro';
 import { resolveSupporters } from '../../utils/supporters';
 import { extractAuthors, extractFunding, resolveAuthor } from '../../utils/contributors';
 
@@ -62,6 +63,7 @@ const components = {
   Contacts,
   Icon,
   Insert,
+  CofestProject,
 };
 
 // Schema.org structured data