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" />
@@ -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" />
@@ -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
-						href="news/rss.xml"
+					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)
@@ -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" />

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" />

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" />
@@ -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
-						href="news/rss.xml"
+					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)
@@ -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,9 +1,11 @@
 <!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" />
@@ -45,33 +47,16 @@
     <h1>{{ title }}</h1>
     <h2>{{ subtitle }}</h2>
     <span>{{ langSwitchLabel }}</span>
-      <ul class="lang-switcher">
-        {{ langSwitcher }}
-      </ul>
+    <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>
+    {% include "./fragments/toc.html" %}
     {% endblock %}
   </header>
 
   <main>
     {% block main %}
-
     {{ preface }}
-
     <section id="changelog">
       <h1>{{ changelogTitle }}</h1>
       <p>{{ changelogDescription }}</p>
@@ -80,7 +65,6 @@
       <input type="checkbox" id="changelogtoggle">
       <section>{{ changelog }}</section>
     </section>
-
     <section id="chapters">{{ chapters }}</section>
     {% endblock %}
   </main>
@@ -100,4 +84,5 @@
   <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;
     });
   }
 }