Nachdem ich heute meine Lösung geteilt hab, den <title> im lokalen Kirby-Panel anzupassen, sodass er sich vom Live-CMS unterscheidet, hat mir Thomas Günther auf Mastodon geantwortet.

Kirby bietet die Möglichkeit über die config auch das Favicon zu ändern. Das ist noch sauberer und für mich deshalb die bessere Lösung. Der einzige Nachteil ist, dass man ein gutes Bild fürs Favicon braucht. 🖼️

Da ich jetzt schon mehrfach den Fehler gemacht hab Inhalte im lokal laufenden Kirby statt auf der Live-Seite zu erstellen, wollte ich den Unterschied zwischen lokalem CMS und Live-CMS im Tab sichtbar machen.

Um eigenes JavaScript im Kirby-Panel auszuführen, reichen ein paar Zeilen in der config Datei für die lokale Instanz, die auf die zu ladende JavaScript-Datei verweist:

'panel' => [
  'js' => 'assets/js/panel.js',
],

Innerhalb von panel.js hab ich eine Funktion geschrieben, die ein Emoji vor den Titel der Seite hängt. Alle Tabs mit lokalem Kirby sind dadurch leicht erkennbar. Das Hinzufügen des Emoji wird durch einen MutationObserver ausgelöst, der auf Änderungen reagiert:

function updateTitle() {
  if (!document.title.startsWith("⚙️")) {
    document.title = "⚙️ " + document.title;
  }
}

new MutationObserver(updateTitle).observe(document.querySelector("title"), {
  childList: true,
});
document.addEventListener("DOMContentLoaded", updateTitle);

Wahrscheinlich gibt es noch eine "sauberere" Variate, die auf Vue.js und Kirbys Panel reagiert. Der Vorteil dieser Variante ist, dass der Code auch weiterhin funktioniert, wenn Vue.js oder Kirby neue APIs nutzen oder Kirby zu einem ganz anderen Framework wechseln sollte.

Mein Kirby Panel begrüßt mich jetzt freundlich und fragt mich, was ich tun möchte:

Es gibt leider kein type: button in Kirby, deshalb hab ich ein Info Feld mit Link verwendet. Der entsprechende Teil im Blueprint für das Design oben sieht so aus:

fields:
  headline:
    label: Hey Max 👋
    type: headline
    help: Was möchtest du tun?
  notizenLink:
    label: ""
    type: info
    theme: warning
    text: |
      **(link: /panel/pages/notizen text: Notiz erstellen)**
    width: 1/5
  notesLink:
    label: ""
    type: info
    theme: warning
    text: |
      **(link: /panel/pages/notes text: Add note)**
    width: 1/5
  blogLink:
    label: ""
    type: info
    theme: passive
    text: |
      **(link: /panel/pages/blog text: Blog schreiben)**
    width: 1/5
  line:
    type: line

Durch Kirby läuft meine Webseite zum ersten Mal mit einem richtigen CMS. Die Möglichkeit Seiten zu bearbeiten, möchte ich deshalb so einfach und bequem wie möglich machen. Wenn mir z.B. ein Tippfehler auffällt, will ich ihn schnell korrigieren können.

Ich wollte aber keinen Button zu meiner Seite hinzufügen oder irgendwo verstecken und auch keine Logik schreiben, um ihn nur anzuzeigen, wenn ich im CMS angemeldet bin. Wie kann ich trotzdem schnell ins CMS zum Bearbeiten der aktuellen Seite wechseln?

Mit einem Keyboard-Shortcut!

Ein paar Zeilen JavaScript reichen aus, um Browser auf die entsprechende Panel-URL von Kirby weiterzuleiten. Die Entscheidung welches Tastenkürzel es sein soll, war gar nicht so einfach zu treffen. Ich hab mich letztendlich für Cmd+Opt+. entschieden. Die Kombination ist eher unüblich, gleichzeitig noch bequem genug, aber trotzdem relativ unwahrscheinlich, dass man sie versehentlich nutzt.

Wenn ihr auch einen Keyboard-Shortcut auf eurer Webseite haben wollt, um direkt ins Panel zum Bearbeiten der aktuellen Seite zu springen, könnt ihr euch folgenden JS-Code kopieren (und mit der Tastenkombination eurer Wahl anpassen):

window.addEventListener("keydown", (event) => {
  if (event.metaKey && event.altKey && event.code === "Period") {
    const url = new URL(window.location.href);
    window.location.href = `${url.origin}/panel/${
      url.pathname === "/"
        ? "site"
        : "pages/" + url.pathname.slice(1).replace("/", "+")
    }`;
  }
});

Update: Der JS-Code leitet jetzt auf der Homepage zur Startseite des Panels weiter, statt auf eine falsche Panel-URL. Falls ihr lieber beim Bearbeiten der Homepage landen wollt, ersetzt "site" mit "pages/home".

Ich bin mir nicht sicher, welche HTML Tags RSS Reader unterstützen. Deshalb teste ich mit dieser Notiz einmal verschiedene Tags:

• Eine Liste
• mit mehreren Punkten

Eine Zwischenüberschrift

Das ist ein Zitat.

<web-component>Code-Test</web-component>

Funktioniert eine Linke mit <hr>?

Die Linie sollte über diesem Text angezeigt werden.

Wie sieht es mit <details> aus? Kann man Klapptexte in RSS Readern haben?

So das waren erstmal alle Tests. Die Tags, die nicht funktionieren, werde ich in Kirby für meine Notizen deaktivieren.

Seit wenigen Minuten läuft meine Seite über Kirby statt Astro. Bisher sollte alles größtenteils beim alten sein. Nur ein paar URLs haben sich geändert und werden jetzt auf neue weitergeleitet.

Außerdem haben sich die URLs von meinen RSS-Feeds geändert. Laut der RSS-Spezifikation sollten RSS-Reader einen 301 Redirect erkennen und automatisch auf die neue Feed-URL wechseln. Ob das wirklich funktioniert, wird diese Notiz zeigen. Wenn es klappt, sollte sie gleich in meinem Reader erscheinen. 🤞