Use content collections for Docker and GitHub projects

sebdanielsson · sebdanielsson · commit bb03ed04f1f1 · 2025-10-24T17:46:21.000+02:00
diff --git a/src/components/DockerHubCard.astro b/src/components/DockerHubCard.astro
@@ -2,24 +2,25 @@
 import { shortenNumberWithK } from "../utils/shortenNumber";
 
 const { image } = Astro.props;
+const { owner, repo, github_url, hub_details } = image.data;
 ---
 
 <div
-  id={`image-${image.repo}`}
+  id={`image-${repo}`}
   class="grid grid-rows-[1fr_auto] rounded-2xl border border-[var(--accent-main)] bg-[var(--accent-background)] p-4 text-gray-400 shadow-lg"
 >
   <div class="">
     <div class="grid gap-1">
       <div class="flex items-center justify-between">
         <a
-          href=`https://hub.docker.com/r/${image.owner}/${image.repo}`
+          href=`https://hub.docker.com/r/${owner}/${repo}`
           target="_blank"
           class="passing-underline flex-none text-base font-bold text-gray-200 hover:text-gray-200"
         >
-          {image.owner}/{image.repo}
+          {owner}/{repo}
         </a>
       </div>
-      <p class="text-sm">{image.details.description}</p>
+      <p class="text-sm">{hub_details.description}</p>
     </div>
   </div>
   <div class="">
@@ -31,16 +32,16 @@ const { image } = Astro.props;
             d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"
           ></path>
         </svg>
-        <p>{shortenNumberWithK(image.details.star_count)} stars</p>
+        <p>{shortenNumberWithK(hub_details.star_count)} stars</p>
       </div>
       <div class="inline-flex items-center gap-1">
         <svg fill="none" aria-hidden="true" viewBox="0 0 24 24" class="size-5"
           ><path fill="currentColor" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path></svg
         >
-        <p>{shortenNumberWithK(image.details.pull_count)} pulls</p>
+        <p>{shortenNumberWithK(hub_details.pull_count)} pulls</p>
       </div>
       <div class="inline-flex items-center">
-        <span>View source on <a href={image.github_url} target="_blank">GitHub</a></span>
+        <span>View source on <a href={github_url} target="_blank">GitHub</a></span>
       </div>
     </div>
   </div>
diff --git a/src/components/GitHubRepoCard.astro b/src/components/GitHubRepoCard.astro
@@ -2,27 +2,28 @@
 import { shortenNumberWithK } from "../utils/shortenNumber";
 
 const { repo } = Astro.props;
+const repoData = repo.data;
 ---
 
 <div
-  id={`project-${repo.id}`}
+  id={`project-${repoData.id}`}
   class="grid grid-rows-[1fr_auto] rounded-2xl border border-[var(--accent-main)] bg-[var(--accent-background)] p-4 shadow-lg"
 >
   <div class="">
     <div class="grid gap-1">
       <div class="flex items-center justify-between">
         <a
-          href={repo.html_url}
+          href={repoData.html_url}
           target="_blank"
           class="passing-underline flex-none text-base font-bold text-gray-200 hover:text-gray-200"
         >
-          {repo.name}
+          {repoData.name}
         </a>
       </div>
-      <p class="text-sm text-gray-400">{repo.description}</p>
+      <p class="text-sm text-gray-400">{repoData.description}</p>
       <div class="flex flex-wrap gap-x-2 py-1">
         {
-          repo.topics.map((topic: string) => (
+          repoData.topics.map((topic: string) => (
             <a
               href={`https://github.com/topics/${topic}`}
               target="_blank"
@@ -44,10 +45,10 @@ const { repo } = Astro.props;
             d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"
           ></path>
         </svg>
-        <p>{shortenNumberWithK(repo.stars)} stars</p>
+        <p>{shortenNumberWithK(repoData.stars)} stars</p>
       </div>
-      <span class="empty:hidden">{repo.language}</span>
-      {repo.license && <span class="empty:hidden">{repo.license.spdx_id}</span>}
+      <span class="empty:hidden">{repoData.language}</span>
+      {repoData.license && <span class="empty:hidden">{repoData.license.spdx_id}</span>}
     </div>
   </div>
 </div>
diff --git a/src/content.config.ts b/src/content.config.ts
@@ -2,6 +2,10 @@ import { glob } from "astro/loaders";
 import { defineCollection, z } from "astro:content";
 import { rssSchema } from "@astrojs/rss";
 import raycastExtensionsList from "./data/raycastExtensions.json";
+import dockerHubImagesList from "./data/dockerHubImages.json";
+import githubReposList from "./data/githubRepos.json";
+import { Octokit } from "@octokit/rest";
+import { GH_API } from "astro:env/server";
 
 const blog = defineCollection({
   loader: glob({ base: "./src/blog", pattern: "**/*.{md,mdx}" }),
@@ -180,4 +184,126 @@ const raycastExtensions = defineCollection({
   }),
 });
 
-export const collections = { blog, raycastExtensions };
+const dockerHubImages = defineCollection({
+  loader: {
+    name: "docker-hub-images-loader",
+    load: async ({ store, logger }) => {
+      logger.info("Loading Docker Hub images");
+      store.clear();
+
+      for (const image of dockerHubImagesList) {
+        const res = await fetch(
+          `https://hub.docker.com/v2/repositories/${image.owner}/${image.repo}`,
+        );
+        const json = await res.json();
+
+        store.set({
+          id: `${image.owner}/${image.repo}`,
+          data: {
+            owner: image.owner,
+            repo: image.repo,
+            github_url: image.github_url,
+            hub_details: json,
+          },
+        });
+      }
+    },
+  },
+  schema: z.object({
+    owner: z.string(),
+    repo: z.string(),
+    github_url: z.string().url(),
+    hub_details: z.object({
+      user: z.string(),
+      name: z.string(),
+      namespace: z.string(),
+      description: z.string(),
+      pull_count: z.number(),
+      star_count: z.number(),
+      last_updated: z.string(),
+      date_registered: z.string(),
+    }),
+  }),
+});
+
+const githubRepos = defineCollection({
+  loader: {
+    name: "github-repos-loader",
+    load: async ({ store, logger }) => {
+      logger.info("Loading GitHub repositories");
+      store.clear();
+
+      const octokit = new Octokit({
+        auth: GH_API,
+        userAgent: "sebdanielsson/sebdanielsson.dev",
+      });
+
+      for (const repo of githubReposList) {
+        try {
+          const response = await octokit.repos.get({
+            owner: repo.owner,
+            repo: repo.repo,
+          });
+
+          const repoData = response.data;
+
+          store.set({
+            id: `${repo.owner}/${repo.repo}`,
+            data: {
+              id: repoData.id,
+              owner: repoData.owner.login,
+              owner_url: repoData.owner.html_url,
+              name: repoData.name,
+              full_name: repoData.full_name,
+              html_url: repoData.html_url,
+              description: repoData.description,
+              created_at: repoData.created_at,
+              updated_at: repoData.updated_at,
+              pushed_at: repoData.pushed_at,
+              stars: repoData.stargazers_count,
+              language: repoData.language,
+              topics: repoData.topics ?? [],
+              license: repoData.license
+                ? {
+                    key: repoData.license.key,
+                    name: repoData.license.name,
+                    url: repoData.license.url,
+                    spdx_id: repoData.license.spdx_id,
+                    node_id: repoData.license.node_id,
+                  }
+                : null,
+            },
+          });
+        } catch (error) {
+          logger.error(`Error fetching repository ${repo.owner}/${repo.repo}: ${error}`);
+        }
+      }
+    },
+  },
+  schema: z.object({
+    id: z.number(),
+    owner: z.string(),
+    owner_url: z.string().url(),
+    name: z.string(),
+    full_name: z.string(),
+    html_url: z.string().url(),
+    description: z.string().nullable(),
+    created_at: z.string(),
+    updated_at: z.string(),
+    pushed_at: z.string(),
+    stars: z.number(),
+    language: z.string().nullable(),
+    topics: z.array(z.string()),
+    license: z
+      .object({
+        key: z.string(),
+        name: z.string(),
+        url: z.string().url().nullable(),
+        spdx_id: z.string().nullable(),
+        node_id: z.string(),
+      })
+      .nullable(),
+  }),
+});
+
+export const collections = { blog, raycastExtensions, dockerHubImages, githubRepos };
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
@@ -3,125 +3,37 @@ import Layout from "@/layouts/Layout.astro";
 import GitHubRepoCard from "@/components/GitHubRepoCard.astro";
 import RaycastStoreCard from "@/components/RaycastStoreCard.astro";
 import DockerHubCard from "@/components/DockerHubCard.astro";
-import { Octokit } from "@octokit/rest";
 import { getCollection } from "astro:content";
-import githubRepos from "@/data/githubRepos.json";
-import dockerHubImages from "@/data/dockerHubImages.json";
-import type GitHubRepoData from "@/interfaces/gitHubRepoData";
-import type GitHubRepo from "@/interfaces/gitHubRepo";
-import type DockerHubRepoData from "@/interfaces/dockerHubRepoData";
-import { GH_API } from "astro:env/server";
 
 // Fetch Raycast extensions from collection
 const raycastExtensions = await getCollection("raycastExtensions");
 
-// Fetch repo details
-const octokit = new Octokit({
-  auth: GH_API,
-  userAgent: "sebdanielsson/sebdanielsson.dev",
-});
-
-// Function to fetch and transform repo details to match the GitHubRepoData interface
-async function getRepoDetails(owner: string, repo: string): Promise<GitHubRepoData | null> {
-  try {
-    const response = await octokit.repos.get({
-      owner,
-      repo,
-    });
-
-    const repoData = response.data;
-
-    // Transform the fetched data to match the GitHubRepoData interface
-    return {
-      id: repoData.id,
-      owner: repoData.owner.login,
-      owner_url: repoData.owner.html_url,
-      name: repoData.name,
-      full_name: repoData.full_name,
-      html_url: repoData.html_url,
-      description: repoData.description,
-      created_at: repoData.created_at,
-      updated_at: repoData.updated_at,
-      pushed_at: repoData.pushed_at,
-      stars: repoData.stargazers_count,
-      language: repoData.language,
-      topics: repoData.topics ?? [],
-      license: repoData.license
-        ? {
-            key: repoData.license.key,
-            name: repoData.license.name,
-            url: repoData.license.url,
-            spdx_id: repoData.license.spdx_id,
-            node_id: repoData.license.node_id,
-          }
-        : null,
-    };
-  } catch (error) {
-    console.error("Error fetching repository details:", error);
-    return null;
-  }
-}
+// Fetch Docker Hub images from collection
+const dockerHubImages = await getCollection("dockerHubImages");
 
-// Fetch Docker Hub repo details
-async function getDockerHubRepoDetails(
-  dockerHubUser: string,
-  dockerHubRepo: string,
-): Promise<DockerHubRepoData | null> {
-  try {
-    const response = await fetch(
-      `https://hub.docker.com/v2/repositories/${dockerHubUser}/${dockerHubRepo}`,
-    );
-    const repoData = (await response.json()) as DockerHubRepoData;
+// Fetch GitHub repos from collection
+const githubRepos = await getCollection("githubRepos");
 
-    return repoData;
-  } catch (error) {
-    console.error("Error fetching Docker Hub repository details:", error);
-    return null;
-  }
-}
-
-// List of GitHub repos to fetch
-const typedGithubRepos: GitHubRepo[] = githubRepos as GitHubRepo[];
-
-// Fetch repo details
-const repoDetails: (GitHubRepoData | null)[] = await Promise.all(
-  typedGithubRepos.map((repo) => getRepoDetails(repo.owner, repo.repo)),
-);
-
-// Sort by stars
-repoDetails.sort((a, b) => {
-  if (a && b) {
-    return b.stars - a.stars;
-  }
-  return 0;
+// Sort GitHub repos by stars
+const sortedGithubRepos = githubRepos.sort((a, b) => {
+  return b.data.stars - a.data.stars;
 });
-
-// Fetch all details for Docker Hub images
-const dockerHubImagesWithDetails = await Promise.all(
-  dockerHubImages.map(async (image) => {
-    const details = await getDockerHubRepoDetails(image.owner, image.repo);
-    return {
-      ...image,
-      details,
-    };
-  }),
-);
 ---
 
 <Layout title="Projects">
   <main class="main-width py-12">
     <h1 class="my-0">Projects</h1>
     <h2>Docker Images</h2>
     <div class="grid grid-cols-1 gap-3 lg:grid-cols-2">
-      {dockerHubImagesWithDetails.map((image) => <DockerHubCard image={image} />)}
+      {dockerHubImages.map((image) => <DockerHubCard image={image} />)}
     </div>
     <h2>Raycast Extensions</h2>
     <div class="grid grid-cols-1 gap-3 lg:grid-cols-2">
       {raycastExtensions.map((extension) => <RaycastStoreCard extension={extension} />)}
     </div>
     <h2>GitHub Repos</h2>
     <div class="grid grid-cols-1 gap-3 lg:grid-cols-2">
-      {repoDetails.map((repo) => <GitHubRepoCard repo={repo} type="repo" />)}
+      {sortedGithubRepos.map((repo) => <GitHubRepoCard repo={repo} type="repo" />)}
     </div>
   </main>
 </Layout>
