wip: add open-source page

Add a page that lists my open-source projects.

website/src/pages/open-source.astro

@@ -0,0 +1,90 @@
+---
+import Layout from "../layouts/PageLayout.astro";
+import { Octokit } from "octokit";
+
+const drupalProjectNames = [
+  { type: "project_module", title: "Block ARIA Landmark Roles" },
+  { type: "project_module", title: "Copyright Block module" },
+  { type: "project_module", title: "Layout Builder Extra Templates" },
+  { type: "project_module", title: "Mapify" },
+  { type: "project_module", title: "Node Comment Block" },
+  { type: "project_module", title: "Nomensa Accessible Media Player" },
+  { type: "project_module", title: "Null User" },
+  { type: "project_module", title: "Override Node Options" },
+  { type: "project_module", title: "Pathauto Menu Link" },
+  { type: "project_module", title: "Private Message Queue" },
+  { type: "project_module", title: "Simple Smartling" },
+  { type: "project_module", title: "SpeakerDeck Field" },
+  { type: "project_module", title: "System User" },
+  { type: "project_module", title: "Toggle Optional Fields" },
+  { type: "project_module", title: "Webform ARIA" },
+  { type: "project_theme", title: "Tailwind CSS Starter Kit" }
+]
+
+const drupalProjectUrls = drupalProjectNames.map((p) => `https://www.drupal.org/api-d7/node.json?type=${p.type}&title=${p.title}`);
+
+const drupalProjects = await Promise.all(
+  drupalProjectUrls.map(async (url) => {
+    const resp = await fetch(url);
+    return resp.json();
+  })
+);
+
+// TODO: Don't show a project if it has 0 usage count.
+// TODO: Sort by usage count descending.
+// https://www.drupal.org/drupalorg/docs/apis/rest-and-other-apis
+// https://www.drupal.org/api-d7/node.json?type=project_module&title=Override%20Node%20Options
+// https://spatie.be/open-source?search=&sort=-downloads
+
+const gitHubProjectNames = ["dotfiles", "oliverdavies.uk", "rebuilding-acquia", "rebuilding-bartik", "docker-examples", "talking-drupal-tailwindcss", "toggle-checkbox.nvim"];
+
+const octokit = new Octokit({ auth: "xxxxx" });
+
+type Project = {
+  description: string | null;
+  name: string;
+  stars: number;
+  url: string;
+}
+type DrupalProject = Project & {
+  usageCount: number;
+}
+
+type GitHubProject = Project & {
+  forks: number;
+}
+
+const gitHubProjects: GitHubProject[] = await Promise.all(
+  gitHubProjectNames.map(async (repo) => {
+    const { data } = await octokit.rest.repos.get({ owner: "opdavies", repo });
+
+    return {
+      description: data.description,
+      forks: data.forks_count,
+      name: data.full_name,
+      stars: data.stargazers_count,
+      type: "github",
+      url: data.html_url,
+    };
+  })
+);
+---
+
+<Layout title="Open Source">
+  {gitHubProjects && gitHubProjects.map((project: GitHubProject) => <div>
+    {project.name}<br>
+    {project.url}<br>
+    {project.description}<br>
+    {project.stars > 0 && (<>Stars: {project.stars}<br></>)}
+    <br><br>
+  </div>)}
+
+  {drupalProjects && drupalProjects.map((t) => <div>
+    {t.list[0].title}<br>
+    {t.list[0].url}<br>
+    Usage count: {Object.values(t.list[0]?.project_usage ?? []).reduce((a: unknown, b: unknown) => +a + +b, 0)}<br>
+    Stars: {t.list[0].flag_project_star_user.length}<br>
+    {t.list[0].body.summary}
+    <br><br>
+  </div>)}
+</Layout>