Add Codeberg as a code platform option

README.md

@@ -8,13 +8,13 @@ For those interested in creating a similar catalog website or contributing to th
 
 The website is styled using the [tailwindcss](https://tailwindcss.com/) package.
 
-* **Real-time Data Fetching:** Displays all public organization repositories, fetched through the GitHub and Hugging Face APIs. Includes semantically meaningful virtual markers:
+* **Real-time Data Fetching:** Displays all public organization repositories, fetched through the code platform and Hugging Face APIs. Includes semantically meaningful virtual markers:
     * "New" badge highlights products created within the last 30 days;
-    * "🚀 version-tag" badge indicates a new release within the last 2 weeks for GitHub repos, and links to that release;
-    * Star (⭐️) or like (❤️) counts displayed for GitHub or Hugging Face repos, respectively;
-    * Archived badge flags GitHub repos no longer under active development (read-only).
+    * "🚀 version-tag" badge indicates a new release within the last 2 weeks for code repos, and links to that release;
+    * Star (⭐️) or like (❤️) counts displayed for code platform or Hugging Face repos, respectively;
+    * Archived badge flags code repos no longer under active development (read-only).
 * **Search Functionality:** Quickly find items by keyword.
-* **Filtering:** Filter by repository type (Code, Datasets, Models, Spaces) and tags. Optionally include archived GitHub repos.
+* **Filtering:** Filter by repository type (Code, Datasets, Models, Spaces) and tags. Optionally include archived code repos.
 * **Sorting:** Sort items by last updated, date created, stars/likes ascending or descending, or alphabetically.
 * **URL Parameter Support:** Persist and share search states via URL hash (`#type=datasets&q=fish`) or query parameters (`?type=datasets`). Supports `type`, `q` (search query), `sort`, and `tag` parameters.
 * **Responsive Design:** The layout is optimized for use on computers and mobile devices.
@@ -30,7 +30,7 @@ The site runs based on four primary files:
 * `style.css`: Custom styling for the application, including color schemes, layout, and animations. Colors are set via CSS custom properties that are populated from `config.yaml`.
 * `main.js`: Application manager, handles config loading, event listeners, and coordinates UI updates based on API fetches for dynamic rendering of the catalog items.
 * `src/`: Modular application logic, organized by purpose:
-    * `api/`: Data fetching modules for external platforms (GitHub and Hugging Face).
+    * `api/`: Data fetching modules for external platforms (code and Hugging Face).
     * `ui/`: DOM manipulation, HTML templating, and URL/State routing.
     * `utils/`: Utility functions such as data filtering, sorting, and tag (keyword) normalization. 
 

docs/personalization.md

@@ -4,7 +4,7 @@ Welcome to your new catalog repo! The primary way to personalize this catalog is
 
 ## Primary Configuration File
 
-[**`public/config.yaml`**](../public/config.yaml): This is the main file to edit. It contains all configuration options (e.g., organization names, colors, branding, and API settings) with inline comments explaining each setting. Replace Imageomics-specific values with those appropriate for your organzation and catalog repository.
+[**`public/config.yaml`**](../public/config.yaml): This is the main file to edit. It contains all configuration options (e.g., organization names, colors, branding, and API settings) with inline comments explaining each setting. Replace Imageomics-specific values with those appropriate for your organization and catalog repository.
 
 ### Organization & Repository Settings
 
@@ -32,7 +32,7 @@ Welcome to your new catalog repo! The primary way to personalize this catalog is
 
 ### API & Behavior Settings
 
-  * `PLATFORM`: Coding platform used (default: 'github', Codeberg and GitLab support in development)
+  * `PLATFORM`: Coding platform used: 'github' or 'codeberg' (default: 'github', GitLab support in development). Please see [notes on platform setup](#non-github-code-platform-setup) if using for non-GitHub code repositories
   * `API_BASE_URL`: Hugging Face API base URL (default: `"https://huggingface.co/api/"`)
   * `REFRESH_INTERVAL_DAYS`: Number of days to consider an item "new" (default: `30`)
   * `ADDITIONAL_REPOS`: Array of forked or non-org GitHub repositories to include, formatted `<owner>/<repo-name>` (non-forks are included by default). Use `[]` if there are none you wish to include
@@ -88,3 +88,7 @@ When first setting up your catalog, run the export script to generate a full lis
 > **Required token**: The weekly tag scan workflow requires a fine-grained access token with **Pull requests: Read and write** permission on the catalog repo. Follow the instructions in [App Authentication](app-authentication.md) to create and install a private Catalog Automation App for token generation.
 
 See **[tag-grouping-process.md](tag-grouping-process.md)** for full setup instructions, conventions, and guidance on using AI assistance for the initial grouping pass.
+
+## Code Repository Platform Setup
+
+The default code repository platform for this catalog is GitHub. If you wish to use another supported platform (Codeberg), please note that the [tag export](../scripts/export-tags.js) and [fetch release](../scripts/fetch-releases.js) scripts may require header definition modifications to function properly. Workflows would also require token and other platform-specific updates if running from a non-GitHub repository. Otherwise, this app is set up to be able to run from Codeberg to fetch and display Codeberg repositories.

docs/tag-grouping-process.md

@@ -2,11 +2,16 @@
 
 ## What Are Tag Groups?
 
-Tags on GitHub repos (topics) and Hugging Face repos (card metadata) are free-form text, so
+Tags on code platform[^1] repos (topics) and Hugging Face repos (card metadata) are free-form text, so
 the same concept often appears under multiple spellings: `computer-vision`, `computer vision`,
 `cv`. Tag groups normalize this noise so the catalog filter dropdown shows one clean canonical
 tag instead of a dozen near-duplicates.
 
+> [!NOTE]
+> This workflow has only been run on GitHub. It may need platform-based adjustments to function as expected on other code platforms, such as Codeberg or GitLab.
+
+[^1]: GitHub, Codeberg, and GitLab.
+
 Tag groups live in **`public/tag-groups.js`** as a plain JavaScript object:
 
 ```js

index.html

@@ -28,9 +28,8 @@
         class="fixed top-6 right-6 hidden md:flex items-center gap-3 text-white py-2 px-4 rounded-lg shadow-md transition-all z-50 no-underline group font-sans border border-white/10">
         <!-- Code Platform Logo -->
         <div class="flex-shrink-0">
-            <svg class="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                <path id="repo-ribbon-icon" fill-rule="evenodd" clip-rule="evenodd"></path>
-            </svg>
+            <div id="repo-ribbon-icon-container" class="w-10 h-10 text-white [&>svg]:w-full [&>svg]:h-full"
+                aria-hidden="true"></div>
         </div>
         <div class="flex flex-col justify-center">
             <!-- Platform Display Name -->

public/config.yaml

@@ -22,7 +22,7 @@ COLORS:
   tag: "#9bcb5e"          # Tag background color (Light Green)
 
 # API & Behavior Settings
-# Codebase platform for API calls and link generation. Supported values: "github", pending: "codeberg" or "gitlab".
+# Codebase platform for API calls and link generation. Supported values: "github" or "codeberg", pending: "gitlab".
 PLATFORM: github
 # Dataset, model, and space (demo) default: Hugging Face, other platforms would require a custom module
 API_BASE_URL: "https://huggingface.co/api/"

src/api/fetchCodeRepos.js

@@ -2,6 +2,23 @@ import { handleError } from '../ui/render.js';
 import { normalizeTag, filterDisplayTags } from '../utils/normalizeTag.js';
 import { getPlatformDisplay } from '../utils/defineRibbonVals.js';
 
+// Define platform-specific values
+const PLATFORM_CONFIGS = {
+    github: {
+        starsKey: 'stargazers_count',
+        profileRepo: '.github'
+    },
+    /* gitlab: {
+        starsKey: 'star_count',
+        profileRepo: 'gitlab-profile',
+        //TODO
+    }, */
+    codeberg: {
+        starsKey: 'stars_count',
+        profileRepo: '.profile'
+    }
+};
+
 /**
  * Function for fetching code repositories from the specified platform (GitHub, GitLab, or Codeberg).
  * Both org-owned (non-forks) and additional repos are fetched; metadata is processed for each repo.
@@ -28,6 +45,9 @@ export async function fetchCodeRepos(
 
     let allRepos = [];
     let nextUrl = `${orgApiUrl}`;
+    // get platform-specific keys
+    const platformConfig = PLATFORM_CONFIGS[platform.toLowerCase()];
+    const { starsKey, profileRepo } = platformConfig;
     try {
         while (nextUrl) {
             const ghResponse = await fetch(nextUrl);
@@ -72,7 +92,10 @@ export async function fetchCodeRepos(
 
         // Keep only non-forks from org; deduplicate against additional repos by full_name
         const orgRepoNames = new Set(filteredAdditionalRepos.map(r => r.full_name));
-        const orgNonForks = allRepos.filter(repo => repo.name !== ".github" && !repo.fork && !orgRepoNames.has(repo.full_name));
+        const orgNonForks = allRepos.filter(repo =>
+            repo.name !== profileRepo &&
+            !repo.fork &&
+            !orgRepoNames.has(repo.full_name));
 
         // Process additional repos and all remaining org non-forks to include metadata and 'new' flag as appropriate
         let processedItems = [...filteredAdditionalRepos, ...orgNonForks]
@@ -105,7 +128,7 @@ export async function fetchCodeRepos(
                     cardData: {
                         pretty_name: repo.name, // <repo-name>, the one used for card title display
                         description: repo.description,
-                        stars: repo.stargazers_count || 0
+                        stars: repo[starsKey] ?? 0
                     }
                 };
             });

src/api/fetchStats.js

@@ -24,13 +24,13 @@ export const fetchCatalogStats = async (repoApiUrl, organizationName, catalogRep
         //TODO: Update stars and forks to support other platforms (GitLab, Codeberg) once implemented
         // 1. Get Stars & Forks
         const repo = await fetch(`${repoApiUrl}${organizationName}/${catalogRepoName}`).then(r => r.ok ? r.json() : {});
-        if (repo.stargazers_count !== undefined) update('gh-stars', 'gh-star-container', repo.stargazers_count);
+        if (repo.stargazers_count !== undefined  || repo.stars_count !== undefined) update('gh-stars', 'gh-star-container', repo.stargazers_count || repo.stars_count);
         if (repo.forks_count !== undefined) update('gh-forks', 'gh-fork-container', repo.forks_count);
 
         // 2. Get Version (Tag)
         // TODO: Import from package.json
         const release = await fetch(`${repoApiUrl}${organizationName}/${catalogRepoName}/releases/latest`).then(r => r.ok ? r.json() : {});
-        if (release.tag_name) update('gh-tag', 'gh-version-container', release.tag_name);
+        if (release.tag_name !== undefined) update('gh-tag', 'gh-version-container', release.tag_name);
 
     } catch (e) {
         console.warn("Could not fetch Code Repo stats", e);

src/ui/initUserInterface.js

@@ -55,8 +55,8 @@ export const initializeUIFromConfig = (config) => {
     const platformDisplay = getPlatformDisplay(config.PLATFORM);
     if (repoRibbon && platformDisplay) {
         repoRibbon.href = `${platformDisplay.ribbonUrl}${config.ORGANIZATION_NAME}/${config.CATALOG_REPO_NAME}`;
-        const pathElement = document.getElementById('repo-ribbon-icon');
-        pathElement.setAttribute('d', platformDisplay.path);
+        const svgElement = document.getElementById('repo-ribbon-icon-container');
+        svgElement.innerHTML = platformDisplay.svg;
         const platformDisplayName = document.getElementById('platform-display-name');
         platformDisplayName.textContent = platformDisplay.displayName || config.PLATFORM;
         repoRibbon.style.backgroundColor = config.COLORS.secondary;