diff --git a/README.md b/README.md index 2cdee04..2a4c42c 100644 --- a/README.md +++ b/README.md @@ -19,11 +19,11 @@ The website is styled using the [tailwindcss](https://tailwindcss.com/) pacakge. ## Project Structure -The site runs based on three primary files: +The site runs based on four primary files: -* `index.html`: The main HTML file that provides the structure of the webpage and links to the CSS and JavaScript files, though it still has some manual color/style definitions. -* `style.css`: Custom styling for the application, including color schemes, layout, and animations. - * **Note:** Color defined in `index.html` for specific portions of the site will overwrite those defined in this file. +* `config.js`: **Configuration file** - Contains all customizable settings including organization names, colors, branding, and API settings. This is the main file to edit for personalization. +* `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 from `config.js`. +* `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.js`. * `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 `cardData` unless explicitly fetched *by model*, so there is extra logic required to fetch Model metadata. This was not accounted for until [commit a8d3000](https://github.com/Imageomics/catalog/commit/a8d30009f58a11e708f36d54b9bf4a228bdf1538), as it took updates related to issue #3 to discover. @@ -34,6 +34,50 @@ The site runs based on three primary files: * **Wrap Line Length:** 120 * **Rules:** Remove trailing whitespace and empty tabs. +## How to Use This Template + +This Catalog is set up as a template repository. To build a personalized version of the Catalog, select "Use this Template" at the top of the repo to generate your own version. This will create a new repository (generated from the template repo) that does not share the commit history of the template. Updates can still be added from the template upstream through `git cherry-pick`.[^1] +[^1]: We recommend following the [Git Cherry-pick Guide](https://imageomics.github.io/Collaborative-distributed-science-guide/wiki-guide/Git-Cherry-Pick-Guide/) from the [Collaborative Distributed Science Guide](https://imageomics.github.io/Collaborative-distributed-science-guide/) for those unfamiliar with this process. + +### Personalizing Your Catalog + +Welcome to your new catalog repo! The primary way to personalize this catalog is through the `config.js` file, which contains all customizable settings. After using the template, you'll need to update the following: + +#### Primary Configuration File + +**`config.js`**: This is the main file to edit. It contains all configuration options with inline comments explaining each setting: + +* **Organization & Repository Settings:** + * `ORGANIZATION_NAME`: Your GitHub/Hugging Face organization name (lowercase for API calls) + * `GITHUB_ORG_NAME`: Display name for your organization (can differ from API name) + * `CATALOG_REPO_NAME`: Repository name for the catalog itself (used for stats badge) + +* **Branding:** + * `CATALOG_TITLE`: Page title and main heading + * `CATALOG_DESCRIPTION`: Subtitle/description text displayed under the title + * `LOGO_URL`: URL to your organization's logo image (used in `main.js` line 565) + * `FAVICON_URL`: URL to your favicon image (used in `index.html` line 80) + + For both `LOGO_URL` and `FAVICON_URL`, you can use an external URL, a relative path if the image is in your repo (e.g., `./images/logo.png` or `images/logo.png`), or GitHub's raw URL format (e.g., `https://github.com/username/repo/raw/branch/path/to/image.png`) + +* **Colors:** + * `COLORS.primary`: Primary brand color (used for heading) + * `COLORS.secondary`: Secondary brand color (used for borders, GitHub ribbon) + * `COLORS.accent`: Accent color (used for links, focus states, "New" badge) + * `COLORS.accentDark`: Dark mode accent color (used for link hover states in dark mode) + * `COLORS.tag`: Tag background color + +* **API & Behavior Settings:** + * `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`) + * `MAX_ITEMS`: Maximum number of items to fetch per category (default: `100`) + * `FORKED_REPOS`: Array of forked repository names to include (non-forks are included by default). Use `[]` if there are none you wish to include + +* **Typography:** + * `FONT_FAMILY`: Font family for the site (default: `"Inter"`) + +After modifying `config.js`, refresh your browser to see changes. The color scheme will automatically apply to all UI elements throughout the site. + ## Local Testing In the repo root, run diff --git a/config.js b/config.js new file mode 100644 index 0000000..148ac67 --- /dev/null +++ b/config.js @@ -0,0 +1,39 @@ +// Configuration file for Catalog Template +// Customize these values to personalize the catalog for your organization + +const CONFIG = { + // Organization & Repository Settings + ORGANIZATION_NAME: "imageomics", // GitHub/Hugging Face organization name (lowercase for API calls) + GITHUB_ORG_NAME: "Imageomics", // Display name for GitHub organization (can differ from API name) + CATALOG_REPO_NAME: "catalog", // Repository name for the catalog itself (used for stats badge) + + // Branding + CATALOG_TITLE: "Imageomics Catalog", // Page title and main heading + CATALOG_DESCRIPTION: "Explore and discover public code, datasets, models, and spaces.", // Subtitle/description text + LOGO_URL: "https://github.com/Imageomics/Imageomics-guide/raw/3478acc0068a87a5604069d04a29bdb0795c2045/docs/logos/Imageomics_logo_butterfly.png", // Organization logo URL + FAVICON_URL: "https://github.com/Imageomics/Imageomics-guide/raw/3478acc0068a87a5604069d04a29bdb0795c2045/docs/logos/Imageomics_logo_butterfly.png", // Favicon URL + + // Colors (CSS custom properties) + COLORS: { + primary: "#92991c", // Primary brand color (Imageomics Green) + secondary: "#5d8095", // Secondary brand color (Imageomics Blue) + accent: "#0097b2", // Accent color (Dark Teal) + accentDark: "#4fd1eb", // Dark mode accent color (Light Cyan) + tag: "#9bcb5e" // Tag background color (Light Green) + }, + + // API & Behavior Settings + API_BASE_URL: "https://huggingface.co/api/", // Hugging Face API base URL + REFRESH_INTERVAL_DAYS: 30, // Number of days to consider an item "new" + MAX_ITEMS: 100, // Maximum number of items to fetch per category + FORKED_REPOS: [ + // Array of forked repository names to include (non-forks are included by default) + "Fish-Vista", + "PhyloNN", + "telemetry-dashboard", + "docker-workshop" + ], + + // Typography + FONT_FAMILY: "Inter" // Font family for the site +}; diff --git a/index.html b/index.html index d2451c9..11cf272 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,43 @@ - Imageomics Catalog + Catalog + + - + + - + + -

+ ${prettyName}

@@ -548,7 +554,61 @@ const populateTagFilter = (repoType) => { // SECTION 5: EVENT LISTENERS AND INITIALIZATION // +/** + * Initializes UI elements from configuration values. + * This sets up the header, logo, GitHub ribbon, and dynamic styles. + */ +const initializeUIFromConfig = () => { + // Set header logo + const logoImg = document.getElementById('logo-img'); + if (logoImg) { + logoImg.src = CONFIG.LOGO_URL; + logoImg.alt = CONFIG.GITHUB_ORG_NAME + ' Logo'; + + logoImg.onload = () => { + logoImg.classList.remove('opacity-0'); + }; + } + + // Set header title and description + const headerTitle = document.getElementById('header-title'); + if (headerTitle) { + headerTitle.textContent = CONFIG.CATALOG_TITLE; + headerTitle.style.color = CONFIG.COLORS.primary; + } + + const headerDesc = document.getElementById('header-description'); + if (headerDesc) { + headerDesc.textContent = CONFIG.CATALOG_DESCRIPTION; + } + + // Set GitHub ribbon link and colors + const githubRibbon = document.getElementById('github-ribbon'); + if (githubRibbon) { + githubRibbon.href = `https://github.com/${ORGANIZATION_NAME}/${CATALOG_REPO_NAME}`; + githubRibbon.style.backgroundColor = CONFIG.COLORS.secondary; + githubRibbon.style.setProperty('--hover-color', CONFIG.COLORS.primary); + githubRibbon.addEventListener('mouseenter', function () { + this.style.backgroundColor = CONFIG.COLORS.primary; + }); + githubRibbon.addEventListener('mouseleave', function () { + this.style.backgroundColor = CONFIG.COLORS.secondary; + }); + } + + // Set focus ring colors for form inputs and link hover colors + const style = document.createElement('style'); + style.textContent = ` + .focus\\:ring-2:focus { --tw-ring-color: var(--color-accent) !important; } + .item-link:hover { color: var(--color-accent) !important; } + .dark .item-link:hover { color: var(--color-accent-dark) !important; } + `; + document.head.appendChild(style); +}; + document.addEventListener('DOMContentLoaded', async () => { + // Initialize UI from config first + initializeUIFromConfig(); const searchInput = document.getElementById('searchInput'); const sortBySelect = document.getElementById('sortBy'); diff --git a/style.css b/style.css index 83f4bc3..297fa26 100644 --- a/style.css +++ b/style.css @@ -1,14 +1,21 @@ /* - * Imageomics Official Color Palette - * Imageomics Green: #92991c - * Imageomics Blue: #5d8095 - * Dark Teal: #0097b2 - * Light Green: #9bcb5e -*/ + * These variables are set from config.js and can be customized there. + * Default values (Imageomics colors) are provided as fallbacks. + */ +:root { + --color-primary: #92991c; + /* Primary brand color */ + --color-secondary: #5d8095; + /* Secondary brand color */ + --color-accent: #0097b2; + /* Accent color */ + --color-tag: #9bcb5e; + /* Tag background color */ +} /* Overall body and typography styles, controlling the font, background color, and text color of the entire page. */ body { - font-family: 'Inter', sans-serif; + font-family: var(--font-family, 'Inter'), sans-serif; /* Light gray background */ background-color: #f3f4f6; /* Dark gray text */ @@ -24,8 +31,8 @@ body { .item-card { /* White card background */ background-color: #ffffff; - /* Imageomics blue border */ - border: 1px solid #5d8095; + /* Secondary color border */ + border: 1px solid var(--color-secondary); transition: transform 0.2s, box-shadow 0.2s; } @@ -37,16 +44,16 @@ body { /* Styling for individual tags, controlling their background color and text color. */ .tag { - /* Light Green */ - background-color: #9bcb5e; + /* Tag color */ + background-color: var(--color-tag); /* Dark text for contrast */ color: #222222; } /* Animation for the "New!" badge. */ .new-badge { - /* Dark Teal */ - background-color: #0097b2; + /* Accent color */ + background-color: var(--color-accent); animation: pulse 1.5s infinite; } @@ -100,13 +107,13 @@ body { /* Styles the scrollbar thumb (the part you drag), controlling its background color and border radius. */ .tag-container::-webkit-scrollbar-thumb { - background-color: #5d8095; + background-color: var(--color-secondary); border-radius: 3px; } /* Hover state for the scrollbar thumb, changing its background color. */ .tag-container::-webkit-scrollbar-thumb:hover { - background-color: #0097b2; + background-color: var(--color-accent); } .dark .tag-container::-webkit-scrollbar-track {