diff --git a/packages/database/src/lib/entry.ts b/packages/database/src/lib/entry.ts index f9a984ea..90c8916d 100644 --- a/packages/database/src/lib/entry.ts +++ b/packages/database/src/lib/entry.ts @@ -33,10 +33,10 @@ 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) } : {}) + ...(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 c91415ce..fdae01a1 100644 --- a/packages/database/src/lib/language.ts +++ b/packages/database/src/lib/language.ts @@ -1,11 +1,14 @@ 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})\.md$/; +const languageRegex = /.*?\.([a-zA-Z]{2}(?:_[A-Z]{2})?)\.md$/; const translationsFolder = 'translations'; export function getLanguageFromFile(filePath: string): string { @@ -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/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..48ca7f00 --- /dev/null +++ b/packages/website/src/app/shared/components/language-selector.component.ts @@ -0,0 +1,90 @@ +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: ` +
+ + +
+ `, + styles: [ + ` + .language-selector { + 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); + text-transform: uppercase; + + &:hover { + background: rgba(255, 255, 255, 0.1); + border-color: rgba(255, 255, 255, 0.5); + } + + &:focus { + outline: 2px solid rgba(255, 255, 255, 0.5); + outline-offset: 2px; + } + + option { + background: var(--background); + color: var(--text); + text-transform: none; + } + } + ` + ] +}) +export class LanguageSelectorComponent { + @Input() languages: LanguageOption[] = []; + @Input() currentLanguage: string = 'en'; + + 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; + } else { + console.error('Language selector: Invalid URL for selected language'); + } + } +} 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..b3350277 100644 --- a/packages/website/src/app/workshop/workshop.component.ts +++ b/packages/website/src/app/workshop/workshop.component.ts @@ -7,12 +7,14 @@ 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 { defaultLanguage } from '../shared/constants'; @Component({ selector: 'app-workshop', @@ -29,7 +31,7 @@ import { getRepoPath } from '../shared/loader'; ], template: `
- +
{ if (!this.scrollInit) { @@ -155,6 +159,7 @@ export class WorkshopComponent { this.workshop = await loadWorkshop(repoPath, { wtid, ocid, vars }); this.menuLinks = createMenuLinks(this.workshop); this.updateAuthors(); + this.loadLanguages(repoPath); } catch (error) { console.error(error); } @@ -207,4 +212,110 @@ export class WorkshopComponent { // from browser-generated scroll events setTimeout(() => (this.enableScrollEvent = true)); } + + loadLanguages(repoPath: string) { + if (!this.workshop) { + return; + } + + // 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; + + // Get translations from metadata + const translationsMeta = this.workshop.meta?.translations; + if (!translationsMeta || (Array.isArray(translationsMeta) && translationsMeta.length === 0)) { + // No translations defined + return; + } + + // Parse translations array + const translationCodes = Array.isArray(translationsMeta) + ? translationsMeta + : translationsMeta.split(',').map(t => t.trim()); + + // Build language options + const languages: LanguageOption[] = []; + + // Determine base path + const basePath = this.getBasePath(repoPath, languageFromPath); + + // 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 translations sorted alphabetically + const sortedTranslations = [...translationCodes].sort((a, b) => a.localeCompare(b)); + for (const langCode of sortedTranslations) { + languages.push({ + code: langCode, + label: langCode, + url: this.buildWorkshopUrl(basePath, langCode) + }); + } + + // Only show language selector if there are translations + if (languages.length > 1) { + this.languages = languages; + } + } + + 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; + } + + 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" + // 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; + } + + 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); + + const queryString = params.toString(); + const baseUrl = `${window.location.origin}${window.location.pathname.split('?')[0]}`; + + return `${baseUrl}?src=${encodeURIComponent(workshopPath)}${queryString ? '&' + queryString : ''}`; + } } 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.