fix: Internal links; Use HtmlBasePlugin (#22)

Author: nfreear

eleventy.config.js

@@ -1,10 +1,11 @@
+import { HtmlBasePlugin } from '@11ty/eleventy';
 import { resolve } from 'node:path';
 import debug from 'debug';
 import diaPluginLoader, { loadEnvJs } from 'dia-plugins';
 import togglePopoverShortcode from 'eleventy-plugin-popover';
 
 // GitHub Pages sub-directory deployment.
-const buildBaseUrl = '/diveintoaccessibility/';
+const baseHref = '/diveintoaccessibility/';
 
 /**
  * Configure Eleventy
@@ -44,9 +45,11 @@ export default async function (eleventyConfig) {
     return (data) => pageId.compute(data.page);
   }); */
 
+  eleventyConfig.addPlugin(HtmlBasePlugin, { baseHref }); // eleventyConfig.pathPrefix,
+
   eleventyConfig.addPlugin(diaPluginLoader, {
     linkFiles: getLinkFilePaths(),
-    buildBaseUrl
+    buildBaseUrl: baseHref
   });
 
   eleventyConfig.addPlugin(togglePopoverShortcode);
@@ -64,6 +67,10 @@ function getLinkFilePaths () {
   ];
 }
 
+export const config = {
+  pathPrefix: baseHref,
+};
+
 /* export const config = {
   dir: {
     includes: '../_includes',

pages/en/index.md

@@ -3,7 +3,7 @@ layout: page
 title: Home
 eleventyComputed:
   status: amber
-  notesUrl: ./en/notes/index.html
+  notesUrl: ./notes/index.html
   archive: https://web.archive.org/web/20110927131211/http://diveintoaccessibility.org/
   archiveDate: 2011-09-27
 ---
@@ -20,17 +20,17 @@ This book answers two questions.  The first question is "Why should I make my we
 ## Read <cite>Dive Into Accessibility</cite>
 
 <dl>
-<dt><a href="./en/table_of_contents.html">Table of contents</a></dt>
+<dt><a href="./table_of_contents.html">Table of contents</a></dt>
 <dd>All tips, in the order in which they were originally published.  The recommended way to read the book for the first time.</dd>
-<dt><a href="./en/by_person.html">Tips by person</a></dt>
+<dt><a href="./by_person.html">Tips by person</a></dt>
 <dd>Here the tips are grouped by the people who benefit from them.</dd>
-<dt><a href="./en/by_disability.html">Tips by disability</a></dt>
+<dt><a href="./by_disability.html">Tips by disability</a></dt>
 <dd>Here the tips are grouped by the disabilities that benefit from them.  This includes both physical and technological disabilities.</dd>
-<dt><a href="./en/by_design_principle.html">Tips by design principle</a></dt>
+<dt><a href="./by_design_principle.html">Tips by design principle</a></dt>
 <dd>Here the tips are grouped by design principles proposed by the <abbr title="World Wide Web Consortium">W3C</abbr>.  All web pages should be perceivable, operable, navigable, understandable, and robust.</dd>
-<dt><a href="./en/by_web_browser.html">Tips by web browser</a></dt>
+<dt><a href="./by_web_browser.html">Tips by web browser</a></dt>
 <dd>Here the tips are grouped by the web browsers or assistive technologies that benefit from them.</dd>
-<dt><a href="./en/by_publishing_tool.html">Tips by publishing tool</a></dt>
+<dt><a href="./by_publishing_tool.html">Tips by publishing tool</a></dt>
 <dd>Here the tips are grouped by the publishing tools that can implement them. Each tip includes specific instructions for each publishing tool, where applicable.</dd>
 </dl>
 

pages/en/notes/index.md

@@ -15,7 +15,7 @@ Not surprisingly after that amount of time, there are errors, some out-of-date p
 
 Here are two reasons:
 
-1. [Translations][] are still live out on the Web, and I realised that if these persisted, without the problems being documented, then readers would be likely to pick up wrong ideas. And while I have written a dry [Errata][] document, more detail can be added to this page-by-page commentary.
+1. [Translations][n/translations] are still live out on the Web, and I realised that if these persisted, without the problems being documented, then readers would be likely to pick up wrong ideas. And while I have written a dry [Errata][] document, more detail can be added to this page-by-page commentary.
 
 2. Mark Pilgrim’s original [user-centered][ucd] narrative, with realistic personas, which was revolutionary in 2002, still has value now.
 
@@ -24,26 +24,34 @@ So, I am documenting the errors, out-of-date practices, and other notes for indi
 ### Index of notes
 
 * Note for [Day 10: Somewhat flawed][note 10]
-    - Day 10: [Presenting your main content first][day 10]
+    - Day 10: [Presenting your main content first][n/day 10]
 * Note for [Day 11: Incorrect implementation][note 11]
-    - Day 11: [Skipping over navigation links][day 11]
+    - Day 11: [Skipping over navigation links][n/day 11]
 * Note for [Day 14: Don't do this!][note 14]
-    - Day 14: [Adding titles to links][day 14]
+    - Day 14: [Adding titles to links][n/day 14]
 * Note for [Day 15: Caution!][note 15]
-    - Day 15: [Defining keyboard shortcuts][day 15]
+    - Day 15: [Defining keyboard shortcuts][n/day 15]
 * Note for [Day 17: `<acronym>` is deprecated][note 17]
-    - Day 17: [Defining acronyms][day 17]
+    - Day 17: [Defining acronyms][n/day 17]
 * Note for [Day 20: `summary` is deprecated][note 20]
-    - Day 20: [Providing a summary for tables][day 20]
+    - Day 20: [Providing a summary for tables][n/day 20]
 * Also see: [errata document on GitHub][errata].
 
-[note 10]: ./en/notes/day_10_presenting_your_main_content_first.html
-[note 11]: ./en/notes/day_11_skipping_over_navigation_links.html
-[note 14]: ./en/notes/day_14_adding_titles_to_links.html
-[note 15]: ./en/notes/day_15_defining_keyboard_shortcuts.html
-[note 17]: ./en/notes/day_17_defining_acronyms.html
-[note 20]: ./en/notes/day_20_providing_a_summary_for_tables.html
+[note 10]: ./day_10_presenting_your_main_content_first.html
+[note 11]: ./day_11_skipping_over_navigation_links.html
+[note 14]: ./day_14_adding_titles_to_links.html
+[note 15]: ./day_15_defining_keyboard_shortcuts.html
+[note 17]: ./day_17_defining_acronyms.html
+[note 20]: ./day_20_providing_a_summary_for_tables.html
 [errata]: https://github.com/nfreear/diveintoaccessibility/blob/revive/docs/ERRATA.md
 
+[n/day 10]: ../day_10_presenting_your_main_content_first.html
+[n/day 11]: ../day_11_skipping_over_navigation_links.html
+[n/day 14]: ../day_14_adding_titles_to_links.html
+[n/day 15]: ../day_15_defining_keyboard_shortcuts.html
+[n/day 17]: ../day_17_defining_acronyms.html
+[n/day 20]: ../day_20_providing_a_summary_for_tables.html
+[n/translations]: ../translations.html
+
 [dia2002]: https://web.archive.org/web/20020724125508/http://diveintoaccessibility.org/
 [ucd]: https://en.wikipedia.org/wiki/User-centered_design

pages/links/internal.md

@@ -8,64 +8,64 @@ permalink: false
 [email]: mailto:f8dy@diveintoaccessibility.org
 [translate-email]: mailto:translate@diveintoaccessibility.org
 
-[home]: ./en/index.html
-[table of contents]: ./en/table_of_contents.html
-[introduction]: ./en/introduction.html
-[search]: ./en/mt/mt-search.cgi
+[home]: ./index.html
+[table of contents]: ./table_of_contents.html
+[introduction]: ./introduction.html
+[search]: ./mt/mt-search.cgi
 [feedback]: mailto:feedback@diveintoaccessibility.org
 
-[jackie]: ./en/day_1_jackie.html
-[michael]: ./en/day_2_michael.html
-[bill]: ./en/day_3_bill.html
-[lillian]: ./en/day_4_lillian.html
-[marcus]: ./en/day_5_marcus.html
-
-[day 1]: ./en/day_1_jackie.html
-[day 2]: ./en/day_2_michael.html
-[day 3]: ./en/day_3_bill.html
-[day 4]: ./en/day_4_lillian.html
-[day 5]: ./en/day_5_marcus.html
-
-[day 6]: ./en/day_6_choosing_a_doctype.html
-[day 7]: ./en/day_7_identifying_your_language.html
-[day 8]: ./en/day_8_constructing_meaningful_page_titles.html
-[day 9]: ./en/day_9_providing_additional_navigation_aids.html
-[day 10]: ./en/day_10_presenting_your_main_content_first.html
-
-[day 11]: ./en/day_11_skipping_over_navigation_links.html
-[day 12]: ./en/day_12_using_color_safely.html
-[day 13]: ./en/day_13_using_real_links.html
-[day 14]: ./en/day_14_adding_titles_to_links.html
-[day 15]: ./en/day_15_defining_keyboard_shortcuts.html
-
-[day 16]: ./en/day_16_not_opening_new_windows.html
-[day 17]: ./en/day_17_defining_acronyms.html
-[day 18]: ./en/day_18_giving_your_calendar_a_real_caption.html
-[day 19]: ./en/day_19_using_real_table_headers.html
-[day 20]: ./en/day_20_providing_a_summary_for_tables.html
-
-[day 21]: ./en/day_21_ignoring_spacer_images.html
-[day 22]: ./en/day_22_using_real_lists_or_faking_them_properly.html
-[day 23]: ./en/day_23_providing_text_equivalents_for_images.html
-[day 24]: ./en/day_24_providing_text_equivalents_for_image_maps.html
-[day 25]: ./en/day_25_using_real_horizontal_rules_or_faking_them_properly.html
-
-[day 26]: ./en/day_26_using_relative_font_sizes.html
-[day 27]: ./en/day_27_using_real_headers.html
-[day 28]: ./en/day_28_labeling_form_elements.html
-[day 29]: ./en/day_29_making_everything_searchable.html
-[day 30]: ./en/day_30_creating_an_accessibility_statement.html
-
-[conclusion]: ./en/conclusion.html
-[accessibility statement]: ./en/accessibility_statement.html
-[terms of use]: ./en/terms_of_use.html
-[translations]: ./en/translations.html
-
-[by person]: ./en/by_person.html
-[by disability]: ./en/by_disability.html
-[by design principle]: ./en/by_design_principle.html
-[by assistive technology]: ./en/by_web_browser.html
-[by publishing tool]: ./en/by_publishing_tool.html
+[jackie]: ./day_1_jackie.html
+[michael]: ./day_2_michael.html
+[bill]: ./day_3_bill.html
+[lillian]: ./day_4_lillian.html
+[marcus]: ./day_5_marcus.html
+
+[day 1]: ./day_1_jackie.html
+[day 2]: ./day_2_michael.html
+[day 3]: ./day_3_bill.html
+[day 4]: ./day_4_lillian.html
+[day 5]: ./day_5_marcus.html
+
+[day 6]: ./day_6_choosing_a_doctype.html
+[day 7]: ./day_7_identifying_your_language.html
+[day 8]: ./day_8_constructing_meaningful_page_titles.html
+[day 9]: ./day_9_providing_additional_navigation_aids.html
+[day 10]: ./day_10_presenting_your_main_content_first.html
+
+[day 11]: ./day_11_skipping_over_navigation_links.html
+[day 12]: ./day_12_using_color_safely.html
+[day 13]: ./day_13_using_real_links.html
+[day 14]: ./day_14_adding_titles_to_links.html
+[day 15]: ./day_15_defining_keyboard_shortcuts.html
+
+[day 16]: ./day_16_not_opening_new_windows.html
+[day 17]: ./day_17_defining_acronyms.html
+[day 18]: ./day_18_giving_your_calendar_a_real_caption.html
+[day 19]: ./day_19_using_real_table_headers.html
+[day 20]: ./day_20_providing_a_summary_for_tables.html
+
+[day 21]: ./day_21_ignoring_spacer_images.html
+[day 22]: ./day_22_using_real_lists_or_faking_them_properly.html
+[day 23]: ./day_23_providing_text_equivalents_for_images.html
+[day 24]: ./day_24_providing_text_equivalents_for_image_maps.html
+[day 25]: ./day_25_using_real_horizontal_rules_or_faking_them_properly.html
+
+[day 26]: ./day_26_using_relative_font_sizes.html
+[day 27]: ./day_27_using_real_headers.html
+[day 28]: ./day_28_labeling_form_elements.html
+[day 29]: ./day_29_making_everything_searchable.html
+[day 30]: ./day_30_creating_an_accessibility_statement.html
+
+[conclusion]: ./conclusion.html
+[accessibility statement]: ./accessibility_statement.html
+[terms of use]: ./terms_of_use.html
+[translations]: ./translations.html
+
+[by person]: ./by_person.html
+[by disability]: ./by_disability.html
+[by design principle]: ./by_design_principle.html
+[by assistive technology]: ./by_web_browser.html
+[by publishing tool]: ./by_publishing_tool.html
 
 [notabletrick]: ./examples/notabletrick.html
 [tabletrick]: ./examples/tabletrick.html

plugins/client-js/importMapPlugin.js

@@ -8,7 +8,7 @@ const githubPages = 'https://nfreear.github.io';
 const elementServer = `${githubPages}/elements/src/components`;
 
 const importMap = {
-  'page-note': './js/PageNoteElement.js',
+  /** @WAS 'page-note': './js/PageNoteElement.js', */
   'npm:fix-title-attr': 'https://esm.sh/fix-title-attr@0.9.5',
   'fix-title-attr': `${githubPages}/fix-title-attr/index.js`,
   'ndf-elements/dia': `${githubPages}/elements/src/dia.js`,

plugins/client-js/js/PageNoteElement.js

@@ -17,7 +17,7 @@ export default class PageNoteElement extends HTMLElement {
   #pageId;
 
   get urlTemplate () {
-    return this.getAttribute('url-template') ?? './en/notes/%s.html';
+    return this.getAttribute('url-template') ?? './notes/%s.html'; /** @WAS: './en/notes/' */
   }
 
   get mainSelector () { return this.getAttribute('main-selector') ?? 'main'; }

plugins/client-js/js/app.js

@@ -1,4 +1,4 @@
-import PageNoteElement from 'page-note';
+import PageNoteElement from './PageNoteElement.js';
 import { MySearchApiElement, MySharingWidgetElement, MySiteCounterElement } from 'ndf-elements/dia';
 import { fixTitleAttributes, fixArchiveLinks, TitleTipElement } from 'fix-title-attr';
 import defineTogglePopoverElement from 'eleventy-plugin-popover/browser';

plugins/mobile-theme/_includes/en/breadcrumb.njk

@@ -1,9 +1,9 @@
 <nav class="breadcrumb-nav" aria-labelledby="breadLabel">
 <p>
   <span id="breadLabel">You are here: </span><a
-    href="./en/">Home</a><x-sep
+    href="./">Home</a><x-sep
   ></x-sep><a
-    href="./en/table_of_contents.html"><i>Table of </i>Contents</a><x-sep
+    href="./table_of_contents.html"><i>Table of </i>Contents</a><x-sep
   ></x-sep><b
   >{{ title }}</b>
 </p>

plugins/mobile-theme/_includes/en/header.njk

@@ -7,7 +7,7 @@
 
   <flex-row>
     <div>
-      <h1><a href="./en/">Dive Into Accessibility</a></h1>
+      <h1><a href="./">Dive Into Accessibility</a></h1>
       <p class="tagline">30 days to a more accessible web site</p>
     </div>
 

plugins/mobile-theme/_includes/en/main-navigation.njk

@@ -1,16 +1,16 @@
 
 <nav aria-label="Main navigation">
 <ul>
-  <li><a title="accessibility features of this site" href="./en/accessibility_statement.html" accesskey="0">Accessibility statement</a></li>
-  <li><a href="./en/search.html" data-href="mt/mt-search.cgi" accesskey="4" rel="nofollow">Site search</a></li>
-  <li><a href="./en/table_of_contents.html" accesskey="3">Table of contents</a></li>
-  <li><a href="./en/by_person.html">Tips by person</a></li>
-  <li><a href="./en/by_disability.html">Tips by disability</a></li>
-  <li><a href="./en/by_design_principle.html">Tips by design principle</a></li>
-  <li><a href="./en/by_web_browser.html">Tips by web browser</a></li>
-  <li><a href="./en/by_publishing_tool.html">Tips by publishing tool</a></li>
+  <li><a title="accessibility features of this site" href="./accessibility_statement.html" accesskey="0">Accessibility statement</a></li>
+  <li><a href="./search.html" data-href="mt/mt-search.cgi" accesskey="4" rel="nofollow">Site search</a></li>
+  <li><a href="./table_of_contents.html" accesskey="3">Table of contents</a></li>
+  <li><a href="./by_person.html">Tips by person</a></li>
+  <li><a href="./by_disability.html">Tips by disability</a></li>
+  <li><a href="./by_design_principle.html">Tips by design principle</a></li>
+  <li><a href="./by_web_browser.html">Tips by web browser</a></li>
+  <li><a href="./by_publishing_tool.html">Tips by publishing tool</a></li>
   <li><a title="send email to the author" href="mailto:feedback@diveintoaccessibility.org" accesskey="9">Feedback</a></li>
-  <li><a title="Copyright and licensing information" href="./en/terms_of_use.html" accesskey="8">Terms of use</a></li>
+  <li><a title="Copyright and licensing information" href="./terms_of_use.html" accesskey="8">Terms of use</a></li>
   <li><a href="https://github.com/nfreear/diveintoaccessibility">(Source on GitHub)</a></li>
 </ul>
 </nav>