feat: 1.1.1 improve layout and pages, fix #4

README.md

@@ -1,24 +1,29 @@
 # BandWebsite
 
-![](https://badgen.net/badge/version/1.1.0/blue)
+![](https://badgen.net/badge/version/1.1.1/blue)
 [![License](https://img.shields.io/github/license/MesseBasseProduction/BandWebsite.svg)](https://github.com/MesseBasseProduction/BandWebsite/blob/main/LICENSE)
 
-A band's website template with a description, a page to listen tracks and finally, a link tree to share all of the band's links! Translated in FR, EN, ES, DE.
+A static website template for a band, providing pages where one can find the band's biography, a list of current and past members, a list of the band's releases and a set of medias. Additionnaly to this landing page, the template also provides a page to listen to tracks and finally, a link tree to share all of the band's links! Translated in French 🇫🇷, English 🇬🇧, Spanish 🇪🇸 and German 🇩🇪. This website was meant to be as light as possible, keeping it's assets to the minimum so the navigation is lightning fast (~50Ko of bunddled assets)!
 
-When cloned, you need to perform several operations so the website is fully customized to your need :
+# Get started
 
-- fill HTML files, mostly for title and description (head tag) ;
+For system administrator, here are the guidelines to fully customize this template website to your band's needs. Right after you cloned this repository, complete the following :
+
+- fill HTML files (`index.html`, `listen.html`, `tree.html`), mostly for title and description (head tag) ;
 - replace the band logo and the favicons\* in `assets/img/` ;
 - fill `assets/audio/` with mp3 extracts of the releases you want to make available to listeners ;
 - fill `assets/img/releases/` with releases' artworks ;
 - fill `assets/img/artists/` with band members' picture ;
 - fill the `assets/json/{lang}.json` with the band information ;
-- fill the `assets/json/band.json` with artist members, links, releases and styles\*\* ;
-- create your custom `index.html` file so it reflect the band's will.
+- fill the `assets/json/band.json` with artist members, links, releases, medias and styles\*\* ;
+
+\* *Favicon can be generated using a website such as [https://www.favicon-generator.org/](https://www.favicon-generator.org/).*
 
-\* Favicon can be generated using a website such as [https://www.favicon-generator.org/](https://www.favicon-generator.org/).
+\*\* *In the JSON files ; in links, you can erase links that are not relevant for the band. In the releases, links/moreLinks urls should be empty but don't erase them. In the tracks, composer or author can be empty (and will not be displayed).*
 
-\*\* In the JSON files ; in links, you can erase links that are not relevant for the band. In the releases, links/moreLinks urls should be empty but don't erase them. In the tracks, composer or author can be empty (and will not be displayed). For styles, you can define the main color to be used in pages, and define a darker one for gradient to be computed.
+Once these steps are completed, you're good to put this website on production. No specific need to bundle assets, but if you're willing to do so anyway, juste perform `npm install && npm run build` so assets are production-ready. In case you want to developp, and make webpack to listen to any updates in the `.scss` or `.js` files, you can use `npm run watch` and `npm run start` so a development http server is also running.
 
 Supported links to be displayed :
-Facebook, YouTube, Spotify, Apple Music, Deezer, Amazon Music, Tidal, SoundCloud, Bandcamp, Discogs, Genius, MusicBrainz, Instagram, Flickr, Github, LinkedIn
+Facebook, Instagram, Twitter, YouTube, Spotify, Apple Music, Deezer, Amazon Music, Tidal, SoundCloud, Bandcamp, Discogs, Genius, MusicBrainz, Flickr, Github, LinkedIn
+
+**Messe Basse Production, GPL-v3.0 -- 2022/2024**

assets/json/band.json

@@ -1,4 +1,11 @@
 {
+  "name": "NAC",
+  "bio": {
+    "en": "NAC is a Hard Rock/Progressive Rock band, founded in 1994 in Igny, France. Crafted around Pierrot and Elliot, the band's formation has often evolved to gradually consolidate from 2015. Its eclectic members put their interpretation at the service of their music; straightforward and raw.",
+    "fr": "NAC est un groupe de Hard Rock/Rock Progressif, fondé en 1994 à Igny, France. La formation du groupe a souvent évoluée, autour de Pierrot et Elliot pour progressivement se consolider à partir de 2015. Ses éclectiques membres mettent leur interprétation au service de leur musique ; brute et sans détour.",
+    "es": "NAC is a Hard Rock/Progressive Rock band, founded in 1994 in Igny, France. Crafted around Pierrot and Elliot, the band's formation has often evolved to gradually consolidate from 2015. Its eclectic members put their interpretation at the service of their music; straightforward and raw.",
+    "de": "NAC is a Hard Rock/Progressive Rock band, founded in 1994 in Igny, France. Crafted around Pierrot and Elliot, the band's formation has often evolved to gradually consolidate from 2015. Its eclectic members put their interpretation at the service of their music; straightforward and raw."
+  },
   "bandPicture": "Band.webp",
   "members": [
     {
@@ -11,7 +18,7 @@
         "de": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
         "es": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>"
       }, 
-      "roles": ["vocals"],
+      "roles": ["leadvocals"],
       "range": "2015-"
     }, {
       "fullName": "Pierre Toïgo",
@@ -373,7 +380,7 @@
           "url": ""
         }, {
           "type": "youtube",
-          "url": "https://www.youtube.com/watch?v=aZJlt92yi1o&list=PLp5D05IpZHwJ3H5UscRcUlvZptZc3p1lM"
+          "url": "https://www.youtube.com/watch?v=JPEKwYBWu4U&list=PLp5D05IpZHwKc4upT8elaHcabNvuo4cFl"
         }, {
           "type": "bandcamp",
           "url": "https://nacband.bandcamp.com/album/nac-featuring-tay-single"
@@ -513,6 +520,22 @@
       ]
     }
   ],
+  "medias": [
+    {
+      "type": "iframe",
+      "title": "NAC – Dystopie Live (Concert Complet)",
+      "link": "https://tube.mycozy.space/videos/embed/5a713c21-3093-457f-be5a-1951ea6c4ab0"
+    }, {
+      "type": "image",
+      "link": "./assets/img/artists/sample1.webp"
+    }, {
+      "type": "image",
+      "link": "./assets/img/artists/sample2.webp"
+    }, {
+      "type": "image",
+      "link": "./assets/img/artists/sample3.webp"
+    }
+  ],
   "links": [
     {
       "type": "spotify",

assets/json/de.json

@@ -1,8 +1,4 @@
 {
-  "band": {
-    "name": "Name der Musikgruppe",
-    "desc": "Beschreibung du groupe"
-  },
   "roles": {
     "leadvocals": "Hauptgesang",
     "backvocals": "Chöre",
@@ -16,7 +12,7 @@
   "treeLink": "Finden Sie uns im Internet",
   "musicians": "Die Musiker",
   "works": "Stücke",
-  "videos": "Videos",
+  "medias": "Durchschnitt",
   "pastMembers": "Frühere Mitglieder",
   "listenOnline": "Online anhören",
   "seeMore": "mehr sehen",
@@ -28,7 +24,6 @@
   "to": "bis",
   "since": "seit",
   "close": "Schließen",
-  "months": ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
   "lang": {
     "en": "🇬🇧 Englisch",
     "fr": "🇫🇷 Französisch",

assets/json/en.json

@@ -1,8 +1,4 @@
 {
-  "band": {
-    "name": "NAC",
-    "desc": "NAC is a Hard Rock/Progressive Rock band, founded in 1994 in Igny, France. Crafted around Pierrot and Elliot, the band's formation has often evolved to gradually consolidate from 2015. Its eclectic members put their interpretation at the service of their music; straightforward and raw."
-  },
   "roles": {
     "leadvocals": "Lead Singer",
     "backvocals": "Back Vocals",
@@ -16,7 +12,7 @@
   "treeLink": "Find us online",
   "musicians": "Musicians",
   "works": "Pieces",
-  "videos": "Videos",
+  "medias": "Medias",
   "learnMore": "Click to read more",
   "pastMembers": "Past members",
   "listenOnline": "Listen online",
@@ -28,7 +24,6 @@
   "to": "to",
   "since": "since",
   "close": "Close",
-  "months": ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
   "lang": {
     "en": "🇬🇧 English",
     "fr": "🇫🇷 French",

assets/json/es.json

@@ -1,8 +1,4 @@
 {
-  "band": {
-    "name": "Nombre de la banda",
-    "desc": "Descripción de la banda"
-  },
   "roles": {
     "leadvocals": "Voces Principales",
     "backvocals": "Coro",
@@ -16,7 +12,7 @@
   "treeLink": "Encuéntrenos en línea",
   "musicians": "Los Músicos",
   "works": "Las Obras",
-  "videos": "Vídeos",
+  "medias": "Medios",
   "pastMembers": "Miembros anteriores",
   "listenOnline": "Escuche en línea",
   "seeMore": "ver más",
@@ -28,7 +24,6 @@
   "to": "a",
   "since": "desde",
   "close": "Cerca",
-  "months": ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
   "lang": {
     "en": "🇬🇧 Inglés",
     "fr": "🇫🇷 Francés",

assets/json/fr.json

@@ -1,8 +1,4 @@
 {
-  "band": {
-    "name": "NAC",
-    "desc": "NAC est un groupe de Hard Rock/Rock Progressif, fondé en 1994 à Igny, France. La formation du groupe a souvent évoluée, autour de Pierrot et Elliot pour progressivement se consolider à partir de 2015. Ses éclectiques membres mettent leur interprétation au service de leur musique ; brute et sans détour."
-  },
   "roles": {
     "leadvocals": "Chant Principal",
     "backvocals": "Chœurs",
@@ -16,7 +12,7 @@
   "treeLink": "Retrouvez-nous en ligne",
   "musicians": "Les Musiciens",
   "works": "Les Œuvres",
-  "videos": "Vidéos",
+  "medias": "Médias",
   "learnMore": "Cliquez pour en savoir plus",
   "pastMembers": "Anciens membres",
   "listenOnline": "Écouter en ligne",
@@ -28,7 +24,6 @@
   "to": "à",
   "since": "depuis",
   "close": "Fermer",
-  "months": ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Decembre"],
   "lang": {
     "en": "🇬🇧 Anglais",
     "fr": "🇫🇷 Français",

index.html

@@ -43,36 +43,41 @@
   <meta name="twitter:image:src" content="./assets/img/logo-social.png"/>
 </head>
 <body data-type="index">
-<main class="bio">
-  <nav>
-    <img src="#" id="band-picture" class="band-picture" alt="band-picture">
-    <h1 id="band-name"></h1>
-    <h2 id="band-desc"></h2>
-    <div class="links">
-      <a href="./listen.html" id="listen-link" alt="listen-band"></a>
-      <a href="./tree.html" id="tree-link" alt="find-band-online"></a>
-    </div>
-  </nav>
-  <h3 id="musicians-section"></h3>
-  <section id="artists"></section>
-  <h3 id="works-section"></h3>
-  <section id="releases"></section>
-  <h3 id="videos-section"></h3>
-  <figure>
-    <iframe title="NAC – Dystopie Live (Concert Complet)" width="560" height="315" src="https://tube.mycozy.space/videos/embed/5a713c21-3093-457f-be5a-1951ea6c4ab0" frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"></iframe>
-  </figure>
-  <footer>
-    <a href="https://messe-basse-production.com" target="_blank" rel="noreferrer noopener">Messe Basse Production</a>
-    <p>2021 – 2023</p>
-  </footer>
-</main>
+<div id="content-wrapper" class="content-wrapper">
+  <main class="bio">
+    <nav>
+      <div class="nav-content">
+        <img src="#" id="band-picture" class="band-picture" alt="band-picture">
+        <h1 id="band-name"></h1>
+        <h2 id="band-desc"></h2>
+        <div class="links">
+          <a href="./listen.html" id="listen-link" alt="listen-band"></a>
+          <a href="./tree.html" id="tree-link" alt="find-band-online"></a>
+        </div>
+      </div>
+    </nav>
+    <h3 id="works-section"></h3>
+    <section id="releases"></section>
+    <h3 id="musicians-section"></h3>
+    <section id="artists"></section>
+    <h3 id="medias-section"></h3>
+    <figure id="medias"></figure>
+    <footer>
+      <div class="footer-content">
+        <a href="https://messe-basse-production.com" target="_blank" rel="noreferrer noopener">Messe Basse Production</a>
+        <p>2021 – <span id="current-year">2024</span></p>
+      </div>
+    </footer>
+  </main>    
+</div>
 <select id="lang-select">
   <option value="en"></option>
   <option value="fr"></option>
   <option value="es"></option>
   <option value="de"></option>
 </select>
 <div id="modal-overlay" class="modal-overlay"></div>
+<div id="loading-overlay" class="loading-overlay"></div>
 <script type="text/javascript" src="https://arthurbeaulieu.github.io/ScrollBar.js/dist/ScrollBar.bundle.js"></script>
 <script type="text/javascript" src="./assets/dist/BW.bundle.js"></script>
 <script type="text/javascript">window.BW = new BW();</script>

listen.html

@@ -62,35 +62,37 @@
   </div>
 </section>
 <section class="track-links">
-  <div id="release-pager" class="release-pager"></div>
-  <h1 id="release-title"></h1>
-  <h2><span id="release-from"></span> <span id="release-artist"></span></h2>
-  <p><b id="listen-online"></b> <span id="see-more-links"></span></p>
-  <div class="listen-online">
-    <a href="#" id="spotify" class="item" target="_blank" rel="noreferrer noopener">
-      <img src="./assets/img/listen/spotify.svg" alt="spotify-link">
-      <p>Spotify</p>
-    </a>
-    <a href="#" id="apple" class="item" target="_blank" rel="noreferrer noopener">
-      <img src="./assets/img/listen/apple.svg" alt="apple-link">
-      <p>Apple</p>
-    </a>
-    <a href="#" id="deezer" class="item" target="_blank" rel="noreferrer noopener">
-      <img src="./assets/img/listen/deezer.svg" alt="deezer-link">
-      <p>Deezer</p>
-    </a>
-    <a href="#" id="youtube" class="item" target="_blank" rel="noreferrer noopener">
-      <img src="./assets/img/listen/youtube.svg" alt="youtube-link">
-      <p>YouTube</p>
-    </a>
-    <a href="#" id="amazon" class="item" target="_blank" rel="noreferrer noopener">
-      <img src="./assets/img/listen/amazon.svg" alt="amazon-link">
-      <p>Amazon</p>
-    </a>
-    <a href="#" id="bandcamp" class="item" target="_blank" rel="noreferrer noopener">
-      <img src="./assets/img/listen/bandcamp.svg" alt="bandcamp-link">
-      <p>Bandcamp</p>
-    </a>
+  <div class="track-link-bg-overlay">
+    <div id="release-pager" class="release-pager"></div>
+    <h1 id="release-title"></h1>
+    <h2><span id="release-from"></span> <span id="release-artist"></span></h2>
+    <p><b id="listen-online"></b> <span id="see-more-links"></span></p>
+    <div class="listen-online">
+      <a href="#" id="spotify" class="item" target="_blank" rel="noreferrer noopener">
+        <img src="./assets/img/listen/spotify.svg" alt="spotify-link">
+        <p>Spotify</p>
+      </a>
+      <a href="#" id="apple" class="item" target="_blank" rel="noreferrer noopener">
+        <img src="./assets/img/listen/apple.svg" alt="apple-link">
+        <p>Apple</p>
+      </a>
+      <a href="#" id="deezer" class="item" target="_blank" rel="noreferrer noopener">
+        <img src="./assets/img/listen/deezer.svg" alt="deezer-link">
+        <p>Deezer</p>
+      </a>
+      <a href="#" id="youtube" class="item" target="_blank" rel="noreferrer noopener">
+        <img src="./assets/img/listen/youtube.svg" alt="youtube-link">
+        <p>YouTube</p>
+      </a>
+      <a href="#" id="amazon" class="item" target="_blank" rel="noreferrer noopener">
+        <img src="./assets/img/listen/amazon.svg" alt="amazon-link">
+        <p>Amazon</p>
+      </a>
+      <a href="#" id="bandcamp" class="item" target="_blank" rel="noreferrer noopener">
+        <img src="./assets/img/listen/bandcamp.svg" alt="bandcamp-link">
+        <p>Bandcamp</p>
+      </a>
+    </div>
   </div>
 </section>
 <section class="credits">
@@ -107,6 +109,7 @@ <h2><span id="release-from"></span> <span id="release-artist"></span></h2>
   <option value="de"></option>
 </select>
 <div id="modal-overlay" class="modal-overlay"></div>
+<div id="loading-overlay" class="loading-overlay"></div>
 <script type="text/javascript" src="https://arthurbeaulieu.github.io/ScrollBar.js/dist/ScrollBar.bundle.js"></script>
 <script type="text/javascript" src="./assets/dist/BW.bundle.js"></script>
 <script type="text/javascript">window.BW = new BW();</script>