docs: add favicon, reorganize docs and add customization guide

- Add icon.png as default favicon (cropped to remove transparent padding) - Fix layout.tsx to use icon.png as fallback when favicon_url is not set in DB - Move ADMIN_GUIDE.md to docs/ folder - Add docs/CUSTOMIZATION.md with guide on how to customize icon, title, footer
2026-05-18 22:49:14 +02:00
parent e82e20b0f1
commit b33eee8bea
4 changed files with 109 additions and 10 deletions
@@ -1,20 +1,30 @@
 import type { Metadata } from 'next'
 import './globals.css'
+import { prisma } from '@/lib/prisma'
+import { Footer } from '@/components/storefront/Footer'

-export const metadata: Metadata = {
-  title: 'ShopX - E-Commerce Platform',
-  description: 'Your online store',
+export async function generateMetadata(): Promise<Metadata> {
+  try {
+    const rows = await prisma.siteSettings.findMany({
+      where: { key: { in: ['site_name', 'site_description', 'favicon_url'] } },
+    })
+    const s = Object.fromEntries(rows.map((r) => [r.key, r.value]))
+    return {
+      title: (s.site_name as string) || 'ShopX',
+      description: (s.site_description as string) || 'Your online store',
+      icons: { icon: (s.favicon_url as string) || '/icon.png' },
+    }
+  } catch {
+    return { title: 'ShopX', description: 'Your online store' }
+  }
 }

-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
-    <html lang="en">
-      <body className="bg-gray-50 text-gray-900 min-h-screen">
+    <html lang="it">
+      <body className="bg-gray-50 text-gray-900 min-h-screen flex flex-col">
        {children}
+        <Footer />
      </body>
    </html>
  )
@@ -0,0 +1,89 @@
+# Personalizzazione dell'e-commerce
+
+Tutte le personalizzazioni principali si gestiscono dal **pannello admin** senza toccare il codice, oppure modificando file specifici descritti qui sotto.
+
+---
+
+## 1. Tramite pannello admin (senza toccare il codice)
+
+Vai su `/admin/settings` per modificare:
+
+| Impostazione | Campo | Descrizione |
+|---|---|---|
+| Nome del sito | `site_name` | Appare nel titolo del browser e nel footer |
+| Descrizione | `site_description` | Meta description per SEO |
+| Copyright footer | `footer_copyright` | Testo in basso a sinistra nel footer |
+| Link nel footer | `footer_links` | Array JSON di link `[{"label":"Chi siamo","url":"/about"}]` |
+| Favicon (URL) | `favicon_url` | URL di un'immagine esterna da usare come favicon |
+
+Queste impostazioni sono salvate nel database e applicate in tempo reale.
+
+---
+
+## 2. Favicon (icona del browser)
+
+**Modo consigliato — file locale:**
+
+1. Sostituisci il file [app/src/app/icon.png](../app/src/app/icon.png) con la tua icona
+2. Formato: PNG con sfondo trasparente, dimensione minima 64×64px (ideale 512×512px)
+3. Ricostruisci il container: `docker compose up --build app -d`
+
+> La favicon da pannello admin (`favicon_url`) ha la precedenza sul file locale.
+> Se vuoi usare solo il file locale, lascia `favicon_url` vuoto nel database.
+
+**Fallback applicato in** [app/src/app/layout.tsx](../app/src/app/layout.tsx):
+```ts
+icons: { icon: (s.favicon_url as string) || '/icon.png' },
+```
+
+---
+
+## 3. Titolo e descrizione del sito
+
+**Via pannello admin** (consigliato): imposta `site_name` e `site_description` in `/admin/settings`.
+
+**Valori di fallback nel codice** — [app/src/app/layout.tsx](../app/src/app/layout.tsx) righe 13-14:
+```ts
+title: (s.site_name as string) || 'ShopX',       // ← cambia 'ShopX'
+description: (s.site_description as string) || 'Your online store',
+```
+
+---
+
+## 4. Footer
+
+**Via pannello admin** (consigliato): imposta `footer_copyright` e `footer_links`.
+
+**Struttura del componente** — [app/src/components/storefront/Footer.tsx](../app/src/components/storefront/Footer.tsx):
+- Testo copyright: riga con `footer_copyright` o fallback automatico `© anno NomeSito`
+- Link di navigazione: array JSON salvato in `footer_links`
+
+Esempio `footer_links`:
+```json
+[
+  { "label": "Chi siamo", "url": "/about" },
+  { "label": "Contatti", "url": "/contact" },
+  { "label": "Privacy", "url": "/privacy" }
+]
+```
+
+---
+
+## 5. Riepilogo file da modificare (solo codice)
+
+| Cosa | File |
+|---|---|
+| Favicon locale | [app/src/app/icon.png](../app/src/app/icon.png) |
+| Fallback titolo/favicon | [app/src/app/layout.tsx](../app/src/app/layout.tsx) |
+| Struttura footer | [app/src/components/storefront/Footer.tsx](../app/src/components/storefront/Footer.tsx) |
+| Stili globali | [app/src/app/globals.css](../app/src/app/globals.css) |
+
+---
+
+## 6. Dopo modifiche al codice
+
+Se hai modificato file nel codice (non solo il pannello admin), ricostruisci il container:
+
+```bash
+docker compose up --build app -d
+```