From d4a5a971bf89c2e51c137deb3b40ef224ff1ab6d Mon Sep 17 00:00:00 2001 From: madrilene Date: Sat, 31 Dec 2022 11:25:17 +0100 Subject: [PATCH] minor content changes, adding hash to js --- .eleventy.js | 43 ++++++++++++++-------- .eleventyignore | 1 - .gitignore | 24 ++++++------- config/events/before.js | 9 +++++ config/filters/index.js | 24 +++++++++++++ config/shortcodes/includeRaw/index.js | 17 +++++++++ config/shortcodes/index.js | 2 ++ package-lock.json | 4 +-- postcss.config.js | 8 ----- src/_layouts/base.njk | 2 +- src/assets/scripts/app.js | 51 ++++++++++----------------- src/pages/about.md | 6 ++-- 12 files changed, 115 insertions(+), 76 deletions(-) delete mode 100644 .eleventyignore create mode 100644 config/events/before.js create mode 100644 config/shortcodes/includeRaw/index.js delete mode 100644 postcss.config.js diff --git a/.eleventy.js b/.eleventy.js index 806faf3..8739ef9 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -17,16 +17,22 @@ const { toAbsoluteUrl, stripHtml, minifyCss, + minifyJs, mdInline } = require('./config/filters/index.js'); // module import shortcodes -const {imageShortcodePlaceholder, liteYoutube} = require('./config/shortcodes/index.js'); +const { + imageShortcodePlaceholder, + includeRaw, + liteYoutube +} = require('./config/shortcodes/index.js'); // module import collections const {getAllPosts} = require('./config/collections/index.js'); -// module import transforms +// module import events +const {before} = require('./config/events/before.js'); // plugins const markdownLib = require('./config/plugins/markdown.js'); @@ -38,9 +44,6 @@ const pluginRss = require('@11ty/eleventy-plugin-rss'); const inclusiveLangPlugin = require('@11ty/eleventy-plugin-inclusive-language'); module.exports = eleventyConfig => { - // Tell 11ty to use the .eleventyignore and ignore our .gitignore file - eleventyConfig.setUseGitIgnore(false); - // --------------------- Custom Watch Targets ----------------------- eleventyConfig.addWatchTarget('./src/assets'); eleventyConfig.addWatchTarget('./utils/*.js'); @@ -65,6 +68,7 @@ module.exports = eleventyConfig => { eleventyConfig.addFilter('toJson', JSON.stringify); eleventyConfig.addFilter('fromJson', JSON.parse); eleventyConfig.addFilter('cssmin', minifyCss); + eleventyConfig.addNunjucksAsyncFilter('jsmin', minifyJs); eleventyConfig.addFilter('md', mdInline); eleventyConfig.addFilter('keys', Object.keys); eleventyConfig.addFilter('values', Object.values); @@ -73,17 +77,19 @@ module.exports = eleventyConfig => { // --------------------- Custom shortcodes --------------------- eleventyConfig.addNunjucksAsyncShortcode('imagePlaceholder', imageShortcodePlaceholder); eleventyConfig.addShortcode('youtube', liteYoutube); + eleventyConfig.addShortcode('include_raw', includeRaw); eleventyConfig.addShortcode('year', () => `${new Date().getFullYear()}`); // current year, stephanie eckles // --------------------- Custom transforms --------------------- - eleventyConfig.addPlugin(require('./config/transforms/html-config.js')); // --------------------- Custom Template Languages --------------------- - eleventyConfig.addPlugin(require('./config/template-languages/css-config.js')); eleventyConfig.addPlugin(require('./config/template-languages/js-config.js')); + // --------------------- Custom events --------------------- + // eleventyConfig.addPlugin(require('./config/events/before.js')); + // --------------------- Custom collections ----------------------- eleventyConfig.addCollection('posts', getAllPosts); @@ -95,28 +101,35 @@ module.exports = eleventyConfig => { eleventyConfig.addPlugin(inclusiveLangPlugin); // --------------------- Passthrough File Copy ----------------------- - // same path ['src/assets/fonts/', 'src/assets/images/'].forEach(path => eleventyConfig.addPassthroughCopy(path) ); - // social icons to root directory + // social icons to root directory eleventyConfig.addPassthroughCopy({ 'src/assets/images/favicon/*': '/' }); - // --------------------- general config ----------------------- + eleventyConfig.addPassthroughCopy({ + 'src/assets/css/global.css': 'src/_includes/global.css' + }); + // --------------------- general config ----------------------- return { + // Pre-process *.md, *.html and global data files files with: (default: `liquid`) + markdownTemplateEngine: 'njk', + htmlTemplateEngine: 'njk', + dataTemplateEngine: 'njk', + + // Optional (default is set): If your site deploys to a subdirectory, change `pathPrefix`, for example with with GitHub pages + pathPrefix: '/', + dir: { - input: 'src', output: 'dist', + input: 'src', includes: '_includes', layouts: '_layouts' - }, - markdownTemplateEngine: 'njk', - dataTemplateEngine: 'njk', - htmlTemplateEngine: 'njk' + } }; }; diff --git a/.eleventyignore b/.eleventyignore deleted file mode 100644 index 3c3629e..0000000 --- a/.eleventyignore +++ /dev/null @@ -1 +0,0 @@ -node_modules diff --git a/.gitignore b/.gitignore index 4a951fe..0085fb4 100644 --- a/.gitignore +++ b/.gitignore @@ -1,16 +1,14 @@ -# Misc -*.log -npm-debug.* -*.scssc -*.log -*.swp -.DS_Store -Thumbs.db -.sass-cache -.env -.cache - -# Node modules and output +# Node modules node_modules + +# generated files dist src/_includes/css +src/_includes/scripts + +# cache +.cache + +# secret data +.env + diff --git a/config/events/before.js b/config/events/before.js new file mode 100644 index 0000000..d2c2b9a --- /dev/null +++ b/config/events/before.js @@ -0,0 +1,9 @@ +var fs = require('fs'); + +module.exports = eleventyConfig => { + eleventyConfig.on('eleventy.before', async () => { + fs.copyFile('src/assets/scripts/app.js', 'src/_includes/app-min.js', err => { + if (err) throw err; + }); + }); +}; diff --git a/config/filters/index.js b/config/filters/index.js index 6b0446b..40ee326 100644 --- a/config/filters/index.js +++ b/config/filters/index.js @@ -48,6 +48,29 @@ const formatDate = (date, format) => dayjs(date).format(format); const minifyCss = code => new CleanCSS({}).minify(code).styles; +const minifyJs = async (code, ...rest) => { + const callback = rest.pop(); + const cacheKey = rest.length > 0 ? rest[0] : null; + + try { + if (cacheKey && jsminCache.hasOwnProperty(cacheKey)) { + const cacheValue = await Promise.resolve(jsminCache[cacheKey]); // Wait for the data, wrapped in a resolved promise in case the original value already was resolved + callback(null, cacheValue.code); // Access the code property of the cached value + } else { + const minified = esbuild.transform(code, { + minify: true + }); + if (cacheKey) { + jsminCache[cacheKey] = minified; // Store the promise which has the minified output (an object with a code property) + } + callback(null, (await minified).code); // Await and use the return value in the callback + } + } catch (err) { + console.error('jsmin error: ', err); + callback(null, code); // Fail gracefully. + } +}; + /** * Render content as inline markdown if single line, or full * markdown if multiline. for md in yaml @@ -85,5 +108,6 @@ module.exports = { toAbsoluteUrl, stripHtml, minifyCss, + minifyJs, mdInline }; diff --git a/config/shortcodes/includeRaw/index.js b/config/shortcodes/includeRaw/index.js new file mode 100644 index 0000000..b5afd57 --- /dev/null +++ b/config/shortcodes/includeRaw/index.js @@ -0,0 +1,17 @@ +// Because Nunjucks's include doesn't like CSS with "{#". Source: https://github.com/nhoizey/pack11ty/blob/781248b92480701208f69e2161165e58d79a23ee/src/_11ty/shortcodes/include_raw.js + +const fs = require('fs'); + +let memoizedIncludes = {}; + +const includeRaw = file => { + if (file in memoizedIncludes) { + return memoizedIncludes[file]; + } else { + let content = fs.readFileSync(file, 'utf8'); + memoizedIncludes[file] = content; + return content; + } +}; + +module.exports = includeRaw; diff --git a/config/shortcodes/index.js b/config/shortcodes/index.js index 91ba060..3db7c91 100644 --- a/config/shortcodes/index.js +++ b/config/shortcodes/index.js @@ -1,6 +1,8 @@ const imageShortcodePlaceholder = require('./imagePlaceholder'); +const includeRaw = require('./includeRaw'); const liteYoutube = require('./youtube-lite'); module.exports = { imageShortcodePlaceholder, + includeRaw, liteYoutube }; diff --git a/package-lock.json b/package-lock.json index 41ab74c..955efa5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "eleventy-excellent", - "version": "1.1.7", + "version": "1.2.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "eleventy-excellent", - "version": "1.1.7", + "version": "1.2.0", "license": "ISC", "dependencies": { "@11ty/eleventy": "^2.0.0-canary.23", diff --git a/postcss.config.js b/postcss.config.js deleted file mode 100644 index ee13bab..0000000 --- a/postcss.config.js +++ /dev/null @@ -1,8 +0,0 @@ -module.exports = { - plugins: [ - require('postcss-import-ext-glob'), - require('postcss-import'), - require('tailwindcss'), - require('cssnano') - ] -}; diff --git a/src/_layouts/base.njk b/src/_layouts/base.njk index 23e3a96..d2eef1a 100644 --- a/src/_layouts/base.njk +++ b/src/_layouts/base.njk @@ -58,7 +58,7 @@ {% endif %} - + {% include "partials/meta-info.njk" %} diff --git a/src/assets/scripts/app.js b/src/assets/scripts/app.js index 5a78d1f..d399faa 100644 --- a/src/assets/scripts/app.js +++ b/src/assets/scripts/app.js @@ -1,36 +1,4 @@ -// ------------------- cards redundant click, accessible whole card clickable solution by Heydon Pickering - -// const cards = [...document.querySelectorAll('.card')]; -// cards.forEach(card => { -// card.style.cursor = 'pointer'; -// let down, -// up, -// link = card.querySelector('a'); -// card.onmousedown = () => (down = +new Date()); -// card.onmouseup = () => { -// up = +new Date(); -// if (up - down < 200) { -// link.click(); -// } -// }; -// }); - -const cards = document.querySelectorAll('.card'); -Array.prototype.forEach.call(cards, card => { - let down, - up, - link = card.querySelector(':is(h1, h2, h3, h4, h5, h6) a'); - card.style.cursor = 'pointer'; - card.onmousedown = () => (down = +new Date()); - card.onmouseup = () => { - up = +new Date(); - if (up - down < 200) { - link.click(); - } - }; -}); - -// ------------------- responsive accessible nav +// ------------------- responsive accessible nav by Manuel Matuzović: https://web.dev/website-navigation/ const nav = document.querySelector('nav'); const list = nav.querySelector('ul'); @@ -65,3 +33,20 @@ document.addEventListener('click', e => { }); nav.insertBefore(burgerClone, list); + +// ------------------- accessible clickable cards solution by Heydon Pickering: https://inclusive-components.design/cards/ + +const cards = [...document.querySelectorAll('.card')]; +cards.forEach(card => { + card.style.cursor = 'pointer'; + let down, + up, + link = card.querySelector('a'); + card.onmousedown = () => (down = +new Date()); + card.onmouseup = () => { + up = +new Date(); + if (up - down < 200) { + link.click(); + } + }; +}); diff --git a/src/pages/about.md b/src/pages/about.md index b36fc7b..7785be5 100644 --- a/src/pages/about.md +++ b/src/pages/about.md @@ -6,9 +6,9 @@ layout: page youtube: true --- -Based on the companion website of Andy Bell's talk 'Be the browser’s mentor, not its micromanager'. It takes over the core functionality, which is using Tailwind CSS to generate CSS variables based on design tokens. +Based on the [companion website](https://buildexcellentwebsit.es/) of Andy Bell's talk 'Be the browser’s mentor, not its micromanager'. It takes over a core functionality: Using Tailwind CSS to generate CSS variables based on design tokens. -Just like the original and role model, this starter uses modern CSS, fluid type & space, flexible Layouts and Progressive Enhancement, wrapped in a basic template, ideal for personal websites and other small projects. +Like buildexcellentwebsit.es, this starter uses modern CSS, fluid type & space, flexible Layouts and Progressive Enhancement, wrapped in a basic template, ideal for personal websites and other small projects. The aim is to hopefully spread the use of this _excellent_ workflow. To work with it efficiently you should be familiar with [cube.fyi](https://cube.fyi/), [utopia.fyi](https://utopia.fyi/) and [every-layout.dev](https://every-layout.dev/). @@ -19,4 +19,4 @@ Edit your preferences (colors, fonts, fluid text sizes etc.) in `src/assets/css/ ## Watch the talk -{% youtube '5uhIiI9Ld5M', 'Andy Bell – Be the browser’s mentor, not its micromanager' %} +{% youtube 'JqnMI1AXl6w', 'Andy Bell – Be the browser’s mentor, not its micromanager' %}