Start implementing outreach pages

Author: u8sand

src/components/Layout.astro

@@ -37,6 +37,12 @@ import Prose from '@/components/Prose.astro'
 					href={`${import.meta.env.BASE_URL}/partnerships/`}>
 					Partnerships
 				</a>
+        <a
+					class="font-bold text-primary hover:bg-gray-100 transition p-4"
+					class:list={[Astro.url.pathname.startsWith(`${import.meta.env.BASE_URL}/outreach/`) && 'underline']}
+					href={`${import.meta.env.BASE_URL}/outreach/`}>
+					Outreach
+				</a>
         <a
 					class="font-bold text-primary hover:bg-gray-100 transition p-4"
 					class:list={[Astro.url.pathname.startsWith(`${import.meta.env.BASE_URL}/publications/`) && 'underline']}

src/layouts/Outreach.astro

@@ -1,11 +1,5 @@
 ---
 import '@/styles/base.css'
-import Layout from '@/components/Layout.astro'
-const { frontmatter } = Astro.props
 ---
 
-<Layout>
-	<div class="flex w-48 h-48 justify-center items-center"><img src={frontmatter.icon} class="max-w-48 max-h-48" /></div>
-	<h1>{frontmatter.label}</h1>
-	<slot />
-</Layout>
+<slot />

src/layouts/Outreachs.astro

@@ -0,0 +1,36 @@
+---
+import '@/styles/base.css'
+import Layout from '@/components/Layout.astro'
+const outreach = Object.values(import.meta.glob('@/pages/outreach/*.md', { eager: true })).filter(outreach => outreach.frontmatter.layout === '@/layouts/Outreach.astro')
+const dccs = Object.fromEntries(Object.values(import.meta.glob('@/pages/dccs/*.md', { eager: true })).filter(dcc => dcc.frontmatter.layout === '@/layouts/DCC.astro').map(dcc => [dcc.frontmatter.short_label, dcc]))
+---
+
+<Layout>
+	<slot/>
+	<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+		{outreach.map(event =>
+			<div class="flex flex-col justify-start items-stretch gap-2 p-8 shadow-md rounded-md">
+        <div class="flex w-24 h-24 justify-center items-center"><img src={event.frontmatter.image} class="max-w-24 max-h-24" /></div>
+        <h3>{event.frontmatter.title}</h3>
+				<div class="overflow-ellipsis text-primary">
+          <event.default />
+        </div>
+        {event.frontmatter.dcc && event.frontmatter.dcc.length > 0 &&
+          <div class="flex flex-row flex-wrap items-center">
+            <span class="font-bold text-primary">Hosted by:</span>
+            {event.frontmatter.dcc.map(dcc => dccs[dcc]).map(dcc =>
+              <a class="flex justify-center items-center p-2 hover:bg-gray-100" href={dcc.url}>
+                <div class="w-16 h-16 flex justify-center items-center">
+                  <img class="max-w-16 max-h-16" src={dcc.frontmatter.icon} alt={dcc.frontmatter.short_label} />
+                </div>
+              </a>
+            )}
+          </div>
+        }
+				<div class="flex flex-row gap-8">
+					{event.frontmatter.link && <a class="hanken-grotesk-500 text-primary hover:bg-gray-100 transition p-4" href={event.frontmatter.link} target="_blank">Visit Page</a>}
+				</div>
+			</div>
+		)}
+	</div>
+</Layout>

src/pages/outreach/index.md

@@ -0,0 +1,3 @@
+---
+layout: '@/layouts/Outreachs.astro'
+---