From e8ee1fdb3d4c7c4f0ae9633219328ff84c65b769 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 22 Jan 2026 09:51:48 +0000 Subject: [PATCH 1/7] Initial plan From 4ec212a28793a7e646f241afcf923b8fed5d243a Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 22 Jan 2026 09:56:37 +0000 Subject: [PATCH 2/7] Add translation support infrastructure: metadata, language detection, and UI components Co-authored-by: sinedied <593151+sinedied@users.noreply.github.com> --- packages/database/src/lib/entry.ts | 2 +- packages/database/src/lib/language.ts | 2 +- .../app/shared/components/header.component.ts | 10 +- .../components/language-selector.component.ts | 123 ++++++++++++++++++ .../website/src/app/shared/frontmatter.ts | 2 + .../src/app/workshop/workshop.component.ts | 95 +++++++++++++- 6 files changed, 230 insertions(+), 4 deletions(-) create mode 100644 packages/website/src/app/shared/components/language-selector.component.ts diff --git a/packages/database/src/lib/entry.ts b/packages/database/src/lib/entry.ts index f9a984ea..2a1a3ed2 100644 --- a/packages/database/src/lib/entry.ts +++ b/packages/database/src/lib/entry.ts @@ -33,7 +33,7 @@ export async function createEntry( lastUpdated: extraData.lastUpdated ?? file.lastModified, url: extraData.url ?? getUrl(file.path), githubUrl: extraData.githubUrl ?? undefined, - language: extraData.language ?? getLanguageFromFile(file.path), + language: extraData.language ?? file.meta.language ?? getLanguageFromFile(file.path), level: file.meta.level ?? 'beginner', audience: parseCsvOrArray(file.meta.audience) ?? ['students', 'pro devs'], ...(searchTranslations ? { translations: await findTranslations(file.path) } : {}) diff --git a/packages/database/src/lib/language.ts b/packages/database/src/lib/language.ts index c91415ce..26677bb8 100644 --- a/packages/database/src/lib/language.ts +++ b/packages/database/src/lib/language.ts @@ -5,7 +5,7 @@ import { ContentEntry } from '../../../website/src/app/catalog/content-entry.js' import { getWorkshops } from './workshop.js'; import { createEntry } from './entry.js'; -const languageRegex = /.*?\.([a-zA-Z]{2})\.md$/; +const languageRegex = /.*?\.([a-zA-Z]{2}(?:_[a-zA-Z]{2})?)\.md$/; const translationsFolder = 'translations'; export function getLanguageFromFile(filePath: string): string { diff --git a/packages/website/src/app/shared/components/header.component.ts b/packages/website/src/app/shared/components/header.component.ts index 6f3a0034..bd9c987d 100644 --- a/packages/website/src/app/shared/components/header.component.ts +++ b/packages/website/src/app/shared/components/header.component.ts @@ -2,12 +2,13 @@ import { Component, Input } from '@angular/core'; import { CommonModule } from '@angular/common'; import { IconComponent } from './icon.component'; import { SidebarComponent } from './sidebar.component'; +import { LanguageSelectorComponent, LanguageOption } from './language-selector.component'; import { Link } from '../link'; @Component({ selector: 'app-header', standalone: true, - imports: [CommonModule, IconComponent], + imports: [CommonModule, IconComponent, LanguageSelectorComponent], template: `
@@ -20,6 +21,11 @@ import { Link } from '../link';
{{ title }}
+
{{ link.text @@ -153,6 +159,8 @@ export class HeaderComponent { @Input() links: Link[] = []; @Input() sidebar: SidebarComponent | undefined; @Input() type: string = ''; + @Input() languages: LanguageOption[] = []; + @Input() currentLanguage: string = 'en'; toggleSidebar(event: Event) { if (this.sidebar) { diff --git a/packages/website/src/app/shared/components/language-selector.component.ts b/packages/website/src/app/shared/components/language-selector.component.ts new file mode 100644 index 00000000..c5acf666 --- /dev/null +++ b/packages/website/src/app/shared/components/language-selector.component.ts @@ -0,0 +1,123 @@ +import { Component, Input } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { IconComponent } from './icon.component'; + +export interface LanguageOption { + code: string; + label: string; + url: string; +} + +@Component({ + selector: 'app-language-selector', + standalone: true, + imports: [CommonModule, IconComponent], + template: ` +
+ +
+ + {{ lang.label }} + +
+
+ `, + styles: [ + ` + .language-selector { + position: relative; + display: inline-block; + } + + .language-button { + display: flex; + align-items: center; + gap: var(--space-xs); + background: transparent; + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 4px; + color: var(--text-light); + padding: var(--space-xs) var(--space-sm); + cursor: pointer; + transition: all var(--transition-duration); + white-space: nowrap; + + &:hover { + background: rgba(255, 255, 255, 0.1); + border-color: rgba(255, 255, 255, 0.5); + } + } + + .current-language { + font-size: var(--text-size-sm); + text-transform: uppercase; + } + + .chevron { + opacity: 0.7; + } + + .language-dropdown { + position: absolute; + top: calc(100% + var(--space-xs)); + right: 0; + background: var(--background); + border: 1px solid var(--border-color); + border-radius: 4px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + min-width: 200px; + z-index: 1000; + overflow: hidden; + } + + .language-option { + display: block; + padding: var(--space-sm) var(--space-md); + color: var(--text); + text-decoration: none; + transition: background var(--transition-duration); + + &:hover { + background: var(--hover-color); + } + + &.active { + background: var(--primary); + color: var(--text-light); + font-weight: 500; + } + } + ` + ] +}) +export class LanguageSelectorComponent { + @Input() languages: LanguageOption[] = []; + @Input() currentLanguage: string = 'en'; + isOpen: boolean = false; + + toggleDropdown(event: Event) { + event.preventDefault(); + event.stopPropagation(); + this.isOpen = !this.isOpen; + + if (this.isOpen) { + // Close dropdown when clicking outside + setTimeout(() => { + document.addEventListener('click', this.closeDropdown.bind(this), { once: true }); + }); + } + } + + closeDropdown() { + this.isOpen = false; + } +} diff --git a/packages/website/src/app/shared/frontmatter.ts b/packages/website/src/app/shared/frontmatter.ts index 5c3cf3c9..0c392612 100644 --- a/packages/website/src/app/shared/frontmatter.ts +++ b/packages/website/src/app/shared/frontmatter.ts @@ -21,6 +21,8 @@ export type FrontMatterData = Partial<{ oc_id: string; audience: string; level: string; + language: string; + translations: string | string[]; }>; export interface FrontMatterParseResult { diff --git a/packages/website/src/app/workshop/workshop.component.ts b/packages/website/src/app/workshop/workshop.component.ts index 15d9a097..666c7b44 100644 --- a/packages/website/src/app/workshop/workshop.component.ts +++ b/packages/website/src/app/workshop/workshop.component.ts @@ -7,12 +7,15 @@ import { FooterComponent } from '../shared/components/footer.component'; import { SidebarComponent } from '../shared/components/sidebar.component'; import { LoaderComponent } from '../shared/components/loader.component'; import { CopyComponent } from '../shared/components/copy.component'; +import { LanguageOption } from '../shared/components/language-selector.component'; import { Workshop, loadWorkshop, createMenuLinks } from './workshop'; import { PaginationComponent } from './pagination.component'; import { MenuLink } from '../shared/link'; import { debounce } from '../shared/event'; import { scrollToId, scrollToTop } from '../shared/scroll'; import { getRepoPath } from '../shared/loader'; +import { loadCatalog, ContentEntry } from '../catalog/content-entry'; +import { defaultLanguage } from '../shared/constants'; @Component({ selector: 'app-workshop', @@ -29,7 +32,7 @@ import { getRepoPath } from '../shared/loader'; ], template: `
- +
{ if (!this.scrollInit) { @@ -155,6 +160,7 @@ export class WorkshopComponent { this.workshop = await loadWorkshop(repoPath, { wtid, ocid, vars }); this.menuLinks = createMenuLinks(this.workshop); this.updateAuthors(); + await this.loadLanguages(repoPath); } catch (error) { console.error(error); } @@ -207,4 +213,91 @@ export class WorkshopComponent { // from browser-generated scroll events setTimeout(() => (this.enableScrollEvent = true)); } + + async loadLanguages(repoPath: string) { + try { + const catalog = await loadCatalog(); + const normalizedRepoPath = this.normalizeRepoPath(repoPath); + + // Find the current workshop in the catalog + const workshopEntry = catalog.find(entry => { + const entryPath = this.normalizeRepoPath(entry.url); + return entryPath === normalizedRepoPath; + }); + + if (!workshopEntry) { + return; + } + + // Get the current language + this.currentLanguage = this.workshop?.meta?.language || workshopEntry.language || defaultLanguage; + + // Check if this is a translation or the base workshop + let baseEntry: ContentEntry | undefined = workshopEntry; + let isTranslation = false; + + // If the current workshop is a translation, find the base workshop + for (const entry of catalog) { + if (entry.translations?.some(t => this.normalizeRepoPath(t.url) === normalizedRepoPath)) { + baseEntry = entry; + isTranslation = true; + break; + } + } + + if (!baseEntry) { + return; + } + + // Build language options + const languages: LanguageOption[] = []; + + // Add the base language first (always labeled as "default") + const baseLanguage = baseEntry.language || defaultLanguage; + languages.push({ + code: baseLanguage, + label: `default (${baseLanguage})`, + url: this.getWorkshopUrl(baseEntry.url) + }); + + // Add translations sorted alphabetically + if (baseEntry.translations && baseEntry.translations.length > 0) { + const sortedTranslations = [...baseEntry.translations].sort((a, b) => + a.language.localeCompare(b.language) + ); + + for (const translation of sortedTranslations) { + languages.push({ + code: translation.language, + label: translation.language, + url: this.getWorkshopUrl(translation.url) + }); + } + } + + // Only show language selector if there are translations + if (languages.length > 1) { + this.languages = languages; + } + } catch (error) { + console.error('Failed to load languages:', error); + } + } + + normalizeRepoPath(path: string): string { + // Remove the domain and base path, keep only the relative path + const url = new URL(path, window.location.origin); + let normalized = url.pathname.replace(/^\/[^/]*\/workshop\//, ''); + // Ensure trailing slash for consistency + if (!normalized.endsWith('/') && !normalized.endsWith('.md')) { + normalized += '/'; + } + return normalized; + } + + getWorkshopUrl(catalogUrl: string): string { + // Extract the workshop path from the catalog URL + const url = new URL(catalogUrl, window.location.origin); + return url.pathname + url.search; + } } From fe1b61852b92d8de870ca7c7ff250e7d3a024b36 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 22 Jan 2026 10:13:12 +0000 Subject: [PATCH 3/7] Complete translation UI support with working language selector Co-authored-by: sinedied <593151+sinedied@users.noreply.github.com> --- packages/database/src/lib/entry.ts | 2 +- packages/database/src/lib/language.ts | 29 +++++++- .../src/app/workshop/workshop.component.ts | 74 ++++++++++++------- .../translations/workshop.es_ES.md | 25 +++++++ .../translations/workshop.fr.md | 25 +++++++ workshops/test-translations/workshop.md | 26 +++++++ 6 files changed, 152 insertions(+), 29 deletions(-) create mode 100644 workshops/test-translations/translations/workshop.es_ES.md create mode 100644 workshops/test-translations/translations/workshop.fr.md create mode 100644 workshops/test-translations/workshop.md diff --git a/packages/database/src/lib/entry.ts b/packages/database/src/lib/entry.ts index 2a1a3ed2..90c8916d 100644 --- a/packages/database/src/lib/entry.ts +++ b/packages/database/src/lib/entry.ts @@ -36,7 +36,7 @@ export async function createEntry( language: extraData.language ?? file.meta.language ?? getLanguageFromFile(file.path), level: file.meta.level ?? 'beginner', audience: parseCsvOrArray(file.meta.audience) ?? ['students', 'pro devs'], - ...(searchTranslations ? { translations: await findTranslations(file.path) } : {}) + ...(searchTranslations ? { translations: await findTranslations(file.path, file) } : {}) }; return { ...entryWithoutId, diff --git a/packages/database/src/lib/language.ts b/packages/database/src/lib/language.ts index 26677bb8..5ee434a4 100644 --- a/packages/database/src/lib/language.ts +++ b/packages/database/src/lib/language.ts @@ -1,9 +1,12 @@ import path from 'path'; import glob from 'fast-glob'; +import { promises as fs } from 'fs'; import { defaultLanguage } from '../../../website/src/app/shared/constants.js'; import { ContentEntry } from '../../../website/src/app/catalog/content-entry.js'; import { getWorkshops } from './workshop.js'; import { createEntry } from './entry.js'; +import { FileInfo } from './workshop.js'; +import { parseCsvOrArray } from './util.js'; const languageRegex = /.*?\.([a-zA-Z]{2}(?:_[a-zA-Z]{2})?)\.md$/; const translationsFolder = 'translations'; @@ -13,14 +16,36 @@ export function getLanguageFromFile(filePath: string): string { return match ? match[1] : defaultLanguage; } -export async function findTranslations(filePath: string): Promise { +export async function findTranslations(filePath: string, fileInfo?: FileInfo): Promise { const dir = path.dirname(filePath); const originalLanguage = getLanguageFromFile(filePath); const extension = (originalLanguage !== defaultLanguage ? `.${originalLanguage}` : '') + path.extname(filePath); const baseName = path.basename(filePath, extension); const translationsDir = path.join(dir, translationsFolder); + + // Find translations from filesystem const translations = glob.sync(`${translationsDir}/${baseName}*.md`); - const translatedFiles = await getWorkshops(translations); + + // Also check metadata for translations list + const metadataTranslations: string[] = []; + if (fileInfo?.meta?.translations) { + const translationCodes = parseCsvOrArray(fileInfo.meta.translations); + for (const langCode of translationCodes) { + const translationPath = path.join(translationsDir, `${baseName}.${langCode}.md`); + // Only add if file exists and not already in the list + try { + await fs.access(translationPath); + if (!translations.includes(translationPath)) { + metadataTranslations.push(translationPath); + } + } catch { + console.warn(`Translation file not found for language '${langCode}': ${translationPath}`); + } + } + } + + const allTranslations = [...translations, ...metadataTranslations]; + const translatedFiles = await getWorkshops(allTranslations); const entriesPromises = translatedFiles.map((file) => createEntry(file, false)); return Promise.all(entriesPromises); } diff --git a/packages/website/src/app/workshop/workshop.component.ts b/packages/website/src/app/workshop/workshop.component.ts index 666c7b44..66cd3142 100644 --- a/packages/website/src/app/workshop/workshop.component.ts +++ b/packages/website/src/app/workshop/workshop.component.ts @@ -219,36 +219,42 @@ export class WorkshopComponent { const catalog = await loadCatalog(); const normalizedRepoPath = this.normalizeRepoPath(repoPath); - // Find the current workshop in the catalog - const workshopEntry = catalog.find(entry => { + // Find the workshop entry - either as a main entry or as a translation + let workshopEntry: ContentEntry | undefined; + let baseEntry: ContentEntry | undefined; + let isTranslation = false; + + // First, try to find as a main entry + workshopEntry = catalog.find(entry => { const entryPath = this.normalizeRepoPath(entry.url); return entryPath === normalizedRepoPath; }); - if (!workshopEntry) { - return; - } - - // Get the current language - this.currentLanguage = this.workshop?.meta?.language || workshopEntry.language || defaultLanguage; - - // Check if this is a translation or the base workshop - let baseEntry: ContentEntry | undefined = workshopEntry; - let isTranslation = false; - - // If the current workshop is a translation, find the base workshop - for (const entry of catalog) { - if (entry.translations?.some(t => this.normalizeRepoPath(t.url) === normalizedRepoPath)) { - baseEntry = entry; - isTranslation = true; - break; + if (workshopEntry) { + // Found as main entry + baseEntry = workshopEntry; + } else { + // Not found as main entry, check if it's a translation + for (const entry of catalog) { + if (entry.translations?.some(t => this.normalizeRepoPath(t.url) === normalizedRepoPath)) { + baseEntry = entry; + isTranslation = true; + break; + } } } if (!baseEntry) { + // Not found at all return; } + // Get the current language + this.currentLanguage = this.workshop?.meta?.language || + (isTranslation ? normalizedRepoPath.match(/\.([a-z]{2}(?:_[A-Z]{2})?)\.md$/)?.[1] : undefined) || + baseEntry.language || + defaultLanguage; + // Build language options const languages: LanguageOption[] = []; @@ -285,19 +291,35 @@ export class WorkshopComponent { } normalizeRepoPath(path: string): string { - // Remove the domain and base path, keep only the relative path - const url = new URL(path, window.location.origin); - let normalized = url.pathname.replace(/^\/[^/]*\/workshop\//, ''); - // Ensure trailing slash for consistency + // Handle both relative paths and full URLs + let normalized: string; + + if (path.startsWith('http')) { + // Full URL - extract the path after /workshop/ + const url = new URL(path); + normalized = url.pathname.replace(/^.*\/workshop\//, ''); + } else { + // Relative path - use as is + normalized = path; + } + + // Ensure trailing slash for consistency (unless it's a .md file) if (!normalized.endsWith('/') && !normalized.endsWith('.md')) { normalized += '/'; } + return normalized; } getWorkshopUrl(catalogUrl: string): string { - // Extract the workshop path from the catalog URL - const url = new URL(catalogUrl, window.location.origin); - return url.pathname + url.search; + // The catalog URL is either a full URL or a relative path + if (catalogUrl.startsWith('http')) { + // Full URL - extract and use as is + const url = new URL(catalogUrl); + return url.pathname + url.search; + } else { + // Relative path - construct workshop URL with src parameter + return `/workshop/?src=${encodeURIComponent(catalogUrl)}`; + } } } diff --git a/workshops/test-translations/translations/workshop.es_ES.md b/workshops/test-translations/translations/workshop.es_ES.md new file mode 100644 index 00000000..6bf2df1f --- /dev/null +++ b/workshops/test-translations/translations/workshop.es_ES.md @@ -0,0 +1,25 @@ +--- +published: true +type: workshop +title: Taller de Prueba con Traducciones +short_title: Prueba de Traducción +description: Un taller de prueba para demostrar el soporte de traducciones +level: beginner +authors: + - Test Author +contacts: + - test@example.com +duration_minutes: 30 +tags: test, translation +language: es_ES +--- + +# Taller de Prueba con Traducciones + +Este es un taller de prueba para demostrar la función de soporte de traducciones. + +--- + +## Sección 2 + +Esta es la segunda sección del taller. diff --git a/workshops/test-translations/translations/workshop.fr.md b/workshops/test-translations/translations/workshop.fr.md new file mode 100644 index 00000000..2da9b5be --- /dev/null +++ b/workshops/test-translations/translations/workshop.fr.md @@ -0,0 +1,25 @@ +--- +published: true +type: workshop +title: Atelier de Test avec Traductions +short_title: Test de Traduction +description: Un atelier de test pour démontrer le support des traductions +level: beginner +authors: + - Test Author +contacts: + - test@example.com +duration_minutes: 30 +tags: test, translation +language: fr +--- + +# Atelier de Test avec Traductions + +Ceci est un atelier de test pour démontrer la fonctionnalité de support des traductions. + +--- + +## Section 2 + +Ceci est la deuxième section de l'atelier. diff --git a/workshops/test-translations/workshop.md b/workshops/test-translations/workshop.md new file mode 100644 index 00000000..758473d8 --- /dev/null +++ b/workshops/test-translations/workshop.md @@ -0,0 +1,26 @@ +--- +published: true +type: workshop +title: Test Workshop with Translations +short_title: Translation Test +description: A test workshop to demonstrate translation support +level: beginner +authors: + - Test Author +contacts: + - test@example.com +duration_minutes: 30 +tags: test, translation +language: en +translations: [fr, es_ES] +--- + +# Test Workshop with Translations + +This is a test workshop to demonstrate the translation support feature. + +--- + +## Section 2 + +This is the second section of the workshop. From 62934bab22eef5c8c73854caf9d801db1c7d0e59 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 22 Jan 2026 10:14:23 +0000 Subject: [PATCH 4/7] Fix regex patterns to correctly match uppercase country codes (es_ES, fr_FR, etc.) Co-authored-by: sinedied <593151+sinedied@users.noreply.github.com> --- packages/database/src/lib/language.ts | 2 +- packages/website/src/app/workshop/workshop.component.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/database/src/lib/language.ts b/packages/database/src/lib/language.ts index 5ee434a4..fdae01a1 100644 --- a/packages/database/src/lib/language.ts +++ b/packages/database/src/lib/language.ts @@ -8,7 +8,7 @@ import { createEntry } from './entry.js'; import { FileInfo } from './workshop.js'; import { parseCsvOrArray } from './util.js'; -const languageRegex = /.*?\.([a-zA-Z]{2}(?:_[a-zA-Z]{2})?)\.md$/; +const languageRegex = /.*?\.([a-zA-Z]{2}(?:_[A-Z]{2})?)\.md$/; const translationsFolder = 'translations'; export function getLanguageFromFile(filePath: string): string { diff --git a/packages/website/src/app/workshop/workshop.component.ts b/packages/website/src/app/workshop/workshop.component.ts index 66cd3142..d5f8ab13 100644 --- a/packages/website/src/app/workshop/workshop.component.ts +++ b/packages/website/src/app/workshop/workshop.component.ts @@ -251,7 +251,7 @@ export class WorkshopComponent { // Get the current language this.currentLanguage = this.workshop?.meta?.language || - (isTranslation ? normalizedRepoPath.match(/\.([a-z]{2}(?:_[A-Z]{2})?)\.md$/)?.[1] : undefined) || + (isTranslation ? normalizedRepoPath.match(/\.([a-zA-Z]{2}(?:_[A-Z]{2})?)\.md$/)?.[1] : undefined) || baseEntry.language || defaultLanguage; From cb01e4c3eb066bc3fa54a9ca30057252d5d184fe Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 22 Jan 2026 10:17:05 +0000 Subject: [PATCH 5/7] Fix race condition in language selector dropdown using queueMicrotask Co-authored-by: sinedied <593151+sinedied@users.noreply.github.com> --- .../src/app/shared/components/language-selector.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/website/src/app/shared/components/language-selector.component.ts b/packages/website/src/app/shared/components/language-selector.component.ts index c5acf666..12dffdf9 100644 --- a/packages/website/src/app/shared/components/language-selector.component.ts +++ b/packages/website/src/app/shared/components/language-selector.component.ts @@ -110,8 +110,8 @@ export class LanguageSelectorComponent { this.isOpen = !this.isOpen; if (this.isOpen) { - // Close dropdown when clicking outside - setTimeout(() => { + // Close dropdown when clicking outside - use queueMicrotask to avoid race condition + queueMicrotask(() => { document.addEventListener('click', this.closeDropdown.bind(this), { once: true }); }); } From 508fb66e8eadf21ea8b7ba3e6f8cc5969a214f73 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 22 Jan 2026 10:28:37 +0000 Subject: [PATCH 6/7] Replace custom dropdown with native HTML5 select and remove catalog dependency from workshop component Co-authored-by: sinedied <593151+sinedied@users.noreply.github.com> --- .../components/language-selector.component.ts | 103 ++++------- .../src/app/workshop/workshop.component.ts | 175 +++++++++--------- 2 files changed, 117 insertions(+), 161 deletions(-) diff --git a/packages/website/src/app/shared/components/language-selector.component.ts b/packages/website/src/app/shared/components/language-selector.component.ts index 12dffdf9..fad6a22d 100644 --- a/packages/website/src/app/shared/components/language-selector.component.ts +++ b/packages/website/src/app/shared/components/language-selector.component.ts @@ -14,86 +14,60 @@ export interface LanguageOption { imports: [CommonModule, IconComponent], template: `
- -
- +
`, styles: [ ` .language-selector { - position: relative; - display: inline-block; - } - - .language-button { display: flex; align-items: center; gap: var(--space-xs); + } + + .globe-icon { + color: var(--text-light); + } + + .language-select { background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; color: var(--text-light); padding: var(--space-xs) var(--space-sm); + font-size: var(--text-size-sm); cursor: pointer; transition: all var(--transition-duration); - white-space: nowrap; + text-transform: uppercase; &:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); } - } - - .current-language { - font-size: var(--text-size-sm); - text-transform: uppercase; - } - - .chevron { - opacity: 0.7; - } - - .language-dropdown { - position: absolute; - top: calc(100% + var(--space-xs)); - right: 0; - background: var(--background); - border: 1px solid var(--border-color); - border-radius: 4px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); - min-width: 200px; - z-index: 1000; - overflow: hidden; - } - - .language-option { - display: block; - padding: var(--space-sm) var(--space-md); - color: var(--text); - text-decoration: none; - transition: background var(--transition-duration); - &:hover { - background: var(--hover-color); + &:focus { + outline: 2px solid rgba(255, 255, 255, 0.5); + outline-offset: 2px; } - &.active { - background: var(--primary); - color: var(--text-light); - font-weight: 500; + option { + background: var(--background); + color: var(--text); + text-transform: none; } } ` @@ -102,22 +76,13 @@ export interface LanguageOption { export class LanguageSelectorComponent { @Input() languages: LanguageOption[] = []; @Input() currentLanguage: string = 'en'; - isOpen: boolean = false; - toggleDropdown(event: Event) { - event.preventDefault(); - event.stopPropagation(); - this.isOpen = !this.isOpen; - - if (this.isOpen) { - // Close dropdown when clicking outside - use queueMicrotask to avoid race condition - queueMicrotask(() => { - document.addEventListener('click', this.closeDropdown.bind(this), { once: true }); - }); + onLanguageChange(event: Event) { + const select = event.target as HTMLSelectElement; + const selectedOption = select.options[select.selectedIndex]; + const url = selectedOption.getAttribute('data-url'); + if (url) { + window.location.href = url; } } - - closeDropdown() { - this.isOpen = false; - } } diff --git a/packages/website/src/app/workshop/workshop.component.ts b/packages/website/src/app/workshop/workshop.component.ts index d5f8ab13..d83c2aee 100644 --- a/packages/website/src/app/workshop/workshop.component.ts +++ b/packages/website/src/app/workshop/workshop.component.ts @@ -14,7 +14,6 @@ import { MenuLink } from '../shared/link'; import { debounce } from '../shared/event'; import { scrollToId, scrollToTop } from '../shared/scroll'; import { getRepoPath } from '../shared/loader'; -import { loadCatalog, ContentEntry } from '../catalog/content-entry'; import { defaultLanguage } from '../shared/constants'; @Component({ @@ -160,7 +159,7 @@ export class WorkshopComponent { this.workshop = await loadWorkshop(repoPath, { wtid, ocid, vars }); this.menuLinks = createMenuLinks(this.workshop); this.updateAuthors(); - await this.loadLanguages(repoPath); + this.loadLanguages(repoPath); } catch (error) { console.error(error); } @@ -214,112 +213,104 @@ export class WorkshopComponent { setTimeout(() => (this.enableScrollEvent = true)); } - async loadLanguages(repoPath: string) { - try { - const catalog = await loadCatalog(); - const normalizedRepoPath = this.normalizeRepoPath(repoPath); - - // Find the workshop entry - either as a main entry or as a translation - let workshopEntry: ContentEntry | undefined; - let baseEntry: ContentEntry | undefined; - let isTranslation = false; + loadLanguages(repoPath: string) { + if (!this.workshop) { + return; + } - // First, try to find as a main entry - workshopEntry = catalog.find(entry => { - const entryPath = this.normalizeRepoPath(entry.url); - return entryPath === normalizedRepoPath; - }); + // Get current language from metadata or detect from path + const languageFromMeta = this.workshop.meta?.language; + const languageFromPath = this.getLanguageFromPath(repoPath); + this.currentLanguage = languageFromMeta || languageFromPath || defaultLanguage; - if (workshopEntry) { - // Found as main entry - baseEntry = workshopEntry; - } else { - // Not found as main entry, check if it's a translation - for (const entry of catalog) { - if (entry.translations?.some(t => this.normalizeRepoPath(t.url) === normalizedRepoPath)) { - baseEntry = entry; - isTranslation = true; - break; - } - } - } + // Get translations from metadata + const translationsMeta = this.workshop.meta?.translations; + if (!translationsMeta || (Array.isArray(translationsMeta) && translationsMeta.length === 0)) { + // No translations defined + return; + } - if (!baseEntry) { - // Not found at all - return; - } + // Parse translations array + const translationCodes = Array.isArray(translationsMeta) + ? translationsMeta + : translationsMeta.split(',').map(t => t.trim()); + + // Build language options + const languages: LanguageOption[] = []; - // Get the current language - this.currentLanguage = this.workshop?.meta?.language || - (isTranslation ? normalizedRepoPath.match(/\.([a-zA-Z]{2}(?:_[A-Z]{2})?)\.md$/)?.[1] : undefined) || - baseEntry.language || - defaultLanguage; + // Determine base path + const basePath = this.getBasePath(repoPath, languageFromPath); - // Build language options - const languages: LanguageOption[] = []; + // Add base language first (always labeled as "default") + const baseLanguage = languageFromMeta || defaultLanguage; + languages.push({ + code: baseLanguage, + label: `default (${baseLanguage})`, + url: this.buildWorkshopUrl(basePath, null) + }); - // Add the base language first (always labeled as "default") - const baseLanguage = baseEntry.language || defaultLanguage; + // Add translations sorted alphabetically + const sortedTranslations = [...translationCodes].sort((a, b) => a.localeCompare(b)); + for (const langCode of sortedTranslations) { languages.push({ - code: baseLanguage, - label: `default (${baseLanguage})`, - url: this.getWorkshopUrl(baseEntry.url) + code: langCode, + label: langCode, + url: this.buildWorkshopUrl(basePath, langCode) }); + } - // Add translations sorted alphabetically - if (baseEntry.translations && baseEntry.translations.length > 0) { - const sortedTranslations = [...baseEntry.translations].sort((a, b) => - a.language.localeCompare(b.language) - ); + // Only show language selector if there are translations + if (languages.length > 1) { + this.languages = languages; + } + } - for (const translation of sortedTranslations) { - languages.push({ - code: translation.language, - label: translation.language, - url: this.getWorkshopUrl(translation.url) - }); - } - } + getLanguageFromPath(repoPath: string): string | null { + // Extract language code from path like "workshop.fr.md" or "translations/workshop.ja.md" + const match = repoPath.match(/\.([a-zA-Z]{2}(?:_[A-Z]{2})?)\.md$/); + return match ? match[1] : null; + } - // Only show language selector if there are translations - if (languages.length > 1) { - this.languages = languages; - } - } catch (error) { - console.error('Failed to load languages:', error); + getBasePath(repoPath: string, currentLang: string | null): string { + // Remove language code and extension from path to get base path + if (currentLang) { + // Path is like "workshops/my-workshop/translations/workshop.fr.md" + // or "workshops/my-workshop/workshop.fr.md" + return repoPath.replace(new RegExp(`\\.${currentLang}\\.md$`), '.md') + .replace('/translations/', '/'); } + // Already a base path + return repoPath; } - normalizeRepoPath(path: string): string { - // Handle both relative paths and full URLs - let normalized: string; - - if (path.startsWith('http')) { - // Full URL - extract the path after /workshop/ - const url = new URL(path); - normalized = url.pathname.replace(/^.*\/workshop\//, ''); - } else { - // Relative path - use as is - normalized = path; + buildWorkshopUrl(basePath: string, langCode: string | null): string { + const { step, wtid, ocid, vars } = getQueryParams(); + let workshopPath = basePath; + + if (langCode) { + // Build translation path: insert "translations/" folder and language code + // basePath could be like "workshops/my-workshop/workshop.md" or "my-workshop/" + if (workshopPath.endsWith('.md')) { + const parts = workshopPath.split('/'); + const fileName = parts.pop() || ''; + const baseName = fileName.replace('.md', ''); + workshopPath = `${parts.join('/')}/translations/${baseName}.${langCode}.md`; + } else { + // Handle directory path + workshopPath = `${workshopPath}translations/workshop.${langCode}.md`; + } } + + // Build query string + const params = new URLSearchParams(); + if (step) params.set('step', step); + if (wtid) params.set('wtid', wtid); + if (ocid) params.set('ocid', ocid); + if (vars) params.set('vars', vars); - // Ensure trailing slash for consistency (unless it's a .md file) - if (!normalized.endsWith('/') && !normalized.endsWith('.md')) { - normalized += '/'; - } + const queryString = params.toString(); + const baseUrl = `${window.location.origin}${window.location.pathname.split('?')[0]}`; - return normalized; - } - - getWorkshopUrl(catalogUrl: string): string { - // The catalog URL is either a full URL or a relative path - if (catalogUrl.startsWith('http')) { - // Full URL - extract and use as is - const url = new URL(catalogUrl); - return url.pathname + url.search; - } else { - // Relative path - construct workshop URL with src parameter - return `/workshop/?src=${encodeURIComponent(catalogUrl)}`; - } + return `${baseUrl}?src=${workshopPath}${queryString ? '&' + queryString : ''}`; } } From aacaa3348b1bea130267e379613f73e3bf5b0958 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 22 Jan 2026 10:30:48 +0000 Subject: [PATCH 7/7] Fix code review issues: avoid regex with user input, add URL encoding, and error handling Co-authored-by: sinedied <593151+sinedied@users.noreply.github.com> --- .../shared/components/language-selector.component.ts | 2 ++ .../website/src/app/workshop/workshop.component.ts | 11 ++++++++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/website/src/app/shared/components/language-selector.component.ts b/packages/website/src/app/shared/components/language-selector.component.ts index fad6a22d..48ca7f00 100644 --- a/packages/website/src/app/shared/components/language-selector.component.ts +++ b/packages/website/src/app/shared/components/language-selector.component.ts @@ -83,6 +83,8 @@ export class LanguageSelectorComponent { const url = selectedOption.getAttribute('data-url'); if (url) { window.location.href = url; + } else { + console.error('Language selector: Invalid URL for selected language'); } } } diff --git a/packages/website/src/app/workshop/workshop.component.ts b/packages/website/src/app/workshop/workshop.component.ts index d83c2aee..b3350277 100644 --- a/packages/website/src/app/workshop/workshop.component.ts +++ b/packages/website/src/app/workshop/workshop.component.ts @@ -276,8 +276,13 @@ export class WorkshopComponent { if (currentLang) { // Path is like "workshops/my-workshop/translations/workshop.fr.md" // or "workshops/my-workshop/workshop.fr.md" - return repoPath.replace(new RegExp(`\\.${currentLang}\\.md$`), '.md') - .replace('/translations/', '/'); + // Use simple string replacement to avoid regex issues + const suffix = `.${currentLang}.md`; + if (repoPath.endsWith(suffix)) { + return repoPath.slice(0, -suffix.length) + '.md'; + } + // Also handle translations folder + return repoPath.replace('/translations/', '/'); } // Already a base path return repoPath; @@ -311,6 +316,6 @@ export class WorkshopComponent { const queryString = params.toString(); const baseUrl = `${window.location.origin}${window.location.pathname.split('?')[0]}`; - return `${baseUrl}?src=${workshopPath}${queryString ? '&' + queryString : ''}`; + return `${baseUrl}?src=${encodeURIComponent(workshopPath)}${queryString ? '&' + queryString : ''}`; } }