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
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 658 KiB |
+20
-10
@@ -1,20 +1,30 @@
|
|||||||
import type { Metadata } from 'next'
|
import type { Metadata } from 'next'
|
||||||
import './globals.css'
|
import './globals.css'
|
||||||
|
import { prisma } from '@/lib/prisma'
|
||||||
|
import { Footer } from '@/components/storefront/Footer'
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export async function generateMetadata(): Promise<Metadata> {
|
||||||
title: 'ShopX - E-Commerce Platform',
|
try {
|
||||||
description: 'Your online store',
|
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({
|
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||||
children,
|
|
||||||
}: {
|
|
||||||
children: React.ReactNode
|
|
||||||
}) {
|
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="it">
|
||||||
<body className="bg-gray-50 text-gray-900 min-h-screen">
|
<body className="bg-gray-50 text-gray-900 min-h-screen flex flex-col">
|
||||||
{children}
|
{children}
|
||||||
|
<Footer />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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
|
||||||
|
```
|
||||||
Reference in New Issue
Block a user