pushtape cassette
1.0.0
Pushtape Cassette est un framework léger permettant de créer de meilleures applications Web musicales. Créez une cassette de votre musique et créez une application Web musicale complète en quelques secondes, dotée d'un lecteur de musique persistant.
Ce projet crée une application Web musicale statique qui peut être intégrée à un certain nombre de technologies backend : fichiers plats, Wordpress/Drupal, JS Frameworks, Python et Ruby. L'élément clé qui alimente cette idée est le fichier cassette.json, un format de discographie portable. Ce fichier agit comme un point de terminaison complet unique - et à partir de ce point de terminaison, javascript est utilisé pour créer une application d'une seule page à l'aide de diverses micro-bibliothèques.
python dub.py ou mettez à jour cassette.json manuellementSi vous exécutez l'application à partir d'un sous-répertoire de la racine du document, dans index.html, remplacez la balise de base par :
<base href="/subdirectory/" />
ou bien chargez tous les actifs en utilisant des chemins absolus.
$ cd pushtape-cassette
$ python dub.py
Le script de construction générera automatiquement un fichier cassette.json basé sur les fichiers du répertoire de travail. Il est destiné à être exécuté localement sur la ligne de commande, mais si votre serveur est configuré pour exécuter des scripts Python, vous pouvez essayer de l'exécuter à partir du navigateur ou configurer une crontab. Remarques :
releases/artist-name/release-nameSi vous souhaitez supprimer le hachage # des routes d'URL et utiliser l'API History à la place, dans index.html, définissez app.settings.cleanURLs sur true. Notez que l'exécution de l'application avec l'API d'historique activée à partir de la racine du document est encouragée car elle résout tous les problèmes de liens relatifs.
Remarque : vous pouvez ignorer les étapes 3 et 4 si vous utilisez le script de construction dub.py.
| Propriété | Taper | Description |
|---|---|---|
| dernière construction | horodatage | Un moyen de savoir quand le fichier a été créé ou modifié pour la dernière fois. |
| pages | objet | Contient des paires clé:valeur pour les pages statiques de votre site. La clé définit le chemin du routeur JS de premier niveau, c'est-à-dire « à propos ». La valeur contient l'emplacement URL d'un document markdown. L'URL peut être relative ou absolue. Si votre serveur renvoie des documents en utilisant JSON/JSONP, définissez "format" : "json". Si vous devez inclure un lien externe et contourner le routeur JS, définissez "type" : "external". |
| sorties | objet | Contient des paires clé:valeur définissant les versions musicales disponibles. Une clé définit le chemin du routeur JS et doit être entièrement en minuscules sans espaces, c'est-à-dire titre de l'album ou artiste/titre de l'album. Le chemin entièrement généré finit par être version/titre-album ou version/artiste/titre-album. La valeur correspondante définit les propriétés de cette version. Au minimum, vous devez spécifier l'URL de artwork.jpg et notes.md (relative ou absolue, vous pouvez éventuellement spécifier le format json). La propriété playlist doit être un chemin d’accès vers un fichier de playlist JSPF valide, qui spécifie l’ordre des pistes et l’emplacement des fichiers mp3, ainsi que toute autre métadonnée. |
| Propriété | Taper | Description |
|---|---|---|
| app.settings.cassettePath | chaîne | Par défaut, application.js chargera le chemin cassette.json local. Vous pouvez remplacer le chemin d'accès à cassette.json en définissant cette variable globale avant de charger application.js. |
| app.settings.homePage | chaîne | Cette valeur spécifie quelle page doit se charger par défaut. Le chemin doit être enregistré dans le routeur JS. |
| app.settings.cleanURLs | booléen | Si faux, les URL de hachage sont utilisées. Si c'est vrai, l'API History gérera les URL propres. |
Problèmes connus :
Limites:
Exemple de cassette.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"
}
}
}
| Chemin de l'URL | Description |
|---|---|
| / | Si aucun chemin n'est saisi, la page d'accueil par défaut est chargée. |
| /[titre de la page] | Ceci analyse et affiche la démarque d'une page telle que définie dans cassette.json. |
| /versions | Une liste de toutes les versions avec illustration et nom, avec un lien hypertexte vers la page de la version individuelle. |
| /release/[titre-version] /release/[nom-artiste]/[titre-version] | Affiche toutes les informations d'une seule version : illustrations, liste des pistes jouables et notes. |
| Problème | Mesures |
|---|---|
| Page vierge ou CSS/JS manquant | Vérifiez votre URL de base dans index.html. Si vous ne parvenez pas à trouver le bon chemin, le chemin du serveur peut parfois être déduit à l'aide de l'inspecteur Chrome. |
| Problèmes de requêtes cross-origin (contenu distant ne se charge pas) | Lors du traitement de requêtes d'origine croisée distantes, un JSONP valide doit être renvoyé et les requêtes doivent être formatées correctement. 1. Vous devez transmettre ?callback=? dans l'URL, c'est-à-dire http://example.com/cassette.json?callback=? 2 : La réponse du serveur doit être JSONP, pas seulement du JSON standard. En particulier, des problèmes d'origine croisée peuvent survenir lors du chargement à distance de cassette.json, jspf, notes.md et pages.md. Alternativement, vous pouvez simplement charger tous les actifs localement pour éviter d'avoir à configurer une solution de contournement JSONP. |
| Le site n'est pas indexé par les moteurs de recherche | Outre la vérification de votre robots.txt et d'autres bonnes pratiques, il s'agit d'un problème connu avec les frameworks qui utilisent Javascript pour afficher le contenu des pages. La solution la plus simple consiste à utiliser un service tel que prerender.io pour mettre en cache et servir les pages HTML rendues. Je recommande d'installer le jeton prerender.io via Apache. Voici un aperçu de ce à quoi pourrait ressembler votre .htaccess (vous devrez modifier TOKEN_VALUE et http://example.com pour votre site). |
De nombreux sites de musique sont assez statiques mais ont des exigences complexes en matière d'interface. La meilleure UX musicale permet une expérience d'écoute musicale ininterrompue tout en effectuant d'autres tâches telles que la lecture des notes de doublure, la navigation sur d'autres musiques, etc. Cela signifie généralement AJAXifier un CMS/site statique traditionnel ou créer une solution complète à partir de zéro à l'aide de JS. Cela devient vite un casse-tête à construire et à entretenir, surtout sur le long terme. En créant un cadre frontal découplé, il permet une meilleure séparation des préoccupations et réduit les efforts à long terme requis pour créer et maintenir un site. De plus, en tirant parti de JSPF et de cassette.json, un format de discographie portable, la portabilité des données n'est pas une réflexion secondaire : elle est intégrée à l'application dès le début.
J'ai choisi les micro-bibliothèques parce que les exigences de rendu d'une application musicale statique sont généralement assez modestes et je voulais éviter de dépendre d'un framework tiers d'application à page unique (SPA). De plus, comme j'ai utilisé des micro-bibliothèques, cela facilite la sélection de ce que vous voulez. Par exemple, si vous n'aimez pas le système de modèles, le routage ou les bibliothèques de liaison bidirectionnelle que j'ai choisi, vous pouvez les remplacer par votre bibliothèque/framework JS préféré.
