IndieWeb Stufe 1
Thomas verlinkt regelmäßig (zuletzt in Wellenreiten 04/2020) Artikel über das IndieWeb, ein dezentrales freies Ökosystem, in das man seine eigene Internetpräsenz (Blog, Webseite) sowie seine Social-Media-Accounts integrieren kann.
Soweit ich das verstanden habe, ist es Ziel des IndieWebs, die eigene Abhängigkeit von den großen Silos wie Facebook, Twitter & Co. zu reduzieren und Herr der eigenen Daten und Postings zu bleiben, ohne den großen Diensten mit den vielen Nutzern komplett den Rücken zu kehren. Ein Aspekt davon ist, dass man seine Artikel selbst hostet undzusätzlich in den großen Diensten zweitveröffentlicht oder verlinkt.
Ansätze davon verfolge ich bereits: Jeder neue Blog-Artikel wird bei Twitter verlinkt und auch meine GitHub-Commits sind dort zu sehen. Neuerdings verlinke ich die hiesigen Blog-Artikel auch manuell in meinem WhatsApp-Status, weil ich nichts anderes sinnvolles dort zu sagen habe, was bisher aber lediglich meine Mutter verwirrt ;-)
Ich hatte letzten Sonntag einen freien Nachmittag, wollte aber nichts sinnvolles tun und nur etwas rumdaddeln, da habe ich spontan angefangen, den IndieWeb-Krams in meine Webpräsenz einzubauen. Ich habe mich dabei einfach ohne irgendwelche tieferen Vorbereitungen an diesem interaktiven Tool entlanggehangelt und bin links und rechts ein paar Links zu weiteren Eklärungen gefolgt.
Kurz gesagt: Ich habe mich nicht groß darum gekümmert, was das IndieWeb macht und auf sozialer und politischer Ebene sein will, sondern mich einfach direkt in den Code gestürzt. Das macht mir mehr Spaß.
Get your own domain name
Fertig! Nichts zu tun :-)
Set up Web Sign In (rel-me)
Das klingt so, als ob man da eine eigene OAuth/OpenID-Architektur
hochziehen müsste; tatsächlich meint das aber nur, dass man Links von
seiner Homepage zu seinen Social-Media-Profilen setzt, die mit
rel="me" ausgezeichnet sind. Die Profile müssen dann wieder
zurücklinken. Das kann man auch gleich testen.
- In GitHub und Twitter hatte ich schon Links auf meine Webseite
hinterlegt. Das
rel="me"wird von den beiden Diensten für Links im eigenen Profil automatisch gesetzt. - Im Blog (das läuft mit Serendipity) habe ich in der
index.tplein<a rel="me" href"…">im<head>auf jeder Seite ergänzt. Außerdem habe ich die Links in der statischen Seite „Über mich“ manuell ergänzt (und bei der Gelegenheit dort mal Google+ entfernt, der Dienst ist seit über einem Jahr abgeschaltet ∗hust∗). - Auf meiner statischen Homepage habe ich die Links im Header um das
rel="me"ergänzt (zum Glück wird das alles per Skript generiert).
Das war nicht wild.
Mark up your content (homepage h-card)
Eine h-card ist sowas ähnliches wie eine v-card, man kann dort
persönliche Informationen hinterlegen. Die einzelnen Attribute lassen
sich bestenfalls in bestehenden Tags unterbringen, die man dafür nur
mit ein paar CSS-Klassen bestreut. (Das scheint das generelle
Vorgehen bei den verschiedenen benutzen Microformats2 zu sein.) Es
gibt dann Tools, die die Daten aus einer Webseite strukturiert
extrahieren (z.B. als JSON; hier ein Online-Beispiel). Auch das kann
man wieder direkt überprüfen.
Auf meiner Homepage habe ich aus dem <a href="mailto:…"> im Footer
jeder Seite <a class="h-card" href="https://www.cgarbs.de"> gemacht
(Commit).
Beim Blog klappt das in Verbindung mit dem nächsten Punkt h-entry
nicht so ganz: Ich brauche in jedem Blogbeitrag eine h-card, um
den Autoren anzugeben, auf der Startseite des Blogs sind jedoch
mehrere Artikel gleichzeitig sichtbar. Mehrere h-cards mag der
Prüfer aber nicht – es solle bitte eine der h-cards als
repräsentativ markiert werden und tue ich das, meckert er die anderen
trotzdem weiter an.
Ich habe mich jetzt dafür entschieden, dass mein Blog ja nicht meine
Homepage ist und ich deshalb im Blog keine repräsentative h-card
brauche. Es reicht eine unrepräsentative, die auf meine Homepage
verlinkt, wo dann die echte repräsentative h-card (und nur genau
eine ;-) liegt. Das Thema ist auch bei den Profis noch nicht
ausdiskutiert. Ich mache das daher erst einmal so, das lässt sich ja
nochmal ändern.
Mark up your content (homepage h-entry)
Mit einem h-entry kann man unter anderem einzelne Artikel
beschreiben.
Auf meiner Homepage habe ich nichts gemacht, denn die dortigen Seiten sind für mich keine Artikel, wie z.B. im Blog. Ob das richtig ist, weiß ich nicht, ich habe mich da nicht weiter mit der Semantik beschäftigt.
Im Blog habe ich natürlich jeden Blogbeitrag als h-entry markiert,
auch dieser Schritt ist wieder überprüfbar.
Zuerst habe ich die vorhandenen Tags um Klassen erweitert:
- der gesamte
<article>ist jetztclass="h-entry" - die
<h2>-Artikelüberschrift bekamclass="p-name"verpasst - der kanonische Link zum Artikel (das
<a>in der Artikelüberschrift) istclass="u-url" - im Artikelinhalt
<div class="serendipity_entry_body">wurde die Klassee-contentergänzt - bei Anrisstexten dagegen kam im
<div class="serendipity_entry_body my-teaser">die Klassep-summarydazu - die Kategorielinks
<a href="{$entry_category.category_link}">wurden umclass="p-category"erweitert
Bei der Autorennennung müsste pro Autor (Serendipity ist grundsätzlich
Multiuser-fähig) eine h-card hinterlegt werden, die auf eine
„richtige“ Indieweb-Seite statt der bloginternen „was hat der Autor
alles geschrieben“-Liste zeigt. So eine Änderung wäre mir aber zu
umständlich: Ich möchte weder an der Benutzerverwaltung schrauben noch
neue Datenbankfelder einführen. Das ist schließlich ein
Singleuser-Blog hier.
Ganz statisch wollte ich das aber auch nicht lösen (vielleicht kommt
ja doch mal ein zweiter Autor dazu), also kommt da ein {$if}, das auf den
Namen prüft, rein und bei mir setze ich dann manuell den Link auf meine
Homepage. Und zusätzlich kommt rel="author" class="h-card p-author"
an den Link.
Vorher:
- <span class="serendipity_footer_postedby">{$CONST.POSTED_BY} <a href="{$entry.link_author}">{$entry.author}</a></span>
Nachher:
- {if $entry.author eq 'mitch'}
- {$entry.link_author='https://www.cgarbs.de/'}
- {/if}
- <span class="serendipity_footer_postedby">{$CONST.POSTED_BY} <a rel="author" class="h-card p-author" href="{$entry.link_author}">{$entry.author}</a></span>
Nebenbei habe ich per CSS den Autoren-Namen unauffälliger gemacht, da braucht ja niemand draufzuklicken. Gibt eh nur mich hier.
offene Flanken
Offen sind noch ein paar Kleinigkeiten:
- Alles, was ich in
entries.tpleingebaut habe, muss ich inentries-summary.tplwohl auch nochmal doppeln (das sind die Archiv-Seiten im Blog). - Mal schauen, ob ich mein Logo noch in der
h-cardunterkriege, ohne dass es überall angezeigt wird. Unsichtbare Metadaten sind pfui, aber ich mach mir doch mein schönes Layout nicht kaputt! - In den Blog-Einträgen könnte ich noch weitere
h-card-Attribute füllen, z.B. den Link zum abgesetzten Tweet (wenn ich da irgendwie drankomme, nachdem Serendipity den Tweet abgesetzt hat).
Fazit & Ausblick
So weit, so gut. Ich habe jetzt IndieWeb-Tags drinnen. Keine Ahnung, was jetzt tolles passiert :-)
Der nächste große Schritt sind WebMentions. Das ist im Grund sowas wie Trackbacks, die man versendet und auch empfangen kann, nur leistungsfähiger und vielseitiger. Das Versenden könnte ich vielleicht noch im Blog einbauen (aber auch da nur statisch mit meiner Konfiguration statt konfigurierbar als generisches Plugin), für das Empfangen muss ich mir aber was ganz neues überlegen: Eingehende Mentions sollen nicht unbedingt ins Blog, die verschiedenen Dinge (Notes, Links, Likes, …) passen dort nirgendwo so richtig hin. Und ich kann ja auch Mentions zu was anderem als Blog-Einträgen bekommen, wo sollen die dann hin?
Vielleicht schreibe ich da eine eigene Anwendung (Microservice ;-), die einen WebMention-Stream irgendwo dynamisch auf meiner Homepage außerhalb des Blogs anzeigt. Ein RSS-Feed wäre gut, dann kann ich den Stream auch sinnvoll lesen. Ein passendes Perl-Modul für WebMentions gibt es, für Java habe ich dagegen noch nichts gefunden.
Also das nächste Bastelprojekt für viel Regen – ab auf die interessante-Projekte-Liste. Vielleicht klappt's mal irgendwann – der statische Teil ist ja jetzt auch sehr schnell und sehr spontan entstanden. Und Thomas will ebenfalls irgendwann mal in der Richtung basteln, da kann ich vielleicht abgucken oder mithelfen.
mitch
onli am um :
mitch am um :
Daher ist mein aktueller Gedankenplan, die WebMentions außerhalb des Blogs abzufackeln und dann die Dinge, die sich auf einen konkreten Blogbeitrag beziehen, zusätzlich noch einmal hier einzublenden (und wenn ich einfach pro Blogbeitrag ein vorgerendertes HTML-Snippets include).
onli am um :
Ich hatte mir das mit den Webmentions auch schonmal angeschaut. Sie wären glaube ich relativ einfach einzubinden, denn technisch sind sie wirklich einfach Trackbacks, mit (bewusst eingebauten?) minimalem Protokollunterschied. Obendrauf sitzt halt noch die spezifizierte Anzeige mit diesen h-cards, wenn das noch aktuell ist. Ich würde dir nahelegen, das alles direkt in den Kern von Serendipity einzubauen. Du könntest dich dann daran orientieren, wie die Trackbacks umgesetzt sind. Es müsste alternativ auch als Plugin einsetzbar sein (frontent-header für den callback-link, den auf eine vom Plugin verwaltete Seite zeigen lassen, dann dort das webmention fangen und in die Datenbank schreiben, eventuell in den Kern als dritten Typ neben Trackback und Pingback. Beim Senden auf backend_save reagieren und den webmention rausschicken). Die webmentions für Einträge nur natürlich.
Falls du es versuchst und Fragen hast meld dich bei gerne bei mir oder bei uns im Forum/Github. Falls da ein PR draus werden würde wäre ich bei Bedarf beim Testen und Fertigbauen dabei.
mitch am um :
Ich glaube nicht, dass ich die Webmentions im ersten Schritt direkt in s9y einbauen werde. Wie schon beschrieben gibt es bei mir ein online-Leben außerhalb des Blogs. Primär aber, weil ich damit nur die Komplexität steigern würde: Ich müsste mich gleichzeitig in die Webmentions einarbeiten, tiefer in s9y einsteigen und noch PHP lernen. Wenn ich dagegen erstmal standalone neben dem Blog implementiere, sind nur die Webmentions selbst neu. Meiner absehbaren Zeiteinteilung ist das sehr zuträglich.
Wenn das dann fertig ist, kann ich gucken, ob ich das nach s9y umziehen oder einbauen will – vermutlich werde ich es aber erstmal nur lose andocken.
Mit den GitHub-Webhooks bin ich damals mit der gleichen Taktik auch sehr gut gefahren: https://www.cgarbs.de/blog/archives/1173-GitHub-aus-Services-werden-Webhooks.html
Nur diesmal mache ich von Anfang ein ein git-Repo dazu, versprochen! (Nachträglich wird das nichts, wie man an den Webhooks sieht – es gibt ein angefangenes Repo, aber das ist nicht veröffentlichungsreif.)