maxsoch
528e8bcbbb
- Next.js 16 App Router with TypeScript + Tailwind CSS v4 - YAML config read at runtime via server components (force-dynamic) - Zod validation for config schema (site, theme, sections, links) - Dark/light theme with CSS variables and client-side toggle - Dashboard layout: header (logo + title), sections, responsive card grid - Horizontal card layout (icon left, text right) with optional vertical mode - Lucide React icons with fallback, custom iconUrl support for SVG icons - Glassmorphism cards with hover/focus/keyboard accessibility - Mobile responsive: 2 columns on mobile, up to 5 on xl screens - Docker multi-stage build with docker-compose volume for config - Standalone Next.js output for production - CONFIGURATION.md and ROADMAP.md documentation
151 lines
4.2 KiB
Markdown
151 lines
4.2 KiB
Markdown
# Configuration de Sochboard
|
|
|
|
## Structure générale
|
|
|
|
```yaml
|
|
site:
|
|
# Informations du site
|
|
theme:
|
|
# Apparence
|
|
sections:
|
|
# Liste des sections et liens
|
|
```
|
|
|
|
## `site`
|
|
|
|
| Champ | Requis | Type | Défaut | Description |
|
|
|---|---|---|---|---|
|
|
| `name` | Oui | chaîne | — | Nom du site (ex: "Soch Family") |
|
|
| `title` | Oui | chaîne | — | Sous-titre affiché sous le nom |
|
|
| `description` | Non | chaîne | — | Texte optionnel dans le header |
|
|
| `favicon` | Non | chaîne | — | URL ou chemin du favicon |
|
|
| `logoUrl` | Non | chaîne (URL) | — | URL d'une photo/image qui remplace le "S" |
|
|
| `showFooter` | Non | booléen | `true` | `false` pour masquer le footer |
|
|
|
|
```yaml
|
|
site:
|
|
name: "Soch Family"
|
|
title: "Les applications de la famille"
|
|
description: "Accès rapide à nos services"
|
|
logoUrl: "https://example.com/photo.jpg"
|
|
showFooter: true
|
|
```
|
|
|
|
## `theme`
|
|
|
|
| Champ | Requis | Type | Défaut | Description |
|
|
|---|---|---|---|---|
|
|
| `mode` | Non | `"dark"` ou `"light"` | `"dark"` | Mode de couleur |
|
|
| `accent` | Non | chaîne (hex) | `"#8b5cf6"` | Couleur d'accent (ex: `"#ff0000"`) |
|
|
| `background` | Non | `"gradient"` ou `"solid"` | `"gradient"` | Type d'arrière-plan |
|
|
|
|
```yaml
|
|
theme:
|
|
mode: "dark"
|
|
accent: "#8b5cf6"
|
|
background: "gradient"
|
|
```
|
|
|
|
## `sections`
|
|
|
|
Tableau de sections. Chaque section contient :
|
|
|
|
| Champ | Requis | Type | Défaut | Description |
|
|
|---|---|---|---|---|
|
|
| `id` | Oui | chaîne | — | Identifiant unique |
|
|
| `title` | Oui | chaîne | — | Titre affiché |
|
|
| `description` | Non | chaîne | — | Texte sous le titre |
|
|
| `cardLayout` | Non | `"horizontal"` ou `"vertical"` | `"horizontal"` | Disposition des cartes dans la section |
|
|
| `links` | Non | tableau | `[]` | Liste des liens |
|
|
|
|
```yaml
|
|
sections:
|
|
- id: "global"
|
|
title: "Global"
|
|
description: "Tous les services"
|
|
cardLayout: "horizontal"
|
|
links: []
|
|
```
|
|
|
|
### `links`
|
|
|
|
Tableau de liens. Chaque lien contient :
|
|
|
|
| Champ | Requis | Type | Défaut | Description |
|
|
|---|---|---|---|---|
|
|
| `id` | Oui | chaîne | — | Identifiant unique |
|
|
| `name` | Oui | chaîne | — | Nom affiché |
|
|
| `description` | Non | chaîne | — | Description sous le nom |
|
|
| `url` | Oui | chaîne (URL) | — | Lien de l'application |
|
|
| `icon` | Oui | chaîne | — | Nom de l'icône Lucide |
|
|
| `iconUrl` | Non | chaîne (URL) | — | URL d'une image personnalisée (remplace `icon`) |
|
|
| `color` | Non | chaîne (hex) | — | Couleur d'accent (ex: `"#2daae1"`) |
|
|
| `openInNewTab` | Non | booléen | `true` | `false` pour ouvrir dans le même onglet |
|
|
|
|
```yaml
|
|
links:
|
|
- id: "nextcloud"
|
|
name: "Nextcloud"
|
|
description: "Fichiers et documents"
|
|
url: "https://cloud.example.com"
|
|
icon: "Cloud"
|
|
iconUrl: "https://example.com/nextcloud-icon.svg"
|
|
color: "#2daae1"
|
|
openInNewTab: false
|
|
```
|
|
|
|
## Icônes Lucide disponibles
|
|
|
|
```
|
|
Cloud Film Music Gamepad2 Router
|
|
Server House BookOpen Calendar Mail
|
|
Shield Settings Globe ExternalLink
|
|
```
|
|
|
|
Si le nom de l'icône est inconnu, `ExternalLink` est utilisé par défaut.
|
|
|
|
Si `iconUrl` est fourni, l'URL est prioritaire et `icon` sert uniquement de fallback.
|
|
|
|
Des icônes pour les applications self-hostées sont disponibles sur [dashboardicons.com](https://dashboardicons.com/).
|
|
|
|
Format CDN : `https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/<nom>.svg`
|
|
|
|
## Exemple complet
|
|
|
|
```yaml
|
|
site:
|
|
name: "Soch Family"
|
|
title: "Mes applis"
|
|
logoUrl: "https://example.com/logo.png"
|
|
showFooter: false
|
|
|
|
theme:
|
|
mode: "dark"
|
|
accent: "#8b5cf6"
|
|
background: "gradient"
|
|
|
|
sections:
|
|
- id: "services"
|
|
title: "Services"
|
|
cardLayout: "horizontal"
|
|
links:
|
|
- id: "nextcloud"
|
|
name: "Nextcloud"
|
|
url: "https://cloud.example.com"
|
|
icon: "Cloud"
|
|
iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/nextcloud.svg"
|
|
color: "#2daae1"
|
|
openInNewTab: true
|
|
|
|
- id: "admin"
|
|
title: "Administration"
|
|
cardLayout: "vertical"
|
|
links:
|
|
- id: "mon-app"
|
|
name: "Mon App"
|
|
url: "https://app.example.com"
|
|
icon: "Globe"
|
|
iconUrl: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/home-assistant.svg"
|
|
openInNewTab: false
|
|
```
|