maxsoch 528e8bcbbb feat: initial Sochboard dashboard

- 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

2026-07-24 08:59:17 +02:00

4.2 KiB

Raw Blame History

Configuration de Sochboard

Structure générale

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

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

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

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

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.

Format CDN : https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/<nom>.svg

Exemple complet

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

4.2 KiB Raw Blame History

Configuration de Sochboard

Structure générale

site

theme

sections

links