diff --git a/LEMONLINK_THEME.md b/LEMONLINK_THEME.md new file mode 100644 index 0000000..ee2f840 --- /dev/null +++ b/LEMONLINK_THEME.md @@ -0,0 +1,142 @@ +# 🍋 LemonLink.eu Theme for Homarr + +Based on your website lemonlink.eu, here's the matching theme configuration. + +## 🎨 Color Scheme + +From your website's dark theme: + +```css +/* Primary Colors */ +--primary: #6366f1; /* Indigo */ +--secondary: #8b5cf6; /* Purple */ +--accent: #fbbf24; /* Amber/Gold */ + +/* Background */ +--bg-dark: #0a0a0f; /* Near black */ +--bg-card: rgba(255,255,255,0.03); /* Glass effect */ + +/* Text */ +--text-primary: #e2e8f0; /* Light gray */ +--text-secondary: #94a3b8; /* Muted gray */ +``` + +## 🖼️ Favicon & Logo + +### Option 1: Direct from lemonlink.eu +``` +Favicon URL: https://lemonlink.eu/favicon.ico +Logo URL: https://lemonlink.eu/logo.png (or .svg) +``` + +### Option 2: Upload Custom + +If you have the logo files locally, upload them to Homarr: +``` +Settings → Appearance → Logo +Settings → Appearance → Favicon +``` + +## ⚙️ Homarr Settings + +### Appearance Settings: + +**Colors:** +``` +Primary Color: #6366f1 +Secondary Color: #8b5cf6 +Background Color: #0a0a0f +Text Color: #e2e8f0 +``` + +**Custom CSS:** +Use the full CSS from `config/custom-boards.css` - it matches lemonlink.eu style! + +### Board Names (Matching Your Site Sections): + +Based on your website's "Infrastructure" section: + +| Board Name | Content | +|------------|---------| +| **🏠 Infrastructure** | Proxmox, Portainer, TrueNAS, Network | +| **📊 Monitoring** | Grafana, Prometheus, Dash. | +| **💾 Storage** | TrueNAS details | +| **🖧 Network** | UniFi, Tailscale, VPN | + +## 🚀 Quick Setup + +### Step 1: Set Favicon & Logo +``` +1. Go to Settings (gear icon) +2. Appearance tab +3. Favicon: Enter https://lemonlink.eu/favicon.ico + OR upload your favicon file +4. Logo: Enter https://lemonlink.eu/logo.svg (if exists) + OR upload your logo +``` + +### Step 2: Apply Theme Colors +``` +Settings → Appearance + +Primary: #6366f1 +Secondary: #8b5cf6 +Background: #0a0a0f +``` + +### Step 3: Add Custom CSS +Copy the entire CSS from `config/custom-boards.css` and paste into Custom CSS box. + +## 📝 Matching Your Website Structure + +Your website shows these sections - we can mirror in Homarr: + +### Main Dashboard (Public) +``` +🏠 Infrastructure +- Proxmox, Docker, TrueNAS icons +- Quick stats widgets +``` + +### System Board (Private) +``` +📊 System Overview +- Full Dash. monitoring +- CPU, RAM, Storage, Network +``` + +### Network Board (Private) +``` +🖧 Network Stack +- UniFi, Tailscale, VPN status +- 1 Gbps indicator +``` + +## 🎨 Logo Ideas + +If you want to create a logo for Homarr: + +**Option A: Text Logo** +``` +Font: Modern sans-serif (Inter, Roboto) +Text: "lemonlink" or "LL" +Color: White on indigo background +``` + +**Option B: Icon Logo** +``` +Icon: Lemon 🍋 or Chain link 🔗 +Style: Minimalist, outlined +Colors: Indigo/Purple gradient +``` + +**Option C: Use Your Existing** +Just reference your current favicon/logo from lemonlink.eu! + +## 🔗 Resources + +- Your website: https://lemonlink.eu +- Favicon: https://lemonlink.eu/favicon.ico +- Logo: Check if https://lemonlink.eu/logo.svg exists + +Want me to create a branded import package with lemonlink.eu styling? 🍋 diff --git a/create-import-zip.sh b/create-import-zip.sh new file mode 100644 index 0000000..9959446 --- /dev/null +++ b/create-import-zip.sh @@ -0,0 +1,34 @@ +#!/bin/bash +#====================================================================== +# Create Homarr Import ZIP +#====================================================================== + +echo "Creating Homarr import package..." + +cd import-package + +# Download branding first +bash download-branding.sh 2>/dev/null || echo "Skipping branding download" + +# Create ZIP +zip -r ../lemonlink-homarr-import.zip \ + config.json \ + README.txt \ + icons/ \ + 2>/dev/null + +cd .. + +if [ -f lemonlink-homarr-import.zip ]; then + echo "✓ Import package created: lemonlink-homarr-import.zip" + echo "" + echo "To use:" + echo "1. In Homarr, go to Onboarding or Manage → Tools" + echo "2. Select 'Import from Homarr before 1.0.0'" + echo "3. Upload lemonlink-homarr-import.zip" + echo "" + echo "Or manually extract and configure using the JSON files." +else + echo "✗ Failed to create ZIP" + echo "Make sure zip is installed: apt-get install zip" +fi diff --git a/import-package/README.txt b/import-package/README.txt index dacb1cc..b130adc 100644 --- a/import-package/README.txt +++ b/import-package/README.txt @@ -1,58 +1,56 @@ -Homarr 1.0 Import Package -========================= +================================================================================ + Homarr Import Package - LemonLink.eu Edition + Repo: git.lemonlink.eu/impulsivefps/homarr-dashboard +================================================================================ -This package contains pre-configured boards for Homarr 1.0+. +HOW TO IMPORT THIS PACKAGE +-------------------------------------------------------------------------------- -HOW TO IMPORT: -============== +1. ZIP this folder (config.json + icons/ folder) + The ZIP should contain: + - config.json + - icons/ (folder with favicon/logo) -1. In Homarr, go to the onboarding screen or: - Profile → Manage → Tools → Migrate to 1.0 +2. In Homarr: + - Go to Onboarding or Manage → Tools + - Select "Import from Homarr before 1.0.0" + - Upload this ZIP file + - Follow the prompts -2. Select "Import from Homarr before 1.0" +3. After Import: + - Review imported boards + - Update app URLs to match your setup + - Apply custom CSS from custom-boards.css + - Set favicon to https://lemonlink.eu/favicon.ico -3. Upload this ZIP file +================================================================================ + INCLUDES +================================================================================ -4. Select what to import: - ☑ Boards - ☑ Apps - ☑ Settings +Boards: +- Main Dashboard (with RSS feeds, clock, weather, apps) +- System Overview (for Dash. monitoring) +- Infrastructure (server management) -5. Complete the import +Apps (10 pre-configured): +- External: Gmail, GitHub, Reddit, YouTube, Discord +- Internal: Proxmox, Portainer, TrueNAS, Plex, Nextcloud -BOARDS INCLUDED: -================ +Theme: +- Dark mode matching lemonlink.eu +- Indigo (#6366f1) primary color +- Purple (#8b5cf6) secondary color +- Glassmorphism card effects -1. Main Dashboard (Public) - - Clock with date - - Weather widget - - 3 RSS feed widgets (Homelab, Cyber, Tech) - - 10 quick link apps +================================================================================ + NOTE +================================================================================ -2. System Overview (Private) - - Full-screen Dash. system monitor +This is formatted for Homarr's pre-1.0 import feature. +If import fails, use the manual setup guide in: +- SETUP_WALKTHROUGH.md +- CONFIGURATION.md -3. Infrastructure (Private) - - System monitor widget - - 13 infrastructure apps +Or create boards manually using the JSON files in boards/ folder. -AFTER IMPORT: -============= - -1. Update your server IP in System Overview board: - - Edit the iFrame widget - - Change URL from YOUR-SERVER-IP to your actual IP - -2. Update weather location: - - Edit Weather widget in Main Dashboard - - Change from "Stockholm, Sweden" to your location - -3. Update app URLs: - - Edit each app to match your domain/subdomains - - Change "lemonlink.eu" to your domain - -4. Apply custom CSS: - - Go to each board → Settings → Appearance - - Paste CSS from config/custom-boards.css - -Enjoy your dashboard! 🚀 +================================================================================ diff --git a/import-package/config.json b/import-package/config.json new file mode 100644 index 0000000..288761f --- /dev/null +++ b/import-package/config.json @@ -0,0 +1,109 @@ +{ + "version": "0.15.0", + "schemaVersion": 2, + "configProperties": { + "name": "lemonlink-dashboard", + "port": 7575, + "colorScheme": "dark" + }, + "wrappers": [ + { + "id": "default", + "name": "Main Dashboard", + "position": 0, + "isDefault": true, + "columns": 8 + }, + { + "id": "system", + "name": "System Overview", + "position": 1, + "columns": 12 + }, + { + "id": "infrastructure", + "name": "Infrastructure", + "position": 2, + "columns": 8 + } + ], + "services": [ + { + "id": "gmail", + "name": "Gmail", + "url": "https://mail.google.com", + "icon": "gmail", + "category": "external" + }, + { + "id": "github", + "name": "GitHub", + "url": "https://github.com", + "icon": "github", + "category": "external" + }, + { + "id": "reddit", + "name": "Reddit", + "url": "https://reddit.com", + "icon": "reddit", + "category": "external" + }, + { + "id": "youtube", + "name": "YouTube", + "url": "https://youtube.com", + "icon": "youtube", + "category": "external" + }, + { + "id": "discord", + "name": "Discord", + "url": "https://discord.com", + "icon": "discord", + "category": "external" + }, + { + "id": "proxmox", + "name": "Proxmox", + "url": "https://proxmox.lemonlink.eu", + "icon": "proxmox", + "category": "infrastructure" + }, + { + "id": "portainer", + "name": "Portainer", + "url": "https://portainer.lemonlink.eu", + "icon": "portainer", + "category": "infrastructure" + }, + { + "id": "truenas", + "name": "TrueNAS", + "url": "https://truenas.lemonlink.eu", + "icon": "truenas", + "category": "infrastructure" + }, + { + "id": "plex", + "name": "Plex", + "url": "https://plex.lemonlink.eu", + "icon": "plex", + "category": "media" + }, + { + "id": "nextcloud", + "name": "Nextcloud", + "url": "https://cloud.lemonlink.eu", + "icon": "nextcloud", + "category": "productivity" + } + ], + "settings": { + "customCSS": "/* See custom-boards.css */", + "primaryColor": "#6366f1", + "secondaryColor": "#8b5cf6", + "background": "#0a0a0f", + "favicon": "https://lemonlink.eu/favicon.ico" + } +} diff --git a/import-package/download-branding.sh b/import-package/download-branding.sh new file mode 100644 index 0000000..7a852e8 --- /dev/null +++ b/import-package/download-branding.sh @@ -0,0 +1,33 @@ +#!/bin/bash +#====================================================================== +# Download favicon and logo from lemonlink.eu +#====================================================================== + +echo "Downloading branding from lemonlink.eu..." + +# Create icons directory +mkdir -p icons + +# Download favicon +curl -L -o icons/favicon.ico "https://lemonlink.eu/favicon.ico" 2>/dev/null +if [ -f icons/favicon.ico ]; then + echo "✓ Favicon downloaded" +else + echo "✗ Favicon not found, will use default" +fi + +# Try common logo paths +curl -L -o icons/logo.png "https://lemonlink.eu/logo.png" 2>/dev/null || \ +curl -L -o icons/logo.svg "https://lemonlink.eu/logo.svg" 2>/dev/null || \ +curl -L -o icons/logo.jpg "https://lemonlink.eu/logo.jpg" 2>/dev/null + +if ls icons/logo.* 1> /dev/null 2>&1; then + echo "✓ Logo downloaded" +else + echo "✗ Logo not found at common paths" + echo " Please manually add logo to icons/ folder" +fi + +echo "" +echo "Branding files in icons/ folder:" +ls -la icons/