Solidified – Hubzilla-SPA-Theme

Eine Solid.js-Single-Page-Anwendung (SPA), die als Solidified-Theme für Hubzilla, eine föderierte Social-Networking-Plattform, bereitgestellt wird. Es ersetzt die klassische, serverseitig gerenderte Benutzeroberfläche durch ein schnelles, reaktives clientseitiges Erlebnis und bleibt dabei vollständig in das PHP-Backend von Hubzilla integriert.

Der Quellcode des Themes ist unter saiwal/Hubzilla-Solidified-Source auf GitHub verfügbar.

Quelle: solidified/README.md

Eine häufig geäußerte Kritik an Hubzilla ist die “altbacken” aussehende, teilweise träge und nicht sehr intuitiv bedienbare grafische Oberfläche (UI).

Mit seinen herkömmlichen Utsukta-Themes hat Saiwal diese Vorwürfe bereits in weiten Teilen entkräftet.

Doch nun entwickelt er das Theme Solidified, welches nicht nur eine moderne, responsive UI bietet, sondern aufgrund seiner Konzeption auch noch ausgespochen reaktiv ist und dazu auch in Hinblick auf die Bedienbarkeit (UX) wesentlich intuitiver verwendet werden kann.

Auch auf mobilen Geräten macht Solidified eine ausgesprochen gute Figur.

Diese Info-Sammlung soll dabei helfen, sich schnell mit Solidified zurechtzufinden und neue Funktionen zu entdecken.

Beachte: Solidified befindet sich derzeit in der Betatest-Phase für das erste Release. Es ändert sich regelmäßig etwas. Und es kann sein, dass manches nicht oder nur fehlerhaft kunktioniert. Deshalb sollte man, wenn man Fehler entdeckt auch entsprechende Issues im Theme-Repo melden. Saiwal ist in der Regel übermenschlich schnell dabei, solche Dinge auszubügeln.

Hubzilla-Administratoren können das Theme-Repo ganz einfach mittels

./util/add_theme_repo https://github.com/saiwal/Utsukta-hub-themes.git utsukta-themes

installieren (und nebenbei den Nutzern ihres Hub auch die anderen Utsukta-Themes zur Verfügung stellen).

Das Solidified-Theme aktivieren

Wenn auf dem Hub, bei welchem man seinen Account hat, das Solidified-Theme aktiviert ist, kann man dies unter Einstellungen ➔ Anzeige-Einstellungen ➔ Theme wählen aktivieren.

Achtung: Derzeit (ist in Bearbeitung) kann es noch Probleme mit einigen Modulen geben, wenn man unter einem anderen Theme mit deutschen Spracheinstellungen auf Solidified umstellt. Deshalb empfiehlt es sich, den Kanal vor dem Umstellen auf die Englische Sprache umzustellen. Nach dem Wechsel zu Solidified ist das Umstellen auf Deutsch kein Problem mehr und sorgt (soweit bekannt) auch nicht für Fehler.

Admin: Installieren/Aktivieren

Hub-Betreiber, also Administratoren müssen zunächst das Repo der Utsukta-Themes zum Hub hinzufügen. Dies erledigen sie auf der Kommandozeile mittels

./util/add_theme_repo https://github.com/saiwal/Utsukta-hub-themes.git utsukta-themes.

Anschließend müssen sie in der Administrations-Oberfläche von Hubzilla das Theme noch aktivieren, damit Nutzer ihres Hubs das Theme auswählen können.

Die verschiedenen Module

Stellt man einen brandneuen Kanal auf solidified um, so findet man im Navigations-Menü (linke Seitenleiste) zunächst die folgenden Module:

• Kanal
• HQ
• Netzwerk
• Kalender
• Verzeichnis
• Dateien
• Hilfe
• Fotos
• Spiele
• Notizblock
• Werkzeuge

Weitere Module installiert man unter Einstellungen ➔ Integrationen.

Hie werden derzeit alle bei Hubzilla vorhandenen Apps als Module angeboten. Es wurden aber noch nicht alle von Saiwal in Solidified implementiert. Die erfolgt nach und nach. Seine Absicht ist, im Endeffekt die gesamte Funktionalität von Hubzilla in Solidified abzubilden.

Module, die aktuell funktionieren, sind neben den oben erwähnten Standard-Modulen noch:

• ActivityPub-Protokoll (dies erscheint nicht im Navigationsmenü, stellt aber nach Installation die AP-Fähigkeit zur Verfügung)
• Artikel
• Chaträume
• Warenkorb
• Öffentlicher Stream
• NSFW (erscheint nicht im Navigationsmenü und kann unter Einstellungen ➔ Integrationen konfiguriert werden)
• Superblock (erscheint nicht im Navigationsmenü; Blocken über das Kanalmenü im Stream; Verwaltung unter Einstellungen ➔ Blockierte Kanäle)
• Webseiten
• Wiki

Privacy Gruppen und Kontaktrollen sind im Verzeichnis integriert.

HQ

Das Modul HQ entspricht im Wesentlichen der HQ-Ansicht bei den “klassischen” Themes. Es kann aber durch weitere Widgets, deren Lage auch eingestellt werden kann, erweitert werden.

Netzwerk

Das Modul Netzwerk ist die netzwerkweite Stream-Ansicht.

Stream-Darstellung

Die Form wie Postings angezeigt werden kann über die zentriert angezeigten Buttons ausgewählt werden.

Es gibt drei Ansichtsmodi: Die klassische Feed-Ansicht, die Raster-Ansicht und die Listenansicht.

In der Feed-Ansicht werden die Postings wie üblich untereinander angezeigt. Im Gegensatz zu der Ansicht in den “klassischen” Themen, werden Kommentare / Antworten nicht direkt angezeigt. Man kann sie mit Klick auf das Kommentarsymbol am unteren Rand der Posting-Karte eingeblendet werden.

In der Raster-Ansicht werden die Inhalte in einem festen Raster in Kartenform angezeigt.

Ein Klick auf eine Karte öffnet das Posting in einer modalen Einzeilansicht, bei welcher auch ggf. vorhandene Kommentare hierarchisch angezeigt werden.

Die Listen-Ansicht zeigt die Inhalte in einer kompakten Liste, die ein wenig der Kompaktansicht von Reddit oder der Ansicht von Hacker-News ähnelt.

Auch hier öffnet ein Klick auf einen Listeneintrag den Beitrag in einer modalen Ansicht.

Reihenfolge

Mit dem Anzeigefilter, den man über die Buttons oben links erreichen kann, lässt sich die Streamreihenfolge bestimmen: Neueste, Aktiv, Ohne Threads.

Mit Neueste werden die Beiträge in umgekehrter chronologischer Reihenfolge (neueste zuoberst) in Bezug auf den Zeitpunkt der Erstellung sortiert. Aktiv sortiert, ebenfalls chronologisch umgekehrt, die Beiträge nach der letzten Akivität, also Erstellung, Kommentare, Likes. etc.

Ohne Threads schließlich zeigt einzelne Akivitäten ohne Thread-Zusammenhang, also auch einzelne Kommentare, ähnlich wie bei Mastodon. Um ein Element dann im Zusammenhang (sofern es einen solchen gibt) betrachten zu können, muss man das kleine Augensymbol unten rechts neben dem Beitragsmenü klicken (“Im Kontext anzeigen”).

Schnellfilter / Suche

Oben rechts über dem Stream gibt es zwei Filter-Buttons. Einmal, um nach einer Verbindung zu filtern, und ein zweiter, um eine Suche im Thread durchzuführen.

Aktualisieren

Ganz links gibt es noch einen Button, um den Stream zu aktualisieren (dies geschieht nach einem festgelegten Zeitraum automatisch, kann mit dem Button aber sofort ausgelöst werden).

Wenn eine oder mehrere Aktivitäten im Stream stattgefunden haben, wird eine Schaltfläche eingeblendet, welche diese Aktivitäten abruft.

Schneller Beitragseditor

Ganz oben über dem Stream findet man die bekannte Schaltfläche für das schnelle Erstellen von eigenen Beiträgen (“Was gibt’s Neues?”). Klickt man darauf, öffnet sich an dieser Stelle ein vereinfachter Beitragseditor.

Stream-Filter

In der rechten Seitenleiste findet man schließlich die Bekannten Stream-Filter (einzelne Filter werden nur bei gegebenen Voraussetzungen angezeigt):

• Markierte Beiträge
• Folge ich
• Persönliche Beiträge
• Direktnachrichten
• Termine
• Umfragen
• Gespeicherte Ordner
• Privatsphäre-Gruppen
• Foren
• Tags
• Zeitraum

Hat man Filter ausgewählt, lassen sie sich per Klick auf “x Filter zurücksetzen” wieder zurücksetzen, sodass der ungefilterte Stream angezeigt wird.

Kanal

Die Kanalansicht zeigt den eigenen Kanalstream an, also alle Beiträge, die im eigenen Kanal veröffentlicht wurden (eigene Beiträge, aber z.B. auch Wall-Postings).

Dateien (die Cloud)

Das Modul “Dateien” erlaubt den Zugriff auf die Cloud. Sie funktioniert entsprechend der gleichnamigen App der “klassischen” Themes.

Das Modul bietet die bekannten Datei- und Verzeichnisoperationen.

Bild-Dateien, Plaintext und HTML-Dateien werden in einem neuen Tab geöffnet und dargestellt (abhängig von den Mime-Typen des Browsers). Andere Dateien werden bei Klick zum Download angeboten.

Zum jetzigen Zeitpunkt ist die Coolabora-Integration noch(!) nicht implementiert.

Fotos

Das Modul “Fotos” ist eine Anwendung, welche die Funktion der Foto-App und der Galerie-App vereint.

Die Alben (also Verzeichnisse in der Cloud, welche Bilder enthalten) werden skaliert und gekachelt inklusive Ordnerneman angezeigt. Es gibt einen leichten Zoom-Effekt bei Mouseover.

Öffnet man ein Album erscheint eine Fotogalerie, bei der die Bilder ebenfalls gekachelt und mit Zoomeffekt dargestellt werden.

Hier können einzelne Bilder bereits geteilt oder gelöscht werden. Außerdem kann das gesamte Album gelöscht, neue Dateien hochgeladen und die Zugriffsberechtigungen eingestellt werden.

Klickt man nun in der Albenansicht auf ein Bild, so wird es skaliert im Inhaltsbereich angezeigt. Mittels zweier Pfeile kann man hier durch die einzelnen Bilder des Albums blättern.

In dieser Ansicht kann man dem Foto auch einen Titel und eine Beschreibung geben.

Über das Bild-Menü (unten rechts ⋮) kann man das Bild auch im Bildeditor von Solidified bearbeiten.

Klickt man in der Bildansicht auf ein Bild, so öffnet es sich in der Einzelansicht, wo man es sich in unterschiedlichen Zoomstufen ansehen kann.

Kalender

Das Kalender-Modul bietet einen Kanal-Kalender zur Terminverwaltung.

Die Ansicht lässt sich auf Monats-, Wochen- und Tagesansicht umschalten. Außerdem gibt es eine Ansicht mit einer Terminliste.

Klickt man auf einen Tag, so hat man die Möglichkeit, einen Termin einzugeben.

Verzeichnis

Das Modul “Verzeichnis” integriert die Funktionalität der Apps “Verbindungen”, “Verzeichnis”, “Privacy Gruppen” und “Kontaktrollen” sinnvoll an einem Ort.

Verbindungen

Unter “Verbindungen” werden die Verbindungen angezeigt. Die Ansicht kann außerdem nach

• Aktiv
• Ausstehend
• Blockiert
• Ignoriert
• Versteckt
• Archiviert
• Alle

gefiltert werden.

Hier kann auch eine Direktnachricht an den Kanal verschickt werden, die Verbindung gelöscht und bearbeitet werden.

Weiterhin ist die Suche nach einer Verbindung möglich. Gibt man hingegen in das Suchfeld das Handle (Webbie / Fediverse-Adresse) eines Kanals ein, kann man hier auch direkt eine Verbindung herstellen, indem man auf den Button “+ Verbinden” klickt.

Die Sortierung der angezeigten Kanäle kann ebenfalls festgelegt werden.

Kontaktrollen

Die Kontaktrollen können in diesem Modul ebenfalls verwaltet werden.

Man kann dort über ein Auswahlmenü jedem Kontakt eine Kontaktrolle zuordnen

und auch neue Kontaktrollen erstellen bzw. selbst erstellte Kontaktrollen bearbeiten.

Privacy Gruppen

Auch Privacy Gruppen werden im Modul “Verzeichnis” verwaltet.

Bestehende Gruppen lassen sich bearbeiten

und neue erstellen.

Personen und Gruppen

Diese Funktion ermöglicht das Betrachten und Durchsuchen des globalen oder lokalen Verzeichnisses und das Herstellen neuer Verbindungen, wie man es bei den “herkömmlichen” Themen von der App “Verzeichnis” kennt.

Öffentliche Hubs

Mit “Öffentliche Hubs” kann man Hubs suchen. Diese Ansicht entspricht der Liste aus pubsites/.

Öffentlicher Stream

Hier werden beim lokalen Stream sämtliche Inhalte des eigenen Hubs in einem Stream angezeigt, beim globalen Stream zusätzlich alle Inhalte, die über Verbindung von Kanälen des Hubs importiert wurden.

Artikel

Das Artikel-Modul bietet die Funktionalität der App “Artikel”.

Über den Button “Neuer Artikel” wird der Artikel-Editor aufgerufen.

Neben dem Titel kann hier eine kurze Beschreibung eingegeben werden, die dann in Artikellisten als Zusammenfassung angezeigt wird. Weiterhin muss der URL Slug eingegeben werden, also der Teil der URL, welcher letztlich die Webseite referenziert.

Bei Artikeln muss man zusätzlich die Sprache des Artikelinhalts angeben und den Artikel ggf., sofern es ein “Mehrteiler” ist, einer Artikelserie zuordnen und auch die laufende Nummer des Artikels innerhalb der Serie festlegen.

Artikel können auch hier einer oder mehreren Kategorien zugeordnet werden.

Als Inhaltstyp steht derzeit nur BBcode zur Verfügung.

Saiwal hat die Funktionalität der Artikel hier sinnvoll erweitert. Artikel eignen sich hervorragend für das Blogging.

Webseiten

Auch mit Solidified ist es möglich, Webseiten zu erstellen.

Derzeit steht für das Erstellen von Webseiten lediglich der Inhaltstyp BBcode zur Verfügung (Markdown, HTML und PHP sind künftig geplant).

Webseite

Wählt man im Modul “+ Neue Seite”, öffnet sich der Webseiteneditor im WYSIWYG-Modus.

Im Editor kann man einen Seitentitel vergeben, der bei Darstellung der Webseite als Überschrift angezeigt wird. Es gibt auch ein Eingabefeld für eine kurze Zusammenfassung. Diese wird lediglich in der Liste der Webseiten angezeigt.

Weiterhin muss der URL Slug eingegeben werden, also der Teil der URL, welcher letztlich die Webseite referenziert.

Für die Darstellung der Webseite kann ein Seitenlayout ausgewählt werden. Mit dem Webseiten-Modul kann man solche Layouts erstellen.

Der eigentliche Inhaltsbereich kann mit dem WYSIWYG-Editor erstellt und bearbeitet werden. Der Editor lässt sich aber auch in den Quellcode-Modus umschalten, sodass man BBcode direkt per Hand eingeben kann.

Die Webseite kann dann angezeigt werden.

Menü

Mit dem Menüeditor des Webseiten-Moduls kann man rasch Menüs erstellen.

Hat man ein Menü erstellt, muss man nun nur noch Einträge Hinzufügen.

Man kann übrigens auch Untermenüs einbinden.

Layouts

Die Gestaltung der Webseite erfolgt schließlich mit Layouts.

Unter “Layout-Vorlagen” kann man Layouts erstellen und vorhandene bearbeiten.

Mit dem Layout-Editor kann man in einem Layout Widgets im Kopbereich, über dem Seiteninhalt, in der Fußzeile und in der rechten Seitenleiste hinzufügen. Diese werden dann bei Anzeige der Webseite an diesen Stellen dargestellt.

So könnte man z.B. das gerade erstellte Menü einfach im Kopfbereich platzieren.

In den unterschiedlichen Bereichen steht eine unterschiedliche Menge an Widgets zur Verfügung. Mit “HTML-Block” und “Einbettung” hat man auch die Möglichkeit, speziellere Inhalte einzubauen.

Ist man mit dem Layout zufrieden, klickt man auf “Fertig” und man kann es nun für Webseiten verwenden.

Nun wird die Webseite – hier im Beispiel nur zusätzlich mit der Menüleiste – gemäß dem gewählten Layout angezeigt.

Wikis

Das Modul “Wikis” erlaubt das Anbieten von Wikis. Jedes Wiki kann aus einer oder mehreren Wikiseiten bestehen, die, je nach Rechtevergabe, auch gemeinschaftlich gepflegt werden können.

Aktuell wird als Inhaltstyp ausschließlich BBcode unterstützt.

Erstellt man ein Wiki, so muss man diesem einen Titel geben und die Berechtigungen festlegen.

Ruft man nun das neue Wiki auf, wird die automatisch erzeugte Startseite “Home” angezeigt.

Mit dem Button “Bearbeiten” kann man nun den Inhalt gestalten.

Im Beschreibungsfeld für die Bearbeitung sollte man einen kurzen Hinweis über die durchgeführten Änderungen eintragen.

Nach dem Speichern wird nun die neue Version angezeigt.

Mit einem Klick auf den Button Verlauf kann man sich die Versionsverwaltung der Seite anschauen nd Änderungen auch wieder rückgängig machen, wie man es von Wikis kennt.

Editoren

Unter dem Theme Solidified begegnen wir verschiedenen Editoren. Von der Basis her ähneln sie sich alle. Lediglich aufgrund der jeweiligen Nutzung weisen sie verschiedene Features auf.

Derzeit bieten sämtliche Editoren ausschließlich BBcode für die Textgestaltung an. Ein echter Fortschritt ist, dass die Editoren über einen WYSIWYG-Modus verfügen, der Nutzer sich also nicht unbedingt mit der Textauszeichnungssprache befassen muss.

Da wäre zunächst der Beitragseditor (Posteditor), den wir nutzen, um Beiträge (Startpostings) zu erstellen:

Er bietet die bekannten optionalen Felder für einen Titel, eine Zusammenfassung und Kategorien an.

Im Gegensatz zu den “klassischen” Themes gibt es bei Solidified einen extra Editor für Direktnachrichten (Messages):

Hier gibt es keinen Titel, keine Zusammenfassung und keine Kategorie, sondern lediglich ein Adressfeld, das bei Auswahl eine Auswahlliste öffnet und nach der Eingabe von Zeichen die passenden Verbindungen filtert.

Der Editor für Webseiten erlaubt die Eingabe eines Seitentitels, einer Zusammenfassung und eines Slugs.

Außerdem kann man eine Vorlage wählen bzw. eigene Vorlagen erstellen.

Als Inhaltstyp steht derzeit nur BBcode zur Verfügung.

Der Editor für Wiki-Seiten bietet ein Protokollfeld, in welches man die vorgenommenen Änderungen eingeben kann.

Der Editor für Artikel, also nicht föderierte Blogbeiträge, bietet zusätzlich ein Eingabefeld für ein Slug, um den Artikel über einen sinnvollen Namen n der URL adressierbar zu machen.

Der Kommentar- bzw. Antworteditor öffnet sich, wenn wir auf einen vorhandenen Beitrag oder Kommentar antworten. Er ist – das liegt in der Natur der Sache – gegenüber den anderen Editoren in der Funktion reduziert und ermöglicht nur das, was in einem Kommentar möglich ist.

Notizen

In Solidified hat Saiwal aus den nicht sonderlich nützlichen Notizen der “klassischen” Themes eine wirklich nutzbare Notiz-App gemacht.

Öffnet man sie, wird ein Inhaltseditor im WYSIWYG-Modus geöffnet. Hier kann man nun eine Notiz erstellen und mittels Strg-Enter oder durch Klick auf den Button “Save” speichern.

Man kann nun entweder die vorhandene Notiz bearbeiten oder eine weitere Notiz erstellen.

Das Bearbeiten oder das Löschen einer Notiz erreicht man durch Klick auf die Buttons “Edit” bzw. “Delete”, die angezeigt werden, sobald sich der Mauszeiger über der Notiz befindet.

Unter Solidified kommen wir also in den Genuss einer echten und gut nutzbaren Notiz-App!

Werkzeuge

Solidified bietet im Navigations-Menü (linke Seitenleiste) eine Sammlung verschiedener Werkzeuge an.

Ein Klick öffnet die Toolbox mit nützlichen Werkzeugen:

1. Ein Taschenrechner:
2. Ein QR-Code Generator:
3. Ein Einheiten-Umrechner:
4. Ein Base64 En-/Decoder:
5. Ein Passwort-Generator:
6. Ein Bild-Editor:
7. Ein Video-Editor:

Spiele

Kurze Pause vom Social-Networking gefällig? Nun… da hat Solidified etwas für Euch: Spiele!

Als Gimmick ist in Solidified eine Reihe simpler (aber nicht unbedingt einfacher) Games eingebaut.

Es handelt sich Simon Tatham’s Portable Puzzle Collection. Ich gebe zu… ich kenne von den Spielen nur eine Hand voll (maximal)… Fifteen, Mastermind, Mines, Pegs und Sudoku. Es handelt sich um sogenannte “Puzzle Games”. Die Anleitungen für die Spiele findet man auf der Seite des Entwicklers, der Link dorthin befindet sich unter der Liste der Games in Solidified.

Nicht wirklich essenziell, aber eine nette Zugabe…

Navigationsleiste

In der linken Seitenleiste befindet sich die Navigationsleiste.

Hier sind die verschiedenen Module aufgeführt, um sie schnell aufrufen zu können.

Schnelleinstellungen / Hilfe / Info

Am unteren Ende der Leiste findet man den Umschalter für die Sprache (Hindi, Englisch, Deutsch) und ein Auswahlmenü für den (Farb-) Style des Themes.

Farbeinstellungen

Kontext-Hilfe

Ein weiteres Symbol (“?”) dient zum Aufruf der Kontext-Hilfe. Aktiviert man diesen Modus und klickt auf ein Element auf dem Bildschirm, wird die entsprechende Passage des integrierten Manuals angezeigt (derzeit nur bei Spracheinstellingen “Hindi” und “Englisch” verfügbar).

Siteinfo

Das Symbol “i” öffnet die Seiteninformationen des Hub (siteinfo/).

Gestaltungsmodus

Das Bleistiftsymbol schaltet in den Gestaltungsmodus um. Mit diesem kann man jede Ansicht in gewissem Rahmen gestalten, indem man z.B. Widgets hinzufügt, entfernt, konfiguriert oder verschiebt.

Die Reihenfolge der Moduleinträge in der Navigationsleiste lässt sich in diesem Modus ebenfalls umsortieren.

Account-Menü

Unmittelbar oberhalb der Schnelleinstellungen befindet sich das Account-Menü (Avatarbild), über welches man Zugriff auf die Kanalverwaltung

Bzw.

und die Einstellungen, sowie auf Login/Logout hat.

Einstellungen

In den Einstellungen sind sämtliche Einstellungsmöglichkeiten zusammengefasst.

Alle Einstellungen, die in den “klassischen” Themes etwas in der Oberfläche verstreut sind, findet man hier an einem Ort.

Im Bereich “Blockierte Kanäle” kann man die Kanäle verwalten, die mit “Superblock” blockiert (temporär stummgeschaltet) wurden.

Der Bereich “Integrationen” ist die App-Verwaltung. In dieser Verwaltung kann man Module/Apps installieren, deinstallieren, teilweise konfigurieren und in der Navigationsleiste anpinnen bzw. von dort entfernen.

Mobile Benutzeroberfläche

Aufgrund seines Designs und der verwendeten Technologie (solid.js) ist Solidified hervorragend für die Nutzung auf mobilen Endgeräten wie z.B. Smartphone oder Tablet geeignet.

Wer bereits einen Account hat, kann sich Hubzilla mit Solidified blitzschnell und ganz einfach als PWA auf das Gerät zaubern.

Was Hubzilla noch fehlt, ist eine achte App z.B. für Android, die auch nach Installation und erstem Start ein komplettes Onboarding (Registrierung oder bei vorhandenem Account das Login) bietet. Doch mit Solidified sind die Grundlagen dafür geschaffen und es dürfte nur noch eine Frage der Zeit sein, dass eine solche App entwickelt wird.

Hier ein paar Beispiele, wie Hubzilla/Solidified auf dem Smartphone aussieht…

HQ:

Beitragseditor:

Netzwerk (Stream):

Listenansicht:

Dateien (Cloud):

Navigationsmenü (erweitert):

Sidebar:

Wie man Hubzilla als PWA nutzt (bis es einmal eine native App gibt), kann man hier nachlesen: Installation PWA.