added locale templating to the locale string content

docs/index.html

@@ -31,7 +31,7 @@
 		<meta property="og:locale" content="en-GB" />
 		<meta property="og:type" content="article" />
 		<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
-		<meta property="og:updated_time" content="2020-09-18T22:28:34+00:00" />
+		<meta property="og:updated_time" content="2020-09-18T23:05:12+00:00" />
 		<meta property="og:author" content="Mike 'Pomax' Kamermans" />
 		<meta property="og:section" content="Bézier Curves" />
 		<meta property="og:tag" content="Bézier Curves" />
@@ -51,11 +51,11 @@
 		<script src="./js/site/referrer.js" type="module" async></script>
 
 		<!--
-      The part that makes interactive graphics work: an HTML5 <graphics-element> custom element.
+          The part that makes interactive graphics work: an HTML5 <graphics-element> custom element.
-      Note that we're not defering this: we just want it to kick in as soon as possible, and
+          Note that we're not defering this: we just want it to kick in as soon as possible, and
-      given how much HTML there is, that means this can, and thus should, kick in before the
+          given how much HTML there is, that means this can, and thus should, kick in before the
-      document is done even transferring.
+          document is done even transferring.
-    -->
+        -->
 		<script src="./js/custom-element/graphics-element.js" type="module" async></script>
 		<link rel="stylesheet" href="./js/custom-element/graphics-element.css" />
 
@@ -127,7 +127,6 @@
 				<li><a href="./zh-CN/index.html">中文</a></li>
 			</ul>
 			<p>Don't see your language listed? <a href="https://github.com/Pomax/BezierInfo-2/wiki/localize">Help translate this content!</a></p>
-
 			<noscript>
 				<div class="note">
 					<header>
@@ -149,7 +148,6 @@
 					</p>
 				</div>
 			</noscript>
-
 			<nav aria-labelledby="toc">
 				<h1 id="toc">Table of Contents</h1>
 				<h4>Preamble</h4>
@@ -305,7 +303,6 @@
 					</p>
 				</div>
 			</section>
-
 			<section id="changelog">
 				<h1>What's new?</h1>
 				<p>
@@ -449,7 +446,6 @@
 					</ul>
 				</section>
 			</section>
-
 			<section id="chapters">
 				<section id="introduction">
 					<h1>

docs/ja-JP/index.html

@@ -4,6 +4,7 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<title>ベジェ曲線入門</title>
+
 		<base href=".." />
 
 		<link rel="icon" href="images/favicon.png" type="image/png" />
@@ -32,7 +33,7 @@
 		<meta property="og:locale" content="ja-JP" />
 		<meta property="og:type" content="article" />
 		<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
-		<meta property="og:updated_time" content="2020-09-18T22:28:34+00:00" />
+		<meta property="og:updated_time" content="2020-09-18T23:05:12+00:00" />
 		<meta property="og:author" content="Mike 'Pomax' Kamermans" />
 		<meta property="og:section" content="Bézier Curves" />
 		<meta property="og:tag" content="Bézier Curves" />
@@ -52,11 +53,11 @@
 		<script src="./js/site/referrer.js" type="module" async></script>
 
 		<!--
-      The part that makes interactive graphics work: an HTML5 <graphics-element> custom element.
+          The part that makes interactive graphics work: an HTML5 <graphics-element> custom element.
-      Note that we're not defering this: we just want it to kick in as soon as possible, and
+          Note that we're not defering this: we just want it to kick in as soon as possible, and
-      given how much HTML there is, that means this can, and thus should, kick in before the
+          given how much HTML there is, that means this can, and thus should, kick in before the
-      document is done even transferring.
+          document is done even transferring.
-    -->
+        -->
 		<script src="./js/custom-element/graphics-element.js" type="module" async></script>
 		<link rel="stylesheet" href="./js/custom-element/graphics-element.css" />
 
@@ -128,7 +129,6 @@
 				<li><a href="./zh-CN/index.html">中文</a></li>
 			</ul>
 			<p>Don't see your language listed? <a href="https://github.com/Pomax/BezierInfo-2/wiki/localize">Help translate this content!</a></p>
-
 			<noscript>
 				<div class="note">
 					<header>
@@ -150,10 +150,9 @@
 					</p>
 				</div>
 			</noscript>
-
 			<nav aria-labelledby="toc">
 				<h1 id="toc">目次</h1>
-				<h4>Preamble</h4>
+				<h4>前文</h4>
 				<ol class="preamble">
 					<li><a href="ja-JP/index.html#preface">まえがき </a></li>
 					<li><a href="ja-JP/index.html#changelog">What's new</a></li>
@@ -281,13 +280,12 @@
 					</p>
 				</div>
 			</section>
-
 			<section id="changelog">
 				<h1>What's new?</h1>
 				<p>
 					This primer is a living document, and so depending on when you last look at it, there may be new content. Click the following link to expand
-					this section to have a look at what got added, when, or click through to the <a href="news">News posts</a> for more detailed updates. (<a
+					this section to have a look at what got added, when, or click through to the <a href="../news">News posts</a> for more detailed updates. (<a
-						href="news/rss.xml"
+						href="../news/rss.xml"
 						>RSS feed</a
 					>
 					available)
@@ -425,7 +423,6 @@
 					</ul>
 				</section>
 			</section>
-
 			<section id="chapters">
 				<section id="introduction">
 					<h1>

docs/news/2020-09-20.html

@@ -4,6 +4,7 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<title>A Primer on Bézier Curves - Rewriting the tech stack</title>
+
 		<base href=".." />
 
 		<link rel="icon" href="images/favicon.png" type="image/png" />
@@ -26,7 +27,7 @@
 		<meta property="og:locale" content="en-GB" />
 		<meta property="og:type" content="article" />
 		<meta property="og:published_time" content="2020-09-20T12:00:00+00:00" />
-		<meta property="og:updated_time" content="2020-09-18T22:28:34+00:00" />
+		<meta property="og:updated_time" content="2020-09-18T23:05:12+00:00" />
 		<meta property="og:author" content="Mike 'Pomax' Kamermans" />
 		<meta property="og:section" content="Bézier Curves" />
 		<meta property="og:tag" content="Bézier Curves" />
@@ -43,11 +44,11 @@
 		<script src="./js/site/referrer.js" type="module" async></script>
 
 		<!--
-      The part that makes interactive graphics work: an HTML5 <graphics-element> custom element.
+          The part that makes interactive graphics work: an HTML5 <graphics-element> custom element.
-      Note that we're not defering this: we just want it to kick in as soon as possible, and
+          Note that we're not defering this: we just want it to kick in as soon as possible, and
-      given how much HTML there is, that means this can, and thus should, kick in before the
+          given how much HTML there is, that means this can, and thus should, kick in before the
-      document is done even transferring.
+          document is done even transferring.
-    -->
+        -->
 		<script src="./js/custom-element/graphics-element.js" type="module" async></script>
 		<link rel="stylesheet" href="./js/custom-element/graphics-element.css" />
 

docs/news/index.html

@@ -4,6 +4,7 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<title>A Primer on Bézier Curves - News</title>
+
 		<base href=".." />
 
 		<link rel="icon" href="images/favicon.png" type="image/png" />
@@ -43,11 +44,11 @@
 		<script src="./js/site/referrer.js" type="module" async></script>
 
 		<!--
-      The part that makes interactive graphics work: an HTML5 <graphics-element> custom element.
+          The part that makes interactive graphics work: an HTML5 <graphics-element> custom element.
-      Note that we're not defering this: we just want it to kick in as soon as possible, and
+          Note that we're not defering this: we just want it to kick in as soon as possible, and
-      given how much HTML there is, that means this can, and thus should, kick in before the
+          given how much HTML there is, that means this can, and thus should, kick in before the
-      document is done even transferring.
+          document is done even transferring.
-    -->
+        -->
 		<script src="./js/custom-element/graphics-element.js" type="module" async></script>
 		<link rel="stylesheet" href="./js/custom-element/graphics-element.css" />
 

docs/zh-CN/index.html

@@ -4,6 +4,7 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<title>贝塞尔曲线底漆</title>
+
 		<base href=".." />
 
 		<link rel="icon" href="images/favicon.png" type="image/png" />
@@ -32,7 +33,7 @@
 		<meta property="og:locale" content="zh-CN" />
 		<meta property="og:type" content="article" />
 		<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
-		<meta property="og:updated_time" content="2020-09-18T22:28:34+00:00" />
+		<meta property="og:updated_time" content="2020-09-18T23:05:12+00:00" />
 		<meta property="og:author" content="Mike 'Pomax' Kamermans" />
 		<meta property="og:section" content="Bézier Curves" />
 		<meta property="og:tag" content="Bézier Curves" />
@@ -52,11 +53,11 @@
 		<script src="./js/site/referrer.js" type="module" async></script>
 
 		<!--
-      The part that makes interactive graphics work: an HTML5 <graphics-element> custom element.
+          The part that makes interactive graphics work: an HTML5 <graphics-element> custom element.
-      Note that we're not defering this: we just want it to kick in as soon as possible, and
+          Note that we're not defering this: we just want it to kick in as soon as possible, and
-      given how much HTML there is, that means this can, and thus should, kick in before the
+          given how much HTML there is, that means this can, and thus should, kick in before the
-      document is done even transferring.
+          document is done even transferring.
-    -->
+        -->
 		<script src="./js/custom-element/graphics-element.js" type="module" async></script>
 		<link rel="stylesheet" href="./js/custom-element/graphics-element.css" />
 
@@ -128,7 +129,6 @@
 				<li><a href="./zh-CN/index.html">中文</a></li>
 			</ul>
 			<p>Don't see your language listed? <a href="https://github.com/Pomax/BezierInfo-2/wiki/localize">Help translate this content!</a></p>
-
 			<noscript>
 				<div class="note">
 					<header>
@@ -150,10 +150,9 @@
 					</p>
 				</div>
 			</noscript>
-
 			<nav aria-labelledby="toc">
 				<h1 id="toc">目录</h1>
-				<h4>Preamble</h4>
+				<h4>前言</h4>
 				<ol class="preamble">
 					<li><a href="zh-CN/index.html#preface">序言 </a></li>
 					<li><a href="zh-CN/index.html#changelog">What's new</a></li>
@@ -264,13 +263,12 @@
 					</p>
 				</div>
 			</section>
-
 			<section id="changelog">
 				<h1>What's new?</h1>
 				<p>
 					This primer is a living document, and so depending on when you last look at it, there may be new content. Click the following link to expand
-					this section to have a look at what got added, when, or click through to the <a href="news">News posts</a> for more detailed updates. (<a
+					this section to have a look at what got added, when, or click through to the <a href="../news">News posts</a> for more detailed updates. (<a
-						href="news/rss.xml"
+						href="../news/rss.xml"
 						>RSS feed</a
 					>
 					available)
@@ -408,7 +406,6 @@
 					</ul>
 				</section>
 			</section>
-
 			<section id="chapters">
 				<section id="introduction">
 					<h1>

src/build/create-index-pages.js

@@ -36,9 +36,12 @@ async function createIndexPages(locale, localeStrings, chapters) {
     publishTime: `2013-06-13T12:00:00+00:00`,
     currentTime: new Date().toISOString().substring(0, 19) + "+00:00",
   };
-  localeStrings.extendContext(renderContext);
-  const index = nunjucks.render(`index.template.html`, renderContext);
 
+  localeStrings.extendContext(renderContext, {
+    relurl: base === `` ? `` : `../`,
+  });
+
+  const index = nunjucks.render(`index.template.html`, renderContext);
   const writeDir = locale === defaultLocale ? paths.public : path.join(paths.public, locale);
   fs.ensureDirSync(writeDir);
   fs.writeFileSync(path.join(writeDir, `index.html`), index, `utf8`);

src/html/fragments/toc.html

@@ -0,0 +1,10 @@
+<nav aria-labelledby="toc">
+    <h1 id="toc">{{ tocLabel }}</h1>
+    <h4>{{ preambleLabel }}</h4>
+    <ol class="preamble">
+        <li><a href="{{ localePrefix }}#preface">{{ prefaceLabel }} </a></li>
+        <li><a href="{{ localePrefix }}#changelog">{{ changelogLabel }}</a></li>
+    </ol>
+    <h4>{{ mainContentLabel }}</h4>
+    <ol>{{ toc }}</ol>
+</nav>

src/html/index.template.html

@@ -1,103 +1,88 @@
 <!DOCTYPE html>
 <html lang="{{ locale }}">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>{% block title %}{{ title }}{% endblock %}</title>
-    {{ base }}
 
-    <link rel="icon" href="images/favicon.png" type="image/png" />
+<head>
-    {% block alternate %}
+  <meta charset="utf-8" />
-    <link rel="alternate" type="application/rss+xml" title="RSS" href="news/rss.xml">
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>{% block title %}{{ title }}{% endblock %}</title>
+
+  {{ base }}
+
+  <link rel="icon" href="images/favicon.png" type="image/png" />
+  {% block alternate %}
+  <link rel="alternate" type="application/rss+xml" title="RSS" href="news/rss.xml">
+  {% endblock %}
+
+  <!-- page styling -->
+  <link rel="preload" href="images/paper.png" as="image" />
+  <link rel="stylesheet" href="placeholder-style.css" />
+
+  {% include "./fragments/meta.html" %}
+
+  {% block assets %}
+  <!-- my own referral/page hit tracker, because Google knows enough -->
+  <script src="./js/site/referrer.js" type="module" async></script>
+
+  <!--
+          The part that makes interactive graphics work: an HTML5 <graphics-element> custom element.
+          Note that we're not defering this: we just want it to kick in as soon as possible, and
+          given how much HTML there is, that means this can, and thus should, kick in before the
+          document is done even transferring.
+        -->
+  <script src="./js/custom-element/graphics-element.js" type="module" async></script>
+  <link rel="stylesheet" href="./js/custom-element/graphics-element.css" />
+
+  <!-- make images lazy load much earlier  -->
+  <script src="./js/site/better-lazy-loading.js" type="module" async defer></script>
+  {% endblock %}
+</head>
+
+<body>
+  {% include "./fragments/dev-ribbon.html" %}
+  {% include "./fragments/github.html" %}
+  {% block share %}{% include "./fragments/share.html" %}{% endblock %}
+
+  <header>
+    {% block header %}
+    <h1>{{ title }}</h1>
+    <h2>{{ subtitle }}</h2>
+    <span>{{ langSwitchLabel }}</span>
+    <ul class="lang-switcher">{{ langSwitcher }}</ul>
+    <p>{{ langHelpLabel }}</p>
+    {% include "./fragments/noscript.html" %}
+    {% include "./fragments/toc.html" %}
     {% endblock %}
+  </header>
 
-    <!-- page styling -->
+  <main>
-    <link rel="preload" href="images/paper.png" as="image" />
+    {% block main %}
-    <link rel="stylesheet" href="placeholder-style.css" />
+    {{ preface }}
-
+    <section id="changelog">
-    {% include "./fragments/meta.html" %}
+      <h1>{{ changelogTitle }}</h1>
-
+      <p>{{ changelogDescription }}</p>
-    {% block assets %}
+      <!-- non-JS content reveals are nice -->
-    <!-- my own referral/page hit tracker, because Google knows enough -->
+      <label for="changelogtoggle">{{ toggleLabel }}</label>
-    <script src="./js/site/referrer.js" type="module" async></script>
+      <input type="checkbox" id="changelogtoggle">
-
+      <section>{{ changelog }}</section>
-    <!--
+    </section>
-      The part that makes interactive graphics work: an HTML5 <graphics-element> custom element.
+    <section id="chapters">{{ chapters }}</section>
-      Note that we're not defering this: we just want it to kick in as soon as possible, and
-      given how much HTML there is, that means this can, and thus should, kick in before the
-      document is done even transferring.
-    -->
-    <script src="./js/custom-element/graphics-element.js" type="module" async></script>
-    <link rel="stylesheet" href="./js/custom-element/graphics-element.css" />
-
-    <!-- make images lazy load much earlier  -->
-    <script src="./js/site/better-lazy-loading.js" type="module" async defer></script>
     {% endblock %}
-  </head>
+  </main>
 
-  <body>
+  <hr>
-    {% include "./fragments/dev-ribbon.html" %}
-    {% include "./fragments/github.html" %}
-    {% block share %}{% include "./fragments/share.html" %}{% endblock %}
 
-    <header>
+  <footer class="copyright">
-      {% block header %}
+    {% block footer %}
-      <h1>{{ title }}</h1>
+    This article is © 2011-2020 to me, Mike "Pomax" Kamermans, but the text, code, and images are
-      <h2>{{ subtitle }}</h2>
+    <a href="https://github.com/Pomax/bezierinfo/blob/master/LICENSE.md">almost no rights reserved</a>.
-      <span>{{ langSwitchLabel }}</span>
+    Go do something cool with it!
-      <ul class="lang-switcher">
-        {{ langSwitcher }}
-      </ul>
-      <p>{{ langHelpLabel }}</p>
-
-      {% include "./fragments/noscript.html" %}
-
-      <nav aria-labelledby="toc">
-        <h1 id="toc">{{ tocLabel }}</h1>
-        <h4>Preamble</h4>
-        <ol class="preamble">
-          <li><a href="{{ localePrefix }}#preface">{{ prefaceLabel }} </a></li>
-          <li><a href="{{ localePrefix }}#changelog">{{ changelogLabel }}</a></li>
-        </ol>
-        <h4>Main content</h4>
-        <ol>
-            {{ toc }}
-        </ol>
-      </nav>
-      {% endblock %}
-    </header>
-
-    <main>
-      {% block main %}
-
-      {{ preface }}
-
-      <section id="changelog">
-        <h1>{{ changelogTitle }}</h1>
-        <p>{{ changelogDescription }}</p>
-        <!-- non-JS content reveals are nice -->
-        <label for="changelogtoggle">{{ toggleLabel }}</label>
-        <input type="checkbox" id="changelogtoggle">
-        <section>{{ changelog }}</section>
-      </section>
-
-      <section id="chapters">{{ chapters }}</section>
-      {% endblock %}
-    </main>
-
-    <hr>
-
-    <footer class="copyright">
-      {% block footer %}
-      This article is © 2011-2020 to me, Mike "Pomax" Kamermans, but the text, code, and images are
-      <a href="https://github.com/Pomax/bezierinfo/blob/master/LICENSE.md">almost no rights reserved</a>.
-      Go do something cool with it!
-      {% endblock %}
-    </footer>
-
-    {% block scrollfix %}
-    <!-- fix firefox's scroll position algorithm. Due to how it works, it cannot be async/defer -->
-    <script src="./js/site/fix-scroll.js"></script>
     {% endblock %}
-  </body>
+  </footer>
-</html>
+
+  {% block scrollfix %}
+  <!-- fix firefox's scroll position algorithm. Due to how it works, it cannot be async/defer -->
+  <script src="./js/site/fix-scroll.js"></script>
+  {% endblock %}
+</body>
+
+</html>

src/locale-strings.js

@@ -41,16 +41,24 @@ const localeStringData = {
   toggleLabel: {
     "en-GB": `Toggle changes`,
   },
+  preambleLabel: {
+    "en-GB": `Preamble`,
+    "ja-JP": `前文`,
+    "zh-CN": `前言`,
+  },
   prefaceLabel: {
     "en-GB": `Preface`,
     "ja-JP": `まえがき`,
     "zh-CN": `序言`,
   },
+  mainContentLabel: {
+    "en-GB": `Main content`,
+  },
   changelogLabel: {
     "en-GB": `What's new`,
   },
   changelogDescription: {
-    "en-GB": `This primer is a living document, and so depending on when you last look at it, there may be new content. Click the following link to expand this section to have a look at what got added, when, or click through to the <a href="news">News posts</a> for more detailed updates. (<a href="news/rss.xml">RSS feed</a> available)`,
+    "en-GB": `This primer is a living document, and so depending on when you last look at it, there may be new content. Click the following link to expand this section to have a look at what got added, when, or click through to the <a href="{{ relurl }}news">News posts</a> for more detailed updates. (<a href="{{ relurl }}news/rss.xml">RSS feed</a> available)`,
   },
 };
 
@@ -110,14 +118,19 @@ class LocaleStrings {
     return Object.keys(localeStringData.title);
   }
 
-  extendContext(context) {
+  extendContext(contextToExtend, localeStringTemplating = {}) {
     const strings = this.strings;
 
     Object.keys(strings).forEach((key) => {
-      if (context[key]) {
+      if (contextToExtend[key]) {
         throw new Error(`Context already has key "${key}"!`);
       }
-      context[key] = strings[key];
+      let v = strings[key];
+      Object.entries(localeStringTemplating).forEach((keyval) => {
+        let [name, value] = keyval;
+        v = v.replace(new RegExp(`{{ ${name} }}`, `g`), value);
+      });
+      contextToExtend[key] = v;
     });
   }
 }