refactor: lint JS and SCSS

Add JS and style linters.
All JS linted and refactored.
TODO: Further SCSS refactoring required - temporary "no-descending-specificity" rule added.

wowchemy/.eslintignore

@@ -0,0 +1,3 @@
+**/*.min.js
+**/_vendor/
+**/vendor/

wowchemy/.eslintrc.yml

@@ -0,0 +1,19 @@
+env:
+  browser: true
+  es2021: true
+  jquery: true
+extends:
+  - 'eslint:recommended'
+  - 'prettier' # Prevent Prettier conflicts
+parserOptions:
+  ecmaVersion: 12
+  sourceType: module
+rules: {}
+globals:
+  hljs: true
+  imagesLoaded: true
+  Isotope: true
+  L: true # Global from maps library
+  GMaps: true
+  Fuse: true
+  instantsearch: true

wowchemy/.stylelintignore

@@ -0,0 +1,5 @@
+**/*.min.css
+**/vendor/
+**/_vendor/
+
+assets/scss/main.scss

wowchemy/.stylelintrc.json

@@ -0,0 +1,19 @@
+{
+  "plugins": [
+    "stylelint-scss"
+  ],
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-prettier"
+  ],
+  "rules": {
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": true,
+    "no-descending-specificity": null,
+    "font-family-no-missing-generic-family-keyword": [ true, {
+      "ignoreFontFamilies": [
+        "Font Awesome 5 Free"
+      ]
+    }]
+  }
+}

wowchemy/assets/js/algolia-search.js

@@ -5,11 +5,13 @@
  *  Algolia based search algorithm.
  **************************************************/
 
-if (typeof instantsearch === 'function' && $('#search-box').length) {
+import {algoliaConfig, i18n, content_type} from '@params';
-  function getTemplate(templateName) {
-    return document.querySelector(`#${templateName}-template`).innerHTML;
-  }
 
+function getTemplate(templateName) {
+  return document.querySelector(`#${templateName}-template`).innerHTML;
+}
+
+if (typeof instantsearch === 'function' && $('#search-box').length) {
   const options = {
     appId: algoliaConfig.appId,
     apiKey: algoliaConfig.apiKey,
@@ -59,7 +61,7 @@ if (typeof instantsearch === 'function' && $('#search-box').length) {
 
   // On render search results, localize the content type metadata.
   search.on('render', function () {
-    $('.search-hit-type').each(function (index) {
+    $('.search-hit-type').each(function () {
       let content_key = $(this).text();
       if (content_key in content_type) {
         $(this).text(content_type[content_key]);

wowchemy/assets/js/wowchemy-search.js

@@ -5,6 +5,8 @@
  *  In-built Fuse based search algorithm.
  **************************************************/
 
+import {search_config, i18n, content_type} from '@params';
+
 /* ---------------------------------------------------------------------------
  * Configuration.
  * --------------------------------------------------------------------------- */
@@ -177,7 +179,8 @@ if (typeof Fuse === 'function') {
     let fuse = new Fuse(search_index, fuseOptions);
 
     // On page load, check for search query in URL.
-    if ((query = getSearchQuery('q'))) {
+    let query = getSearchQuery('q')
+    if (query) {
       $('body').addClass('searching');
       $('.search-results').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 200);
       $('#search-query').val(query);

wowchemy/assets/js/wowchemy.js

@@ -5,7 +5,7 @@
  *  Core JS functions and initialization.
  **************************************************/
 
-import {hugoEnvironment} from '@params';
+import {hugoEnvironment, codeHighlighting} from '@params';
 
 import {fixMermaid} from './wowchemy-utils';
 
@@ -283,7 +283,7 @@ function initMap() {
       map.addMarker({
         lat: lat,
         lng: lng,
-        click: function (e) {
+        click: function () {
           let url = 'https://www.google.com/maps/place/' + encodeURIComponent(address) + '/@' + lat + ',' + lng + '/';
           window.open(url, '_blank');
         },
@@ -429,7 +429,7 @@ $(document).ready(function () {
 
   // Initialise code highlighting if enabled for this page.
   // Note: this block should be processed after the Mermaid code-->div conversion.
-  if (code_highlighting) {
+  if (codeHighlighting) {
     hljs.initHighlighting();
   }
 

wowchemy/assets/scss/wowchemy/_breadcrumb.scss

@@ -1,9 +1,9 @@
 .breadcrumb {
   font-size: 14px;
-  padding: 0rem;
+  padding: 0;
   background-color: transparent;
-  border-radius: 0rem;
+  border-radius: 0;
-  margin-bottom: 0rem;
+  margin-bottom: 0;
 }
 
 .breadcrumb-item.active {

wowchemy/layouts/partials/site_js.html

@@ -40,32 +40,6 @@
       {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" (printf $js.leaflet.url $js.leaflet.version) $js.leaflet.sri | safeHTML }}
     {{ end }}
 
-    {{/* Initialise code highlighting. */}}
-    {{ if $scr.Get "highlight_enabled" }}
-    <script>const code_highlighting = true;</script>
-    {{ else }}
-    <script>const code_highlighting = false;</script>
-    {{ end }}
-
-    {{ if ne site.Params.search.engine 0 }}
-    {{/* Configure search engine. */}}
-    {{ $min_length := site.Params.search.wowchemy.min_length | default 1 }}
-    {{ $threshold := site.Params.search.wowchemy.threshold | default 0.3 }}
-    {{ $search_i18n := dict "placeholder" (i18n "search_placeholder") "results" (i18n "search_results") "no_results" (i18n "search_no_results") }}
-    {{ $search_config := dict "indexURI" ("/index.json" | relLangURL) "threshold" $threshold "minLength" $min_length }}
-    <script>
-      const search_config = {{ $search_config | jsonify | safeJS }};
-      const i18n = {{ $search_i18n | jsonify | safeJS }};
-      const content_type = {
-        'post': {{ i18n "posts" }},
-        'project': {{ i18n "projects" }},
-        'publication' : {{ i18n "publications" }},
-        'event' : {{ i18n "talks" }},
-        'slides' : {{ i18n "slides" | default (i18n "btn_slides") }}
-        };
-    </script>
-    {{ end }}
-
     {{/* Load hash anchors for documentation pages. */}}
     {{ if in (slice "book" "docs") .Type }}
     {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" (printf $js.anchor.url $js.anchor.version) $js.anchor.sri | safeHTML }}
@@ -78,14 +52,14 @@
     {{/* Fuse search result template. */}}
     <script id="search-hit-fuse-template" type="text/x-template">
       <div class="search-hit" id="summary-{{"{{key}}"}}">
-      <div class="search-hit-content">
+        <div class="search-hit-content">
-        <div class="search-hit-name">
+          <div class="search-hit-name">
-          {{ printf "<a href=\"%s\">%s</a>" "{{relpermalink}}" "{{title}}" | safeHTML }}
+            {{ printf "<a href=\"%s\">%s</a>" "{{relpermalink}}" "{{title}}" | safeHTML }}
-          <div class="article-metadata search-hit-type">{{"{{type}}"}}</div>
+            <div class="article-metadata search-hit-type">{{"{{type}}"}}</div>
-          <p class="search-hit-description">{{"{{snippet}}"}}</p>
+            <p class="search-hit-description">{{"{{snippet}}"}}</p>
+          </div>
         </div>
       </div>
-      </div>
     </script>
     {{ else if eq site.Params.search.engine 2 }}
     {{/* Algolia search result template. */}}
@@ -109,18 +83,12 @@
     {{ end }}
 
     {{/* Algolia search engine. */}}
+    {{ $algoliaConfig := dict }}
     {{ if eq site.Params.search.engine 2 }}
-    {{ if ($scr.Get "use_cdn") }}
+      {{ if ($scr.Get "use_cdn") }}
-    {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" (printf $js.instantsearch.url $js.instantsearch.version) $js.instantsearch.sri | safeHTML }}
+        {{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" (printf $js.instantsearch.url $js.instantsearch.version) $js.instantsearch.sri | safeHTML }}
-    {{ end }}
+      {{ end }}
-    <script>
+      {{ $algoliaConfig = dict "appId" (site.Params.search.algolia.app_id | default "") "apiKey" (site.Params.search.algolia.api_key | default "") "indexName" (site.Params.search.algolia.index_name | default "") "poweredBy" (site.Params.search.algolia.show_logo | default false) }}
-      const algoliaConfig = {
-        appId: {{ site.Params.search.algolia.app_id }},
-        apiKey: {{ site.Params.search.algolia.api_key }},
-        indexName: {{ site.Params.search.algolia.index_name }},
-        poweredBy: {{ site.Params.search.algolia.show_logo | default false }}
-      };
-    </script>
     {{ end }}
 
     {{/* Netlify Identity integration. */}}
@@ -152,20 +120,31 @@
     <script id="dsq-count-scr" src="https://{{site.Params.comments.disqus.shortname}}.disqus.com/count.js" async></script>
     {{ end }}
 
+    {{ $js_search_params := dict }}
+    {{ if ne site.Params.search.engine 0 }}
+      {{/* Configure search engine. */}}
+      {{ $min_length := site.Params.search.wowchemy.min_length | default 1 }}
+      {{ $threshold := site.Params.search.wowchemy.threshold | default 0.3 }}
+      {{ $search_config := dict "indexURI" ("/index.json" | relLangURL) "threshold" $threshold "minLength" $min_length }}
+      {{ $search_i18n := dict "placeholder" (i18n "search_placeholder") "results" (i18n "search_results") "no_results" (i18n "search_no_results") }}
+      {{ $content_types := dict "post" (i18n "posts") "project" (i18n "projects") "publication" (i18n "publications") "event" (i18n "talks") "slides" (i18n "slides") }}
+      {{ $js_search_params = dict "search_config" $search_config "algoliaConfig" $algoliaConfig "i18n" $search_i18n "content_type" $content_types }}
+    {{ end }}
+
     {{ $js_license := printf "/*! Wowchemy v%s | https://wowchemy.com/ */\n" site.Data.wowchemy.version }}
     {{ $js_license := $js_license | printf "%s/*! Copyright 2016-present George Cushen (https://georgecushen.com/) */\n" }}
     {{ $js_license := $js_license | printf "%s/*! License: https://github.com/wowchemy/wowchemy-hugo-modules/blob/master/LICENSE.md */\n" }}
     {{ $js_bundle_head := $js_license | resources.FromString "js/bundle-head.js" }}
     {{ $js_linebreak := "\n" | resources.FromString "js/linebreak.js" }}{{/* Fix no line break after Bootstrap JS causing error. */}}
-    {{ $js_params := dict "hugoEnvironment" hugo.Environment }}
+    {{ $js_params := dict "hugoEnvironment" hugo.Environment "codeHighlighting" ($scr.Get "highlight_enabled" | default false) }}
     {{ $js_academic := resources.Get "js/wowchemy.js" | js.Build (dict "params" $js_params) }}
     {{ $js_bootstrap := resources.Get "js/_vendor/bootstrap.bundle.js" }}
     {{ $js_bundle := slice $js_bootstrap $js_linebreak $js_academic }}
     {{ if eq site.Params.search.engine 1 }}
-      {{ $js_academic_search := resources.Get "js/wowchemy-search.js" }}
+      {{ $js_academic_search := resources.Get "js/wowchemy-search.js" | js.Build (dict "params" $js_search_params) }}
       {{ $js_bundle = $js_bundle | append $js_academic_search }}
     {{ else if eq site.Params.search.engine 2 }}
-      {{ $js_algolia_search := resources.Get "js/algolia-search.js" }}
+      {{ $js_algolia_search := resources.Get "js/algolia-search.js" | js.Build (dict "params" $js_search_params) }}
       {{ $js_bundle = $js_bundle | append $js_algolia_search }}
     {{ end }}
     {{ range site.Params.plugins_js }}

wowchemy/package.json

@@ -2,25 +2,35 @@
   "name": "wowchemy",
   "version": "1.0.0",
   "description": "The Page Builder for Hugo",
+  "author": "George Cushen",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/wowchemy/wowchemy-hugo-modules/issues"
+  },
+  "homepage": "https://wowchemy.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wowchemy/wowchemy-hugo-modules.git"
+  },
   "main": "index.js",
   "dependencies": {
     "bootstrap": "^4.4.1",
     "instant.page": "^5.1.0"
   },
   "devDependencies": {
-    "prettier": "2.2.1"
+    "eslint": "^7.17.0",
+    "eslint-config-prettier": "^7.1.0",
+    "prettier": "2.2.1",
+    "stylelint": "^13.8.0",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-standard": "^20.0.0",
+    "stylelint-scss": "^3.18.0"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
-  },
+    "lint:js": "eslint assets/js/",
-  "repository": {
+    "lint:style": "stylelint \"assets/{css,scss}/**/*.{css,scss}\"",
-    "type": "git",
+    "format": "prettier --write \"*.{css,js,json,md,scss}\" \"./**/*.{css,js,json,md,scss}\"",
-    "url": "git+https://github.com/wowchemy/wowchemy-hugo-modules.git"
+    "stylelint-conflict-check": "stylelint-config-prettier-check"
-  },
+  }
-  "author": "George Cushen",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/wowchemy/wowchemy-hugo-modules/issues"
-  },
-  "homepage": "https://wowchemy.com"
 }