🪴 Giardino Digitale di Rexus752

Configurazione del mio Giardino Digitale

29 minuti

Premessa

Ciao! Se è la prima volta che capiti su questo sito, ti consiglio di consultare la pagina principale di questo cosiddetto Giardino Digitale per scoprire meglio cos’è e come navigarlo.

Lo stato di questa nota è al momento: 🟢 Completa.

Stai creando un tuo Giardino Digitale in cui vuoi inserire una funzionalitĂ  presente nel mio? Sei nel posto giusto!

Man mano che modifico le impostazioni di questo Giardino Digitale discostandomi dal template di default, segno qua tutto ciò che faccio, anche con l’obiettivo di facilitare il lavoro al me del futuro nel caso in cui ci sia bisogno di ricreare da zero il repository.

Nel caso in cui non ti fosse chiaro quello che spiego qua in questa nota, puoi direttamente consultare il codice sorgente del sito andando sul repository.

1 - Punto di partenza

Come punto di partenza c’è, ovviamente, la creazione del giardino digitale a partire dal template di default che Quartz offre. La versione di Quartz che sto usando al momento in cui sto scrivendo questa nota è la 5.0.0. Eventualmente, nel futuro, aggiornerò Quartz a versioni successive e, se si dovesse rompere qualcosa, specificherò qua come sistemarlo.

Le istruzioni su come costruire e impostare inizialmente un giardino digitale si trovano nella home page di Quartz.

Qua sotto riporto un paio di problemini che ho riscontrato durante l’installazione di Quartz:

Attenzione: errore nel cloning del repository

Se durante il cloning del repository (cioè dopo aver eseguito il comando git clone https://github.com/jackyzha0/quartz.git) esce il seguente messaggio

error: RPC failed; curl 92 HTTP/2 stream 5 was not closed cleanly: CANCEL (err 8)
error: 40 bytes of body are still expected
fetch-pack: unexpected disconnect while reading sideband packet
fatal: early EOF
fatal: fetch-pack: invalid index-pack output

basta rieseguire di nuovo questo comando, perché significa che c’è stato un errore di connessione durante l’operazione.

Attenzione: errore nell'esecuzione di npm i

Se durante l’installazione di Quartz, dopo aver eseguito il comando npm i, esce un errore del tipo

added 526 packages, and audited 528 packages in 9s
 
173 packages are looking for funding
  run npm fund for details
 
3 vulnerabilities (2 moderate, 1 high)
 
To address all issues, run:
  npm audit fix
 
Run npm audit for details.

allora eseguire il comando npm audit fix per risolvere.

2 - Configurazione

Ecco quindi tutte le modifiche che ho applicato al sito per personalizzarlo.

2.1 - Configurazione generale

Nel file quartz.config.yaml ho configurato queste impostazioni generali:

  • pageTitle: 🪴 Giardino Digitale di Rexus752: titolo del Giardino Digitale che compare sulla sinistra di ogni nota.
  • locale: it-IT: per impostare la lingua in italiano.
  • baseUrl: rexus752.dev: URL del sito (anche se in realtĂ  nella mia configurazione non serve a qualcosa in particolare).

La prima parte del file quartz.config.yaml risulta così:

quartz.config.yaml
# yaml-language-server: $schema=./quartz/plugins/quartz-plugins.schema.json
configuration:
  pageTitle: 🪴 Giardino Digitale di Rexus752
  pageTitleSuffix: ""
  enableSPA: true
  enablePopovers: true
  analytics:
    provider: plausible
  locale: it-IT
  baseUrl: rexus752.dev
  ignorePatterns:
    - private
    - templates
    - .obsidian

2.2 - Tema

Ho disabilitato il plugin dei temi perché mi creava problemi nella personalizzazione dell’interfaccia sovrascrivendo le modifiche che provavo ad apportare (e anche perché il tema default che mi sceglie lui fa cacare al cazzo rispetto a quello originale di Quartz che stai vedendo ora):

quartz.config.yaml
# source:
#   - name: quartz-themes
#   - repo: github:saberzero1/quartz-themes
#   - subdir: plugin
#   - enabled: true
#   - options:
#   - theme: default

2.3 - Font

In questo sito:

  • Per i body (cioè il testo normale come questo che stai leggendo) uso il typeface Inter, ossia lo stesso che GNOME usa di default a partire dalla versione 47 e che io reputo uno dei migliori sulla piazza al momento (è anche completamente gratuito!).
  • Per il codice, uso il typeface Fira Code, studiato appositamente per creare legature, cioè unioni tra due o piĂą glifi (simboli, lettere, ecc.). Per esempio, se scrivo due volte di fila =, Fira Code mi mostra un unico segno: ==.

Per usare questi font, ho modificato il file quartz.config.yaml in questo modo:

quartz.config.yaml
  theme:
    fontOrigin: googleFonts
    cdnCaching: true
    typography:
      header: Schibsted Grotesk
      body: Inter
      code: Fira Code

2.4 - File system

Il mio Giardino Digitale contiene note divise per cartelle a seconda dell’argomento di cui trattano. Ogni cartella ha una nota associata e le relative sotto-cartelle e sotto-note comprese in quell’argomento.

Per esempio, la cartella Matematica contiene la nota Matematica.md che fa da introduzione a quell’argomento e le sue sotto-cartelle come Teoria degli insiemi che a sua volta avrà la sua nota principale:

đź“‚ Matematica/
├── 🗒 Matematica.md
├── 🗒 Analisi.md
└── 📂 Teoria degli insiemi/
    └── 🗒 Teoria degli insiemi.md

Problemino: Quartz genera delle pagine web non solo per le note, ma anche per le cartelle stesse (nella pagina della cartella ti inserisce i link alle note contenute nella cartella). Ciò significa che, per esempio, la nota Matematica.md è disponibile al percorso ./Matematica/Matematica.md, perché al percorso ./Matematica apre la pagina della cartella Matematica.

Per ovviare a questo problema, Quartz offre già a priori una soluzione: nella cartella desiderata, si può rinominare la sua “nota associata” in _index.md o index.md in modo da sostituirla alla nota della cartella. Il titolo della nota lo prende dalla proprietà title inserita nel frontmatter della nota.

Attenzione: _index.md o index.md?

Riguardo quest’ultima cosa, sono stato costretto a scegliere _index.md come nome di default per le note associate alle cartelle, perché index.md l’ho riservato alla nota della homepage del sito (cioè content/index.md). Ho dovuto fare così perché, in questo modo, nelle premesse delle note posso mettere un link che reindirizza semplicemente all’unica nota che in tutto il vault di Obsidian ha come nome index.md, ossia proprio content/index.md. Se anche questa nota avesse come nome _index.md, Obsidian “forza” a inserire come percorso nell’hyperlink il percorso content/_index.md, generando il problema per cui, sul sito, questo hyperlink rimanda alla nota https://rexus752.dev/content/_index.md che non esiste.

Quindi, nella cartella Matematica, la nota Matematica.md diventa _index.md e, quando nell’Esplora sul lato della pagina cliccherò su Matematica, non mi porterà alla pagina della cartella, ma a quella della nota Matematica.md.

Il risultato è il seguente:

đź“‚ Matematica/
├── 🗒 _index.md
├── 🗒 Analisi.md
└── 📂 Teoria degli insiemi/
    └── 🗒 _index.md

Per evitare che comunque le pagine associate delle cartelle mostrino sotto il contenuto della nota associata anche il contenuto della cartella, ho dovuto modificare il codice SCSS del sito perché non capivo come modificarlo dalle impostazioni del plugin, dato che le opzioni che il plugin FolderPage mette a disposizione non mi permette di disabilitarlo in toto e, se provo ad eliminarlo direttamente dal quartz.config.yaml, mi disabilita proprio l’intera pagina.

Per modificare il codice SCSS, Quartz mette a disposizione il file custom.scss nella cartella quartz/styles per scriverci le proprie modifiche. In nome del sacro principio della modularità del codice, ho inserito questa modifica in un file disable-folder-page.scss in una sotto-cartella custom della cartella quartz/styles che, appunto, conterrà tutte le varie modifiche da applicare all’SCSS del sito.

Quindi, nel file disable-folder-page.scss in quartz/styles/custom ci ho scritto questo:

quartz/styles/custom/disable-folder-page.scss
.page-listing {
  display: none;
}

E, per dire a Quartz di leggere questo file, nel file custom.scss nella cartella quartz/styles ci ho scritto ciò:

quartz/styles/custom.scss
@use "./base.scss";
 
@use "./custom/disable-folder-page.scss";

2.5 - Layout delle note

Nel file quartz.config.yaml ho modificato il layout delle note, cioè la struttura della nota. Ecco ciò che ho fatto:

  • Nei link nel footer ci ho messo il link al repository e al mio Linktree:

    quartz.config.yaml
    - source: github:quartz-community/footer
enabled: true
options:
  links:
    Repository: https://forgejo.it/Rexus752/digital-garden.git
    Il mio Linktree: https://linktr.ee/rexus752

  • Per fare in modo che anche nelle folder page (cioè nelle pagine-cartelle come Matematica) escano tutti i componenti come l’indice, ho modificato le impostazioni del layout che si possono trovare in fondo al quartz.config.yaml:

    quartz.config.yaml
    layout:
  groups:
    toolbar:
      priority: 35
      direction: row
      gap: 0.5rem
  byPageType:
    "404":
      positions:
        beforeBody: []
        left: []
        right: []
    content: {}
    folder: {}
    tag:
      exclude:
        - reader-mode
      positions:
        right: []
    canvas: {}
    bases: {}

  • Nel layout delle pagine ho rimosso i backlinks, cambiando in false il valore di enabled tra le opzioni del plugin Backlinks in quartz-config.yaml:

    quartz.config.yaml
      - source: github:quartz-community/backlinks
    enabled: false
    layout:
      position: right
      priority: 50

  • Nel layout delle pagine ho anche rimosso anche i graph view, che per quanto possano essere carini sono comunque inutili:

quartz.config.yaml
  - source: github:quartz-community/graph
    enabled: false
    layout:
      position: right
      priority: 10

2.6 - Icona personalizzata

Nella cartella quartz/static ho sostituito il file icon.png con una mia icona personalizzata, che è appunto l’icona di questo Giardino Digitale:

Icona Giardino Digitale

Questa l’ho creata attraverso il generatore sul sito ufficiale di Obsidian che ti permette di personalizzare la nuova icona di Obsidian adottata nel 2023 con i tuoi colori. Io ho usato gli stessi colori della mia classica immagine di profilo che uso ovunque, ossia quella di Patrick con il cervello esploso:

Immagine di profilo

Ne ho approfittato anche per sostituire con questa icona il file og-image.png, sempre nella cartella quartz/static, che è la foto che compare nelle preview del Giardino Digitale quando si inserisce il link in un messaggio:

Preview link Giardino Digitale|400

Facendo ciò ho anche disabilitato il plugin Custom OG Images nel file quartz.config.yaml, che è il plugin che si occupa di generare delle preview uniche per ogni nota del sito (e che, in realtà, rallenta anche il tempo di build del sito):

quartz.config.yaml
  - source: github:quartz-community/og-image
    enabled: false

2.7 - ModalitĂ  scura forzata

Nel mio Giardino Digitale, per questione di comodità, ho scelto di inserire la modalità scura di default e tolto la possibilità di passare alla modalità chiara. Ciò l’ho fatto perché io in primis, quando scrivo le mie note su Obsidian, uso la modalità scura, e di conseguenza anche tutti i contenuti che ho inserito nelle note come le foto o gli schemi sono adattati a questo tema. Mantenere la possibilità di passare alla modalità chiara significherebbe dover creare un sistema per cui anche queste foto debbano adattarsi alla modalità chiara, cosa che non ho assolutamente intenzione di fare lol.

Per farlo, ho disabilitato il plugin Darkmode per eliminare il pulsantino sotto il titolo del sito che permette di cambiare alla modalitĂ  chiara:

quartz.config.yaml
  - source: github:quartz-community/darkmode
    enabled: false
    layout:
      position: left
      priority: 30
      group: toolbar

E, nelle impostazioni del tema, ho scambiato di posto le parole lightMode e darkMode perché, senza il plugin Darkmode, sceglie di default la lightMode:

quartz.config.yaml
    colors:
      darkMode:
        light: "#faf8f8"
        lightgray: "#e5e5e5"
        gray: "#b8b8b8"
        darkgray: "#4e4e4e"
        dark: "#2b2b2b"
        secondary: "#284b63"
        tertiary: "#84a59d"
        highlight: rgba(143, 159, 169, 0.15)
        textHighlight: "#fff23688"
      lightMode:
        light: "#161618"
        lightgray: "#393639"
        gray: "#646464"
        darkgray: "#d4d4d4"
        dark: "#ebebec"
        secondary: "#7b97aa"
        tertiary: "#84a59d"
        highlight: rgba(143, 159, 169, 0.15)
        textHighlight: "#b3aa0288"

Per applicare la modalità scura forzata anche nel syntax highlighting (cioè il colore nel codice) ho modificato le impostazioni del relativo plugin Syntax Highlighting che si possono trovare in quartz.config.yaml, semplicemente scambiando i valori github-light e github-dark:

quartz.config.yaml
  - source: github:quartz-community/syntax-highlighting
    enabled: true
    options:
      theme:
        light: github-dark
        dark: github-light

Teoricamente ci sarebbe da fare la stessa cosa anche per i diagrammi Mermaid ma, dato che non li uso in questo sito, non mi va di cimentarmi inutilmente nel capire come potrebbe essere fatto.

2.8 - Foto centrate

Esattamente come avrai potuto notare con quelle che ho inserito qua sopra, le foto vengono automaticamente centrate nel mezzo della pagina.

Ciò si può fare modificando il codice SCSS del sito aggiungendo un modulo al file custom.scss. Ho aggiunto il file centered-img.scss in quartz/styles/custom e ci ho scritto questo dentro:

quartz/styles/custom/centered-img.scss
img {
  display: block;
  margin: auto;
}

E, per dire a Quartz di leggere questo file, nel file custom.scss nella cartella quartz/styles ci ho scritto ciò:

quartz/styles/custom.scss
@use "./base.scss";
  
@use "./custom/disable-folder-page.scss";
@use "./custom/centered-img.scss";

2.9 - Callout personalizzati

All’interno del mio Giardino Digitale, uso diversi callout personalizzati, descritti attraverso codice SCSS e implementati dal plugin Callouts. Tutti i callout che ho aggiunto sono inseriti nel file callouts.scss nella cartella quartz/styles/custom col seguente formato:

quartz/styles/custom/callouts.scss
.callout {
  &[data-callout="<name>"] {
    --color: #<color>;
    --border: #<border color>;
    --bg: #<background color>;
    --callout-icon: url("data:image/svg+xml; utf8, <URL-encoded SVG>");
  }
}

Ovviamente, il file quartz/styles/custom.scss dovrĂ  importare callouts.scss:

quartz/styles/custom.scss
@use "./variables.scss" as *;
 
@use "./custom/disable-folder-page.scss";
@use "./custom/centered-img.scss";
@use "./custom/callouts.scss";

Sul sito di Quartz viene spiegato come aggiungerne di nuovi. Io, per aggiungere nuovi callout, uso questo metodo:

  • Cerco una possibile icona su FontAwesome.
  • Copio il codice SVG.
  • Lo converto in URL tramite questo URL-encoder per SVG.
  • Lo aggiungo nel file callouts.scss sostituendo la stringa <URL-encoded SVG> con quella appena copiata.

Qua sotto ho inserito una lista dei callout che uso, ognuno dei quali ha al proprio interno il codice SCSS per impostarlo (clicca sulla freccetta affianco al titolo del callout per espanderlo).

2.9.1 - Generici

2.9.2 - Per la matematica

2.9.3 - Per l’informatica

2.10 - Callout chiusi con spazio vuoto

I callout contenenti dei blocchi LaTeX, quando vengono chiusi, mantengono uno spazio vuoto sotto il titolo:

Callout chiuso rotto

Per risolvere questo problema, ho creato un file quartz/styles/custom/fix-collapsed-callouts.scss:

quartz/styles/custom/fix-collapsed-callouts.scss
.callout.is-collapsed .callout-content {
  display: none !important;
}

e l’ho aggiunto a quartz/styles/custom.scss:

quartz/styles/custom.scss
@use "./variables.scss" as *;
 
@use "./custom/callouts.scss";
@use "./custom/centered-img.scss";
@use "./custom/disable-folder-page.scss";
@use "./custom/fix-collapsed-callouts.scss";

2.11 - Stile delle tabelle personalizzate

Le tabelle, nel tema di default di Quartz, sono orribili: non hanno le linee che separano le colonne, sono fin troppo piene di spazi vuoti e le righe si distinguono difficilmente.

Per risolvere questo problema, ho creato un file quartz/styles/custom/table-style.scss:

quartz/styles/custom/table-style.scss
.table-container {
  & > table {
    margin: 0rem;
    padding: 0rem;
    & > * {
      line-height: 1.2rem;
    }
  }
  overflow-x: auto;
}
 
th {
  font-weight: normal;
  border: 1px solid var(--lightgray);
}
 
td {
  border: 1px solid var(--lightgray);
}

e l’ho aggiunto a quartz/styles/custom.scss:

quartz/styles/custom.scss
@use "./variables.scss" as *;
 
@use "./custom/callouts.scss";
@use "./custom/centered-img.scss";
@use "./custom/disable-folder-page.scss";
@use "./custom/fix-collapsed-callouts.scss";
@use "./custom/table-style.scss";

2.12 - Icone nei titoli delle note

Attenzione: non aggiornato alla versione v5 di Quartz

Non ho ancora aggiornato l’implementazione delle icone nei titoli delle note alla versione v5 di Quartz, infatti quello che segue qua sotto è la scorsa implementazione che usavo per la versione v4. Ho lasciato comunque qui questa descrizione come promemoria al me del futuro per ricordarmi quello che c’è da fare per implementare queste icone.

In questo Giardino Digitale, ogni nota ha associata una icona colorata in formato SVG. Le icone le prendo da varie fonti, tra cui FontAwesome e Tabler Icons, e le inserisco nella cartella content/_icons con lo stesso nome della nota a cui fa riferimento.

Per modificare il colore delle icone scaricate, prima le formatto usando lo script svg-formatter.py che ho scritto io con le mie manine (e che puoi trovare nella cartella scripts) e poi modifico a mano il codice SVG impostando il colore desiderato nel parametro fill.

Per aggiungere le icone affianco ai titoli delle note, ho modificato il file quartz/components/ArticleTitle.tsx in questo modo:

quartz/components/ArticleTitle.tsx
const ArticleTitle: QuartzComponent = ({ fileData, displayClass }: QuartzComponentProps) => {
  const title = fileData.frontmatter?.title
  if (title) {
    return <h1 class={classNames(displayClass, "article-title")}>
      <img
        style="display: inline; height: 0.8em; width: auto; margin-right: 0.1em;"
        src={"/digital-garden/_icons/" + title.replaceAll(" ", "-") + ".svg"}
        alt=""
      />
      <img
        style="display: inline; height: 0.8em; width: auto; margin-right: 0.1em;"
        src={"/_icons/" + title.replaceAll(" ", "-") + ".svg"}
        alt=""
      />
      {title}
    </h1>
  } else {
    return null
  }
}

Piccolo disclaimer: lo so che questa porzione di codice l’ho scritta col culo, ma non sono un web developer e a malapena so destreggiarmi con il TypeScript. Ci sono sicuramente modi più puliti per realizzare quello che voglio fare, ma ci accontentiamo.

Per aggiungere le icone ai titoli delle note anche all’interno dell’Esplora sul lato della pagina, ho chiesto sul server Discord ufficiale di Quartz un aiutino su come farlo ma nessuno mi ha aiutato. Allora ho chiesto un aiutino al mio caro amico Deepseek, che in un quarto d’ora ha saputo aiutarmi a raggiungere il risultato voluto.

Specifico che ogni componente è duplicato solo perché, hostando il sito sulle GitHub Pages, i percorsi relativi partono dal dominio del sito (cioè rexus752.github.io) e non dalla “pagina” del Giardino Digitale (cioè rexus752.github.io/digital-garden), ossia da quello che effettivamente dovrebbe essere l’equivalente della cartella content del vault di Obsidian. Ciò implica che, buildando il sito in locale, le icone delle note si trovano nella cartella /_icons/, mentre buildando il sito online le icone si trovano nella cartella /digital-notes/_icons/. Non ho trovato un modo per rendere questi percorsi relativi “dinamici” a seconda della situazione (build in locale od online) e, come soluzione più facile, ho deciso di inserire per ogni icona una coppia di elementi: uno che cerca l’icona al percorso /_icons/, l’altro al percorso /digital-notes/_icons/. Funziona perché a prescindere uno dei due troverà l’icona al percorso desiderato e l’altro no, quindi comparirà sempre una sola icona.

Quello che ho fatto è stato:

  1. Aggiungere nel file quartz/components/scripts/explorer.inline.ts sia nella funzione createFileNode che nella funzione createFolderNode questi pezzi di codice che integrano le icone nei template che Quartz usa per generare le entry dei file e delle cartelle nell’Explorer:
    quartz/components/scripts/explorer.inline.ts
    function createFileNode(currentSlug: FullSlug, node: FileTrieNode): HTMLLIElement {
  const template = document.getElementById("template-file") as HTMLTemplateElement
  const clone = template.content.cloneNode(true) as DocumentFragment
  const li = clone.querySelector("li") as HTMLLIElement
 
  const icon_local = li.querySelector(".file-icon-local") as HTMLImageElement
  if (icon_local) {
    icon_local.src = `/_icons/${node.displayName.replaceAll(" ", "-")}.svg`
    icon_local.alt = ""
  }
  const icon_sync = li.querySelector(".file-icon-sync") as HTMLImageElement
  if (icon_sync) {
    icon_sync.src = `/digital-garden/_icons/${node.displayName.replaceAll(" ", "-")}.svg`
    icon_sync.alt = ""
  }
 
  const a = li.querySelector("a") as HTMLAnchorElement
  a.href = resolveRelative(currentSlug, node.slug)
  a.dataset.for = node.slug
  a.textContent = node.displayName
 
  if (currentSlug === node.slug) {
	a.classList.add("active")
  }
 
  return li
}
 
function createFolderNode(
  currentSlug: FullSlug,
  node: FileTrieNode,
  opts: ParsedOptions,
): HTMLLIElement {
  const template = document.getElementById("template-folder") as HTMLTemplateElement
  const clone = template.content.cloneNode(true) as DocumentFragment
  const li = clone.querySelector("li") as HTMLLIElement
 
  const icon_local = li.querySelector(".folder-icon-local") as HTMLImageElement
  if (icon_local) {
    icon_local.src = `/_icons/${node.displayName.replaceAll(" ", "-")}.svg`
    icon_local.alt = ""
  }
  const icon_sync = li.querySelector(".folder-icon-sync") as HTMLImageElement
  if (icon_sync) {
    icon_sync.src = `/digital-garden/_icons/${node.displayName.replaceAll(" ", "-")}.svg`
    icon_sync.alt = ""
  }
 
  const folderContainer = li.querySelector(".folder-container") as HTMLElement
  const titleContainer = folderContainer.querySelector("div") as HTMLElement
  const folderOuter = li.querySelector(".folder-outer") as HTMLElement
  const ul = folderOuter.querySelector("ul") as HTMLUListElement
  // ...
}
  2. Aggiungere effettivamente nel template delle entry in quartz/components/Explorer.tsx i tag <img> per inserire le icone:
    quartz/components/Explorer.tsx
    export default ((userOpts?: Partial<Options>) => {
  const Explorer: QuartzComponent = ({ cfg, displayClass }: QuartzComponentProps) => {
	const id = `explorer-${numExplorers++}`
 
	return (
	  <div
		class={classNames(displayClass, "explorer")}
		data-behavior={opts.folderClickBehavior}
		data-collapsed={opts.folderDefaultState}
		data-savestate={opts.useSavedState}
		data-data-fns={JSON.stringify({
		  order: opts.order,
		  sortFn: opts.sortFn.toString(),
		  filterFn: opts.filterFn.toString(),
		  mapFn: opts.mapFn.toString(),
		})}
	  >
	  {/* ... */}
		<template id="template-file">
		  <li>
            <img 
              class="file-icon-sync"
              src="" 
              alt="" 
              style="display: inline; height: 1em; width: auto; margin-right: 0.15em; vertical-align: middle;"
            />
            <img 
              class="file-icon-local"
              src="" 
              alt="" 
              style="display: inline; height: 1em; width: auto; margin-right: 0.15em; vertical-align: middle;"
            />
			<a href="#"></a>
		  </li>
		</template>
		<template id="template-folder">
		  <li>
			<div class="folder-container">
			  <svg
				xmlns="http://www.w3.org/2000/svg"
				width="12"
				height="12"
				viewBox="5 8 14 8"
				fill="none"
				stroke="currentColor"
				stroke-width="2"
				stroke-linecap="round"
				stroke-linejoin="round"
				class="folder-icon"
			  >
				<polyline points="6 9 12 15 18 9"></polyline>
			  </svg>
              <img 
                class="folder-icon-sync" 
                src="" 
                alt="" 
                style="display: inline; height: 1.2em; width: auto; margin-right: 0.15em; vertical-align: middle;"
              />
              <img 
                class="folder-icon-local" 
                src="" 
                alt="" 
                style="display: inline; height: 1.2em; width: auto; margin-right: 0.15em; vertical-align: middle;"
              />
			  <div>
				<button class="folder-button">
				  <span class="folder-title"></span>
				</button>
			  </div>
			</div>
			<div class="folder-outer">
			  <ul class="content"></ul>
			</div>
		  </li>
		</template>
	  </div>
	)
  }
 
  Explorer.css = style
  Explorer.afterDOMLoaded = concatenateResources(script, overflowListAfterDOMLoaded)
  return Explorer
}) satisfies QuartzComponentConstructor
  3. Per evitare che l’icona faccia allineare il nome della cartella a destra, nel file quartz/components/styles/explorer.scss ho modificato il tipo di display:
    quartz/components/styles/explorer.scss
    .folder-container {
  flex-direction: row;
  display: inline-flex;
  align-items: center;
  user-select: none;
  // ...
}

3 - Da fare

Questo è ciò che ho in mente di fare per migliorare il sito:

  • Trovare un modo per caricare nel repository anche quelle cartelle che Quartz inserisce di default nel .gitignore come la .obsidian contenente le impostazioni del vault di Obsidian ed eventuali cartelle private contenenti note private (che però io non uso) e templates contenenti template per le note, in modo da avere un backup completo nel repository nel caso in cui dovesse malauguratamente succedere qualcosa.
  • Ridurre lo spazio vuoto in cima alle pagine del sito.
  • Quando in una pagina non è presente l’indice sul lato, far continuare
  • Integrare le icone delle note nel titolo della nota, nell’Explorer e anche nel Breadcrumbs.
  • Trasformare la “Reader Mode” in una modalitĂ  dyslexic-friendly (es. usando il font OpenDyslexic).
  • Renderizzare il LaTeX nei titoli dell’indice sul lato delle pagine.