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

Präsentation mit Hovercraft erstellen

Ich habe mich leider mal wieder breitschlagen lassen eine Präsentation zu halten, obwohl ich es hasse. Um nicht schon bei der Erstellung der Präsentation als nervliches Wrack zu enden, nutze ich Hovercraft.

Hiermit erstellt man mittels reStructuredText Impress.js-Präsentationen. Somit kann eine Seite der Präsentation zum Beispiel wie folgt aussehen.

The problem:
============

Making presentations is no *fun!*
---------------------------------

.. note::

    Welcome to the presenter console!

----

Das ganze ist also ziemlich idiotensicher. Bei Fragen lohnt sich ein Blick in die offizielle Dokumentation. Ist man mit seiner Präsentation fertig, erstellt man mittels “hovercraft Hovercraft-Datei Zielverzeichnis” einfach die Präsentation im HTML5-Format, welche im Grunde genommen mit jedem halbwegs aktuellen Browser anzeigbar ist.

Damit man sich einen visuellen Überblick verschaffen kann, bieten die Entwickler von Hovercraft eine Demo-Präsentation an.

Wer die Präsentation den Teilnehmern als PDF-Datei zur Verfügung stellen will, kann dies zum Beispiel mit rst3pdf machen.

Linux | OSBN

Kollaborationsplattform Codeberg hat seine Pforten geöffnet

Bei Codeberg handelt es sich um eine Alternative zu Github die auf Gitea basiert. Der Betreiber von Codeberg ist die Non-Profit Organisation Codeberg e. V..

Codeberg e. V. hat seinen Sitz in Deutschland. Genauer gesagt in Berlin. Dieser hat sich laut Satzung folgende Ziele gesetzt:

Zweck des Vereins ist es, die Schaffung, Sammlung, Verbreitung und Bewahrung Freier Inhalte (Free Content, Open Content, Free Cultural Work) und Freier und Offener Software (Free and Open Source Software, FOSS), und deren Dokumentation in selbstloser Tätigkeit zu fördern, um damit die Chancengleichheit beim Zugang zu Wissen und Bildung zu ermöglichen. Dazu soll auch das Bewusstsein für die damit zusammenhängenden gesellschaftlichen und philosophischen Fragen geschärft werden.

Anfang des Monats gab es nun eine Ankündigung, dass Codeberg für alle freigegeben wurde. Derzeit gibt es bereits das eine oder andere Projekt dort. Wenn ich ehrlich sein soll, kenn ich aber keines davon. Es bleibt daher abzuwarten, ob bzw. wie sich die Plattform entwickelt. Vorsichtshalber habe ich mir mal ein Konto angelegt.

Linux | OSBN

Focusrite Scarlett Solo und Linux

Mein Weihnachtsgeld gebe ich erfahrungsgemäß immer für Sachen aus, die ich mir während des Jahres nicht kaufen würde. Zu Weihnachten habe ich mir dieses mal ein Rode NTG2 Mikrofon, einen K & M Mikrofonständer sowie das Focusrite Scarlett Solo (zweite Generation) gegönnt.

Der eine oder ander wird sich nun Fragen, was hat er mit einem Shotgun-Mikrofon vor? Wird es einen Fryboyter Youtube-Kanal oder Potcast geben? Weder noch.

Bei Sprachchats habe ich zwei Probleme. Zum einen meine mechanische Tastatur. Diese verwendet die blauen Schalter von Cherry. Also die lauten. Leider sind hier einige meiner Mitspieler bei diversen Multiplayer-Spielen recht empfindlich obwohl ich nur “push to talk” nutze.

Bei Headsets habe ich zudem das Problem, dass man entweder Atemgeräusche hört (was mich selber nervt) oder mich schlecht versteht, da das Mikrofon zu weit weg ist um Atemgeräusche zu vermeiden (was wiederum andere nervt).

Also habe ich vor Weihnachten einen Mitarbeiter von Thomann um eine Lösung gebeten. Schlussendlich sind wir dann bei einem Shotgun-Mikrofon gelandet. Das Rode NTG2 hat allerdings einen XLR-Anschluss, so dass ich ein externes Audio-Interface mit Phantomspeißung gebraucht habe. Leider konnte bei Thomann keiner sagen, welches mit Linux kompatibel ist. Da Thomann aber kein Problem damit hat, dass man Sachen zum Testen bestellt, habe ich mir das Focusrite Scarlett Solo (2nd Gen) bestellt und nach Weihnachten getestet, da zumindest eine Kompatibilität mit Mac OS vorhanden ist.

Verwendet man Pulseaudio funktioniert das Ding “out of the box”. Einfach anschließen und fertig. In meinem Fall muss ich der / die / das Gain allerdings sehr weit aufdrehen. Was allerdings ein Balanceakt ist, da bei zu viel Gain das Klicken der Tastatur auch lauter wird.

Kommt nur Alsa zum Einsatz, wird das Interface gar nicht erkannt. Zumindest nicht mit der Standardeinstellung die Arch Linux ausliefert.

Alles in allem war der Spaß nicht ganz billig. Aber das Klicken ist nur noch ein relativ leises Hintergrundgeräusch und die Atemgeräusche sind komplett weg. Da Rode 10 Jahre Garantie gibt (nachdem man sich registriert hat), relativiert sich der Preis dann auch wieder.

Linux | OSBN

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