Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Make the examples interactive in the documentation site #5376

Merged
merged 3 commits into from
Mar 11, 2024

Conversation

sidharthv96
Copy link
Member

@sidharthv96 sidharthv96 commented Mar 11, 2024

📑 Summary

Ctrl/Cmd + Enter and a run button is added.

📏 Design Decisions

The feature was first implemented in #5330 by @nalgeon.

This is a simplified version without introducing additional dependencies.

image

📋 Tasks

Make sure you

Copy link

netlify bot commented Mar 11, 2024

Deploy Preview for mermaid-js ready!

Name Link
🔨 Latest commit 08a7f66
🔍 Latest deploy log https://app.netlify.com/sites/mermaid-js/deploys/65eeec1c3ace890008320d43
😎 Deploy Preview https://deploy-preview-5376--mermaid-js.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

codecov bot commented Mar 11, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 77.29%. Comparing base (3df3f2a) to head (08a7f66).
Report is 18 commits behind head on master.

Additional details and impacted files

Impacted file tree graph

@@             Coverage Diff             @@
##           master    #5376       +/-   ##
===========================================
+ Coverage   44.67%   77.29%   +32.62%     
===========================================
  Files          25      175      +150     
  Lines        5341    14531     +9190     
  Branches       27      868      +841     
===========================================
+ Hits         2386    11232     +8846     
- Misses       2954     3091      +137     
- Partials        1      208      +207     
Flag Coverage Δ
e2e 82.40% <ø> (?)
unit 43.37% <ø> (-1.31%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

see 173 files with indirect coverage changes

sidharthv96 and others added 2 commits March 11, 2024 14:56
Ctrl/Cmd + Enter and a run button is added.

The feature was first implemented in #5330.

This is a simplified version without introducing additional dependencies.

Co-authored-by: Anton <m@antonz.org>
Copy link
Member

@aloisklink aloisklink left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I love this change! It looks great, and I bet it will really help users of the docs experiment (I know it will help me!).

Two issues:

  1. CTRL + ENTER doesn't seem to do anything (see comment), and
  2. it looks like ```mermaid-nocode blocks might be broken, e.g. look at at https://mermaid.js.org/community/contributing.html#initial-setup:

Current behaviour

Using ```mermaid-nocode doesn't show the source code of the mermaid diagram:

image

New behaviour

```mermaid-nocode shows the source code of a diagram.

image

IMO, we could even completely remove the ```mermaid-nocode blocks if you want. I do like them, but if we let users see the source-code of those diagrams, it is additional examples for them.

packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue Outdated Show resolved Hide resolved
Support ctrl+enter
Support mermaid-nocode
Use `contenteditable="plaintext-only"`

Co-authored-by: Alois Klink <alois@aloisklink.com>
Copy link
Member

@aloisklink aloisklink left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thanks for making those changes!

@sidharthv96 sidharthv96 merged commit 447263e into master Mar 11, 2024
29 checks passed
@sidharthv96 sidharthv96 deleted the sidv/editableExamples branch March 11, 2024 12:29
fuxingloh pushed a commit to fuxingloh/contented that referenced this pull request May 15, 2024
[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [mermaid](https://togithub.com/mermaid-js/mermaid) | [`10.9.0` ->
`10.9.1`](https://renovatebot.com/diffs/npm/mermaid/10.9.0/10.9.1) |
[![age](https://developer.mend.io/api/mc/badges/age/npm/mermaid/10.9.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/mermaid/10.9.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/mermaid/10.9.0/10.9.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/mermaid/10.9.0/10.9.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>mermaid-js/mermaid (mermaid)</summary>

###
[`v10.9.1`](https://togithub.com/mermaid-js/mermaid/releases/tag/v10.9.1)

[Compare
Source](https://togithub.com/mermaid-js/mermaid/compare/v10.9.0...v10.9.1)

#### What's Changed

#### BugFixes

- Cleaning of labels in Block diagram by
[@&#8203;knsv](https://togithub.com/knsv)

#### Docs

- docs(integrations): update link to Mermaid app for Slack by
[@&#8203;JackuB](https://togithub.com/JackuB) in
[mermaid-js/mermaid#5370
- Update new diagram doc to reflect focus on Langium by
[@&#8203;sidharthv96](https://togithub.com/sidharthv96) in
[mermaid-js/mermaid#5372
- feat: Make the examples interactive in the documentation site by
[@&#8203;sidharthv96](https://togithub.com/sidharthv96) in
[mermaid-js/mermaid#5376
- DOCS: add latest blog posts by
[@&#8203;huynhicode](https://togithub.com/huynhicode) in
[mermaid-js/mermaid#5368
- DOCS: update Announcement bar link by
[@&#8203;huynhicode](https://togithub.com/huynhicode) in
[mermaid-js/mermaid#5394
- DOCS: Add Press Release by
[@&#8203;huynhicode](https://togithub.com/huynhicode) in
[mermaid-js/mermaid#5400
- DOCS: add Turing machine blog post by
[@&#8203;huynhicode](https://togithub.com/huynhicode) in
[mermaid-js/mermaid#5425
- DOCS: update latest news by
[@&#8203;huynhicode](https://togithub.com/huynhicode) in
[mermaid-js/mermaid#5455
- 📝🐛 fix schema link by
[@&#8203;dudeofawesome](https://togithub.com/dudeofawesome) in
[mermaid-js/mermaid#5456
- DOCS: Add AI in Software Diagramming blog post by
[@&#8203;huynhicode](https://togithub.com/huynhicode) in
[mermaid-js/mermaid#5492
- DOCS: update Mermaid Chart page by
[@&#8203;huynhicode](https://togithub.com/huynhicode) in
[mermaid-js/mermaid#5495
- DOCS: Add blog post - Documentation Software by
[@&#8203;huynhicode](https://togithub.com/huynhicode) in
[mermaid-js/mermaid#5519

#### New Contributors

- [@&#8203;dudeofawesome](https://togithub.com/dudeofawesome) made their
first contribution in
[mermaid-js/mermaid#5456

**Full Changelog**:
mermaid-js/mermaid@v10.9.0...v10.9.1

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined),
Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you
are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View
repository job log
[here](https://developer.mend.io/github/fuxingloh/contented).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4zNTEuMiIsInVwZGF0ZWRJblZlciI6IjM3LjM1MS4yIiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6W119-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants