Render barebones blog list

src/components/BlogList.astro

@@ -0,0 +1,66 @@
+---
+import {
+  db,
+  eq,
+  Blog,
+  BlogsToCountries,
+  BlogsToLanguages,
+  Country,
+  Language,
+} from 'astro:db';
+
+import { groupBy, uniqueBy } from '../lib/collection';
+
+export type Props = { collegeId: string };
+
+const { collegeId } = Astro.props;
+
+const rows = await db
+  .select()
+  .from(Blog)
+  .where(eq(Blog.collegeId, collegeId))
+  .innerJoin(BlogsToCountries, eq(BlogsToCountries.blogId, Blog.id))
+  .innerJoin(Country, eq(BlogsToCountries.countryId, Country.code))
+  .innerJoin(BlogsToLanguages, eq(BlogsToLanguages.blogId, Blog.id))
+  .innerJoin(Language, eq(BlogsToLanguages.languageId, Language.code));
+
+const groupedRows = groupBy(rows, (row) => row.Blog.id!);
+
+const blogs = Object.values(groupedRows).map((group) => {
+  const blog = group[0]?.Blog;
+  const countries = uniqueBy(group, (row) => row.Country.code!).map(
+    (row) => row.Country.name,
+  );
+  const languages = uniqueBy(group, (row) => row.Language.code!).map(
+    (row) => row.Language.name,
+  );
+  return { ...blog, countries, languages };
+});
+
+const blogsByYear = Object.entries(
+  groupBy(blogs, (blog) => blog.year as number),
+).sort(
+  ([aYear], [bYear]) =>
+    (bYear as unknown as number) - (aYear as unknown as number),
+);
+---
+
+<ul>
+  {
+    blogsByYear.map(([year, blogs]) => (
+      <li>
+        <h2>{year}</h2>
+        <ul>
+          {blogs.map((blog) => (
+            <li>
+              <a href={blog.url}>{blog.firstName}</a>{' '}
+              {blog.countries.join(', ')}
+              {' – '}
+              {blog.languages.join(', ')}
+            </li>
+          ))}
+        </ul>
+      </li>
+    ))
+  }
+</ul>

src/lib/collection.ts

@@ -0,0 +1,32 @@
+export function groupBy<
+  Item extends Record<string, unknown>,
+  Key extends string | number | symbol,
+>(items: Item[], callbackFn: (item: Item) => Key) {
+  return items.reduce(
+    (acc, item) => {
+      const key = callbackFn(item);
+      acc[key] = acc[key] || [];
+      acc[key].push(item);
+      return acc;
+    },
+    {} as Record<Key, Item[]>,
+  );
+}
+
+export function uniqueBy<
+  Item extends Record<string, unknown>,
+  Key extends string | number | symbol,
+>(items: Item[], callbackFn: (item: Item) => Key) {
+  const keys = new Set();
+  const uniqueItems = [] as Item[];
+
+  items.forEach((item) => {
+    const key = callbackFn(item);
+    if (!keys.has(key)) {
+      uniqueItems.push(item);
+      keys.add(key);
+    }
+  });
+
+  return uniqueItems;
+}

src/pages/college/[slug].astro

@@ -0,0 +1,32 @@
+---
+import type { InferGetStaticPropsType } from 'astro';
+import { db, College } from 'astro:db';
+
+// FIXME: Replace image with college-specific one
+import image from '../../assets/aidan-meyer-129877.jpg';
+import Layout from '../../layouts/split.astro';
+import BlogList from '../../components/BlogList.astro';
+
+export async function getStaticPaths() {
+  const colleges = await db.select().from(College);
+  return colleges.map((college) => ({
+    params: { slug: college.slug },
+    props: college,
+  }));
+}
+
+export type Props = InferGetStaticPropsType<typeof getStaticPaths>;
+
+const { slug, name, description } = Astro.props;
+---
+
+<Layout
+  title={name}
+  subtitle={description}
+  image={{
+    src: image,
+    alt: 'A boy is writing into his journal on top of a mountain.',
+  }}
+>
+  <BlogList collegeId={slug} />
+</Layout>

src/pages/index.astro

@@ -1,14 +1,27 @@
 ---
-import Split from '../layouts/split.astro';
+import { db, College } from 'astro:db';
 
+import Layout from '../layouts/split.astro';
+import BlogList from '../components/BlogList.astro';
 import image from '../assets/aidan-meyer-129877.jpg';
+
+const colleges = await db.select().from(College);
 ---
 
-<Split
+<Layout
   title="UWC Blogs"
   subtitle="A collection of 477 blogs written by UWC students in 33 languages from 81 countries at the 18 United World Colleges."
   image={{
     src: image,
     alt: 'A boy is writing into his journal on top of a mountain.',
   }}
-/>
+>
+  {
+    colleges.map((college) => (
+      <div>
+        <h2>{college.name}</h2>
+        <BlogList collegeId={college.slug} />
+      </div>
+    ))
+  }
+</Layout>