Come Creare Progettih1

Questa guida ti spiegherà come creare nuovi progetti per la sezione Progetti utilizzando file MDX.

Struttura dei Fileh2

Ogni progetto deve essere creato in una cartella dedicata all’interno di src/content/projects/. La struttura consigliata è:

src/content/projects/
  └── nome-progetto/
      ├── index.mdx
      └── assets/ (opzionale)
          └── cover.png

Frontmatterh2

Ogni file MDX deve iniziare con un blocco frontmatter YAML che contiene i metadati del progetto:

---
title: 'Nome del Progetto'
description: 'Breve descrizione del progetto'
pubDate: 2025-01-15
author: 'vlolek'
tags: ['tag1', 'tag2']
updatedDate: 2025-01-20 (opzionale)
cover: assets/cover.png (opzionale)
ogImage: assets/og-image.png (opzionale)
recommend: false (opzionale, default: false)
postType: 'metaOnly' | 'coverTop' | 'coverSplit' (opzionale)
coverLayout: 'left' | 'right' (opzionale)
pinned: false (opzionale, default: false)
draft: false (opzionale, default: false)
license: 'MIT' (opzionale)
githubUrl: 'https://github.com/username/project' (opzionale)
website: 'https://progetto.example.com' (opzionale)
---

Campi Obbligatorih3

• title: Nome del progetto
• description: Descrizione breve del progetto
• pubDate: Data di pubblicazione nel formato YYYY-MM-DD
• author: Nome dell’autore (default: ‘vlolek’)

Campi Opzionali Specifici per Progettih3

• githubUrl: URL del repository GitHub del progetto
• website: URL del sito web del progetto (se disponibile)
• tags: Array di tag per categorizzare il progetto
• cover: Immagine di copertina del progetto
• ogImage: Immagine personalizzata per Open Graph
• recommend: Se true, mostra un badge “CONSIGLIATO”
• postType: Tipo di layout (vedi sezione Layout)
• coverLayout: Posizione dell’immagine (left o right)
• pinned: Se true, il progetto appare in evidenza
• draft: Se true, il progetto non viene pubblicato
• license: Licenza del progetto (es: ‘MIT’, ‘GPL-3.0’, ecc.)

Contenutoh2

Dopo il frontmatter, puoi scrivere la descrizione dettagliata del progetto utilizzando Markdown standard e componenti MDX.

Esempio Completoh3

---
title: 'Il Mio Progetto'
description: 'Un progetto fantastico realizzato con tecnologie moderne'
pubDate: 2025-01-15
author: 'vlolek'
tags: ['web', 'react', 'typescript']
cover: assets/cover.png
githubUrl: 'https://github.com/username/mio-progetto'
website: 'https://mio-progetto.example.com'
recommend: true
draft: false
---

# Il Mio Progetto

Descrizione dettagliata del progetto, delle sue caratteristiche e funzionalità.

## Caratteristiche

- Feature 1
- Feature 2
- Feature 3

## Tecnologie Utilizzate

- React
- TypeScript
- Tailwind CSS

## Installazione

\`\`\`bash
npm install
npm run dev
\`\`\`

## Link

- [GitHub](https://github.com/username/mio-progetto)
- [Demo](https://mio-progetto.example.com)

Layout dei Progettih2

I progetti supportano gli stessi layout degli articoli:

MetaOnlyh3

Layout semplice senza immagine di copertina:

postType: 'metaOnly'

CoverToph3

Immagine di copertina posizionata in alto:

postType: 'coverTop'
cover: assets/cover.png

CoverSplith3

Immagine di copertina divisa con il contenuto:

postType: 'coverSplit'
cover: assets/cover.png
coverLayout: 'right'  # o 'left'

Best Practicesh2

1. Nomi delle cartelle: Usa nomi descrittivi in minuscolo con trattini (es: mio-progetto)
2. Immagini: Salva le immagini nella cartella assets/ dentro la cartella del progetto
3. Link esterni: Includi sempre githubUrl se il progetto è open source
4. Descrizioni: Scrivi descrizioni chiare che spieghino cosa fa il progetto
5. Tag: Usa tag rilevanti per facilitare la ricerca

Creare un Nuovo Progettoh2

1. Crea una nuova cartella in src/content/projects/nome-progetto/
2. Crea il file index.mdx nella cartella
3. Aggiungi il frontmatter con tutti i metadati necessari
4. Includi githubUrl e/o website se disponibili
5. Scrivi la descrizione dettagliata in Markdown/MDX
6. Se necessario, aggiungi immagini nella cartella assets/
7. Imposta draft: false quando sei pronto a pubblicare

Noteh2

• I progetti con draft: true non vengono visualizzati nel sito
• I progetti con pinned: true appaiono in evidenza nella homepage
• La data pubDate determina l’ordine di visualizzazione (più recenti prima)
• I link GitHub e Website vengono mostrati automaticamente nella pagina del progetto