» 💾 Archivi Devlogs

-> #sitoctt #staticoso

Da quanto che non scrivevo un devlog! Qualcosina però, per sitoctt e staticoso, l'ho fatta nel frattempo.

Il primo cambiamento notevole che ho apportato al sito in questi giorni è l'applicazione del nuovo tema (esclusivamente) alla pagina home. Lascio una foto, cosicché questo post sia comprensibile anche a distanza di tempo senza che serva controllare la Wayback Machine.
La cosa bella? Avevo iniziato a progettarlo diversi mesi fa, pian piano, giorno per giorno, fino a che ad un certo punto.. ho dimenticato di continuare! 😵 Alla fine, però, ho finito tutte le rifiniture e aggiunto nuovi dettagli.

Non so cosa stavo pensando mentre costruivo il template, e quindi è venuto un miscuglio di roba: stile ambiente desktop.. ma con lo sfondo Bubbles di Windows 95 ricolorato di viola, tema quasi-metro per taskbar (dove a sinistra si trova il tasto menu) e decorazioni di finestra, con la barra del titolo che ha il titolo al centro, ma un'icona rappresentante la finestra a destra, e un tasto per collassare/riaprire le stesse. Quest'ultima roba, assieme al poter portare una finestra mezza nascosta in primo piano cliccandola (su PC basta passarci sopra il cursore del mouse), l'ho fatta ovviamente funzionare senza alcuno script!

Il riposizionamento in primo piano è molto facile: con la pseudo-classe CSS Hover, applicato alla classe delle finestre, si imposta un valore Z superiore al default di tutte le altre finestre. In questo modo, la finestra verrà rialzata quando ci si passa il puntatore virtuale sopra.

.Window:Hover {
    /* Non ci sono al momento finestre con Z-Index maggiore di questo, quindi va bene */
    Z-Index: 128;
}

La storia dello shading delle finestre, invece, è più complicata e mi ha richiesto l'uso di qualche hack, e ora spiego il tutto. Segue l'HTML rappresentante un'ipotetica finestra, e del relativo CSS.

<div class="Window" id="ExampleWindow">
    <div class="TitleBar">
        <input type="checkbox" class="CheckToggle" id="ExampleWindowCheck">
        <div class="TitleBarContent">
            <span> <label class="CheckLabel" for="MainWindowCheck"></label> </span> &nbsp;&nbsp; <span> <b>Finestra Esempio</b> </span>
        </div>
        <div class="WindowContent ToggleBox">
            <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
            </p>
        </div>
    </div>
</div>

/* Input checkbox della classe specifica per i bottoni no-JS */

/* Impostato come invisibile per motivi estetici */
.CheckToggle {
    Position: Fixed;
    Opacity: 0;
    Visibility: Hidden;
}

/* Di default, sui label dedicati alle checkbox, figura un simbolo rappresentante lo stato di unshaded */
.CheckLabel:Before {
    Content: '🔼';
}

/* A checkbox spuntata, sul label nidificato adiacente figura un simbolo rappresentante lo stato di shaded */
:Checked ~ .TitleBarContent > Span > .CheckLabel:Before {
    Content: '🔽';
}

/* A checkbox spuntata, sparisce il div del contenuto */
:Checked ~ .ToggleBox {
    Display: None;
    Visibility: Hidden;
}

Insomma, se questa robaccia si può fare è grazie all'abuso del selettore CSS ~ (tilde), che permette di applicare una proprietà ad un elemento adiacente ad un altro, in questo caso verificando prima una condizione con una pseudo-classe (la proprietà Checked della casella).

Il problema è che, non esistendo alcun selettore per raggiungere elementi genitori del DOM, ho dovuto piazzare il div del contenuto in quello della barra del titolo: una schifezza, pure abbastanza grossa considerando cosa ho dovuto fare poi per rendere le finestre esteticamente a posto nonostante il loro scheletro affetto dalle devianze.

Continuando con il vedere le classi CSS delle finestre in sé.. i commenti bastano.

.Window {
    Position: Absolute;
    Margin: Var(--WindowMargin);
    /* Bordo per estetica, 4px nel mio caso */
    Border: Solid Var(--WindowBorderSize) Var(--TitleBarBackground);
}
.WindowContent {
    /* Minima larghezza del div contenuto della finestra pari alla totale finestra */
    Min-Width: Calc(100% + Var(--WindowMargin)*2 + Var(--WindowBorderSize)*2);
    /* Padding per estetica */
    Padding: Calc(Var(--WindowPadding)*2);
    Padding-Top: Var(--WindowPadding);
    /* Overflow Y permesso nel solo div contenuto 
    Overflow-Y: Auto;
    /* Allineamento del contenuto nella finestra tenendo conto dei margini */
    Margin-Left: Calc(0px - Var(--WindowMargin) - Var(--WindowBorderSize));
    Margin-Top: Var(--WindowBorderSize);
}

Questo, infine, è il CSS applicato alle singole finestre, che differisce sempre in valori.. e, a parte i commenti, anche qui non so proprio cosa dire! 🤐 La soluzione funziona? E allora va bene così.

/*
*/ #ExampleWindow {
    /* Dimensioni massime della finestra */
    Max-Width: 80vw;
    Max-Height: 75vh;
    /* Posizione assoluta a schermo */
    Top: 8px;
    Left: 16px;
    Z-Index: 8;
}
/*
*/ #FeedWindow .WindowContent {
    /* Impostazione della massima altezza del div contenuto della finestra;
     * Per qualche motivo, se non esplicito la cosa, il contenuto sborda sempre.
     * All'altezza massima dell'intera finestra devo sottrarre, oltre al margine,
     * ben 2 volte l'altezza della barra del titolo (ma forse basterebbe una costante arbitraria),
     * altrimenti il contenuto può andare comunque troppo giù.
     */
    Max-Height: Calc(75vh - (Var(--TitleBarHeight) * 2) - Var(--WindowMargin));
}

Questa complessa soluzione funziona perfettamente su Firefox e su Chromium desktop, ma su Chromium per Android questi posizionamenti pixel-perfect fanno imbizzarrire il motore CSS, che non si vergogna affatto di mostrare dello spazio vuoto tra i bordi decorativi e lo sfondo degli altri div che compongono la finestra.

Vabbè, lo diciamo che fa schifo? Ma sì: FA SCHIFO! Se hai una soluzione migliore senza JavaScript, io sto aspettando la tua pull request. Forza, sto aspettando, aiutami a togliere lo schifo.

Grazie a questo nuovo tema posso permettermi di aggiungere, in modo un minimo sensato, alcuni meta-contenuti ripetuti tra le pagine del sito che lo usano - anche se per il momento l'ho applicato solo alla home, perchè ho paura che causi un po' troppa confusione visiva sulle pagine dove il contenuto deve stare al primo posto. Una cosa che ho messo, per dire, è la lista di post recenti in una finestrella dedicata.

Per quest'ultima cosa, ho chiaramente dovuto aggiornare staticoso, che genera la lista quando nel codice di una pagina trova la stringa <staticoso:Feed>.
Ne ho approfittato per fare anche altri piccoli miglioramenti, ad esempio ho aggiunto la generazione automatica di pagine di redirect per una serie di URL alternativi specificati nei metadati di una pagina; con questa funzione ho potuto facilmente rinominare i file di alcune pagine nel sito senza rompere gli URL vecchi, ed ho aggiunto alias di convenienza per certe pagine: ad esempio, /Blog.html che rimanda a /Categories/Blog.html.

Come ultime cose: al generatore ho aggiunto anche la creazione di liste di tutte le pagine contenute in una cartella e relative sottocartelle del sito, che richiamo con <staticoso:DirectoryList:{DIRECTORY}> e forse, credo, mi servirà più tardi, anche se ho già creato una pagina che ne fa uso.

-> #staticoso #sitoctt

Soprattutto a causa della necessità di rendere staticoso leggermente più adatto alla creazione di siti di documentazione, oltre che di blog e cose così, ho sentito di dover apportare qualche miglioramento alla generazione dei ✨magici✨ titoli delle sezioni.

Ispirandomi parzialmente a cosa fa mdBook, ho aggiunto un target ancora (<a>) al fianco di ogni heading nel testo.
mdBook rende ogni titolo un link in sé; soluzione elegante ed intuitiva per copiare un link alla sezione all'istante, ma che può dare (da) problemi grossi in certi casi. Ad esempio, le sezioni <details>, che io tanto amo, diventerebbero difficili da aprire, perché gran parte della loro hitbox sarebbe coperta da quella di un link.
Dovevo inventarmi qualcos'altro.

A livello di HTML, allora, staticoso genera per ogni titolo la seguente struttura: elemento heading, che contiene prima un elemento span racchiudente l'ancora, a sua volta contenente il semplice testo », e poi un altro span (con id univoco) che ha il titolo in sé.
Facendo un esempio pratico, questo è cosa esce fuori:

<!--
--> <h1 class="SectionHeading">
    <span class="SectionLink">
        <a href="#-Titolo-di-esempio">
            <span>»</span>
        </a>
    </span>
    <span class="SectionTitle" id="-Titolo-di-esempio">
        Titolo di esempio
    </span>
</h1>

Senza CSS, i titoli sulla pagina renderizzata si vedono come al solito, eccetto per il fatto che hanno un carattere » cliccabile alla loro sinistra. Andrebbe bene già così, ma ovviamente io avevo la personalizzazione in mente da subito.
Sul tema principale del sitoctt, infatti, ho personalizzato la cosa in modo da avere:

• L'emoji della catena (🔗) come carattere per il link;
• Il posizionamento un po' a sinistra del tastino, per far rimanere i titoli in linea con il testo normale;
• Opacità del carattere molto ridotta, e un po' meno ridotta quando il mouse/dito ci passa sopra;
• Evidenziazione e sottolineatura di un heading attivato.

In codice CSS, la mia visione si è tradotta in queste righe:

.SectionTitle:Target {
    Color: #EEDDFF !Important;
    Background: #700070 !Important;
    Text-Decoration: Underline;
}
.SectionLink {
    Position: Absolute;
    Left: -1.5em;
    Opacity: 0.08;
}
.SectionLink:Hover {
    Opacity: 0.8;
}
.SectionLink > A::Before {
    Content: '🔗';
}
.SectionLink > A > Span {
    Font-Size: 0;
}

In tutta onestà, lo ripeto: forse per il sitoctt questa cosa non serviva; ma, per la documentazione di staticoso, credo sarà utilissima.

-> #staticoso #sitoctt

È una cosina semplice, quella che ho fatto ieri (e che solo oggi ho tempo di scrivere), ma può secondo me avere grandi implicazioni: ho aggiunto a staticoso la possibilità di scrivere nell'HTML il momento (data e ora) in cui il programma ha compilato ogni pagina, che posso sfruttare aggiungendo la macro [staticoso:BuildTime] dove preferisco.

Ritengo sia qualcosa di utile almeno per il sitoctt: mi fa più che piacere che il sito possa venire archiviato e distribuito parallelamente ai miei server - se non fosse stato così, non avrei scelto con tale convinzione la licenza CC BY-SA - però potrebbero sorgere problemi in caso venissero fatti circolare backup obsoleti che non mettono in chiaro di esserlo.

Nel tempo, il sito inevitabilmente subisce modifiche. Alcune sono semplici aggiunte, e in quei casi un archivio obsoleto del sito avrà banalmente cose in meno; altre volte, si tratta di rettifiche.
Data la possibilità di quest'ultimo tipo di aggiornamenti, è bene che chi legga una copia del sito possa eventualmente accorgersi del fatto che la stessa sia vecchia (ad esempio, di una settimana o più, considerando la frequenza con cui di solito aggiorno il sito).

Revisioni ai miei vecchi contenuti possono avvenire per diversi fattori: magari ritengo giusto aggiornarli perché non più in linea con qualche verità oggettiva, oppure con le mie opinioni personali.
Non che le versioni precedenti debbano per forza sparire - la cronologia di Git sta bene dove sta - ma il punto è che le edizioni antiche del sitocto devono specificarlo bene, per evitare di indurre una qualsiasi persona in confusione.

E quindi, alla fine, ecco che ora ho la data di compilazione al piè di ogni pagina.
O almeno, così è al momento in cui scrivo. Non è mica da escludere che lo stile del mio sito possa cambiare prima o poi, e con esso anche il posizionamento della mia bella riga di testo! 😬️