mirror of
https://github.com/jpetazzo/container.training.git
synced 2026-02-14 09:39:56 +00:00
77 lines
2.8 KiB
HTML
77 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Training Materials</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
|
<link rel="stylesheet" href="workshop.css">
|
|
</head>
|
|
<body>
|
|
<script src="remark.min.js" type="text/javascript">
|
|
</script>
|
|
<div id="loading">⏳️ Loading...</div>
|
|
<textarea id="source" style="display: none;">@@MARKDOWN@@</textarea>
|
|
<script type="module">
|
|
if (window.location.search[0] === '?') {
|
|
const contentName = window.location.search.substr(1);
|
|
let contentText = "⚠️ Failed to load content!"
|
|
for (const url of [
|
|
`fragments/${contentName}.md`,
|
|
`${contentName}.md`
|
|
]) {
|
|
const contentResponse = await fetch(url);
|
|
if (contentResponse.ok) {
|
|
contentText = await contentResponse.text();
|
|
break;
|
|
}
|
|
}
|
|
document.querySelector('#source').textContent = contentText;
|
|
}
|
|
/*
|
|
This tmpl() function helps us to use the same HTML file for entire
|
|
decks (used for live classes and pre-processed by markmaker.py to
|
|
replace @@-strings) and to display individual chapters (used for
|
|
video recording and not pre-processed by markmarker.py, so we still
|
|
have @@-strings in this HTML file in that case).
|
|
*/
|
|
function tmpl(atString, templateValue, defaultValue) {
|
|
if (atString[0] === "@") {
|
|
return defaultValue;
|
|
}
|
|
return JSON.parse(templateValue);
|
|
}
|
|
var tmplEXCLUDE = tmpl('@@EXCLUDE@@', '[@@EXCLUDE@@]', []);
|
|
var tmplTITLE = tmpl('@@TITLE@@', '"@@TITLE@@"', document.title);
|
|
var tmplSLIDENUMBERPREFIX = tmpl('@@SLIDENUMBERPREFIX@@', '"@@SLIDENUMBERPREFIX@@"', "");
|
|
document.title = tmplTITLE;
|
|
var slideshow = remark.create({
|
|
ratio: '16:9',
|
|
highlightSpans: true,
|
|
slideNumberFormat: `${tmplSLIDENUMBERPREFIX}%current%/%total%`,
|
|
excludedClasses: tmplEXCLUDE
|
|
});
|
|
document.querySelector('#loading').style.display = 'none';
|
|
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
|
|
mermaid.initialize({ startOnLoad: false });
|
|
slideshow.on('afterShowSlide', function (slide) {
|
|
mermaid.run({
|
|
nodes: document.querySelectorAll('div.remark-visible.mermaid'),
|
|
});
|
|
});
|
|
// Reminder, if you want to tinker with mermaid,
|
|
// you need to export it, for instance like this:
|
|
// window.mermaid = mermaid;
|
|
</script>
|
|
|
|
<!--
|
|
These two scripts will be available only when loading the
|
|
content using the pub/sub server. Otherwise, they'll just
|
|
404 and that's OK.
|
|
-->
|
|
<script src="/socket.io/socket.io.js">
|
|
</script>
|
|
<script src="/remote.js">
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|