Repository for web-based ABC Center code, data, model, and spaces catalog. This catalog is designed to use the GitHub API for searching all code repositories created under the ABC GitHub Organization and the Hugging Face API for searching all dataset, model, and spaces repositories created under the ABC Hugging Face Organization. Non-ABC Org GitHub repositories can be manually included through the ADDITIONAL_REPOS parameter in the config file.
This repository was generated and personalized from the Imageomics Catalog. The following sections are pulled from the source repo.
The website is styled using the tailwindcss package.
- Real-time Data Fetching: Displays all public Imageomics repositories, fetched through the GitHub 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).
- Search Functionality: Quickly find items by keyword.
- Filtering: Filter by repository type (Code, Datasets, Models, Spaces) and tags. Optionally include archived GitHub 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). Supportstype,q(search query),sort, andtagparameters. - Responsive Design: The layout is optimized for use on computers and mobile devices.
- Thematic Styling: Uses Imageomics color scheme for a cohesive look and feel.
- Longevity: This site is run through GitHub Pages, ensuring continued access through GitHub without needing to otherwise provision dedicated infrastructure.
The site runs based on four primary files:
public/config.yaml: Contains all customizable settings including organization names, colors, branding, and API settings. This is the main file to edit for personalization. Placed inpublic/so Vite copies it todist/without bundling, keeping it editable after deployment.index.html: The main HTML file that provides the structure of the webpage and links to the CSS and JavaScript files. Config values are applied dynamically fromconfig.yaml.style.css: Custom styling for the application, including color schemes, layout, and animations. Colors are set via CSS custom properties that are populated fromconfig.yaml.main.js: Handles the application's logic, including API calls, data filtering, sorting, and dynamic rendering of the catalog items.- Note: Model API calls do not return
cardDataunless explicitly fetched by model, so there is extra logic required to fetch Model metadata.
- Note: Model API calls do not return
Two additional files support the build tooling:
package.json: Declares npm dependencies (vite,tailwindcss,@tailwindcss/vite) and defines thedev,build, andpreviewscripts.vite.config.js: Vite configuration that registers the Tailwind CSS plugin.
- What is needed: VS Code "Format on Save" enabled with CSS & HTML format enabled.
- Indent Size: 4
- Wrap Line Length: 120
- Rules: Remove trailing whitespace and empty tabs.
This project uses Vite as a build tool and requires Node.js 24 (Active LTS). You can check your current version with node --version. To install or update Node, visit nodejs.org or use a version manager like nvm:
nvm install 24
nvm useA .nvmrc file is included, so nvm use will automatically select the correct version in the project directory.
Install dependencies and start the dev server from the repo root:
npm install
npm run devThen open the local URL printed by Vite (typically http://localhost:5173/) in your browser of choice.
To build for production (output goes to dist/):
npm run buildTo preview the production build locally:
npm run preview