Dario Tordoni - dtheme

DTheme version 0.1.3 - Spiritcloud

Dario Tordoni — Sun, 15 Jan 2023 22:08:00 +0100

A new update with minor improvements:

Fix: missing og:url and og:image on homepage
New: added a "verified" mark

Browsing the net I came across the blogs of Jim Nielsen and Henriquie Dias who, after the latest twitter events, have decided to use their personal blogs to verify their profiles. I don't know how useful this is as a feature, but I found it fun and decided to add it to DTheme as well.

DTheme version 0.1.2 - Ghostland Changelog

Dario Tordoni — Sun, 04 Sep 2022 23:16:00 +0200

A new update close to the previous one, with several improvements:

Fix: remove the nofollow tag from the privacy policy link
Fix: added canonical tag to html sitemap page
New: CSS improvements for topic tag, pagination, widget and so on
New: added a new project features that allows to turn a category topic into a project, enabling several features inside the project page (project description, gallery, information like version, author, coding language and external links)
New: new paginated system that shows more sub-links and enables bots to discover paginated pages faster
New: added a link for rss subscribing for categories and projects
New: switched to a new slug ("/topic/") for projects
New: added projects widget on listing pages
New: improved gallery system

The main purpose of Ghostland is to provide an easier way for both humans and bot to better surf the website and discover new content.

For the next version I think that I will focus on cleaning old code, improving the gallery and the documentation. Thank you for reading and let me know if you find any issues.

DTheme version 0.1.1 - Rantam Changelog

Dario Tordoni — Wed, 24 Aug 2022 20:38:00 +0200

Rantam is the first update after the initial release of the theme and it brings some nice (I think) improvements:

Fix: incorrect canonical to paginated pages
Fix: incorrect meta title and meta description for the blog page
Fix: removed some hardcoded values
Fix: small anomalies and mispelling on about page
New: added schema "knowsabout" tag
New: added a side panel with some widgets (author, categories)
New: added somo colours to the category labels

The side panel is a good move for improving internal linking and reducing link depth. It also helps to navigate easier across categories.

I think that giving a name to a software version is funny, so I decided to start doing it by now, with Rantam. Thank you for reading and let me know if you find any issues.

DTheme, my new theme for pelican

Dario Tordoni — Mon, 25 Jan 2021 21:52:00 +0100

This is my first theme for Pelican. Some time ago, in a previous life of this site, I used Medius, a theme I find clean and elegant.
A few months ago I got back to work on an old template, with the idea of creating a fast and light theme, offering coverage for minimal SEO needs.
After several changes I released the 0.1 version of the theme, which you can find on github.

There are already several anomalies to review and new things to implement, but I decided to start by focusing on the features most important to me, and thene add the rest over time.
I will not describe the topic in depth now, I will only point out some of its characteristics and the main anomalies.

The main features

native lazy load for hero images, for thumbnails in the blog listings and somewhere else;
I optimized the images, and more generally, the structure of the site, to follow the web vitals criteria. In the case of this site I then configured the htaccess file to cache resources;
support for images in webp format. Hero images, thumbnails and some other images ara managed with a "picture" tag, inside which I indicate both the webp and jpg versions;
preload e prefetch techniques for important resources;
a day/night theme switcher;
native font, to reduce calls to external sources and make everything faster;
presence of a related article section, which shows articles belonging to the same category as the one being viewed. Specifically I show the previous and the next one, if there are none I do not show anything.
For this feature the merit is of a plugin,I only set some divs;
provided the possibility to integrate custom script inside both the head and body section, usefull for Google Tag Manager, Google Analytics or other tools;
the main on page SEO factors and structured data items, like "article" and "person".

Things to fix

slug and internal links, in some cases are encoded in the theme and in italian;
there are errors logged in console, this prevents reaching the maximum score in lighthouse audits;
the progressive web app does not work offline. Actually, I realized that the whole service worker is to be revied, indeed, I first need to understand better how it works. I will probably remove this feature in the next release;
the documentation is bad, I have to improve a lot here;
the theme lacks of flexibility, as I write above, it is tailor-made for me, if you try to modify it too much, it can breaks;
it does not manage the images in the posts. It does not generate webp format for these images, it does not manage their dimensions, nothing. This is the reason why, at the moment, I don't have images inside my posts.

The plugins

I use different plugins, the two in the list are not necessary while the others have a more marked role:

sitemap: it generates the sitemap of the site;
minification: reduces the size of files by minifying them;
readtime: calculate the reading time of the articles. I made some changes in the officla plugin to set the number of words per minute that are read in the italian language. So you could need ti custmize it for your needs;
neighbors: just activate it to see related articles at the bottom of each posts;
pelican-toc: it generates a table of contents for each article. I made some changes inside the plugin, but it also works without them;
cover_resizer: this is a plugin I wrote, it is poorly written and is used to generate the hero images of the articles, thumbnails and different resolutions and formats (like webp).
For this to work, you need to put a file called "raw_cover.jpg" in the "/content/your-article/" folder. I upload a 1024*576 file. When generating the output, the plugin creates all the necessary variants and put them into "/theme/img/your-article/"
"/content/your-article/" e "/theme/img/your-article/" are generated by the "new-html.py" (more on this later).

Creating new content

To manage the creation of new content I use a python script, "new-html.py"", which generates an html file containing several tags, many of which are precompiled, together with some folders containing tha main images of the post.
It is important that the tags not handled by the script are filled manually.
The script accepts two options:

the slug of the article, which must be entered with the format "title-example";
the category of the article formatted "miscellaneous"; it has to be a category already in the pelicanconf file.

So the final command is "python new-file.py category-name article-title".

As a meta title, the script put the slug indicated during the creation phase, this is the first field you have to change.

Conclusions

I won't tell you how to compile the pelicaonf, I gave some indication in the readme on github and I think it makes more sense to improve that section, rather than create a new one here, which would be incomplete anyway.
This is a theme for Pelican still in its initial stage, I would like to make it a little more versatile, therefore suitable for more customizations, as well as reviewing some stylistc and technical aspetcs. But I think it can be a good start.

I hope it will be useful to someone. This is my first real public repository and I still need to get the hang of it.

DTheme, il mio nuovo tema per Pelican

Dario Tordoni — Thu, 24 Dec 2020 15:03:00 +0100

Questo è il mio primo tema per Pelican. Diverso tempo fa, in una precedente vita di questo sito, ho utilizzato Medius, un tema che trovo pulito ed elegante.
Alcuni mesi fa mi sono rimesso a lavoro su un vecchio template con l'idea di creare un tema che permettesse di generare un sito veloce, leggero e che offrisse una copertura per le minime necessità SEO.
Dopo diverse modifiche e vari ripensamenti, ho rilasciato la versione 0.1 del tema che potete trovare su github.

Non si tratta di una versione completa, anzi, ci sono già diverse anomalie da rivedere e cose nuove da implementare. Ho deciso però di iniziare concentrandomi sulle caratteristiche per me più importanti, per poi aggiungere il resto con il tempo.
Non mi metto a descrivere il tema fino in fondo ora, segnalo solo alcune sue caratteristiche e le principali anomalie.

Le principali caratteristiche

lazy load nativo per le hero image, per le anteprime nei listing del blog ed in qualche altro punto;
ho cercato di ottimizzare le immagini, e più in generale la struttura del sito, per seguire i criteri di web vitals. Nel caso di questo sito ho poi configurato il file htaccess per mettere in cache le risorse, anche questo aiuta;
supporto per le immagini in formato webp. Nel senso che le hero image, le immagini di anteprima dei post e qualche altra immagine, vengono gestite con un tag "picture", all'interno del quale indico sia le versioni in webp che quelle in jpg;
tecniche di preload e prefetch per le risorse importanti;
presenza di uno pulsante per il passagio dal tema giorno a quello notte;
uso dei font nativi, per ridurre principalmente le chiamate a fonti esterne, con i relativi tempi di connessione e download;
presenza di una sezione di articoli collegati, che mostra articoli appartenenti alla stessa categoria di quello in corso di visualizzazione. Nello specifico mostro il precedente ed il successivo, se non ce ne sono non mostro altro.
Per questa caratteristica il merito è di un plugin, io ho solo impostato qualche div;
prevista l'integrazione di Google Tag Manager e di altri strumenti legati al tracciamento delle visite. Nel senso che prevedo una variabile nel pelicanconf.py dove si possono indicare degli script che finiscono nell'head del template;
i principali fattori di seo on page, con un occhio di riguardo per i dati strutturati legati agli elementi "article" e "person".

Le cose da sistemare, o almeno quelle che ho notato

slug e link interni, in alcuni casi sono codificati nel tema ed in italiano;
ci sono errori loggati in console, questo impedisce di raggiungere il punteggio massimo nelle audit di lighthouse;
la progressive web app non funziona offline. In realtà mi sto rendendo conto che tutto il service worker è da rivedere, anzi, prima devo capire meglio io come funziona. Probabilmente toglierò questa funzione nella prossim release;
la documentazione è pessima, devo migliorare molto qui;
il tema non è flessibile. Come scrivo poco sopra, è fatto su misura per me, se si cerca di modificarlo troppo, può rompersi;
non gestisce le immagini presenti all'interno dei post. Non genera i formati in webp, non ne gestisce le dimensioni, niente. Infatti al momento non ho immagini interne agli articoli.

I plugin utilizzati

Utilizzo diversi plugin, i primi due dell'elenco non sono necessari per il funzionamento corretto del tema mentre gli altri, chi più chi meno, hanno un ruolo più marcato:

sitemap: genera la sitemap del sito;
minification: riduce la dimensione dei file minificandoli;
readtime: calcola il tempo di lettura degli articoli. Ho fatto delle modifiche all'interno del plugin ufficiale per indicare il numero di parole al minuto che vengono lette nella lingua italiana. Serve quindi personalizzarlo un attimo per poterlo usare;
neighbors: basta attivarlo per vedere i correlati alla fine di ogni articolo;
pelican-toc: genera un'indice dei contenuti per ogni articolo. Ho fatto delle leggere modfiche all'interno del plugin, ma funziona anche senza modifiche;
cover_resizer: questo è un mio plugin, è scritto male e serve a generare le hero image degli artioli, le anteprime e le versioni a diverse risoluzioni e formati (webp).
Affinché funzioni è necessario inserire un file chiamato "copertina_raw.jpg" nella cartella "/content/il-tuo-articolo/". Io lo carico con dimensioni 1024*576. In fase di generazione dell'output, il plugin crea tutte le varianti necessarie e le inserisce dentro "/theme/img/il-tuo-articolo".
"/content/il-tuo-articolo/" e "/theme/img/il-tuo-articolo" vengono generate dallo script "new-html.py" (ne parlo in seguito)

La creazione di nuovi contenuti

Per gestire la creazione dei nuovi contenuti uso uno script, "new-html.py"", che genera un file html contenente diversi tag, molti dei quali precompilati, insieme ad alcune cartelle contenenti risorse legate direttamente al post, come le immagini principali.
È importante che vengano compilati manualmente i tag che lo script non gestisce direttamente.
Lo script accetta due opzioni:

lo slug dell'articolo, che deve essere inserito con il formato "titolo-di-esempio"
la categoria dell'articolo con il formato "varie"; deve trattarsi naturalmente di una categoria già presente nel peliconf.py affinché sia utilizzabile.

Quindi il comando finale è "python new-file.py titolo-di-esempio varie".

Come meta title, lo script posiziona inizialmente lo slug indicato in fase di creazione, questo è il primo campo da andare a rivedere manualmente quindi.

Conclusioni

Non entro nel merito su come compilare il peliconf.py, ho fornito qualche indicazione nel readme su github e penso sia più sensato migliorare quella sezione, piuttosto che crearne una nuova qui, che sarebbe comunque parziale.
Si tratta di un tema per Pelican ancora allo stadio iniziale, vorrei renderelo un po' più versatile, adatto quindi a maggiori personalizzazioni, oltre a rivedere alcuni aspettici stilistici e tecnici. Penso però possa essere un buon inizio.

Spero che risulti utile a qualcuno. Si tratta del mio primo vero repository pubblico e con molti aspetti di github e git devo ancora prenderci la mano.