allow specifying code languages that get automatically promoted into …

…kroki blocks

README.md

@@ -15,6 +15,7 @@ The include code plugin is normally used in the context of a site generator usin
    1. __lang__: The image transformations is applied for all codeblocks with this language. 
    1. __imgRefDir__: The prefix that will be used for a generated image to create the link. 
    1. __imgDir__: The directory where the generated image files are stored.
+   1. __langAliases__: an array of markdown code languages that get treated as a kroki document ([See blow](#automatic-use-of-existing-language-tags))
 
 ### Docusaurus 2 
 
@@ -62,6 +63,8 @@ The user can decide to put generated images under version control so that images
 
 ### Examples
 
+#### Explicit kroki "language"
+
 __Generate a mermaid image__
 
 <pre>
@@ -85,6 +88,53 @@ graph TD
 ```
 </pre>
 
+#### Automatic use of existing language tags
+
+In some cases, it would make a lot of sense to preserve the original language tag, for example `mermaid` documents are a first-class citizen in many markdown editors and is even explicitly supported inside popular code hosting services such as GitHub and GitLab.
+
+In such cases, in would make sense to supply the optional `langAliases` option as part of the kroki plugin setup like so, to avoid rewriting the language tag for existing code-blocks that work well in other environments not related to remark/kroki:
+
+```json
+  presets: [
+    [
+      '@docusaurus/preset-classic',
+      {
+        docs: {
+          sidebarPath: require.resolve('./sidebars.js'),
+          remarkPlugins: [
+            [require('remark-kroki-plugin'), { i
+              krokiBase: 'https://kroki.io',
+              lang: "kroki",
+              langAliases: ["mermaid"],
+              imgRefDir: "../img/kroki",
+              imgDir: "static/img/kroki"
+          }]
+          ],
+```
+
+This in turn allows for direct inclusing of mermaid blocks in a more straight-forward manner:
+
+<pre>
+```mermaid
+graph TD
+  subgraph Shop X
+    Bx(Shop X) --> FX1((Fs X1)) --> Bx
+    Bx --> FX2((Fs X2)) --> Bx
+  end
+  subgraph Shop Y
+    By(Shop Y) --> FY1((Fs Y1)) --> By
+    By --> FY2((Fs Y2)) --> By
+  end
+  subgraph Shop Z
+    Bz(Shop Z) --> FZ1((Fs Z1)) --> Bz
+    Bz --> FZ2((Fs Z2)) --> Bz
+  end
+  A(Data Center) --> Bx --> A
+  A --> By --> A
+  A --> Bz --> A
+```
+</pre>
+
 ## Development 
 
 It might be good to allow the generated filename to be overwritten with a parameter.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "remark-kroki-plugin",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Generate images from text using the kroki web service",
   "repository": "https://github.com/atooni/remark-kroki-plugin.git",
   "license": "Apache 2.0",
@@ -31,4 +31,4 @@
     "tslint": "^6.1.3",
     "typescript": "^4.1.3"
   }
-}
+}

src/__fixtures__/aliasedTransform/expected.md

@@ -0,0 +1,9 @@
+## Sample image
+
+Some Text
+
+![An image](images/afc39df4753b3177ac90e72d3bc7d06f.svg "The best image ever")
+
+## More text
+
+Something interesting to say ....

src/__fixtures__/aliasedTransform/input.md

@@ -0,0 +1,26 @@
+## Sample image
+
+Some Text 
+
+```mermaid imgAlt="An image" imgTitle="The best image ever"
+graph TD
+  subgraph Shop X
+    Bx(Shop X) --> FX1((Fs X1)) --> Bx
+    Bx --> FX2((Fs X2)) --> Bx
+  end
+  subgraph Shop Y
+    By(Shop Y) --> FY1((Fs Y1)) --> By
+    By --> FY2((Fs Y2)) --> By
+  end
+  subgraph Shop Z
+    Bz(Shop Z) --> FZ1((Fs Z1)) --> Bz
+    Bz --> FZ2((Fs Z2)) --> Bz
+  end
+  A(Data Center) --> Bx --> A
+  A --> By --> A
+  A --> Bz --> A
+```
+
+## More text
+
+Something interesting to say ....

src/__fixtures__/aliasedTransform/options.js

@@ -0,0 +1,7 @@
+module.exports = {
+  lang: "kroki",
+  langAliases: ["mermaid"],
+  imgDir: "./images",
+  imgRefDir: "images",
+  krokiBase: "https://kroki.io"
+}

src/transform.ts

@@ -9,7 +9,8 @@ export interface KrokiOptions {
   krokiBase: string,
   imgDir: string,
   imgRefDir: string,
-  lang: string
+  lang: string,
+  langAliases: string[]
 }
 
 function get<V>(v: (V | undefined)): V {
@@ -95,11 +96,13 @@ const applyCodeBlock = (options: KrokiOptions, node: any) => {
 
   let kb = undefined
 
-  if (lang === options.lang) {
+  let isAliasLang = options.langAliases != undefined && options.langAliases.includes(lang);
+
+  if (lang === options.lang || isAliasLang) {
 
     const imgAlt = extractParam("imgAlt", meta);
     const imgTitle = extractParam("imgTitle", meta);
-    const imgType = get(extractParam("imgType", meta));
+    const imgType = isAliasLang ? lang : get(extractParam("imgType", meta));
 
     kb = new ImageBlock(
       node,
@@ -138,4 +141,4 @@ export const transform = (options: KrokiOptions) => (tree: any) => new Promise<v
   }
 
   resolve();
-});
+});