1
0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-08-26 09:44:32 +02:00
This commit is contained in:
Pomax
2020-10-30 20:20:53 -07:00
parent e6bea76b2e
commit 3fbeb89c70
16 changed files with 11038 additions and 301 deletions

View File

@@ -38,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-28T01:54:22+00:00" />
<meta property="og:updated_time" content="2020-10-31T03:08:55+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" />
@@ -131,9 +131,10 @@
<div>
<span>Read this in your own language:</span>
<ul class="lang-switcher">
<li><a href="./index.html">English</a> <span class="localisation-progress">(100%)</span></li>
<li><a href="./index.html">English</a> &nbsp;</li>
<li><a href="./ja-JP/index.html">日本語</a> <span class="localisation-progress">(24%)</span></li>
<li><a href="./zh-CN/index.html">中文</a> <span class="localisation-progress">(22%)</span></li>
<li><a href="./uk-UA/index.html">Українська</a> <span class="localisation-progress">(2%)</span></li>
</ul>
<p>
(Don't see your language listed, or want to see it reach 100%?
@@ -150,7 +151,6 @@
If this is your first time here: welcome! Let me know if you were looking for anything in particular that the primer doesn't cover over on the
<a href="https://github.com/Pomax/BezierInfo-2/issues">issue tracker</a>!
</p>
<p>
If this is a resource that you're using for research, or writing your own software, please consider
<a href="https://www.paypal.com/donate/?cmd=_s-xclick&hosted_button_id=3BNHGHZAS3DP6&locale.x=en_CA">donating</a> (any amount helps) or

File diff suppressed because it is too large Load Diff

View File

@@ -330,14 +330,14 @@ class GraphicsElement extends CustomElement {
const a = document.createElement(`a`);
a.classList.add(`view-source`);
a.textContent = `view source`;
a.textContent = this.getAttribute(`viewSource`) || `view source`;
a.href = this.src;
a.target = `_blank`;
toptitle.append(a);
const r = document.createElement(`button`);
r.classList.add(`reset`);
r.textContent = `reset`;
r.textContent = this.getAttribute(`reset`) || `reset`;
r.addEventListener(`click`, () => this.reset());
toptitle.append(r);

View File

@@ -34,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="Tue Oct 27 2020 18:54:22 +00:00" />
<meta property="og:updated_time" content="Fri Oct 30 2020 20:08:55 +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" />

View File

@@ -33,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="Tue Oct 27 2020 18:54:22 GMT-0700 (Pacific Daylight Time)" />
<meta property="og:published_time" content="Fri Oct 30 2020 20:08:55 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" />

View File

@@ -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>Tue Oct 27 2020 18:54:22 +00:00</lastBuildDate>
<lastBuildDate>Fri Oct 30 2020 20:08:55 +00:00</lastBuildDate>
<image>
<url>https://pomax.github.io/bezierinfo/images/og-image.png</url>
<title>A Primer on Bézier Curves</title>
@@ -32,7 +32,7 @@
&lt;li&gt;...with that same source code being read in and run by Node.js &lt;em&gt;on a canvas&lt;/em&gt; to generate fallback images so that even without JS, graphics work.&lt;/li&gt;
&lt;/ul&gt;
&lt;blockquote&gt;
&lt;graphics-element title=&quot;An example graphic&quot; width=&quot;275&quot; height=&quot;275&quot; src=&quot;./news/example.js&quot; &gt;
&lt;graphics-element title=&quot;An example graphic&quot; width=&quot;275&quot; height=&quot;275&quot; src=&quot;./news/example.js&quot; &gt;
&lt;fallback-image&gt;
&lt;span class=&quot;view-source&quot;&gt;Scripts are disabled. Showing fallback image.&lt;/span&gt;
&lt;img width=&quot;275px&quot; height=&quot;275px&quot; src=&quot;./images/news/2020-09-18.html/b465a1526a406578c9806a9985e2dbd0.png&quot; loading=&quot;lazy&quot;&gt;

9842
docs/uk-UA/index.html Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -1,4 +1,4 @@
import LocaleStrings from "./locale-strings.js";
import LocaleStrings from "./localization.js";
import { getAllChapterFiles } from "./build/get-all-chapter-files.js";
import { processLocale } from "./build/process-locale.js";
import { createIndexPages } from "./build/create-index-pages.js";

View File

@@ -20,7 +20,7 @@ async function createIndexPages(locale, localeStrings, chapters, langProgress) {
const localePrefix = base ? `${locale}/index.html` : ``;
const preface = `<section id="preface">${chapters[sectionOrder[0]]}</section>`;
const sections = formSectionData(chapters, sectionOrder, toclist, locale, base);
const sectionText = finaliseSections(sections);
const sectionText = finaliseSections(sections, localeStrings);
const changelog = formChangeLog(changelogData);
const renderContext = {
@@ -81,18 +81,18 @@ function formSectionData(chapters, sectionOrder, toclist, locale, base) {
/**
* ...docs go here...
*/
function finaliseSections(sections) {
function finaliseSections(sections, localeStrings) {
// Perform crosslinking as part of yielding the section text
return sections.map((section) => {
let elements = [];
let previous = sections[section.previous];
if (previous) {
elements.push(`<a href="${previous.link}">previous</a>`);
elements.push(`<a href="${previous.link}">${localeStrings.get(`previous`)}</a>`);
}
let next = sections[section.next];
if (next) {
elements.push(`<a href="${next.link}">next</a>`);
elements.push(`<a href="${next.link}">${localeStrings.get(`next`)}</a>`);
}
let nav = `<div class="nav">${elements.join(``)}</div>`;
return section.content.replace(`<h1><a`, `<h1>${nav}<a`);

View File

@@ -3,7 +3,7 @@ import fs from "fs-extra";
import path from "path";
import paths from "../project-paths.js";
import nunjucks from "nunjucks";
import LocaleStrings from "../locale-strings.js";
import LocaleStrings from "../localization.js";
import { convertMarkDown } from "./markdown/convert-markdown.js";
nunjucks.configure(paths.html, { autoescape: false });

View File

@@ -15,7 +15,8 @@ export default function generateLangSwitcher(localeStrings, langProgress) {
link = `./${locale}/index.html`;
}
let localeName = localeStrings.getLocaleName(locale);
return `<li><a href="${link}">${localeName}</a> <span class="localisation-progress">(${langProgress[locale]}%)</span></li>`;
let progress = langProgress[locale] !== 100 ? ` <span class="localisation-progress">(${langProgress[locale]}%)</span>` : ` &nbsp;`;
return `<li><a href="${link}">${localeName}</a>${progress}</li>`;
})
.join(`\n`);
}

View File

@@ -77,7 +77,12 @@ async function processGraphicsElement(markdown, pathdata, localeStrings) {
formDataSet(remainder.trim())
);
const replacement = `width="${width}" height="${height}" src="${src}" ${remainder}>
const reset = localeStrings.get(`reset`);
const viewSource = localeStrings.get(`viewSource`);
const defaultLocale = localeStrings.getDefaultLocale() === localeStrings.getCurrentLocale();
const stringAttributes = defaultLocale ? `` : `reset="${reset}" viewSource="${viewSource}"`;
const replacement = `width="${width}" height="${height}" src="${src}" ${remainder} ${stringAttributes}>
<fallback-image>
<span class="view-source">${translate`disabledMessage`}</span>
<img width="${width}px" height="${height}px" src="${imgUrl}" loading="lazy">

View File

@@ -29,7 +29,7 @@
:root[lang="{{ locale }}"] {
font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
font-size: 17.4px;
}
{% else %}

View File

@@ -1,9 +1,3 @@
const defaultLocale = "en-GB";
// =============================
// Locale strings start here
// =============================
const localeStringData = {
title: {
"en-GB": `A Primer on Bézier Curves`,
@@ -11,14 +5,17 @@ const localeStringData = {
"zh-CN": `贝塞尔曲线底漆`,
"uk-UA": `Підручник з кривих Безьє`,
},
subtitle: {
"en-GB": `A free, online book for when you really need to know how to do Bézier things.`,
"uk-UA": `Безкоштовна онлайн-книга, яка навчить вас всьому необхідному, щоб працювати з кривими Безьє.`,
},
description: {
"en-GB": `A detailed explanation of Bézier curves, and how to do the many things that we commonly want to do with them.`,
"uk-UA": `Детальне пояснення кривих Безьє та можливостей їх застосування.`,
},
longDescription: {
"en-GB": `
<p>
@@ -31,7 +28,6 @@ const localeStringData = {
If this is your first time here: welcome! Let me know if you were looking for anything
in particular that the primer doesn't cover over on the <a href="https://github.com/Pomax/BezierInfo-2/issues">issue tracker</a>!
</p>
<p>
If this is a resource that you're using for research, or writing your own software,
please consider <a href="https://www.paypal.com/donate/?cmd=_s-xclick&hosted_button_id=3BNHGHZAS3DP6&locale.x=en_CA">donating</a>
@@ -45,159 +41,114 @@ const localeStringData = {
"uk-UA": `
<p>
Ласкаво прошу до Підручника з кривих Безьє. Це безкоштовний вебсайт/електронна книга, що пояснює і математичні, і програмувальні аспекти
кривих Безьє, покриваючи широкий спектр областей, які стосуються малювання та роботи з цими кривими. Криві Безьє застосовуються всюди, починаючи з кривих у Photoshop, і закінчуючи
кривих Безьє, покриваючи широкий спектр областей, які стосуються малювання та роботи з цими кривими. Криві Безьє застосовуються всюди, починаючи з кривих у Photoshop, і закінчуючи
функціями пом'якшення (easing function) CSS та описом контурів популярних шрифтів.
</p>
<p>
Якщо ви тут вперше: ласкаво прошу! Напишіть мені <a href="https://github.com/Pomax/BezierInfo-2/issues">сюди</a>, якщо вас цікавить щось, пов'язане з кривими Безьє, чого немає у підручнику.
</p>
<p>
Якщо ви використовуєте цей ресурс для наукових досліджень, або пишете власне програмне забезпечення, будь ласка, розгляньте можливість
<a href="https://www.paypal.com/donate/?cmd=_s-xclick&hosted_button_id=3BNHGHZAS3DP6&locale.x=en_CA">фінансової підтримки</a>
(будь-яка сума вітається), або <a href="https://www.patreon.com/bezierinfo">станьте патроном на Patreon</a>.
Мені не платять за цю роботу, тому якщо ви вважаєте цей сайт корисним, і хотіли б, щоб він підтримувався протягом тривалого часу, знайте:
Мені не платять за цю роботу, тому якщо ви вважаєте цей сайт корисним, і хотіли б, щоб він підтримувався протягом тривалого часу, знайте:
багато кави потрібно було за ці роки, і ще багато буде потрібно. Тому, якщо можете допомогти з кавою, то можете бути впевнені, що цей ресурс буде підтримуватися ще довго!
</p>
`,
},
tocLabel: {
"en-GB": `Table of Contents`,
"ja-JP": `目次`,
"zh-CN": `目录`,
"uk-UA": `Зміст`,
},
localeName: {
"en-GB": `English`,
"ja-JP": `日本語`,
"zh-CN": `中文`,
"uk-UA": `Українська`,
},
langSwitchLabel: {
"en-GB": `Read this in your own language:`,
"uk-UA": `Читати рідною мовою:`,
},
langHelpLabel: {
"en-GB": `Don't see your language listed? <a href="https://github.com/Pomax/BezierInfo-2/wiki/localize">Help translate this content!</a>`,
"uk-UA": `Не бачите вашої мови у списку? <a href="https://github.com/Pomax/BezierInfo-2/wiki/localize">Допоможіть перекласти цей контент!</a>`,
"en-GB": `Don't see your language listed, or want to see it reach 100%? <a href="https://github.com/Pomax/BezierInfo-2/wiki/help-localize-the-primer-on-bezier-curves">Help translate this content!</a>`,
"uk-UA": `Не бачите своєї мови у списку або хочете, щоб вона досягла 100%? <a href="https://github.com/Pomax/BezierInfo-2/wiki/help-localize-the-primer-on-bezier-curves">Допоможіть перекласти цей контент!</a>`,
},
disabledMessage: {
"en-GB": `Scripts are disabled. Showing fallback image.`,
"uk-UA": `Скрипти вимкнено`,
"uk-UA": `Скрипти вимкнено. показує резервний.`,
},
reset: {
"en-GB": `reset`,
"uk-UA": `скинути`,
"ja-JP": `リセット`,
"zh-CN": `重启`,
},
viewSource: {
"en-GB": `view source`,
},
changelogTitle: {
"en-GB": `What's new?`,
"uk-UA": `Що нового?`,
},
toggleLabel: {
"en-GB": `Toggle changes`,
"uk-UA": `Перемкнути зміни`,
},
preambleLabel: {
"en-GB": `Preamble`,
"ja-JP": `前文`,
"zh-CN": `前言`,
"uk-UA": `Преамбула`,
},
prefaceLabel: {
"en-GB": `Preface`,
"ja-JP": `まえがき`,
"zh-CN": `序言`,
"uk-UA": `Передмова`,
},
mainContentLabel: {
"en-GB": `Main content`,
"uk-UA": `Основний вміст`,
},
changelogLabel: {
"en-GB": `What's new`,
"uk-UA": `Зміни`,
},
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)`,
"uk-UA": `Цей підручник постійно розвививається, тож залежно від того, коли ви востаннє його переглядали, тут можуть бути оновлення. Перейдіть за <a href="./news">цим посиланням</a>, щоб побачити, що було додано. (Також доступний <a href="./news/rss.xml">RSS-канал</a>)`,
},
previous: {
"en-GB": `previous`,
"uk-UA": `попередня сторінка`,
"uk-UA": `попередній`,
"ja-JP": ``,
"zh-CN": ``,
},
next: {
"en-GB": `next`,
"uk-UA": `наступна сторінка`,
"uk-UA": `наступний`,
"ja-JP": ``,
"zh-CN": ``,
},
};
// =============================
// Locale strings end here
// =============================
class LocaleStrings {
constructor(locale = `en-GB`) {
this.currentLocale = locale;
const strings = (this.strings = {});
Object.keys(localeStringData).forEach((id) => {
const map = localeStringData[id];
if (typeof map !== "object") return;
const value = map[locale] ? map[locale] : map[defaultLocale];
if (!value) throw new Error(`unknown locale string id "${id}".`);
strings[id] = value;
// temporary bug catcher:
Object.defineProperty(this, id, {
get: () => {
throw new Error(`cannot get localestring ${id} via property access`);
},
});
});
}
// templating tags:
get translate() {
return this.get.bind(this);
}
// functions:
get(id) {
return this.strings[id];
}
getDefaultLocale() {
return defaultLocale;
}
getCurrentLocale() {
return this.currentLocale;
}
getLocaleName(locale) {
const name = localeStringData.localeName[locale];
if (!name) {
throw new Error(`Unknown locale "${locale}"`);
}
return name;
}
getAllLocaleCodes() {
return Object.keys(localeStringData.title);
}
extendContext(contextToExtend, localeStringTemplating = {}) {
const strings = this.strings;
Object.keys(strings).forEach((key) => {
if (contextToExtend[key]) {
throw new Error(`Context already has key "${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;
});
}
}
export default LocaleStrings;
export default localeStringData;

74
src/localization.js Normal file
View File

@@ -0,0 +1,74 @@
import localeStringData from "./locale-strings.js";
const defaultLocale = "en-GB";
class LocaleStrings {
constructor(locale = `en-GB`) {
this.currentLocale = locale;
const strings = (this.strings = {});
Object.keys(localeStringData).forEach((id) => {
const map = localeStringData[id];
if (typeof map !== "object") return;
const value = map[locale] ? map[locale] : map[defaultLocale];
if (!value) throw new Error(`unknown locale string id "${id}".`);
strings[id] = value;
// temporary bug catcher:
Object.defineProperty(this, id, {
get: () => {
throw new Error(`cannot get localestring ${id} via property access`);
},
});
});
}
// templating tags:
get translate() {
return this.get.bind(this);
}
// functions:
get(id) {
return this.strings[id];
}
getDefaultLocale() {
return defaultLocale;
}
getCurrentLocale() {
return this.currentLocale;
}
getLocaleName(locale) {
const name = localeStringData.localeName[locale];
if (!name) {
throw new Error(`Unknown locale "${locale}"`);
}
return name;
}
getAllLocaleCodes() {
return Object.keys(localeStringData.title);
}
extendContext(contextToExtend, localeStringTemplating = {}) {
const strings = this.strings;
Object.keys(strings).forEach((key) => {
if (contextToExtend[key]) {
throw new Error(`Context already has key "${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;
});
}
}
export default LocaleStrings;