mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-18 14:59:53 +02:00
chore: Fix vitepress build
This commit is contained in:
Sidharth Vinod
@@ -1,25 +0,0 @@
|
||||
const CustomMarkdown = (md) => {
|
||||
const fence = md.renderer.rules.fence.bind(md.renderer.rules);
|
||||
|
||||
md.renderer.rules.fence = (tokens, index, options, env, slf) => {
|
||||
const token = tokens[index];
|
||||
|
||||
if (token.info.trim() === 'warning') {
|
||||
return `<div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>${token.content}}</p></div>`;
|
||||
}
|
||||
|
||||
if (token.info.trim() === 'note') {
|
||||
return `<div class="tip custom-block"><p class="custom-block-title">NOTE</p><p>${token.content}}</p></div>`;
|
||||
}
|
||||
|
||||
if (token.info.trim() === 'jison') {
|
||||
return `<div class="language-"><button class="copy"></button><span class="lang">jison</span><pre><code>${token.content
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')}}</code></pre></div>`;
|
||||
}
|
||||
|
||||
return fence(tokens, index, options, env, slf);
|
||||
};
|
||||
};
|
||||
|
||||
export default CustomMarkdown;
|
||||
@@ -1,176 +0,0 @@
|
||||
import { version } from '../../../package.json';
|
||||
import MermaidExample from './mermaid-markdown-all';
|
||||
import { MermaidMarkdown } from 'vitepress-plugin-mermaid';
|
||||
import CustomMarkdown from './blocks-markdown';
|
||||
import { defineConfig } from 'vitepress';
|
||||
|
||||
const allMarkdownTransformers = {
|
||||
config: async (md) => {
|
||||
MermaidMarkdown(md);
|
||||
await MermaidExample(md);
|
||||
CustomMarkdown(md);
|
||||
},
|
||||
};
|
||||
|
||||
export default defineConfig({
|
||||
lang: 'en-US',
|
||||
title: 'Mermaid',
|
||||
description: 'Create diagrams and visualizations using text and code.',
|
||||
base: '/mermaid-js/',
|
||||
markdown: allMarkdownTransformers,
|
||||
head: [['link', { rel: 'icon', type: 'image/x-icon', href: '/mermaid-js/favicon.ico' }]],
|
||||
themeConfig: {
|
||||
nav: nav(),
|
||||
editLink: {
|
||||
pattern: 'https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/src/docs/:path',
|
||||
text: 'Edit this page on GitHub',
|
||||
},
|
||||
|
||||
sidebar: {
|
||||
'/': sidebarAll(),
|
||||
// "/intro/": sidebarIntro(),
|
||||
// "/syntax/": sidebarSyntax(),
|
||||
// "/config": sidebarConfig(),
|
||||
// "/misc/": sidebarMisc(),
|
||||
// "/community/": sidebarCommunity(),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
function nav() {
|
||||
return [
|
||||
{ text: 'Intro', link: '/intro/', activeMatch: '/intro/' },
|
||||
{
|
||||
text: 'Configuration',
|
||||
link: '/config/Tutorials',
|
||||
activeMatch: '/config/',
|
||||
},
|
||||
{ text: 'Syntax', link: '/syntax/classDiagram', activeMatch: '/syntax/' },
|
||||
{ text: 'Misc', link: '/misc/integrations', activeMatch: '/misc/' },
|
||||
{
|
||||
text: 'Community',
|
||||
link: '/community/n00b-overview',
|
||||
activeMatch: '/community/',
|
||||
},
|
||||
{
|
||||
text: version,
|
||||
items: [
|
||||
{
|
||||
text: 'Changelog',
|
||||
link: 'https://github.com/mermaid-js/mermaid/blob/develop/CHANGELOG.md',
|
||||
},
|
||||
{
|
||||
text: 'Contributing',
|
||||
link: 'https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: '💻 Live Editor',
|
||||
link: 'https://mermaid.live',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
function sidebarAll() {
|
||||
return [
|
||||
{
|
||||
text: '📔 Introduction',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{ text: 'About Mermaid', link: '/intro/' },
|
||||
{ text: 'Deployment', link: '/intro/n00b-gettingStarted' },
|
||||
{
|
||||
text: 'Syntax and Configuration',
|
||||
link: '/intro/n00b-syntaxReference',
|
||||
},
|
||||
],
|
||||
},
|
||||
...sidebarSyntax(),
|
||||
...sidebarConfig(),
|
||||
...sidebarMisc(),
|
||||
...sidebarCommunity(),
|
||||
// {
|
||||
// text: "Generated",
|
||||
// items: [{ text: "modules", link: "docs/code/modules" }],
|
||||
// },
|
||||
];
|
||||
}
|
||||
|
||||
function sidebarSyntax() {
|
||||
return [
|
||||
{
|
||||
text: '📊 Diagram Syntax',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{ text: 'Flowchart', link: '/syntax/flowchart' },
|
||||
{ text: 'Sequence Diagram', link: '/syntax/sequenceDiagram' },
|
||||
{ text: 'Class Diagram', link: '/syntax/classDiagram' },
|
||||
{ text: 'State Diagram', link: '/syntax/stateDiagram' },
|
||||
{
|
||||
text: 'Entity Relationship Diagram',
|
||||
link: '/syntax/entityRelationshipDiagram',
|
||||
},
|
||||
{ text: 'User Journey', link: '/syntax/userJourney' },
|
||||
{ text: 'Gantt', link: '/syntax/gantt' },
|
||||
{ text: 'Pie Chart', link: '/syntax/pie' },
|
||||
{ text: 'Requirement Diagram', link: '/syntax/requirementDiagram' },
|
||||
{ text: 'Gitgraph (Git) Diagram 🔥', link: '/syntax/gitGraph' },
|
||||
{ text: 'C4C Diagram (Context) Diagram 🦺⚠️', link: '/syntax/c4c' },
|
||||
{ text: 'Other Examples', link: '/syntax/examples' },
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
function sidebarConfig() {
|
||||
return [
|
||||
{
|
||||
text: '⚙️ Deployment and Configuration',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{ text: 'Tutorials', link: '/config/Tutorials' },
|
||||
{ text: 'API-Usage', link: '/config/usage' },
|
||||
{ text: 'Mermaid API Configuration', link: '/config/setup/modules' },
|
||||
{ text: 'Directives', link: '/config/directives' },
|
||||
{ text: 'Theming', link: '/config/theming' },
|
||||
{ text: 'Accessibility', link: '/config/accessibility' },
|
||||
{ text: 'Mermaid CLI', link: '/config/mermaidCLI' },
|
||||
{ text: 'Advanced usage', link: '/config/n00b-advanced' },
|
||||
{ text: 'Configuration', link: '/config/configuration' },
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
function sidebarMisc() {
|
||||
return [
|
||||
{
|
||||
text: '📚 Misc',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{ text: 'Use-Cases and Integrations', link: '/misc/integrations' },
|
||||
{ text: 'FAQ', link: '/misc/faq' },
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
function sidebarCommunity() {
|
||||
return [
|
||||
{
|
||||
text: '🙌 Contributions and Community',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{ text: 'Overview for Beginners', link: '/community/n00b-overview' },
|
||||
{
|
||||
text: 'Development and Contribution',
|
||||
link: '/community/development',
|
||||
},
|
||||
{ text: 'Changelog', link: '/community/CHANGELOG' },
|
||||
{ text: 'Adding Diagrams', link: '/community/newDiagram' },
|
||||
{ text: 'Security', link: '/community/security' },
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
import shiki from 'shiki';
|
||||
|
||||
const MermaidExample = async (md) => {
|
||||
const fence = md.renderer.rules.fence.bind(md.renderer.rules);
|
||||
|
||||
const highlighter = await shiki.getHighlighter({ theme: 'material-palenight' });
|
||||
|
||||
md.renderer.rules.fence = (tokens, index, options, env, slf) => {
|
||||
const token = tokens[index];
|
||||
// console.log("==>",token.info);
|
||||
|
||||
if (token.info.trim() === 'mermaid-example') {
|
||||
let code = highlighter.codeToHtml(token.content, { lang: 'mermaid' });
|
||||
code = code.replace('#2e3440ff', 'transparent');
|
||||
code = code.replace('#292D3E', 'transparent');
|
||||
|
||||
code =
|
||||
'<h5>Code:</h5>' +
|
||||
`<div class="language-mermaid">` +
|
||||
`<button class="copy"></button><span class="lang">mermaid</span>` +
|
||||
code +
|
||||
'</div>';
|
||||
|
||||
// return code;
|
||||
return `${code}
|
||||
<h5>Render:</h5>
|
||||
<Mermaid id="me${index}" graph="${encodeURIComponent(token.content)}"></Mermaid>`;
|
||||
}
|
||||
return fence(tokens, index, options, env, slf);
|
||||
};
|
||||
};
|
||||
|
||||
export default MermaidExample;
|
||||
@@ -1,27 +0,0 @@
|
||||
: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);
|
||||
}
|
||||
|
||||
: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-doc > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a.edit {
|
||||
margin: 12px;
|
||||
position: relative;
|
||||
top: 10px;
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
import DefaultTheme from 'vitepress/theme';
|
||||
// @ts-ignore
|
||||
import Mermaid from 'vitepress-plugin-mermaid/Mermaid.vue';
|
||||
import './custom.css';
|
||||
|
||||
export default {
|
||||
...DefaultTheme,
|
||||
enhanceApp({ app }) {
|
||||
// register global components
|
||||
app.component('Mermaid', Mermaid);
|
||||
},
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.
|
||||
140
docs/index.md
140
docs/index.md
@@ -1,140 +0,0 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in package/mermaid/src/docs.
|
||||
|
||||
---
|
||||
|
||||
layout: home
|
||||
|
||||
title: Mermaid
|
||||
titleTemplate: Diagramming and charting tool
|
||||
|
||||
hero:
|
||||
name: Mermaid
|
||||
text: Diagramming and charting tool
|
||||
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
|
||||
actions:
|
||||
\- theme: brand
|
||||
text: Get Started
|
||||
link: /intro/
|
||||
\- theme: alt
|
||||
text: View on GitHub
|
||||
link: https://github.com/mermaid-js/mermaid
|
||||
|
||||
features:
|
||||
|
||||
- title: ➕ Easy to use!
|
||||
details: Mermaid allows even non-programmers to easily create detailed and diagrams through the Mermaid Live Editor.
|
||||
- title: 🎥 Video Tutorials!
|
||||
details: Has video tutorials for beginners and advanced users.
|
||||
- title: 🏆 Award winner!
|
||||
details: Mermaid was nominated and won the JS Open Source Awards (2019) in the category "The most exciting use of technology"!!!
|
||||
- title: 🧩 Integrations available!
|
||||
details: Use Mermaid with your favorite applications, check out the list of Integrations and Usages of Mermaid.
|
||||
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { VPTeamMembers } from 'vitepress/theme'
|
||||
|
||||
const members = [
|
||||
{
|
||||
avatar: 'https://avatars.githubusercontent.com/u/5837277?v=4',
|
||||
name: 'Knut Sveidqvist',
|
||||
title: 'Creator',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/knsv' },
|
||||
]
|
||||
},
|
||||
{
|
||||
avatar: 'https://avatars.githubusercontent.com/u/1912783?v=4',
|
||||
name: 'Marc Faber',
|
||||
title: 'Developer',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://gdfaber.github.io/' },
|
||||
{ icon: 'linkedin', link: 'https://www.linkedin.com/in/marc-faber/' },
|
||||
]
|
||||
}, {
|
||||
avatar: 'https://avatars.githubusercontent.com/u/1564825?v=4',
|
||||
name: 'Nacho Orlandoni',
|
||||
title: 'Developer',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/IOrlandoni' },
|
||||
]
|
||||
}, {
|
||||
avatar: 'https://avatars.githubusercontent.com/u/6552521?v=4',
|
||||
name: 'Christian Klemm',
|
||||
title: 'Developer',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/klemmchr' },
|
||||
]
|
||||
}, {
|
||||
avatar: 'https://avatars.githubusercontent.com/u/12032557?v=4',
|
||||
name: 'Mindaugas Laganeckas',
|
||||
title: 'Developer',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/MindaugasLaganeckas' },
|
||||
]
|
||||
}, {
|
||||
avatar: 'https://avatars.githubusercontent.com/u/58763315?v=4',
|
||||
name: 'Neil Cuzon',
|
||||
title: 'Developer',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/NeilCuzon' },
|
||||
]
|
||||
}, {
|
||||
avatar: 'https://avatars.githubusercontent.com/u/19526120?v=4',
|
||||
name: 'Adrian Hall',
|
||||
title: 'Developer',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/spopida' },
|
||||
]
|
||||
}, {
|
||||
avatar: 'https://avatars.githubusercontent.com/u/53054099?v=4',
|
||||
name: 'Yash Singh',
|
||||
title: 'Developer',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/Yash-Singh1' },
|
||||
]
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<div class="vp-doc" >
|
||||
<h2 id="meet-the-team"> Meet The Team </h2>
|
||||
<VPTeamMembers size="small" :members="members" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.image-container .image-src {
|
||||
margin: 1rem auto;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dark .image-src{
|
||||
filter: invert(1) hue-rotate(217deg) contrast(0.72);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.vp-doc {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.vp-doc h2 {
|
||||
margin: 48px 0 16px;
|
||||
border-top: 1px solid var(--vp-c-divider-light);
|
||||
padding-top: 24px;
|
||||
letter-spacing: -.02em;
|
||||
line-height: 32px;
|
||||
font-size: 24px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,46 +0,0 @@
|
||||
import { defineConfig, searchForWorkspaceRoot } from 'vite';
|
||||
import path from 'path';
|
||||
// @ts-ignore: still in alpha
|
||||
import { SearchPlugin } from 'vitepress-plugin-search';
|
||||
|
||||
const virtualModuleId = 'virtual:mermaid-config';
|
||||
const resolvedVirtualModuleId = '\0' + virtualModuleId;
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
SearchPlugin(),
|
||||
{
|
||||
// TODO: will be fixed in the next vitepress release.
|
||||
name: 'fix-virtual',
|
||||
|
||||
async resolveId(id) {
|
||||
if (id === virtualModuleId) {
|
||||
return resolvedVirtualModuleId;
|
||||
}
|
||||
},
|
||||
async load(this, id) {
|
||||
if (id === resolvedVirtualModuleId) {
|
||||
return `export default ${JSON.stringify({
|
||||
securityLevel: 'loose',
|
||||
startOnLoad: false,
|
||||
})};`;
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
mermaid: path.join(__dirname, '../../dist/mermaid.esm.min.mjs'), // Use this one to build
|
||||
},
|
||||
},
|
||||
server: {
|
||||
fs: {
|
||||
allow: [
|
||||
// search up for workspace root
|
||||
searchForWorkspaceRoot(process.cwd()),
|
||||
// Allow serving files from one level up to the project root
|
||||
path.join(__dirname, '..'),
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user