# 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.