chore(arch): merged with develop

This commit is contained in:
NicolasNewman 2024-07-22 11:17:52 -05:00
commit 2ae2686e34
16 changed files with 7153 additions and 16196 deletions

41
.github/workflows/autofix.yml vendored Normal file
View File

@ -0,0 +1,41 @@
name: autofix.ci # needed to securely identify the workflow
on:
pull_request:
permissions:
contents: read
jobs:
autofix:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: pnpm/action-setup@v4
# uses version from "packageManager" field in package.json
- name: Setup Node.js
uses: actions/setup-node@v4
with:
cache: pnpm
node-version-file: '.node-version'
- name: Install Packages
run: |
pnpm install --frozen-lockfile
env:
CYPRESS_CACHE_FOLDER: .cache/Cypress
- name: Fix Linting
shell: bash
run: pnpm -w run lint:fix
- name: Sync `./src/config.type.ts` with `./src/schemas/config.schema.yaml`
shell: bash
run: pnpm run --filter mermaid types:build-config
- name: Build Docs
working-directory: ./packages/mermaid
run: pnpm run docs:build
- uses: autofix-ci/action@dd55f44df8f7cdb7a6bf74c78677eb8acd40cd0a

View File

@ -82,15 +82,3 @@ jobs:
working-directory: ./packages/mermaid
continue-on-error: ${{ github.event_name == 'push' }}
run: pnpm run docs:verify
- name: Rebuild Docs
if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }}
working-directory: ./packages/mermaid
run: pnpm run docs:build
- name: Commit changes
uses: EndBug/add-and-commit@v9
if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }}
with:
message: 'Update docs'
add: 'docs/*'

View File

@ -1,9 +1,9 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
describe('architecture diagram', () => {
it('should render a simple architecture diagram with groups', () => {
imgSnapshotTest(
`architecture
it('should render a simple architecture diagram with groups', () => {
imgSnapshotTest(
`architecture
group api(cloud)[API]
service db(database)[Database] in api
@ -17,11 +17,11 @@ describe('architecture diagram', () => {
disk2 T--B db
server T--B gateway
`
);
});
it('should render an architecture diagram with groups within groups', () => {
imgSnapshotTest(
`architecture
);
});
it('should render an architecture diagram with groups within groups', () => {
imgSnapshotTest(
`architecture
group api[API]
group public[Public API] in api
group private[Private API] in api
@ -37,18 +37,18 @@ describe('architecture diagram', () => {
serv2 L--R db
serv1 L--R gateway
`
);
});
it('should render an architecture diagram with the fallback icon', () => {
imgSnapshotTest(
`architecture
);
});
it('should render an architecture diagram with the fallback icon', () => {
imgSnapshotTest(
`architecture
service unknown(iconnamedoesntexist)[Unknown Icon]
`
);
});
it('should render an architecture diagram with split directioning', () => {
imgSnapshotTest(
`architecture
);
});
it('should render an architecture diagram with split directioning', () => {
imgSnapshotTest(
`architecture
service db(database)[Database]
service s3(disk)[Storage]
service serv1(server)[Server 1]
@ -60,11 +60,11 @@ describe('architecture diagram', () => {
serv2 L--B s3
serv1 T--B disk
`
);
});
it('should render an architecture diagram with directional arrows', () => {
imgSnapshotTest(
`architecture
);
});
it('should render an architecture diagram with directional arrows', () => {
imgSnapshotTest(
`architecture
service servC(server)[Server 1]
service servL(server)[Server 2]
service servR(server)[Server 3]
@ -81,11 +81,11 @@ describe('architecture diagram', () => {
servR (T--R) servT
servR (B--R) servB
`
);
});
it('should render an architecture diagram with group edges', () => {
imgSnapshotTest(
`architecture
);
});
it('should render an architecture diagram with group edges', () => {
imgSnapshotTest(
`architecture
group left_group(cloud)[Left]
group right_group(cloud)[Right]
group top_group(cloud)[Top]
@ -103,11 +103,11 @@ describe('architecture diagram', () => {
top_disk{group} (B--T) center_disk{group}
bottom_disk{group} (T--B) center_disk{group}
`
);
});
it('should render an architecture diagram with edge labels', () => {
imgSnapshotTest(
`architecture
);
});
it('should render an architecture diagram with edge labels', () => {
imgSnapshotTest(
`architecture
service servC(server)[Server 1]
service servL(server)[Server 2]
service servR(server)[Server 3]
@ -124,11 +124,11 @@ describe('architecture diagram', () => {
servR T-[Label]-R servT
servR B-[Label]-R servB
`
);
});
it('should render an architecture diagram with simple junction edges', () => {
imgSnapshotTest(
`architecture
);
});
it('should render an architecture diagram with simple junction edges', () => {
imgSnapshotTest(
`architecture
service left_disk(disk)[Disk]
service top_disk(disk)[Disk]
service bottom_disk(disk)[Disk]
@ -144,11 +144,11 @@ describe('architecture diagram', () => {
top_gateway B--T juncR
bottom_gateway T--B juncR
`
);
});
it('should render an architecture diagram with complex junction edges', () => {
imgSnapshotTest(
`architecture
);
});
it('should render an architecture diagram with complex junction edges', () => {
imgSnapshotTest(
`architecture
group left
group right
service left_disk(disk)[Disk] in left
@ -169,6 +169,6 @@ describe('architecture diagram', () => {
juncC{group} R--L) juncR{group}
`
);
});
});
);
});
});

View File

@ -208,6 +208,7 @@ Communication tools and platforms
- [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
- [JSDoc](https://jsdoc.app/)
- [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
- [Madness](https://madness.dannyb.co/)
- [mdBook](https://rust-lang.github.io/mdBook/index.html)
- [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
- [MkDocs](https://www.mkdocs.org)

View File

@ -12,7 +12,7 @@ A packet diagram is a visual representation used to illustrate the structure and
## Usage
This diagram type is particularly useful for network engineers, educators, and students who require a clear and concise way to represent the structure of network packets.
This diagram type is particularly useful for developers, network engineers, educators, and students who require a clear and concise way to represent the structure of network packets.
## Syntax

View File

@ -82,7 +82,7 @@
"katex": "^0.16.9",
"khroma": "^2.1.0",
"lodash-es": "^4.17.21",
"mdast-util-from-markdown": "^2.0.0",
"marked": "^13.0.2",
"stylis": "^4.3.1",
"ts-dedent": "^2.2.0",
"uuid": "^9.0.1"
@ -140,4 +140,4 @@
"publishConfig": {
"access": "public"
}
}
}

View File

@ -102,7 +102,8 @@ function addGroups(groups: ArchitectureGroup[], cy: cytoscape.Core) {
function addEdges(edges: ArchitectureEdge[], cy: cytoscape.Core) {
edges.forEach((parsedEdge) => {
const { lhsId, rhsId, lhsInto, lhsGroup, rhsInto, lhsDir, rhsDir, rhsGroup, title } = parsedEdge;
const { lhsId, rhsId, lhsInto, lhsGroup, rhsInto, lhsDir, rhsDir, rhsGroup, title } =
parsedEdge;
const edgeType = isArchitectureDirectionXY(parsedEdge.lhsDir, parsedEdge.rhsDir)
? 'segments'
: 'straight';

View File

@ -203,6 +203,7 @@ Communication tools and platforms
- [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
- [JSDoc](https://jsdoc.app/)
- [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
- [Madness](https://madness.dannyb.co/)
- [mdBook](https://rust-lang.github.io/mdBook/index.html)
- [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
- [MkDocs](https://www.mkdocs.org)

View File

@ -6,7 +6,7 @@ A packet diagram is a visual representation used to illustrate the structure and
## Usage
This diagram type is particularly useful for network engineers, educators, and students who require a clear and concise way to represent the structure of network packets.
This diagram type is particularly useful for developers, network engineers, educators, and students who require a clear and concise way to represent the structure of network packets.
## Syntax

View File

@ -153,7 +153,7 @@ function updateTextContentAndStyles(tspan: any, wrappedLine: MarkdownWord[]) {
wrappedLine.forEach((word, index) => {
const innerTspan = tspan
.append('tspan')
.attr('font-style', word.type === 'emphasis' ? 'italic' : 'normal')
.attr('font-style', word.type === 'em' ? 'italic' : 'normal')
.attr('class', 'text-inner-tspan')
.attr('font-weight', word.type === 'strong' ? 'bold' : 'normal');
if (index === 0) {

View File

@ -1,4 +1,3 @@
/* eslint-disable no-irregular-whitespace */
import { markdownToLines, markdownToHTML } from './handle-markdown-text.js';
import { test, expect } from 'vitest';
@ -37,9 +36,9 @@ Here is a line *with an italic* section`;
{ content: 'is', type: 'normal' },
{ content: 'a', type: 'normal' },
{ content: 'line', type: 'normal' },
{ content: 'with', type: 'emphasis' },
{ content: 'an', type: 'emphasis' },
{ content: 'italic', type: 'emphasis' },
{ content: 'with', type: 'em' },
{ content: 'an', type: 'em' },
{ content: 'italic', type: 'em' },
{ content: 'section', type: 'normal' },
],
];
@ -143,7 +142,7 @@ test('markdownToLines - Only italic formatting', () => {
{ content: 'This', type: 'normal' },
{ content: 'is', type: 'normal' },
{ content: 'an', type: 'normal' },
{ content: 'italic', type: 'emphasis' },
{ content: 'italic', type: 'em' },
{ content: 'test', type: 'normal' },
],
];
@ -156,7 +155,7 @@ it('markdownToLines - Mixed formatting', () => {
let input = `*Italic* and **bold** formatting`;
let expected = [
[
{ content: 'Italic', type: 'emphasis' },
{ content: 'Italic', type: 'em' },
{ content: 'and', type: 'normal' },
{ content: 'bold', type: 'strong' },
{ content: 'formatting', type: 'normal' },
@ -167,9 +166,9 @@ it('markdownToLines - Mixed formatting', () => {
input = `*Italic with space* and **bold ws** formatting`;
expected = [
[
{ content: 'Italic', type: 'emphasis' },
{ content: 'with', type: 'emphasis' },
{ content: 'space', type: 'emphasis' },
{ content: 'Italic', type: 'em' },
{ content: 'with', type: 'em' },
{ content: 'space', type: 'em' },
{ content: 'and', type: 'normal' },
{ content: 'bold', type: 'strong' },
{ content: 'ws', type: 'strong' },
@ -191,9 +190,9 @@ Word!`;
{ content: 'the', type: 'strong' },
{ content: 'hog...', type: 'normal' },
{ content: 'a', type: 'normal' },
{ content: 'very', type: 'emphasis' },
{ content: 'long', type: 'emphasis' },
{ content: 'text', type: 'emphasis' },
{ content: 'very', type: 'em' },
{ content: 'long', type: 'em' },
{ content: 'text', type: 'em' },
{ content: 'about', type: 'normal' },
{ content: 'it', type: 'normal' },
],
@ -215,13 +214,13 @@ test('markdownToLines - No auto wrapping', () => {
[
[
{
"content": "Hello, how do",
"content": "Hello, how do",
"type": "normal",
},
],
[
{
"content": "you do?",
"content": "you do?",
"type": "normal",
},
],
@ -298,3 +297,13 @@ test('markdownToHTML - no auto wrapping', () => {
)
).toMatchInlineSnapshot('"<p>Hello,&nbsp;how&nbsp;do<br/>you&nbsp;do?</p>"');
});
test('markdownToHTML - auto wrapping', () => {
expect(
markdownToHTML(
`Hello, how do
you do?`,
{ markdownAutoWrap: true }
)
).toMatchInlineSnapshot('"<p>Hello, how do<br/>you do?</p>"');
});

View File

@ -1,5 +1,5 @@
import type { Content } from 'mdast';
import { fromMarkdown } from 'mdast-util-from-markdown';
import type { MarkedToken, Token } from 'marked';
import { marked } from 'marked';
import { dedent } from 'ts-dedent';
import type { MarkdownLine, MarkdownWordType } from './types.js';
import type { MermaidConfig } from '../config.type.js';
@ -24,13 +24,13 @@ function preprocessMarkdown(markdown: string, { markdownAutoWrap }: MermaidConfi
*/
export function markdownToLines(markdown: string, config: MermaidConfig = {}): MarkdownLine[] {
const preprocessedMarkdown = preprocessMarkdown(markdown, config);
const { children } = fromMarkdown(preprocessedMarkdown);
const nodes = marked.lexer(preprocessedMarkdown);
const lines: MarkdownLine[] = [[]];
let currentLine = 0;
function processNode(node: Content, parentType: MarkdownWordType = 'normal') {
function processNode(node: MarkedToken, parentType: MarkdownWordType = 'normal') {
if (node.type === 'text') {
const textLines = node.value.split('\n');
const textLines = node.text.split('\n');
textLines.forEach((textLine, index) => {
if (index !== 0) {
currentLine++;
@ -42,17 +42,17 @@ export function markdownToLines(markdown: string, config: MermaidConfig = {}): M
}
});
});
} else if (node.type === 'strong' || node.type === 'emphasis') {
node.children.forEach((contentNode) => {
processNode(contentNode, node.type);
} else if (node.type === 'strong' || node.type === 'em') {
node.tokens.forEach((contentNode) => {
processNode(contentNode as MarkedToken, node.type);
});
}
}
children.forEach((treeNode) => {
nodes.forEach((treeNode) => {
if (treeNode.type === 'paragraph') {
treeNode.children.forEach((contentNode) => {
processNode(contentNode);
treeNode.tokens?.forEach((contentNode) => {
processNode(contentNode as MarkedToken);
});
}
});
@ -61,23 +61,23 @@ export function markdownToLines(markdown: string, config: MermaidConfig = {}): M
}
export function markdownToHTML(markdown: string, { markdownAutoWrap }: MermaidConfig = {}) {
const { children } = fromMarkdown(markdown);
const nodes = marked.lexer(markdown);
function output(node: Content): string {
function output(node: Token): string {
if (node.type === 'text') {
if (markdownAutoWrap === false) {
return node.value.replace(/\n/g, '<br/>').replace(/ /g, '&nbsp;');
return node.text.replace(/\n */g, '<br/>').replace(/ /g, '&nbsp;');
}
return node.value.replace(/\n/g, '<br/>');
return node.text.replace(/\n */g, '<br/>');
} else if (node.type === 'strong') {
return `<strong>${node.children.map(output).join('')}</strong>`;
} else if (node.type === 'emphasis') {
return `<em>${node.children.map(output).join('')}</em>`;
return `<strong>${node.tokens?.map(output).join('')}</strong>`;
} else if (node.type === 'em') {
return `<em>${node.tokens?.map(output).join('')}</em>`;
} else if (node.type === 'paragraph') {
return `<p>${node.children.map(output).join('')}</p>`;
return `<p>${node.tokens?.map(output).join('')}</p>`;
}
return `Unsupported markdown: ${node.type}`;
}
return children.map(output).join('');
return nodes.map(output).join('');
}

View File

@ -1,4 +1,4 @@
export type MarkdownWordType = 'normal' | 'strong' | 'emphasis';
export type MarkdownWordType = 'normal' | 'strong' | 'em';
export interface MarkdownWord {
content: string;
type: MarkdownWordType;

View File

@ -567,7 +567,7 @@ export const wrapLabel: (label: string, maxWidth: number, config: WrapLabelConfi
if (common.lineBreakRegex.test(label)) {
return label;
}
const words = label.split(' ');
const words = label.split(' ').filter(Boolean);
const completedLines: string[] = [];
let nextLine = '';
words.forEach((word, index) => {

23107
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@ -25,6 +25,7 @@ const formatBytes = (bytes: number): string => {
if (bytes == 0) {
return '0 Bytes';
}
bytes = Math.abs(bytes);
const base = 1024;
const decimals = 2;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];