Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
127 lines (127 sloc) 5.62 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>AIWaffle</title>
<link rel="shortcut icon" href="/assets/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap" rel="stylesheet">
<link defer rel="preload" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/markdown-it@10.0.0/dist/markdown-it.min.js"></script>
<link defer rel="preload" href="https://cdn.jsdelivr.net/npm/markdown-it-texmath@0.6.0/css/texmath.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<script defer src="https://cdn.jsdelivr.net/npm/markdown-it-texmath@0.6.0/texmath.min.js"></script>
<link defer rel="preload" href="https://cdn.jsdelivr.net/npm/highlightjs@9.16.2/styles/solarized-light.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<script defer src="/dist/highlight.js" onload="hljs.initHighlightingOnLoad"></script>
<!-- loadCSS asynchronously: https://github.com/filamentgroup/loadCSS/blob/master/src/cssrelpreload.js -->
<script>
!function(t){"use strict";t.loadCSS||(t.loadCSS=function(){});var e=loadCSS.relpreload={};if(e.support=function(){var e;try{e=t.document.createElement("link").relList.supports("preload")}catch(t){e=!1}return function(){return e}}(),e.bindMediaToggle=function(t){var e=t.media||"all";function a(){t.addEventListener?t.removeEventListener("load",a):t.attachEvent&&t.detachEvent("onload",a),t.setAttribute("onload",null),t.media=e}t.addEventListener?t.addEventListener("load",a):t.attachEvent&&t.attachEvent("onload",a),setTimeout(function(){t.rel="stylesheet",t.media="only x"}),setTimeout(a,3e3)},e.poly=function(){if(!e.support())for(var a=t.document.getElementsByTagName("link"),n=0;n<a.length;n++){var o=a[n];"preload"!==o.rel||"style"!==o.getAttribute("as")||o.getAttribute("data-loadcss")||(o.setAttribute("data-loadcss",!0),e.bindMediaToggle(o))}},!e.support()){e.poly();var a=t.setInterval(e.poly,500);t.addEventListener?t.addEventListener("load",function(){e.poly(),t.clearInterval(a)}):t.attachEvent&&t.attachEvent("onload",function(){e.poly(),t.clearInterval(a)})}"undefined"!=typeof exports?exports.loadCSS=loadCSS:t.loadCSS=loadCSS}("undefined"!=typeof global?global:this);
</script>
<!-- These scripts link to the Vega/Vega-Lite runtime -->
<script defer src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script defer src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
<script defer src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
<style>
img {
width: 100%;
}
p {
line-height: 1.2em;
}
html {
--scrollbarBG: white;
--thumbBG: rgba(204,204,204,1);
}
.content {
white-space: pre-wrap;
font-size: 0.8em;
padding-right: 0.8em;
margin: auto;
}
@media (min-width: 700px) {
.content {
max-width: 50vw;
}
}
@media (min-width: 860px) {
.content-scroll::-webkit-scrollbar {
width: 15px;
}
.content-scroll {
scrollbar-color: var(--thumbBG) var(--scrollbarBG);
max-height: calc(100vh - 20px);
overflow-x: auto;
overflow-y: scroll;
}
.content-scroll::-webkit-scrollbar-track {
background: var(--scrollbarBG);
}
.content-scroll::-webkit-scrollbar-thumb {
background-color: var(--thumbBG) ;
border-radius: 6px;
border: 3px solid var(--scrollbarBG);
}
}
@media (max-width: 500px) {
#tutorial-menu {
display: none;
}
}
@media (min-width: 501px) {
.content {
margin-left: 300px;
}
}
</style>
<script defer src="/dist/main.js"></script>
</head>
<body>
<div id="app"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var app = Elm.Main.init({
node: document.getElementById("app")
});
app.ports.renderContent.subscribe(
function(contentName) {
fetch('/dist/contents/' + contentName + '.md')
.then(response => response.text())
.then((contentText) => {
const contentNode = document.getElementsByClassName("content")[0];
const tm = texmath.use(katex);
const md = window.markdownit({
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(lang, str).value;
} catch (__) {}
}
return '';
}
}).use(tm,{delimiters:'dollars'});
contentNode.innerHTML = md.render(contentText);
})
}
);
// This function grabs the specification from Elm (here called specs).
app.ports.elmToJs.subscribe(
function(namedSpecs) {
console.log(namedSpecs)
for (let name of Object.keys(namedSpecs)) {
vegaEmbed(`#${name}`, namedSpecs[name], {
actions: false,
logLevel: vega.Warn
}).catch(console.warn);
}
}
);
app.ports.scrollToTop.subscribe(
function() {
window.scrollTo(0, 0);
}
)
});
</script>
</body>
</html>
You can’t perform that action at this time.