feat: 1.0.0 baseline

README.md

@@ -1,5 +1,8 @@
 # BandWebsite
 
+![](https://badgen.net/badge/version/1.0.0/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.
 
 When cloned, you need to perform several operations so the website is fully customized to your need :
@@ -10,12 +13,12 @@ When cloned, you need to perform several operations so the website is fully cust
 - 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 and releases\*\* ;
+- 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.
 
 \* 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.
 
 Supported links to be displayed :
 Facebook, YouTube, Spotify, Apple Music, Deezer, Amazon Music, Tidal, SoundCloud, Bandcamp, Discogs, Genius, MusicBrainz, Instagram, Flickr, Github, LinkedIn

assets/json/band.json

@@ -203,5 +203,10 @@
       "name": "LinkedIn",
       "url": "https://www.linkedin.com/company/77052847/"
     }
-  ]
+  ],
+  "styles": {
+    "mainColor": "#56D45B",
+    "gradientStart": "#374737",
+    "gradientEnd": "#70CA72"
+  }
 }

index.html

@@ -59,7 +59,7 @@ <h3 id="works-section"></h3>
   <section id="releases"></section>
   <footer>
     <a href="https://messe-basse-production.com" target="_blank" rel="noreferrer noopener">Messe Basse Production</a>
-    <p>2022</p>
+    <p>2021 – 2023</p>
   </footer>
 </main>
 <div id="modal-overlay" class="modal-overlay"></div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bandwebsite",
-  "version": "0.2.1",
+  "version": "1.0.0",
   "description": "A template to make a band or artist website ",
   "keywords": [],
   "main": "src/bw.js",
@@ -20,28 +20,28 @@
   "author": "ArthurBeaulieu",
   "license": "GPL-3.0",
   "devDependencies": {
-    "@babel/core": "^7.19.3",
-    "@babel/preset-env": "^7.19.3",
-    "babel-loader": "^8.2.5",
+    "@babel/core": "^7.23.2",
+    "@babel/preset-env": "^7.23.2",
+    "babel-loader": "^9.1.3",
     "clean-webpack-plugin": "^4.0.0",
-    "css-loader": "^6.7.1",
-    "cssnano": "^5.1.13",
-    "eslint": "^8.24.0",
-    "eslint-webpack-plugin": "^3.2.0",
+    "css-loader": "^6.8.1",
+    "cssnano": "^6.0.1",
+    "eslint": "^8.52.0",
+    "eslint-webpack-plugin": "^4.0.1",
     "file-loader": "^6.2.0",
     "http-server": "^14.1.1",
-    "mini-css-extract-plugin": "^2.6.1",
-    "node-sass": "^7.0.3",
-    "postcss": "^8.4.16",
-    "postcss-import": "^15.0.0",
-    "postcss-loader": "^7.0.1",
-    "postcss-preset-env": "^7.8.2",
-    "sass-loader": "^13.0.2",
-    "stylelint": "^14.12.1",
-    "stylelint-webpack-plugin": "^3.3.0",
+    "mini-css-extract-plugin": "^2.7.6",
+    "node-sass": "^9.0.0",
+    "postcss": "^8.4.31",
+    "postcss-import": "^15.1.0",
+    "postcss-loader": "^7.3.3",
+    "postcss-preset-env": "^9.2.0",
+    "sass-loader": "^13.3.2",
+    "stylelint": "^15.11.0",
+    "stylelint-webpack-plugin": "^4.1.1",
     "url-loader": "^4.1.1",
-    "webpack": "^5.74.0",
-    "webpack-cli": "^4.10.0",
-    "webpack-merge": "^5.8.0"
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-merge": "^5.10.0"
   }
 }

src/bw.js

@@ -1,3 +1,4 @@
+import { Color, Solver } from './js/FilterGenerator.js';
 import './bw.scss';
 
 
@@ -11,13 +12,15 @@ class BW {
     this._lang = (['fr', 'es', 'de'].indexOf(navigator.language.substring(0, 2)) !== -1) ? navigator.language.substring(0, 2) : 'en';
     this._nls = null;
     this._band = null;
-    this._version = '0.2.1';
+    this._mainScroll = null;
+    this._version = '1.0.0';
 
     if (DEBUG === true) { console.log(`BandWebsite v${this._version} : Begin website initialization`); }
 
     this._fetchLang()
       .then(this._fetchBandInfo.bind(this))
       .then(this._init.bind(this))
+      .then(this._buildPage.bind(this))
       .catch(err => { // Error are displayed even if DEBUG is set to false, to notify end user to contact support
         console.error(`BandWebsite v${this._version} : Fatal error during initialization, please contact support :\n`, err);
       })
@@ -68,7 +71,29 @@ class BW {
 
 
   _init() {
-    if (DEBUG === true) { console.log(`5. Build HTML DOM depending on the page type`); }
+    if (DEBUG === true) { console.log(`5. Updatde css to take color and style value into account`); }
+    return new Promise((resolve, reject) => {
+      // Only update cs variables if precised in band.json, keep default otherwise
+      if (this._band.styles) {
+        document.documentElement.style.setProperty('--mainColor', this._band.styles.mainColor);
+        document.documentElement.style.setProperty('--gradientStart', this._band.styles.gradientStart);
+        document.documentElement.style.setProperty('--gradientEnd', this._band.styles.gradientEnd);
+        // Create filter css rule from main color color
+        const rgb = Color.hexToRgb(this._band.styles.mainColor);
+        const color = new Color(rgb[0], rgb[1], rgb[2]);
+        const solver = new Solver(color);
+        const result = solver.solve();
+        document.documentElement.style.setProperty('--imageFilter', result.filter);
+        resolve();
+      } else {
+        reject(new Error('Not styles found in JSON file'));
+      }
+    });
+  }
+
+
+  _buildPage() {
+    if (DEBUG === true) { console.log(`6. Build HTML DOM depending on the page type`); }
     return new Promise((resolve, reject) => {
       if (document.body.dataset.type === 'index') {
         this._buildIndexPage();
@@ -127,10 +152,19 @@ class BW {
       container.appendChild(label);
       document.getElementById('releases').appendChild(container);      
     }
-
-    new window.ScrollBar({
-      target: document.body
-    });
+    // Force timeout to wait for draw, then raf to display scroll
+    setTimeout(() => {
+      this._mainScroll = new window.ScrollBar({
+        target: document.body,
+        style: {
+          color: this._band.styles.mainColor
+        }
+      });
+      // Force raf after scroll creation to make scrollbar properly visible
+      requestAnimationFrame(() => {
+        this._mainScroll.updateScrollbar();
+      });
+    }, 100);
   }
 
 
@@ -284,10 +318,20 @@ class BW {
       </a>
       `;
     }
+    // Force timeout to wait for draw, then raf to display scroll
+    setTimeout(() => {
+      this._mainScroll = new window.ScrollBar({
+        target: document.getElementById('link-wrapper'),
+        style: {
+          color: this._band.styles.mainColor
+        }
+      });
+      // Force raf after scroll creation to make scrollbar properly visible
+      requestAnimationFrame(() => {
+        this._mainScroll.updateScrollbar();
+      });
+    }, 100);
 
-    new window.ScrollBar({
-      target: document.getElementById('link-wrapper')
-    });
   }
 
 

src/bw.scss

@@ -2,6 +2,11 @@
   --mg-lg: 3.6rem;
   --mg: 2.6rem;
   --transition: .2s;
+
+  --mainColor: #56D45B;
+  --gradientStart: #374737;
+  --gradientEnd: #70CA72;
+  --imageFilter: invert(27%) sepia(28%) saturate(5861%) hue-rotate(138.3deg) brightness(120%) contrast(70%);
 }
 
 * {
@@ -25,7 +30,7 @@ body {
 
 a {
   display: block;
-  color: #56D45B;
+  color: var(--mainColor);
   margin-bottom: 1.5rem;
   font-size: 1.5rem;
 }