Merge branch 'develop' into sidv/asyncMonaco

* develop: (30 commits)
  chore(deps): update all non-major dependencies
  build: update Browserslist db
  fix Test
  chore(deps): update all non-major dependencies
  chore(deps): update node.js to v19
  chore(deps): update dependency jsdom to v21
  chore(deps): update actions/stale action to v8
  chore(deps): update all non-major dependencies
  Bump d3-color from 3.0.1 to 3.1.0
  Did it really work??
  Reduce timeouts
  Splitup tests
  cacheBust loadSite
  Reduce timeout & retries
  Update typeInEditor
  Fix commenting test
  Fix commenting test
  Fix loadSite ?
  Fix commenting test
  Fix branch test
  ...

.github/workflows/stale.yml

@@ -8,7 +8,7 @@ jobs:
   stale:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/stale@v6
+      - uses: actions/stale@v8
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           exempt-issue-labels: 'retained'

.vscode/settings.json

@@ -1,19 +1,23 @@
 {
   "editor.formatOnSave": true,
+  "cSpell.blockCheckingWhenLineLengthGreaterThan": 150,
   "cSpell.words": [
-    "Browserslist",
-    "KROKI",
-    "Serde",
     "asyncable",
+    "Browserslist",
+    "ckppp",
     "corg",
     "cssnano",
     "daisyui",
     "esserializer",
+    "KROKI",
     "localstorage",
+    "mermaidchart",
     "mindmap",
     "pako",
+    "Serde",
     "serdes",
-    "tailwindcss"
+    "tailwindcss",
+    "uparrow"
   ],
   "vitest.commandLine": "yarn test:unit",
   "vitest.enable": true,

Dockerfile

@@ -6,7 +6,7 @@
 # Stop               : press ctrl + c 
 #                                     or 
 #                                        docker stop mermaid-live-editor
-FROM node:18.14.0 as mermaid-live-editor-builder 
+FROM node:19.9.0 as mermaid-live-editor-builder 
 COPY --chown=node:node . /home
 WORKDIR /home
 RUN yarn install

Dockerfile.dev

@@ -1,4 +1,4 @@
-FROM node:18
+FROM node:19
 WORKDIR /app
 COPY package.json .
 COPY yarn.lock .

cypress.config.js

@@ -6,10 +6,10 @@ export default defineConfig({
   viewportWidth: 1440,
   viewportHeight: 768,
   snapshotFileName: './cypress/snapshots.js',
-  defaultCommandTimeout: 16000,
-  requestTimeout: 16000,
+  defaultCommandTimeout: 5000,
+  requestTimeout: 5000,
   retries: {
-    runMode: 4,
+    runMode: 2,
     openMode: 0
   },
   e2e: {

cypress/e2e/actions.spec.ts

@@ -1,4 +1,4 @@
-import { verifyFileSizeGreaterThan } from './util';
+import { typeInEditor, verifyFileSizeGreaterThan } from './util';
 describe('Check actions', () => {
   beforeEach(() => {
     cy.clearLocalStorage();
@@ -10,7 +10,7 @@ describe('Check actions', () => {
     cy.get('#markdown')
       .invoke('val')
       .then((oldText) => {
-        cy.get('#editor').click('bottom').type('{enter}C --> HistoryTest');
+        typeInEditor('C --> HistoryTest', { bottom: true, newline: true });
         cy.get('#markdown')
           .invoke('val')
           .then((newText) => {
@@ -29,7 +29,7 @@ describe('Check actions', () => {
     cy.clock(new Date(2022, 0, 1).getTime());
 
     cy.get(`#downloadPNG`).click();
-    verifyFileSizeGreaterThan('diagram', 'png', 35_000);
+    verifyFileSizeGreaterThan('diagram', 'png', 34_000);
 
     cy.get(`#downloadSVG`).click();
     verifyFileSizeGreaterThan('diagram', 'svg', 10_000);

cypress/e2e/diagramUpdate.spec.ts

@@ -1,16 +1,17 @@
-import { getEditor, cmd } from './util';
+import { typeInEditor, cmd } from './util';
 
 describe('Auto sync tests', () => {
   beforeEach(() => {
     cy.clearLocalStorage();
     cy.visit('/');
+    cy.url().should('contain', '/edit#pako');
   });
 
   it('should dim diagram when code is edited', () => {
     cy.contains('Auto sync').click();
     cy.get('#view').should('not.have.class', 'outOfSync');
     cy.get('#errorContainer').should('not.exist');
-    getEditor({ bottom: true, newline: true }).type('  C --> Test');
+    typeInEditor('  C --> Test', { bottom: true });
     cy.get('#view').should('have.class', 'outOfSync');
     cy.get('#errorContainer').should('contain.text', 'Diagram out of sync.');
     cy.getLocalStorage('codeStore').snapshot();
@@ -19,10 +20,10 @@ describe('Auto sync tests', () => {
   it('should update diagram when shortcut is used', () => {
     cy.contains('Auto sync').click();
     cy.get('#view').should('not.have.class', 'outOfSync');
-    getEditor().type('  C --> Test');
+    typeInEditor('  C --> Test');
     cy.get('#view').should('have.class', 'outOfSync');
     cy.get('#errorContainer').should('contain.text', 'Diagram out of sync.');
-    getEditor().type(`${cmd}{enter}`);
+    typeInEditor(`${cmd}{enter}`);
     cy.get('#errorContainer').should('not.exist');
     cy.get('#view').should('not.have.class', 'outOfSync');
   });
@@ -38,21 +39,22 @@ describe('Auto sync tests', () => {
   it('should not dim diagram when code is in sync', () => {
     cy.contains('Auto sync').click();
     cy.get('#view').should('not.have.class', 'outOfSync');
-    getEditor().type('  C --> Test');
+    typeInEditor('  C --> Test');
     cy.get('#view').should('have.class', 'outOfSync');
     cy.get('[data-cy=sync]').click();
     cy.get('#view').should('not.have.class', 'outOfSync');
     cy.get('#autoSync').check();
-    getEditor().type('ing');
+    typeInEditor('ing');
     cy.get('#view').should('not.have.class', 'outOfSync');
     cy.getLocalStorage('codeStore').snapshot();
   });
 
   it('supports commenting code out/in', () => {
-    getEditor({ bottom: true, newline: false }).type(`{uparrow}${cmd}/`);
+    cy.get('#editor').contains('Car').click();
+    cy.focused().type(`${cmd}/`);
     cy.get('#view').contains('Car').should('not.exist');
 
-    getEditor().type(`{uparrow}${cmd}/`);
+    typeInEditor(`{uparrow}${cmd}/`);
     cy.get('#view').contains('Car').should('exist');
   });
 
@@ -61,7 +63,7 @@ describe('Auto sync tests', () => {
       '/edit#pako:eNpljjEKwzAMRa8SNOcEnlt6gK5eVFvYJsgOqkwpIXevg9smEE1PnyfxF3DFExgISW-CczQ2D21cYU7a-SGYXRwyvTp9jUhuKlVP-eHy7zA-leQsMEmg_QOM0BLG5FujZVMsaCQmC6ahR5ks2Lw2r84ela4-aREwKpVGwKrl_s7ut3fnkjAIcg_XDzuaUhs'
     );
     cy.get('#errorContainer').should('not.exist');
-    getEditor({ newline: true }).type(`branch test`);
+    typeInEditor(`branch test`, { bottom: true, newline: true });
     cy.get('#editor').contains('branch test').should('exist');
     cy.get('#errorContainer')
       .contains(
@@ -72,9 +74,9 @@ describe('Auto sync tests', () => {
 
   it('should update diagram after entire text is removed', () => {
     // https://github.com/mermaid-js/mermaid-live-editor/issues/1102
-    getEditor().type(`${cmd} a {backspace}`);
-    getEditor().type('graph LR');
-    getEditor().type(' {enter}  A-->Car');
+    typeInEditor(`${cmd} a {backspace}`);
+    typeInEditor('graph LR');
+    typeInEditor(' {enter}  A-->Car');
     cy.get('#view').contains('Car').should('exist');
   });
 });

cypress/e2e/history.spec.ts

@@ -1,4 +1,4 @@
-import { getEditor, verifyFileSnapshot } from './util';
+import { typeInEditor, verifyFileSnapshot } from './util';
 
 describe('Save History', () => {
   beforeEach(() => {
@@ -51,14 +51,14 @@ describe('Save History', () => {
       expect(str).to.equal('State already saved.');
     });
     cy.on('window:confirm', () => true);
-    getEditor().type('  C --> HistoryTest');
+    typeInEditor('  C --> HistoryTest');
     cy.get('#saveHistory').click();
     cy.get('#historyList').find('li').should('have.length', 2);
   });
 
   it('should be able to restore and delete', () => {
     cy.get('#saveHistory').click();
-    getEditor().type('  C --> HistoryTest');
+    typeInEditor('  C --> HistoryTest');
     cy.get('#historyList').find('No items in History').should('not.exist');
     cy.get('#historyList').find('li').should('have.length', 1);
     cy.contains('HistoryTest');
@@ -68,7 +68,7 @@ describe('Save History', () => {
     cy.get('#historyList').find('li').should('have.length', 0);
     cy.get('#historyList').contains('No items in History');
     cy.get('#saveHistory').click();
-    getEditor().type('  C --> HistoryTest');
+    typeInEditor('  C --> HistoryTest');
     cy.get('#saveHistory').click();
     cy.get('#editor').type('ing');
     cy.get('#clearHistory').click();
@@ -81,7 +81,7 @@ describe('Save History', () => {
 
   // TODO: Fix #639
   xit('should auto save history', () => {
-    getEditor().type('  C --> HistoryTest');
+    typeInEditor('  C --> HistoryTest');
     cy.tick(70_000);
     cy.contains('Timeline').click();
     cy.get('#historyList').find('li').should('have.length', 1);

cypress/e2e/loadSite.spec.ts

@@ -4,6 +4,7 @@ describe('Site Loads', () => {
   beforeEach(() => {
     cy.clearLocalStorage();
     cy.visit('/');
+    cy.url().should('include', '/edit#pako');
   });
 
   it('Check Home page load', () => {
@@ -93,7 +94,9 @@ describe('Site Loads', () => {
     cy.reload(true);
     cy.contains('Please Click here to Raise an issue in github.');
   });
+});
 
+describe('Verify types of URLs', () => {
   it('should load compressed URL', () => {
     cy.visit(
       '/edit#pako:eNpVkM2KwkAQhF-l6dMK5gVyEDRxvYi7sF6WjIcm0zqDzg_jBJEk725Hd2G3Tw31VVFUj23QjCWeEkUD-1p5kFs2O77BN1M6QFEshg1ncMHzfYDV2ybA1YQYrT_NXvhqgqDqtxPGkI315_ElVU__h-cB6mZLMYd4-Kvsb2GAdWM_jcT_V0xicb03RyqPVLSUoJI-OEfHyZHV0rqfDAqzYccKS3k1pbNC5Ufhuqgp81rbHBJKxuXKc6Quh6-7b7HMqeNfqLYkC7gfanwAlW1ZvQ'
@@ -105,18 +108,23 @@ describe('Site Loads', () => {
     cy.contains('Animal');
   });
 
-  it('should load uncompressed URL', () => {
-    cy.visit(
-      '/edit/#eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW05ldyBZZWFyXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICAgIEIgLS0-IEN7TGV0IG1lIHRoaW5rfVxuICAgIEMgLS0-fE9uZXwgRFtMYXB0b3BdXG4gICAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgICBDIC0tPnxUaHJlZXwgRltmYTpmYS1jYXIgQ2FyXSIsIm1lcm1haWQiOiJ7XG4gIFwidGhlbWVcIjogXCJkZWZhdWx0XCJcbn0iLCJ1cGRhdGVFZGl0b3IiOmZhbHNlLCJhdXRvU3luYyI6dHJ1ZSwidXBkYXRlRGlhZ3JhbSI6ZmFsc2V9'
-    );
-    cy.contains('New Year');
-    cy.visit(
-      '/edit#eyJjb2RlIjoiY2xhc3NEaWFncmFtXG4gICAgQW5pbWFsIDx8LS0gRHVja1xuICAgIEFuaW1hbCA8fC0tIEZpc2hcbiAgICBBbmltYWwgPHwtLSBaZWJyYVxuICAgIEFuaW1hbCA6ICtpbnQgYWdlXG4gICAgQW5pbWFsIDogK1N0cmluZyBnZW5kZXJcbiAgICBBbmltYWw6ICtpc01hbW1hbCgpXG4gICAgQW5pbWFsOiArbWF0ZSgpXG4gICAgY2xhc3MgRHVja3tcbiAgICAgICtTdHJpbmcgYmVha0NvbG9yXG4gICAgICArc3dpbSgpXG4gICAgICArcXVhY2soKVxuICAgIH1cbiAgICBjbGFzcyBGaXNoe1xuICAgICAgLWludCBzaXplSW5GZWV0XG4gICAgICAtY2FuRWF0KClcbiAgICB9XG4gICAgY2xhc3MgWmVicmF7XG4gICAgICArYm9vbCBpc193aWxkXG4gICAgICArcnVuKClcbiAgICB9XG4gICAgICAgICAgICAiLCJtZXJtYWlkIjoie1xuICBcInRoZW1lXCI6IFwiZGFya1wiXG59IiwidXBkYXRlRWRpdG9yIjpmYWxzZSwiYXV0b1N5bmMiOnRydWUsInVwZGF0ZURpYWdyYW0iOmZhbHNlfQ'
-    );
-    cy.contains('Animal');
-    cy.visit(
-      '/edit/#base64:eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW05ldyBZZWFyXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICAgIEIgLS0-IEN7TGV0IG1lIHRoaW5rfVxuICAgIEMgLS0-fE9uZXwgRFtMYXB0b3BdXG4gICAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgICBDIC0tPnxUaHJlZXwgRltmYTpmYS1jYXIgQ2FyXSIsIm1lcm1haWQiOiJ7XG4gIFwidGhlbWVcIjogXCJkZWZhdWx0XCJcbn0iLCJ1cGRhdGVFZGl0b3IiOmZhbHNlLCJhdXRvU3luYyI6dHJ1ZSwidXBkYXRlRGlhZ3JhbSI6ZmFsc2V9'
-    );
-    cy.contains('New Year');
+  describe('Uncompressed URLs', () => {
+    it('should load URL without specifier', () => {
+      cy.visit(
+        '/edit/#eyJjb2RlIjoiZ3JhcGhcbiAgICBUZXN0TGFiZWwiLCJtZXJtYWlkIjoie1xuICBcInRoZW1lXCI6IFwiZGVmYXVsdFwiXG59IiwidXBkYXRlRWRpdG9yIjpmYWxzZSwiYXV0b1N5bmMiOnRydWUsInVwZGF0ZURpYWdyYW0iOmZhbHNlfQ'
+      );
+      cy.contains('TestLabel');
+      cy.visit(
+        '/edit#eyJjb2RlIjoiY2xhc3NEaWFncmFtXG4gICAgQW5pbWFsIDx8LS0gRHVja1xuICAgIEFuaW1hbCA8fC0tIEZpc2hcbiAgICBBbmltYWwgPHwtLSBaZWJyYVxuICAgIEFuaW1hbCA6ICtpbnQgYWdlXG4gICAgQW5pbWFsIDogK1N0cmluZyBnZW5kZXJcbiAgICBBbmltYWw6ICtpc01hbW1hbCgpXG4gICAgQW5pbWFsOiArbWF0ZSgpXG4gICAgY2xhc3MgRHVja3tcbiAgICAgICtTdHJpbmcgYmVha0NvbG9yXG4gICAgICArc3dpbSgpXG4gICAgICArcXVhY2soKVxuICAgIH1cbiAgICBjbGFzcyBGaXNoe1xuICAgICAgLWludCBzaXplSW5GZWV0XG4gICAgICAtY2FuRWF0KClcbiAgICB9XG4gICAgY2xhc3MgWmVicmF7XG4gICAgICArYm9vbCBpc193aWxkXG4gICAgICArcnVuKClcbiAgICB9XG4gICAgICAgICAgICAiLCJtZXJtYWlkIjoie1xuICBcInRoZW1lXCI6IFwiZGFya1wiXG59IiwidXBkYXRlRWRpdG9yIjpmYWxzZSwiYXV0b1N5bmMiOnRydWUsInVwZGF0ZURpYWdyYW0iOmZhbHNlfQ'
+      );
+      cy.contains('Animal');
+    });
+
+    it('should load URL with "base64" specifier', () => {
+      cy.visit(
+        '/edit/#base64:eyJjb2RlIjoiZ3JhcGhcbiAgICBUZXN0TGFiZWwiLCJtZXJtYWlkIjoie1xuICBcInRoZW1lXCI6IFwiZGVmYXVsdFwiXG59IiwidXBkYXRlRWRpdG9yIjpmYWxzZSwiYXV0b1N5bmMiOnRydWUsInVwZGF0ZURpYWdyYW0iOmZhbHNlfQ'
+      );
+      cy.contains('TestLabel');
+    });
   });
 });

cypress/e2e/util.ts

@@ -1,12 +1,23 @@
 export const cmd = `{${Cypress.platform === 'darwin' ? 'meta' : 'ctrl'}}`;
 
-export const getEditor = ({ bottom = true, newline = false } = {}) =>
-  cy
-    .get('#editor textarea:first')
-    .click()
-    .focused()
-    .type(`${bottom ? '{pageDown}' : cmd}`)
-    .type(`${newline ? '{enter}' : cmd}`);
+interface EditorOptions {
+  bottom?: boolean;
+  newline?: boolean;
+}
+
+export const typeInEditor = (
+  text: string,
+  { bottom = true, newline = false }: EditorOptions = {}
+) => {
+  cy.get('#editor').click();
+  if (bottom) {
+    cy.focused().type('{pageDown}');
+  }
+  if (newline) {
+    cy.focused().type('{enter}');
+  }
+  cy.focused().type(text);
+};
 
 const downloadsFolder = Cypress.config('downloadsFolder');
 

cypress/snapshots.js

@@ -16,7 +16,7 @@ module.exports = {
       "1": "{\"code\":\"graph TD\\n    A[Party] -->|Get money| B(Go shopping!!)\\n    \",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"forest\\\",\\n  \\\"test\\\": \\\"hello world\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"files\",\"config\":{\"codeURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/code.mmd\",\"configURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/config.json\"}}}"
     }
   },
-  "__version": "11.2.0",
+  "__version": "12.9.0",
   "Auto sync tests": {
     "should dim diagram when code is edited": {
       "1": "{\"code\":\"flowchart TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\\n    C --> Test\",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":false,\"updateDiagram\":false}"

package.json

@@ -23,61 +23,61 @@
   },
   "devDependencies": {
     "@cypress/snapshot": "2.1.7",
-    "@sveltejs/adapter-static": "1.0.6",
-    "@sveltejs/kit": "1.5.0",
+    "@sveltejs/adapter-static": "2.0.2",
+    "@sveltejs/kit": "1.15.7",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/svelte": "3.2.2",
     "@types/pako": "2.0.0",
-    "@types/uuid": "8.3.4",
-    "@typescript-eslint/eslint-plugin": "5.51.0",
-    "@typescript-eslint/parser": "5.51.0",
-    "@vitest/ui": "^0.28.0",
-    "autoprefixer": "^10.4.13",
-    "c8": "7.12.0",
+    "@types/uuid": "9.0.1",
+    "@typescript-eslint/eslint-plugin": "5.58.0",
+    "@typescript-eslint/parser": "5.58.0",
+    "@vitest/ui": "^0.30.1",
+    "autoprefixer": "^10.4.14",
+    "c8": "7.13.0",
     "chai": "^4.3.7",
-    "cssnano": "^5.1.14",
-    "cy-verify-downloads": "0.1.11",
-    "cypress": "11.2.0",
-    "cypress-localstorage-commands": "2.2.2",
-    "eslint": "8.33.0",
-    "eslint-config-prettier": "8.6.0",
-    "eslint-plugin-cypress": "2.12.1",
+    "cssnano": "^6.0.0",
+    "cy-verify-downloads": "0.1.14",
+    "cypress": "12.9.0",
+    "cypress-localstorage-commands": "2.2.3",
+    "eslint": "8.38.0",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-cypress": "2.13.2",
     "eslint-plugin-es": "4.1.0",
     "eslint-plugin-no-only-tests": "^3.1.0",
     "eslint-plugin-postcss-modules": "2.0.0",
     "eslint-plugin-svelte3": "4.0.0",
-    "eslint-plugin-tailwindcss": "3.8.3",
-    "eslint-plugin-unicorn": "^45.0.0",
-    "eslint-plugin-vitest": "^0.0.32",
+    "eslint-plugin-tailwindcss": "3.11.0",
+    "eslint-plugin-unicorn": "^46.0.0",
+    "eslint-plugin-vitest": "^0.1.4",
     "esserializer": "1.3.10",
     "font-awesome": "^4.7.0",
-    "husky": "^8.0.2",
-    "jsdom": "20.0.3",
-    "lint-staged": "13.1.1",
-    "node-html-parser": "^6.1.4",
-    "postcss": "^8.4.19",
+    "husky": "^8.0.3",
+    "jsdom": "21.1.1",
+    "lint-staged": "13.2.1",
+    "node-html-parser": "^6.1.5",
+    "postcss": "^8.4.21",
     "postcss-load-config": "4.0.1",
-    "prettier": "2.8.3",
-    "prettier-plugin-svelte": "^2.8.1",
-    "svelte": "3.55.1",
-    "svelte-preprocess": "4.10.7",
-    "tailwindcss": "^3.2.4",
-    "tslib": "^2.4.1",
-    "typescript": "4.9.5",
-    "vite": "^4.0.1",
-    "vitest": "^0.28.0"
+    "prettier": "2.8.7",
+    "prettier-plugin-svelte": "^2.10.0",
+    "svelte": "3.58.0",
+    "svelte-preprocess": "5.0.3",
+    "tailwindcss": "^3.3.1",
+    "tslib": "^2.5.0",
+    "typescript": "5.0.4",
+    "vite": "^4.2.1",
+    "vitest": "^0.30.1"
   },
   "dependencies": {
     "analytics": "0.8.1",
     "analytics-plugin-plausible": "0.0.6",
-    "daisyui": "2.50.0",
+    "daisyui": "2.51.5",
     "dayjs": "^1.11.7",
-    "js-base64": "3.7.4",
-    "mermaid": "10.0.0",
-    "monaco-editor": "0.34.1",
+    "js-base64": "3.7.5",
+    "mermaid": "10.1.0",
+    "monaco-editor": "0.37.1",
     "monaco-mermaid": "1.0.8",
     "pako": "2.1.0",
-    "random-word-slugs": "0.1.6",
+    "random-word-slugs": "0.1.7",
     "svg-pan-zoom": "3.6.1",
     "uuid": "9.0.0"
   },
@@ -88,7 +88,7 @@
     ]
   },
   "volta": {
-    "node": "18.14.0",
+    "node": "18.16.0",
     "yarn": "1.22.19"
   },
   "engines": {

src/app.html

@@ -17,14 +17,14 @@
     <link rel="manifest" href="%sveltekit.assets%/manifest.json" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
-      integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
       crossorigin="anonymous"
       referrerpolicy="no-referrer" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/editor/editor.main.min.css"
-      integrity="sha512-GzcoZD7y5zvBofYtImXPZaPVhoY7xLPt+ysmbPb/vU+quSKFkcngxaSrxuwprDZL4MALUqGFmnqCxQZqMozv1Q=="
+      href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.37.1/min/vs/editor/editor.main.min.css"
+      integrity="sha512-wB3xfL98hWg1bpkVYSyL0js/Jx9s7FsDg9aYO6nOMSJTgPuk/PFqxXQJKKSUjteZjeYrfgo9NFBOA1r9HwDuZw=="
       crossorigin="anonymous"
       referrerpolicy="no-referrer" />
     <script>
@@ -35,20 +35,23 @@
       };
     </script>
     <script
-      src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/loader.min.js"
-      integrity="sha512-6bIYsGqvLpAiEBXPdRQeFf5cueeBECtAKJjIHer3BhBZNTV3WLcLA8Tm3pDfxUwTMIS+kAZwTUvJ1IrMdX8C5w=="
+      src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.37.1/min/vs/loader.min.js"
+      integrity="sha512-A+6SvPGkIN9Rf0mUXmW4xh7rDvALXf/f0VtOUiHlDUSPknu2kcfz1KzLpOJyL2pO+nZS13hhIjLqVgiQExLJrw=="
       crossorigin="anonymous"
-      referrerpolicy="no-referrer"></script>
+      referrerpolicy="no-referrer"
+      async></script>
     <script
-      src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/editor/editor.main.nls.min.js"
-      integrity="sha512-CCv+DKWw+yZhxf4Z+ExT6HC5G+3S45TeMTYcJyYbdrv4BpK2vyALJ4FoVR/KGWDIPu7w4tNCOC9MJQIkYPR5FA=="
+      src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.37.1/min/vs/editor/editor.main.nls.min.js"
+      integrity="sha512-rWneFgUi2AyxOdM2M4CqPQVSJOidtmUflUfKroRoxsX3qaQrXAZ17fiPXASJo12ta0RUO+lgQtRbEbRFaClJ6g=="
       crossorigin="anonymous"
-      referrerpolicy="no-referrer"></script>
+      referrerpolicy="no-referrer"
+      async></script>
     <script
-      src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/editor/editor.main.js"
-      integrity="sha512-BtSZPhzoyN8kq1axY6cgOFPSgLJgFwvAZ3WxeDGxEFXeFcFuK2s7Hr+zF75npVHASUY1dxudAfIVzwmgdR89Bw=="
+      src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.37.1/min/vs/editor/editor.main.js"
+      integrity="sha512-y99DgzNm8N3flFl0hvmTFfWVtj6prXGxll7PUbNc51mKGFiyWqTBqBFr06N8k7mLKp7LqvitwaIz8sJOfdHM4A=="
       crossorigin="anonymous"
-      referrerpolicy="no-referrer"></script>
+      referrerpolicy="no-referrer"
+      async></script>
     %sveltekit.head%
   </head>
   <body>

src/lib/components/Navbar.svelte

@@ -10,9 +10,10 @@
   import Theme from './Theme.svelte';
 
   interface Link {
-    title: string;
     href: string;
+    title?: string;
     icon?: string;
+    img?: string;
   }
   const links: Link[] = [
     {
@@ -32,9 +33,12 @@
       href: 'https://github.com/mermaid-js/mermaid-cli'
     },
     {
-      title: '',
       href: 'https://github.com/mermaid-js/mermaid-live-editor',
       icon: 'fab fa-github fa-lg'
+    },
+    {
+      href: 'https://mermaidchart.com',
+      img: '/mermaidchart-logo.svg'
     }
   ];
 </script>
@@ -59,13 +63,18 @@
   <Theme />
   <div class="hidden lg:flex lg:items-center lg:w-auto w-full" id="menu">
     <ul class="lg:flex items-center justify-between text-base pt-4 lg:pt-0">
-      {#each links as { title, href, icon }}
+      {#each links as { title, href, icon, img }}
         <li>
           <a class="btn btn-ghost" target="_blank" rel="noreferrer" {href}>
             {#if icon}
               <i class={icon} />
+            {:else if img}
+              <img src={img} alt={title} />
             {/if}
-            {title}</a>
+            {#if title}
+              {title}
+            {/if}
+          </a>
         </li>
       {/each}
     </ul>
@@ -79,4 +88,9 @@
   .navbar {
     z-index: 10000;
   }
+
+  img {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
 </style>

static/mermaidchart-logo.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490.16 490.16"><defs><style>.cls-1{fill:#ff3670;}.cls-2{fill:#fff;}</style></defs><rect class="cls-1" width="490.16" height="490.16" rx="84.61"/><path class="cls-2" d="M407.48,111.18A165.2,165.2,0,0,0,245.08,220,165.2,165.2,0,0,0,82.68,111.18a165.5,165.5,0,0,0,72.06,143.64,88.81,88.81,0,0,1,38.53,73.45v50.86H296.9V328.27a88.8,88.8,0,0,1,38.52-73.45,165.41,165.41,0,0,0,72.06-143.64Z"/><path class="cls-2" d="M160.63,328.27a56.09,56.09,0,0,0-24.27-46.49,198.74,198.74,0,0,1-28.54-23.66A196.87,196.87,0,0,1,82.53,227V379.13h78.1Z"/><path class="cls-2" d="M329.53,328.27a56.09,56.09,0,0,1,24.27-46.49,198.74,198.74,0,0,0,28.54-23.66A196.87,196.87,0,0,0,407.63,227V379.13h-78.1Z"/></svg>