diff --git a/_tests/pdf.test.js b/_tests/pdf.test.js
index c66523f37..7528e5d1e 100644
--- a/_tests/pdf.test.js
+++ b/_tests/pdf.test.js
@@ -1,7 +1,6 @@
-const test = require('node:test');
-
-import { execa } from 'execa';
import { PDFDocument } from 'pdf-lib';
+import { execa } from 'execa';
+import test from 'node:test';
// Start a new default publication, build it, and make the pdf
var { stderr, stdout } = await execa("npx",["quire","new", "--quire-path", "$(pwd)/packages/11ty", "test-pub"])
diff --git a/packages/11ty/.eleventy.js b/packages/11ty/.eleventy.js
index 77672c49c..58d38fdf1 100644
--- a/packages/11ty/.eleventy.js
+++ b/packages/11ty/.eleventy.js
@@ -1,45 +1,68 @@
-require('module-alias/register')
-
-const copy = require('rollup-plugin-copy')
-const fs = require('fs-extra')
-const packageJSON = require('./package.json');
-const path = require('path')
-const scss = require('rollup-plugin-scss')
-
-const chalkFactory = require('~lib/chalk')
+import fs from 'fs-extra'
+import path from 'node:path'
/**
- * Quire features are implemented as Eleventy plugins
+ * Eleventy plugins
*/
-const {
+import {
EleventyHtmlBasePlugin,
+ IdAttributePlugin,
+ InputPathToUrlTransformPlugin,
EleventyRenderPlugin
-} = require('@11ty/eleventy')
-const citationsPlugin = require('~plugins/citations')
-const collectionsPlugin = require('~plugins/collections')
-const componentsPlugin = require('~plugins/components')
-const dataExtensionsPlugin = require('~plugins/dataExtensions')
-const directoryOutputPlugin = require('@11ty/eleventy-plugin-directory-output')
-const figuresPlugin = require('~plugins/figures')
-const filtersPlugin = require('~plugins/filters')
-const frontmatterPlugin = require('~plugins/frontmatter')
-const globalDataPlugin = require('~plugins/globalData')
-const i18nPlugin = require('~plugins/i18n')
-const lintersPlugin = require('~plugins/linters')
-const markdownPlugin = require('~plugins/markdown')
-const navigationPlugin = require('@11ty/eleventy-navigation')
-const pluginWebc = require('@11ty/eleventy-plugin-webc')
-const searchPlugin = require('~plugins/search')
-const shortcodesPlugin = require('~plugins/shortcodes')
-const syntaxHighlightPlugin = require('@11ty/eleventy-plugin-syntaxhighlight')
-const transformsPlugin = require('~plugins/transforms')
-const vitePlugin = require('~plugins/vite')
+} from '@11ty/eleventy'
+// import { eleventyImageTransformPlugin } from '@11ty/eleventy-img'
+import directoryOutputPlugin from '@11ty/eleventy-plugin-directory-output'
+import navigationPlugin from '@11ty/eleventy-navigation'
+import pluginWebc from '@11ty/eleventy-plugin-webc'
+import syntaxHighlightPlugin from '@11ty/eleventy-plugin-syntaxhighlight'
+import UpgradeHelper from '@11ty/eleventy-upgrade-help'
+
+/**
+ * Quire plugins for Eleventy
+ * dynamic import of the default export from local plugins modules
+ */
+// const plugins =
+// fs.readdir('_plugins', { withFileTypes: true }, (error, entries) => {
+// entries.forEach((entry) => {
+// if (entry.isDirectory()) {
+// const { default: plugin } = await import(`./plugins/${entry.name}`)
+// eleventyConfig.addPlugin(plugin, collections)
+// }
+// })
+// })
+import citationsPlugin from '#plugins/citations/index.js'
+import collectionsPlugin from '#plugins/collections/index.js'
+import componentsPlugin from '#plugins/components/index.js'
+import dataExtensionsPlugin from '#plugins/dataExtensions/index.js'
+import figuresPlugin from '#plugins/figures/index.js'
+import filtersPlugin from '#plugins/filters/index.js'
+import frontmatterPlugin from '#plugins/frontmatter/index.js'
+import globalDataPlugin from '#plugins/globalData/index.js'
+import i18nPlugin from '#plugins/i18n/index.js'
+import lintersPlugin from '#plugins/linters/index.js'
+import markdownPlugin from '#plugins/markdown/index.js'
+import searchPlugin from '#plugins/search/index.js'
+import shortcodesPlugin from '#plugins/shortcodes/index.js'
+import transformsPlugin from '#plugins/transforms/index.js'
+import vitePlugin from '#plugins/vite/index.js'
+
+/**
+ * Application modules
+ */
+import chalkFactory from '#lib/chalk/index.js'
+// Read package.json manually for now, see: https://github.com/11ty/eleventy/issues/3128
+// When issue merged, use: import packageJSON from './package.json' with { type: 'json' };
+const packageJSON = JSON.parse(
+ (await fs.readFile(new URL('package.json', import.meta.url))).toString()
+)
+
+// eslint-disable-next-line no-unused-vars
const { error } = chalkFactory('eleventy config')
const inputDir = process.env.ELEVENTY_INPUT || 'content'
const outputDir = process.env.ELEVENTY_OUTPUT || '_site'
-const publicDir = process.env.ELEVENTY_ENV === 'production' ? 'public' : false // publicDir should be set explicitly to false in development
+const publicDir = process.env.ELEVENTY_ENV === 'production' ? 'public' : false // publicDir should be set explicitly to false in development
/**
* Eleventy configuration
@@ -48,7 +71,44 @@ const publicDir = process.env.ELEVENTY_ENV === 'production' ? 'public' : false /
* @param {Object} base eleventy configuration
* @return {Object} A modified eleventy configuation
*/
-module.exports = function(eleventyConfig) {
+export default async function (eleventyConfig) {
+ /**
+ * Eleventy v2 to v3 upgrade helper
+ * @see https://www.11ty.dev/docs/plugins/upgrade-help/
+ */
+ eleventyConfig.addPlugin(UpgradeHelper)
+
+ const dataDir = process.env.ELEVENTY_DATA || '_computed'
+ const includesDir = process.env.ELEVENTY_INCLUDES || path.join('..', '_includes')
+ const layoutsDir = process.env.ELEVENTY_LAYOUTS || path.join('..', '_layouts')
+
+ // ⚠️ input and output dirs are _relative_ to the `.eleventy.js` module
+ eleventyConfig.setInputDirectory(inputDir)
+ eleventyConfig.setOutputDirectory(outputDir)
+ // ⚠️ the following directories are _relative_ to the `input` directory
+ eleventyConfig.setDataDirectory(dataDir)
+ eleventyConfig.setIncludesDirectory(includesDir)
+ eleventyConfig.setLayoutsDirectory(layoutsDir)
+
+ /**
+ * All of the following template formats support universal shortcodes.
+ *
+ * Nota bene:
+ * Markdown files are pre-processed as Liquid templates by default. This
+ * means that shortcodes available in Liquid templates are also available
+ * in Markdown files. Likewise, if you change the template engine for
+ * Markdown files, the shortcodes available for that templating language
+ * will also be available in Markdown files.
+ * @see {@link https://www.11ty.dev/docs/config/#template-formats}
+ */
+ eleventyConfig.setTemplateFormats([
+ '11ty.js', // JavaScript
+ 'html', // HTML
+ 'liquid', // Liquid
+ 'md', // Markdown
+ 'njk' // Nunjucks
+ ])
+
/**
* Override addPassthroughCopy to use _absolute_ system paths.
* @see https://www.11ty.dev/docs/copy/#passthrough-file-copy
@@ -116,7 +176,17 @@ module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(EleventyHtmlBasePlugin)
/**
- * Plugins are loaded in this order:
+ * @see https://www.11ty.dev/docs/plugins/id-attribute/
+ */
+ eleventyConfig.addPlugin(IdAttributePlugin)
+
+ /**
+ * @see https://www.11ty.dev/docs/plugins/inputpath-to-url/
+ */
+ eleventyConfig.addPlugin(InputPathToUrlTransformPlugin)
+
+ /**
+ * Plugins are loaded in this order:
* 1) immediately invoked
* 2) addPlugin statements
* Plugins that mutate globalData must be added before other plugins
@@ -171,11 +241,33 @@ module.exports = function(eleventyConfig) {
* @property {Boolean} useTransform - Use WebC transform to process all HTML output
*/
eleventyConfig.addPlugin(pluginWebc, {
- components: '_includes/components/**/*.webc',
+ components: [
+ '_includes/components/**/*.webc',
+ 'npm:@11ty/eleventy-img/*.webc'
+ ],
transformData: {},
- useTransform: false,
+ useTransform: false
})
+ /**
+ * Configure the Eleventy Image plugin
+ * @see https://www.11ty.dev/docs/plugins/image/
+ */
+ // eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
+ // defaultAttributes: {
+ // decoding: 'async',
+ // loading: 'lazy'
+ // },
+ // filenameFormat: (id, src, width, format, options) => {
+ // const extension = path.extname(src)
+ // const name = path.basename(src, extension)
+ // return `${name}-${width}w.${format}`
+ // },
+ // formats: ['jpeg'],
+ // outputDir: '.',
+ // urlPath: '/img/'
+ // })
+
/**
* Register a plugin to run linters on input templates
* Nota bene: linters are run *before* applying layouts
@@ -225,59 +317,12 @@ module.exports = function(eleventyConfig) {
eleventyConfig.watchIgnores.add('_pdf')
eleventyConfig.watchIgnores.add('_temp')
- const { pathname: pathPrefix } = globalData.publication
- return {
- /**
- * @see {@link https://www.11ty.dev/docs/config/#configuration-options}
- */
- dir: {
- // ⚠️ input and output dirs are _relative_ to the `.eleventy.js` module
- input: inputDir,
- output: outputDir,
- // ⚠️ the following directories are _relative_ to the `input` directory
- data: process.env.ELEVENTY_DATA || '_computed',
- includes: process.env.ELEVENTY_INCLUDES || path.join('..', '_includes'),
- layouts: process.env.ELEVENTY_LAYOUTS || path.join('..', '_layouts'),
- },
- /**
- * The default global template engine to pre-process HTML files.
- * Use false to avoid pre-processing and passthrough copy the content (HTML is not transformed, so technically this could be any plaintext).
- * @see {@link https://www.11ty.dev/docs/config/#default-template-engine-for-html-files}
- */
- htmlTemplateEngine: 'liquid',
- /**
- * Suffix for template and directory specific data files
- * @example '.data' will search for `*.data.js` and `*.data.json` data files.
- * @see {@link https://www.11ty.dev/docs/data-template-dir/ Template and Directory Specific Data Files}
- */
- jsDataFileSuffix: '.data',
- /**
- * The default global template engine to pre-process markdown files.
- * Use false to avoid pre-processing and only transform markdown.
- * @see {@link https://www.11ty.dev/docs/config/#default-template-engine-for-markdown-files}
- */
- markdownTemplateEngine: 'liquid',
- /**
- * @see {@link https://www.11ty.dev/docs/config/#deploy-to-a-subdirectory-with-a-path-prefix}
- */
- pathPrefix,
- /**
- * All of the following template formats support universal shortcodes.
- *
- * Nota bene:
- * Markdown files are pre-processed as Liquid templates by default. This
- * means that shortcodes available in Liquid templates are also available
- * in Markdown files. Likewise, if you change the template engine for
- * Markdown files, the shortcodes available for that templating language
- * will also be available in Markdown files.
- * @see {@link https://www.11ty.dev/docs/config/#template-formats}
- */
- templateFormats: [
- '11ty.js', // JavaScript
- 'hbs', // Handlebars
- 'liquid', // Liquid
- 'md', // Markdown
- 'njk', // Nunjucks
- ]
- }
+ /**
+ * Suffix for template and directory specific data files
+ * @example '.data' will search for `*.data.js` and `*.data.json` data files
+ * @see https://www.11ty.dev/docs/config/#change-base-file-name-for-data-files
+ * @see https://www.11ty.dev/docs/config/#change-file-suffix-for-data-files
+ */
+ eleventyConfig.setDataFileBaseName('index')
+ eleventyConfig.setDataFileSuffixes(['.data', ''])
}
diff --git a/packages/11ty/.eslintrc b/packages/11ty/.eslintrc
deleted file mode 100644
index 776bb4a0b..000000000
--- a/packages/11ty/.eslintrc
+++ /dev/null
@@ -1,34 +0,0 @@
-{
- "env": {
- "browser": true,
- "es2021": true,
- "node": true,
- },
- "extends": "eslint:recommended",
- "ignorePatterns": [ "**/*.min.js" ],
- "overrides": [],
- "parserOptions": {
- "ecmaVersion": "latest",
- "sourceType": "module"
- },
- "rules": {
- "getter-return": [ "error", { "allowImplicit": true } ],
- "indent": [ "error", 2, { "SwitchCase": 1 } ],
- "linebreak-style": [ "error", "unix" ],
- "quotes": [ "error", "single", { "allowTemplateLiterals": true } ],
- "no-console": "off",
- "no-prototype-builtins": "off",
- "no-unused-vars": "off",
- "semi": [ "error", "never" ],
- "sort-imports": [
- "warn",
- {
- "allowSeparatedGroups": false,
- "ignoreCase": false,
- "ignoreDeclarationSort": false,
- "ignoreMemberSort": false,
- "memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
- }
- ],
- }
-}
diff --git a/packages/11ty/.node-version b/packages/11ty/.node-version
index 6d80269a4..e9dbbdadc 100644
--- a/packages/11ty/.node-version
+++ b/packages/11ty/.node-version
@@ -1 +1 @@
-18.16.0
+21.1.0
diff --git a/packages/11ty/CHANGELOG.md b/packages/11ty/CHANGELOG.md
index 016f79733..b4ef232ac 100644
--- a/packages/11ty/CHANGELOG.md
+++ b/packages/11ty/CHANGELOG.md
@@ -12,6 +12,15 @@ Changelog entries are classified using the following labels:
- `Fixed`: for any bug fixes
- `Removed`: for deprecated features removed in this release
+## [unreleased]
+
+### Bumped
+
+- Update dependency pins for `@11ty/eleventy`, `@11ty/eleventy-plugin-vite` to support Eleventy v3
+
+### Breaking
+
+This release is updates the *major* version of `eleventy`, which requires using ECMAScript module (ESM) syntax for JavaScript code. Specifically, ESM `import` statements to use other modules and the `import.meta.url` property for a module's file path from within that module. For most Quire users this update should be transparent. For publications that have customized the quire code or import packages that are not already in the publication's package dependency tree changes may be needed to address ESM conformance to the custom modules.
## [1.0.0-rc.22]
### Changed
diff --git a/packages/11ty/_includes/README.md b/packages/11ty/_includes/README.md
index 5601b9524..ab139ff1c 100644
--- a/packages/11ty/_includes/README.md
+++ b/packages/11ty/_includes/README.md
@@ -29,9 +29,9 @@ The `data` property contains the final data from the [Eleventy data cascade](htt
#### In an `11ty.js` `_include`
```javascript
-const { html } = require('common-tags')
+import { html } from 'common-tags'
-module.exports = function(eleventyConfig, params) {
+export default function(eleventyConfig, params) {
const { publication } = params
const siteTitle = eleventyConfig.getFilter('siteTitle')
@@ -47,7 +47,7 @@ module.exports = function(eleventyConfig, params) {
#### In an `11ty.js` `_layout`
```javascript
-const { html } = require('common-tags')
+import { html } from 'common-tags'
exports.data = {
layout: 'base'
diff --git a/packages/11ty/_includes/components/abstract.js b/packages/11ty/_includes/components/abstract.js
index 653a42e87..259aef3b7 100644
--- a/packages/11ty/_includes/components/abstract.js
+++ b/packages/11ty/_includes/components/abstract.js
@@ -1,10 +1,10 @@
-const { html } = require('~lib/common-tags')
+import { html } from '#lib/common-tags/index.js'
/**
* Publication abstract
* @param {Object} eleventyConfig
*/
-module.exports = function(eleventyConfig) {
+export default function (eleventyConfig) {
const markdownify = eleventyConfig.getFilter('markdownify')
return function (params) {
const { abstract } = params
diff --git a/packages/11ty/_includes/components/accordion/global-controls.js b/packages/11ty/_includes/components/accordion/global-controls.js
index dde2e1042..110667053 100644
--- a/packages/11ty/_includes/components/accordion/global-controls.js
+++ b/packages/11ty/_includes/components/accordion/global-controls.js
@@ -1,16 +1,16 @@
-const { html } = require('~lib/common-tags')
+import { html } from '#lib/common-tags/index.js'
/**
* @param {Object} eleventyConfig
* @returns Global Accordion Controls Shortcode
*/
-module.exports = function(eleventyConfig) {
+export default function (eleventyConfig) {
const { collapseText, expandText } = eleventyConfig.globalData.config.accordion.globalControls
/**
* @return {String} html markup for global accordion controls
*/
- return function() {
+ return function () {
return html`
diff --git a/packages/11ty/_includes/components/analytics.js b/packages/11ty/_includes/components/analytics.js
index 40ff2f9fb..90d07618a 100644
--- a/packages/11ty/_includes/components/analytics.js
+++ b/packages/11ty/_includes/components/analytics.js
@@ -1,13 +1,13 @@
-const { html } = require('~lib/common-tags')
+import { html } from '#lib/common-tags/index.js'
/**
* Google Analytics
* @param {Object} eleventyConfig
* @param {Object} data
*/
-module.exports = function(eleventyConfig) {
+export default function (eleventyConfig) {
const { googleId } = eleventyConfig.globalData.config.analytics
- return function(params) {
+ return function (params) {
if (!googleId) return ''
return html`
`
diff --git a/packages/11ty/_includes/components/search.js b/packages/11ty/_includes/components/search.js
index 52d9341ff..33839054c 100644
--- a/packages/11ty/_includes/components/search.js
+++ b/packages/11ty/_includes/components/search.js
@@ -1,12 +1,12 @@
-const { html } = require('~lib/common-tags')
+import { html } from '#lib/common-tags/index.js'
/**
* Search Input
- *
+ *
* @param {EleventyConfig} eleventyConfig
* @return {String} HTML tags
*/
-module.exports = function(eleventyConfig) {
+export default function (eleventyConfig) {
const icon = eleventyConfig.getFilter('icon')
return (params) => {
const { url } = params.publication
@@ -45,7 +45,7 @@ module.exports = function(eleventyConfig) {
type="search"
value=""
/>
- ${icon({ type: 'search', description: 'Search'})}
+ ${icon({ type: 'search', description: 'Search' })}
diff --git a/packages/11ty/_includes/components/site-title.js b/packages/11ty/_includes/components/site-title.js
index 2127787ca..c2b4da252 100644
--- a/packages/11ty/_includes/components/site-title.js
+++ b/packages/11ty/_includes/components/site-title.js
@@ -3,13 +3,13 @@
* See also page/title.liquid
*
* @param {Object} eleventyConfig
- *
+ *
* @return {String} Site title
*/
-module.exports = function(eleventyConfig) {
+export default function (eleventyConfig) {
const { publication } = eleventyConfig.globalData
const { reading_line: readingLine, subtitle, title } = publication
- return function() {
+ return function () {
const separator = '!?'.includes(title.slice(-1)) ? '' : ':'
let siteTitle = `${title}`
if (subtitle) siteTitle += `${separator}\u0020${subtitle}`
diff --git a/packages/11ty/_includes/components/table-of-contents/epub.js b/packages/11ty/_includes/components/table-of-contents/epub.js
index 9528362a5..4b203c47d 100644
--- a/packages/11ty/_includes/components/table-of-contents/epub.js
+++ b/packages/11ty/_includes/components/table-of-contents/epub.js
@@ -1,11 +1,11 @@
/**
* Render `table-of-contents` component with data from collections.epub
*/
-module.exports = function(eleventyConfig) {
+export default function (eleventyConfig) {
const tableOfContentsList = eleventyConfig.getFilter('tableOfContentsList')
- return function(params) {
+ return function (params) {
const { collections, currentPageUrl, key, presentation } = params
- return tableOfContentsList({
+ return tableOfContentsList({
collection: collections.tableOfContentsEpub,
currentPageUrl,
key,
diff --git a/packages/11ty/_includes/components/table-of-contents/html.js b/packages/11ty/_includes/components/table-of-contents/html.js
index 6bb9a06f4..2b00e304d 100644
--- a/packages/11ty/_includes/components/table-of-contents/html.js
+++ b/packages/11ty/_includes/components/table-of-contents/html.js
@@ -1,11 +1,11 @@
/**
* Render `table-of-contents` component with data from collections.html
*/
-module.exports = function(eleventyConfig) {
+export default function (eleventyConfig) {
const tableOfContentsList = eleventyConfig.getFilter('tableOfContentsList')
- return function(params) {
+ return function (params) {
const { collections, currentPageUrl, key, presentation } = params
- return tableOfContentsList({
+ return tableOfContentsList({
collection: collections.tableOfContentsHtml,
currentPageUrl,
key,
diff --git a/packages/11ty/_includes/components/table-of-contents/index.js b/packages/11ty/_includes/components/table-of-contents/index.js
index 933a65954..57d91363c 100644
--- a/packages/11ty/_includes/components/table-of-contents/index.js
+++ b/packages/11ty/_includes/components/table-of-contents/index.js
@@ -3,13 +3,13 @@
*
* Nota bene: The Table of Contents component renders the same markup
* for each output with different data.
- * Each output file (`html.js`, `pdf.js`, `epub.js`) accepts all `collections`,
+ * Each output file (`html.js`, `pdf.js`, `epub.js`) accepts all `collections`,
* extracts the table of contents `collection` for the current output,
* and provides it to `tableOfContentsList`.
*/
-module.exports = function(eleventyConfig) {
+export default function (eleventyConfig) {
const renderOutputs = eleventyConfig.getFilter('renderOutputs')
- return function(params) {
- return renderOutputs(__dirname, params)
+ return function (params) {
+ return renderOutputs(import.meta.dirname, params)
}
}
diff --git a/packages/11ty/_includes/components/table-of-contents/item/grid.js b/packages/11ty/_includes/components/table-of-contents/item/grid.js
index 626e55ad2..f89d79a9b 100644
--- a/packages/11ty/_includes/components/table-of-contents/item/grid.js
+++ b/packages/11ty/_includes/components/table-of-contents/item/grid.js
@@ -1,5 +1,5 @@
-const path = require ('path')
-const { html, oneLine } = require('~lib/common-tags')
+import { html, oneLine } from '#lib/common-tags/index.js'
+import path from 'node:path'
/**
* Renders a TOC item
@@ -11,7 +11,7 @@ const { html, oneLine } = require('~lib/common-tags')
*
* @return {String} TOC item markup
*/
-module.exports = function (eleventyConfig) {
+export default function (eleventyConfig) {
const contributors = eleventyConfig.getFilter('contributors')
const getFigure = eleventyConfig.getFilter('getFigure')
const getObject = eleventyConfig.getFilter('getObject')
@@ -24,8 +24,8 @@ module.exports = function (eleventyConfig) {
return function (params) {
const {
- children='',
- classes=[],
+ children = '',
+ classes = [],
page
} = params
@@ -36,9 +36,7 @@ module.exports = function (eleventyConfig) {
label,
layout,
object: pageObject,
- short_title,
subtitle,
- summary,
title
} = page.data
diff --git a/packages/11ty/_includes/components/table-of-contents/item/image.js b/packages/11ty/_includes/components/table-of-contents/item/image.js
index 2e97367be..70411646f 100644
--- a/packages/11ty/_includes/components/table-of-contents/item/image.js
+++ b/packages/11ty/_includes/components/table-of-contents/item/image.js
@@ -1,4 +1,4 @@
-const path = require('path')
+import path from 'node:path'
/**
* Renders a TOC item image
*
@@ -8,16 +8,16 @@ const path = require('path')
*
* @return {String} TOC image markup
*/
-module.exports = function(eleventyConfig) {
+export default function (eleventyConfig) {
const { imageDir } = eleventyConfig.globalData.config.figures
- return function(params) {
+ return function (params) {
const { src } = params
if (!imageDir || !src) return ''
const imgPath = path.join(imageDir, src)
return `
`
diff --git a/packages/11ty/_includes/components/table-of-contents/item/index.js b/packages/11ty/_includes/components/table-of-contents/item/index.js
index e300f3252..4154af222 100644
--- a/packages/11ty/_includes/components/table-of-contents/item/index.js
+++ b/packages/11ty/_includes/components/table-of-contents/item/index.js
@@ -9,13 +9,13 @@
*
* @return {String} TOC item markup
*/
-module.exports = function (eleventyConfig) {
+export default function (eleventyConfig) {
const tableOfContentsGridItem = eleventyConfig.getFilter('tableOfContentsGridItem')
const tableOfContentsListItem = eleventyConfig.getFilter('tableOfContentsListItem')
return function (params) {
const {
- children='',
+ children = '',
page,
presentation
} = params
@@ -37,7 +37,7 @@ module.exports = function (eleventyConfig) {
classes.push('frontmatter-page')
}
- return presentation === 'grid'
+ return presentation === 'grid'
? tableOfContentsGridItem({ children, classes, page })
: tableOfContentsListItem({ children, classes, page, presentation })
}
diff --git a/packages/11ty/_includes/components/table-of-contents/item/list.js b/packages/11ty/_includes/components/table-of-contents/item/list.js
index 37e98f669..c24c4000c 100644
--- a/packages/11ty/_includes/components/table-of-contents/item/list.js
+++ b/packages/11ty/_includes/components/table-of-contents/item/list.js
@@ -1,5 +1,6 @@
-const path = require('path')
-const { html, oneLine } = require('~lib/common-tags')
+/* eslint-disable camelcase */
+
+import { html, oneLine } from '#lib/common-tags/index.js'
/**
* Renders a TOC list item
@@ -12,19 +13,18 @@ const { html, oneLine } = require('~lib/common-tags')
*
* @return {String} TOC list item markup
*/
-module.exports = function (eleventyConfig) {
+export default function (eleventyConfig) {
const contributors = eleventyConfig.getFilter('contributors')
const icon = eleventyConfig.getFilter('icon')
const markdownify = eleventyConfig.getFilter('markdownify')
- const slugify = eleventyConfig.getFilter('slugify')
const pageTitle = eleventyConfig.getFilter('pageTitle')
const removeHTML = eleventyConfig.getFilter('removeHTML')
const { contributorDivider } = eleventyConfig.globalData.config.tableOfContents
return function (params) {
const {
- children='',
- classes=[],
+ children = '',
+ classes = [],
page,
presentation
} = params
diff --git a/packages/11ty/_includes/components/table-of-contents/list/index.js b/packages/11ty/_includes/components/table-of-contents/list/index.js
index 5db741074..0c79ba471 100644
--- a/packages/11ty/_includes/components/table-of-contents/list/index.js
+++ b/packages/11ty/_includes/components/table-of-contents/list/index.js
@@ -1,5 +1,4 @@
-const path = require('path')
-const { html } = require('~lib/common-tags')
+import { html } from '#lib/common-tags/index.js'
/**
* Renders a TOC List
*
@@ -11,11 +10,11 @@ const { html } = require('~lib/common-tags')
*
* @return {String} TOC list
*/
-module.exports = function(eleventyConfig) {
+export default function (eleventyConfig) {
const eleventyNavigation = eleventyConfig.getFilter('eleventyNavigation')
const tableOfContentsItem = eleventyConfig.getFilter('tableOfContentsItem')
- return function(params) {
+ return function (params) {
const { collection, currentPageUrl, key, presentation } = params
const sectionNavigation = eleventyNavigation(collection, key)
diff --git a/packages/11ty/_includes/components/table-of-contents/pdf.js b/packages/11ty/_includes/components/table-of-contents/pdf.js
index cc14e4903..6c9200816 100644
--- a/packages/11ty/_includes/components/table-of-contents/pdf.js
+++ b/packages/11ty/_includes/components/table-of-contents/pdf.js
@@ -1,11 +1,11 @@
/**
* Render `table-of-contents` component with data from collections.pdf
*/
-module.exports = function(eleventyConfig) {
+export default function (eleventyConfig) {
const tableOfContentsList = eleventyConfig.getFilter('tableOfContentsList')
- return function(params) {
+ return function (params) {
const { collections, currentPageUrl, key, presentation } = params
- return tableOfContentsList({
+ return tableOfContentsList({
collection: collections.tableOfContentsPdf,
currentPageUrl,
key,
diff --git a/packages/11ty/_includes/web-components/image-sequence/index.js b/packages/11ty/_includes/web-components/image-sequence/index.js
index 0cc3ddebf..7d136cf5f 100644
--- a/packages/11ty/_includes/web-components/image-sequence/index.js
+++ b/packages/11ty/_includes/web-components/image-sequence/index.js
@@ -1,9 +1,8 @@
-import { LitElement, css, html, render, unsafeCSS } from 'lit'
+import { LitElement, html } from 'lit'
import { createRef, ref } from 'lit/directives/ref.js'
import { imageSequenceStyles } from './styles.js'
-
/**
* @class ImageSequence
* @description A reactive Lit element for showing and interacting with a sequence of images.
@@ -12,51 +11,50 @@ import { imageSequenceStyles } from './styles.js'
* and set cursor: not-allowed
*/
class ImageSequence extends LitElement {
-
- static styles = [ imageSequenceStyles ]
+ static styles = [imageSequenceStyles]
static properties = {
- animationFrame: {
+ animationFrame: {
type: Number,
- state: true,
+ state: true
},
- bufferSize: {
+ bufferSize: {
type: Number,
- state: true,
+ state: true
},
didInteract: {
type: Boolean,
- state: true,
+ state: true
},
images: {
type: Array,
- state: true,
+ state: true
},
imageUrls: {
attribute: 'image-urls',
- type: String,
+ type: String
},
index: {
- type: Number,
+ type: Number
},
intrinsicHeight: {
type: Number,
- state: true,
+ state: true
},
intrinsicWidth: {
type: Number,
- state: true,
+ state: true
},
rotateToIndex: {
attribute: 'rotate-to-index',
- type: Number,
+ type: Number
},
transition: {
- type: Number,
+ type: Number
},
visible: {
type: Boolean,
- state: true,
+ state: true
}
}
@@ -65,14 +63,14 @@ class ImageSequence extends LitElement {
/**
* @private
* @property #bufferWindow
- *
+ *
* @returns an array of indexes included in `bufferSize` given `index`
- */
- get #bufferWindow() {
+ */
+ get #bufferWindow () {
// NB: Calculated one length higher to protect against numerical under run
const imageCount = this.images.length
- const windowStart = imageCount + this.index - Math.round(this.bufferSize/2)
-
+ const windowStart = imageCount + this.index - Math.round(this.bufferSize / 2)
+
return Array(this.bufferSize)
.fill(0)
.map((_, i) => ((windowStart + i) % imageCount))
@@ -81,41 +79,41 @@ class ImageSequence extends LitElement {
/**
* @private
* @property #bufferReady
- *
+ *
* @returns true if the buffer is loaded ahead and behind of `index`
*/
- get #bufferReady() {
- return this.images.filter((img, j) => this.#bufferWindow.includes(j) && img !== null ).length === this.bufferSize
+ get #bufferReady () {
+ return this.images.filter((img, j) => this.#bufferWindow.includes(j) && img !== null).length === this.bufferSize
}
/**
* @property bufferedPct
* @returns percent of the buffer that is not-null
*/
- get bufferedPct() {
- return Math.floor( this.images.filter((img, j) => this.#bufferWindow.includes(j) && img !== null).length / this.bufferSize * 100 )
+ get bufferedPct () {
+ return Math.floor(this.images.filter((img, j) => this.#bufferWindow.includes(j) && img !== null).length / this.bufferSize * 100)
}
/**
* @property someImagesLoaded
* @returns true if there is at least one image loaded
*/
- get someImagesLoaded() {
+ get someImagesLoaded () {
return this.images.some((image) => image !== null)
}
/**
* @function #fetchImage
* @param url {string} - image URL to fetch
- * @param seqIndex {Number} - index to store this image
- *
+ * @param seqIndex {Number} - index to store this image
+ *
* Fetches `url`, converts it into a blob and stores the image data in `seqIndex`.
- *
+ *
* The in-flight fetch is stored in this.requests for cancellation and request deduplication, nulled on completion.
- *
+ *
* @returns {Promise} fetch resposne
*/
- #fetchImage(url, seqIndex) {
+ #fetchImage (url, seqIndex) {
if (this.requests[seqIndex]) return
const request = new Request(url)
@@ -126,7 +124,7 @@ class ImageSequence extends LitElement {
.then((bmp) => {
if (this.intrinsicHeight === 0) {
this.intrinsicHeight = bmp.height
- this.intrinsicWidth = bmp.width
+ this.intrinsicWidth = bmp.width
}
this.images[seqIndex] = bmp
})
@@ -145,12 +143,12 @@ class ImageSequence extends LitElement {
/**
* @function connectedCallback
- *
+ *
* `lit` lifecycle method fired the first time the element is connected to the document
- *
+ *
* Used to register our visibility IntersectionObserver
*/
- connectedCallback() {
+ connectedCallback () {
super.connectedCallback()
const callback = (entries, observer) => {
@@ -170,7 +168,7 @@ class ImageSequence extends LitElement {
io.observe(this)
}
- constructor() {
+ constructor () {
super()
// Passed params and config
@@ -205,7 +203,7 @@ class ImageSequence extends LitElement {
/**
* @function debounce
- *
+ *
* Returns a function, that, as long as it continues to be invoked, will not
* be triggered. The function will be called after it stops being called for
* N milliseconds. If `immediate` is passed, trigger the function on the
@@ -226,7 +224,7 @@ class ImageSequence extends LitElement {
*
* @returns
*/
- debounce(fn, wait = 250, immediate = false) {
+ debounce (fn, wait = 250, immediate = false) {
let timeout = null
return function () {
@@ -249,13 +247,13 @@ class ImageSequence extends LitElement {
/**
* @function handleMouseMove
- *
+ *
* @param {Event.buttons}
* @param {Event.clientX}
- *
+ *
* Sets interaction flag, hides overlays, and handles reversability check
*/
- handleMouseMove({ buttons, clientX }) {
+ handleMouseMove ({ buttons, clientX }) {
if (buttons) {
this.didInteract = true
@@ -281,10 +279,10 @@ class ImageSequence extends LitElement {
/**
* @function nextImage
* @param {Integer} n Number of steps between start index and end index
- *
+ *
* Set the sequence image to the index `n` steps after the current index
*/
- nextImage(n=1) {
+ nextImage (n = 1) {
const newIndex = this.index + n >= this.imageCount
? this.index + n - this.imageCount
: this.index + n
@@ -293,20 +291,20 @@ class ImageSequence extends LitElement {
/**
* @function #draw
- *
+ *
* Performs drawing operations against `this.context`
*/
- #draw(image) {
- this.context.drawImage(image,0,0)
+ #draw (image) {
+ this.context.drawImage(image, 0, 0)
}
/**
* @function #paintCanvas
- * @param {ImageBitmap} - image - image to paint
- *
+ * @param {ImageBitmap} - image - image to paint
+ *
* Paints the `canvas` element with the image from this.index
*/
- #paintCanvas(image) {
+ #paintCanvas (image) {
if (!this.canvasRef.value) {
return
}
@@ -315,29 +313,28 @@ class ImageSequence extends LitElement {
if (image) {
window.cancelAnimationFrame(this.blitting)
- this.blitting = window.requestAnimationFrame( () => this.#draw(image) )
+ this.blitting = window.requestAnimationFrame(() => this.#draw(image))
return
}
if (!this.images[this.index]) {
- this.#fetchImage(this.imageUrls[this.index],this.index)
+ this.#fetchImage(this.imageUrls[this.index], this.index)
return
}
window.cancelAnimationFrame(this.blitting)
- this.blitting = window.requestAnimationFrame( () => this.#draw(this.images[this.index]) )
-
+ this.blitting = window.requestAnimationFrame(() => this.#draw(this.images[this.index]))
}
/**
* @function willUpdate
* @param changedProperties
- *
+ *
* `lit` lifecycle method for changed properties
*/
- willUpdate(changedProperties) {
- // Determine the animation indices, preload them, and then do the rotation
- if (changedProperties.has('rotateToIndex') && this.rotateToIndex!==false) {
+ willUpdate (changedProperties) {
+ // Determine the animation indices, preload them, and then do the rotation
+ if (changedProperties.has('rotateToIndex') && this.rotateToIndex !== false) {
const frameCount = this.rotateToIndex - this.index + this.bufferSize / 2
const animationIndices = Array(frameCount).fill(0).map((_, i) => this.index + i + 1)
this.#preloadImages(animationIndices).then(this.animateRotation(this.rotateToIndex))
@@ -349,7 +346,7 @@ class ImageSequence extends LitElement {
if (this.images[this.animationFrame] === null) { return }
this.#paintCanvas(this.images[this.animationFrame])
- }
+ }
if (changedProperties.has('index') && this.someImagesLoaded) {
this.#preloadImages().then(() => {
@@ -365,21 +362,21 @@ class ImageSequence extends LitElement {
/**
* @function #preloadImages
- *
+ *
* Loads images of this.indexesToBuffer -- ahead and behind `this.index`
- *
+ *
* @returns {Promise} - Promise resolution for all preloads
*/
- #preloadImages(bufferWindow) {
- if (!this.images.some(i => i === null)) return Promise.all([]);
+ #preloadImages (bufferWindow) {
+ if (!this.images.some(i => i === null)) return Promise.all([])
const indexesToLoad = bufferWindow ?? this.#bufferWindow
const imageRequests = this.images
.map((image, i) => {
// Skip anything out of our range or already loaded
- if (!indexesToLoad.includes(i) || image !== null) return null;
+ if (!indexesToLoad.includes(i) || image !== null) return null
const url = this.imageUrls[i]
- return this.#fetchImage(url, i);
+ return this.#fetchImage(url, i)
})
.filter((imageRequest) => imageRequest)
@@ -389,7 +386,7 @@ class ImageSequence extends LitElement {
/**
* Animates a rotation by stepping through images from the current index to the provided `newValue`
*/
- animateRotation(untilIndex) {
+ animateRotation (untilIndex) {
if (this.animationFrame === untilIndex) return
this.animationFrame = this.index
@@ -421,14 +418,14 @@ class ImageSequence extends LitElement {
* Set the sequence image to the index `n` indices before the current index
* @param {Integer} n Number of steps between start index and end index
*/
- previousImage(n=1) {
+ previousImage (n = 1) {
const newIndex = this.index - n < 0
? this.imageCount + this.index - n
: this.index - n
this.index = newIndex
}
- synchronizeSequenceInstances() {
+ synchronizeSequenceInstances () {
clearTimeout(this.updateTimer)
this.updateTimer = setTimeout(() => {
const sequenceInstances = document.querySelectorAll(`q-image-sequence[sequence-id="${this.sequenceId}"]`)
@@ -440,9 +437,9 @@ class ImageSequence extends LitElement {
}, 250)
}
- render() {
- const descriptionOverlay = this.isInteractive ?
- html`
+ render () {
+ const descriptionOverlay = this.isInteractive
+ ? html`
${this.description}
- `
+ `
: ''
return html`
-
-
Loading Image Sequence (${ this.bufferedPct }%)...
+
+
Loading Image Sequence (${this.bufferedPct}%)...
diff --git a/packages/11ty/_includes/web-components/image-sequence/styles.js b/packages/11ty/_includes/web-components/image-sequence/styles.js
index f1b5dbb28..ff594f91f 100644
--- a/packages/11ty/_includes/web-components/image-sequence/styles.js
+++ b/packages/11ty/_includes/web-components/image-sequence/styles.js
@@ -147,4 +147,4 @@ export const imageSequenceStyles = css`
to {
filter: brightness(0.2);
}
- }`
\ No newline at end of file
+ }`
diff --git a/packages/11ty/_includes/web-components/lightbox/index.js b/packages/11ty/_includes/web-components/lightbox/index.js
index f09d77b40..b01445425 100644
--- a/packages/11ty/_includes/web-components/lightbox/index.js
+++ b/packages/11ty/_includes/web-components/lightbox/index.js
@@ -1,10 +1,10 @@
-import { LitElement, html, render, unsafeCSS } from 'lit'
+import { LitElement, html, render } from 'lit'
import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'
/**
* Lightbox lit-element web component markup and browser runtime
*
- * This component renders a custom element (q-lightbox) with slots for
+ * This component renders a custom element (q-lightbox) with slots for
* figures data, styles, and ui. On startup it loads its data, inserts its
* slides' markup, and manages a few internal properties and attributes during
* the component lifecycle.
@@ -12,7 +12,7 @@ import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'
* Each slide (see `_lightboxSlide`) carries a
* `q-lightbox-slides__slide` class
* `id` attribute set to the figure's id
- * `data-lightbox-current` (optional, any value) attribute lays out and displays the slide
+ * `data-lightbox-current` (optional, any value) attribute lays out and displays the slide
* `data-lightbox-preload` (optional, any value) attribute lays out the slide without display
*
* This lightbox expects its UI slot to have elements for a few controls:
@@ -23,29 +23,27 @@ import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'
* It dynamically updates the content of its UI labels with these data attributes:
* - `data-lightbox-counter-current` displays the current slide index
* - `data-lightbox-counter-total` displays total number of slides
- *
+ *
* For each figure's data:
* - Aligned to an internal data representation that eases slide logic and markup
* - Inserted into slide markup with the appropriate slot and added to the lightbox
*/
class Lightbox extends LitElement {
-
static properties = {
currentId: { attribute: 'current-id', type: String },
preloadNextId: { attribute: 'preload-next-id', type: String },
- preloadPrevId: { attribute: 'preload-prev-id', type: String },
+ preloadPrevId: { attribute: 'preload-prev-id', type: String }
}
- setupStyles() {
- let styleElement = this.querySelector('style[slot="lightbox-styles"]')
+ setupStyles () {
+ const styleElement = this.querySelector('style[slot="lightbox-styles"]')
if (styleElement && styleElement.sheet) {
- this.adoptedStyleSheets = [ styleElement.sheet ]
+ this.adoptedStyleSheets = [styleElement.sheet]
}
-
}
- constructor() {
+ constructor () {
super()
// NB: UI controls check this.slides so load figures first
@@ -56,59 +54,59 @@ class Lightbox extends LitElement {
this.setupKeyboardControls()
}
- get counterCurrent() {
+ get counterCurrent () {
return this.querySelector('[data-lightbox-counter-current]')
}
- get counterTotal() {
+ get counterTotal () {
return this.querySelector('[data-lightbox-counter-total]')
}
- get fullscreenButton() {
+ get fullscreenButton () {
return this.querySelector('[data-lightbox-fullscreen]')
}
- get nextButton() {
+ get nextButton () {
return this.querySelector('[data-lightbox-next]')
}
- get previousButton() {
+ get previousButton () {
return this.querySelector('[data-lightbox-previous]')
}
- get slides() {
+ get slides () {
return this.querySelectorAll('.q-lightbox-slides__slide')
}
- get slideIds() {
+ get slideIds () {
return Array
.from(this.slides)
.map((slide) => slide.id)
}
- get currentSlide() {
+ get currentSlide () {
if (!this.slides.length) return
if (!this.currentId) return this.slides[0]
return this.slides[this.currentSlideIndex]
}
- get currentSlideIndex() {
+ get currentSlideIndex () {
if (!this.slides.length) return
if (!this.currentId) return 0
return this.slideIds.findIndex((id) => id === this.currentId)
}
- get fullscreen() {
+ get fullscreen () {
return document.fullscreen || this.wrapper.classList.contains('quire-entry__lightbox--fullscreen')
}
- get wrapper() {
+ get wrapper () {
return document.querySelector('.quire-entry__lightbox')
}
- enterFullscreen() {
+ enterFullscreen () {
const lightbox = this.renderRoot.firstElementChild
if (lightbox.requestFullscreen) {
lightbox.requestFullscreen()
@@ -119,7 +117,7 @@ class Lightbox extends LitElement {
}
}
- exitFullscreen() {
+ exitFullscreen () {
if (document.exitFullscreen) {
document.exitFullscreen()
} else {
@@ -129,7 +127,7 @@ class Lightbox extends LitElement {
}
}
- next() {
+ next () {
if (!this.slides.length) return
const nextIndex = this.currentSlideIndex + 1
@@ -137,7 +135,7 @@ class Lightbox extends LitElement {
this.currentId = nextId
}
- previous() {
+ previous () {
if (!this.slides.length) return
const previousIndex = this.currentSlideIndex - 1
@@ -150,14 +148,9 @@ class Lightbox extends LitElement {
* @param {Object} figure - data for a quire figure
* @return {Object} - data w/ a few useful props added
*/
- _alignSlideData(figure) {
+ _alignSlideData (figure) {
const {
- aspect_ratio: aspectRatio='widescreen',
- caption,
- credit,
- id,
- isSequence,
- label,
+ aspect_ratio: aspectRatio = 'widescreen',
mediaType
} = figure
@@ -171,23 +164,24 @@ class Lightbox extends LitElement {
* @function _lightboxSlide
* @param {Object} figure - slide data
* @return {Lit.html} - Lit HTML component
- *
+ *
* Composites slide data into the slide markup and injects pre-serialized figure elements
**/
- _lightboxSlide(figure) {
- const { id,
- mediaType,
+ _lightboxSlide (figure) {
+ const {
+ id,
+ mediaType,
figureElementContent,
- annotationsElementContent,
- aspectRatio,
+ annotationsElementContent,
+ aspectRatio,
isVideo,
isAudio,
- label,
- labelHtml,
- caption,
- captionHtml,
- credit,
- creditHtml
+ label,
+ labelHtml,
+ caption,
+ captionHtml,
+ credit,
+ creditHtml
} = figure
const slideMediaClass = `q-lightbox-slides__element--${mediaType}`
@@ -199,34 +193,34 @@ class Lightbox extends LitElement {
${unsafeHTML(figureElementContent)}
`
}
- setupFiguresData() {
+ setupFiguresData () {
const figuresData = this.querySelector('script[type="application/json"]')
const figures = JSON.parse(figuresData.innerHTML)
this.figures = figures
- figures.forEach( fig => {
- console.log('Rendering',fig.id)
+ figures.forEach(fig => {
+ console.log('Rendering', fig.id)
const dat = this._alignSlideData(fig)
-
+
// NB: This is done in lightDOM *not* shadowDOM
- let slideElement = document.createElement('template')
- render(this._lightboxSlide(dat),slideElement.content)
+ const slideElement = document.createElement('template')
+ render(this._lightboxSlide(dat), slideElement.content)
const slide = slideElement.content.cloneNode(true)
this.appendChild(slide)
})
}
- setupFullscreenButton() {
+ setupFullscreenButton () {
if (!this.fullscreenButton) return
this.fullscreenButton.addEventListener('click', () => {
@@ -234,7 +228,7 @@ class Lightbox extends LitElement {
})
}
- setupNavigationButtons() {
+ setupNavigationButtons () {
if (!this.nextButton || !this.previousButton) return
this.nextButton.addEventListener('click', () => {
@@ -245,24 +239,24 @@ class Lightbox extends LitElement {
})
}
- setupKeyboardControls() {
+ setupKeyboardControls () {
document.addEventListener('keyup', ({ code }) => {
if (this.slides.length > 1) {
- switch(code) {
- default:
- break
+ switch (code) {
case 'ArrowRight':
this.next()
break
case 'ArrowLeft':
this.previous()
break
+ default:
+ break
}
}
})
}
- toggleFullscreen() {
+ toggleFullscreen () {
this.updateFullscreenButton()
if (this.fullscreen) {
@@ -272,14 +266,14 @@ class Lightbox extends LitElement {
}
}
- updateCounterElements() {
+ updateCounterElements () {
if (!this.counterCurrent || !this.counterTotal) return
this.counterCurrent.innerText = this.currentSlideIndex + 1
this.counterTotal.innerText = this.slides.length
}
- updateCurrentSlideElement() {
+ updateCurrentSlideElement () {
if (!this.currentSlide) return
this.slides.forEach((slide) => {
@@ -287,22 +281,21 @@ class Lightbox extends LitElement {
delete slide.dataset.lightboxCurrent
}
- if ([this.preloadNextId,this.preloadPrevId].includes(slide.id)) {
+ if ([this.preloadNextId, this.preloadPrevId].includes(slide.id)) {
slide.dataset.lightboxPreload = true
} else {
delete slide.dataset.lightboxPreload
}
-
})
this.currentSlide.dataset.lightboxCurrent = true
}
- updateFullscreenButton() {
+ updateFullscreenButton () {
if (this.fullscreenButton) this.fullscreenButton.dataset.lightboxFullscreen = !this.fullscreen
}
- render() {
+ render () {
if (!this.slides.length) return ''
this.currentId = this.slideIds[this.currentSlideIndex]
this.preloadNextId = this.currentSlideIndex + 1 < this.slideIds.length ? this.slideIds[this.currentSlideIndex + 1] : undefined
diff --git a/packages/11ty/_includes/web-components/modal/index.js b/packages/11ty/_includes/web-components/modal/index.js
index 755d11d9e..fcda544e4 100644
--- a/packages/11ty/_includes/web-components/modal/index.js
+++ b/packages/11ty/_includes/web-components/modal/index.js
@@ -3,39 +3,39 @@ import { LitElement, html } from 'lit'
class Modal extends LitElement {
static properties = {
active: { type: Boolean },
- currentId: { attribute: 'current-id', type: String },
+ currentId: { attribute: 'current-id', type: String }
}
- get closeButton() {
+ get closeButton () {
return this.querySelector('[data-modal-close]')
}
- get lightbox() {
+ get lightbox () {
return this.querySelector('q-lightbox')
}
- constructor() {
+ constructor () {
super()
this.setupKeyboardControls()
this.setupModalTriggers()
}
- close() {
+ close () {
this.active = false
this.currentId = null
this.updateLightboxCurrentId()
this.enableScrolling()
}
- disableScrolling() {
+ disableScrolling () {
document.querySelector('html').style.overflow = 'hidden'
}
- enableScrolling() {
+ enableScrolling () {
document.querySelector('html').style.overflow = 'auto'
}
- getCurrentFigureId(event) {
+ getCurrentFigureId (event) {
const { target } = event
let currentFigure = target
while (
@@ -47,14 +47,14 @@ class Modal extends LitElement {
return currentFigure.getAttribute('id')
}
- open(event) {
+ open (event) {
this.currentId = this.getCurrentFigureId(event)
this.active = true
this.updateLightboxCurrentId()
this.disableScrolling()
}
- setupCloseButton() {
+ setupCloseButton () {
if (!this.closeButton) return
this.closeButton.addEventListener('click', () => {
@@ -62,17 +62,17 @@ class Modal extends LitElement {
})
}
- setupKeyboardControls() {
+ setupKeyboardControls () {
document.addEventListener('keyup', ({ code }) => {
if (this.active) {
- if(code === 'Escape') {
+ if (code === 'Escape') {
this.close()
}
}
})
}
- setupModalTriggers() {
+ setupModalTriggers () {
document.querySelectorAll('.q-figure__modal-link').forEach((item) => {
item.addEventListener('click', (event) => {
event.preventDefault()
@@ -81,11 +81,11 @@ class Modal extends LitElement {
})
}
- updateLightboxCurrentId() {
+ updateLightboxCurrentId () {
this.lightbox && this.lightbox.setAttribute('current-id', this.currentId)
}
- render() {
+ render () {
this.dataset.modalActive = this.active
this.setupCloseButton()
diff --git a/packages/11ty/_layouts/base.11ty.js b/packages/11ty/_layouts/base.11ty.js
index 8c2ca439a..6bf641efc 100644
--- a/packages/11ty/_layouts/base.11ty.js
+++ b/packages/11ty/_layouts/base.11ty.js
@@ -1,5 +1,5 @@
-const path = require('path')
-const { html } = require('~lib/common-tags')
+import path from 'node:path'
+import { html } from '#lib/common-tags/index.js'
/**
* Base layout as a JavaScript method
@@ -7,7 +7,7 @@ const { html } = require('~lib/common-tags')
* @param {Object} data Final data from the Eleventy data cascade
* @return {Function} Template render function
*/
-module.exports = async function(data) {
+export default async function (data) {
const { classes, collections, content, pageData, publication } = data
const { inputPath, outputPath, url } = pageData || {}
const id = this.slugify(url) || path.parse(inputPath).name
diff --git a/packages/11ty/_layouts/cover.liquid b/packages/11ty/_layouts/cover.liquid
index bf6764b31..8fd5dd17e 100644
--- a/packages/11ty/_layouts/cover.liquid
+++ b/packages/11ty/_layouts/cover.liquid
@@ -14,7 +14,7 @@ layout: base.11ty.js
style="background-image: url('{{ imagePath }}');"
>
-
+
diff --git a/packages/11ty/_layouts/splash.liquid b/packages/11ty/_layouts/splash.liquid
index ead0f0b98..5ddfadd57 100644
--- a/packages/11ty/_layouts/splash.liquid
+++ b/packages/11ty/_layouts/splash.liquid
@@ -12,7 +12,7 @@ description: splash page layout
{% if image %}
-
+
{% endif %}