Se state leggendo questo post direttamente sul blog, il tema di cui vi parlo ce l'avete sotto gli occhi. Si chiama Onda e l'ho scritto io, riga per riga, perché a un certo punto mi sono stancato di cercare.
Quando ho spostato il blog su Ghost ho fatto quello che fanno tutti: ho aperto la galleria dei temi e ho cominciato a provarli uno dopo l'altro. Alcuni erano belli ma pensati per una rivista con dieci redattori, altri così minimali da sembrare vuoti, e quando ne trovavo uno quasi giusto c'era sempre qualcosa che non mi andava. Così finivo a smanettare con il CSS per sistemare un dettaglio, e poi un altro.
Dopo un paio di settimane così mi sono detto: se devo comunque mettere le mani nel codice, tanto vale partire da un foglio bianco. Ed eccoci qua.
Perché proprio «Onda»
Il nome viene dal motivo che si ripete ovunque nel tema. Ci sono onde sotto i titoli delle sezioni, onde che separano i blocchi della pagina, immagini con il bordo inferiore ondulato. Anche i link nel menu e negli articoli si sottolineano con una linea a onda quando ci passate sopra. E i pulsanti, se ci portate il mouse, si riempiono dal basso con un'onda che sale. Una scemenza, ma è divertente.
I colori sono caldi: un gradiente che va dal corallo all'arancio e dei riquadri color crema per i box e i widget. Colori da tramonto al mare, onda appunto.
Cosa c'è dentro
In home trovate uno slider con gli articoli in evidenza e un indice numerato sulla destra. Scorre da solo, si ferma quando ci passate sopra con il mouse, si comanda con le frecce, con la tastiera o con il dito sul telefono. E se qualcuno ha JavaScript disattivato, vede comunque la prima slide invece di un buco.
Accanto agli articoli c'è una barra laterale con il widget «Chi sono», gli argomenti con il numero di post per ciascuno, gli articoli in evidenza e il box della newsletter. La parte bassa della barra vi segue mentre scorrete, quella alta resta ferma, così i widget principali sono sempre raggiungibili.
Dentro un articolo c'è una sottile barra in cima che vi dice quanto manca alla fine. In fondo trovate i pulsanti per condividere (X, Bluesky, Facebook, LinkedIn, WhatsApp e un tasto per copiare il link), il box dell'autore, i commenti nativi di Ghost e qualche articolo correlato preso dagli stessi tag. Per i post a cui tengo di più c'è anche un template «Cover», con l'immagine a tutta pagina e il titolo sopra.
E poi c'è la modalità scura. Si sceglie dall'interruttore nell'header, il tema si ricorda la vostra scelta e, cosa a cui tenevo parecchio, non c'è il fastidioso lampo bianco quando caricate la pagina di notte. C'è anche la modalità automatica, che segue le impostazioni del vostro sistema.
Si personalizza senza toccare il codice
Una cosa che volevo evitare era costringere chi lo usa ad aprire i file. Quasi tutto si cambia dal pannello di Ghost, in Design e brand: logo a sinistra o al centro, i due colori del gradiente, il colore dei riquadri, il font dei titoli (un sans moderno, un serif elegante o uno più arrotondato), lo schema chiaro, scuro o automatico. Potete decidere se mostrare la barra laterale, se far pescare allo slider gli articoli in evidenza o gli ultimi usciti, se negli articoli volete la barra di lettura, la condivisione, il box autore e i correlati. Se avete già impostato i font e il colore del brand in Ghost, il tema li usa senza fare storie.
Il tema parla italiano e inglese e segue la lingua impostata nel blog. Per chi usa la newsletter di Ghost c'è anche il supporto agli iscritti: form nel footer e nella barra laterale, una fascia che invita a iscriversi e i contenuti riservati ai membri.
Due parole per chi smanetta
Tecnicamente è tutto molto semplice, e l'ho voluto così. I template sono in Handlebars, come vuole Ghost 6. Il CSS è un unico file, organizzato con variabili per colori, raggi e ombre, così cambiare l'aspetto generale è questione di poche righe. Il JavaScript sono circa trecento righe scritte a mano, senza librerie e senza dipendenze.
Soprattutto, non c'è nessun passaggio di build. Niente npm install che scarica mezzo internet, niente bundler da configurare: modificate un file, ricaricate e vedete il risultato. Le animazioni allo scroll si spengono da sole per chi ha chiesto al sistema di ridurre i movimenti, e il menu su mobile si usa anche con la tastiera e con un lettore di schermo.
Per controllare che tutto sia in regola con Ghost ho usato gscan, lo strumento ufficiale di validazione. Finora tutto è validato correttamente.
Presto su git, per tutti
Anche Onda finirà sul mio repository git con licenza MIT, quindi potrete scaricarlo, usarlo, modificarlo e farci quello che vi pare. Prima però voglio finire i test: lo sto usando qui da qualche giorno proprio per scovare i difetti che in locale non saltano fuori. Se navigando notate qualcosa di strano, tipo un'immagine tagliata male o un colore che stona in modalità scura, ditemelo, mi fate un favore.
Edit: Ecco il repository con il tema.
Mi trovate su Mastodon come @FedeRinaldi83@mastodon.uno.
Commenti