janpeter visser
4dd62c199c
- usePlannerStore met pbiOrder/storyOrder init/reorder/rollback (ST-201) - useSelectionStore uitgebreid met selectedStoryId en clearSelection (ST-202) - PBI drag-and-drop binnen prioriteitsgroep via dnd-kit (ST-203) - PBI slepen over prioriteitsgrens wijzigt priority (ST-204) - Stories als blokken met prioriteit- en statusbadge (ST-205/ST-206) - Story drag-and-drop horizontaal binnen en tussen groepen (ST-207) - Story detail slide-over met bewerkformulier (ST-208) - Story verwijderen met bevestigingsstap (ST-209) - Filter op status en prioriteit in rechterpaneel (ST-210) - Fix: infinite loop in useEffect door stabiele string dependency Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
125 lines
3.2 KiB
Markdown
125 lines
3.2 KiB
Markdown
# Scrum4Me — Icon installatie voor Next.js
|
||
|
||
## Bestandslocaties
|
||
|
||
Kopieer de bestanden naar de juiste plek in je Next.js App Router project:
|
||
|
||
```
|
||
app/
|
||
favicon.ico ← favicon.ico
|
||
icon-192.png ← icon-192.png (rename: icon.png)
|
||
apple-icon.png ← icon-180.png (rename: apple-icon.png)
|
||
|
||
public/
|
||
icon-512.png ← voor PWA manifest
|
||
icon-192.png ← voor PWA manifest
|
||
|
||
components/
|
||
shared/
|
||
app-icon.tsx ← herbruikbare React component
|
||
```
|
||
|
||
## Stap 1 — Favicon en app icons
|
||
|
||
```bash
|
||
# Kopieer naar app/ map (Next.js pikt deze automatisch op)
|
||
cp favicon.ico ../app/favicon.ico
|
||
cp icon-192.png ../app/icon.png
|
||
cp icon-180.png ../app/apple-icon.png
|
||
|
||
# Kopieer naar public/ voor manifest
|
||
cp icon-512.png ../public/icon-512.png
|
||
cp icon-192.png ../public/icon-192.png
|
||
```
|
||
|
||
## Stap 2 — Metadata in app/layout.tsx
|
||
|
||
```tsx
|
||
// app/layout.tsx
|
||
import type { Metadata } from 'next'
|
||
|
||
export const metadata: Metadata = {
|
||
title: {
|
||
default: 'Scrum4Me',
|
||
template: '%s — Scrum4Me',
|
||
},
|
||
description: 'Lichtgewicht Scrum-planner voor solo developers en kleine teams',
|
||
icons: {
|
||
icon: [
|
||
{ url: '/favicon.ico', sizes: '48x48' },
|
||
{ url: '/icon.png', sizes: '192x192', type: 'image/png' },
|
||
],
|
||
apple: [
|
||
{ url: '/apple-icon.png', sizes: '180x180', type: 'image/png' },
|
||
],
|
||
},
|
||
manifest: '/manifest.json',
|
||
}
|
||
```
|
||
|
||
## Stap 3 — PWA manifest (optioneel)
|
||
|
||
Maak `public/manifest.json` aan:
|
||
|
||
```json
|
||
{
|
||
"name": "Scrum4Me",
|
||
"short_name": "Scrum4Me",
|
||
"description": "Lichtgewicht Scrum-planner voor solo developers en kleine teams",
|
||
"start_url": "/dashboard",
|
||
"display": "standalone",
|
||
"background_color": "#0d0a14",
|
||
"theme_color": "#7c3aed",
|
||
"icons": [
|
||
{
|
||
"src": "/icon-192.png",
|
||
"sizes": "192x192",
|
||
"type": "image/png",
|
||
"purpose": "any maskable"
|
||
},
|
||
{
|
||
"src": "/icon-512.png",
|
||
"sizes": "512x512",
|
||
"type": "image/png",
|
||
"purpose": "any maskable"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## Stap 4 — AppIcon component gebruiken
|
||
|
||
```tsx
|
||
// In de navigatiebalk:
|
||
import { AppIcon } from '@/components/shared/app-icon'
|
||
|
||
export function Navbar() {
|
||
return (
|
||
<nav>
|
||
<div className="flex items-center gap-2">
|
||
<AppIcon size={28} />
|
||
<span className="font-semibold text-foreground">Scrum4Me</span>
|
||
</div>
|
||
</nav>
|
||
)
|
||
}
|
||
```
|
||
|
||
## Gegenereerde bestanden — overzicht
|
||
|
||
| Bestand | Formaat | Gebruik |
|
||
|---|---|---|
|
||
| `favicon.ico` | ICO (16+32+48) | Browser tabblad |
|
||
| `icon-16.png` | PNG 16×16 | Browser fallback |
|
||
| `icon-32.png` | PNG 32×32 | Browser retina tabblad |
|
||
| `icon-48.png` | PNG 48×48 | Windows taskbar |
|
||
| `icon-76.png` | PNG 76×76 | iPad non-retina |
|
||
| `icon-120.png` | PNG 120×120 | iPhone retina |
|
||
| `icon-144.png` | PNG 144×144 | Windows tile |
|
||
| `icon-152.png` | PNG 152×152 | iPad retina |
|
||
| `icon-180.png` | PNG 180×180 | Apple touch icon |
|
||
| `icon-192.png` | PNG 192×192 | Android / PWA |
|
||
| `icon-512.png` | PNG 512×512 | PWA splash / stores |
|
||
| `icon-master.svg` | SVG | Bronbestand (master) |
|
||
| `icon-simple.svg` | SVG | Vereenvoudigd voor kleine formaten |
|
||
| `app-icon.tsx` | React | Inline SVG component |
|