gabeszm
aeb7950d14
- Create locales directory with en.yml and hu.yml translation files - Update WelcomeBanner component to use i18n helper for button labels - Remove login_button_text and register_button_text from settings.yml - Update CLAUDE.md documentation with i18n architecture details - Button text now properly localized: hu (Belépés/Regisztráció) and en (Log in/Sign up)
148 lines
6.7 KiB
Markdown
148 lines
6.7 KiB
Markdown
# CLAUDE.md
|
|
|
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|
|
|
## Projekt áttekintés
|
|
|
|
Ez egy **Discourse fórum téma komponens** a Nyíltvilág magyar technológiai közösség számára. Egy egyedi üdvözlő bannert hoz létre, amely csak a főoldalon jelenik meg, és tartalmaz egy hero szekciót keresési funkcióval és kategória navigációs kártyákkal.
|
|
|
|
## Architektúra
|
|
|
|
### Komponens felépítés
|
|
|
|
A téma komponens a következő fő elemekből áll:
|
|
|
|
1. **javascripts/discourse/components/welcome-banner.gjs** - Glimmer komponens a banner renderelésére
|
|
- Felhasználói állapot kezelése (bejelentkezett/nem bejelentkezett)
|
|
- Dinamikus tartalom megjelenítés
|
|
- Keresési funkció integráció bejelentkezett felhasználóknak
|
|
- Belépés/Regisztráció gombok nem bejelentkezett felhasználóknak
|
|
2. **javascripts/discourse/api-initializers/welcome-banner.js** - Discourse API inicializáló
|
|
- Plugin outlet integráció (below-header vagy above-content)
|
|
3. **common/common.scss** - Reszponzív stílusok CSS változókkal
|
|
4. **settings.yml** - Admin beállítások a banner testreszabásához
|
|
5. **locales/** - i18n fordítások (en.yml, hu.yml)
|
|
|
|
### Kulcsfontosságú technikai minták
|
|
|
|
**Glimmer Component alapú architektúra**
|
|
- Modern `@glimmer/component` használata
|
|
- Reactive getterek a dinamikus tartalom kezelésére (`heroTitle`, `heroContent`, `isAnonymous`)
|
|
- `@service` injekció: `currentUser`, `router`, `site`
|
|
- Template markup a `<template>` tagben (gjs fájl formátum)
|
|
|
|
**Felhasználói állapot kezelés**
|
|
- `currentUser` service használata a bejelentkezési állapot ellenőrzésére
|
|
- `isAnonymous` getter: `!this.currentUser` - meghatározza, hogy látogató vagy bejelentkezett felhasználó
|
|
- Feltételes tartalom renderelés az állapot alapján
|
|
|
|
**i18n támogatás**
|
|
- Fordítási fájlok a `locales/` mappában (en.yml, hu.yml)
|
|
- `i18n` helper használata a template-ben a gombok lokalizálásához
|
|
- Példa: `{{i18n "welcome_banner.buttons.login"}}` → "Belépés" (hu) vagy "Log in" (en)
|
|
|
|
**Keresési integráció mintája**
|
|
- Discourse natív `SearchMenu` komponens integrációja bejelentkezett felhasználóknak
|
|
- Mobil detektálás: `this.site.mobileView` - keresés csak asztali nézetben
|
|
- Feltételes renderelés: `{{#if (and settings.enable_hero_search (not this.isMobile))}}`
|
|
|
|
**Navigációs integráció**
|
|
- `DButton` komponens használata a belépés/regisztráció gombokhoz
|
|
- Router service használata: `this.router.transitionTo("login")` és `"signup"`
|
|
- Csak nem bejelentkezett felhasználóknak jelenik meg
|
|
|
|
**Route alapú megjelenítés**
|
|
- `displayForRoute` getter ellenőrzi az aktuális route-ot
|
|
- Beállítás alapján: `homepage_only` vagy `all_pages`
|
|
- Homepage route-ok: `discovery.latest`, `discovery.categories`
|
|
|
|
**Kód minőség és best practice-ek**
|
|
- Modern Glimmer/Ember konvenciók
|
|
- Angol osztálynevek és kommentek
|
|
- Accessibility támogatás (`role="search"`, `aria-label` attribútumok)
|
|
- Lifecycle hook-ok: `didInsert`, `willDestroy`
|
|
|
|
## Fontos implementációs részletek
|
|
|
|
**Felhasználói állapot alapú tartalom** (welcome-banner.gjs:38-52)
|
|
- `isAnonymous` getter ellenőrzi a `currentUser` service-t
|
|
- `heroTitle` és `heroContent` getterek dinamikusan választanak a settings között:
|
|
- Bejelentkezett: `settings.hero_title_html` / `settings.hero_content_html`
|
|
- Nem bejelentkezett: `settings.hero_title_anonymous_html` / `settings.hero_content_anonymous_html`
|
|
|
|
**Gombok vs keresés logika** (welcome-banner.gjs:84-102)
|
|
- Nem bejelentkezett felhasználóknak: `.hero-buttons` div két DButton-nal
|
|
- Bejelentkezett felhasználóknak: `.search-container` a SearchMenu komponenssel
|
|
- Csak akkor jelenik meg, ha `settings.enable_hero_search` engedélyezett és nem mobil
|
|
|
|
**i18n fordítások** (locales/hu.yml, locales/en.yml)
|
|
- Gomb szövegek: `welcome_banner.buttons.login` és `welcome_banner.buttons.register`
|
|
- Magyar: "Belépés" / "Regisztráció"
|
|
- Angol: "Log in" / "Sign up"
|
|
|
|
**Route detektálás** (welcome-banner.gjs:18-26)
|
|
- `displayForRoute` getter ellenőrzi a `router.currentRouteName`-t
|
|
- Homepage: `discovery.latest` vagy `discovery.categories`
|
|
- Beállítás: `show_on_pages` (homepage_only / all_pages)
|
|
|
|
## CSS architektúra
|
|
|
|
**Reszponzív töréspontok**
|
|
- Asztal: 1100px+
|
|
- Tablet: 900-1099px
|
|
- Mobil: <900px
|
|
|
|
**Grid elrendezés**
|
|
- A hero CSS Grid-et használ névvel ellátott területekkel: `"content"` és `"search"`
|
|
- A CTA (Call-To-Action) kártyák reszponzív gridet használnak: 1 oszlop (mobil), 2 oszlop (500px+), 4 oszlop (1510px+)
|
|
- Optimalizált grid oszlopok `1fr` egységekkel a felesleges `calc()` helyett
|
|
|
|
**Kulcsfontosságú CSS változók**
|
|
```css
|
|
--primary-color: #e81f2d
|
|
--page-bg: #14191f
|
|
--card-bg: #1b2028
|
|
--text-color: #ddd
|
|
```
|
|
|
|
## Fejlesztési megjegyzések
|
|
|
|
**Komponens tesztelése:**
|
|
- Módosítások megtekintése a fórum főoldalára navigálva (/)
|
|
- Oldal láthatóság tesztelése más URL-ekre navigálva
|
|
- Bejelentkezett állapot tesztelése: keresés megjelenik
|
|
- Nem bejelentkezett állapot tesztelése: belépés/regisztráció gombok megjelennek
|
|
- Mobil nézet tesztelése: keresés eltűnik mobilon
|
|
- i18n tesztelés: nyelv váltás a fórum beállításokban
|
|
|
|
**Gyakori módosítások:**
|
|
- Hero szöveg frissítése: settings.yml `hero_title_html`, `hero_content_html`, `hero_title_anonymous_html`, `hero_content_anonymous_html`
|
|
- Gomb szövegek módosítása: locales/hu.yml és locales/en.yml szerkesztése
|
|
- CTA kártyák módosítása: settings.yml `cta_card_*` beállítások
|
|
- Stílusok módosítása: common/common.scss változók vagy szelektorok
|
|
- Komponens logika módosítása: javascripts/discourse/components/welcome-banner.gjs
|
|
|
|
**Osztálynevek konvenciói:**
|
|
- `.welcome-card` - Fő banner konténer
|
|
- `.hero-section` - Hero szekció konténer
|
|
- `.hero-content` - Hero szöveges tartalom
|
|
- `.hero-title` - Hero cím
|
|
- `.hero-description` - Hero leírás
|
|
- `.hero-buttons` - Belépés/Regisztráció gomb konténer (csak nem bejelentkezetteknek)
|
|
- `.hero-login-btn` - Belépés gomb
|
|
- `.hero-register-btn` - Regisztráció gomb
|
|
- `.search-container` - Kereső konténer (csak bejelentkezetteknek)
|
|
- `.cta-section` - CTA kártyák szekció
|
|
- `.cta-card` - Egyedi CTA kártya
|
|
- Angol osztálynevek következetesen használva
|
|
|
|
**Discourse verzió kompatibilitás:**
|
|
- Modern Glimmer komponens architektúra (Discourse 3.1+)
|
|
- `apiInitializer` használata (Discourse 3.0+)
|
|
- gjs fájl formátum támogatás szükséges
|
|
|
|
**i18n bővítés:**
|
|
Új fordítások hozzáadása:
|
|
1. Fordítási kulcs hozzáadása `locales/en.yml` és `locales/hu.yml` fájlokhoz
|
|
2. `i18n` helper használata a template-ben: `{{i18n "welcome_banner.your.key"}}`
|
|
3. További nyelvek hozzáadása: új `locales/[lang].yml` fájl létrehozása
|