-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
123 lines (120 loc) · 4.59 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html>
<head>
<title>Lightweight GraphQL | Introduction to GraphQL without window.fetch() | Benjie Gillam</title>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-106792928-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-106792928-1');
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="styles.css" type='text/css' />
</head>
<body>
<script type="application/javascript" src="remark-latest.min.js"></script>
<script type="application/javascript" src="prism.min.js" data-manual></script>
<script type="application/javascript" src="prism-graphql.min.js" data-manual></script>
<script type="application/javascript" src="prism-jsx.min.js" data-manual></script>
<script type="application/javascript" src="prism-json.min.js" data-manual></script>
<script type="application/javascript">
function parseLanguage(lang) {
return {
js: 'jsx',
}[lang] || lang;
}
remark.highlighter.engine.highlightBlock = block => {
const language = parseLanguage(block.className.split(" ")[0]);
const prismLang = Prism.languages[language];
if (prismLang) {
block.parentNode.className = `${block.parentNode.className} language-${language}`;
const html = Prism.highlight(block.textContent, prismLang);
const lines = html.split(`\n`);
let currentSpan = null;
for (var i = 0; i < lines.length; i++) {
let line = lines[i];
if (currentSpan) {
line = currentSpan + line;
currentSpan = null;
}
const openTags = [];
const re = /(<span[^>]*>|<\/span>)/gi;
let matches;
while ((matches = re.exec(line)) != null) {
const tag = matches[1];
if (tag[1] === '/') {
openTags.pop();
} else {
openTags.push(tag);
}
}
currentSpan = openTags.join('');
line = line + ('</' + 'span>').repeat(openTags.length);
lines[i] = line;
}
block.innerHTML = lines.join('\n');
} else {
console.warn(`Language '${language}' not supported?`)
}
};
async function main() {
try {
const result = await fetch('slides.md');
let lastSource = await result.text();
const slideshow = remark.create({
source: lastSource,
slideNumberFormat: function (current, total) { return null },
ratio: '4:3',
highlightLines: true,
highlightSpans: false // We need ES6 backticks
});
if (window.___browserSync___) {
___browserSync___.socket.on('reload:slides.md', async () => {
try {
const result2 = await fetch('slides.md');
const newSource = await result2.text();
if (lastSource !== newSource) {
slideshow.gotoSlide(1);
slideshow.loadFromString(newSource);
let slideNumber = 1;
let i = 0, l = Math.min(lastSource.length, newSource.length);
for (; i < l; i++) {
const oldChr = lastSource[i];
const newChr = newSource[i];
if (oldChr === '\n') {
if (lastSource.substr(i+1, 4).match(/^---?\n/)) {
// TODO: don't let this break inside code blocks
slideNumber++;
}
}
if (oldChr !== newChr) {
slideshow.gotoSlide(slideNumber);
break;
}
}
if (i === l) {
slideshow.gotoLastSlide();
}
lastSource = newSource;
}
} catch (e) {
console.error(e);
}
})
}
} catch (e) {
console.error(e);
document.body.innerHTML = '<h1>An error ocurred!<' + '/h1>';
}
}
window.syntaxWasValid = true;
main();
</script>
<script type="application/javascript">
if (!window.syntaxWasValid) {
document.write('<h1>A browser that supports async/await is required to view this presentation</' + 'h1>');
}
</script>
</body>
</html>