Fryboyter

Auf Kompletten Feed Umgestellt

Vor ein paar Tagen wurde ich gefragt, ob ich den OSBN-Feed nicht so ändern kann, dass dieser den kompletten Artikel anzeigt. Der Wunsch ist mir Befehl.

Hierzu habe ich einfach im Theme-Verzeichnis von Hugo im Unterverzeichnis layouts/_default die Datei rss.xml mit folgendem Inhalt angelegt (dieser entspricht dem Standard-Template des Feeds).

<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>{{ if eq  .Title  .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{.}} on {{ end }}{{ .Site.Title }}{{ end }}</title>
    <link>{{ .Permalink }}</link>
    <description>Recent content {{ if ne  .Title  .Site.Title }}{{ with .Title }}in {{.}} {{ end }}{{ end }}on {{ .Site.Title }}</description>
    <generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
    <language>{{.}}</language>{{end}}{{ with .Site.Author.email }}
    <managingEditor>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</managingEditor>{{end}}{{ with .Site.Author.email }}
    <webMaster>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Copyright }}
    <copyright>{{.}}</copyright>{{end}}{{ if not .Date.IsZero }}
    <lastBuildDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }}
    {{ with .OutputFormats.Get "RSS" }}
        {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
    {{ end }}
    {{ range .Pages }}
    <item>
      <title>{{ .Title }}</title>
      <link>{{ .Permalink }}</link>
      <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
      {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
      <guid>{{ .Permalink }}</guid>
      <description>{{ .Summary | html }}</description>
    </item>
    {{ end }}
  </channel>
</rss>

Damit nun der komplette Artikel angezeigt wird, habe ich die Zeile <description>{{ .Summary | html }}</description> auf <description>{{ .Content | html }}</description> geändert. Das war es schon. Die Änderung gilt für die komplette Seite und nicht nur für die Kategorie OSBN.

OSBN | Allgemein

Fryboyter wird nun mit Hugo erzeugt

Bisher habe ich für fryboyter.de das CMS Bolt verwendet. Im Grunde bin ich damit auch zufrieden. Aber irgendwie habe ich in letzter Zeit immer weniger Lust die Updates zu installieren.

Daher habe ich mir in den letzten Wochen diverse Tools angesehen, mit denen man statische Webseiten erstellen kann. Man braucht also kein PHP, keine Datenbank usw. Somit entfällt auch das nervige Updaten der Seite.

Schlussendlich bin ich bei Hugo gelandet. Das hat im Grunde zwei Gründe. Zum einen besteht Hugo nur aus einer Datei und zum anderen werden die statischen Seiten sehr schnell erzeugt.

Was mich aber etwas beschäftigt hat war, wie ich die Seite bei neuen Artikeln möglichst einfach erzeugen und auf den Webspace hochladen kann.

Im Lab von Uberspace gibt es inzwischen eine Anleitung wie man Hugo installiert. Hierbei läuft Hugo als Dienst im Hintergrund und erzeugt die Seite neu sobald sich etwas geändert hat. Was aber zur Folge hat, dass ich mich wieder zeitnah um eventuelle Updates kümmern muss. Besser wäre es, wenn Hugo nur zum Erzeugen der Seite gestartet und danach wieder beendet wird. Das einfachste wäre es, sich per SSH mit dem Webspace zu verbinden, den neuen Artikel zu erstellen und dann Hugo manuell auszuführen. Einfach? Ja. Umständlich? Auf jeden Fall. Also kommt es auch nicht in Frage.

Die Lösung lautet, wie so oft, Git. Als erstes legt man auf dem Webspace außerhalb des Document Root ein Verzeichnis an. In diesem erzeugt man mittels “git init –bare” ein sogenannte Bare-Respository. Dies hat, im Gegensatz zu einem normalen Respository keinen Working Tree. Schaut man sich nun das Verzeichnis noch einmal an, findet man dort das Unterverzeichnis “hooks”. Mit diesen Hooks lassen sich bestimmte Dinge automatisieren. Zum Beispiel lassen sich Befehle ausführen wenn das Repository neue Daten erhalten hat. Hierfür legt man im Verzeichnis “hooks” die Datei post-receive an und befüllt diese beispielsweise wie folgt und macht diese dann noch ausführbar.

GIT_REPO=$HOME/repository/fryboyter.git
TMP_GIT_CLONE=$HOME/tmp/git/fryboyter
PUBLIC_WWW=/var/www/virtual/$USER/html/fryboyter
git clone $GIT_REPO $TMP_GIT_CLONE
~/bin/hugo -s $TMP_GIT_CLONE --cleanDestinationDir -d $PUBLIC_WWW
rm -Rf $TMP_GIT_CLONE
exit

Hiermit wird der Inhalt des Repository in ein temporäres Verzeichnis geklont. Danach löscht Hugo die bereits veröffentlichte Internetseite und erstellt diese neu. Danach wird das temporäre Verzeichnis gelöscht.

Was jetzt noch fehlt, sind die Daten mit denen man die Internetseite erzeugt. Diese erzeugt man auf dem eignene Rechner. Wenn dies erledigt ist, wechselt man in das betreffende Verzeichnis und führt folgende Befehle aus.

git init
git add .
git commit -m "Beschreibung des Commit"

Hiermit erstellt man ein lokales Repository, fügt alle Dateien des Verzeichnis hinzu und erstellt einen Commit. Läde man das ganze mittels “git push $adresse_des_repository” hoch wird automatisch die Datei post-receive ausgeführt und die Internetseite wird autoamtisch erzeugt. Um zukünftig die Seite zu aktualisieren, erzeugt / ändert man die betreffende Datei im lokalen Repository, erstellt einen neuen Commit und läd die Änderungen mittels git push hoch.

OSBN | Allgemein

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