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.
This commit is contained in:
George Cushen 2021-01-09 18:13:47 +00:00
commit d18b2c9def
11 changed files with 2236 additions and 71 deletions

3
wowchemy/.eslintignore Normal file
View file

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

19
wowchemy/.eslintrc.yml Normal file
View file

@ -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

View file

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

View file

@ -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"
]
}]
}
}

View file

@ -5,11 +5,13 @@
* Algolia based search algorithm.
**************************************************/
if (typeof instantsearch === 'function' && $('#search-box').length) {
function getTemplate(templateName) {
return document.querySelector(`#${templateName}-template`).innerHTML;
}
import {algoliaConfig, i18n, content_type} from '@params';
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]);

View file

@ -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);

View file

@ -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();
}

View file

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

View file

@ -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-name">
{{ printf "<a href=\"%s\">%s</a>" "{{relpermalink}}" "{{title}}" | safeHTML }}
<div class="article-metadata search-hit-type">{{"{{type}}"}}</div>
<p class="search-hit-description">{{"{{snippet}}"}}</p>
<div class="search-hit-content">
<div class="search-hit-name">
{{ printf "<a href=\"%s\">%s</a>" "{{relpermalink}}" "{{title}}" | safeHTML }}
<div class="article-metadata search-hit-type">{{"{{type}}"}}</div>
<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") }}
{{ printf "<script src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" (printf $js.instantsearch.url $js.instantsearch.version) $js.instantsearch.sri | safeHTML }}
{{ end }}
<script>
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>
{{ 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 }}
{{ end }}
{{ $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) }}
{{ 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 }}

View file

@ -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"
},
"repository": {
"type": "git",
"url": "git+https://github.com/wowchemy/wowchemy-hugo-modules.git"
},
"author": "George Cushen",
"license": "MIT",
"bugs": {
"url": "https://github.com/wowchemy/wowchemy-hugo-modules/issues"
},
"homepage": "https://wowchemy.com"
"test": "echo \"Error: no test specified\" && exit 1",
"lint:js": "eslint assets/js/",
"lint:style": "stylelint \"assets/{css,scss}/**/*.{css,scss}\"",
"format": "prettier --write \"*.{css,js,json,md,scss}\" \"./**/*.{css,js,json,md,scss}\"",
"stylelint-conflict-check": "stylelint-config-prettier-check"
}
}

File diff suppressed because it is too large Load diff