commit 49a711320c7f505086a0c0d85c94396a4f1c2a4c Author: gabeszm Date: Wed Oct 15 21:42:02 2025 +0200 Initial commit: Nyíltvilág Welcome Banner theme component diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..18b2cef --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +.DS_Store +*.log +node_modules/ +.env diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..a5454d6 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,105 @@ +# 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 három fő fájlból áll: + +1. **index.html** - HTML sablon az üdvözlő bannerhez (statikus tartalom) +2. **script.js** - Discourse API inicializáló, amely kezeli: + - Az oldal láthatóságának váltását (csak a főoldalon jeleníti meg a bannert) + - Az egyedi keresőmező renderelését és integrációját a Discourse SearchMenu-jével + - Mobil detektálást és feltételes renderelést +3. **style.css** - Reszponzív stílusok CSS változókkal + +### Kulcsfontosságú technikai minták + +**Discourse Plugin API integráció** +- Az `apiInitializer`-t használja a `discourse/lib/api`-ból (modern megközelítés) +- Az `api.onPageChange()` hookra csatlakozik, hogy URL alapján mutassa/rejtse a bannert +- Integrálódik a Discourse natív `SearchMenu` komponensével az `api.openSearchMenu()` segítségével + +**Keresési integráció mintája** +Az egyedi keresőmező a hero szekcióban így működik: +1. Egyedi input mező renderelése a `.search-container` konténerbe +2. Fókuszáláskor/bevitelkor a Discourse natív SearchMenu megnyitása +3. Értékek szinkronizálása az egyedi input és a natív `.search-menu input.search-query` között +4. Űrlap beküldés delegálása a Discourse keresési űrlapjához + +**Idempotens renderelés** +A `renderSearchInput()` függvény ellenőrzi, hogy a keresőmező már létezik-e, mielőtt létrehozná, így megakadályozza a duplikált elemeket, amikor az API többször is alkalmazza az inicializálót. + +**Mobil kezelés** +A keresési funkció le van tiltva mobilon (az `isMobileView()` függvényen keresztül), hogy elkerülje az ütközéseket a Discourse mobil felületével. + +**Kód minőség és best practice-ek** +- Következetes arrow function használat +- Angol osztálynevek és kommentek a nemzetközi standardok szerint +- Optimalizált renderelés egyetlen `requestAnimationFrame` hívással +- Accessibility támogatás (`role="search"`, `aria-label` attribútumok) + +## Fontos implementációs részletek + +**Oldal láthatósági logika** (script.js:4-13) +- A banner csak akkor jelenik meg, ha `url === "/"` +- Minden más oldalon a banner rejtve van `display: none` segítségével + +**Keresés szinkronizáció** (script.js:54-60) +- Az egyedi input értéke szinkronizálva van a Discourse SearchMenu inputjával +- A Discourse natív keresési funkcióját `input` esemény kiváltásával aktiválja +- Egyesített event handler (`handleSearchInteraction`) a duplikált kód elkerülésére + +**Optimalizált renderelés** (script.js:90-99) +- Egyetlen `requestAnimationFrame` hívás a többszörös kísérlet helyett +- Biztosítja, hogy az elem létezzen akkor is, ha a DOM nem teljesen készen áll + +## 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:** +- A 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 +- Keresés tesztelése az egyedi keresőmezőbe való fókuszálással/gépelés (csak asztalon) + +**Gyakori módosítások:** +- Üdvözlő szöveg frissítése: index.html 6-20. sor szerkesztése +- CTA kártyák hozzáadása/eltávolítása: index.html 27-102. sor módosítása +- Stílusok módosítása: style.css változók vagy szelektorok módosítása +- Keresési viselkedés módosítása: script.js `renderSearchInput()` függvény (18-88. sor) + +**Osztálynevek konvenciói:** +- `.search-container` - Fő kereső konténer +- `.search-wrapper` - Keresőmező wrapper elem +- `.search-input` - Keresőmező input elem +- `.cta-*` - Call-To-Action kategória kártyák +- `.hero-*` - Hero szekció elemei +- Angol osztálynevek következetesen használva + +**Discourse API verzió:** +Ez a komponens a modern `apiInitializer` mintát használja. Régebbi Discourse verziókkal való munka esetén szükség lehet a `withPluginApi` használatára helyette. diff --git a/README.md b/README.md new file mode 100644 index 0000000..5d8ce56 --- /dev/null +++ b/README.md @@ -0,0 +1,133 @@ +# Nyíltvilág Welcome Banner - Discourse Theme Component + +A customizable welcome banner theme component for Discourse forums, designed for the Nyíltvilág Hungarian tech community. + +## Features + +- 🎨 **Fully Customizable** - All content editable from admin panel +- 📱 **Responsive Design** - Works on desktop, tablet, and mobile +- 🔍 **Integrated Search** - Custom search input synced with Discourse SearchMenu +- 🎯 **4 CTA Cards** - Call-to-action cards with icons, titles, descriptions, and links +- 🌐 **HTML Support** - Use HTML in hero title and content +- ♿ **Accessible** - ARIA labels and semantic HTML +- 🎛️ **Toggle Options** - Enable/disable banner, search, and individual cards +- 🎨 **Color Customization** - Change all colors from admin panel +- 🔣 **Font Awesome Support** - Choose from free Font Awesome icons or use emoji +- 📍 **Position Control** - Place banner after navigation or before content +- 📄 **Page Visibility** - Show on homepage only or all pages + +## Installation + +1. Go to your Discourse Admin Panel +2. Navigate to **Customize** → **Themes** +3. Click **Install** → **From a git repository** +4. Enter the repository URL +5. Click **Install** + +Alternatively, you can upload this as a theme component: +1. Zip the entire theme directory +2. Go to **Customize** → **Themes** → **Install** → **Upload** +3. Upload the zip file + +## Configuration + +After installation, go to **Customize** → **Themes** → Select this theme → **Settings** + +### General Settings +- **enable_welcome_banner** - Enable/disable the entire banner +- **banner_position** - Choose banner position: + - `below_header` - Display after navigation menu (below site header) + - `above_content` - Display before main content (above main container) +- **show_on_pages** - Choose where to display the banner: + - `homepage_only` - Display only on homepage (default) + - `all_pages` - Display on all pages of the forum + +### Color Settings +- **primary_color** - Primary accent color (hex format, e.g., #e81f2d) +- **page_background** - Page background color (hex format) +- **card_background** - Card background color (hex format) +- **text_color** - Text color (hex format) + +### Hero Section +- **hero_title_html** - Main title (HTML allowed) +- **hero_content_html** - Hero content/description (HTML allowed) + +### Search Settings +- **enable_hero_search** - Enable/disable search input (desktop only) +- **search_placeholder** - Placeholder text for search input + +### CTA Cards (4 cards available) +Each card has these settings: +- **cta_card_X_enabled** - Enable/disable the card +- **cta_card_X_icon_type** - Choose between "emoji" or "font_awesome" +- **cta_card_X_icon_emoji** - Emoji icon (e.g., 📚) +- **cta_card_X_icon_font_awesome** - Font Awesome icon name (e.g., "book", "rocket", "shield") +- **cta_card_X_title** - Card title +- **cta_card_X_description** - Card description +- **cta_card_X_cta_text** - Call-to-action button text +- **cta_card_X_url** - Link URL + +**Font Awesome Icons:** Browse available icons at https://fontawesome.com/icons?d=gallery&m=free +Use only the icon name without prefixes (e.g., use "book" not "fa-book") + +## File Structure + +``` +Welcome_banner/ +├── about.json # Theme metadata +├── settings.yml # Admin settings configuration +├── common/ +│ └── common.scss # Styles +├── javascripts/ +│ └── discourse/ +│ ├── api-initializers/ +│ │ └── welcome-banner.js # Main JavaScript logic +│ └── connectors/ +│ ├── above-main-container-outlet/ +│ │ └── welcome-banner.hbs # Template (above content) +│ └── below-site-header/ +│ └── welcome-banner-header.hbs # Template (below header) +├── CLAUDE.md # Developer documentation +└── README.md # This file +``` + +## Customization + +### Changing Colors +Colors can be changed directly from the admin panel in the theme settings. The following colors are customizable: +- Primary color (accent color for CTAs and highlights) +- Page background +- Card background +- Text color + +No code editing required! + +### Adding More CTA Cards +1. Add new settings in `settings.yml` +2. Update the Handlebars template in `welcome-banner.hbs` +3. Optionally adjust grid layout in SCSS + +### Changing Breakpoints +Edit the media queries in `common/common.scss`: +- Desktop: 1100px+ +- Tablet: 900-1099px +- Mobile: <900px + +## Browser Support + +- Modern browsers (Chrome, Firefox, Safari, Edge) +- IE11 not supported + +## License + +MIT License + +## Credits + +Created for the Nyíltvilág community +- Website: https://www.nyiltvilag.hu +- Component version: 1.0.0 + +## Support + +For issues or questions, please visit the Nyíltvilág forum or create an issue in the repository. diff --git a/about.json b/about.json new file mode 100644 index 0000000..c461c1e --- /dev/null +++ b/about.json @@ -0,0 +1,7 @@ +{ + "name": "Nyíltvilág Welcome Banner", + "about_url": "https://www.nyiltvilag.hu", + "license_url": "https://opensource.org/licenses/MIT", + "component": true, + "authors": "Nyíltvilág Community" +} diff --git a/common/common.scss b/common/common.scss new file mode 100644 index 0000000..876d8b1 --- /dev/null +++ b/common/common.scss @@ -0,0 +1,243 @@ +/* Theme colors - configurable from admin settings */ +:root { + --primary-color: #{$primary_color}; + --page-bg: #{$page_background}; + --card-bg: #{$card_background}; + --text-color: #{$text_color}; + } + + /* Welcome kártya konténer */ + .welcome-card { + border-radius: 4px; + } + + @media (min-width: 800px) { + .welcome-card { + max-width: 1500px; + width: 100%; + margin: 0 auto; + } + } + + @media (max-width: 769px) { + .welcome-card { + padding: 15px; + } + } + + /* HERO szekció: egy oszlop, szöveg felül, kereső alatta */ + .hero-section { + position: relative; + display: grid; + grid-template-columns: 1fr; + grid-template-areas: + "content" + "search"; + gap: 20px; + padding: 40px 40px 60px; + border-radius: 4px; + color: #fff; + background: linear-gradient(136deg, rgba(205, 29, 29, 0.2), rgba(155, 0, 0, 0)); + } + + @media (min-width: 1100px) { + .hero-section { + padding-bottom: 80px; + } + } + + @media (max-width: 900px) { + .hero-section { + padding: 40px 20px; + margin-top: 40px; + } + } + + /* Dekoráció a hero alatt */ + .hero-deco { + position: absolute; + inset: 0; + z-index: 1; + overflow: hidden; + border-radius: 4px; + } + + @media (max-width: 900px) { + .hero-deco { + display: none; + } + } + + .hero-deco::before { + content: ""; + position: absolute; + top: 0; + right: -70px; + bottom: 0; + width: 540px; + transform: skew(-15deg, 0); + background: #1b20288a; + } + + @media (min-width: 901px) and (max-width: 1299px) { + .hero-deco::before { + max-width: 450px; + } + } + + /* Szöveges tartalom: teljes szélesség */ + .hero-content { + position: relative; + z-index: 3; + grid-area: content; + max-width: 100%; + } + + .hero-title { + margin: 0 0 20px 0; + font-weight: 700; + color: #fff; + } + + .hero-text { + font-size: 15px; + } + + .hero-link { + color: #fff; + font-weight: 500; + text-decoration: underline; + } + + .hero-link:hover { + text-decoration-thickness: 2px; + } + + /* Search container: directly below text, full width */ + .search-container { + grid-area: search; + position: static; + width: 100%; + max-width: 100%; + z-index: 3; + justify-self: stretch; + align-self: start; + } + + /* CTA szekció a hero alatt */ + .cta-section { + position: relative; + margin: -55px auto 20px; + max-width: calc(100% - 30px); + z-index: 3; + } + + @media (min-width: 1100px) { + .cta-section { + max-width: calc(100% - 80px); + } + } + + .cta-list { + list-style: none; + margin: 0; + padding: 0; + display: grid; + grid-template-columns: 1fr; + gap: 10px; + } + + @media (min-width: 500px) { + .cta-list { + grid-template-columns: repeat(2, 1fr); + } + } + + @media (min-width: 1510px) { + .cta-list { + grid-template-columns: repeat(4, 1fr); + } + } + + .cta-card { + display: flex; + align-items: center; + gap: 4px; + padding: 8px; + border-radius: 4px; + text-decoration: none; + color: #000; + background: var(--card-bg); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.17); + transition: + margin-top 150ms ease-in-out, + box-shadow 150ms ease-in-out; + } + + .cta-card:hover { + margin-top: -10px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.17); + } + + .cta-icon { + flex-shrink: 0; + font-size: 40px; + text-align: left; + } + + .cta-content { + flex: 1; + } + + .cta-title { + display: block; + font-size: 16px; + font-weight: 700; + color: var(--text-color); + } + + .cta-desc { + display: block; + color: #6a737c; + } + + .cta-cta { + display: block; + margin-top: 10px; + color: var(--primary-color); + } + + .cta-cta i { + padding-left: 0; + padding-right: 10px; + transition: padding 250ms ease-in-out; + } + + .cta-card:hover .cta-cta i { + padding-left: 3px; + padding-right: 7px; + } + + /* Search input appearance in hero section */ + .search-wrapper { + width: 40%; + margin: 0; + position: relative; + } + + .search-input { + width: 100%; + padding: 10px 14px; + border: 1px solid var(--primary-low); + border-radius: 4px; + background: var(--secondary-very-low); + color: var(--primary-high); + font-size: 1rem; + outline: none; + } + + .search-input:focus { + border-color: var(--tertiary); + box-shadow: 0 0 0 3px color-mix(in oklab, var(--tertiary) 20%, transparent); + } + \ No newline at end of file diff --git a/javascripts/discourse/api-initializers/welcome-banner.js b/javascripts/discourse/api-initializers/welcome-banner.js new file mode 100644 index 0000000..6f5ff36 --- /dev/null +++ b/javascripts/discourse/api-initializers/welcome-banner.js @@ -0,0 +1,113 @@ +import { apiInitializer } from "discourse/lib/api"; + +export default apiInitializer("1.8.0", (api) => { + api.onPageChange((url) => { + const welcomeCard = document.querySelector(".welcome-card"); + if (!welcomeCard) return; + + const showOnPages = settings.theme_vars?.show_on_pages || "homepage_only"; + + if (showOnPages === "all_pages") { + // Show on all pages + welcomeCard.style.display = "block"; + } else { + // Show only on homepage + if (url === "/") { + welcomeCard.style.display = "block"; + } else { + welcomeCard.style.display = "none"; + } + } + }); + + const isMobileView = () => document.body.classList.contains("mobile-view"); + + // Render search input with SearchMenu integration + function renderSearchInput() { + // Check if search is enabled in settings + const searchEnabled = settings.theme_vars?.enable_hero_search; + if (!searchEnabled) return; + + if (isMobileView()) return; + + // Try both possible positions for the banner + const container = document.querySelector( + ".welcome-card .search-container" + ); + if (!container) return; + + // Idempotent: exit if already created + if (container.querySelector(".search-input")) return; + + const wrapper = document.createElement("div"); + wrapper.className = "search-wrapper"; + wrapper.setAttribute("role", "search"); + + const input = document.createElement("input"); + input.type = "text"; + input.className = "search-input"; + input.placeholder = settings.theme_vars?.search_placeholder || "Search..."; + input.setAttribute("aria-label", "Search"); + + // Open and sync SearchMenu + const openSearchMenu = () => { + try { + api.openSearchMenu({ + anchorElement: input, + mobileMode: false, + }); + } catch (e) { + // Fallback if method not available + if (console?.debug) { + console.debug("SearchMenu API not available:", e); + } + } + }; + + const syncMenuQuery = () => { + const menuInput = document.querySelector(".search-menu input.search-query"); + if (menuInput && menuInput !== input) { + menuInput.value = input.value; + menuInput.dispatchEvent(new Event("input", { bubbles: true })); + } + }; + + const handleSearchInteraction = () => { + openSearchMenu(); + syncMenuQuery(); + }; + + input.addEventListener("focus", handleSearchInteraction); + input.addEventListener("input", handleSearchInteraction); + + input.addEventListener("keydown", (e) => { + if (e.key === "Enter") { + const q = input.value.trim(); + if (!q) return; + + const form = document.querySelector(".search-menu form"); + const menuInput = document.querySelector(".search-menu input.search-query"); + if (form && menuInput) { + menuInput.value = q; + form.dispatchEvent(new Event("submit", { bubbles: true })); + } else { + window.location.assign(`/search?q=${encodeURIComponent(q)}`); + } + } + }); + + wrapper.appendChild(input); + container.appendChild(wrapper); + } + + const apply = () => { + renderSearchInput(); + }; + + api.onAppEvent("page:changed", () => { + requestAnimationFrame(apply); + }); + + // Initial application + requestAnimationFrame(apply); +}); diff --git a/javascripts/discourse/connectors/above-main-container-outlet/welcome-banner.hbs b/javascripts/discourse/connectors/above-main-container-outlet/welcome-banner.hbs new file mode 100644 index 0000000..367123b --- /dev/null +++ b/javascripts/discourse/connectors/above-main-container-outlet/welcome-banner.hbs @@ -0,0 +1,126 @@ +{{#if (and theme.enable_welcome_banner (eq theme.banner_position "above_content"))}} +
+
+
+
+

+ {{{theme.hero_title_html}}} +

+
+ {{{theme.hero_content_html}}} +
+ {{#if theme.enable_hero_search}} +
+ {{/if}} +
+
+ +
+ +
+
+{{/if}} diff --git a/javascripts/discourse/connectors/below-site-header/welcome-banner-header.hbs b/javascripts/discourse/connectors/below-site-header/welcome-banner-header.hbs new file mode 100644 index 0000000..18d84ec --- /dev/null +++ b/javascripts/discourse/connectors/below-site-header/welcome-banner-header.hbs @@ -0,0 +1,126 @@ +{{#if (and theme.enable_welcome_banner (eq theme.banner_position "below_header"))}} +
+
+
+
+

+ {{{theme.hero_title_html}}} +

+
+ {{{theme.hero_content_html}}} +
+ {{#if theme.enable_hero_search}} +
+ {{/if}} +
+
+ +
+ +
+
+{{/if}} diff --git a/settings.yml b/settings.yml new file mode 100644 index 0000000..d7a2a46 --- /dev/null +++ b/settings.yml @@ -0,0 +1,331 @@ +enable_welcome_banner: + default: true + type: bool + description: + en: Enable the welcome banner on the homepage + hu: Üdvözlő banner megjelenítése a főoldalon + +banner_position: + default: "above_content" + type: enum + choices: + - below_header + - above_content + description: + en: "Banner position: 'below_header' (after navigation menu) or 'above_content' (before main content)" + hu: "Banner pozíció: 'below_header' (navigációs menü után) vagy 'above_content' (fő tartalom előtt)" + +show_on_pages: + default: "homepage_only" + type: enum + choices: + - homepage_only + - all_pages + description: + en: "Display banner on 'homepage_only' or 'all_pages'" + hu: "Banner megjelenítése 'homepage_only' (csak főoldal) vagy 'all_pages' (minden oldal)" + +# Color Settings +primary_color: + default: "#e81f2d" + type: string + description: + en: Primary accent color (hex format) + hu: Elsődleges hangsúly szín (hex formátum) + +page_background: + default: "#14191f" + type: string + description: + en: Page background color (hex format) + hu: Oldal háttérszín (hex formátum) + +card_background: + default: "#1b2028" + type: string + description: + en: Card background color (hex format) + hu: Kártya háttérszín (hex formátum) + +text_color: + default: "#dddddd" + type: string + description: + en: Text color (hex format) + hu: Szöveg színe (hex formátum) + +# Hero Section Settings +hero_title_html: + default: "👋 Üdvözöllek a Nyíltvilág fórumon!" + type: string + textarea: true + description: + en: Hero section title (HTML allowed) + hu: Hero szekció címe (HTML használható) + +hero_content_html: + default: | +

Ez a közösségi tér mindazoknak szól, akiket lelkesít a technológia világa – legyen szó nyílt forráskódról, kiberbiztonságról, adatvédelemről vagy mesterséges intelligenciáról.

+

Itt megoszthatod a tudásod, kérdezhetsz, vagy tapasztalatokat cserélhetsz másokkal – akár most ismerkedsz a témával, akár évek óta benne vagy.

+

A Nyíltvilág célja egy támogató és inspiráló közösség építése, ahol mindenki tanulhat, fejlődhet, és értéket adhat hozzá a közös tudáshoz.

+

Csatlakozz, és légy részese egy nyitott és inspiráló közösségnek! 🌍✨

+ type: string + textarea: true + description: + en: Hero section content (HTML allowed) + hu: Hero szekció tartalma (HTML használható) + +# Search Settings +enable_hero_search: + default: true + type: bool + description: + en: Enable search input in hero section (desktop only) + hu: Keresőmező megjelenítése a hero szekcióban (csak asztalon) + +search_placeholder: + default: "Keresés a fórumon…" + type: string + description: + en: Search input placeholder text + hu: Keresőmező placeholder szövege + +# CTA Card 1 +cta_card_1_enabled: + default: true + type: bool + description: + en: Enable CTA card 1 + hu: 1. CTA kártya engedélyezése + +cta_card_1_icon_type: + default: "emoji" + type: enum + choices: + - emoji + - font_awesome + description: + en: CTA card 1 icon type + hu: 1. CTA kártya ikon típusa + +cta_card_1_icon_emoji: + default: "📚" + type: string + description: + en: CTA card 1 emoji icon + hu: 1. CTA kártya emoji ikon + +cta_card_1_icon_font_awesome: + default: "book" + type: string + description: + en: "CTA card 1 Font Awesome icon (e.g., 'book', 'rocket', 'shield'). See: https://fontawesome.com/icons?d=gallery&m=free" + hu: "1. CTA kártya Font Awesome ikon (pl. 'book', 'rocket', 'shield'). Lásd: https://fontawesome.com/icons?d=gallery&m=free" + +cta_card_1_title: + default: "Tudásbázis" + type: string + description: + en: CTA card 1 title + hu: 1. CTA kártya címe + +cta_card_1_description: + default: "Tudnivalók, útmutatók, tippek." + type: string + description: + en: CTA card 1 description + hu: 1. CTA kártya leírása + +cta_card_1_cta_text: + default: "Mutasd az anyagokat" + type: string + description: + en: CTA card 1 call-to-action text + hu: 1. CTA kártya cselekvésre ösztönző szöveg + +cta_card_1_url: + default: "https://www.nyiltvilag.hu/c/tudasbazis/9" + type: string + description: + en: CTA card 1 URL + hu: 1. CTA kártya URL-je + +# CTA Card 2 +cta_card_2_enabled: + default: true + type: bool + description: + en: Enable CTA card 2 + hu: 2. CTA kártya engedélyezése + +cta_card_2_icon_type: + default: "emoji" + type: enum + choices: + - emoji + - font_awesome + description: + en: CTA card 2 icon type + hu: 2. CTA kártya ikon típusa + +cta_card_2_icon_emoji: + default: "🤝" + type: string + description: + en: CTA card 2 emoji icon + hu: 2. CTA kártya emoji ikon + +cta_card_2_icon_font_awesome: + default: "handshake" + type: string + description: + en: "CTA card 2 Font Awesome icon (e.g., 'handshake', 'users', 'comments'). See: https://fontawesome.com/icons?d=gallery&m=free" + hu: "2. CTA kártya Font Awesome ikon (pl. 'handshake', 'users', 'comments'). Lásd: https://fontawesome.com/icons?d=gallery&m=free" + +cta_card_2_title: + default: "Általános" + type: string + description: + en: CTA card 2 title + hu: 2. CTA kártya címe + +cta_card_2_description: + default: "Ide jöhet minden is...majdnem." + type: string + description: + en: CTA card 2 description + hu: 2. CTA kártya leírása + +cta_card_2_cta_text: + default: "Mondd el te is" + type: string + description: + en: CTA card 2 call-to-action text + hu: 2. CTA kártya cselekvésre ösztönző szöveg + +cta_card_2_url: + default: "https://www.nyiltvilag.hu/c/altalanos/4" + type: string + description: + en: CTA card 2 URL + hu: 2. CTA kártya URL-je + +# CTA Card 3 +cta_card_3_enabled: + default: true + type: bool + description: + en: Enable CTA card 3 + hu: 3. CTA kártya engedélyezése + +cta_card_3_icon_type: + default: "emoji" + type: enum + choices: + - emoji + - font_awesome + description: + en: CTA card 3 icon type + hu: 3. CTA kártya ikon típusa + +cta_card_3_icon_emoji: + default: "🛠️" + type: string + description: + en: CTA card 3 emoji icon + hu: 3. CTA kártya emoji ikon + +cta_card_3_icon_font_awesome: + default: "tools" + type: string + description: + en: "CTA card 3 Font Awesome icon (e.g., 'tools', 'code', 'laptop-code'). See: https://fontawesome.com/icons?d=gallery&m=free" + hu: "3. CTA kártya Font Awesome ikon (pl. 'tools', 'code', 'laptop-code'). Lásd: https://fontawesome.com/icons?d=gallery&m=free" + +cta_card_3_title: + default: "Fejlesztés" + type: string + description: + en: CTA card 3 title + hu: 3. CTA kártya címe + +cta_card_3_description: + default: "Nézd meg, min dolgoznak mások." + type: string + description: + en: CTA card 3 description + hu: 3. CTA kártya leírása + +cta_card_3_cta_text: + default: "Fejlesszünk" + type: string + description: + en: CTA card 3 call-to-action text + hu: 3. CTA kártya cselekvésre ösztönző szöveg + +cta_card_3_url: + default: "https://www.nyiltvilag.hu/c/fejlesztes/7" + type: string + description: + en: CTA card 3 URL + hu: 3. CTA kártya URL-je + +# CTA Card 4 +cta_card_4_enabled: + default: true + type: bool + description: + en: Enable CTA card 4 + hu: 4. CTA kártya engedélyezése + +cta_card_4_icon_type: + default: "emoji" + type: enum + choices: + - emoji + - font_awesome + description: + en: CTA card 4 icon type + hu: 4. CTA kártya ikon típusa + +cta_card_4_icon_emoji: + default: "🔒" + type: string + description: + en: CTA card 4 emoji icon + hu: 4. CTA kártya emoji ikon + +cta_card_4_icon_font_awesome: + default: "lock" + type: string + description: + en: "CTA card 4 Font Awesome icon (e.g., 'lock', 'shield-alt', 'user-shield'). See: https://fontawesome.com/icons?d=gallery&m=free" + hu: "4. CTA kártya Font Awesome ikon (pl. 'lock', 'shield-alt', 'user-shield'). Lásd: https://fontawesome.com/icons?d=gallery&m=free" + +cta_card_4_title: + default: "Biztonság" + type: string + description: + en: CTA card 4 title + hu: 4. CTA kártya címe + +cta_card_4_description: + default: "Mindig nézz hátra ki követ." + type: string + description: + en: CTA card 4 description + hu: 4. CTA kártya leírása + +cta_card_4_cta_text: + default: "Védd meg magad" + type: string + description: + en: CTA card 4 call-to-action text + hu: 4. CTA kártya cselekvésre ösztönző szöveg + +cta_card_4_url: + default: "https://www.nyiltvilag.hu/c/biztonsag/8" + type: string + description: + en: CTA card 4 URL + hu: 4. CTA kártya URL-je