-
Notifications
You must be signed in to change notification settings - Fork 44
/
index.html
124 lines (114 loc) · 4.77 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
124
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimal-ui">
<meta name="description" content="{{description}}">
<meta name="author" content="{{user}}">
<meta name="gist_id" content="{{gist_id}}">
<title>{{title}}</title>
<link rel="icon" type="image/png" href="/img/k8s-favicon.png"/>
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style id='site_logo_css' type='text/css'>
.reveal .callouts {
position: fixed;
z-index: 30;
bottom: 0px;
left: 0px;
margin: 5%;
}
.reveal #gist-link {
height: 33px;
outline: none;
box-shadow: none;
background: transparent;
position: fixed;
left: 10px;
bottom: 10px;
margin: 0px;
}
body.reveal-scroll #gist-link {
left: 2%;
bottom: 10px;
width: 30%;
}
body.print-pdf .reveal .callouts {display:none; !important}
@media print {
.reveal .callouts {display:none; !important}
}
img {
opacity: 1;
transition: opacity 0.3s;
}
img[data-src] {
opacity: 0;
}
</style>
<link rel="alternate" type="text/html" href="{{print-pdf-href}}" media='print'>
<link rel="stylesheet" href="/node_modules/reveal.js/dist/reset.css">
<link rel="stylesheet" href="/node_modules/reveal.js/dist/reveal.css">
<link rel="stylesheet" href="/css/theme/black.css">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="/node_modules/reveal.js/plugin/highlight/monokai.css">
<link rel="stylesheet" href="/css/theme/{{theme}}.css" id="theme">
</head>
<body onload="revealit()">
<div class="reveal">
<!-- Section elements in this container are displayed as slides -->
<div class="slides">
{{slides}}
</div>
<div class='callouts'>
<a id='gist-link' class='callouts' href="{{template_gist_url}}"><img id="gist-link" alt="{{template_gist_text}}" src="{{template_gist_img}}" /></a>
</div>
</div>
<script type="text/javascript" src="/node_modules/reveal.js/dist/reveal.js"></script>
<script type="text/javascript" src="/node_modules/reveal.js-copycode/plugin/copycode/copycode.js"></script>
<script src="/node_modules/reveal.js/plugin/notes/notes.js"></script>
<script src="/node_modules/reveal.js/plugin/markdown/markdown.js"></script>
<script src="/node_modules/reveal.js/plugin/zoom/zoom.js"></script>
<script src="/node_modules/reveal.js/plugin/highlight/highlight.js"></script>
//{{ga-tracker}}
<script>
function getQSParameterByName(name, url = window.location.href) {
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
var revealit = function(){
Reveal.initialize({
hash: true,
copycode: { timeout: 1200, button: "hover", display: "icons", style: { copybg: "rgba(255,255,255,128)", copiedbg: "white", copyborder: "1px solid gray", copiedborder: "1px solid green", copiedcolor: "green", offset: "0", radius: "0.2"} },
plugins: [ CopyCode, RevealZoom, RevealMarkdown, RevealHighlight, RevealNotes ],
width: 960,
height: 710,
margin: 0.1,
controls: true,
controlsTutorial: true,
progress: true,
history: true,
center: true,
hosted: {},
theme: getQSParameterByName('theme') || 'black',
transition: getQSParameterByName('transition') || 'slide',
dependencies: [
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.8.1/socket.io.min.js', async: true },
{ src: '/js/client.js', async: true }
]
});
Reveal.configure({ pdfSeparateFragments: false });
// Lazy loading of images with the data-src attr
//[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
// img.setAttribute('src', img.getAttribute('data-src'));
// img.onload = function() {
// img.removeAttribute('data-src');
// };
//});
}
</script>
</body>
</html>