Merge pull request #3777 from mermaid-js/sidv/fixCDN

Switch CDN to unpkg.com
mermaid-js · Nov 10, 2022 · dcab2c5 · dcab2c5
2 parents dd5d99e + 0af36f1
commit dcab2c5
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 23 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -275,7 +275,7 @@ To Deploy Mermaid:
 
 ```html
 <script type="module">
-  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
+  import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
   mermaid.initialize({ startOnLoad: true });
 </script>
 ```

diff --git a/docs/index.html b/docs/index.html
@@ -49,8 +49,8 @@
   <body>
     <div id="app"></div>
     <script type="module">
-      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9.2.2/dist/mermaid.esm.min.mjs';
-      import mindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.2.2/dist/mermaid-mindmap.esm.mjs';
+      import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+      import mindmap from 'https://unpkg.com/@mermaid-js/mermaid-mindmap@9/dist/mermaid-mindmap.esm.min.mjs';
       await mermaid.registerExternalDiagrams([mindmap]);
 
       window.mermaid = mermaid;
@@ -145,8 +145,8 @@
               return editHtml + html;
             });
             // Invoked on each page load after new HTML has been appended to the DOM
-            hook.doneEach(function () {
-              window.mermaid.init();
+            hook.doneEach(async function () {
+              await mermaid.init();
             });
 
             hook.afterEach(function (html, next) {

diff --git a/docs/n00b-gettingStarted.md b/docs/n00b-gettingStarted.md
@@ -104,7 +104,7 @@ b. The importing of mermaid library through the `mermaid.esm.js` or `mermaid.esm
 ```html
 <body>
   <script type="module">
-    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
+    import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
     mermaid.initialize({ startOnLoad: true });
   </script>
 </body>
@@ -144,7 +144,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
     </pre>
 
     <script type="module">
-      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
+      import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
       mermaid.initialize({ startOnLoad: true });
     </script>
   </body>

diff --git a/docs/usage.md b/docs/usage.md
@@ -58,7 +58,7 @@ Example:
 
 ```html
 <script type="module">
-  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
+  import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
   mermaid.initialize({ startOnLoad: true });
 </script>
 ```
@@ -81,7 +81,7 @@ Example:
       B-->D(fa:fa-spinner);
     </pre>
     <script type="module">
-      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
+      import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
       mermaid.initialize({ startOnLoad: true });
     </script>
   </body>

diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts
@@ -44,6 +44,7 @@ import flatmap from 'unist-util-flatmap';
 const MERMAID_MAJOR_VERSION = (
   JSON.parse(readFileSync('packages/mermaid/package.json', 'utf8')).version as string
 ).split('.')[0];
+const CDN_URL = 'https://unpkg.com'; // https://cdn.jsdelivr.net/npm
 
 // These paths are from the root of the mono-repo, not from the
 // mermaid sub-directory
@@ -135,6 +136,9 @@ const readSyncedUTF8file = (filename: string): string => {
   return readFileSync(filename, 'utf8');
 };
 
+const injectPlaceholders = (text: string): string =>
+  text.replace(/<MERMAID_VERSION>/g, MERMAID_MAJOR_VERSION).replace(/<CDN_URL>/g, CDN_URL);
+
 /**
  * Transform a markdown file and write the transformed file to the directory for published
  * documentation
@@ -148,7 +152,8 @@ const readSyncedUTF8file = (filename: string): string => {
  * @param file {string} name of the file that will be verified
  */
 const transformMarkdown = (file: string) => {
-  const doc = readSyncedUTF8file(file).replace(/<MERMAID_VERSION>/g, MERMAID_MAJOR_VERSION);
+  const doc = injectPlaceholders(readSyncedUTF8file(file));
+
   const ast: Root = remark.parse(doc);
   const out = flatmap(ast, (c: Code) => {
     if (c.type !== 'code') {
@@ -189,10 +194,7 @@ const transformHtml = (filename: string) => {
    * @returns {string} The contents of the file with the comment inserted
    */
   const insertAutoGeneratedComment = (fileName: string): string => {
-    const fileContents = readSyncedUTF8file(fileName).replace(
-      /<MERMAID_VERSION>/g,
-      MERMAID_MAJOR_VERSION
-    );
+    const fileContents = injectPlaceholders(readSyncedUTF8file(fileName));
     const jsdom = new JSDOM(fileContents);
     const htmlDoc = jsdom.window.document;
     const autoGeneratedComment = jsdom.window.document.createComment(AUTOGENERATED_TEXT);

diff --git a/packages/mermaid/src/docs/README.md b/packages/mermaid/src/docs/README.md
@@ -191,7 +191,7 @@ To Deploy Mermaid:
 
 ```html
 <script type="module">
-  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
+  import mermaid from '<CDN_URL>/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
   mermaid.initialize({ startOnLoad: true });
 </script>
 ```

diff --git a/packages/mermaid/src/docs/index.html b/packages/mermaid/src/docs/index.html
@@ -49,8 +49,8 @@
   <body>
     <div id="app"></div>
     <script type="module">
-      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
-      import mindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@<MERMAID_VERSION>/dist/mermaid-mindmap.esm.mjs';
+      import mermaid from '<CDN_URL>/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
+      import mindmap from '<CDN_URL>/@mermaid-js/mermaid-mindmap@<MERMAID_VERSION>/dist/mermaid-mindmap.esm.min.mjs';
       await mermaid.registerExternalDiagrams([mindmap]);
 
       window.mermaid = mermaid;
@@ -145,8 +145,8 @@
               return editHtml + html;
             });
             // Invoked on each page load after new HTML has been appended to the DOM
-            hook.doneEach(function () {
-              window.mermaid.init();
+            hook.doneEach(async function () {
+              await mermaid.init();
             });
 
             hook.afterEach(function (html, next) {

diff --git a/packages/mermaid/src/docs/n00b-gettingStarted.md b/packages/mermaid/src/docs/n00b-gettingStarted.md
@@ -102,7 +102,7 @@ b. The importing of mermaid library through the `mermaid.esm.js` or `mermaid.esm
 ```html
 <body>
   <script type="module">
-    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
+    import mermaid from '<CDN_URL>/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
     mermaid.initialize({ startOnLoad: true });
   </script>
 </body>
@@ -142,7 +142,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
     </pre>
 
     <script type="module">
-      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
+      import mermaid from '<CDN_URL>/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
       mermaid.initialize({ startOnLoad: true });
     </script>
   </body>

diff --git a/packages/mermaid/src/docs/usage.md b/packages/mermaid/src/docs/usage.md
@@ -58,7 +58,7 @@ Example:
 
 ```html
 <script type="module">
-  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
+  import mermaid from '<CDN_URL>/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
   mermaid.initialize({ startOnLoad: true });
 </script>
 ```
@@ -81,7 +81,7 @@ Example:
       B-->D(fa:fa-spinner);
     </pre>
     <script type="module">
-      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
+      import mermaid from '<CDN_URL>/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
       mermaid.initialize({ startOnLoad: true });
     </script>
   </body>