locale progress

docs/index.html

@@ -11,6 +11,13 @@
 
 		<!-- page styling -->
 		<link rel="preload" href="images/paper.png" as="image" />
+		<style>
+			:root[lang="en-GB"] {
+				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+				font-size: 18px;
+			}
+		</style>
+
 		<link rel="stylesheet" href="style.css" />
 
 		<!-- And a slew of SEO related meta elements, because being discoverable is important -->
@@ -31,7 +38,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-10-18T21:26:48+00:00" />
+		<meta property="og:updated_time" content="2020-10-28T01:29:36+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" />
@@ -124,9 +131,9 @@
 			<div>
 				<span>Read this in your own language:</span>
 				<ul class="lang-switcher">
-					<li><a href="./index.html">English</a></li>
+					<li><a href="./index.html">English</a> <span class="localisation-progress">(100%)</span></li>
-					<li><a href="./ja-JP/index.html">日本語</a></li>
+					<li><a href="./ja-JP/index.html">日本語</a> <span class="localisation-progress">(24%)</span></li>
-					<li><a href="./zh-CN/index.html">中文</a></li>
+					<li><a href="./zh-CN/index.html">中文</a> <span class="localisation-progress">(22%)</span></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>
 			</div>

docs/ja-JP/index.html

@@ -13,6 +13,14 @@
 
 		<!-- page styling -->
 		<link rel="preload" href="images/paper.png" as="image" />
+		<style>
+			:root[lang="ja-JP"] {
+				font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic",
+					"Helvetica Neue", Helvetica, Arial, sans-serif;
+				font-size: 15.6px;
+			}
+		</style>
+
 		<link rel="stylesheet" href="style.css" />
 
 		<!-- And a slew of SEO related meta elements, because being discoverable is important -->
@@ -33,7 +41,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-10-18T21:26:48+00:00" />
+		<meta property="og:updated_time" content="2020-10-28T01:29:36+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" />
@@ -126,9 +134,9 @@
 			<div>
 				<span>Read this in your own language:</span>
 				<ul class="lang-switcher">
-					<li><a href="./index.html">English</a></li>
+					<li><a href="./index.html">English</a> <span class="localisation-progress">(100%)</span></li>
-					<li><a href="./ja-JP/index.html">日本語</a></li>
+					<li><a href="./ja-JP/index.html">日本語</a> <span class="localisation-progress">(24%)</span></li>
-					<li><a href="./zh-CN/index.html">中文</a></li>
+					<li><a href="./zh-CN/index.html">中文</a> <span class="localisation-progress">(22%)</span></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>
 			</div>

docs/news/2020-09-18.html

@@ -13,6 +13,13 @@
 
 		<!-- page styling -->
 		<link rel="preload" href="images/paper.png" as="image" />
+		<style>
+			:root[lang="en-GB"] {
+				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+				font-size: 18px;
+			}
+		</style>
+
 		<link rel="stylesheet" href="style.css" />
 
 		<!-- And a slew of SEO related meta elements, because being discoverable is important -->
@@ -27,7 +34,7 @@
 		<meta property="og:locale" content="en-GB" />
 		<meta property="og:type" content="article" />
 		<meta property="og:published_time" content="Thu Sep 17 2020 17:00:00 +00:00" />
-		<meta property="og:updated_time" content="Sun Oct 18 2020 14:26:48 +00:00" />
+		<meta property="og:updated_time" content="Tue Oct 27 2020 18:29:36 +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

@@ -13,6 +13,13 @@
 
 		<!-- page styling -->
 		<link rel="preload" href="images/paper.png" as="image" />
+		<style>
+			:root[lang="en-GB"] {
+				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+				font-size: 18px;
+			}
+		</style>
+
 		<link rel="stylesheet" href="style.css" />
 
 		<!-- And a slew of SEO related meta elements, because being discoverable is important -->
@@ -26,7 +33,7 @@
 		<meta property="og:description" content="" />
 		<meta property="og:locale" content="en-GB" />
 		<meta property="og:type" content="article" />
-		<meta property="og:published_time" content="Sun Oct 18 2020 14:26:48 GMT-0700 (Pacific Daylight Time)" />
+		<meta property="og:published_time" content="Tue Oct 27 2020 18:29:36 GMT-0700 (Pacific Daylight Time)" />
 		<meta property="og:updated_time" content="" />
 		<meta property="og:author" content="Mike 'Pomax' Kamermans" />
 		<meta property="og:section" content="Bézier Curves" />

docs/news/rss.xml

@@ -6,7 +6,7 @@
   <atom:link href="https://pomax.github.io/bezierinfo" rel="self"></atom:link>
   <description>News updates for the <a href="https://pomax.github.io/bezierinfo">primer on Bézier Curves</a> by Pomax</description>
   <language>en-GB</language>
-  <lastBuildDate>Sun Oct 18 2020 14:26:48 +00:00</lastBuildDate>
+  <lastBuildDate>Tue Oct 27 2020 18:29:36 +00:00</lastBuildDate>
   <image>
     <url>https://pomax.github.io/bezierinfo/images/og-image.png</url>
     <title>A Primer on Bézier Curves</title>

docs/style.css

@@ -1,20 +1,3 @@
-:root[lang="en-GB"] {
-  font-family: "Museo", "Helvetica Neue", "Helvetica", Arial, sans-serif;
-  font-size: 18px;
-}
-
-:root[lang="ja-JP"] {
-  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue",
-    "Helvetica", Arial, sans-serif;
-  font-size: 15.6px;
-}
-
-:root[lang="zh-CN"] {
-  font-family: "华文细黑", "STXihei", "PingFang TC", "微软雅黑体", "Microsoft YaHei New", "微软雅黑", "Microsoft Yahei", "宋体", "SimSun",
-    "Helvetica Neue", "Helvetica", Arial, sans-serif;
-  font-size: 16.7px;
-}
-
 :root {
   background: #eee;
   background-image: url(images/paper.png);
@@ -111,9 +94,15 @@ ul.lang-switcher li {
 }
 ul.lang-switcher + p {
   font-size: 85%;
-  margin: 0;
+  margin-bottom: 2em;
 }
 
+ul.lang-switcher li .localisation-progress {
+  font-size: 60%;
+  vertical-align: middle;
+}
+
+/*
 @media screen and (min-width: 992px) {
   ul.lang-switcher + p {
     display: inline;
@@ -121,6 +110,7 @@ ul.lang-switcher + p {
     font-size: 75%;
   }
 }
+*/
 
 /* --------------------- */
 

docs/zh-CN/index.html

@@ -13,6 +13,14 @@
 
 		<!-- page styling -->
 		<link rel="preload" href="images/paper.png" as="image" />
+		<style>
+			:root[lang="zh-CN"] {
+				font-family: "华文细黑", "STXihei", "PingFang TC", "微软雅黑体", "Microsoft YaHei New", "微软雅黑", "Microsoft Yahei", "宋体", SimSun,
+					"Helvetica Neue", Helvetica, Arial, sans-serif;
+				font-size: 16.7px;
+			}
+		</style>
+
 		<link rel="stylesheet" href="style.css" />
 
 		<!-- And a slew of SEO related meta elements, because being discoverable is important -->
@@ -33,7 +41,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-10-18T21:26:48+00:00" />
+		<meta property="og:updated_time" content="2020-10-28T01:29:36+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" />
@@ -126,9 +134,9 @@
 			<div>
 				<span>Read this in your own language:</span>
 				<ul class="lang-switcher">
-					<li><a href="./index.html">English</a></li>
+					<li><a href="./index.html">English</a> <span class="localisation-progress">(100%)</span></li>
-					<li><a href="./ja-JP/index.html">日本語</a></li>
+					<li><a href="./ja-JP/index.html">日本語</a> <span class="localisation-progress">(24%)</span></li>
-					<li><a href="./zh-CN/index.html">中文</a></li>
+					<li><a href="./zh-CN/index.html">中文</a> <span class="localisation-progress">(22%)</span></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>
 			</div>

src/build.js

@@ -15,14 +15,18 @@ getAllChapterFiles().then(async (chapterFiles) => {
   const start = Date.now();
   const languageCodes = Object.keys(chapterFiles);
 
-  await Promise.all(
+  const build = await Promise.all(
     languageCodes.map(async (locale) => {
       const localeStrings = new LocaleStrings(locale);
-      const chapters = await processLocale(locale, localeStrings, chapterFiles);
+      return await processLocale(locale, localeStrings, chapterFiles);
-      return createIndexPages(locale, localeStrings, chapters);
     })
   );
 
+  const progress = {};
+  build.forEach((e) => (progress[e.locale] = e.percentage));
+
+  await Promise.all(build.map((e) => createIndexPages(e.locale, e.localeStrings, e.chapters, progress)));
+
   await createNewsPages();
 
   const runtime = Date.now() - start;

src/build/create-index-pages.js

@@ -11,10 +11,10 @@ nunjucks.configure(paths.html, { autoescape: false });
 /**
  * ...docs go here...
  */
-async function createIndexPages(locale, localeStrings, chapters) {
+async function createIndexPages(locale, localeStrings, chapters, langProgress) {
   const defaultLocale = localeStrings.getDefaultLocale();
   const base = locale !== defaultLocale ? `<base href="..">` : ``;
-  const langSwitcher = generateLangSwitcher(localeStrings);
+  const langSwitcher = generateLangSwitcher(localeStrings, langProgress);
   const toclist = {};
 
   const localePrefix = base ? `${locale}/index.html` : ``;

src/build/generate-lang-switcher.js

@@ -2,7 +2,7 @@
  * ...docs go here...
  * @param {*} localeStrings
  */
-export default function generateLangSwitcher(localeStrings) {
+export default function generateLangSwitcher(localeStrings, langProgress) {
   const defaultLocale = localeStrings.getDefaultLocale();
 
   return localeStrings
@@ -15,7 +15,7 @@ export default function generateLangSwitcher(localeStrings) {
         link = `./${locale}/index.html`;
       }
       let localeName = localeStrings.getLocaleName(locale);
-      return `<li><a href="${link}">${localeName}</a></li>`;
+      return `<li><a href="${link}">${localeName}</a> <span class="localisation-progress">(${langProgress[locale]}%)</span></li>`;
     })
     .join(`\n`);
 }

src/build/process-locale.js

@@ -52,9 +52,14 @@ async function processLocale(locale, localeStrings, chapterFiles) {
     })
   );
 
-  logRunInformation(locale, defaultLocale, missing, localized, sectionList, start);
+  const percentage = logRunInformation(locale, defaultLocale, missing, localized, sectionList, start);
 
-  return chapters;
+  return {
+    chapters,
+    locale,
+    localeStrings,
+    percentage,
+  };
 }
 
 export { processLocale };
@@ -65,11 +70,14 @@ export { processLocale };
 function logRunInformation(locale, defaultLocale, missing, localized, sectionList, start) {
   if (locale === defaultLocale && missing > 0) {
     console.log(`Warning: ${missing} chapters appear to be missing, based on the ToC listing.`);
+    return 0;
   } else {
     if (localized < sectionList.length) {
       console.log(`${locale} partially localized: [${localized}/${sectionList.length}]`);
+      return Math.round((100 * localized) / sectionList.length);
     } else {
       console.log(`${locale} fully localized.`);
+      return 100;
     }
   }
 

src/html/fragments/fonts.html

@@ -0,0 +1,43 @@
+<style>
+{% if locale == "en-GB" %}
+
+    :root[lang="{{ locale }}"] {
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        font-size: 18px;
+    }
+
+{% elif locale == "ja-JP" %}
+
+    :root[lang="{{ locale }}"] {
+        font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
+        font-size: 15.6px;
+    }
+
+{% elif locale == "zh-CN" %}
+
+    :root[lang="{{ locale }}"] {
+        font-family: "华文细黑", "STXihei", "PingFang TC", "微软雅黑体", "Microsoft YaHei New", "微软雅黑", "Microsoft Yahei", "宋体", SimSun, "Helvetica Neue", Helvetica, Arial, sans-serif;
+        font-size: 16.7px;
+    }
+
+{% elif locale == "kz-AU" %}
+
+    @font-face {
+        font-family: Roboto;
+        src: url(./fonts/roboto-v20-latin-regular.woff) format("WOFF");
+    }
+
+    :root[lang="{{ locale }}"] {
+        font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+        font-size: 18px;
+    }
+
+{% else %}
+
+    :root {
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        font-size: 18px;
+    }
+
+{% endif %}
+</style>

src/html/index.template.html

@@ -15,6 +15,7 @@
 
   <!-- page styling -->
   <link rel="preload" href="images/paper.png" as="image" />
+  {% include "./fragments/fonts.html" %}
   <link rel="stylesheet" href="style.css" />
 
   {% include "./fragments/meta.html" %}