Skip to content

Commit 92a024f

Browse files
daveverwerdaveverwer
authored
Merge pull request #3499 from SwiftPackageIndex/3348-mermaid-chart
Add support for Mermaid charts to README files
2 parents 7d21c9e + 775ec45 commit 92a024f

21 files changed

+736
-20
lines changed

‎FrontEnd/scripts/controllers/readme_controller.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,41 @@
1313
// limitations under the License.
1414

1515
import { Controller } from '@hotwired/stimulus'
16+
import mermaid from 'mermaid'
1617

1718
export class ReadmeController extends Controller {
19+
frameLoaded() {
20+
this.navigateToAnchorFromLocation()
21+
this.renderMermaidDiagrams()
22+
}
23+
24+
async renderMermaidDiagrams() {
25+
// Replace all Mermaid chart sources with rendered diagrams.
26+
const mermaidSectionElements = document.querySelectorAll('section[data-type="mermaid"]')
27+
for (const [index, mermaidSectionElement] of Array.from(mermaidSectionElements).entries()) {
28+
// No need to parse the JSON, the chart source is in a `data-plain` attribute.
29+
const mermaidDataElement = mermaidSectionElement.querySelector('[data-plain]')
30+
if (!mermaidDataElement) continue
31+
const chartDefinition = mermaidDataElement.getAttribute('data-plain')
32+
if (!chartDefinition) continue
33+
34+
// Make a container with *both* light and dark charts.
35+
const chartContainer = document.createElement('div')
36+
chartContainer.classList.add('mermaid-chart')
37+
mermaidDataElement.appendChild(chartContainer)
38+
39+
// The documentation says not to call `initialize` more than once. That said, it's
40+
// the only way to switch themes and therefore the only way to get this working.
41+
mermaid.initialize({ theme: 'default', nodeSpacing: 50, rankSpacing: 50, curve: 'basis' })
42+
const lightRenderResult = await mermaid.render(`mermaid-chart-light-${index}`, chartDefinition)
43+
chartContainer.insertAdjacentHTML('beforeend', lightRenderResult.svg)
44+
45+
mermaid.initialize({ theme: 'dark', nodeSpacing: 50, rankSpacing: 50, curve: 'basis' })
46+
const darkRenderResult = await mermaid.render(`mermaid-chart-dark-${index}`, chartDefinition)
47+
chartContainer.insertAdjacentHTML('beforeend', darkRenderResult.svg)
48+
}
49+
}
50+
1851
navigateToAnchorFromLocation() {
1952
// If the browser has an anchor in the URL that may be inside the README then
2053
// we should attempt to scroll it into view once the README is loaded.

‎FrontEnd/styles/readme.scss‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,31 @@
138138
.markdown-alert-caution {
139139
color: var(--mid-red);
140140
}
141+
142+
.mermaid-chart {
143+
display: flex;
144+
justify-content: center;
145+
padding: 30px 0;
146+
}
147+
148+
section[data-type='mermaid'] {
149+
pre,
150+
.js-render-enrichment-loader {
151+
display: none;
152+
}
153+
154+
@media (prefers-color-scheme: light) {
155+
[id^='mermaid-chart-dark'] {
156+
display: none;
157+
}
158+
}
159+
160+
@media (prefers-color-scheme: dark) {
161+
[id^='mermaid-chart-light'] {
162+
display: none;
163+
}
164+
}
165+
}
141166
}
142167

143168
g-emoji {

‎Sources/App/Views/PackageController/PackageShow+View.swift‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -327,7 +327,7 @@ extension PackageShow {
327327
.value(model.repositoryName),
328328
.readme).relativeURL(),
329329
.data(named: "controller", value: "readme"),
330-
.data(named: "action", value: "turbo:frame-load->readme#navigateToAnchorFromLocation"),
330+
.data(named: "action", value: "turbo:frame-load->readme#frameLoaded"),
331331
.div(.spinner())
332332
)
333333
}

‎Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView.1.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -359,7 +359,7 @@ <h3>Compatibility</h3>
359359
</ul>
360360
</nav>
361361
<section data-tab-bar-target="content">
362-
<turbo-frame id="readme_content" src="/Alamo/Alamofire/readme" data-controller="readme" data-action="turbo:frame-load->readme#navigateToAnchorFromLocation">
362+
<turbo-frame id="readme_content" src="/Alamo/Alamofire/readme" data-controller="readme" data-action="turbo:frame-load->readme#frameLoaded">
363363
<div>
364364
<div class="spinner">
365365
<div class="rect1"></div>

‎Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_app_store_incompatible_license.1.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -359,7 +359,7 @@ <h3>Compatibility</h3>
359359
</ul>
360360
</nav>
361361
<section data-tab-bar-target="content">
362-
<turbo-frame id="readme_content" src="/Alamo/Alamofire/readme" data-controller="readme" data-action="turbo:frame-load->readme#navigateToAnchorFromLocation">
362+
<turbo-frame id="readme_content" src="/Alamo/Alamofire/readme" data-controller="readme" data-action="turbo:frame-load->readme#frameLoaded">
363363
<div>
364364
<div class="spinner">
365365
<div class="rect1"></div>

‎Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_binary_targets.1.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -363,7 +363,7 @@ <h3>Compatibility</h3>
363363
</ul>
364364
</nav>
365365
<section data-tab-bar-target="content">
366-
<turbo-frame id="readme_content" src="/Alamo/Alamofire/readme" data-controller="readme" data-action="turbo:frame-load->readme#navigateToAnchorFromLocation">
366+
<turbo-frame id="readme_content" src="/Alamo/Alamofire/readme" data-controller="readme" data-action="turbo:frame-load->readme#frameLoaded">
367367
<div>
368368
<div class="spinner">
369369
<div class="rect1"></div>

‎Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_canonicalURL_noImageSnapshots.1.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -356,7 +356,7 @@ <h3>Compatibility</h3>
356356
</ul>
357357
</nav>
358358
<section data-tab-bar-target="content">
359-
<turbo-frame id="readme_content" src="/owner/repo/readme" data-controller="readme" data-action="turbo:frame-load->readme#navigateToAnchorFromLocation">
359+
<turbo-frame id="readme_content" src="/owner/repo/readme" data-controller="readme" data-action="turbo:frame-load->readme#frameLoaded">
360360
<div>
361361
<div class="spinner">
362362
<div class="rect1"></div>

‎Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_customCollection.1.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -362,7 +362,7 @@ <h3>Compatibility</h3>
362362
</ul>
363363
</nav>
364364
<section data-tab-bar-target="content">
365-
<turbo-frame id="readme_content" src="/Alamo/Alamofire/readme" data-controller="readme" data-action="turbo:frame-load->readme#navigateToAnchorFromLocation">
365+
<turbo-frame id="readme_content" src="/Alamo/Alamofire/readme" data-controller="readme" data-action="turbo:frame-load->readme#frameLoaded">
366366
<div>
367367
<div class="spinner">
368368
<div class="rect1"></div>

‎Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_emoji_summary.1.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -356,7 +356,7 @@ <h3>Compatibility</h3>
356356
</ul>
357357
</nav>
358358
<section data-tab-bar-target="content">
359-
<turbo-frame id="readme_content" src="/Alamo/Alamofire/readme" data-controller="readme" data-action="turbo:frame-load->readme#navigateToAnchorFromLocation">
359+
<turbo-frame id="readme_content" src="/Alamo/Alamofire/readme" data-controller="readme" data-action="turbo:frame-load->readme#frameLoaded">
360360
<div>
361361
<div class="spinner">
362362
<div class="rect1"></div>

‎Tests/AppTests/__Snapshots__/WebpageSnapshotTests/test_PackageShowView_few_keywords.1.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -387,7 +387,7 @@ <h3>Compatibility</h3>
387387
</ul>
388388
</nav>
389389
<section data-tab-bar-target="content">
390-
<turbo-frame id="readme_content" src="/Alamo/Alamofire/readme" data-controller="readme" data-action="turbo:frame-load->readme#navigateToAnchorFromLocation">
390+
<turbo-frame id="readme_content" src="/Alamo/Alamofire/readme" data-controller="readme" data-action="turbo:frame-load->readme#frameLoaded">
391391
<div>
392392
<div class="spinner">
393393
<div class="rect1"></div>

0 commit comments

Comments
 (0)