diff --git a/.eslintrc.json b/.eslintrc.json index d693c7a..4539159 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,7 +1,16 @@ { - "extends": "airbnb-base", + "plugins": [ + "prettier" + ], + "extends": [ + "airbnb-base", + "prettier" + ], "env": { "browser": true, "jest": true + }, + "rules": { + "prettier/prettier": "error" } } diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..bf357fb --- /dev/null +++ b/.prettierrc @@ -0,0 +1,3 @@ +{ + "trailingComma": "all" +} diff --git a/.stylelintrc b/.stylelintrc index 9c1a2a3..c35273b 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -1,6 +1,13 @@ { - "extends": [ "stylelint-config-standard" ], + "plugins": [ + "stylelint-prettier" + ], + "extends": [ + "stylelint-config-standard", + "stylelint-prettier/recommended" + ], "rules": { + "prettier/prettier": true, "selector-pseudo-element-colon-notation": "single" } } diff --git a/build/imagemin.js b/build/imagemin.js index cd8bdb4..136815d 100644 --- a/build/imagemin.js +++ b/build/imagemin.js @@ -1,11 +1,11 @@ -const { writeFile } = require('fs'); -const { resolve } = require('path'); -const imagemin = require('imagemin'); -const imageminPngquant = require('imagemin-pngquant'); -const imageminGifsicle = require('imagemin-gifsicle'); -const imageminJpegtran = require('imagemin-jpegtran'); +const { writeFile } = require("fs"); +const { resolve } = require("path"); +const imagemin = require("imagemin"); +const imageminPngquant = require("imagemin-pngquant"); +const imageminGifsicle = require("imagemin-gifsicle"); +const imageminJpegtran = require("imagemin-jpegtran"); -imagemin(['images/*.{png,jpg,gif}'], 'theme/images', { +imagemin(["images/*.{png,jpg,gif}"], "theme/images", { plugins: [ imageminPngquant({ quality: [0.65, 0.8], @@ -16,10 +16,10 @@ imagemin(['images/*.{png,jpg,gif}'], 'theme/images', { imageminJpegtran(), ], }) - .then((files) => { - files.forEach((file) => { - const path = resolve(__dirname, '../', file.path); - writeFile(path, file.data, (error) => { + .then(files => { + files.forEach(file => { + const path = resolve(__dirname, "../", file.path); + writeFile(path, file.data, error => { if (error) { process.stdout.write(`${error}\n`); process.exit(1); @@ -28,7 +28,7 @@ imagemin(['images/*.{png,jpg,gif}'], 'theme/images', { }); }); }) - .catch((error) => { + .catch(error => { process.stderr.write(`${error}\n`); process.exit(1); }); diff --git a/build/serve.js b/build/serve.js index 8e0c968..5bd2f5a 100644 --- a/build/serve.js +++ b/build/serve.js @@ -1,10 +1,10 @@ -const { resolve } = require('path'); -const { execSync } = require('child_process'); -const { upAll, stop } = require('docker-compose'); -const browsersync = require('browser-sync'); -const mysql = require('mysql'); +const { resolve } = require("path"); +const { execSync } = require("child_process"); +const { upAll, stop } = require("docker-compose"); +const browsersync = require("browser-sync"); +const mysql = require("mysql"); -const name = 'windycoys'; +const name = "windycoys"; const dockerOptions = { cwd: resolve(__dirname), @@ -12,15 +12,15 @@ const dockerOptions = { }; const browserSyncOptions = { - files: ['theme/**/*'], + files: ["theme/**/*"], watchtask: true, open: false, }; const mysqlConfig = { - user: 'root', - password: 'password', - database: 'wordpress', + user: "root", + password: "password", + database: "wordpress", }; process.env.COMPOSE_PROJECT_NAME = name; @@ -30,7 +30,7 @@ const getIpAddr = function getIpAddr(id) { return execSync( `docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' ${id}`, ) - .toString('utf8') + .toString("utf8") .trim(); }; @@ -42,7 +42,7 @@ const updateUriData = function updateUriData(wordpress, db) { const query = `UPDATE wp_options SET option_value='http://${wordpress}' WHERE option_name in ('siteurl', 'home')`; - con.query(query, (error) => { + con.query(query, error => { if (error) { process.stderr.write(`Error: ${error.sqlMessage}\n`); process.exit(1); @@ -56,27 +56,27 @@ const updateUriData = function updateUriData(wordpress, db) { const exitHandler = function exitHandler() { stop(dockerOptions).then( () => { - process.stdout.write('\n'); + process.stdout.write("\n"); process.exit(); }, - (err) => { + err => { process.stderr.write(`Error: ${err.message}\n`); process.exit(1); }, ); }; -process.on('beforeExit', exitHandler.bind()); -process.on('SIGINT', exitHandler.bind()); -process.on('SIGUSR1', exitHandler.bind()); -process.on('SIGUSR2', exitHandler.bind()); -process.on('uncaughtException', exitHandler.bind()); +process.on("beforeExit", exitHandler.bind()); +process.on("SIGINT", exitHandler.bind()); +process.on("SIGUSR1", exitHandler.bind()); +process.on("SIGUSR2", exitHandler.bind()); +process.on("uncaughtException", exitHandler.bind()); // Start Docker containers upAll(dockerOptions).then( () => { process.stdout.write( - 'Docker containers launched, starting browser-sync...', + "Docker containers launched, starting browser-sync...", ); const wordpress = getIpAddr(`${name}_wordpress_1`); const db = getIpAddr(`${name}_db_1`); @@ -87,12 +87,12 @@ upAll(dockerOptions).then( bs.init(browserSyncOptions); } else { process.stderr.write( - 'Error: No IP address for Docker containers. Aborting.\n', + "Error: No IP address for Docker containers. Aborting.\n", ); process.exit(1); } }, - (err) => { + err => { process.strerr.write(`Error: ${err.message}\n`); process.exit(1); }, diff --git a/css/content.css b/css/content.css index f19a5db..c42b3ff 100644 --- a/css/content.css +++ b/css/content.css @@ -72,6 +72,7 @@ top: 0; color: var(--color-light-blue); font-weight: 700; + font-size: 0.9rem; } .content a { @@ -80,8 +81,7 @@ } .content a img { - transition: - box-shadow var(--transition-md) ease-out, + transition: box-shadow var(--transition-md) ease-out, filter var(--transition-md) ease-out; } diff --git a/css/index.css b/css/index.css index ef4c31d..670f9a1 100644 --- a/css/index.css +++ b/css/index.css @@ -64,8 +64,8 @@ --transition-fs: 0.15s; --transition-md: 0.3s; --transition-sl: 0.6s; - --heading-font-family: 'Raleway', sans-serif; - --body-font-family: 'Open Sans', sans-serif; + --heading-font-family: "Raleway", sans-serif; + --body-font-family: "Open Sans", sans-serif; --link-focus: 0 0.1rem 0 0 var(--color-light-blue); --image-focus: 0 0 0 0.2rem #fff, 0 0 0 0.4rem var(--color-light-blue); --bullet-size: 0.45rem; diff --git a/css/menu.css b/css/menu.css index 610942a..d99e15a 100644 --- a/css/menu.css +++ b/css/menu.css @@ -9,8 +9,7 @@ position: fixed; top: var(--space-xxs); opacity: 0; - transition: - filter var(--transition-md) ease-out, + transition: filter var(--transition-md) ease-out, opacity var(--transition-md) ease-out, transform var(--transition-md) ease-out; width: var(--menu-size); diff --git a/css/metadata.css b/css/metadata.css index 1894096..79e53f4 100644 --- a/css/metadata.css +++ b/css/metadata.css @@ -79,8 +79,7 @@ } .metadata__tag-link { - transition: - box-shadow var(--transition-md) ease-out, + transition: box-shadow var(--transition-md) ease-out, color var(--transition-md) ease-out; } diff --git a/css/nav.css b/css/nav.css index f88576e..33f123b 100644 --- a/css/nav.css +++ b/css/nav.css @@ -5,13 +5,12 @@ .nav:after { background-color: rgba(0, 0, 0, 0.5); bottom: 0; - content: ''; + content: ""; left: 0; opacity: 0; position: fixed; right: 0; - transition: - opacity var(--nav-transition-duration) ease-out, + transition: opacity var(--nav-transition-duration) ease-out, visibility var(--nav-transition-duration) ease-out; top: 0; visibility: hidden; @@ -90,8 +89,7 @@ position: absolute; right: var(--space-sm); top: var(--space-sm); - transition: - box-shadow var(--nav-transition-duration) ease-out, + transition: box-shadow var(--nav-transition-duration) ease-out, filter var(--nav-transition-duration) ease-out; width: var(--icon-size-sm); } @@ -111,7 +109,8 @@ height: 8%; position: absolute; left: 0; - transition: transform var(--nav-transition-duration) ease-out var(--nav-transition-duration); + transition: transform var(--nav-transition-duration) ease-out + var(--nav-transition-duration); transform: translateY(-50%); top: 50%; width: 100%; @@ -143,8 +142,7 @@ color: #fff; display: inline-block; margin-bottom: var(--space-xs); - transition: - box-shadow var(--nav-transition-duration) ease-out, + transition: box-shadow var(--nav-transition-duration) ease-out, text-shadow var(--nav-transition-duration) ease-out; } @@ -171,8 +169,7 @@ .nav__social-link:visited { display: inline-block; color: #fff; - transition: - box-shadow var(--nav-transition-duration) ease-out, + transition: box-shadow var(--nav-transition-duration) ease-out, filter var(--nav-transition-duration) ease-out; } diff --git a/css/page.css b/css/page.css index 35e6ae8..2cea154 100644 --- a/css/page.css +++ b/css/page.css @@ -72,7 +72,9 @@ @media (--viewport-lg) { .page { grid-template-columns: var(--logo-size-lg) 1fr; - grid-template-rows: var(--icon-size-md) calc(var(--logo-size-lg) - var(--space-md) - 32px) 1fr; + grid-template-rows: + var(--icon-size-md) calc(var(--logo-size-lg) - var(--space-md) - 32px) + 1fr; } .page__logo { @@ -93,7 +95,11 @@ @media (--viewport-xl) { .page { grid-template-columns: var(--logo-size-xl) 1fr; - grid-template-rows: var(--icon-size-md) calc(var(--logo-size-xl) - var(--space-md) - var(--icon-size-md)) 1fr; + grid-template-rows: + var(--icon-size-md) calc( + var(--logo-size-xl) - var(--space-md) - var(--icon-size-md) + ) + 1fr; margin: var(--space-md) auto 0; } diff --git a/css/social.css b/css/social.css index c4893f7..afaa187 100644 --- a/css/social.css +++ b/css/social.css @@ -4,8 +4,7 @@ .social__link { display: inline-block; - transition: - filter var(--transition-fs) ease-out, + transition: filter var(--transition-fs) ease-out, transform var(--transition-fs) ease-out; transform-origin: center bottom; } diff --git a/js/image.js b/js/image.js index ec60d52..22adacf 100644 --- a/js/image.js +++ b/js/image.js @@ -9,7 +9,7 @@ export default class Image { } start() { - if (this.dataset.loadTransition === 'false') { + if (this.dataset.loadTransition === "false") { return; } this.image.style.opacity = 0; @@ -21,6 +21,6 @@ export default class Image { } attachLoadedEvent() { - this.image.addEventListener('load', () => this.fadeIn()); + this.image.addEventListener("load", () => this.fadeIn()); } } diff --git a/js/image.spec.js b/js/image.spec.js index d973938..9724858 100644 --- a/js/image.spec.js +++ b/js/image.spec.js @@ -1,46 +1,46 @@ -import Image from './image'; +import Image from "./image"; const imageHtml = ` `; -describe('Image', () => { +describe("Image", () => { let image; let disabledImage; beforeEach(() => { document.body.innerHTML = imageHtml; - image = document.querySelector('.image'); - disabledImage = document.querySelector('.disabled-image'); + image = document.querySelector(".image"); + disabledImage = document.querySelector(".disabled-image"); }); - it('Should initialize', () => { + it("Should initialize", () => { const img = new Image(image); expect(img).toBeInstanceOf(Image); }); - it('Should store a reference to the image element', () => { + it("Should store a reference to the image element", () => { const img = new Image(image); expect(img.image).toBe(image); }); - test('fadeIn should set the element opacity to 1', () => { + test("fadeIn should set the element opacity to 1", () => { const img = new Image(image); img.fadeIn(); - expect(img.image.style.opacity).toBe('1'); + expect(img.image.style.opacity).toBe("1"); }); - test('start should set the element opacity to 0', () => { + test("start should set the element opacity to 0", () => { const img = new Image(image); img.start(); - expect(img.image.style.opacity).toBe('0'); + expect(img.image.style.opacity).toBe("0"); }); - test('start should call fadeIn when image has already loaded', () => { + test("start should call fadeIn when image has already loaded", () => { const img = new Image(image); img.fadeIn = jest.fn(); - Object.defineProperty(img.image, 'complete', { + Object.defineProperty(img.image, "complete", { value: true, writable: false, }); @@ -48,10 +48,10 @@ describe('Image', () => { expect(img.fadeIn).toHaveBeenCalledTimes(1); }); - test('start should call attachLoadedEvent if image has not yet loaded', () => { + test("start should call attachLoadedEvent if image has not yet loaded", () => { const img = new Image(image); img.attachLoadedEvent = jest.fn(); - Object.defineProperty(img.image, 'complete', { + Object.defineProperty(img.image, "complete", { value: false, writable: false, }); @@ -59,7 +59,7 @@ describe('Image', () => { expect(img.attachLoadedEvent).toHaveBeenCalledTimes(1); }); - test('start should do nothing if data-load-transition=false', () => { + test("start should do nothing if data-load-transition=false", () => { const img = new Image(disabledImage); img.attachLoadedEvent = jest.fn(); img.start(); diff --git a/js/index.js b/js/index.js index cf989a2..8148a0f 100644 --- a/js/index.js +++ b/js/index.js @@ -1,3 +1,3 @@ -import windy from './windy'; +import windy from "./windy"; -document.addEventListener('DOMContentLoaded', windy); +document.addEventListener("DOMContentLoaded", windy); diff --git a/js/menu.js b/js/menu.js index 23d4aa5..d02ad17 100644 --- a/js/menu.js +++ b/js/menu.js @@ -1,20 +1,20 @@ const STATES = { - visible: 'is-visible', - minimized: 'is-minimized', + visible: "is-visible", + minimized: "is-minimized", }; export default class Menu { constructor(cfg = {}) { if (!cfg.container) return false; this.container = cfg.container; - this.state = 'visible'; + this.state = "visible"; this.lastKnownScrollPosition = 0; } init() { if (!this.state) return false; - this.container.setAttribute('aria-haspopup', true); - this.container.setAttribute('aria-expanded', false); + this.container.setAttribute("aria-haspopup", true); + this.container.setAttribute("aria-expanded", false); this.attachEvents(); setTimeout(() => { this.showMenu(); @@ -23,38 +23,37 @@ export default class Menu { } attachEvents() { - window.addEventListener('scroll', () => { + window.addEventListener("scroll", () => { this.updateState(this.lastKnownScrollPosition, window.scrollY); this.lastKnownScrollPosition = window.scrollY; }); } updateState(lastY = 0, currentY) { - if (this.state !== 'hidden') { - if (this.state !== 'visible' && currentY < lastY) { + if (this.state !== "hidden") { + if (this.state !== "visible" && currentY < lastY) { this.showMenu(); - } else if (this.state !== 'minimized' && currentY - > lastY) { + } else if (this.state !== "minimized" && currentY > lastY) { this.minimizeMenu(); } } } showMenu() { - this.state = 'visible'; - this.container.setAttribute('aria-expanded', false); + this.state = "visible"; + this.container.setAttribute("aria-expanded", false); this.container.classList.add(STATES.visible); this.container.classList.remove(STATES.minimized); } minimizeMenu() { - this.state = 'minimized'; + this.state = "minimized"; this.container.classList.add(STATES.minimized); } hideMenu() { - this.state = 'hidden'; - this.container.setAttribute('aria-expanded', true); + this.state = "hidden"; + this.container.setAttribute("aria-expanded", true); this.container.classList.remove(STATES.visible); } } diff --git a/js/menu.spec.js b/js/menu.spec.js index fcd0a66..6d1e735 100644 --- a/js/menu.spec.js +++ b/js/menu.spec.js @@ -1,4 +1,4 @@ -import Menu from './menu'; +import Menu from "./menu"; jest.useFakeTimers(); @@ -10,105 +10,105 @@ const menuHtml = ` Open menu `; -describe('Menu button', () => { +describe("Menu button", () => { let menu; beforeEach(() => { document.body.innerHTML = menuHtml; menu = new Menu({ - container: document.querySelector('.menu'), + container: document.querySelector(".menu"), }); }); - it('Should initialise', () => { + it("Should initialise", () => { menu.init(); expect(menu).toMatchObject({}); }); - it('Should fail to initialise if container is missing', () => { + it("Should fail to initialise if container is missing", () => { menu.init(); - expect((new Menu()).state).toBeUndefined(); + expect(new Menu().state).toBeUndefined(); }); - it('Should default to visible state', () => { - expect(menu.state).toBe('visible'); + it("Should default to visible state", () => { + expect(menu.state).toBe("visible"); }); - it('Should be hidden initially', () => { + it("Should be hidden initially", () => { menu.init(); - expect(menu.container.classList.contains('is-visible')).toBe(false); + expect(menu.container.classList.contains("is-visible")).toBe(false); }); - it('Should be visible after 1 second', () => { + it("Should be visible after 1 second", () => { menu.init(); jest.runAllTimers(); expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 1000); - expect(menu.container.classList.contains('is-visible')).toBe(true); + expect(menu.container.classList.contains("is-visible")).toBe(true); }); - test('Menu can be shown', () => { + test("Menu can be shown", () => { menu.init(); menu.showMenu(); - expect(menu.state).toBe('visible'); - expect(menu.container.classList.contains('is-visible')).toBe(true); - expect(menu.container.classList.contains('is-minimized')).toBe(false); + expect(menu.state).toBe("visible"); + expect(menu.container.classList.contains("is-visible")).toBe(true); + expect(menu.container.classList.contains("is-minimized")).toBe(false); }); - test('Menu can be hidden', () => { + test("Menu can be hidden", () => { menu.init(); menu.hideMenu(); - expect(menu.state).toBe('hidden'); - expect(menu.container.classList.contains('is-visible')).toBe(false); - expect(menu.container.classList.contains('is-minimized')).toBe(false); + expect(menu.state).toBe("hidden"); + expect(menu.container.classList.contains("is-visible")).toBe(false); + expect(menu.container.classList.contains("is-minimized")).toBe(false); }); - test('Menu can be minimized', () => { + test("Menu can be minimized", () => { menu.init(); menu.minimizeMenu(); - expect(menu.state).toBe('minimized'); - expect(menu.container.classList.contains('is-visible')).toBe(false); - expect(menu.container.classList.contains('is-minimized')).toBe(true); + expect(menu.state).toBe("minimized"); + expect(menu.container.classList.contains("is-visible")).toBe(false); + expect(menu.container.classList.contains("is-minimized")).toBe(true); }); - test('The state should not change on scroll if it is hidden', () => { + test("The state should not change on scroll if it is hidden", () => { menu.init(); menu.hideMenu(); menu.updateState(10, 0); - expect(menu.state).toBe('hidden'); + expect(menu.state).toBe("hidden"); menu.updateState(0, 10); - expect(menu.state).toBe('hidden'); + expect(menu.state).toBe("hidden"); }); - test('The state should change to minimized when scrolling down', () => { + test("The state should change to minimized when scrolling down", () => { menu.init(); menu.showMenu(); menu.updateState(0, 10); - expect(menu.state).toBe('minimized'); + expect(menu.state).toBe("minimized"); }); - test('The state should change to visible when scrolling up', () => { + test("The state should change to visible when scrolling up", () => { menu.init(); menu.minimizeMenu(); menu.updateState(10, 0); - expect(menu.state).toBe('visible'); + expect(menu.state).toBe("visible"); }); - it('Should have initial ARIA attributes', () => { + it("Should have initial ARIA attributes", () => { menu.init(); - expect(menu.container.getAttribute('aria-haspopup')).toBe('true'); - expect(menu.container.getAttribute('aria-expanded')).toBe('false'); + expect(menu.container.getAttribute("aria-haspopup")).toBe("true"); + expect(menu.container.getAttribute("aria-expanded")).toBe("false"); }); - it('Should have updated ARIA attribute when menu is opened', () => { + it("Should have updated ARIA attribute when menu is opened", () => { menu.init(); menu.showMenu(); - expect(menu.container.getAttribute('aria-expanded')).toBe('false'); + expect(menu.container.getAttribute("aria-expanded")).toBe("false"); }); - it('Should have updated ARIA attribute when menu is closed', () => { + it("Should have updated ARIA attribute when menu is closed", () => { menu.init(); menu.showMenu(); menu.hideMenu(); - expect(menu.container.getAttribute('aria-expanded')).toBe('true'); + expect(menu.container.getAttribute("aria-expanded")).toBe("true"); }); }); diff --git a/js/navigation.js b/js/navigation.js index 17db2fc..bbd6e4a 100644 --- a/js/navigation.js +++ b/js/navigation.js @@ -1,53 +1,55 @@ const STATES = { - open: 'is-open', + open: "is-open", }; export default class Navigation { constructor(cfg = {}) { if (!cfg.container) return false; if (!cfg.menu) return false; - this.state = 'hidden'; + this.state = "hidden"; this.container = cfg.container; this.menu = cfg.menu; } init() { if (!this.state) return false; - this.container.setAttribute('aria-hidden', true); + this.container.setAttribute("aria-hidden", true); this.attachClickEvents(); this.attachKeyEvents(); return true; } attachClickEvents() { - this.container.addEventListener('click', (e) => { + this.container.addEventListener("click", e => { if (this.container === e.target) { this.closeNav(); } }); - this.menu.container.addEventListener('click', () => { + this.menu.container.addEventListener("click", () => { this.openNav(); }); - this.container.querySelector('.nav__close').addEventListener('click', () => { - this.closeNav(); - }); + this.container + .querySelector(".nav__close") + .addEventListener("click", () => { + this.closeNav(); + }); } attachKeyEvents() { - const first = this.container.querySelector('.nav__link'); - const last = this.container.querySelector('.nav__close'); - this.container.addEventListener('keydown', (e) => { + const first = this.container.querySelector(".nav__link"); + const last = this.container.querySelector(".nav__close"); + this.container.addEventListener("keydown", e => { if (e.keyCode === 27) { this.closeNav(); } }); - first.addEventListener('keydown', (e) => { + first.addEventListener("keydown", e => { if (e.shiftKey && e.keyCode === 9) { e.preventDefault(); last.focus(); } }); - last.addEventListener('keydown', (e) => { + last.addEventListener("keydown", e => { if (!e.shiftKey && e.keyCode === 9) { e.preventDefault(); first.focus(); @@ -57,18 +59,18 @@ export default class Navigation { openNav() { this.lastActiveElement = document.activeElement; - this.state = 'visible'; + this.state = "visible"; this.menu.hideMenu(); this.container.classList.add(STATES.open); - this.container.setAttribute('aria-hidden', false); - this.container.querySelector('.nav__title-link').focus(); + this.container.setAttribute("aria-hidden", false); + this.container.querySelector(".nav__title-link").focus(); } closeNav() { - this.state = 'hidden'; + this.state = "hidden"; this.menu.showMenu(); this.container.classList.remove(STATES.open); - this.container.setAttribute('aria-hidden', true); + this.container.setAttribute("aria-hidden", true); if (this.lastActiveElement) { this.lastActiveElement.focus(); } diff --git a/js/navigation.spec.js b/js/navigation.spec.js index a8f507a..19e1ac2 100644 --- a/js/navigation.spec.js +++ b/js/navigation.spec.js @@ -1,4 +1,4 @@ -import Navigation from './navigation'; +import Navigation from "./navigation"; const navHtml = `Test link