From 7961acf3852cb4ea821a73ba2397a101ffc80346 Mon Sep 17 00:00:00 2001 From: Kobe Date: Mon, 14 Jul 2025 23:03:32 +0200 Subject: [PATCH] Update README.md --- README.md | 132 +++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 91 insertions(+), 41 deletions(-) diff --git a/README.md b/README.md index e018f4f..b1df839 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,18 @@ # Kobelly Web Solutions -A professional Flask-based website for promoting small business web development services. Features multilanguage support (English, Dutch, French, German) and is fully dockerized for easy deployment. +A professional Flask-based website for promoting small business web development services. Features multilanguage support (English, Dutch, French, German) with a simple JSON-based translation system and is fully dockerized for easy deployment. ## Features -- 🌐 **Multilanguage Support**: English (EN), Dutch (NL), French (FR), German (DE) +- 🌐 **Multilanguage Support**: English (EN), Dutch (NL), French (FR), German (DE) with JSON-based translations - πŸ“± **Responsive Design**: Modern, mobile-friendly interface - 🎨 **Professional UI**: Clean, modern design with Bootstrap 5 - 🐳 **Docker Support**: Easy containerization and deployment - ⚑ **Fast Performance**: Optimized for speed and performance with minified assets - πŸ”§ **No Database Required**: Simple, lightweight setup - πŸš€ **Asset Optimization**: CSS/JS minification with cache busting +- πŸ“§ **Contact Form**: Fully functional email contact form +- πŸ—ΊοΈ **SEO Optimized**: Sitemap generation and robots.txt ## Pages @@ -18,6 +20,7 @@ A professional Flask-based website for promoting small business web development - **Services**: Detailed service offerings with pricing information - **About**: Company story, team, and values - **Contact**: Contact form and business information +- **Portfolio**: Showcase of completed projects ## Quick Start @@ -105,9 +108,12 @@ Kobelly/ β”œβ”€β”€ requirements.txt # Python dependencies β”œβ”€β”€ Dockerfile # Docker configuration β”œβ”€β”€ docker-compose.yml # Docker Compose configuration +β”œβ”€β”€ docker-compose.dev.yml # Development Docker Compose β”œβ”€β”€ Makefile # Build and deployment commands β”œβ”€β”€ build_assets.py # Asset minification script -β”œβ”€β”€ babel.cfg # Babel configuration for translations +β”œβ”€β”€ translation_manager.py # JSON-based translation system +β”œβ”€β”€ test_translations.py # Translation testing script +β”œβ”€β”€ robots.txt # Search engine configuration β”œβ”€β”€ static/ # Static assets β”‚ β”œβ”€β”€ css/ # CSS files β”‚ β”‚ β”œβ”€β”€ main.css # Main stylesheet @@ -121,31 +127,67 @@ Kobelly/ β”‚ β”œβ”€β”€ index.html # Homepage β”‚ β”œβ”€β”€ services.html # Services page β”‚ β”œβ”€β”€ about.html # About page -β”‚ └── contact.html # Contact page -└── translations/ # Translation files - β”œβ”€β”€ en/LC_MESSAGES/messages.po - β”œβ”€β”€ nl/LC_MESSAGES/messages.po - β”œβ”€β”€ fr/LC_MESSAGES/messages.po - └── de/LC_MESSAGES/messages.po +β”‚ β”œβ”€β”€ contact.html # Contact page +β”‚ β”œβ”€β”€ portfolio.html # Portfolio page +β”‚ └── components/ # Reusable template components +β”‚ β”œβ”€β”€ hero_section.html +β”‚ β”œβ”€β”€ cta_section.html +β”‚ β”œβ”€β”€ stats_section.html +β”‚ └── testimonials_section.html +└── translations/ # JSON translation files + β”œβ”€β”€ en.json # English translations + β”œβ”€β”€ nl.json # Dutch translations + β”œβ”€β”€ fr.json # French translations + └── de.json # German translations ``` ## Multilanguage Support -The website supports four languages: +The website supports four languages using a simple JSON-based translation system: - πŸ‡ΊπŸ‡Έ **English** (EN) - Default - πŸ‡³πŸ‡± **Dutch** (NL) - πŸ‡«πŸ‡· **French** (FR) - πŸ‡©πŸ‡ͺ **German** (DE) -Users can switch languages using the language selector in the navigation bar. The language preference is stored in the session. +Users can switch languages using the language selector in the navigation bar or URL parameters (`?lang=de`). The language preference is stored in the session. + +### Translation System + +The project uses a custom JSON-based translation system that: +- **No compilation needed** - Just edit JSON files directly +- **Real-time updates** - Changes appear immediately after restart +- **Simple maintenance** - Clear JSON structure +- **Independent languages** - Edit English without breaking translations + +### Adding New Translations + +1. **Add the string to your template:** + ```html +

{{ t('New Section Title') }}

+ ``` + +2. **Add it to the translation files:** + ```json + // translations/en.json + { + "New Section Title": "New Section Title" + } + + // translations/de.json + { + "New Section Title": "Neuer Abschnittstitel" + } + ``` + +3. **Restart your Flask app** - Changes appear immediately! ## Customization ### Content Updates 1. **Text Content**: Edit the HTML templates in the `templates/` directory -2. **Translations**: Update the `.po` files in the `translations/` directory -3. **Styling**: Modify the CSS in `templates/base.html` +2. **Translations**: Update the `.json` files in the `translations/` directory +3. **Styling**: Modify the CSS in `static/css/main.css` ### Adding New Pages @@ -155,19 +197,24 @@ Users can switch languages using the language selector in the navigation bar. Th ### Updating Translations -1. Extract translatable strings: +The JSON-based system makes translation updates simple: + +1. **Edit translation files directly:** ```bash - pybabel extract -F babel.cfg -o messages.pot . + # Open and edit the JSON files + nano translations/en.json + nano translations/de.json + # etc. ``` -2. Update translation files: +2. **Restart the application:** ```bash - pybabel update -i messages.pot -d translations + python app.py ``` -3. Compile translations: +3. **Test translations:** ```bash - pybabel compile -d translations + python test_translations.py ``` ## Asset Optimization @@ -211,28 +258,24 @@ The website includes a fully functional contact form that sends email notificati ### 1. Email Configuration -1. **Copy the environment template:** - ```bash - cp .env.example .env - ``` +The application uses environment variables for email configuration. You can set these in your environment or create a `.env` file: -2. **Configure your email settings in `.env`:** - ```bash - # For Gmail (recommended) - MAIL_SERVER=smtp.gmail.com - MAIL_PORT=587 - MAIL_USE_TLS=True - MAIL_USERNAME=contact@kobelly.be - MAIL_PASSWORD=your-app-password-here - MAIL_DEFAULT_SENDER=contact@kobelly.be - ``` +```bash +# For Gmail (recommended) +MAIL_SERVER=smtp.gmail.com +MAIL_PORT=587 +MAIL_USE_TLS=True +MAIL_USERNAME=contact@kobelly.be +MAIL_PASSWORD=your-app-password-here +MAIL_DEFAULT_SENDER=contact@kobelly.be +``` -3. **For Gmail users:** - - Enable 2-factor authentication on your Google account - - Generate an "App Password" in Google Account settings - - Use the app password as `MAIL_PASSWORD` +### 2. For Gmail users: +- Enable 2-factor authentication on your Google account +- Generate an "App Password" in Google Account settings +- Use the app password as `MAIL_PASSWORD` -### 2. Alternative Email Providers +### 3. Alternative Email Providers **For other SMTP providers, update the settings accordingly:** ```bash @@ -247,7 +290,7 @@ MAIL_PORT=587 MAIL_USE_TLS=True ``` -### 3. Testing the Contact Form +### 4. Testing the Contact Form 1. Start the application 2. Navigate to the Contact page @@ -267,6 +310,12 @@ The form includes: - `SECRET_KEY`: Secret key for Flask sessions (default: 'your-secret-key-change-in-production') - `FLASK_ENV`: Flask environment (development/production) - `FLASK_DEBUG`: Debug mode (0=disabled, 1=enabled, defaults to 1 in development) +- `MAIL_SERVER`: SMTP server for email (default: smtp.gmail.com) +- `MAIL_PORT`: SMTP port (default: 587) +- `MAIL_USE_TLS`: Use TLS encryption (default: True) +- `MAIL_USERNAME`: Email username +- `MAIL_PASSWORD`: Email password +- `MAIL_DEFAULT_SENDER`: Default sender email **Environment Modes:** @@ -296,10 +345,11 @@ For production deployment: - **Backend**: Flask 2.3.3 - **Frontend**: Bootstrap 5, Font Awesome -- **Internationalization**: Flask-Babel +- **Translation**: Custom JSON-based system - **Containerization**: Docker, Docker Compose - **Styling**: Custom CSS with CSS variables -- **Asset Management**: Flask-Assets with CSS/JS minification +- **Asset Management**: Custom build script with CSS/JS minification +- **Email**: Flask-Mail ## Browser Support