Digging the Digital Profile Photo

Digging the digital

spark

    ∞

    SPARK! Toon random kennis in Obsidian

    Boven de multi-kolom layout op mijn Obsidian homepage laad ik continu een random paragraaf uit de Tao Te Ching. Door op een button te klikken verandert de paragraaf en kan ik naar het origineel doorklikken voor verdere studie. Ik maakte hiervoor een eigen script, in samenspraak met de chatbot Claude van Anthropic.

    Animatie van de veranderende tekst

    Hier kreeg ik best wat vragen over, “hoe kan ik dat script zelf gebruiken? Welke onderdelen moet ik aanpassen?”

    Om dat op te lossen én een eigen micro-obsessie te beantwoorden, ben ik weer samen met mijn buddy Claude aan de slag gegaan. In deze blogpost leg ik je uit hoe je dit script kunt installeren, hoe je het op een pagina plaatst én ik vraag je om feedback!

    PS: De micro-obsessie is “Hoe kan ik met AI een ruw idee voor een script vormgeven en verder brengen?”

    Wat doet SPARK?

    Allereerst, de naam ✨ SPARK! Die staat voor

    • Summoning
    • Paragraphs
    • As
    • Random
    • Knowledge

    Met dank aan Claude voor het zetje in de juiste richting met deze naam. Ik stuurde het deze kant op, Claude kwam met de juiste volgorde van de woorden.

    Met Spark kun je op elke pagina in Obsidian een random deel van een tekst uit je Obsidian vault halen. Je kunt zelf instellen uit welke folder de teksten komt, hoeveel paragrafen je wilt tonen, de tekst en styling van de Spark-button en eventuele emoji.

    Installatie

    Uiteindelijk maak ik van dit script een plugin, maar ik wil graag met mijn lezers en de Digitale Fitheid community eerst wat proefdraaien, daarom is het nu nog wat handwerk en moet je een beetje meer je best doen. Ik heb geprobeerd de installatie voor nu zo eenvoudig mogelijk te maken. De installatie bestaat uit 3 delen:

    • Het script installeren
    • Het script aanroepen en configureren
    • Er is geen stap 3

    Het is een vereiste dat je de Dataview plugin (Obsidian / Github) hebt geïnstalleerd en je in de instellingen de optie “Enable Javascript queries” aan hebt staan.

    Script installeren

    Ik heb de volledige code van het script op Github gezet, inclusief tekstbestanden om mee te testen. Je kunt er een kijkje onder de motorkap nemen, of direct het complete pakket downloaden als zipfile. Als je het hebt gedownload, unzip het en plaats alle mappen en bestanden in je vault. Doe dit niet in Obsidian zelf, maar via de Finder of Windows Verkenner. Maak een map demofolder in je vault en zet daar de submappen en de losse bestanden in. Het belangrijkste is dat er een bestand genaamd “spark.js” aanwezig is. Hernoem het eventueel naar deze naam als nodig. De map demofolder in je vault ziet er dan als volgt uit:

    mappen staan geordend binnen een digitale omgeving verschillende bestandsnamen tonen hun inhoud en structuur de achtergrond toont een overzicht van een computerinterface

    Het maakt niet uit waar je spark.js plaatst in Obsidian, maar het is slim om dit bestand spark.js in een map /scripts te plaatsen, waar je al je scripts bij elkaar houdt. Of zet het in een eigen structuur met een templates map, of een andere map waar je alles bij elkaar houdt wat betreft automatisering en scripting in Obsidian. Heb je zo’n map nog niet, maak dan gewoon een map “scripts” en plaats hem daar.

    Script aanroepen en configuren

    Je hebt waarschijnlijk al een idee hebt waar je dit script voor wilt gebruiken en dat je een map hebt met bestanden die je wilt aanroepen. Zo niet, dan help ik je wat op weg. Ik heb drie mappen toegevoegd met voorbeeld teksten:

    • /alice: De volledige tekst van Alice in Wonderland, in afzonderlijke hoofdstukken. Met dank aan Project Gutenberg
    • /tao te ching: De vertaling van dit belangrijke boek is van Ursula K. Le Guin. Gedownload van The Way and it’s Virtue en opnieuw opgemaakt voor persoonlijk gebruik.
    • /bloghelden: Mijn eigen boek uit 2010 over de geschiedenis van de Nederlandse blogosfeer. Ook vrij te gebruiken via mijn github repo.

    De map /tags kun je gebruiken om te testen met verplichte of uitgesloten tags.

    Met de standaard configuratie werkt SPARK al direct met de bijgesloten Tao Te Ching. Je roept het script als volgt aan:

    • Maak een nieuw bestand in Obsidian.
    • Plaats hier de volgende code
    dv.view("spark");

    (zet voorafgaand aan bovenstaande eerst ```dataviewjs en sluit af met ```)

    codefragment toont een functie die een visuele weergave aanroept de omgeving lijkt op programmeer- of ontwikkelsoftware en bevat tekst die niet is getranscribeerd

    • En zet de pagina in Reading mode, of als je Live Preview aan hebt staan, zie je direct het resultaat.

    Een tekstuele inhoud beschrijft de zachte en taaie aard van levende dingen en de tegenstelling met dode zaken omringd door een donkere achtergrond met opvallende kleuren. Er is tekst aanwezig.

    Configuratie van Spark

    In het script staan een aantal standaard instellingen. Van de naam van de folder om te gebruiken tot het aantal paragrafen en de styling van de button.

    Ik heb nu de volgende instellingen gemaakt die je kunt aanpassen.

    • sourceFolder: De map waar je bestanden in zijn te vinden. Default: ‘demofolder/tao te ching’
    • buttonText: De tekst die op de button staat. Default: ‘✨ Spark Knowledge’
    • buttonStyle: De CSS om je button vorm te geven. Default: background-color: var(--interactive-accent); color: var(--text-on-accent); padding: 8px 16px; border: none; border-radius: var(--radius-s); margin-bottom: 1em; cursor: pointer; font-size: var(--font-ui-small); transition: all 0.2s ease; ,
    • linkEmoji: Een emoji voorafgaand aan de linktekst onder de paragraaf. Default: ‘✨’
    • showTitle: Laat de titel van het bestand zien voorafgaand aan de random paragraaf. Default: false
    • maxParagraphs: Kies het maximaal aantal paragrafen om te tonen. Default: 1
    • addDividers: Bij meer dan één paragraaf (zie maxParagraphs), plaats een horizontale lijn tussen de paragrafen. Default: false
    • excludeTags: Bestanden met deze tags worden niet meegenomen in de random knowledge. Default: [’exclude’, ‘private’],
    • requireTags: Alleen bestanden met deze tags tonen in de random knowledge. Default: [],
    • excludePatterns: Hou specifieke tekstpatronen weg uit de keuze van paragrafen. Default: [ ‘> Note’, ‘> note’]

    In het bestand Demo Script.md dat is toegevoegd kun je een aantal voorbeelden vinden van configuraties.

    Voorbeelden

    (zet eerst ```dataviewjs en sluit af met ```)

    await dv.view("spark",{
sourceFolder:"demofolder/alice",
showTitle: true,
});

    await dv.view("spark",{
buttonText:"🌟 More wisdom!",
linkEmoji: "🪄",
showTitle: true,
maxParagraphs: 1,
addDividers: true
});

    await dv.view("spark",{
sourceFolder:"demofolder/tags",
includedTags: ["tonen"],
});

    Feedback

    Ik hoop dat deze uitleg je voldoende handvatten geeft om dit script eens te testen in je eigen vault. Dit script leest alleen bestaande bestanden. Het schrijft niets weg, houdt geen statistieken bij, stuurt niets naar LLM modellen of maakt andere mensen slimmer anders dan jezelf.

    Ik stel het op prijs als je me wilt helpen met verbeterde versies van het script. Mijn verlanglijst voor volgende versies is nu al:

    • Dataview-query’s als bron gebruiken
    • CSS linken aan een extern bestand (beter beheerbaar)
    • Conversie naar plugin

    Wat ik graag aan feedback zou willen ontvangen:

    • Kun je hier iets mee? Zo ja, waar gebruik je het nu voor?
    • Zo nee, wat mis je nog om het bruikbaar te maken?
    • Welke functionaliteit zou het voor jou onmisbaar maken?
    • En met welke functionaliteit ga je het actief aan anderen tonen of doorvertellen?
    • Wat kan beter in bovenstaande uitleg?
    • Wat kan beter in de uitleg in het Readme bestand op Github?

    Dank je wel voor je tijd en aandacht. Laat je kennis ✨SPARKEN!

    SPARK op Github