Fryboyter

Hugo Extended 0.99.1 für Uberspace.de / CentOS 7

Zum Erstellen von fryboyter.de nutze ich Hugo. Und als Webspace nutze ich uberspace.de. Wenn ich beispielsweise einen neuen Artikel schreibe, erstelle ich für diesen einen Commit, den ich in ein Mercurial-Repository auf den Webspace hochlade. Jeder neue Commit löst dann die Ausführung eines Scripts aus, welches die Seite neu erzeugt.

Das Script nutzt hierfür die fertig kompilierte Version von Hugo die von den Entwicklern angeboten wird und die auf dem Webspace abgespeichert ist. Aufgrund von kürzlich erfolgten Änderungen an der Internetseite benötige ich nun die sogenannte extended Version von Hugo. Die aber leider bei Uberspace.de nicht funktioniert, da dort aktuell CentOS 7 zum Einsatz kommt, sodass einige benötigte Pakete zu stabil sind. Oder anders ausgedrückt zu veraltet sind. Hugo bricht daher mit der folgenden Fehlermeldung ab.

/home/laythos/bin/hugo: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.20' not found (required by /home/laythos/bin/hugo)
/home/laythos/bin/hugo: /lib64/libstdc++.so.6: version `CXXABI_1.3.8' not found (required by /home/laythos/bin/hugo)
/home/laythos/bin/hugo: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found (required by /home/laythos/bin/hugo)

Das Problem ist den Entwicklern bekannt (https://github.com/gohugoio/hugo/issues/9330), aber aus nachvollziehbaren Gründen werden für alte Distributionen keine fertig kompilieren Versionen angeboten.

Also bleiben in dem Fall zwei Möglichkeiten. Man erzeugt die Internetseite jedes Mal lokal und lädt diese beispielsweise mit rsync auf den Webspace. Oder man kompiliert eine Version von Hugo die CentOS 7 unterstützt. Ich habe mich für letzteres entschieden.

Das Kompilieren direkt auf einem Uberspace sollte man allerdings nicht probieren. Denn dort kann man maximal 1,5 GB RAM nutzen. Alles, was mehr braucht, wird automatisch beendet. Was bei Hugo der Fall ist.

Daher habe ich mir von https://www.osboxes.org eine virtuelle Umgebung von CentOS 7 heruntergeladen und mit VirtualBox gestartet. Anschließend habe ich golang sowie gcc-c++ installiert. Ersteres über Umwege, da Go scheinbar nicht in den offiziellen Paketquellen vorhanden ist.

Danach bin ich wie folgt vorgegangen.

wget https://github.com/gohugoio/hugo/archive/refs/tags/v0.97.3.zip
unzip https://github.com/gohugoio/hugo/archive/refs/tags/v0.97.3.zip
cd hugo-0.97.3
go build --tags extended

Mit dem ersten Befehl wir der Sourcecode der derzeit aktuellen Version heruntergeladen. Mit dem zweiten Befehl wird dieser entpackt. Der dritte Befehl wechselt in das betreffende Verzeichnis, in dem die Dateien entpackt wurden. Und der letzte Befehl kompiliert die extended Version von Hugo.

Wenn der letzte Befehl erfolgreich ausgeführt wurde, was je nach Hardware ein paar Minuten dauern kann, sollte man im gleichen Verzeichnis die Datei hugo finden. Diese kopiert man dann einfach auf seinen Uberspace. Damit sollte dann das Erzeugen der Internetseite ohne Fehlermeldungen funktionieren.

Unter https://e1.pcloud.link/publink/show?code=kZSMfzZx0nn3yYPAEVOyuhqvPPdgLfvF5ek habe ich die aktuelle von mir erzeugte Version von Hugo die bei Uberspace.de funktioniert hochgeladen. Wer will (und mir vertraut), kann diese gerne nutzen.

info
Zuletzt aktualisiert am 18.05.2022.
Version 0.99.1 erstellt und hochgeladen von Hugo für Uberspcae / CentOS 7.
Allgemein | OSBN

Gehäuse diverser Geräte öffnen

Vor einigen Monaten habe ich mir ein neues Notebook gekauft. Ein Thinkpad E14 Gen 3 um genau zu sein. Unter Linux gibt es nur zwei Probleme. Der Fingerabdrucksensor, den ich nicht benötige, funktioniert aktuell gar nicht. Und es ist eine WLAN-Karte von RealTek verbaut. Was zwar immer noch besser als Broadcom ist, aber eine Karte von Intel wäre besser als alle beide.

Ich habe mir daher die Karte AX200 von Intel gekauft, die unter Linux “out of the box” unterstützt wird und die einfach funktioniert.

Als ich die Karte einbauen wollte, habe ich die Schrauben am Gehäuseboden den Notebooks entfernt. Danach hat sich dieser aber keinen Millimeter bewegt. Lenovo ist, zumindest bei diesem Modell, dazu übergegangen das Ganze noch zusätzlich mit Clips zu sichern. Das ist immer noch besser als das Gehäuse zu verkleben, aber was soll das? Mein altes Thinkpad X230 hatte keine Clips und es ist weder explodiert noch auseinander gefallen. Dafür ist die Hardware im E14 zugegeben besser zugänglich.

In solch einem Fall versuche ich die Clips zu lösen, indem ich beispielsweise mit einer alten Kreditkarte oder einer Telefonkarte (die älteren Leser werden wissen, was ich meine) im Schlitz zwischen dem oberen und unteren Teil des Gehäuses mit etwas Druck entlang fahre und dabei mantraartig den Satz “hoffentlich brechen die Clips nicht ab” wiederhole. Wartungs-Voodoo sozusagen.

Da diese Karten relativ instabil sind, ist diese Lösung keine gute. Auch wenn sie meist funktioniert. Ein Musiker, den ich kenne, hat mir einen verdammt guten Tipp gegeben. Ein Plektrum. Also diese dreieckigen Dinger mit denen man eine Saite einer Gitarre anschlägt. Diese gibt es in verschiedenen Steifigkeiten. Wenn man ein ziemlich hartes Plektrum nimmt, ist das eigentlich ideal um solche Gehäuse zu öffnen.

Aber es gibt doch Reparaturkits von beispielsweise iFixit mit speziellen Tools, um Gehäuse zu öffnen? Ja gibt es. Diese Dinger ähneln verblüffend Plektren. Kosten dafür aber mehr. Und in meinem Fall habe ich schon diverse Schraubendreher, Pinzetten und so weiter, sodass sich ein komplettes Set nicht lohnen würde. Wer also in der gleichen Lage ist wie ich, sollte sich daher eher ein Plektrum kaufen. Oder eines abstauben, wenn er einen Gitarrenspieler kennt.

Was vielleicht auch funktionieren könnte, wäre ein Reifenheber, den man beim Wechsel eines Fahrradreifens nutzt. Ausprobiert habe ich es aber noch nicht.

OSBN | Allgemein

Mehrere Befehle mit einem Shortcut unter VS Code ausführen

Wenn ich einen Artikel erstelle, in dem ich ein oder mehrere Code-Beispiele zeige, wandle ich erst einmal diverse Zeichen des Codes in Entitäten um, sodass der Browser nicht versucht den Code auszuführen. Dies hat sonst oft ungewollte Nebenwirkungen. Somit wird das Zeichen < beispielsweise in &lt; umgewandelt. Danach packe ich den Code in einen pre und einen code Tag der für das Hervorheben des Codes zuständig ist. Dies sieht dann beispielsweise wie folgt aus.

<pre class="line-numbers language-bash" style="white-space:pre-wrap;">
<code class="language-bash">#!/bin/bash

if [ $# -eq 0 ]
  then
    echo &quot;Usage: $0 &lt;user_name&gt; &quot;
    exit;
fi

USER=$1

for repo in $(curl -s https://api.github.com/users/&quot;$USER&quot;/repos?per_page=1000 |grep git_url |awk &apos;{print $2}&apos;| sed &apos;s/&quot;\(.*\)&quot;,/\1/&apos;);do
git clone &quot;$repo&quot;;
done;</code>
</pre>

Hierfür nutze ich jeweils einen extra Shortcut der dies automatisiert. Für das Umwandeln der Zeichen wäre es dieser Shortcut.

{
    "key": "shift+f3",
    "command": "extension.htmlEntities"
}

Mittels Shift + F3 wird die Erweiterung html-entities ausgeführt. Und genau das vergesse ich ab und zu.

Nützlich wäre daher ein Shortcut der automatisch beide Aktionen durchführt. Das unterstützt VS Code aber leider aktuell nicht. Da ich derzeit keinen anderen Editor nutzen möchte, habe ich mir die Erweiterung multi-command installiert. Damit ist es möglich mehrere Befehle nacheinander auszuführen. Herausgekommen ist schlussendlich folgender Shortcut.

{
    "key":"shift+f5",
    "command":"extension.multiCommand.execute",
    "args":{
        "sequence":[
            "extension.htmlEntities",
            {
                "command":"editor.action.insertSnippet",
                "args":{
                    "name":"wrap_highlight"
                }
            }
        ]
    }
}

Der Shortcut Shift + F5 ruft die Erweiterung multi-command auf welche als Erstes die Erweiterung html-entities und danach das Snippet wrap_highlight ausführt. Letzteres hebt in meinem Fall den Code entsprechend hervor. Zukünftig werde ich also nicht mehr vergessen, Code-Beispiele vor der Veröffentlichung eines Artikels umzuwandeln.

OSBN | Allgemein

Hinweise in Artikeln unter Hugo einfügen

Kürzlich habe ich einen Artikel veröffentlicht, der sich auf einen älteren Artikel bezogen hat, der somit im Grunde nicht mehr relevant ist. Da ich diesen aber nicht löschen will, habe ich mir überlegt in diesem einen entsprechenden Hinweis einzutragen. Also für den Fall, dass jemand den Artikel von 2019 direkt aufruft.

Gelöst habe ich dies mittels eines Shortcodes, der unabhängig von den Artikeln genutzt werden kann. Im Verzeichnis des von mir verwendeten Themes habe ich im Unterverzeichnis shortcodes die Datei notice.html angelegt und folgenden Inhalt eingetragen.

<div class="shortcode-notice {{ .Get 0 }}">
    <div class="shortcode-notice-title {{ .Get 0 }}">
        {{- if len .Params | eq 2 -}}
        {{ .Get 1 }}
        {{ else }}
        {{ .Get 0 }}
        {{- end -}}
    </div>
    <div class="notice-content">{{ .Inner | markdownify }}</div>
</div>

Zusätzlich habe ich im Unterverzeichnis static/css im Theme-Verzeichnis die Datei notice.css angelegt und folgenden Inhalt eingetragen.

.shortcode-notice .notice-content {
    padding: .6em 1em;
	display: block;
	font-size: 1em;
	margin-top: 0;
	margin-bottom: 0;
	color: #666;
    border-radius: 4px;
}

.shortcode-notice-title {
	color: #fff;
	padding-left: 1em;
	font-weight: 700;
	text-transform: capitalize;
    border-radius: 4px 4px 0 0;
}

.shortcode-notice-title.hinweis {
	background-color: rgba(92, 184, 92, .8)
}

 .shortcode-notice.hinweis .notice-content {
	background: #e6f9e6
}

 .shortcode-notice-title.tip {
	background-color: #6ab0de
}

.shortcode-notice.tip .notice-content {
	background: #e7f2fa
}

.shortcode-notice-title.info {
	background-color: #f0b37e
}

.shortcode-notice.info .notice-content {
	background: #fff2db
}

.shortcode-notice-title.warnung {
	background-color: rgba(217, 83, 79, .8)
}

.shortcode-notice.warnung .notice-content {
	background: #fae2e2
}

Will man nun einen entsprechenden Hinweis in einen Artikel eintragen, kann man folgenden Shortcode nutzen.

{{% notice info %}}
Das ist eine Information
{{% /notice %}}

Anstelle von info kann man in der ersten Zeile hinweis, tip und warnung verwenden was zur Folge hat, dass der Hintergrund der Anzeige entsprechend eine andere Farbe hat. Im Falle der Warnung beispielsweise rot. Wem das nicht ausreicht oder zu viel ist, kann natürlich die Einträge in der CSS-Datei erweitern oder entfernen.

Im Falle des bereits angesprochenen, veralteten Artikels von 2019 erzeugt dies folgenden Hinweis.

OSBN | Allgemein

Kommentarfunktion Isso unter Hugo deaktivieren 2.0

2019 hatte ich bereits einen Artikel veröffentlicht, wie man das Kommentarsystem Isso für bestimmte Artikel unter Hugo deaktiviert. Hierbei wurde aber nur der Code entfernt der für das Anlegen neuer Kommentare und das Anzeigen vorhandener Kommentare zuständig ist. Im Hintergrund wurde beispielsweise die JavaScript-Datei “embed.min.js” weiterhin geladen. Auch wenn diese nur ca. 25 kB groß ist (was einen Großteil von https://fryboyter.de ausmacht), bin ich mit der Lösung unzufrieden.

Da ich aktuell privat etwas Zeit habe, und ich diese Funktion demnächst wohl öfter nutzen werde, habe ich mir eine bessere Lösung überlegt.

Als Erstes habe ich mir die Datei single.html vorgenommen. Diese ist für das Anzeigen von einzelnen Artikeln zuständig. Den betreffenden Code habe ich wie folgt geändert.

{{ if and ( isset .Params "nocomments" ) ( eq .Params.nocomments true ) -}}
    <p>Die Kommentarfunktion ist für diesen Artikel deaktiviert</p>
{{ else }}
    <section id="isso-thread" data-title="{{ .Title }}"></section>
	<noscript>
		<p>Die Kommentarfunktion kann nur mit aktiviertem Javascript genutzt werden</p>
	</noscript>
{{ end }}	

Wichtig ist hier im Grunde genommen die erste Zeile. Damit wird geprüft, ob im Front-Matter-Bereich des jeweiligen Artikels die Zeile nocomments: vorhanden ist und ob diese den Wert true hat. Wenn ja, wird der Hinweis angezeigt, dass die Kommentarfunktion für diese Artikel deaktiviert ist. Wenn nicht, wird der Code eingetragen, mit dem man als Nutzer neue Kommentare erzeugen kann und vorhandene Kommentare anzeigt. Also im Grunde genommen, was im Artikel von 2019 beschrieben wurde.

Als Nächstes habe ich die Datei metadata.html angepasst. Diese erzeugt die Zeile direkt unter dem Titel des Artikels, in der bisher unter anderem die Anzahl der Kommentare angezeigt wird. Was bei einer deaktivierten Kommentarfunktion nicht wirklich nötig ist.

{{ if or (not ( isset .Params "nocomments" )) ( ne .Params.nocomments true ) -}} | <a href="{{ .Permalink }}#isso-thread">Comments</a>{{ end }}

Hiermit wird geprüft, ob die Zeile nocomments: nicht hinterlegt ist oder wenn doch, ob dessen Wert nicht true entspricht. Wenn eines der beiden zutrifft, wird der Code für die Anzahl der vorhandenen Kommentare angezeigt. Den Code habe ich bewusst etwas verkompliziert, da ich verhindern wollte, dass beispielsweise nocomments: treu unabsichtlich dazu führt, dass die Kommentare deaktiviert werden. Wer hierfür eine bessere Lösung hat, die weniger Code benötigt, kann sich gerne melden. Oder einfach einen Pull Request erstellen. Denn an der Stelle zeigt es sich, dass ich nicht wirklich programmieren kann.

Abschließend ist die Datei head.html an der Reihe.

{{ if or (not ( isset .Params "nocomments" )) ( ne .Params.nocomments true ) -}}
	<script data-isso="https://isso.fryboyter.de/" data-isso-feed="true" data-isso-css="false"
		data-isso-lang="{{.Site.Language.Lang }}" data-isso-max-comments-top="inf" data-isso-max-comments-nested="inf"
		data-isso-vote="false" data-isso-reply-notifications="true"
		src="https://isso.fryboyter.de/js/embed.min.js"></script>
	{{ end }}

Hier kommt unterm Strich die gleiche Abfrage wie für metadata.html zum Einsatz. Nur das in diesem Fall nicht die Anzeige der vorhandenen Kommentare ausgeblendet wird, sondern die Datei embed.min.js geladen wird oder eben nicht.

Das ganze Changeset kann man sich unter https://github.com/Fryboyter/Hugo/commit/5dfb4459aa7f9c8b08a21a9568d775808e290b49 ansehen.

Warum nun diese Änderung? Im Grunde aus zwei Gründen.

Zum einen schalte ich bereits jetzt weniger als 80 Prozent der Kommentare frei, da viele Kommentare nur SEO-Spam oder Kommentare sind, die nicht weiterhelfen. Daher auch die manuelle Freischaltung der Kommentare.

Das größere Problem ist aber, dass ich oft keine Lust oder Zeit habe Kommentare zeitnah freizuschalten, so dass diese oft Tage oder gar Wochen nicht angezeigt werden. Das nützt daher weder den Nutzern noch mir etwas. Daher verzichte ich im Zweifelsfall zukünftig lieber auf Kommentare Dritter.

OSBN | Allgemein