Merge pull request #4356 from mermaid-js/sidv/contributors

Show all contributors in homepage
This commit is contained in:
Sidharth Vinod 2023-05-09 10:02:08 +05:30 committed by GitHub
commit c0b7ba305f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 3037 additions and 446 deletions

3
.gitignore vendored
View File

@ -36,3 +36,6 @@ tsconfig.tsbuildinfo
knsv*.html
local*.html
stats/
**/user-avatars/*
**/contributor-names.json

View File

@ -1,5 +1,5 @@
export default {
'!(docs/**/*)*.{ts,js,json,html,md,mts}': [
'!(docs/**/*)*.{ts,js,html,md,mts}': [
'eslint --cache --cache-strategy content --fix',
// don't cache prettier yet, since we use `prettier-plugin-jsdoc`,
// and prettier doesn't invalidate cache on plugin updates"

View File

@ -4,4 +4,5 @@ cypress/platform/xss3.html
coverage
# Autogenerated by PNPM
pnpm-lock.yaml
stats
stats
packages/mermaid/src/docs/.vitepress/components.d.ts

View File

@ -5,11 +5,13 @@
"acyclicer",
"adamiecki",
"alois",
"aloisklink",
"antiscript",
"appli",
"applitools",
"asciidoctor",
"ashish",
"ashishjain",
"astah",
"bbox",
"bilkent",
@ -49,15 +51,19 @@
"grav",
"greywolf",
"huynh",
"huynhicode",
"inkdrop",
"jaoude",
"jgreywolf",
"jison",
"jiti",
"kaufmann",
"khroma",
"klemm",
"klink",
"knsv",
"knut",
"knutsveidqvist",
"laganeckas",
"linetype",
"lintstagedrc",
@ -65,6 +71,7 @@
"lucida",
"markdownish",
"matthieu",
"matthieumorel",
"mdast",
"mdbook",
"mermaidjs",
@ -74,8 +81,11 @@
"mindmaps",
"mitigations",
"mkdocs",
"mmorel",
"mult",
"orlandoni",
"pathe",
"pbrolin",
"phpbb",
"plantuml",
"playfair",
@ -112,14 +122,17 @@
"ts-nocheck",
"tsdoc",
"tuleap",
"tylerlong",
"ugge",
"unist",
"unocss",
"valign",
"verdana",
"viewports",
"vinod",
"visio",
"vitepress",
"vueuse",
"xlink",
"yash"
],
@ -161,6 +174,7 @@
],
"ignorePaths": [
"packages/mermaid/src/docs/CHANGELOG.md",
"packages/mermaid/src/docs/.vitepress/redirect.ts"
"packages/mermaid/src/docs/.vitepress/redirect.ts",
"packages/mermaid/src/docs/.vitepress/contributor-names.json"
]
}

View File

@ -26,6 +26,7 @@
"lint": "eslint --cache --cache-strategy content --ignore-path .gitignore . && pnpm lint:jison && prettier --cache --check .",
"lint:fix": "eslint --cache --cache-strategy content --fix --ignore-path .gitignore . && prettier --write . && ts-node-esm scripts/fixCSpell.ts",
"lint:jison": "ts-node-esm ./scripts/jison/lint.mts",
"contributors": "ts-node-esm scripts/updateContributors.ts",
"cypress": "cypress run",
"cypress:open": "cypress open",
"e2e": "start-server-and-test dev http://localhost:9000/ cypress",

View File

@ -1,3 +1,6 @@
src/vitepress
src/docs/config/setup
README.*
README.*
src/docs/public/user-avatars/
src/docs/.vitepress/cache
src/docs/.vitepress/components.d.ts

View File

@ -28,8 +28,8 @@
"docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts",
"docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts --verify",
"docs:pre:vitepress": "rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress",
"docs:build:vitepress": "pnpm docs:pre:vitepress && vitepress build src/vitepress && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing",
"docs:dev": "pnpm docs:pre:vitepress && concurrently \"vitepress dev src/vitepress\" \"ts-node-esm src/docs.mts --watch --vitepress\"",
"docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm --filter ./ install && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing",
"docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./ src/vitepress dev\" \"ts-node-esm src/docs.mts --watch --vitepress\"",
"docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
"docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"",
"release": "pnpm build",

View File

@ -362,9 +362,15 @@ const transformHtml = (filename: string) => {
};
const getGlobs = (globs: string[]): string[] => {
globs.push('!**/dist', '!**/redirect.spec.ts', '!**/landing');
globs.push(
'!**/dist',
'!**/redirect.spec.ts',
'!**/landing',
'!**/node_modules',
'!**/user-avatars'
);
if (!vitepress) {
globs.push('!**/.vitepress', '!**/vite.config.ts', '!src/docs/index.md');
globs.push('!**/.vitepress', '!**/vite.config.ts', '!src/docs/index.md', '!**/package.json');
}
return globs;
};

View File

@ -0,0 +1,27 @@
<script setup lang="ts">
import { contributors } from '../contributors';
</script>
<template>
<div flex="~ wrap gap2" justify-center>
<a
v-for="{ name, avatar } of contributors"
:key="name"
:href="`https://github.com/${name}`"
m-0
rel="noopener noreferrer"
:aria-label="`${name} on GitHub`"
>
<img
loading="lazy"
:src="avatar"
width="50"
height="50"
rounded-full
h-12
w-12
:alt="`${name}'s avatar`"
/>
</a>
</div>
</template>

View File

@ -0,0 +1,26 @@
<script setup lang="ts">
import { VPTeamMembers } from 'vitepress/theme';
import { teamMembers } from '../contributors';
</script>
<template>
<div class="content">
<div class="content-container">
<main class="main">
<div class="vp-doc" flex flex-col items-center mt-10>
<h2 id="meet-the-team" op50 font-normal p="t-10 b-2">Meet The Team</h2>
<div w-full p-10>
<VPTeamMembers size="small" :members="teamMembers" />
</div>
<h2 id="the-team" op50 font-normal pt-5 pb-2>Contributors</h2>
<p text-lg max-w-200 text-center leading-7>
<Contributors />
<br />
<a href="https://chat.vitest.dev" rel="noopener noreferrer">Join the community</a> and
get involved!
</p>
</div>
</main>
</div>
</div>
</template>

View File

@ -0,0 +1,148 @@
import contributorUsernamesJson from './contributor-names.json';
export interface Contributor {
name: string;
avatar: string;
}
export interface SocialEntry {
icon: string | { svg: string };
link: string;
}
export interface CoreTeam {
name: string;
// required to download avatars from GitHub
github: string;
avatar?: string;
twitter?: string;
mastodon?: string;
sponsor?: string;
website?: string;
linkedIn?: string;
title?: string;
org?: string;
desc?: string;
links?: SocialEntry[];
}
const contributorUsernames: string[] = contributorUsernamesJson;
export const contributors = contributorUsernames.map((username) => {
return { username, avatar: `/user-avatars/${username}.png` };
});
const websiteSVG = {
svg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>',
};
const createLinks = (tm: CoreTeam): CoreTeam => {
tm.avatar = `/user-avatars/${tm.github}.png`;
tm.links = [{ icon: 'github', link: `https://github.com/${tm.github}` }];
if (tm.mastodon) {
tm.links.push({ icon: 'mastodon', link: tm.mastodon });
}
if (tm.twitter) {
tm.links.push({ icon: 'twitter', link: `https://twitter.com/${tm.twitter}` });
}
if (tm.website) {
tm.links.push({ icon: websiteSVG, link: tm.website });
}
if (tm.linkedIn) {
tm.links.push({ icon: 'linkedin', link: `https://www.linkedin.com/in/${tm.linkedIn}` });
}
return tm;
};
const knut: CoreTeam = {
github: 'knsv',
name: 'Knut Sveidqvist',
title: 'Creator',
twitter: 'knutsveidqvist',
sponsor: 'https://github.com/sponsors/knsv',
};
const plainTeamMembers: CoreTeam[] = [
{
github: 'NeilCuzon',
name: 'Neil Cuzon',
title: 'Developer',
},
{
github: 'tylerlong',
name: 'Tyler Liu',
title: 'Developer',
},
{
github: 'sidharthv96',
name: 'Sidharth Vinod',
title: 'Developer',
twitter: 'sidv42',
mastodon: 'https://techhub.social/@sidv',
sponsor: 'https://github.com/sponsors/sidharthv96',
linkedIn: 'sidharth-vinod',
website: 'https://sidharth.dev',
},
{
github: 'ashishjain0512',
name: 'Ashish Jain',
title: 'Developer',
},
{
github: 'mmorel-35',
name: 'Matthieu Morel',
title: 'Developer',
linkedIn: 'matthieumorel35',
},
{
github: 'aloisklink',
name: 'Alois Klink',
title: 'Developer',
linkedIn: 'aloisklink',
website: 'https://aloisklink.com',
},
{
github: 'pbrolin47',
name: 'Per Brolin',
title: 'Developer',
},
{
github: 'Yash-Singh1',
name: 'Yash Singh',
title: 'Developer',
},
{
github: 'GDFaber',
name: 'Marc Faber',
title: 'Developer',
linkedIn: 'marc-faber',
},
{
github: 'MindaugasLaganeckas',
name: 'Mindaugas Laganeckas',
title: 'Developer',
},
{
github: 'jgreywolf',
name: 'Justin Greywolf',
title: 'Developer',
},
{
github: 'IOrlandoni',
name: 'Nacho Orlandoni',
title: 'Developer',
},
{
github: 'huynhicode',
name: 'Steph Huynh',
title: 'Developer',
},
];
const teamMembers = plainTeamMembers.map((tm) => createLinks(tm));
teamMembers.sort(
(a, b) => contributorUsernames.indexOf(a.github) - contributorUsernames.indexOf(b.github)
);
teamMembers.unshift(createLinks(knut));
export { teamMembers };

View File

@ -0,0 +1,33 @@
import { mkdir, writeFile, readFile } from 'node:fs/promises';
import { existsSync } from 'node:fs';
import { fileURLToPath } from 'url';
const pathContributors = new URL('../contributor-names.json', import.meta.url);
const getAvatarPath = (name: string) =>
new URL(`../../public/user-avatars/${name}.png`, import.meta.url);
let contributors: string[] = [];
async function download(url: string, fileName: URL) {
if (existsSync(fileName)) {
return;
}
// eslint-disable-next-line no-console
console.log('downloading', fileName);
try {
const image = await fetch(url);
await writeFile(fileName, Buffer.from(await image.arrayBuffer()));
} catch {}
}
async function fetchAvatars() {
await mkdir(fileURLToPath(new URL('..', getAvatarPath('none'))), { recursive: true });
contributors = JSON.parse(await readFile(pathContributors, { encoding: 'utf-8' }));
await Promise.allSettled(
contributors.map((name) =>
download(`https://github.com/${name}.png?size=100`, getAvatarPath(name))
)
);
}
fetchAvatars();

View File

@ -0,0 +1,39 @@
// Adapted from https://github.dev/vitest-dev/vitest/blob/991ff33ab717caee85ef6cbe1c16dc514186b4cc/scripts/update-contributors.ts#L6
import { writeFile } from 'node:fs/promises';
const pathContributors = new URL('../contributor-names.json', import.meta.url);
interface Contributor {
login: string;
}
async function fetchContributors() {
const collaborators: string[] = [];
let page = 1;
let data: Contributor[] = [];
do {
const response = await fetch(
`https://api.github.com/repos/mermaid-js/mermaid/contributors?per_page=100&page=${page}`,
{
method: 'GET',
headers: {
'content-type': 'application/json',
},
}
);
data = await response.json();
console.log(response.status, response.statusText);
console.log(data);
collaborators.push(...data.map((i) => i.login));
page++;
} while (data.length === 100);
return collaborators.filter((name) => !name.includes('[bot]'));
}
async function generate() {
const collaborators = await fetchContributors();
await writeFile(pathContributors, JSON.stringify(collaborators, null, 2) + '\n', 'utf8');
}
void generate();

View File

@ -0,0 +1,77 @@
.dark [img-light] {
display: none;
}
html:not(.dark) [img-dark] {
display: none;
}
/* Overrides */
.VPSocialLink {
transform: scale(0.9);
}
.vp-doc th,
.vp-doc td {
padding: 6px 10px;
border: 1px solid #8882;
}
/* h3 breaks SEO => replaced with h2 with the same size */
.home-content h2 {
margin-top: 2rem;
font-size: 1.35rem;
border-bottom: none;
margin-bottom: 0;
}
img.resizable-img {
width: unset;
height: unset;
}
/* fix height ~ 2 lines of text: 3 or more cards per row */
.VPTeamMembersItem.small .profile .data .affiliation {
min-height: 3rem;
}
.VPTeamMembersItem.small .profile .data .desc {
min-height: 3rem;
}
/* fix height ~ 3 lines of text: 4 cards per row */
@media (min-width: 1064px) and (max-width: 1143px) {
.VPTeamMembersItem.small .profile .data .affiliation {
min-height: 4rem;
}
.VPTeamMembersItem.small .profile .data .desc {
min-height: 4rem;
}
}
/* fix height ~ 3 lines of text: 3 cards per row */
@media (min-width: 815px) and (max-width: 875px) {
.VPTeamMembersItem.small .profile .data .affiliation {
min-height: 4rem;
}
.VPTeamMembersItem.small .profile .data .desc {
min-height: 4rem;
}
}
/* fix height ~ 3 lines of text: 2 cards per row */
@media (max-width: 612px) {
.VPTeamMembersItem.small .profile .data .affiliation {
min-height: 4rem;
}
.VPTeamMembersItem.small .profile .data .desc {
min-height: 4rem;
}
}
/* fix height: one card per row */
@media (max-width: 568px) {
.VPTeamMembersItem.small .profile .data .affiliation {
min-height: unset;
}
.VPTeamMembersItem.small .profile .data .desc {
min-height: unset;
}
}

View File

@ -2,13 +2,28 @@ import DefaultTheme from 'vitepress/theme';
import './custom.css';
// @ts-ignore
import Mermaid from './Mermaid.vue';
// @ts-ignore
import Contributors from '../components/Contributors.vue';
// @ts-ignore
import HomePage from '../components/HomePage.vue';
import { getRedirect } from './redirect.js';
import { h } from 'vue';
import Theme from 'vitepress/theme';
import '../style/main.css';
import 'uno.css';
export default {
...DefaultTheme,
Layout() {
return h(Theme.Layout, null, {
'home-features-after': () => h(HomePage),
});
},
enhanceApp({ app, router }) {
// register global components
app.component('Mermaid', Mermaid);
app.component('Contributors', Contributors);
router.onBeforeRouteChange = (to) => {
try {
const newPath = getRedirect(to);
@ -20,4 +35,4 @@ export default {
} catch (e) {}
};
},
} as typeof DefaultTheme;
};

View File

@ -40,7 +40,7 @@ It is also possible to override site-wide theme settings locally, for a specific
**Following is an example:**
```mmd
```mermaid
%%{init: {'theme':'base'}}%%
graph TD
a --> b
@ -56,7 +56,7 @@ The easiest way to make a custom theme is to start with the base theme, and just
Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`.
```mmd
```mermaid
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)

View File

@ -75,7 +75,7 @@ When deployed within code, init is called before the graph/diagram description.
**for example**:
```mmd
```mermaid
%%{init: {"theme": "default", "logLevel": 1 }}%%
graph LR
a-->b

View File

@ -84,7 +84,7 @@ Here the directive declaration will set the `logLevel` to `debug` and the `theme
Note: You can use 'init' or 'initialize' as both acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed. This means:
```mmd
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
%%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%%
...

View File

@ -1,5 +1,6 @@
---
layout: home
sidebar: false
title: Mermaid
titleTemplate: Diagramming and charting tool
@ -33,162 +34,3 @@ features:
details: Mermaid Chart is a major supporter of the Mermaid project.
link: https://www.mermaidchart.com/
---
<script setup>
import { VPTeamMembers } from 'vitepress/theme'
const websiteSVG = {
svg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>'
}
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/58763315?v=4",
name: "Neil Cuzon",
title: "Developer",
links: [{ icon: "github", link: "https://github.com/NeilCuzon" }],
},
{
avatar: "https://avatars.githubusercontent.com/u/733544?v=4",
name: "Tyler Liu",
title: "Developer",
links: [{ icon: "github", link: "https://github.com/tylerlong" }],
},
{
avatar: "https://avatars.githubusercontent.com/u/10703445?v=4",
name: "Sidharth Vinod",
title: "Developer",
links: [
{ icon: "github", link: "https://github.com/sidharthv96" },
{ icon: websiteSVG, link: "https://sidharth.dev" },
{ icon: "linkedin", link: "https://www.linkedin.com/in/sidharth-vinod/" },
],
},
{
avatar: "https://avatars.githubusercontent.com/u/16836093?v=4",
name: "Ashish Jain",
title: "Developer",
links: [{ icon: "github", link: "https://github.com/ashishjain0512" }],
},
{
avatar: "https://avatars.githubusercontent.com/u/6032561?v=4",
name: "Matthieu Morel",
title: "Developer",
links: [
{ icon: "github", link: "https://github.com/mmorel-35" },
{
icon: "linkedin",
link: "https://www.linkedin.com/in/matthieumorel35/",
},
],
},
{
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/19716675?v=4",
name: "Alois Klink",
title: "Developer",
links: [
{ icon: "github", link: "https://github.com/aloisklink" },
{ icon: websiteSVG, link: "https://aloisklink.com" },
{ icon: "linkedin", link: "https://www.linkedin.com/in/aloisklink/" },
],
},
{
avatar: "https://avatars.githubusercontent.com/u/114684273?v=4",
name: "Per Brolin",
title: "Developer",
links: [{ icon: "github", link: "https://github.com/pbrolin47" }],
},
{
avatar: "https://avatars.githubusercontent.com/u/53054099?v=4",
name: "Yash Singh",
title: "Developer",
links: [{ icon: "github", link: "https://github.com/Yash-Singh1" }],
},
{
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/12032557?v=4",
name: "Mindaugas Laganeckas",
title: "Developer",
links: [{ icon: "github", link: "https://github.com/MindaugasLaganeckas" }],
},
{
avatar: "https://avatars.githubusercontent.com/u/300077?v=4",
name: "Justin Greywolf",
title: "Developer",
links: [{ icon: "github", link: "https://github.com/jgreywolf" }],
},
{
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/19526120?v=4",
name: "Adrian Hall",
title: "Developer",
links: [{ icon: "github", link: "https://github.com/spopida" }],
},
{
avatar: "https://avatars.githubusercontent.com/u/35910788?v=4",
name: "Steph Huynh",
title: "Developer",
links: [{ icon: "github", link: "https://github.com/huynhicode" }],
},
];
</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: 1.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>

View File

@ -0,0 +1,36 @@
{
"name": "docs",
"private": true,
"type": "module",
"scripts": {
"dev": "vitepress --port 3333 --open",
"build": "pnpm prefetch && vitepress build",
"build-no-prefetch": "vitepress build",
"serve": "vitepress serve",
"preview-https": "pnpm build && serve .vitepress/dist",
"preview-https-no-prefetch": "pnpm build-no-prefetch && serve .vitepress/dist",
"prefetch": "pnpm fetch-contributors && pnpm fetch-avatars",
"fetch-avatars": "ts-node-esm .vitepress/scripts/fetch-avatars.ts",
"fetch-contributors": "ts-node-esm .vitepress/scripts/fetch-contributors.ts"
},
"dependencies": {
"@vueuse/core": "^10.1.0",
"jiti": "^1.18.2",
"vue": "^3.2.47"
},
"devDependencies": {
"@iconify-json/carbon": "^1.1.16",
"@unocss/reset": "^0.51.8",
"@vite-pwa/vitepress": "^0.0.5",
"@vitejs/plugin-vue": "^4.2.1",
"fast-glob": "^3.2.12",
"https-localhost": "^4.7.1",
"pathe": "^1.1.0",
"unocss": "^0.51.8",
"unplugin-vue-components": "^0.24.1",
"vite": "^4.3.3",
"vite-plugin-pwa": "^0.14.7",
"vitepress": "1.0.0-alpha.74",
"workbox-window": "^6.5.4"
}
}

View File

@ -248,7 +248,7 @@ classE o-- classF : aggregation
Relations can logically represent an N:M association:
```mmd
```mermaid
classDiagram
Animal <|--|> Zebra
```
@ -368,7 +368,7 @@ class Color{
Comments can be entered within a class diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text until the next newline will be treated as a comment, including any class diagram syntax.
```mmd
```mermaid
classDiagram
%% This whole line is a comment classDiagram class Shape <<interface>>
class Shape{
@ -434,7 +434,7 @@ classDiagram
_URL Link:_
```mmd
```mermaid
classDiagram
class Shape
link Shape "https://www.github.com" "This is a tooltip for a link"
@ -444,7 +444,7 @@ click Shape2 href "https://www.github.com" "This is a tooltip for a link"
_Callback:_
```mmd
```mermaid
classDiagram
class Shape
callback Shape "callbackFunction" "This is a tooltip for a callback"

View File

@ -116,7 +116,7 @@ Relationships may be classified as either _identifying_ or _non-identifying_ and
| to | _identifying_ |
| optionally to | _non-identifying_ |
```mmd
```mermaid
erDiagram
CAR ||--o{ NAMED-DRIVER : allows
PERSON ||--o{ NAMED-DRIVER : is

View File

@ -273,7 +273,7 @@ word of warning, one could go overboard with this making the flowchart harder to
markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
This goes for expressive syntaxes as well.
```mmd
```mermaid
flowchart TB
A --> C
A --> D
@ -557,7 +557,7 @@ Beginner's tip—a full example using interactive links in a html context:
Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax
```mmd
```mermaid
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C

View File

@ -193,7 +193,7 @@ More info in: [https://github.com/d3/d3-time#interval_every](https://github.com/
The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceeding YAML settings.
```mmd
```mermaid
---
displayMode: compact
---
@ -211,7 +211,7 @@ gantt
Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax.
```mmd
```mermaid
gantt
title A Gantt Diagram
%% this is a comment

View File

@ -387,7 +387,7 @@ sequenceDiagram
Comments can be entered within a sequence diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
```mmd
```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
%% this is a comment
@ -443,7 +443,7 @@ This can be configured by adding one or more link lines with the format:
link <actor>: <link-label> @ <link-url>
```
```mmd
```mermaid
sequenceDiagram
participant Alice
participant John

View File

@ -249,7 +249,7 @@ Comments can be entered within a state diagram chart, which will be ignored by t
own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next
newline will be treated as a comment, including any diagram syntax
```mmd
```mermaid
stateDiagram-v2
[*] --> Still
Still --> [*]

View File

@ -1,13 +1,49 @@
import { defineConfig, type PluginOption, searchForWorkspaceRoot } from 'vite';
import { defineConfig, searchForWorkspaceRoot } from 'vite';
import type { PluginOption, Plugin } from 'vite';
import path from 'path';
// @ts-expect-error This package has an incorrect export map.
import { SearchPlugin } from 'vitepress-plugin-search';
import fs from 'fs';
import Components from 'unplugin-vue-components/vite';
import Unocss from 'unocss/vite';
import { presetAttributify, presetIcons, presetUno } from 'unocss';
import { resolve } from 'pathe';
const virtualModuleId = 'virtual:mermaid-config';
const resolvedVirtualModuleId = '\0' + virtualModuleId;
export default defineConfig({
optimizeDeps: {
// vitepress is aliased with replacement `join(DIST_CLIENT_PATH, '/index')`
// This needs to be excluded from optimization
exclude: ['vitepress'],
},
plugins: [
// @ts-ignore This package has an incorrect exports.
Components({
include: [/\.vue/, /\.md/],
dirs: '.vitepress/components',
dts: '.vitepress/components.d.ts',
}) as Plugin,
// @ts-ignore This package has an incorrect exports.
Unocss({
shortcuts: [
[
'btn',
'px-4 py-1 rounded inline-flex justify-center gap-2 text-white leading-30px children:mya !no-underline cursor-pointer disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50',
],
],
presets: [
presetUno({
dark: 'media',
}),
presetAttributify(),
presetIcons({
scale: 1.2,
}),
],
}) as unknown as Plugin,
IncludesPlugin(),
SearchPlugin() as PluginOption,
{
// TODO: will be fixed in the next vitepress release.
@ -48,3 +84,21 @@ export default defineConfig({
},
},
});
function IncludesPlugin(): Plugin {
return {
name: 'include-plugin',
enforce: 'pre',
transform(code: string, id: string): string | undefined {
let changed = false;
code = code.replace(/\[@@include]\((.*?)\)/, (_: string, url: any): string => {
changed = true;
const full = resolve(id, url);
return fs.readFileSync(full, 'utf-8');
});
if (changed) {
return code;
}
},
} as Plugin;
}

File diff suppressed because it is too large Load Diff

View File

@ -1,4 +1,5 @@
packages:
# all packages in direct subdirs of packages/
- 'packages/*'
- 'packages/mermaid/src/docs'
- 'packages/mermaid/src/vitepress'
- 'tests/*'