feat: add automated typography support (#22)

* feat: add automated typography support

* fix: lint

* 1.9.0

README.md

@@ -14,6 +14,7 @@ Lightweight tool to create static custom HTTP Error Pages in minimalistic adapti
 * Customization
 * Localization (i18n)
 * Accessibility (a11y)
+* Automated typography support
 * Built-in web server config generator (Nginx)
 
 
@@ -115,12 +116,14 @@ Every locale file can be extended with any number of variables that you want to
 
 To localize your pages, just create a new directory in the `src` with any pages you want to generate. You are able to choose any set of HTTP status codes (for example, only for the 4xx errors), just follow the naming convention and don’t forget to extract common messages to the `common.json` file of your locale.
 
+All texts are processing with [Typograf](https://github.com/typograf/typograf) library by default. This works automatically, so you don't need to adapt texts in the source directory. In case of new locale adding, please check a list of [supported locales](https://github.com/typograf/typograf/blob/dev/docs/LOCALES.en-US.md) and update locales mapping in `TYPOGRAF_LOCALES` constant.
+
 
 ### Server Configurations
 
 During the build process, the Tool will automatically create a config snippet for your server. This snippet will contain information about handled errors and locations to reach the pages that represent them. At the moment, the only Nginx server supported.
 
-You just need to copy all files from the `dist` directory to your server and apply automatically created config snippet to existing server configuration. According to the snippet template, all pages must be located in the `/usr/share/nginx/html/error-pages` directory. In case if you want to change something in a snippet, you can edit the template in the `snippets` directory. Same as for the page templates, these templates support the mustache.js engine, so you can use any render logic you want (lists, conditions, etc).
+You just need to copy all files from the `dist` directory to your server and apply automatically created config snippet to existing server configuration. According to the snippet template, all pages must be located in the `/usr/share/nginx/html/error-pages` directory. In case if you want to change something in a snippet, you can edit the template in the `snippets` directory. Same as for the page templates, these templates support the mustache.js engine, so you can use any render logic you want (lists, conditions, loops, etc).
 
 The config snippet itself I would recommend to place in the `/etc/nginx/snippets/` directory and use the following line to include it to your configuration: `include /etc/nginx/snippets/nginx-error-pages.conf;`.
 

lib/classes/Compiler.ts

@@ -6,7 +6,7 @@ import { ILogger } from "./Logger";
 import { Messages } from "./Messages";
 import { Renderer } from "./Renderer";
 
-import { Config, TemplateVariables } from "../interfaces";
+import { Config, SnippetVariables, TemplateVariables } from "../interfaces";
 import { DI_TOKENS } from "../tokens";
 import { MessagesEnum } from "../../messages";
 import { PathRegistry } from "./PathRegistry";
@@ -102,7 +102,7 @@ export class Compiler implements ICompiler {
 
           this.logger.print(Messages.list(path));
 
-          await this.fsHelper.writeFile(path, Renderer.renderTemplate(template, { codes: Array.from(list) }));
+          await this.fsHelper.writeFile(path, Renderer.renderSnippet(template, { codes: Array.from(list) } as SnippetVariables));
         })
       );
     } else {

lib/classes/Renderer.ts

@@ -1,9 +1,21 @@
 import { render } from "mustache";
+import Typograf from "typograf";
 
 import { SnippetVariables, TemplateVariables } from "../interfaces";
+import { TYPOGRAF_LOCALES } from "../constants";
 
 export class Renderer {
-  static renderTemplate(template: string, vars: TemplateVariables | SnippetVariables) {
+  static renderTemplate(template: string, vars: TemplateVariables) {
+    if (TYPOGRAF_LOCALES.has(vars.locale)) {
+      const tp = new Typograf({ locale: [TYPOGRAF_LOCALES.get(vars.locale)], htmlEntity: { type: "name" } });
+      for (const prop in vars) {
+        vars[prop] = tp.execute(vars[prop]);
+      }
+    }
+    return render(template, vars, null, { escape: (str) => str });
+  }
+
+  static renderSnippet(template: string, vars: SnippetVariables) {
     return render(template, vars);
   }
 }

lib/constants.ts

@@ -14,3 +14,10 @@ export const DEFAULTS: Defaults = {
 };
 
 export const MANDATORY_CONFIG_PROPS = ["locale", "theme", "tailwind"];
+
+// Mapping between locales supported by the Typograf and this tool src locales
+export const TYPOGRAF_LOCALES = new Map([
+  ["de", "de"],
+  ["en", "en-US"],
+  ["ru", "ru"],
+]);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "error-pages",
-  "version": "1.8.5",
+  "version": "1.9.0",
   "description": "Lightweight tool to create static HTTP Error Pages in minimalistic adaptive and accessible design with customization and localization support",
   "main": "index.ts",
   "scripts": {
@@ -25,7 +25,8 @@
     "reflect-metadata": "^0.1.13",
     "tailwindcss": "^3.2.4",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.4"
+    "typescript": "^4.9.4",
+    "typograf": "^7.1.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.4.2",

test/Renderer.spec.ts

@@ -0,0 +1,48 @@
+import { assert } from "chai";
+
+import { Renderer } from "../lib/classes/Renderer";
+import { SnippetVariables, TemplateVariables } from "../lib/interfaces";
+
+describe("class Renderer", () => {
+  describe("renderTemplate()", () => {
+    let template: string, vars: TemplateVariables;
+
+    beforeEach(() => {
+      template = "<p>{{ myText }}</p>";
+      vars = {
+        locale: "en",
+        version: "0.0.0",
+        myText: "This text is for test",
+      };
+    });
+
+    it("should be rendered regular html with typographed text", () => {
+      const result = Renderer.renderTemplate(template, vars);
+      const expected = "<p>This text is&nbsp;for test</p>";
+      assert.equal(result, expected);
+    });
+
+    it("should be rendered regular html without typography", () => {
+      const result = Renderer.renderTemplate(template, { ...vars, locale: "xz" });
+      const expected = "<p>This text is for test</p>";
+      assert.equal(result, expected);
+    });
+  });
+
+  describe("renderSnippet()", () => {
+    let template: string, vars: SnippetVariables;
+
+    beforeEach(() => {
+      template = "{{#codes}}{{.}}, {{/codes}}";
+      vars = {
+        codes: [1, 2, 3],
+      };
+    });
+
+    it("should be rendered part of config", () => {
+      const result = Renderer.renderSnippet(template, vars);
+      const expected = "1, 2, 3, ";
+      assert.equal(result, expected);
+    });
+  });
+});

tsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "typeRoots": ["./node_modules/@types"],
     "experimentalDecorators": true,
-    "emitDecoratorMetadata": true
+    "emitDecoratorMetadata": true,
+    "esModuleInterop": true
   }
 }