Come Creare Appunti di Formazioneh1

Questa guida ti spiegherà come creare nuovi appunti per la sezione Formazione utilizzando file MDX.

Struttura dei Fileh2

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

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

Frontmatterh2

Ogni file MDX deve iniziare con un blocco frontmatter YAML che contiene i metadati dell’appunto:

---
title: 'Titolo dell\'appunto'
description: 'Breve descrizione dell\'appunto'
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: 'CC BY-SA 4.0' (opzionale)
---

Campi Obbligatorih3

• title: Titolo dell’appunto
• description: Descrizione breve dell’appunto (usata per SEO e anteprime)
• pubDate: Data di pubblicazione nel formato YYYY-MM-DD
• author: Nome dell’autore (default: ‘vlolek’)

Campi Opzionalih3

• tags: Array di tag per categorizzare l’appunto (es: [‘corso’, ‘javascript’, ‘frontend’])
• updatedDate: Data di ultimo aggiornamento
• cover: Immagine di copertina (percorso relativo alla cartella dell’appunto)
• ogImage: Immagine personalizzata per Open Graph (se non specificata, usa la cover)
• recommend: Se true, mostra un badge “CONSIGLIATO”
• postType: Tipo di layout dell’appunto:
  • metaOnly: Solo metadati, senza immagine di copertina
  • coverTop: Immagine di copertina in alto
  • coverSplit: Immagine di copertina divisa con il contenuto
• coverLayout: Posizione dell’immagine di copertina (left o right) per il layout coverSplit
• pinned: Se true, l’appunto appare in evidenza nella homepage
• draft: Se true, l’appunto non viene pubblicato
• license: Licenza del contenuto

Contenutoh2

Dopo il frontmatter, puoi scrivere il contenuto dell’appunto utilizzando Markdown standard e componenti MDX.

Esempio Completoh3

---
title: 'Appunti di JavaScript Avanzato'
description: 'Appunti del corso di JavaScript avanzato - Closures, Prototypes e Async'
pubDate: 2025-01-15
author: 'vlolek'
tags: ['javascript', 'corso', 'programmazione']
cover: assets/cover.png
recommend: true
draft: false
---

# Appunti di JavaScript Avanzato

Questi sono gli appunti del corso di JavaScript avanzato.

## Closures

Una closure è una funzione che ha accesso alle variabili del suo scope esterno...

\`\`\`javascript
function outerFunction() {
  const outerVariable = 'Ciao';

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}
\`\`\`

## Prototypes

Il sistema di prototipi in JavaScript...

## Async/Await

Gestione asincrona del codice...

Layout degli Appuntih2

Gli appunti supportano gli stessi layout degli articoli:

MetaOnlyh3

Layout semplice senza immagine di copertina, ideale per appunti testuali:

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: javascript-avanzato)
2. Immagini: Salva le immagini nella cartella assets/ dentro la cartella dell’appunto
3. Tag: Usa tag consistenti per facilitare la navigazione (es: nome del corso, argomento)
4. Descrizioni: Scrivi descrizioni chiare che indichino l’argomento trattato
5. Date: Usa sempre il formato YYYY-MM-DD per le date
6. Organizzazione: Organizza gli appunti per corso o argomento usando i tag

Creare un Nuovo Appuntoh2

1. Crea una nuova cartella in src/content/education/nome-appunto/
2. Crea il file index.mdx nella cartella
3. Aggiungi il frontmatter con tutti i metadati necessari
4. Scrivi il contenuto in Markdown/MDX
5. Se necessario, aggiungi immagini nella cartella assets/
6. Imposta draft: false quando sei pronto a pubblicare

Noteh2

• Gli appunti con draft: true non vengono visualizzati nel sito
• Gli appunti con pinned: true appaiono in evidenza nella homepage
• La data pubDate determina l’ordine di visualizzazione (più recenti prima)
• Usa i tag per organizzare gli appunti per corso o argomento