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);
}
}
})();
Möchtest du mir antworten?
Schick mir eine Nachricht per E-Mail und lass uns ein Dialog beginnen. Du kannst mir auch per RSS oder Mastodon folgen.