Playground

Apri il Playground →

Il Playground (l’editor di go-slides nel browser) è go-slides stesso, v0.20.2, compilato in WebAssembly ed eseguito nel tuo browser. Scrivi una presentazione a sinistra; le slide seguono a destra. Nulla viene inviato a un server: né la presentazione, né un link di condivisione.

L’interfaccia del Playground (barra multifunzione, guida, messaggi) parla la lingua della pagina: apri /it/playground/ per l’italiano, e così per le dodici lingue di questo sito. Il selettore di lingua della pagina la cambia e la tua scelta resta salvata in questo browser; un link che indica una lingua prevale sempre. Le presentazioni di esempio restano in inglese. Ucraino, russo, cinese, giapponese e coreano sono disegnati con un sottoinsieme di Noto Sans (da 0,06 a 2,3 MiB) che la pagina scarica solo per queste lingue.

Cosa offre

• Anteprima in tempo reale di ogni slide, resa fuori dal thread della pagina (un Web Worker), quindi la digitazione non deve mai aspettarla. Fai clic su una slide per portare l’editor alla sua riga; sposta il cursore e l’anteprima scorre fino alla sua slide.

• Slideshow: la presentazione vera e propria, con la tastiera, il controller a schermo e le transizioni.

• Vista del relatore: Present (o p nello slideshow) la apre in una seconda finestra: la slide corrente, il passo successivo, le note del relatore (i <!-- comments --> della presentazione), un orologio e un timer. I tasti freccia, Spazio, Home e Fine funzionano in entrambe le finestre, e ciascuna segue l’altra, anche quando modifichi la presentazione. Se la finestra non si apre, consenti i pop-up per il sito. La vista panoramica (o) esiste solo nella pagina scaricata.

• Completamento durante la digitazione: chiavi delle direttive (quelle spot con _ nei commenti), i valori di kind, theme, size, paginate, e le funzioni dei template e i campi dei dati dentro {{ }}.

• Guida per ciò che si trova sotto il cursore: una direttiva, un kind (il tipo di una slide: cosa imposta), una funzione di template. Il riquadro della guida rimanda anche a queste pagine. Dalla v0.16.0 la guida alle direttive segue la lingua dell’interfaccia, in 11 lingue.

• Problemi sulla loro riga: gli errori di template, YAML e HCL sono evidenziati nell’editor ed elencati sotto di esso, e l’anteprima conserva l’ultima presentazione che è stata resa.

• Esempi: una presentazione di benvenuto, template che generano slide, kinds, un front matter HCL, temi e direttive spot, e matematica, immagini e sfondi (![bg], un ![bg left:40%] diviso, filtri).

• File: il pannello a sinistra dell’editor è il progetto della presentazione, organizzato come lo leggono il comando e l’estensione di VS Code: deck.md, slides.yaml, themes/, kinds/, media/.

  • Fai clic su un file per modificarlo. L’editor lo colora secondo il suo linguaggio (Markdown, YAML, HCL, JSON, CSS) e ne segnala i problemi.
  • Clic destro (o Maiusc+F10) per Nuovo file, Nuova cartella, Rinomina (F2), Elimina (chiede conferma) e Nuovo tema / Nuovo kind. Trascina un file su una cartella per spostarlo. La tastiera segue il pattern ad albero WAI-ARIA, compresa la ricerca digitando.
  • Project ▸ New theme crea themes/my-gaia.css (oppure da default, uncover): un @import del tema integrato e le regole che aggiungi. Entra nell’elenco dei temi. Anche New kind e New data file partono da modelli. Ognuno è elencato in slides.yaml, così slides build deck.md lo trova.
  • Project ▸ Download project (.zip) salva tutto. Decompresso, slides build deck.md lo compila. Open project riprende uno .zip o una cartella. Un archivio che esce dalla propria cartella (.., percorsi assoluti), contiene più di 256 file o 8 MiB in un file, o si espande più di 100 volte viene rifiutato.
  • Tutto viene conservato in questo browser insieme alla bozza. Un progetto contiene fino a 64 MiB, e la riga sotto i file dice quanto ne è usato.

• Media: trascina o incolla un’immagine, un video o un suono sull’editor e finisce in media/, e la presentazione lo nomina: ![](media/photo.png). Trascina file su una cartella del pannello per metterli lì. La presentazione resta piccola e leggibile, e nulla viene caricato. La sandbox dell’anteprima li carica senza essere aperta (la pagina le passa i byte). Save as ▸ HTML page li inserisce nella pagina. Funzionano anche le immagini https:, ma il browser le preleva dal loro server, che vede così il tuo indirizzo. L’anteprima non invia alcun referrer.

• Riquadri ridimensionabili: il pannello dei file, l’editor, le miniature delle slide, l' anteprima e la guida sono separati da barre che puoi trascinare (il puntatore diventa un cursore di ridimensionamento sopra una di esse). Il riquadro accanto alla barra prende lo spazio, gli altri mantengono la loro dimensione. Fai doppio clic su una barra, o premi Invio su di essa, per chiudere il riquadro e riaprirlo. Da tastiera, F6 passa tra le barre, i tasti freccia ne spostano una di 16 px, Home e Fine portano il riquadro che la precede alla dimensione minima e massima, ed Esc torna all’editor. La scheda View continua a disattivare i riquadri. Le dimensioni impostate sono conservate in questo browser, con la bozza; le dimensioni predefinite (190, 168 e 280 px, con l’editor e l’anteprima che si dividono il resto 6 a 5) non vengono mai memorizzate.

• Chiudere un riquadro: ogni riquadro ha un piccolo pulsante × nell’intestazione, con un suggerimento. Gli altri si dividono il suo spazio e il riquadro torna alla larghezza che aveva. Per riaprirlo usa il suo interruttore nella scheda View (ogni riquadro ne ha uno). L’editor e l’anteprima possono essere chiusi ciascuno, mai entrambi: l’ultimo rifiuta, il suo pulsante è disattivato e il suggerimento ne spiega il motivo. Da tastiera, F6 e poi Tab o Maiusc+Tab portano a un pulsante ×, e Invio o Spazio chiude il riquadro; la tastiera torna all’editor. I riquadri aperti sono conservati in questo browser insieme alle dimensioni (Versions, GitHub e l’editor dei temi, aperti per un’attività, partono chiusi).

• Formato: la scheda Format modifica il Markdown al posto tuo, e ogni pressione è un passo di Annulla.

  • Testo: Grassetto, Corsivo, Barrato e Codice in linea agiscono sulla selezione o sulla parola sotto il cursore e si alternano (Ctrl+B, Ctrl+I, Ctrl+Maiusc+X e Ctrl+E; Cmd su Mac). Un pulsante appare premuto quando il cursore è dentro i suoi segni. Markdown non ha il sottolineato: Underline (Ctrl+U) racchiude il testo in <u>…</u>, un tag che la lista consentita HTML predefinita di Marp mantiene, quindi funziona con l’HTML grezzo disattivato.
  • Paragrafo: Titolo da 1 a 3 (Ctrl+Alt+1..3), elenchi puntati (Ctrl+Maiusc+8), numerati (Ctrl+Maiusc+7) e una citazione agiscono sulle righe selezionate e si alternano. La linea orizzontale è il tag <hr>: ---, *** e ___ inizierebbero ciascuno una nuova slide in Marp.
  • Tabella: una griglia sceglie colonne e righe. Con il cursore in una tabella aggiungi o rimuovi una riga o una colonna e allinei la colonna (:--, :-:, --:); la tabella viene riscritta allineata dopo ogni modifica.
  • Testo della slide a sinistra, al centro o a destra scrive un blocco <style scoped> nella slide corrente. Marp non ha una sintassi di allineamento, e un attributo style non supera la lista consentita HTML predefinita, mentre il blocco scoped sì, quindi funziona con l’HTML grezzo disattivato e compare nell’anteprima, nella pagina HTML e nel PDF.
  • Link (Ctrl+K) scrive [text](url) con l’url selezionato.

• Evidenziazione delle chiavi del front matter a qualsiasi profondità, in YAML (anche nelle mappe {a: 1}) e in HCL.

• Selettore di tema: default, gaia, uncover, i temi del progetto (themes/*.css) e i temi definiti dalla presentazione (/* @theme name */ in un <style>). Scrive theme: nel front matter, YAML o HCL, così un link condiviso lo conserva, e segue il front matter quando lo modifichi.

• L’anteprima mantiene la posizione mentre digiti: vengono sostituite solo le slide che sono cambiate, e un cambio di tema riapre l’anteprima sulla stessa slide.

• Link di condivisione: la presentazione viaggia nel link stesso (nella sua parte #, compressa), quindi aprire il link apre la presentazione. I link trasportano fino a 64 KiB compressi, e solo la presentazione: quando il progetto contiene di più (temi, kinds, media), Share lo dice e propone lo .zip.

• Save as:

  • la pagina HTML, la stessa che scrive slides deck.md;
  • un PDF (vettoriale, con testo selezionabile, con indice);
  • una presentazione PowerPoint o OpenDocument modificabile.

  Sono prodotti nel tuo browser, dallo stesso codice di slides --pdf, --pptx e --odp: il PDF della presentazione di benchmark da 100 slide è identico byte per byte a quello del comando. La prima esportazione scarica il motore di esportazione (circa 5 MiB, una volta; il browser lo conserva fino al prossimo aggiornamento), con una riga di avanzamento, e lo compila man mano che arriva. Poi scarica solo i font che le tue slide disegnano. Con un collegamento a 3 MB/s il primo PDF della presentazione di benvenuto è pronto in meno di 3 secondi. La presentazione da 100 slide richiede poi circa 3 secondi. Un’immagine https: è inclusa solo se il suo server lo consente (CORS); quelle data: lo sono sempre.

• La tua bozza viene conservata:

  • La presentazione è salvata in questo browser mentre digiti (IndexedDB, solo per questo sito) e ritorna quando ricarichi. Nulla viene inviato altrove. I file di testo del progetto (temi, kinds, dati, slides.yaml) sono conservati allo stesso modo, anche se chiudi la scheda subito dopo aver digitato; i media sono memorizzati nel momento in cui vengono trascinati.
  • Un link condiviso apre la sua presentazione e conserva la tua bozza: Draft ▸ Restore my draft la riporta indietro.
  • Un esempio, Draft ▸ Reset to the example (che chiede conferma) e un’altra scheda non la cancellano mai: Draft ▸ Restore replaced la riporta indietro.
  • Draft ▸ Forget my drafts cancella tutto ciò che è memorizzato.

Ogni esportazione rende il progetto che mostra l’anteprima: il suo slides.yaml, temi, kinds, file di dati e media, con i media dentro il documento.

Le immagini come file (slides --images) non vengono prodotte nel browser: usa il comando o l' estensione di VS Code.

Editor di temi

Home ▸ Aspetto ▸ Editor di temi apre un pannello che modifica uno dei temi del progetto con dei controlli, e l’anteprima segue. Il tema è conservato come cartella di pacchetto, theme-src/<name>/; il foglio che leggono l’anteprima e le esportazioni, themes/<name>.css, ne è compilato: ciò che vedi è ciò che esporti. Un pacchetto di tema che importi (Importa… nel pannello, Aggiungi contenuto multimediale… o un trascinamento) vi conserva i suoi file, quindi puoi modificarlo.

• Tavolozza: i colori di sfondo, testo, titoli, accento e link. Scegli un colore o scrivilo (#1a2b3c, rgb(), hsl() o un nome).
• Tipografia: i caratteri del testo, dei titoli e del codice, con dimensioni e spessori. I caratteri sono quelli generici e comuni, e quelli che aggiungi (Aggiungi carattere…: .woff2, .woff, .ttf o .otf).
• Logo: un’immagine (.svg, .png), dove va (un angolo o tutto lo sfondo) e la sua dimensione. Numero di pagina e piè di pagina: dove va il numero di pagina, più dimensioni e allineamento.
• Dettagli: ciò che dice theme.hcl: versione, descrizione, autori, licenza, pagina web, il tema di base (extends) e la versione di go-slides richiesta.
• Contrasto (WCAG): per ogni testo sul suo sfondo, il rapporto e il suo livello, AA o AAA, o «Non conforme», in tempo reale. I titoli contano come testo grande (3:1 basta per AA; il testo normale richiede 4,5:1).

Modifica CSS mostra il foglio del tema nell’editor. I controlli scrivono solo dentro un blocco racchiuso da due commenti gsta:visual, e lo rileggono quando ne modifichi i valori a mano. Ciò che scrivi fuori dal blocco non viene mai toccato. Se aggiungi nel blocco qualcosa che i controlli non possono mostrare, smettono di scrivere e il pannello lo dice; Ripristina il blocco lo riscrive dai valori che contiene e nient’altro.

Importa… apre un .gsta.xz o un .css isolato. Un pacchetto è verificato come lo verifica slides theme verify, con gli stessi limiti: un pacchetto non sicuro (un percorso che ne esce, un collegamento, uno script in un SVG, una url() remota, una somma di controllo che non corrisponde) è rifiutato con il suo codice theme.*, in Problemi, e non cambia nulla. In un foglio isolato un @import "gaia"; diventa il tema di base (extends), perché un pacchetto vi nomina la sua base. Un carattere che aggiungi ha la licenza LicenseRef-unspecified finché non la indichi in Dettagli.

Esporta .gsta.xz costruisce il pacchetto nel tuo browser e lo rilegge come fa slides theme verify, così il file lo supera; Esporta CSS scarica il foglio compilato. Nulla viene caricato. Ogni modifica è un passo di Annulla (le modifiche di uno stesso controllo di seguito sono un passo) e conserva ciò che sostituisce come versione; Salva versione conserva il tema e la sua versione, con il suo nome, nel pannello Versioni.

Annulla, ripristina e versioni

Undo e Redo (annulla e ripeti) si trovano nella scheda Home e su Ctrl+Z, Ctrl+Maiusc+Z o Ctrl+Y (Cmd su Mac). Annullano l’ultima modifica del file mostrato (ogni file ha la propria cronologia) e poi l’ultima operazione sull’intero progetto: un esempio scelto, Reset, un .zip o una cartella aperti, una bozza ripristinata, un file o una cartella eliminati o rinominati, una versione ripristinata. Redo riporta tutto com’era quando è stato premuto Undo.

Le versioni conservano l’intero progetto in questo browser, senza inviare nulla da nessuna parte. Ne viene conservata una poco dopo che smetti di scrivere (al massimo ogni 2 minuti), prima di ogni operazione sull’intero progetto e a ogni esportazione e link di condivisione. Save version… ne conserva una con un nome. Home ▸ Versions apre il riquadro Versions:

• Preview mostra una versione nell’anteprima.
• Compare with now mostra le modifiche di ogni file riga per riga, in linea o affiancate; F7 e Maiusc+F7 passano da una modifica all’altra.
• Restore rimette a posto una versione; Undo annulla il ripristino.
• Delete rimuove una versione.

Cosa viene conservato: le 20 versioni automatiche più recenti, poi una all’ora per un giorno e una al giorno per un mese. Le versioni con nome restano finché non le elimini (al massimo 50). Tutte le versioni insieme occupano al massimo 96 MiB e i file che non sono cambiati vengono memorizzati una volta sola. Quando la memoria del browser è piena, le versioni automatiche più vecchie vanno via per prime.

GitHub

Home ▸ History ▸ GitHub apre un riquadro che carica la cartella di una presentazione da un repository GitHub e rimanda le vostre modifiche come pull request. Compilate:

• Repository (proprietario/nome);
• Branch (vuoto: quello predefinito);
• Cartella (vuota: la radice): la cartella deve contenere un deck.md.

Sopra questi campi il riquadro mostra il frame git: un piccolo pannello in cui scegliete la forge, digitate il token (mascherato), spuntate Ricorda su questo dispositivo e premete Connetti (o Accedi con GitLab) oppure Disconnetti. Il frame è una pagina di un altro sito, go-slides-usercontent.github.io, incorporata nel playground: la pagina del playground non vede mai il vostro token.

Il token è un token di accesso personale a granularità fine (crearne uno), limitato ai repository scelti, con i permessi Contents in lettura e scrittura e Pull requests in lettura e scrittura (Metadata in lettura è implicito). Poi:

• Carica sostituisce il progetto con la cartella di GitHub. Undo lo annulla, e il progetto com’era resta come versione «Da GitHub».
• Proponi le modifiche… chiede un titolo, crea un nuovo branch slides/<titolo>-<data-ora> e apre una pull request. Non scrive mai in un branch esistente né nel branch predefinito. Apri la pull request vi ci porta.
• Cerca modifiche confronta la versione più recente su GitHub con la vostra nella vista Compare. Prendi le loro la carica.

Per GitHub non si usa alcun proxy: il frame gli parla direttamente.

Il token si digita nel frame e resta sul suo sito. La pagina del playground non può leggerlo (il frame è un’altra origine, con una memoria propria), nessun comando che la pagina può inviare lo restituisce, e la Content Security Policy della pagina non le consente alcuna connessione a GitHub o GitLab. Il frame invia il token solo a api.github.com (o gitlab.com). Non viene mai salvato nella bozza, nelle versioni, nei link di condivisione o nelle esportazioni, e non raggiunge mai l’anteprima delle slide né il worker di rendering. Ricorda su questo dispositivo lo conserva nel localStorage proprio del frame, su go-slides-usercontent.github.io, non nella memoria del playground, fino a Disconnetti (o Forget my drafts).

Se avete usato una versione precedente: un token che essa conservava nella memoria propria della pagina del playground viene rimosso la prima volta che aprite questa versione, e il riquadro ve lo dice. Digitatelo di nuovo nel frame (e spuntate Ricorda se volete che resti salvato).

Proponi le modifiche… è una scrittura, quindi il frame vi chiede prima: mostra il titolo, il repository e il numero di file, e attende il vostro clic sul proprio pulsante Consenti (al massimo due minuti, una proposta alla volta). Nulla viene scritto prima del vostro clic.

Restano due rischi, perché sono inerenti a una pagina che incorpora un frame. Uno script iniettato nella pagina del playground può leggere il nonce del frame e inviare i comandi del frame: leggere la cartella che avete caricato, o chiedere una proposta (che dovete comunque consentire nel frame). E può disegnare un falso pannello sopra il frame e chiedervi da sé il token: se il frame sembra sbagliato o non è dove dovrebbe essere, non digitate il token. Nessuno dei due gli permette di leggere il token che il frame conserva. Preferite un token limitato ai repository che vi servono. Per i team, la modalità server self-hosted (in arrivo) tiene i token sul server.

GitLab.com

Il riquadro ha un elenco di forge: GitHub e GitLab.com. Per GitLab, fornite un token di accesso personale con lo scope api, oppure premete Accedi con GitLab (codice di autorizzazione OAuth con PKCE, senza segreto). L’accesso apre una piccola finestra del sito del frame e vi ritorna; la pagina del playground in cui lavorate non viene abbandonata. I suoi token restano solo nella memoria del frame (mai ricordati sul dispositivo, nemmeno con Ricorda su questo dispositivo), si rinnovano da soli prima di scadere, e Disconnetti li revoca presso GitLab. Un accesso non avviato dal frame, o un link riutilizzato, viene rifiutato. L’accesso è disponibile quando l’applicazione GitLab del sito è registrata; fino ad allora usate un token di accesso personale.

Le richieste vanno solo a api.github.com e gitlab.com, e solo dal frame: la pagina del playground non ne fa alcuna e non invia il referrer.

Perché api? La tabella degli scope di GitLab dice di write_repository «Does not support API authentication»: serve solo per git via HTTP, che GitLab serve senza CORS, quindi un browser non può usarlo. Le proposte usano l’API REST, che richiede api, «complete read and write access to the API». Un token api rubato può fare tutto ciò che il suo utente può fare tramite l’API, su ogni progetto raggiunto da quell’utente. Preferite un token di accesso di progetto o di gruppo limitato ai repository delle presentazioni, oppure un account GitLab dedicato che sia solo membro dei progetti delle presentazioni.

Sicurezza

La presentazione è mostrata in un iframe in sandbox senza l’origine della pagina: non può raggiungere né il Playground né la sua memoria, non può inviare moduli e non naviga da nessuna parte. La sua pagina ha una Content Security Policy che esegue solo i propri script. L’HTML grezzo nella presentazione segue la lista consentita di Marp, come fa slides per impostazione predefinita. Un rendering che dura più di 5 secondi (un template che va in ciclo) viene interrotto.

La finestra del relatore mantiene quella sandbox. È aperta dal Playground stesso e mostra la presentazione in un iframe in sandbox allo stesso modo. I due iframe non possono condividere la memoria, quindi il Playground inoltra il numero della slide tra loro tramite messaggi. Nessun frame che esegue la presentazione ottiene l’origine del Playground.

I media del progetto raggiungono i frame in sandbox come byte in un messaggio, e ogni frame ne crea i propri URL blob:, nella propria origine. Un URL blob: creato dal Playground non vi si carica, e la policy dei frame guadagna solo blob: per media e font.

Il Playground può essere servito dalla tua macchina, dietro un accesso: vedi Self-hosting.

Dimensione e velocità

Il modulo è di 8,8 MiB come lo serve GitHub Pages (gzip; Pages non serve brotli). Viene scaricato una volta con una barra di avanzamento, poi messo in cache dal browser fino al prossimo deploy. Su un Apple M4 Max con Chrome 155, misurato sulla pagina pubblicata, l’editor è pronto 2,1 s dopo l’apertura della pagina, di cui 1,5 s sono il download, e le prime slide compaiono a 2,4 s. Una modifica alla presentazione di benchmark da 100 slide raggiunge l’anteprima in circa 30 ms: go-slides rende solo le slide cambiate, e solo quelle vengono sostituite nell’anteprima.