Bookmarklet Blogging
Kürzlich bin ich auf ein spannendes Bookmarklet bei Nicolas gestoßen. Es soll das Link-Blogging für alle erleichtern, die ein auf GitHub gehostetes Blog haben. Das Skript ist zwar noch nicht ganz perfekt, aber es hat mich dazu inspiriert, es weiterzuentwickeln. Hier ist meine Version des Bookmarklets (function() { // Funktion zum Erstellen eines "Slug" aus einem Text const slugify = text => { let str = text.toString(); // Den Text als Zeichenkette behandeln str = str.replaceAll("/", " "); // Schrägstriche (/) durch Leerzeichen ersetzen str = str.normalize("NFD"); // Unicode normalisieren (diakritische Zeichen trennen) str = str.replace(/[^\w\s-]+/g, ""); // Sonderzeichen entfernen (außer Buchstaben, Zahlen, Leerzeichen, Bindestriche) str = str.toLowerCase(); // In Kleinbuchstaben umwandeln str = str.replace(/\s+/g, " "); // Mehrere Leerzeichen auf ein einzelnes reduzieren str = str.trim(); // Führende und endende Leerzeichen entfernen str = str.replace(/ +/g, "-"); // Alle Leerzeichen durch Bindestriche ersetzen return str; // Slug zurückgeben }; // Titel der aktuellen Seite aus dem Dokument abrufen let pageTitle = window.document.title; // Falls ein Text markiert ist, diesen als "linkSelection" setzen, ansonsten leer let linkSelection = "getSelection" in window ? window.getSelection().toString().trim() : ""; // Inhalt für den Link ermitteln: // Zuerst den markierten Text verwenden, falls vorhanden, ansonsten eine Meta-Beschreibung, // oder den ersten Absatz im <main>, <article>, oder <p>-Tag let linkContent = linkSelection || window.document.querySelector("head meta[name=description]")?.content.trim() || window.document.querySelector("main p")?.textContent.trim() || window.document.querySelector("article p")?.textContent.trim() || window.document.querySelector("p")?.textContent.trim(); // Die URL der aktuellen Seite let linkUrl = window.location.href; // Eingabeaufforderung für den Link-Titel (Standardwert: Seiten-Titel) let title = window.prompt("Title of the link?", pageTitle); if (title !== null) { // Nur fortfahren, wenn der Benutzer einen Titel angegeben hat // Eingabeaufforderung für den Link-Slug (Standardwert: aus Titel generierter Slug) let slug = window.prompt("Slug of the link?", slugify(title)); if (slug !== null) { // Nur fortfahren, wenn der Benutzer einen Slug angegeben hat // Das aktuelle Datum und die Uhrzeit im ISO-Format abrufen und in lesbare Form bringen const currentDate = (new Date()).toISOString().replace("T", " ").replace(/\.\d{3}Z/, " +00:00"); // Dateiinhalt für den Blogeintrag erstellen let fileContent = `---\n` + `date: ${currentDate}\n` + `title: "${title}"\n` + `authors: "maik"\n` + `tags: []\n` + `---\n\n` + `[${title}](${linkUrl} "${title}") für ${linkUrl}\n\n` + `${linkContent ? linkContent.replaceAll("\n", "\n> ") : ""}\n`; // GitHub-URL für das Erstellen einer neuen Datei zusammenbauen let githubUrl = `https://github.com/Maik-Wi/blog/new/main/?` + `filename=${`content/notes/${currentDate.slice(0, 10)}-${slug}-index.md`}` + `&value=${encodeURIComponent(fileContent)}` + `&message=${encodeURIComponent(`New link: ${title}`)}`; // Die URL in einem neuen Fenster öffnen, sodass der Nutzer sie bei GitHub weiterbearbeiten kann window.open(githubUrl); } } })();