Vitepress uses YAML frontmatter to configure Vitepress specific
settings, see https://vitepress.vuejs.org/config/frontmatter-configs
We just need to use `remark-frontmatter` to add support for it.
GitHub also renders the YAML front-matter nicely in a table
automatically, but maybe we should instead strip it, if it's only
used by Vitepress?
* sidv/properlyWaitTests:
feat: Wait for rendering to finish before taking image snapshots
Update docs
chore(deps): update all non-major dependencies
Fix: Too many `primaryBorderColor`
Support using GFM in markdown documentation.
GitHub has some custom features in their Markdown documentation.
For example, they support using tables, footnotes, and task lists.
Vitepress supports tables too.
However, remark sometimes throws an error when parsing tables,
so we should use `remark-gfm` to handle them.
* master: (23 commits)
Update vitepress
fix: Add icon css
fix Top level await
v9.3.0
bump dagre-es 7.0.6
Bump mermaid version
Update dagre-es
Bump mermaid version
fix: Incorrect removal of existing elements
fix: add .js to external imports.
fix: add .js to external imports.
Bump mermaid version
fix: add .js to external imports.
Bump mermaid version
fix: Throw correct errors when parsing diagrams with errors
Update url snapshot test for external diagrams
Update url snapshot test for external diagrams
Updated package number
Updated package number
Updated package number to 9.3.0-rc1
...
`graphlib` has recently been replaced with the ESM version of
graphlib bundled with
[`dagre-d3-es`](https://www.npmjs.com/package/dagre-d3-es), in commit
f687abb1 (chore: Use `graphlib` from `dagre-d3-es`, 2022-11-20)
This means we can safely remove it from our dependencies list.
Fixes: f687abb165795dfe959e87216bb111ebc7bc71cc
In order to parse the YAML front-matter in a Mermaid diagram, the
YAML seperators **MUST NOT** be indented, e.g.:
````markdown
```mermaid
---
title: This is fine.
---
```
```mermaid
---
title: This is not fine, because the `---` are indented.
---
```
````
However, this makes it very difficult to write nice Mermaid diagrams in
HTML code-blocks.
This commit uses [`ts-dedent`](https://www.npmjs.com/package/ts-dedent)
to automatically remove the indentation from Mermaid diagrams when
parsed from HTML. Mermaid diagrams from mermaidAPI.render() are **NOT**
dedented, as that API is called from JavaScript code, and therefore
users can easily `dedent` their own diagrams.
* develop: (79 commits)
chore: docs:build
chore: docs:build
tiny fix and change: "The/y cannot" -> "Cannot..."
remove 'horz' from cSpell.json
update demos/state.html to includ examples; formatting
add 'horz' to cSpell (in pieDetector.ts commented out barChart work)
refine - what is not done yet
remove 'horz' from cSpell.json
Revert "Added pie"
chore: Fix cSpell in pieRenderer
update demos/state.html to includ examples; formatting
add 'horz' to cSpell (in pieDetector.ts commented out barChart work)
refine - what is not done yet
remove console stmt
#3831 Re-enabling themes for er diagrams
#3835 Adding path to list of elements to be styled
#3882 fix for issues with mindmaps with only a single node
chore(deps): update pnpm to v7.17.0
docs: Remove warning in readme
chore(deps): update lycheeverse/lychee-action action to v1.5.4
...
* develop:
chore(deps): update pnpm to v7.17.0
docs: Remove warning in readme
chore(deps): update lycheeverse/lychee-action action to v1.5.4
chore: Add size shield in readme
Fix example for Git diagrams
Fix TS errors
Add interface for DiagramDb and other minor changes
Disallow leading whitespace before delimiter
Add title support using YAML frontmatter
* sidv/viz:
Fix Lodash import
fix: Viz build
feat: Add package visualization
Ignore stats.html
feat: Add bundle visualization
style(docs): use `github-dark` hightlight theme
refactor(docs): use default vitepress highlighter
fix: Move redirection to router
chore: Add docs to redirect.ts
feat: Redirect old documentation links.
comments in states are skipped now
Remove extra arrow and adjust cross position
Replace the dagre and dagre-d3 libraries with dagre-d3-es.
Both dagre and dagre-d3 are deprecated and unmaintained,
and haven't been updated for more than 3 years.
Since dagre-d3 still requires an old version of d3, this causes
a bunch of security warnings,
e.g. https://github.com/advisories/GHSA-36jr-mh4h-2g58
The [dagre-d3-es](https://github.com/tbo47/dagre-es) package is a fork
that contains support for `"d3": "^7.6.1"`. Also, it's ESM, so we will
hopefully get smaller bundle sizes too. The only issue is that this
fork isn't very well used (only has 3000 weekly downloads),
compared to `dagre-d3`'s 250,000 weekly downloads.
(although to be fair, a large proportion of dagre-d3's downloads
probably come from mermaid)
Since it's is a less popular package,
**I've pinned `dagre-d3-es` to `"7.0.2"` instead of `"^7.0.2"`**.
This does mean if there is a bug in `dagre-d3-es`, we will have to
manually bump it ourselves, but it also means we won't accidentally
be sending a buggy version of `dagre-d3-es` out to users in cases
something changes (it might be worth disabling renovate for this
if we're feeling paranoid!)
Use the default vitepress highlighter instead of making our own
highlighter using shiki.
The benefits are:
- We don't need to directly depend on shiki
- `mermaid-example` code-blocks will use the same highlighting
as other languages (e.g. `html`/`js`).
- We can control the theme from the global `vitepress` config.
- Darkmode/lightmode themes are supported
- Escaping is already handled by the default highlight function
