diff --git a/.cspell/contributors.txt b/.cspell/contributors.txt index b7f52f8d0..80f4df22a 100644 --- a/.cspell/contributors.txt +++ b/.cspell/contributors.txt @@ -2,8 +2,10 @@ Ashish Jain cpettitt Dong Cai +knsv +Knut Sveidqvist Nikolay Rozhkov Peng Xiao Per Brolin +Sidharth Vinod subhash-halder -Vinod Sidharth diff --git a/.cspell/mermaid-terms.txt b/.cspell/mermaid-terms.txt index cb6db41de..b0cfa0a1d 100644 --- a/.cspell/mermaid-terms.txt +++ b/.cspell/mermaid-terms.txt @@ -13,11 +13,10 @@ gitgraph gzipped handDrawn kanban -knsv -Knut marginx marginy Markdownish +mermaidchart mermaidjs mindmap mindmaps @@ -35,7 +34,6 @@ sandboxed siebling statediagram substate -Sveidqvist unfixable Viewbox viewports diff --git a/docs/public/1-Callout-Easy.svg b/docs/public/1-Callout-Easy.svg new file mode 100644 index 000000000..a6e9251a0 --- /dev/null +++ b/docs/public/1-Callout-Easy.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/docs/public/2-Callout-Integrations.svg b/docs/public/2-Callout-Integrations.svg new file mode 100644 index 000000000..b5ebdf055 --- /dev/null +++ b/docs/public/2-Callout-Integrations.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/docs/public/3-Callout-Awards.svg b/docs/public/3-Callout-Awards.svg new file mode 100644 index 000000000..f10c0fc39 --- /dev/null +++ b/docs/public/3-Callout-Awards.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/docs/public/Hero-Dark.svg b/docs/public/Hero-Dark.svg new file mode 100644 index 000000000..dd095eeef --- /dev/null +++ b/docs/public/Hero-Dark.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/docs/public/Hero.svg b/docs/public/Hero.svg new file mode 100644 index 000000000..0b00cb15b --- /dev/null +++ b/docs/public/Hero.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index d3f4a9aee..1fb0a3bda 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -38,6 +38,7 @@ export default defineConfig({ ], ], themeConfig: { + logo: '/favicon.svg', nav: nav(), editLink: { pattern: ({ filePath, frontmatter }) => { @@ -104,8 +105,10 @@ function nav() { ], }, { - text: '💻 Live Editor', - link: 'https://mermaid.live', + text: '💻 Open Editor', + link: 'https://mermaid.live/edit', + target: '_blank', + rel: 'external', }, ]; } diff --git a/packages/mermaid/src/docs/.vitepress/theme/Tooltip.vue b/packages/mermaid/src/docs/.vitepress/theme/Tooltip.vue new file mode 100644 index 000000000..75708ec2f --- /dev/null +++ b/packages/mermaid/src/docs/.vitepress/theme/Tooltip.vue @@ -0,0 +1,88 @@ + + + + + diff --git a/packages/mermaid/src/docs/.vitepress/theme/custom.css b/packages/mermaid/src/docs/.vitepress/theme/custom.css index 1d72056ec..e0b84864c 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/custom.css +++ b/packages/mermaid/src/docs/.vitepress/theme/custom.css @@ -1,22 +1,25 @@ @import 'font-awesome/css/font-awesome.min.css'; @import '@mdi/font/css/materialdesignicons.min.css'; +/* Colors: Brand */ :root { - --vp-c-brand: #ff3670; - --vp-c-brand-light: #ff5e8c; - --vp-c-brand-lighter: #ff85a8; - --vp-c-brand-lightest: #ff9bb7; - --vp-c-brand-dark: #bd34fe; - --vp-c-brand-darker: #9339bd; - --vp-c-brand-dimm: rgba(100, 108, 255, 0.08); + /* use for colored text */ + --vp-c-pink-1: #e0095f; + + /* use for hover state of button */ + --vp-c-pink-2: #b0134a; + + /* use for background button color */ + --vp-c-pink-3: #e0095f; + + /* use for custom container or badges */ + --vp-c-pink-4: rgba(159, 122, 234, 0.14); } :root { - --vp-home-hero-name-color: transparent; - --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #ff3670); - - --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #ff3670 50%); - --vp-home-hero-image-filter: blur(72px); + --vp-c-brand-1: var(--vp-c-pink-1); + --vp-c-brand-2: var(--vp-c-pink-2); + --vp-c-brand-3: var(--vp-c-pink-3); } .vp-doc > div { diff --git a/packages/mermaid/src/docs/.vitepress/theme/index.ts b/packages/mermaid/src/docs/.vitepress/theme/index.ts index 3ec200937..3996dde1a 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/index.ts +++ b/packages/mermaid/src/docs/.vitepress/theme/index.ts @@ -1,13 +1,10 @@ /* eslint-disable no-console */ import DefaultTheme from 'vitepress/theme'; import './custom.css'; -// @ts-ignore Type not available import Mermaid from './Mermaid.vue'; -// @ts-ignore Type not available +import Tooltip from './Tooltip.vue'; import Contributors from '../components/Contributors.vue'; -// @ts-ignore Type not available import HomePage from '../components/HomePage.vue'; -// @ts-ignore Type not available import TopBar from '../components/TopBar.vue'; import { getRedirect } from './redirect.js'; // @ts-ignore Type not available @@ -21,16 +18,17 @@ export default { ...DefaultTheme, Layout() { return h(Theme.Layout, null, { - // Keeping this as comment as it took a lot of time to figure out how to add a component to the top bar. - 'home-hero-before': () => h(TopBar), 'home-features-after': () => h(HomePage), + 'home-hero-before': () => h(TopBar), 'doc-before': () => h(TopBar), + 'layout-bottom': () => h(Tooltip), }); }, enhanceApp({ app, router }: EnhanceAppContext) { // register global components app.component('Mermaid', Mermaid); app.component('Contributors', Contributors); + router.onBeforeRouteChange = (to) => { try { const url = new URL(window.location.origin + to); diff --git a/packages/mermaid/src/docs/index.md b/packages/mermaid/src/docs/index.md index 218757b10..8caa10153 100644 --- a/packages/mermaid/src/docs/index.md +++ b/packages/mermaid/src/docs/index.md @@ -11,27 +11,33 @@ hero: tagline: JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. image: - src: /mermaid-logo.svg - alt: Mermaid + light: /Hero.svg + dark: /Hero-Dark.svg + alt: Mermaid diagram actions: - theme: brand - text: Get Started - link: /intro/ + text: Try Playground + link: https://www.mermaidchart.com/play + target: _blank + rel: external - theme: alt - text: View on GitHub - link: https://github.com/mermaid-js/mermaid + text: Get started + link: /intro/ features: - - title: ➕ Easy to use! - details: Easily create and render detailed diagrams and charts with the Mermaid Live Editor. + - icon: + src: /1-Callout-Easy.svg + title: Easy to use + details: Easily create diagrams and charts with the Mermaid Live Editor. link: https://mermaid.live/ - - title: 🧩 Integrations available! + - icon: + src: /2-Callout-Integrations.svg + title: Integrations available details: Use Mermaid with your favorite applications, check out the integrations list. link: ../../ecosystem/integrations-community.md - - title: 🏆 Award winning! + - icon: + src: /3-Callout-Awards.svg + title: Award winning details: 2019 JavaScript Open Source Award winner for "The Most Exciting Use of Technology". link: https://osawards.com/javascript/2019 - - title: 🥰 Mermaid + Mermaid Chart - details: Mermaid Chart is a major supporter of the Mermaid project. - link: https://www.mermaidchart.com/ --- diff --git a/packages/mermaid/src/docs/public/1-Callout-Easy.svg b/packages/mermaid/src/docs/public/1-Callout-Easy.svg new file mode 100644 index 000000000..a6e9251a0 --- /dev/null +++ b/packages/mermaid/src/docs/public/1-Callout-Easy.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/mermaid/src/docs/public/2-Callout-Integrations.svg b/packages/mermaid/src/docs/public/2-Callout-Integrations.svg new file mode 100644 index 000000000..b5ebdf055 --- /dev/null +++ b/packages/mermaid/src/docs/public/2-Callout-Integrations.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/mermaid/src/docs/public/3-Callout-Awards.svg b/packages/mermaid/src/docs/public/3-Callout-Awards.svg new file mode 100644 index 000000000..f10c0fc39 --- /dev/null +++ b/packages/mermaid/src/docs/public/3-Callout-Awards.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/mermaid/src/docs/public/Hero-Dark.svg b/packages/mermaid/src/docs/public/Hero-Dark.svg new file mode 100644 index 000000000..dd095eeef --- /dev/null +++ b/packages/mermaid/src/docs/public/Hero-Dark.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/packages/mermaid/src/docs/public/Hero.svg b/packages/mermaid/src/docs/public/Hero.svg new file mode 100644 index 000000000..0b00cb15b --- /dev/null +++ b/packages/mermaid/src/docs/public/Hero.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + +