[codex] Add open source projects page

public/sitemap.xml

@@ -9,6 +9,9 @@
   <url>
     <loc>https://508.dev/portfolio</loc>
   </url>
+  <url>
+    <loc>https://508.dev/open-source</loc>
+  </url>
   <url>
     <loc>https://508.dev/members</loc>
   </url>

src/components/Header.astro

@@ -74,6 +74,10 @@ const routes: Route[] = [
     name: "Portfolio",
     route: "/portfolio",
   },
+  {
+    name: "Open Source",
+    route: "/open-source",
+  },
   {
     name: "Blog",
     route: "https://blog.508.dev",

src/pages/open-source.astro

@@ -0,0 +1,377 @@
+---
+import Layout from "../layouts/Layout.astro";
+
+type Project = {
+  name: string;
+  description: string;
+  repo: string;
+  tags: string[];
+  featured?: boolean;
+  url?: string;
+  note?: string;
+  screenshot?: string;
+};
+
+const projects: Project[] = [
+  {
+    name: "508-devkit",
+    description: "Sane conventions for new coding projects.",
+    repo: "https://github.com/508-dev/508-devkit",
+    tags: ["Project conventions"],
+    featured: true,
+  },
+  {
+    name: "interview-as-a-service",
+    description: "Technical interviews with 508 members.",
+    repo: "https://github.com/508-dev/interview-as-a-service",
+    tags: ["Django", "HTMX"],
+    featured: true,
+    url: "https://interviews.508.dev",
+    screenshot: "/open-source/interview-as-a-service.png",
+  },
+  {
+    name: "favorite-places",
+    description: "Convert public Google Places Lists into a beautiful viewer.",
+    repo: "https://github.com/508-dev/favorite-places",
+    tags: ["Astro", "CSS", "TypeScript", "Python"],
+    featured: true,
+    url: "https://favorites.demflyers.com",
+    note: "Powers DEM Flyers Favorites and other public list viewers.",
+    screenshot: "/open-source/favorite-places.png",
+  },
+  {
+    name: "gmaps-scraper",
+    description:
+      "A scraper for Google Places Lists and Maps Places. Powers Favorite Places.",
+    repo: "https://github.com/508-dev/gmaps-scraper",
+    tags: ["Python"],
+    featured: true,
+  },
+  {
+    name: "house-calendar",
+    description: "Show room availability from an ICS link.",
+    repo: "https://github.com/508-dev/house-calendar",
+    tags: ["TypeScript", "React", "TanStack Start", "Drizzle", "Postgres"],
+    featured: true,
+    screenshot: "/open-source/house-calendar.png",
+  },
+  {
+    name: "media-crm",
+    description:
+      "CRM to track media consumption across TV shows, movies, books, and more.",
+    repo: "https://github.com/508-dev/media-crm",
+    tags: [
+      "TypeScript",
+      "tRPC",
+      "React",
+      "Node",
+      "Express",
+      "Drizzle",
+      "Zod",
+      "pnpm",
+    ],
+    url: "https://mediacrm.508.dev",
+    note: "Temporarily deployed on Caleb's homelab.",
+  },
+  {
+    name: "friend-library",
+    description: "App to borrow things from friends.",
+    repo: "https://github.com/508-dev/friend-library",
+    tags: ["Django", "HTMX"],
+    url: "https://stuff4friends.508.dev",
+  },
+  {
+    name: "running-calorie-average",
+    description: "Simple calorie averages webapp.",
+    repo: "https://github.com/508-dev/running-calorie-average",
+    tags: ["TypeScript", "Svelte", "SvelteKit", "HTML", "CSS"],
+    url: "https://calories.508.dev",
+  },
+  {
+    name: "english-vehicles-tw",
+    description:
+      "Static site for an English-language vehicle service in Taiwan.",
+    repo: "https://github.com/508-dev/english-vehicles-tw",
+    tags: ["TypeScript", "Astro", "CSS"],
+    url: "https://englishvehicles.tw",
+  },
+  {
+    name: "game-remix-guesser-backend",
+    description: "Backend for the guessagame game.",
+    repo: "https://github.com/508-dev/game-remix-guesser-backend",
+    tags: ["Python", "PostgreSQL", "FastAPI", "SQLAlchemy", "Docker"],
+  },
+  {
+    name: "game-remix-guesser-frontend",
+    description: "Frontend SPA for the guessagame game.",
+    repo: "https://github.com/508-dev/game-remix-guesser-frontend",
+    tags: ["TypeScript", "Vue", "CSS"],
+    url: "https://guessagame.508.dev",
+  },
+  {
+    name: "quick-taiwan-conversions",
+    description: "Useful conversions for living in Taiwan.",
+    repo: "https://github.com/508-dev/quick-taiwan-conversions",
+    tags: ["TypeScript", "Vue"],
+  },
+  {
+    name: "travel-cards",
+    description:
+      "SPA to generate business cards with allergy info and other travel details.",
+    repo: "https://github.com/508-dev/travel-cards",
+    tags: ["TypeScript", "Svelte", "HTML", "CSS"],
+    url: "https://travelcards.508.dev",
+  },
+];
+
+const featuredProjects = projects.filter((project) => project.featured);
+const otherProjects = projects.filter((project) => !project.featured);
+const githubOrgUrl = "https://github.com/508-dev";
+
+const openSourceStructuredData = {
+  "@context": "https://schema.org",
+  "@type": "CollectionPage",
+  name: "508.dev Open Source",
+  url: "https://508.dev/open-source",
+  description:
+    "Open source projects from 508.dev, including coding project conventions, interview tools, Google Places utilities, internal tools, and public web apps.",
+  mainEntity: {
+    "@type": "ItemList",
+    itemListElement: projects.map((project, index) => ({
+      "@type": "ListItem",
+      position: index + 1,
+      url: project.repo,
+      name: project.name,
+      description: project.description,
+    })),
+  },
+};
+---
+
+<Layout
+  title="Open Source Projects | 508.dev"
+  description="Explore open source projects from 508.dev, including developer tooling, interview software, Google Places utilities, and public web apps."
+  image="/computer.jpg"
+  structuredData={openSourceStructuredData}
+  data-theme="light"
+>
+  <main class="bg-white">
+    <section class="border-b border-gray-200 bg-slate-950 text-white">
+      <div
+        class="mx-auto grid max-w-7xl grid-cols-1 gap-10 px-6 py-20 sm:py-24 lg:grid-cols-[1fr_26rem] lg:px-8"
+      >
+        <div class="min-w-0 max-w-3xl">
+          <p class="text-sm font-semibold uppercase text-cyan-300">
+            508.dev on GitHub
+          </p>
+          <h1 class="mt-5 break-words text-3xl font-bold sm:text-6xl">
+            Open source from the 508 workshop
+          </h1>
+          <p
+            class="mt-6 max-w-2xl break-words text-lg leading-8 text-slate-300"
+          >
+            Projects we use to codify how we work, publish what we learn, and
+            ship useful tools for members, friends, and public communities.
+          </p>
+          <div class="mt-10 flex flex-col gap-3 sm:flex-row">
+            <a
+              href={githubOrgUrl}
+              class="inline-flex w-full items-center justify-center rounded-md bg-cyan-500 px-4 py-2.5 text-sm font-semibold text-slate-950 shadow-sm hover:bg-cyan-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-300 sm:w-auto"
+            >
+              View GitHub org
+              <svg
+                class="ml-2 h-4 w-4"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M5 10a.75.75 0 0 1 .75-.75h6.69L10.22 7.03a.75.75 0 0 1 1.06-1.06l3.5 3.5a.75.75 0 0 1 0 1.06l-3.5 3.5a.75.75 0 1 1-1.06-1.06l2.22-2.22H5.75A.75.75 0 0 1 5 10Z"
+                  clip-rule="evenodd"></path>
+              </svg>
+            </a>
+            <a
+              href="#featured"
+              class="inline-flex w-full items-center justify-center rounded-md border border-white/20 px-4 py-2.5 text-sm font-semibold text-white hover:bg-white/10 sm:w-auto"
+            >
+              Browse featured projects
+            </a>
+          </div>
+        </div>
+
+        <div
+          class="min-w-0 self-end rounded-lg border border-white/10 bg-white/5 p-5 shadow-2xl"
+        >
+          <div class="flex items-center gap-2 border-b border-white/10 pb-4">
+            <span class="h-3 w-3 rounded-full bg-red-400"></span>
+            <span class="h-3 w-3 rounded-full bg-amber-300"></span>
+            <span class="h-3 w-3 rounded-full bg-emerald-400"></span>
+          </div>
+          <div
+            class="mt-5 space-y-4 break-words font-mono text-sm leading-6 text-slate-300"
+          >
+            <p><span class="text-cyan-300">$</span> gh repo list 508-dev</p>
+            <p class="text-white">{projects.length} public projects</p>
+            <p>
+              <span class="text-cyan-300">{featuredProjects.length}</span>
+              highlighted for conventions, interviews, writing, and reusable utilities
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section id="featured" class="py-20 sm:py-24">
+      <div class="mx-auto max-w-7xl px-6 lg:px-8">
+        <div class="max-w-3xl">
+          <p class="text-sm font-semibold uppercase text-cyan-700">Featured</p>
+          <h2
+            class="mt-3 break-words text-3xl font-bold text-gray-900 sm:text-4xl"
+          >
+            Projects we care about most
+          </h2>
+          <p class="mt-5 text-base leading-7 text-gray-600">
+            These are the projects most central to how 508 works in public:
+            project setup, interviews, publishing, local communities, and
+            reusable infrastructure for small web tools.
+          </p>
+        </div>
+
+        <div class="mt-12 grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3">
+          {
+            featuredProjects.map((project) => (
+              <article class="flex min-h-full flex-col overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:border-cyan-300 hover:shadow-md">
+                {project.screenshot && (
+                  <div class="border-b border-gray-200 bg-slate-100">
+                    <img
+                      src={project.screenshot}
+                      alt={`${project.name} screenshot`}
+                      loading="lazy"
+                      class="aspect-[16/9] w-full object-cover object-top"
+                    />
+                  </div>
+                )}
+                <div class="flex flex-1 flex-col p-6">
+                  <div class="flex items-start justify-between gap-4">
+                    <h3 class="break-words text-xl font-bold text-gray-900">
+                      {project.name}
+                    </h3>
+                    <span class="shrink-0 rounded-full bg-cyan-50 px-2.5 py-1 text-xs font-semibold text-cyan-700 ring-1 ring-inset ring-cyan-200">
+                      Featured
+                    </span>
+                  </div>
+                  <p class="mt-4 flex-1 text-sm leading-6 text-gray-600">
+                    {project.description}
+                  </p>
+                  {project.note && (
+                    <p class="mt-4 rounded-md bg-slate-50 px-3 py-2 text-sm leading-6 text-slate-700">
+                      {project.note}
+                    </p>
+                  )}
+                  <div class="mt-5 flex flex-wrap gap-2">
+                    {project.tags.map((tag) => (
+                      <span class="rounded-md bg-gray-100 px-2.5 py-1 text-xs font-medium text-gray-700">
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                  <div class="mt-6 flex flex-wrap items-center gap-4 text-sm font-semibold">
+                    <a
+                      href={project.repo}
+                      class="text-cyan-700 hover:text-cyan-600"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      Source
+                      <span aria-hidden="true"> -&gt;</span>
+                    </a>
+                    {project.url && (
+                      <a
+                        href={project.url}
+                        class="text-gray-900 hover:text-cyan-700"
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        Live site
+                        <span aria-hidden="true"> -&gt;</span>
+                      </a>
+                    )}
+                  </div>
+                </div>
+              </article>
+            ))
+          }
+        </div>
+      </div>
+    </section>
+
+    <section class="border-t border-gray-200 bg-slate-50 py-20 sm:py-24">
+      <div class="mx-auto max-w-7xl px-6 lg:px-8">
+        <div class="grid grid-cols-1 gap-10 lg:grid-cols-[20rem_1fr]">
+          <div>
+            <p class="text-sm font-semibold uppercase text-cyan-700">
+              More projects
+            </p>
+            <h2 class="mt-3 break-words text-3xl font-bold text-gray-900">
+              Useful apps, experiments, and member tools
+            </h2>
+            <p class="mt-5 text-base leading-7 text-gray-600">
+              Smaller public projects that solve practical problems: lending,
+              media tracking, travel, Taiwan utilities, and games.
+            </p>
+          </div>
+
+          <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            {
+              otherProjects.map((project) => (
+                <article class="rounded-lg border border-gray-200 bg-white p-5 shadow-sm">
+                  <h3 class="break-words text-lg font-bold text-gray-900">
+                    {project.name}
+                  </h3>
+                  <p class="mt-3 text-sm leading-6 text-gray-600">
+                    {project.description}
+                  </p>
+                  {project.note && (
+                    <p class="mt-3 text-sm leading-6 text-slate-700">
+                      {project.note}
+                    </p>
+                  )}
+                  <div class="mt-4 flex flex-wrap gap-2">
+                    {project.tags.map((tag) => (
+                      <span class="rounded-md bg-slate-100 px-2 py-1 text-xs font-medium text-slate-700">
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                  <div class="mt-5 flex flex-wrap gap-4 text-sm font-semibold">
+                    <a
+                      href={project.repo}
+                      class="text-cyan-700 hover:text-cyan-600"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      Source
+                      <span aria-hidden="true"> -&gt;</span>
+                    </a>
+                    {project.url && (
+                      <a
+                        href={project.url}
+                        class="text-gray-900 hover:text-cyan-700"
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        Live site
+                        <span aria-hidden="true"> -&gt;</span>
+                      </a>
+                    )}
+                  </div>
+                </article>
+              ))
+            }
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+</Layout>