pushtape cassette
1.0.0
Pushtape Cassette ist ein leichtes Framework zum Erstellen besserer Musik-Webanwendungen. Erstellen Sie eine Kassette Ihrer Musik und rendern Sie in Sekundenschnelle eine vollständige Musik-Web-App mit einem persistenten Musik-Player.
Dieses Projekt erstellt eine statische Musik-Webanwendung, die in eine beliebige Anzahl von Backend-Technologien integriert werden kann: Flatfiles, Wordpress/Drupal, JS Frameworks, Python und Ruby. Das Schlüsselelement, das dieser Idee zugrunde liegt, ist die Datei „cassette.json“, ein tragbares Diskografieformat. Diese Datei fungiert wie ein einziger umfassender Endpunkt – und von diesem Endpunkt aus wird Javascript verwendet, um mithilfe verschiedener Mikrobibliotheken eine Einzelseitenanwendung zu erstellen.
python dub.py aus oder aktualisieren Sie „cassette.json“ manuellWenn Sie die App aus einem Unterverzeichnis des Dokumentstammverzeichnisses ausführen, ändern Sie in index.html das Basis-Tag in:
<base href="/subdirectory/" />
Alternativ können Sie auch alle Assets über absolute Pfade laden.
$ cd pushtape-cassette
$ python dub.py
Das Build-Skript generiert automatisch eine Cassette.json basierend auf den Dateien im Arbeitsverzeichnis. Es soll lokal in der Befehlszeile ausgeführt werden. Wenn Ihr Server jedoch für die Ausführung von Python-Skripts konfiguriert ist, können Sie versuchen, es über den Browser auszuführen oder eine Crontab einzurichten. Hinweise:
releases/artist-name/release-nameWenn Sie die Hash-Nummer aus den URL-Routen entfernen und stattdessen die History-API verwenden möchten, legen Sie in index.html app.settings.cleanURLs auf true fest. Beachten Sie, dass die Ausführung der App mit aktivierter Verlaufs-API vom Dokumentstamm aus empfohlen wird, da dadurch alle relativen Linkprobleme behoben werden.
Hinweis: Sie können die Schritte 3 und 4 überspringen, wenn Sie das Build-Skript dub.py verwenden.
| Eigentum | Typ | Beschreibung |
|---|---|---|
| lastBuild | Zeitstempel | Eine Möglichkeit, nachzuverfolgen, wann die Datei zuletzt erstellt oder geändert wurde. |
| Seiten | Objekt | Enthält Schlüssel:Wert-Paare für statische Seiten auf Ihrer Website. Der Schlüssel definiert den JS-Routerpfad der ersten Ebene, also „about“. Der Wert enthält den URL-Speicherort für ein Markdown-Dokument. Die URL kann relativ oder absolut sein. Wenn Ihr Server Dokumente mit JSON/JSONP zurückgibt, legen Sie „format“ fest: „json“. Wenn Sie einen externen Link einbinden und den JS-Router umgehen müssen, legen Sie „Typ“ fest: „extern“. |
| Veröffentlichungen | Objekt | Enthält Schlüssel:Wert-Paare, die die verfügbaren Musikveröffentlichungen definieren. Ein Schlüssel definiert den JS-Router-Pfad und sollte ausschließlich aus Kleinbuchstaben ohne Leerzeichen bestehen, z. B. Albumtitel oder Künstler/Albumtitel. Der vollständig generierte Pfad lautet am Ende „Veröffentlichung/Albumtitel“ oder „Veröffentlichung/Künstler/Albumtitel“. Der entsprechende Wert definiert die Eigenschaften für diese Version. Sie sollten mindestens die URL für Artwork.jpg und Notes.md angeben (relativ oder absolut, optional kann das Format als JSON angegeben werden). Die Eigenschaft „Playlist“ muss ein Pfad zu einer gültigen JSPF-Playlist-Datei sein, die die Titelreihenfolge und den Speicherort von MP3-Dateien sowie alle anderen Metadaten angibt. |
| Eigentum | Typ | Beschreibung |
|---|---|---|
| app.settings.cassettePath | Zeichenfolge | Standardmäßig lädt application.js den lokalen Cassette.json-Pfad. Sie können den Pfad zu Cassette.json überschreiben, indem Sie diese globale Variable festlegen, bevor Sie application.js laden. |
| app.settings.homePage | Zeichenfolge | Dieser Wert gibt an, welche Seite standardmäßig geladen werden soll. Der Pfad muss im JS-Router registriert sein. |
| app.settings.cleanURLs | Boolescher Wert | Bei „false“ werden Hash-#-URLs verwendet. Wenn „true“, verarbeitet die History-API saubere URLs. |
Bekannte Probleme:
Einschränkungen:
Beispielcassette.json:
{
"lastBuild": {},
"pages": {
"releases" : {},
"about" : {"location" : "pages/about.md"},
"shows" : {"location" : "pages/shows.md"},
"external-link" : {"title": "Soundcloud", "location" : "http://www.example.com", "type" : "external"}
},
"releases": {
"example-release": {
"title" : "Cosmic Voyage",
"playlist" : "releases/example-release/tracklist.jspf",
"artwork" : "releases/example-release/artwork.jpg",
"notes" : "releases/example-release/notes.md"
},
"example-release-two": {
"title" : "Bird Life",
"playlist" : "releases/example-release-two/tracklist.jspf",
"artwork" : "releases/example-release-two/artwork.jpg",
"notes" : "releases/example-release-two/notes.md"
}
}
}
| URL-Pfad | Beschreibung |
|---|---|
| / | Wenn kein Pfad eingegeben wird, wird die Standard-Homepage geladen. |
| /[Seitentitel] | Dadurch wird der Markdown für eine Seite analysiert und angezeigt, wie in Cassette.json definiert. |
| /Veröffentlichungen | Eine Liste aller Veröffentlichungen mit Artwork und Namen, mit Hyperlink zur jeweiligen Veröffentlichungsseite. |
| /release/[Veröffentlichungstitel] /release/[Künstlername]/[Veröffentlichungstitel] | Zeigt alle Informationen zu einer einzelnen Veröffentlichung an: Cover, abspielbare Tracklist und Notizen. |
| Problem | Schritte |
|---|---|
| Leere Seite oder fehlendes CSS/JS | Überprüfen Sie Ihre Basis-URL noch einmal in index.html. Wenn Sie Schwierigkeiten haben, den richtigen Pfad herauszufinden, kann der Serverpfad manchmal mithilfe des Chrome-Inspektors abgeleitet werden. |
| Probleme mit Cross-Origin-Anfragen (Remote-Inhalte werden nicht geladen) | Beim Umgang mit Remote-Cross-Origin-Anfragen muss gültiges JSONP zurückgegeben werden und Anfragen müssen korrekt formatiert sein. 1. Sie müssen ?callback=? in der URL, also http://example.com/cassette.json?callback=? 2: Die Antwort vom Server muss JSONP sein, nicht nur normales JSON. Insbesondere beim Remote-Laden von „cassette.json“, „jspf“, „notes.md“ und „pages.md“ können ursprungsübergreifende Probleme auftreten. Alternativ können Sie alle Assets einfach lokal laden, um die Einrichtung einer JSONP-Problemumgehung zu vermeiden. |
| Die Website wird von Suchmaschinen nicht indiziert | Abgesehen von der Überprüfung Ihrer robots.txt-Datei und anderen Best Practices ist dies ein bekanntes Problem bei Frameworks, die Javascript zum Rendern von Seiteninhalten verwenden. Die einfachste Lösung besteht darin, einen Dienst wie prerender.io zu verwenden, um gerenderte HTML-Seiten zwischenzuspeichern und bereitzustellen. Ich empfehle die Installation des prerender.io-Tokens über Apache. Hier ist ein grober Überblick darüber, wie Ihre .htaccess-Datei aussehen könnte (Sie müssen TOKEN_VALUE und http://example.com für Ihre Website ändern). |
Viele Musikseiten sind ziemlich statisch, haben aber knifflige Frontend-Anforderungen. Die beste Musik-UX ermöglicht ein unterbrechungsfreies Musikhörerlebnis, während andere Aufgaben wie das Lesen von Linernotes, das Durchsuchen anderer Musik usw. ausgeführt werden. Normalerweise bedeutet dies, dass ein herkömmliches CMS/eine statische Website mit AJAX modifiziert wird oder mithilfe von JS eine vollständige Lösung von Grund auf erstellt wird. Der Aufbau und die Wartung bereiten einem schnell Kopfzerbrechen, vor allem auf lange Sicht. Durch die Schaffung eines entkoppelten Frontend-Frameworks wird eine bessere Trennung der Anliegen ermöglicht und der langfristige Aufwand für den Aufbau und die Wartung einer Website verringert. Darüber hinaus ist die Datenportabilität durch die Nutzung von JSPF und Cassette.json, einem tragbaren Diskografieformat, kein nachträglicher Gedanke – sie ist von Anfang an in die Anwendung integriert.
Ich habe mich für Mikrobibliotheken entschieden, weil die Anforderungen zum Rendern einer statischen Musikanwendung normalerweise recht gering sind und ich die Abhängigkeit von einem Single-Page-Application (SPA)-Framework eines Drittanbieters vermeiden wollte. Da ich außerdem Mikrobibliotheken verwendet habe, ist es einfacher, auszuwählen, was man möchte. Wenn Ihnen beispielsweise das von mir ausgewählte Vorlagensystem, Routing oder die bidirektionalen Bindungsbibliotheken nicht gefallen, können Sie sie durch Ihre bevorzugte JS-Bibliothek/Ihr bevorzugtes JS-Framework ersetzen.
