feat: template config and template rules.

Krakazybik · Krakazybik · commit d287b7bb4858 · 2021-11-21T15:39:18.000+03:00
diff --git a/website/open-graph-templates/basic/template.json b/website/open-graph-templates/basic/template.json
@@ -3,7 +3,7 @@
   "font": "arial.ttf",
   "layout": [
     {
-      "typse": "text",
+      "type": "text",
       "name": "title",
       "fontSize": 80,
       "fill": "white",
diff --git a/website/open-graph-templates/config.json b/website/open-graph-templates/config.json
@@ -1,16 +1,22 @@
 {
   "outputDir": "assets/og",
-  "textWidthLimit": 200,
+  "textWidthLimit": 1100,
+  "quality": 70,
   "rules": [
     {
       "name": "basic",
       "priority": 0,
-      "pattern": "*"
+      "pattern": "."
     },
     {
       "name": "gray",
       "priority": 1,
-      "pattern": "*"
+      "pattern": "^concepts*"
+    },
+    {
+      "name": "gray",
+      "priority": 2,
+      "pattern": "^about*"
     }
   ]
 }
diff --git a/website/open-graph-templates/gray/template.json b/website/open-graph-templates/gray/template.json
@@ -1,24 +1,15 @@
 {
   "image": "preview.png",
-  "font": "Kanit-Bold.ttf",
+  "font": "Kanit-bold.ttf",
   "layout": [
     {
       "type": "text",
-      "name": "label",
-      "fontSize": 20,
+      "name": "title",
+      "fontSize": 80,
       "fill": "white",
       "stroke": "white",
-      "top": 20,
-      "left": 20
-    },
-    {
-      "type": "text",
-      "name": "description",
-      "fontSize": 20,
-      "fill": "white",
-      "stroke": "white",
-      "top": 40,
-      "left": 120
+      "top": 200,
+      "left": 200
     }
   ]
 }
diff --git a/website/plugins/docusaurus-plugin-open-graph-image/Readme.md b/website/plugins/docusaurus-plugin-open-graph-image/Readme.md
@@ -1,25 +1,49 @@
 # Docusaurus OpenGraph image generator plugin
 
 
-Templates configuration file example:  
+### Templates folder files listing.
+```sh
+└── website/
+    └── open-graph-tempaltes/ 
+        # required
+        ├── basic
+        |     ├── font.ttf
+        |     ├── preview.png
+        |     └── template.json
+        |
+        └── config.json
+```
+
+
+### Templates configuration file example:  
 **config.json**
 ```json
 {
-  "outputDir": "",
-  "rules": {
-    "basic": {
+  "outputDir": "assets/og",
+  "textWidthLimit": 1100,
+  "quality": 70,
+  "rules": [
+    {
+      "name": "basic",
       "priority": 0,
-      "pattern": "*"
+      "pattern": "."
     },
-    "gray": {
+    {
+      "name": "gray",
       "priority": 1,
-      "pattern": "*"
+      "pattern": "^concepts*"
+    },
+    {
+      "name": "gray",
+      "priority": 2,
+      "pattern": "^about*"
     }
-  }
+  ]
 }
+
 ```
 
-Template configuration example:  
+### Template configuration example:  
 **template.json**
 ```json
 {
@@ -28,23 +52,13 @@ Template configuration example:
   "layout": [
     {
       "type": "text",
-      "name": "label",
-      "fontSize": 72,
+      "name": "title",
+      "fontSize": 80,
       "fill": "white",
       "stroke": "white",
-      "top": 20,
-      "left": 20
-    },
-    {
-      "type": "text",
-      "name": "description",
-      "fontSize": 64,
-      "fill": "white",
-      "stroke": "white",
-      "top": 40,
-      "left": 120
+      "top": 400,
+      "left": 200
     }
   ]
 }
-
 ```
diff --git a/website/plugins/docusaurus-plugin-open-graph-image/config.js b/website/plugins/docusaurus-plugin-open-graph-image/config.js
@@ -0,0 +1,11 @@
+const fs = require("fs");
+const { objectFromBuffer, validateConfig } = require("./utils");
+
+module.exports.getConfig = function (path, encode = "utf-8") {
+    const config = objectFromBuffer(fs.readFileSync(`${path}\\config.json`, encode));
+    if (!validateConfig(config)) {
+        console.error("Config validation error");
+        return;
+    }
+    return config;
+};
diff --git a/website/plugins/docusaurus-plugin-open-graph-image/image.js b/website/plugins/docusaurus-plugin-open-graph-image/image.js
@@ -13,7 +13,7 @@ function createImageFromTemplate({ path, name, params }) {
 module.exports.createImagesMapFromTemplates = function (templates) {
     const images = new Map();
     templates.forEach((item) => {
-        if (!images.has(item.params.image)) {
+        if (!images.has(`${item.name}_${item.params.image}`)) {
             images.set(`${item.name}_${item.params.image}`, createImageFromTemplate(item));
         }
     });
diff --git a/website/plugins/docusaurus-plugin-open-graph-image/index.js b/website/plugins/docusaurus-plugin-open-graph-image/index.js
@@ -5,6 +5,8 @@ const { validateTemplate } = require("./utils");
 const { createLayoutLayers } = require("./layout");
 const { createFontsMapFromTemplates } = require("./font");
 const { createImagesMapFromTemplates } = require("./image");
+const { getConfig } = require("./config");
+const { getTemplateNameByRules } = require("./rules");
 
 module.exports = function (context, { templatesDir }) {
     const isProd = process.env.NODE_ENV === "production";
@@ -17,33 +19,40 @@ module.exports = function (context, { templatesDir }) {
 
     const templates = getTemplates(templatesDir);
     if (!templates.some(validateTemplate)) {
-        console.error("Template validation error.");
         return;
     }
 
+    const config = getConfig(templatesDir);
+    if (!config) return;
+
+    // TODO: File not found exception?
     const fonts = createFontsMapFromTemplates(templates);
     const images = createImagesMapFromTemplates(templates);
 
     async function generateImageFromDoc(doc, locale, outputDir) {
         const { id, title } = doc;
 
-        // use basic
         const hashFileName = sha1(id + locale);
+        const templateName = getTemplateNameByRules(id, config.rules);
 
-        const template = templates.find((item) => item.name === "basic");
+        const template = templates.find((item) => item.name === templateName);
 
         const previewImage = await images.get(`${template.name}_${template.params.image}`).clone();
 
         const previewFont = fonts.get(template.params.font);
 
-        const textLayers = createLayoutLayers(doc, template.params.layout, previewFont);
+        const textLayers = createLayoutLayers(
+            doc,
+            template.params.layout,
+            previewFont,
+            config.textWidthLimit,
+        );
 
         try {
             await previewImage.composite(textLayers);
             await previewImage
                 .jpeg({
-                    // TODO: Quality from config.json
-                    quality: 80,
+                    quality: config.quality,
                     chromaSubsampling: "4:4:4",
                 })
                 .toFile(`${outputDir}\\${hashFileName}.jpg`);
@@ -59,7 +68,7 @@ module.exports = function (context, { templatesDir }) {
                 (plugin) => plugin.name === "docusaurus-plugin-content-docs",
             );
 
-            const previewOutputDir = `${outDir}\\assets\\og\\`;
+            const previewOutputDir = `${outDir}\\${config.outputDir}`;
             fs.mkdir(previewOutputDir, { recursive: true }, (error) => {
                 if (error) throw error;
             });
diff --git a/website/plugins/docusaurus-plugin-open-graph-image/layout.js b/website/plugins/docusaurus-plugin-open-graph-image/layout.js
@@ -1,6 +1,6 @@
 const { createSVGText } = require("./font");
 
-module.exports.createLayoutLayers = function (doc, layout, previewFont) {
+module.exports.createLayoutLayers = function (doc, layout, previewFont, textWidthLimit) {
     const layers = layout.map((item) => {
         if (!Object.prototype.hasOwnProperty.call(doc, item.name)) {
             console.error(`Wrong template config? Doc property ${item.name} not found.`);
@@ -14,7 +14,9 @@ module.exports.createLayoutLayers = function (doc, layout, previewFont) {
         };
 
         return {
-            input: Buffer.from(createSVGText(previewFont, doc[item.name], layoutOptions)),
+            input: Buffer.from(
+                createSVGText(previewFont, doc[item.name], layoutOptions, textWidthLimit),
+            ),
             top: item.top,
             left: item.left,
         };
diff --git a/website/plugins/docusaurus-plugin-open-graph-image/rules.js b/website/plugins/docusaurus-plugin-open-graph-image/rules.js
@@ -0,0 +1,5 @@
+module.exports.getTemplateNameByRules = function (path, rules) {
+    const filteredRules = rules.filter((rule) => new RegExp(rule.pattern).test(path));
+    const sortedRules = filteredRules.sort((a, b) => b.priority - a.priority);
+    return sortedRules[0]?.name || "basic";
+};
diff --git a/website/plugins/docusaurus-plugin-open-graph-image/utils.js b/website/plugins/docusaurus-plugin-open-graph-image/utils.js
@@ -26,25 +26,27 @@ module.exports.validateTemplate = function ({ params }) {
             return acc;
         }, true);
     }
+    console.error("Template validation error.");
     return false;
 };
 
 module.exports.objectFromBuffer = function objectFromBuffer(buffer) {
     return JSON.parse(buffer.toString());
 };
 
-const Config = object({
-    outputDir: string(),
-    textWidthLimit: number(),
-    rules: array(),
-});
-
 const Rule = object({
     name: string(),
     priority: number(),
     pattern: string(),
 });
 
+const Config = object({
+    outputDir: string(),
+    textWidthLimit: number(),
+    quality: number(),
+    rules: array(Rule),
+});
+
 module.exports.validateConfig = function (config) {
     if (is(config, Config)) {
         return config.rules.reduce((acc, item) => {
diff --git a/website/src/theme/DocItem/index.js b/website/src/theme/DocItem/index.js
@@ -6,12 +6,17 @@ import { OpenGraphPreview } from "../../shared/lib/open-graph-preview";
 function DocItem(props) {
     const { content } = props;
     const { id, source } = content.metadata;
-    const lang = source.match(/i18n\/(?<locale>[a-z]+)\//)?.locale;
+
+    const lang = source.match(/i18n\/(?<locale>[a-z]+)\//)?.groups?.locale;
+    // No any load for static
     const hashFileName = sha1(id + lang);
 
     return (
         <>
-            <OpenGraphPreview imgUrl={hashFileName} />
+            {/* TODO: Add and use domain from env? */}
+            <OpenGraphPreview
+                imgUrl={`https://feature-sliced.design/assets/og/${hashFileName}.jpg`}
+            />
             <OriginalDocItem {...props} />
         </>
     );

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`"font": "arial.ttf",`
`4`	`4`	`"layout": [`
`5`	`5`	`{`
`6`		`- "typse": "text",`
	`6`	`+ "type": "text",`
`7`	`7`	`"name": "title",`
`8`	`8`	`"fontSize": 80,`
`9`	`9`	`"fill": "white",`
Original file line number	Diff line number	Diff line change
`@@ -1,16 +1,22 @@`
`1`	`1`	`{`
`2`	`2`	`"outputDir": "assets/og",`
`3`		`- "textWidthLimit": 200,`
	`3`	`+ "textWidthLimit": 1100,`
	`4`	`+ "quality": 70,`
`4`	`5`	`"rules": [`
`5`	`6`	`{`
`6`	`7`	`"name": "basic",`
`7`	`8`	`"priority": 0,`
`8`		`- "pattern": "*"`
	`9`	`+ "pattern": "."`
`9`	`10`	`},`
`10`	`11`	`{`
`11`	`12`	`"name": "gray",`
`12`	`13`	`"priority": 1,`
`13`		`- "pattern": "*"`
	`14`	`+ "pattern": "^concepts*"`
	`15`	`+ },`
	`16`	`+ {`
	`17`	`+ "name": "gray",`
	`18`	`+ "priority": 2,`
	`19`	`+ "pattern": "^about*"`
`14`	`20`	`}`
`15`	`21`	`]`
`16`	`22`	`}`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@ function createImageFromTemplate({ path, name, params }) {`
`13`	`13`	`module.exports.createImagesMapFromTemplates = function (templates) {`
`14`	`14`	`const images = new Map();`
`15`	`15`	`templates.forEach((item) => {`
`16`		`- if (!images.has(item.params.image)) {`
	`16`	+ if (!images.has(`${item.name}_${item.params.image}`)) {
`17`	`17`	images.set(`${item.name}_${item.params.image}`, createImageFromTemplate(item));
`18`	`18`	`}`
`19`	`19`	`});`