-
Notifications
You must be signed in to change notification settings - Fork 0
/
nbv.html
115 lines (109 loc) · 3.89 KB
/
nbv.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
<html lang="en">
<head>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/themes/prism.min.css'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/prism.min.js' data-manual></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/components/prism-python.min.js' data-manual></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
<script src="https://rawgit.com/kokes/nbviewer.js/master/lib/nbv.js"></script>
<link rel='stylesheet' src="https://rawgit.com/kokes/nbviewer.js/master/lib/nbv.css">
<style type='text/css'>
body {
font: 0.8em Arial, sans-serif;
background-color: #eee;
}
div#instructions {
max-width: 960px;
font-size: 2em;
color: rgb(108, 108, 108);
text-align: center;
padding-top: 10%;
margin: 0 auto;
}
div#instructions small {
font-size: .7em;
}
div#dropzone {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 1000;
background-color: #7d7;
opacity: 0;
transition: visibility 500ms, opacity 500ms;
}
select#file-selector {
display: none;
/*display: block;*/
font-size: 2em;
margin: 0 auto;
}
button#download-notebook {
display: none;
margin: 1em auto 0 auto;
}
input#github-link {
font-size: 1em;
text-align: center;
width: 60%;
margin: .3em auto;
}
input#github-link::placeholder {
color: #ccc;
}
div#serving-info {
font-size: 1.2em;
font-style: italic;
margin-top: 1em;
text-align: center;
}
div#contact {
width: 42em;
margin: 5em auto 0 auto;
font-style: italic;
}
</style>
</head>
<body>
<div id="notebook"></div>
<script>
<!-- https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
-->
var urlParams;
(window.onpopstate = function () {
var match,
pl = /\+/g, // Regex for replacing addition symbol with a space
search = /([^&=]+)=?([^&]*)/g,
decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
query = window.location.search.substring(1);
urlParams = {};
while (match = search.exec(query))
urlParams[decode(match[1])] = decode(match[2]);
})();
if(urlParams['notebook_name'] == null) {
urlParams['notebook_name'] = "sorry.ipynb"
}
var request = new XMLHttpRequest();
console.log(urlParams['notebook_name']);
request.open('GET', urlParams['notebook_name'], true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Success!
console.log("notebook loaded");
var data = JSON.parse(request.responseText);
var target = document.getElementById("notebook");
nbv_constructor(document, { katex: window.katex, prism: window.Prism, marked: window.marked, }).render(data, target);
} else {
// We reached our target server, but it returned an error
console.log("notebook not found error");
}
};
request.onerror = function() {
// There was a connection error of some sort
console.log("connection error");
};
request.send();
</script>
</body>
</html>