info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-08-30 03:30:34 +02:00
Code Issues Releases Wiki Activity

added locale templating to the locale string content

Browse Source
This commit is contained in:
Pomax
2020-09-18 16:05:44 -07:00
parent 8cb725aac1
commit 984a2c852a
9 changed files with 150 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/index.html
View File

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

23
docs/ja-JP/index.html
View File

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

13
docs/news/2020-09-20.html
View File

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

11
docs/news/index.html
View File

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

23
docs/zh-CN/index.html
View File

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

7
src/build/create-index-pages.js
View File

@@ -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`);

10
src/html/fragments/toc.html Normal file
View File

@@ -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>

173
src/html/index.template.html
View File

@@ -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" />
{% block alternate %}
<link rel="alternate" type="application/rss+xml" title="RSS" href="news/rss.xml">
<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" />
{% 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 -->
<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>
<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 %}
</head>
</main>
<body>
{% include "./fragments/dev-ribbon.html" %}
{% include "./fragments/github.html" %}
{% block share %}{% include "./fragments/share.html" %}{% endblock %}
<hr>
<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" %}
<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>
<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 %}
</body>
</html>
</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>
</html>

21
src/locale-strings.js
View File

@@ -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;
});
}
}