From 5865c890b51eca7aa332f5bfe30aca0b4a41d4b2 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 7 Oct 2022 15:52:32 +0800 Subject: [PATCH] docs: Add mermaid version to script URL --- docs/README.md | 4 ++-- docs/n00b-gettingStarted.md | 4 ++-- docs/usage.md | 4 ++-- package.json | 1 + packages/mermaid/src/docs.mts | 4 +++- packages/mermaid/src/docs/README.md | 4 ++-- packages/mermaid/src/docs/n00b-gettingStarted.md | 4 ++-- packages/mermaid/src/docs/usage.md | 4 ++-- pnpm-lock.yaml | 2 ++ vdocs/config/usage.md | 4 ++-- vdocs/intro/index.md | 2 +- vdocs/intro/n00b-gettingStarted.md | 4 ++-- 12 files changed, 23 insertions(+), 18 deletions(-) diff --git a/docs/README.md b/docs/README.md index 00e03c76d..2b0c55837 100644 --- a/docs/README.md +++ b/docs/README.md @@ -274,13 +274,13 @@ To Deploy Mermaid: **To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaidAPI` call into the HTML like so:** ```html - + ``` -**Doing so will command the mermaid parser to look for the `
` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.** +**Doing so will command the mermaid parser to look for the `
` or `
` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.**
 
 **Examples can be found at** [Other examples](/examples)
 
diff --git a/docs/n00b-gettingStarted.md b/docs/n00b-gettingStarted.md
index b82e2ff01..df637ecfc 100644
--- a/docs/n00b-gettingStarted.md
+++ b/docs/n00b-gettingStarted.md
@@ -87,7 +87,7 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an
 
 ```html
 
-  
+  
 
 ```
 
@@ -135,7 +135,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
 ```html
 
   
-    
+    
     
diff --git a/docs/usage.md b/docs/usage.md
index be986a56b..aced1c4be 100644
--- a/docs/usage.md
+++ b/docs/usage.md
@@ -44,7 +44,7 @@ The easiest way to integrate mermaid on a web page requires three elements:
 1.  Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.Example:
 
     ```html
-    
+    
     ```
 
 2.  The `mermaidAPI` call, in a separate `script` tag. Example:
@@ -84,7 +84,7 @@ locate the graph definitions inside the `div` tags with `class="mermaid"` and re
       B-->C[fa:fa-ban forbidden]
       B-->D(fa:fa-spinner);
- + diff --git a/package.json b/package.json index c1c33920f..82b84580c 100644 --- a/package.json +++ b/package.json @@ -97,6 +97,7 @@ "@types/express": "^4.17.14", "@types/jsdom": "^20.0.0", "@types/lodash": "^4.14.186", + "@types/mdast": "^3.0.10", "@types/prettier": "^2.7.1", "@types/stylis": "^4.0.2", "@typescript-eslint/eslint-plugin": "^5.39.0", diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts index a22dc59e2..842c21056 100644 --- a/packages/mermaid/src/docs.mts +++ b/packages/mermaid/src/docs.mts @@ -41,6 +41,8 @@ import { remark } from 'remark'; // @ts-ignore No typescript declaration file import flatmap from 'unist-util-flatmap'; +const version = JSON.parse(readFileSync('package.json', 'utf8')).version; + // These paths are from the root of the mono-repo, not from the // mermaid sub-directory const SOURCE_DOCS_DIR = 'packages/mermaid/src/docs'; @@ -144,7 +146,7 @@ const readSyncedUTF8file = (filename: string): string => { * @param file {string} name of the file that will be verified */ const transformMarkdown = (file: string) => { - const doc = readSyncedUTF8file(file); + const doc = readSyncedUTF8file(file).replace(//g, version); const ast: Root = remark.parse(doc); const out = flatmap(ast, (c: Code) => { if (c.type !== 'code') { diff --git a/packages/mermaid/src/docs/README.md b/packages/mermaid/src/docs/README.md index e8bba38da..f2ba13a83 100644 --- a/packages/mermaid/src/docs/README.md +++ b/packages/mermaid/src/docs/README.md @@ -190,13 +190,13 @@ To Deploy Mermaid: **To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaidAPI` call into the HTML like so:** ```html - + ``` -**Doing so will command the mermaid parser to look for the `
` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.** +**Doing so will command the mermaid parser to look for the `
` or `
` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.**
 
 **Examples can be found at** [Other examples](/examples)
 
diff --git a/packages/mermaid/src/docs/n00b-gettingStarted.md b/packages/mermaid/src/docs/n00b-gettingStarted.md
index 950c4eba6..c0fd4125a 100644
--- a/packages/mermaid/src/docs/n00b-gettingStarted.md
+++ b/packages/mermaid/src/docs/n00b-gettingStarted.md
@@ -85,7 +85,7 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an
 
 ```html
 
-  
+  
 
 ```
 
@@ -133,7 +133,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
 ```html
 
   
-    
+    
     
diff --git a/packages/mermaid/src/docs/usage.md b/packages/mermaid/src/docs/usage.md
index 026625894..c219de3df 100644
--- a/packages/mermaid/src/docs/usage.md
+++ b/packages/mermaid/src/docs/usage.md
@@ -44,7 +44,7 @@ The easiest way to integrate mermaid on a web page requires three elements:
 1.  Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.Example:
 
     ```html
-    
+    
     ```
 
 2.  The `mermaidAPI` call, in a separate `script` tag. Example:
@@ -84,7 +84,7 @@ locate the graph definitions inside the `div` tags with `class="mermaid"` and re
       B-->C[fa:fa-ban forbidden]
       B-->D(fa:fa-spinner);
- + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9cb8306ea..c157bc20f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,7 @@ importers: '@types/express': ^4.17.14 '@types/jsdom': ^20.0.0 '@types/lodash': ^4.14.186 + '@types/mdast': ^3.0.10 '@types/node': ^18.8.1 '@types/prettier': ^2.7.1 '@types/stylis': ^4.0.2 @@ -104,6 +105,7 @@ importers: '@types/express': 4.17.14 '@types/jsdom': 20.0.0 '@types/lodash': 4.14.186 + '@types/mdast': 3.0.10 '@types/prettier': 2.7.1 '@types/stylis': 4.0.2 '@typescript-eslint/eslint-plugin': 5.39.0_xyciw6oqjoiiono4dhv3uhn5my diff --git a/vdocs/config/usage.md b/vdocs/config/usage.md index 10b3b7238..4a6718594 100644 --- a/vdocs/config/usage.md +++ b/vdocs/config/usage.md @@ -44,7 +44,7 @@ The easiest way to integrate mermaid on a web page requires three elements: 1. Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.Example: ```html - + ``` 2. The `mermaidAPI` call, in a separate `script` tag. Example: @@ -84,7 +84,7 @@ locate the graph definitions inside the `div` tags with `class="mermaid"` and re B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner); - + diff --git a/vdocs/intro/index.md b/vdocs/intro/index.md index 030409c6d..fcf61ff09 100644 --- a/vdocs/intro/index.md +++ b/vdocs/intro/index.md @@ -265,7 +265,7 @@ To Deploy Mermaid: **To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaidAPI` call into the HTML like so:** ```html - + diff --git a/vdocs/intro/n00b-gettingStarted.md b/vdocs/intro/n00b-gettingStarted.md index 14b49057e..015be984f 100644 --- a/vdocs/intro/n00b-gettingStarted.md +++ b/vdocs/intro/n00b-gettingStarted.md @@ -94,7 +94,7 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an ```html - + ``` @@ -142,7 +142,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac ```html - +