{"id":20682654,"url":"https://github.com/ficodes/bae-frontend","last_synced_at":"2026-03-04T19:02:43.763Z","repository":{"id":237244559,"uuid":"786862974","full_name":"Ficodes/BAE-Frontend","owner":"Ficodes","description":null,"archived":false,"fork":false,"pushed_at":"2026-03-02T14:46:08.000Z","size":28480,"stargazers_count":0,"open_issues_count":7,"forks_count":10,"subscribers_count":5,"default_branch":"main","last_synced_at":"2026-03-02T15:37:19.366Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ficodes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-04-15T12:55:29.000Z","updated_at":"2026-03-02T11:11:55.000Z","dependencies_parsed_at":"2024-05-20T12:56:38.558Z","dependency_job_id":"b2f912bf-1eef-44f0-a7d7-1d9c0aa4fc35","html_url":"https://github.com/Ficodes/BAE-Frontend","commit_stats":null,"previous_names":["ficodes/bae-frontend"],"tags_count":28,"template":false,"template_full_name":null,"purl":"pkg:github/Ficodes/BAE-Frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ficodes%2FBAE-Frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ficodes%2FBAE-Frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ficodes%2FBAE-Frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ficodes%2FBAE-Frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ficodes","download_url":"https://codeload.github.com/Ficodes/BAE-Frontend/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ficodes%2FBAE-Frontend/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30090037,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-04T18:31:08.343Z","status":"ssl_error","status_checked_at":"2026-03-04T18:31:07.708Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-16T22:14:14.907Z","updated_at":"2026-03-04T19:02:43.658Z","avatar_url":"https://github.com/Ficodes.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BaeFrontend\n\nThis project develops the frontend for the BAE Marketplace.\n\n# Application Theming System\n\n## Overview\n\nThis section outlines the architecture and usage of the application's dynamic theming system. The system is designed to allow for extensive white-labeling, enabling changes to the application's appearance, branding, and navigation based on a selected theme.\n\nEach theme can configure:\n- **Visual Styles**: Colors, fonts, and other CSS properties.\n- **Assets**: Logos, background images, and other graphics.\n- **Navigation**: Dynamic links in the header and footer.\n- **Component Behavior**: Toggling features or sections, like parts of the dashboard.\n- **Text and Labels**: Leverages the internationalization (i18n) system for customizable text.\n\n## How It Works\n\nThe core of the system is the `ThemeService`, which is responsible for loading and applying a theme across the application.\n\n1.  **Initialization**: When the application starts, the `ThemeService` is initialized. It determines which theme to load based on a provider-specific identifier (e.g., from an environment variable). If the specified theme is not found or none is provided, it falls back to a pre-defined default theme.\n\n2.  **CSS Styling**: The service applies a unique CSS class to the `\u003cbody\u003e` tag, formatted as `theme-\u003ctheme-name\u003e` (e.g., `theme-dome`). This class is used in SCSS files to apply theme-specific styles by overriding CSS custom properties.\n\n3.  **Configuration Loading**: The service loads a `ThemeConfig` TypeScript object that contains paths to assets, navigation link structures, and other configuration flags. This object is exposed application-wide via an RxJS `Observable`, `themeService.currentTheme$`. Components can subscribe to this observable to access theme-specific data dynamically.\n\n---\n\n## Creating a New Theme\n\nFollow these steps to add a new theme to the application. In this example, we will create a new theme called **\"Galaxy\"**.\n\n### 1. Locate Theme Directory\n\nFirst, locate the directory to add your theme's configuration files inside `src/app/themes/`.\n\n### 2. Create SCSS File\n\nInside your new directory, create a `.scss` file for your theme's CSS variables.\n\n**File:** `src/app/themes/galaxy.theme.scss`\n\nThis file must define a selector for your theme (`body.theme-galaxy`) and override the global CSS custom properties for colors.\n\n```scss\nbody.theme-galaxy {\n  /* Define primary and secondary colors for the Galaxy theme. */\n  /* These variables will be used by TailwindCSS and custom components. */\n  \n  /* Example HEX: #8A2BE2 */\n  --theme-primary-50: 138 43 226;\n  /* Example HEX: #4B0082 */\n  --theme-primary-100: 75 0 130;\n\n  /* Example HEX: #E6E6FA */\n  --theme-secondary-50: 230 230 250;\n  /* Example HEX: #2C004C */\n  --theme-secondary-100: 44 0 76;\n}\n```\n\n### 3. Create TypeScript Configuration File\nNext, create the TypeScript configuration file. This defines all the non-CSS aspects of your theme.\n\n**File:** `src/app/themes/galaxy.theme.ts`\n\n```ts\nimport { NavLink, ThemeConfig } from '../theme.interfaces';\n\n// Define navigation links for the theme\nconst galaxyHeaderLinks: NavLink[] = [\n {\n    label: 'HEADER._home', // Translation key\n    url: '/',\n    isRouterLink: true\n },\n {\n    label: 'HEADER._starmaps',\n    id: 'starmapsDropdown',\n    children: [\n        { label: 'HEADER._browse_maps', url: '/search', isRouterLink: true },\n        { label: 'HEADER._about_maps', url: '/about-starmaps', isRouterLink: true }\n    ]\n }\n];\n\n// Export the main theme configuration object\nexport const GALAXY_THEME_CONFIG: ThemeConfig = {\n    name: 'Galaxy', // This MUST match the name used in the SCSS class (theme-galaxy)\n    displayName: 'Galaxy Interstellar Marketplace',\n    assets: {\n        logoUrl: 'assets/themes/galaxy/galaxy-logo.svg',\n        jumboBgUrl: 'assets/themes/galaxy/stars-background.png',\n        cardDefaultBgUrl: 'assets/themes/galaxy/nebula-background.png'\n    },\n    links: {\n        headerLinks: galaxyHeaderLinks,\n        // footerLinks can be defined similarly\n    },\n    dashboard: {\n        showFeaturedOfferings: true,\n        showPlatformBenefits: false,\n    }\n};\n```\n\n### 4. Register the Theme\nYou must register the new theme in two places for it to be loaded by the application.\n\n**A. Register SCSS:** Import your new `.scss` file in the main `styles.css` file.\n\n**File:** `src/styles.css`\n``` css\n/* ... */\n@import 'app/themes/dome.theme.scss';\n@import 'app/themes/bae.theme.scss';\n@import 'app/themes/galaxy.theme.scss'; /* Add this line */\n/* ... */\n```\n\n**B. Register TypeScript Config:** Import your new config object into and add it to the array. `src/app/themes/index.ts``AVAILABLE_THEMES`\n\n**File:** (Create if it doesn't exist) `src/app/themes/index.ts`\n``` typescript\nimport { ThemeConfig } from './theme.interfaces';\nimport { DOME_THEME_CONFIG } from './dome/dome.theme';\nimport { BAE_THEME_CONFIG } from './bae/bae.theme';\nimport { GALAXY_THEME_CONFIG } from './galaxy/galaxy.theme'; // 1. Import new theme\n\nexport const AVAILABLE_THEMES: ThemeConfig[] = [\n  DOME_THEME_CONFIG,\n  BAE_THEME_CONFIG,\n  GALAXY_THEME_CONFIG // 2. Add to array\n];\n```\n\n### 5. Add Theme Assets\nFinally, place all your theme-specific assets (logo, images, etc.) in the corresponding folder under `src/assets/themes/`.\n\n``` \nsrc/assets/themes/galaxy/\n  - galaxy-logo.svg\n  - stars-background.png\n  - nebula-background.png\n```\n\n## Using Theme Data in Components\nTo use theme data (like the logo URL) in a component, inject the and subscribe to the observable. The best practice is to use\nthe `async` pipe in your template. `ThemeService currentTheme$`\n\n**Example:** `header.component.ts`\n\n``` typescript\nimport { Component } from '@angular/core';\nimport { ThemeService } from '../../services/theme.service';\n\n@Component({\n  selector: 'app-header',\n  template: `\n    \u003cng-container *ngIf=\"themeService.currentTheme$ | async as theme\"\u003e\n      \u003cimg [src]=\"theme.assets.logoUrl\" alt=\"Logo\"\u003e\n      \u003c!-- Access other theme properties here --\u003e\n    \u003c/ng-container\u003e\n  `\n})\nexport class HeaderComponent {\n  constructor(public themeService: ThemeService) {}\n}\n```\n\n## Translations (i18n)\nThe theming system is integrated with `ngx-translate` for internationalization. Notice that link labels in the theme \nconfiguration file are translation keys (e.g., ). `HEADER._home`\n\nWhen creating a new theme or adding new links, you must add these keys to the language JSON files.\n**Example:** `src/assets/i18n/themes/en-galaxy.json`\n``` json\n{\n  \"HEADER\": {\n    \"_starmaps\": \"Starmaps\",          // Add new key for Galaxy theme\n    \"_browse_maps\": \"Browse Maps\",    // Add new key for Galaxy theme\n    \"_about_maps\": \"About Starmaps\"   // Add new key for Galaxy theme\n  },\n  \"FOOTER\": {\n    // ...\n  }\n}\n```\nEnsure that any new keys are added to the JSON files for all supported languages (e.g., , `fr-galaxy.json`). `es-galaxy.json`\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fficodes%2Fbae-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fficodes%2Fbae-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fficodes%2Fbae-frontend/lists"}