Fryboyter

Bitte um Hilfe - Hugo und Prism.js

Um mal wieder über den Tellerrand zu schauen, bin ich gerade dabei mich in Hugo einzuarbeiten. Als Grundlage dient hierfür fryboyter.de und die dort veröffentlicheten Artikel.

Da der Code-Highlighter von Hugo für mich einige Nachteile hat, wollte ich weiter Prism nutzen. Am Artikel https://fryboyter.de/index-twig-des-fryboyter-themes beiße ich mir allerdings die Zähne aus. Obwohl der Code in <pre> und <code> Tags gepackt ist interpretiert Hugo scheinbar die <div> Tags. In Zeile 2 wird unter Hugo also nur “Fryboyter” angezeigt. Und nicht “<div class=“header”><h1><a href=“{{ paths.hosturl }}”>Fryboyter</a></h1></div>”. Bei Code-Beispielen ist das irgendwie blöd…

Ausgehend davon, dass es ein Problem von Hugo in Kombination mit Prism ist, habe ich im Forum von Hugo eine Support-Anfrage gestellt. Leider konnte mir bisher aber noch niemand helfen.

Wegen der Support-Anfrage habe ich ich ein Repository auf Codeberg veröffentlicht in dem zwei Artikel vorhanden sind. Einer bei dem das Hervorheben des Codes klappt und einer bei dem es nicht klappt. Ruft man den “Problem-Artikel” direkt bei Codeberg auf, kommt es zu gleichen fehlerhaften Anzeige. Und das obwohl hier Prism gar nicht geladen werden sollte. Also ich vermutlich eher Hugo oder Markdown an sich das Problem.

Daher möchte ich kurz in die Runde fragen, ob jemand eine Idee hat wie man das Problem lösen kann? Auf einen anderen Code-Highlighter möchte ich möglichst nicht umsteigen.

OSBN | Allgemein

Defer und Prism

Binde Javascript mit defer ein, haben sie gesagt. Für die Syntaxhervorhebung nutze ich Prism. Aufgrund des Ratschlags habe ich daher das Script per <script defer src=\”/theme/fryboyter/js/prism.js“></script> eingebunden. Keine gute Idee wie ich festgestellt habe.

In einigen Fällen habe ich zum Beispiel folgenden Code hervorgehoben:

$IP_DES_RASPBERRY:$PORT_VON_CADDY
root /pfad/zum/Mirrorverzeichnis
gzip
browse

Beim ersten Aufruf des Artikels wurde allerdings folgendes angezeigt:

$IP_DES_RASPBERRY:$PORT_VON_CADDY
root /pfad/zum/Mirrorverzeichnis
gzip
browse
$IP_DES_RASPBERRY:$PORT_VON_CADDY

Kurz gesagt die erste Zeile wird am Ende des Blocks noch einmal angezeigt. Nicht gut. Aktualisiert man die Seite, wird es aber korrekt angezeigt. Beim jeweils ersten Aufruf ist mir dann aufgefallen, dass folgender Fehler in den Entwicklerwerkzeugen des Browsers angezeigt wird.

Uncaught TypeError: Cannot read property 'children' of null
    at prism.js?d46722219d:18
    at Array.forEach (<anonymous>)
    at n (prism.js?d46722219d:18)
    at NodeList.forEach (<anonymous>)
    at prism.js?d46722219d:18

Ok Zeile 18 der Datei prism.js ist wohl das Problem.

!function(){if("undefined"!=typeof self&&self.Prism&&self.document){var e="line-numbers",t=/\n(?!$)/g,n=function(e){var n=r(e),s=n["white-space"];if("pre-wrap"===s||"pre-line"===s){var l=e.querySelector("code"),i=e.querySelector(".line-numbers-rows"),a=e.querySelector(".line-numbers-sizer"),o=l.textContent.split(t);a||(a=document.createElement("span"),a.className="line-numbers-sizer",l.appendChild(a)),a.style.display="block",o.forEach(function(e,t){a.textContent=e||"\n";var n=a.getBoundingClientRect().height;i.children[t].style.height=n+"px"}),a.textContent="",a.style.display="none"}},r=function(e){return e?window.getComputedStyle?getComputedStyle(e):e.currentStyle||null:null};window.addEventListener("resize",function(){Array.prototype.forEach.call(document.querySelectorAll("pre."+e),n)}),Prism.hooks.add("complete",function(e){if(e.code){var r=e.element.parentNode,s=/\s*\bline-numbers\b\s*/;if(r&&/pre/i.test(r.nodeName)&&(s.test(r.className)||s.test(e.element.className))&&!e.element.querySelector(".line-numbers-rows")){s.test(e.element.className)&&(e.element.className=e.element.className.replace(s," ")),s.test(r.className)||(r.className+=" line-numbers");var l,i=e.code.match(t),a=i?i.length+1:1,o=new Array(a+1);o=o.join("<span></span>"),l=document.createElement("span"),l.setAttribute("aria-hidden","true"),l.className="line-numbers-rows",l.innerHTML=o,r.hasAttribute("data-start")&&(r.style.counterReset="linenumber "+(parseInt(r.getAttribute("data-start"),10)-1)),e.element.appendChild(l),n(r),Prism.hooks.run("line-numbers",e)}}}),Prism.hooks.add("line-numbers",function(e){e.plugins=e.plugins||{},e.plugins.lineNumbers=!0}),Prism.plugins.lineNumbers={getLine:function(t,n){if("PRE"===t.tagName&&t.classList.contains(e)){var r=t.querySelector(".line-numbers-rows"),s=parseInt(t.getAttribute("data-start"),10)||1,l=s+(r.children.length-1);s>n&&(n=s),n>l&&(n=l);var i=n-s;return r.children[i]}}}}}();

Ok, ich verstehe so ziemlich rein gar nichts. Es hilft mir also nicht weiter. Nachdem ich etwas im Bugtracker von Prism gesucht habe, habe ich dort ein bereits behobenen Problem mit bezüglich der Einbindung per defer gefunden. Dessen Symptome waren aber nicht mit meinem Problem vergleichbar. Trotzdem habe ich mal schaut was passiert, wenn ich Prism nicht mit defer einbinde. Und schon ist mein Problem verschwunden. Da es hinsichtlich der Ladezeit gefühlt keinen Unterschied gibt ob ich nun defer verwende oder nicht, habe ich defer einfach wieder entfernt. Und was lernen wir daraus? Nicht jeder Tipp zur Seitenoptimierung macht pauschal Sinn.

OSBN | Allgemein

Lesezeichen mit Nextcloud synchronisieren

Inzwischen bieten einige Browser an die Lesezeichen (auch Bookmarks genannt) zu synchronisieren. Dies erfolgt aber meist über Server über die man keine Kontrolle hat. Blöd wenn man Porno-, Islamisten- oder Warez-Seiten gebooktmarkt hat und sich der Anbieter für die Bookmarks interessiert.

Heute bin ich zufällig auf floccus aufmerksam geworden. Hiermit lassen sich die Lesezeichen über die eigene Nextcloud-Instanz synchronisieren. Für Chrome / Chromium und Firefox gibt es entsprechende Erweiterungen.

And Now for Something Completely Different™. Schlagt mich oder geht mit Tiernamen. Aber an der Stelle mache ich einfach mal schamlos Werbung für das Album We’Re Your Friends,Man von The Bevis Frond. Wer in den 90ern aufgewachsen ist und / oder mit Mukke wie Pearl Jam, RHCP, Stilskin, REM usw. etwas anfangen kann, sollte ich das neue Album anhören. Ist schon lange her, dass mich ein Album quasi zum Sofortkauf verleitet hat.

OSBN | Allgemein

Versionsverwaltung mit Fossil

Bisher habe für meine privaten Projekte immer vermieten eine Versionsverwaltung zu verwenden. Da ich Ende des Monats mein Ansible-Projekt umsetzen werde und ein weiteres größeres Projekt geplant ist ist es wohl Zeit für solch ein Tool.

Die meisten werden vermutlich keinen Gedanken daran verschwenden und den Platzhirsch git nutzen. Ich kann mich mit git aber nicht anfreunden. Und vom Funktionsumfang werde ich vermutlich nur einen Bruchteil benötigen. Also mache ich, was ich ganz gut kann. Mir alternative Programme ansehen.

Da ich in einer Kathedrale und nicht auf einem Basar entwicklen werde, habe ich mich spontan für Fossil entschieden. Dieses Tool wird zum Beispiel für die Entwicklung von SQLite verwendet. Zudem sind die Entwickler von SQLite zufällig auch die Entwickler von Fossil. Warum das so ist, kann man unter https://sqlite.org/whynotgit.html nachlesen.

Auch wenn die Bedienung von Fossil Ähnlichkeiten mit der von git aufweist, finde ich Fossil angenehmer zu bedienen.

fossil init ansible #Repository "ansible" erstellen
nfossil open ansible #Repository "ansible" öffnen
fossil add install.yml #Datei "install.yml" zum Repository hinzufügen
fossil commit #Änderung bestätigen
fossil close ansible #Repository "ansible" schließen

Fossil bietet natürlich noch weitere Möglichkeiten. Genaueres kann man in der Dokumentation nachlesen. Aber Moment… Warum wird bei obigen Beispiel das Repository geöffnet und geschlossen. An dem Punkt kommen wir zur Besonderheit von Fossil. Ein Repository wird hier in eine SQLite-Datenbank gepackt. Somit wird mit “open” die Verbindung aufgebaut und mit “close” geschlossen. Auf den ersten Blick mit sqlitebrowser macht der Datenbankaufbau keinen schlechten Eindruck.

Abschließend möchte ich noch anmerken, dass Fossil auch über einen grafische Oberfläche verfügt, über die unter anderem eine Timeline der Änderungen, ein Forum und ein Wiki angeboten werden. Im Grunde wie bei Github. Wie das genau aussieht kann man sich auf der offiziellen Seite von Fossil ansehen. Diese läuft mit besagter Oberfläche. Lokal lässt sich diese mit “fossil ui ansible” starten, so dass man das ganze auch einzelner Entwickler intern nutzen kann.

OSBN | Allgemein

Caddy Webserver

Heutzutage sind die Webserver Apache und nginx weit verbreitet. Selbst nutzt ich nginx um damit eine Paketquelle für selbst erstellte Arch-Pakete im LAN anzubieten. Was die Konfiguration betrifft, kann nginx allerdings etwas umständlich sein.

Heute habe ich mir einmal den Webserver Caddy angesehen. Dieser ist mit Go erstellt und wird seit 2015 aktiv weiterentwickelt. Auf der Downloadseite kann man sich seine eigene Caddy-Datei erstellen in dem man die Plattform wie ARMv7 und eventuelle Plugins auswählt. Ist dies erledigt, wird auch ein Link angezeigt mit dem man sich die Datei mit den gewünschten Einstellungen automatisch herunterladen kann (z. B.https://caddyserver.com/download/linux/arm7?plugins=http.expires&license=personal&telemetry=off). Leider schlägt auch Caddy in die gleiche Kerbe wie Pi Hole und bietet eine alternative Installation in Form von beispielsweise curl https://getcaddy.com | bash -s http.expires an. Das geht eigentlich gar nicht.

Was mir an Caddy besonders gefällt, ist die Konfiguration. So könnte diese zum Beispiel wie folgt aussehen:

192.168.1.2:8888
root /verzeichnis/zum/Webroot
gzip
browse

Der Server ist also über die IP 192.168.1.2 auf Port 8888 erreichbar. Der Webroot ist /verzeichnis/zum/Webroot und gzip sowie Directory Listing sind aktiviert.

Ein Reverse Proxy lässt sich ebenfalls in Sekunden erstellen.

abc.com {
    proxy / localhost:8181
}

Nett finde ich auch die Tatsache, dass Let’s Encrypt von Haus aus genutzt wird, ohne etwas machen zu müssen (lässt sich bei Bedarf aber deaktivieren bzw. genauer einstellen). Auf der Seite von Caddy findet man eine leicht Verständliche Dokumentation für den gesamten Server sowie diverse Konfigurationsbeispiele.

Der Sourcecode von Caddy wird unter der Apache Lizenz 2.0 veröffentlicht. Wer die fertigen Binär-Dateien nutzen will, kann dies für den privaten Einsatz kostenlos tun. Im Unternehmensbereich muss allerdings ein monatlicher Beitrag gezahlt werden. Ein Erstellen aus dem Sourcecode ist natürlich kostenlos möglich.

OSBN | Allgemein