task: Re-organize plugins; Fixes to config/ .env.js (#11)

Author: nfreear

.env.example.js

@@ -1,8 +1,11 @@
 /**
  * Environment variables for local development only.
+ * Copy, rename to ".env.js" and edit.
+ *
+ * @see .github/workflow/deploy.yml - Production ENV.
  */
 
-process.env._THEME = 'mobile';
+process.env.DIA_THEME = 'mobile';
 // process.env._THEME = 'original';
 // Search API key: https://developers.google.com/custom-search/v1/introduction#identify_your_application_to_google_with_api_key
 process.env.SEARCH_API_KEY = 'abc';

.github/workflows/deploy.yml

@@ -12,8 +12,8 @@ env:
   SEARCH_API_KEY: ${{ secrets.SEARCH_API_KEY }}
   SEARCH_ID: ${{ secrets.SEARCH_ID }}
   ABSOLUTE_URL: https://nfreear.github.io/diveintoaccessibility
-  _THEME: mobile
-  # _THEME: original
+  DIA_THEME: mobile
+  # DIA_THEME: original
 
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:

eleventy.config.js

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import debug from 'debug';
-import diaPluginLoader from 'dia-plugins';
+import diaPluginLoader, { loadEnvJs } from 'dia-plugins';
 
 // GitHub Pages sub-directory deployment.
 const buildBaseUrl = '/diveintoaccessibility/';
@@ -14,7 +14,8 @@ export default async function (eleventyConfig) {
   const debugLog = debug('DIA:config');
 
   debugLog('Loading config…');
-  await loadEnvJs();
+
+  await loadEnvJs([import.meta.dirname, '.env.js']);
 
   // Order matters, put this at the top of your configuration file.
   eleventyConfig.setInputDirectory('pages');
@@ -60,15 +61,6 @@ function getLinkFilePaths () {
   ];
 }
 
-async function loadEnvJs () {
-  try {
-    await import('./.env.js');
-    console.log('.env.js loaded:', process.env);
-  } catch (err) {
-    console.warn('Warning: .env.js not loaded.', err.code, err.message);
-  }
-}
-
 /* export const config = {
   dir: {
     includes: '../_includes',

package.json

@@ -11,10 +11,6 @@
   "scripts": {
     "dry-run": "cd plugins; npm publish --dry-run",
     "clean": "rm -rf _site",
-    "build:original": "_THEME=orig npx @11ty/eleventy",
-    "build:mobile": "_THEME=mobile npx @11ty/eleventy",
-    "start:original": "_THEME=orig npx @11ty/eleventy --serve",
-    "start:mobile": "_THEME=mobile npx @11ty/eleventy --serve",
     "build": "npx @11ty/eleventy",
     "start": "npx @11ty/eleventy --serve",
     "lint:fix": "npx eslint --fix .",

plugins/index.js

@@ -1,5 +1,6 @@
 import originalThemePlugin from './original-theme/originalThemePlugin.js';
 import mobileThemePlugin from './mobile-theme/mobileThemePlugin.js';
+import themeSwitchPlugin from './theme-switch/themeSwitchPlugin.js';
 import addLinkRefsPlugin from './pre-process/AddLinksPlugin.js';
 import pageIdAndInfoPlugin from './page-id/PageIdPlugin.js';
 import sortByDayNumberPlugin from './page-id/sortByDayNumberPlugin.js';
@@ -9,21 +10,7 @@ import importMapPlugin from './client-js/importMapPlugin.js';
 import baseUrlShortcodePlugin from './shortcode/baseUrlShortcodePlugin.js';
 import searchIdShortcodePlugin from './shortcode/searchIdShortcodePlugin.js';
 import customCollectionsPlugin from './page-id/customCollectionsPlugin.js';
-
-/**
- * Load original or mobile theme, depending on `_THEME` environment variable.
- */
-function themeSwitchPlugin (eleventyConfig, options) {
-  const isMobile = (process.env._THEME === 'mobile');
-
-  console.log('themeSwitchPlugin:', process.env._THEME);
-
-  if (isMobile) {
-    return mobileThemePlugin(eleventyConfig, options);
-  } else {
-    return originalThemePlugin(eleventyConfig, options);
-  }
-}
+import loadEnvJs from './utilities/loadEnvJs.js';
 
 /**
  * Load all plugins in the collection.
@@ -53,7 +40,8 @@ export {
   originalThemePlugin, mobileThemePlugin, themeSwitchPlugin,
   addLinkRefsPlugin, pageIdAndInfoPlugin, sortByDayNumberPlugin,
   clientJsPlugin, importMapPlugin, baseUrlShortcodePlugin, debugFiltersPlugin,
-  customCollectionsPlugin
+  customCollectionsPlugin, searchIdShortcodePlugin,
+  loadEnvJs
 };
 
 export default diaPluginLoader;

plugins/theme-switch/themeSwitchPlugin.js

@@ -0,0 +1,18 @@
+import originalThemePlugin from '../original-theme/originalThemePlugin.js';
+import mobileThemePlugin from '../mobile-theme/mobileThemePlugin.js';
+
+/**
+ * Load original or mobile theme, depending on `_THEME` environment variable.
+ */
+export default function themeSwitchPlugin (eleventyConfig, options) {
+  console.assert(process.env.DIA_THEME, 'Missing _THEME environment variable.');
+  const isMobile = (process.env.DIA_THEME === 'mobile');
+
+  console.log('themeSwitchPlugin:', process.env.DIA_THEME);
+
+  if (isMobile) {
+    return mobileThemePlugin(eleventyConfig, options);
+  } else {
+    return originalThemePlugin(eleventyConfig, options);
+  }
+}

plugins/utilities/loadEnvJs.js

@@ -0,0 +1,16 @@
+import { resolve } from 'node:path';
+
+/**
+ * Utility to load environment variables set in a JS file, for local development.
+ *
+ * @see https://github.com/motdotla/dotenv
+ */
+export default async function loadEnvJs (envJsPathParts = ['./.env.js']) {
+  const envJsFile = resolve(...envJsPathParts);
+  try {
+    await import(envJsFile);
+    console.log('.env.js loaded:', process.env);
+  } catch (err) {
+    console.warn('Warning: .env.js not loaded:', envJsFile, err.code, err.message);
+  }
+}