Merge pull request #513 from oddbird/11ty

Upgrade to node v20, 11ty v3, ESM throughout.

.devcontainer/devcontainer.json

@@ -1,11 +1,10 @@
 {
   "name": "Oddleventy",
-  "image": "node:18",
+  "image": "node:20",
   "containerEnv": {
     "SHELL": "/bin/bash"
   },
   "forwardPorts": [8080],
-
   "customizations": {
     "vscode": {
       "extensions": [

.eslintrc.yml

@@ -2,51 +2,19 @@
 
 root: true
 parserOptions:
-  sourceType: script
-  ecmaVersion: 2021
-overrides:
-  - files:
-      - rollup.config.js
-    parserOptions:
-      sourceType: module
-    env:
-      browser: true
-      commonjs: true
-      node: false
-    plugins:
-      - simple-import-sort
-    rules:
-      simple-import-sort/imports: 1
-      import/order: 0
+  sourceType: module
+  ecmaVersion: 2022
 env:
   es6: true
   node: true
 plugins:
-  - import
-settings:
-  import/internal-regex: ^#/
-  import/parsers:
-    '@typescript-eslint/parser':
-      - '.ts'
-      - '.tsx'
-  import/resolver:
-    typescript: {}
-    node:
-      extensions:
-        - .js
-        - .cjs
+  - simple-import-sort
 extends:
   - eslint:recommended
-  - plugin:import/recommended
   - prettier
 rules:
   # Import
-  import/order:
-    - 1
-    - newlines-between: always
-      alphabetize:
-        order: 'asc'
-  import/named: 1
+  simple-import-sort/imports: 1
 
   # Possible Errors
   getter-return: 2

.github/dependabot.yml

@@ -1,8 +1,33 @@
 version: 2
+
 updates:
   - package-ecosystem: github-actions
     directory: '/'
     schedule:
       interval: weekly
-      time: '05:00'
+      time: '04:00'
       timezone: America/New_York
+    commit-message:
+      prefix: '[skip netlify] '
+
+  - package-ecosystem: npm
+    directory: '/'
+    versioning-strategy: increase
+    schedule:
+      interval: weekly
+      time: '04:00'
+      timezone: America/New_York
+    commit-message:
+      prefix: '[skip netlify] '
+    groups:
+      npm-major-upgrades:
+        update-types:
+          - 'major'
+      npm-minor-upgrades:
+        update-types:
+          - 'minor'
+          - 'patch'
+    ignore:
+      - dependency-name: 'date-fns'
+        versions:
+          - 3.x

.nvmrc

@@ -1 +1 @@
-v18
+v20

.yarnrc.yml

@@ -1,5 +1,7 @@
 compressionLevel: mixed
+
 enableGlobalCache: false
+
 nodeLinker: node-modules
 
 packageExtensions:

README.md

@@ -16,25 +16,23 @@ This site is built using:
 
 ### Install Node and Yarn
 
-We recommend using [nvm](https://github.com/nvm-sh/nvm) for node version
+We recommend using [nvm](https://github.com/nvm-sh/nvm) for Node version
 management. [Install it](https://github.com/nvm-sh/nvm#installation-and-update)
 if necessary, then run `nvm install` (once per active shell) to use the correct
-version of node for OddSite development.
+version of Node for OddSite development.
 
-The correct [Yarn](https://yarnpkg.com/) version is included in the repo, and
-will be used automatically for any `yarn` command.
+The correct [Yarn](https://yarnpkg.com/) version is included with Node, and will
+be used automatically for any `yarn` command. To activate it, run `corepack
+enable` (once per local Node installation).
 
-To upgrade the node version used by OddSite, update the version number in these
+To upgrade the Node version used by OddSite, update the version number in these
 places and then run `nvm install` to upgrade:
 
 - `package.json` (`engines.node` field)
 - `.nvmrc`
 
-To upgrade the yarn version used by OddSite, update the version number in these
-places and then run `yarn set version <new-version>` to upgrade:
-
-- `package.json` (`engines.yarn` field)
-- `.yarnrc` (`yarn-path` line)
+To upgrade the yarn version used by OddSite, run `yarn set version latest` and
+then update the version range in `package.json` (`engines.yarn` field).
 
 ### Install dependencies
 

babel.config.cjs → babel.config.js

@@ -1,6 +1,4 @@
-'use strict';
-
-module.exports = {
+export default {
   presets: [
     [
       '@babel/preset-env',

content/_data/env.cjs → content/_data/env.js

@@ -1,7 +1,5 @@
 /* eslint-disable no-process-env */
 
-'use strict';
-
-module.exports = {
+export default {
   CONTEXT: process.env.CONTEXT,
 };

content/_data/filters.cjs → content/_data/filters.js

@@ -1,16 +1,14 @@
-'use strict';
+import { readdir } from 'node:fs';
+import { join } from 'node:path';
 
-const fs = require('fs');
-const path = require('path');
-
-const doxray = require('doxray');
+import doxray from 'doxray';
 
 // relative path from the root directory of remedocs
 // to the root directory of any package to be documented
 const remeDir = './';
 
 // relative path from remeDir to filters inside the project
-const filterDir = path.join(remeDir, 'src/filters/');
+const filterDir = join(remeDir, 'src/filters/');
 
 // define the documentation regex…
 const doxOptions = {
@@ -30,18 +28,18 @@ const doxOptions = {
   },
 };
 
-module.exports = () =>
+export default () =>
   new Promise((resolve, reject) => {
     // get the docs
-    fs.readdir(filterDir, (err, files) => {
+    readdir(filterDir, (err, files) => {
       if (err) {
         reject(err);
       }
 
       const js = files
         .filter((file) => file.endsWith('.js') || file.endsWith('.cjs'))
         .map((file) => {
-          const filePath = path.join(filterDir, file);
+          const filePath = join(filterDir, file);
           const docs = doxray([filePath], doxOptions);
           const info = docs.patterns.find(
             (pattern) => String(pattern.category).toLowerCase() === 'file',

content/_data/macros.cjs → content/_data/macros.js

@@ -1,16 +1,14 @@
-'use strict';
+import { readdir } from 'node:fs';
+import { join } from 'node:path';
 
-const fs = require('fs');
-const path = require('path');
-
-const doxray = require('doxray');
+import doxray from 'doxray';
 
 // relative path from the root directory of remedocs
 // to the root directory of any package to be documented
 const remeDir = './';
 
 // relative path from remeDir to njk documents inside the project
-const includeDir = path.join(remeDir, 'content/_includes/');
+const includeDir = join(remeDir, 'content/_includes/');
 
 // define the documentation regex…
 const doxOptions = {
@@ -24,18 +22,18 @@ const doxOptions = {
   },
 };
 
-module.exports = () =>
+export default () =>
   new Promise((resolve, reject) => {
     // get the docs
-    fs.readdir(includeDir, (err, files) => {
+    readdir(includeDir, (err, files) => {
       if (err) {
         reject(err);
       }
 
       const njk = files
         .filter((file) => file.endsWith('.macros.njk'))
         .map((file) => {
-          const filePath = path.join(includeDir, file);
+          const filePath = join(includeDir, file);
           const docs = doxray([filePath], doxOptions);
           const info = docs.patterns.find(
             (pattern) => String(pattern.category).toLowerCase() === 'file',

content/_data/site.yaml

@@ -11,11 +11,11 @@ styles:
   - screen.css
 facebook_id: 1820980378150914
 social:
-  email: birds
-  mastodon:
-    user: oddbird
-    server: front-end.social
-  github: oddbird
+  - email: birds
+  - mastodon:
+      user: oddbird
+      server: front-end.social
+  - github: oddbird
 nav:
   - url: /work/
   - url: /services/

content/_includes/birds.macros.njk

@@ -94,7 +94,7 @@ params:
     {%- set name = all or bird -%}
     {{ utility.link_if(
       content=name | mdInline | safe,
-      url=page.url if link else none,
+      url=page.page.url if link else none,
       class=class
     ) }}
   {%- else -%}

content/_includes/contact.macros.njk

@@ -83,7 +83,7 @@ label: social
 note: Generate a list of social-media icon-links
 params:
   data:
-    type: object
+    type: array
     note: site-slug/user-id pairs
   name:
     type: string
@@ -124,35 +124,37 @@ params:
 
   {%- if data -%}
     <ul class="social-list">
-    {%- for site, id in data -%}
-      {%- set info = sites[site] -%}
-      {%- if info -%}
-        <li>
-          {{- utility.icon_link(
-            icon='social/' + (info.icon or site),
-            text=social_context(
-              user=info.user | replace("%s", id) if info.user else info.text or id,
-              site=info.title or site | capitalize
-            ) | safe,
-            url=info.url | replace("%s", id),
-            class=info.class or 'u-url',
-            attrs={'rel': rel} if rel else {}
-          ) -}}
-        </li>
-      {%- elif site == 'mastodon' -%}
-        <li>
-          {{- utility.icon_link(
-            icon='social/mastodon',
-            text=social_context(
-              user=['@', id.user, '@', id.server] | join,
-              site='Mastodon'
-            ) | safe,
-            url=['https://', id.server, '/@', id.user] | join,
-            class='u-url',
-            attrs={'rel': rel} if rel else {}
-          ) -}}
-        </li>
-      {%- endif -%}
+    {%- for social in data -%}
+      {%- for site, id in social -%}
+        {%- set info = sites[site] -%}
+        {%- if info -%}
+          <li>
+            {{- utility.icon_link(
+              icon='social/' + (info.icon or site),
+              text=social_context(
+                user=info.user | replace("%s", id) if info.user else info.text or id,
+                site=info.title or site | capitalize
+              ) | safe,
+              url=info.url | replace("%s", id),
+              class=info.class or 'u-url',
+              attrs={'rel': rel} if rel else {}
+            ) -}}
+          </li>
+        {%- elif site == 'mastodon' -%}
+          <li>
+            {{- utility.icon_link(
+              icon='social/mastodon',
+              text=social_context(
+                user=['@', id.user, '@', id.server] | join,
+                site='Mastodon'
+              ) | safe,
+              url=['https://', id.server, '/@', id.user] | join,
+              class='u-url',
+              attrs={'rel': rel} if rel else {}
+            ) -}}
+          </li>
+        {%- endif -%}
+      {%- endfor -%}
     {%- endfor -%}
     </ul>
   {%- endif -%}

content/_includes/embed.macros.njk

@@ -337,7 +337,7 @@ params:
           path='logos/' + logo,
           alt=[client, title] | join(': ') if (client and title) else title
         ),
-        url=page.url if page else none
+        url=page.page.url if page else none
       ) }}
     {%- endfor -%}
   </div>

content/_includes/page/base.njk

@@ -22,7 +22,7 @@
 
 {# The actual output HTML #}
 <main data-layout="main" aria-labelledby="title" {{ utility.attr_if('class', hclass) }}>
-  {% include "page/header.njk" %}
+  {% include 'page/header.njk' %}
 
   {% if content -%}
     {%- set hcontent = 'e-content' if is_entry else ('p-note' if is_bird else none) -%}
@@ -31,8 +31,8 @@
     </div>
   {%- endif %}
 
-  {% include "page/mentions.njk" %}
-  {% include "page/list.njk" %}
+  {% include 'page/mentions.njk' %}
+  {% include 'page/list.njk' %}
 
   <!-- used for webmentions -->
   <a href="{{ page.url | url }}" class="u-url" hidden>{{ (banner or title) | removeMd }}</a>