Initial commit: Nyíltvilág Welcome Banner theme component
This commit is contained in:
commit
49a711320c
9 changed files with 1188 additions and 0 deletions
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.DS_Store
|
||||
*.log
|
||||
node_modules/
|
||||
.env
|
||||
105
CLAUDE.md
Normal file
105
CLAUDE.md
Normal file
|
|
@ -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.
|
||||
133
README.md
Normal file
133
README.md
Normal file
|
|
@ -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.
|
||||
7
about.json
Normal file
7
about.json
Normal file
|
|
@ -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"
|
||||
}
|
||||
243
common/common.scss
Normal file
243
common/common.scss
Normal file
|
|
@ -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);
|
||||
}
|
||||
|
||||
113
javascripts/discourse/api-initializers/welcome-banner.js
Normal file
113
javascripts/discourse/api-initializers/welcome-banner.js
Normal file
|
|
@ -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);
|
||||
});
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
{{#if (and theme.enable_welcome_banner (eq theme.banner_position "above_content"))}}
|
||||
<section class="above-main-container-outlet welcome-card">
|
||||
<div class="hero-section">
|
||||
<div class="hero-deco"></div>
|
||||
<div class="hero-content">
|
||||
<h2 class="hero-title">
|
||||
{{{theme.hero_title_html}}}
|
||||
</h2>
|
||||
<div class="hero-description">
|
||||
{{{theme.hero_content_html}}}
|
||||
</div>
|
||||
{{#if theme.enable_hero_search}}
|
||||
<div class="search-container" aria-label="Search"></div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cta-section">
|
||||
<ul class="cta-list">
|
||||
{{#if theme.cta_card_1_enabled}}
|
||||
<li>
|
||||
<a
|
||||
href="{{theme.cta_card_1_url}}"
|
||||
class="cta-card"
|
||||
aria-label="{{theme.cta_card_1_title}}"
|
||||
>
|
||||
<div class="cta-icon">
|
||||
{{#if (eq theme.cta_card_1_icon_type "font_awesome")}}
|
||||
<i class="fas fa-{{theme.cta_card_1_icon_font_awesome}}"></i>
|
||||
{{else}}
|
||||
{{theme.cta_card_1_icon_emoji}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="cta-content">
|
||||
<span class="cta-title">{{theme.cta_card_1_title}}</span>
|
||||
<span class="cta-desc">{{theme.cta_card_1_description}}</span>
|
||||
<span class="cta-cta">
|
||||
<i class="fas fa-angle-double-right"></i>
|
||||
{{theme.cta_card_1_cta_text}}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
{{#if theme.cta_card_2_enabled}}
|
||||
<li>
|
||||
<a
|
||||
href="{{theme.cta_card_2_url}}"
|
||||
class="cta-card"
|
||||
aria-label="{{theme.cta_card_2_title}}"
|
||||
>
|
||||
<div class="cta-icon">
|
||||
{{#if (eq theme.cta_card_2_icon_type "font_awesome")}}
|
||||
<i class="fas fa-{{theme.cta_card_2_icon_font_awesome}}"></i>
|
||||
{{else}}
|
||||
{{theme.cta_card_2_icon_emoji}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="cta-content">
|
||||
<span class="cta-title">{{theme.cta_card_2_title}}</span>
|
||||
<span class="cta-desc">{{theme.cta_card_2_description}}</span>
|
||||
<span class="cta-cta">
|
||||
<i class="fas fa-angle-double-right"></i>
|
||||
{{theme.cta_card_2_cta_text}}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
{{#if theme.cta_card_3_enabled}}
|
||||
<li>
|
||||
<a
|
||||
href="{{theme.cta_card_3_url}}"
|
||||
class="cta-card"
|
||||
aria-label="{{theme.cta_card_3_title}}"
|
||||
>
|
||||
<div class="cta-icon">
|
||||
{{#if (eq theme.cta_card_3_icon_type "font_awesome")}}
|
||||
<i class="fas fa-{{theme.cta_card_3_icon_font_awesome}}"></i>
|
||||
{{else}}
|
||||
{{theme.cta_card_3_icon_emoji}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="cta-content">
|
||||
<span class="cta-title">{{theme.cta_card_3_title}}</span>
|
||||
<span class="cta-desc">{{theme.cta_card_3_description}}</span>
|
||||
<span class="cta-cta">
|
||||
<i class="fas fa-angle-double-right"></i>
|
||||
{{theme.cta_card_3_cta_text}}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
{{#if theme.cta_card_4_enabled}}
|
||||
<li>
|
||||
<a
|
||||
href="{{theme.cta_card_4_url}}"
|
||||
class="cta-card"
|
||||
aria-label="{{theme.cta_card_4_title}}"
|
||||
>
|
||||
<div class="cta-icon">
|
||||
{{#if (eq theme.cta_card_4_icon_type "font_awesome")}}
|
||||
<i class="fas fa-{{theme.cta_card_4_icon_font_awesome}}"></i>
|
||||
{{else}}
|
||||
{{theme.cta_card_4_icon_emoji}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="cta-content">
|
||||
<span class="cta-title">{{theme.cta_card_4_title}}</span>
|
||||
<span class="cta-desc">{{theme.cta_card_4_description}}</span>
|
||||
<span class="cta-cta">
|
||||
<i class="fas fa-angle-double-right"></i>
|
||||
{{theme.cta_card_4_cta_text}}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
{{/if}}
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
{{#if (and theme.enable_welcome_banner (eq theme.banner_position "below_header"))}}
|
||||
<section class="below-site-header welcome-card">
|
||||
<div class="hero-section">
|
||||
<div class="hero-deco"></div>
|
||||
<div class="hero-content">
|
||||
<h2 class="hero-title">
|
||||
{{{theme.hero_title_html}}}
|
||||
</h2>
|
||||
<div class="hero-description">
|
||||
{{{theme.hero_content_html}}}
|
||||
</div>
|
||||
{{#if theme.enable_hero_search}}
|
||||
<div class="search-container" aria-label="Search"></div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cta-section">
|
||||
<ul class="cta-list">
|
||||
{{#if theme.cta_card_1_enabled}}
|
||||
<li>
|
||||
<a
|
||||
href="{{theme.cta_card_1_url}}"
|
||||
class="cta-card"
|
||||
aria-label="{{theme.cta_card_1_title}}"
|
||||
>
|
||||
<div class="cta-icon">
|
||||
{{#if (eq theme.cta_card_1_icon_type "font_awesome")}}
|
||||
<i class="fas fa-{{theme.cta_card_1_icon_font_awesome}}"></i>
|
||||
{{else}}
|
||||
{{theme.cta_card_1_icon_emoji}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="cta-content">
|
||||
<span class="cta-title">{{theme.cta_card_1_title}}</span>
|
||||
<span class="cta-desc">{{theme.cta_card_1_description}}</span>
|
||||
<span class="cta-cta">
|
||||
<i class="fas fa-angle-double-right"></i>
|
||||
{{theme.cta_card_1_cta_text}}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
{{#if theme.cta_card_2_enabled}}
|
||||
<li>
|
||||
<a
|
||||
href="{{theme.cta_card_2_url}}"
|
||||
class="cta-card"
|
||||
aria-label="{{theme.cta_card_2_title}}"
|
||||
>
|
||||
<div class="cta-icon">
|
||||
{{#if (eq theme.cta_card_2_icon_type "font_awesome")}}
|
||||
<i class="fas fa-{{theme.cta_card_2_icon_font_awesome}}"></i>
|
||||
{{else}}
|
||||
{{theme.cta_card_2_icon_emoji}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="cta-content">
|
||||
<span class="cta-title">{{theme.cta_card_2_title}}</span>
|
||||
<span class="cta-desc">{{theme.cta_card_2_description}}</span>
|
||||
<span class="cta-cta">
|
||||
<i class="fas fa-angle-double-right"></i>
|
||||
{{theme.cta_card_2_cta_text}}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
{{#if theme.cta_card_3_enabled}}
|
||||
<li>
|
||||
<a
|
||||
href="{{theme.cta_card_3_url}}"
|
||||
class="cta-card"
|
||||
aria-label="{{theme.cta_card_3_title}}"
|
||||
>
|
||||
<div class="cta-icon">
|
||||
{{#if (eq theme.cta_card_3_icon_type "font_awesome")}}
|
||||
<i class="fas fa-{{theme.cta_card_3_icon_font_awesome}}"></i>
|
||||
{{else}}
|
||||
{{theme.cta_card_3_icon_emoji}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="cta-content">
|
||||
<span class="cta-title">{{theme.cta_card_3_title}}</span>
|
||||
<span class="cta-desc">{{theme.cta_card_3_description}}</span>
|
||||
<span class="cta-cta">
|
||||
<i class="fas fa-angle-double-right"></i>
|
||||
{{theme.cta_card_3_cta_text}}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
{{#if theme.cta_card_4_enabled}}
|
||||
<li>
|
||||
<a
|
||||
href="{{theme.cta_card_4_url}}"
|
||||
class="cta-card"
|
||||
aria-label="{{theme.cta_card_4_title}}"
|
||||
>
|
||||
<div class="cta-icon">
|
||||
{{#if (eq theme.cta_card_4_icon_type "font_awesome")}}
|
||||
<i class="fas fa-{{theme.cta_card_4_icon_font_awesome}}"></i>
|
||||
{{else}}
|
||||
{{theme.cta_card_4_icon_emoji}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="cta-content">
|
||||
<span class="cta-title">{{theme.cta_card_4_title}}</span>
|
||||
<span class="cta-desc">{{theme.cta_card_4_description}}</span>
|
||||
<span class="cta-cta">
|
||||
<i class="fas fa-angle-double-right"></i>
|
||||
{{theme.cta_card_4_cta_text}}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
{{/if}}
|
||||
331
settings.yml
Normal file
331
settings.yml
Normal file
|
|
@ -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 <strong>Nyíltvilág</strong> 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: |
|
||||
<p>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.</p>
|
||||
<p>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.</p>
|
||||
<p>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.</p>
|
||||
<p>Csatlakozz, és légy részese egy nyitott és inspiráló közösségnek! 🌍✨</p>
|
||||
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
|
||||
Loading…
Reference in a new issue