refactor: upgrade deps and drop Gulp

.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

.editorconfig

@@ -1,12 +1,28 @@
-# This file is for unifying the coding style for different editors and IDEs
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
 # editorconfig.org
-
 root = true
 
 [*]
+# Change these settings to your own preference
+indent_style = tab
+indent_size = 2
+# We recommend you to keep these unchanged
+end_of_line = lf
 charset = utf-8
-end_of_line = crlf
-insert_final_newline = true
 trim_trailing_whitespace = true
-indent_style = space
-indent_size = 2
+insert_final_newline = true
+max_line_length = off
+quote_type = double
+
+[*.{html,js,css,scss}]
+block_comment_start = /**
+block_comment = *
+block_comment_end = */
+
+[*.{js}]
+quote_type = single
+max_line_length = 100
+
+[*.svg]
+insert_final_newline = false

.gitattributes

@@ -0,0 +1,5 @@
+# Enforce Unix newlines
+* text=auto eol=lf
+
+# Don't diff or textually merge source maps
+*.map binary

.github/workflows/css.yml

@@ -8,7 +8,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 14
+  NODE: 18
 
 jobs:
   css:
@@ -39,4 +39,4 @@ jobs:
         run: npm ci
 
       - name: Build CSS
-        run: npm run gulp compile
+        run: npm run build

.github/workflows/docs.yml

@@ -8,7 +8,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 14
+  NODE: 18
 
 jobs:
   docs:

.github/workflows/lint.yml

@@ -8,7 +8,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 14
+  NODE: 18
 
 jobs:
   lint:
@@ -39,4 +39,4 @@ jobs:
         run: npm ci
 
       - name: Lint
-        run: npm run gulp lint
+        run: npm run lint

.gitignore

@@ -1,59 +1,33 @@
-# Project
-docs/includes
+# See http://help.github.com/ignore-files/ for more about ignoring files.
 
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Dependency directories
-node_modules/
+# dependencies
+/node_modules
 
-# Optional npm cache directory
-.npm
+# IDEs and editors
+/.idea
+/.vscode
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
 
-# Optional eslint cache
-.eslintcache
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
 
-# Numerous always-ignore extensions
-*.diff
-*.err
+# misc
+/.sass-cache
 *.log
-*.orig
-*.rej
-*.swo
-*.swp
-*.vi
-*.zip
-*.tgz
-*~
 
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-
-# OS or Editor folders
-._*
-.cache
+# System Files
 .DS_Store
-.idea
-.vscode
-.project
-.settings
-.tmproj
-*.esproj
-*.sublime-project
-*.sublime-workspace
-nbproject
 Thumbs.db
-/.vscode/
+
+# Build
+docs/includes/

.htmlvalidate.json

@@ -0,0 +1,10 @@
+{
+	"extends": [
+		"html-validate:recommended"
+	],
+	"rules": {
+		"aria-label-misuse": "off",
+		"no-redundant-role": "off",
+		"no-inline-style": "off"
+	}
+}

.nvmrc

@@ -0,0 +1 @@
+18

.pa11yci.json

@@ -0,0 +1,28 @@
+{
+	"standard": "WCAG2AA",
+	"level": "warning",
+	"concurrency": 1,
+	"defaults": {
+		"reporters": [
+			[
+				"pa11y-ci-reporter-html",
+				{
+					"destination": "./reports"
+				}
+			]
+		],
+		"wait": 3000,
+		"runners": [
+			"axe"
+		],
+		"timeout": 100000,
+		"hideElements": "",
+		"ignore": [
+		],
+		"defaults": {
+			"chromeLaunchConfig": {
+				"executablePath": "/snap/bin/chromium"
+			}
+		}
+	}
+}

.stylelintrc.json

@@ -0,0 +1,10 @@
+{
+	"extends": "stylelint-config-recommended-scss",
+	"plugins": [
+		"stylelint-scss"
+	],
+	"rules": {
+		"no-descending-specificity": null,
+		"scss/comment-no-empty": null
+	}
+}

_site/js/script.js

@@ -0,0 +1,32 @@
+(function () {
+	"use strict";
+
+	// Toggle switch component
+	var switches = document.querySelectorAll('[role="switch"]');
+
+	switches.forEach(function (el) {
+		el.addEventListener('click', function () {
+			var checked = this.getAttribute('aria-checked') === 'true' || false;
+			this.setAttribute('aria-checked', !checked);
+
+			if (this.classList.contains('disable-css')) {
+				var chart = this.parentNode.nextElementSibling;
+				chart.classList.toggle('chaarts');
+			}
+		});
+	});
+
+	// Scrollable tables
+	var regions = document.querySelectorAll('.table-container');
+
+	if (window.matchMedia('(min-width: 30em)').matches) {
+		regions.forEach(function (el) {
+			var width = el.offsetWidth;
+			var table = el.querySelector('table');
+
+			if (table.offsetWidth > width) {
+				el.setAttribute('tabindex', '0');
+			}
+		});
+	}
+})(document);

_site/scss/print.scss

@@ -0,0 +1,63 @@
+@media print {
+	body > :not(main),
+	main > :not(.deck),
+	*:not(.card)::after,
+	*:not(.card)::before, {
+		display: none !important;
+	}
+
+	html,
+	body,
+	body > * {
+		background: none !important;
+	}
+
+	/**
+		* 1. No orphans
+		* 2. No widows
+		*/
+	p,
+	blockquote,
+	.deck .card {
+		orphans: 3; /* 1 */
+		widows: 3; /* 2 */
+	}
+
+	/* @note Avoid random page break */
+	ul,
+	ol,
+	blockquote,
+	.deck .card {
+		page-break-inside: avoid;
+		break-inside: avoid;
+	}
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	caption {
+		page-break-after: avoid;
+	}
+
+	/**
+		* @note Display links' target, except for images
+		*/
+	a::after {
+		content: " (" attr(href) ") ";
+		display: inline-block !important;
+	}
+
+	/* Hide anchors' target */
+	a::after img,
+	a[href^="#"]::after,
+	a[href^="javascript"]::after {
+		content: "";
+	}
+
+	abbr::after {
+		content: " (" attr(title) ") ";
+	}
+}

_site/scss/styles.scss

@@ -0,0 +1,19 @@
+@charset "UTF-8";
+
+/* ==================== */
+/* == Vendors
+/* ==================== */
+@use "sseeeedd/src/scss/styles";
+@use "vendors/prism";
+
+.mb-0 {
+	margin-bottom: 0 !important;
+}
+
+.pb-0 {
+	padding-bottom: 0 !important;
+}
+
+.fly-out [rel]::before {
+	content: "\1F30D\A0";
+}

src/scss/vendors/_prism.scss → _site/scss/vendors/_prism.scss

@@ -13,7 +13,7 @@ pre[data-line] {
 	padding: .25em;
 	margin-top: 3.15em;
 	background: white;
-  mix-blend-mode: soft-light;
+	mix-blend-mode: soft-light;
 	pointer-events: none;
 	line-height: inherit;
 	white-space: pre;
@@ -26,5 +26,5 @@ pre[data-line] {
 	left: .5em;
 	min-width: 1ch;
 	color: black;
-  font-weight: 700;
+	font-weight: 700;
 }