-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
85 lines (70 loc) · 2.63 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
<!DOCTYPE html>
<html>
<head>
<title>Hibou</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<!-- Style sheet -->
<link rel="stylesheet" href="./style.css">
<!-- `markdown-it` module transforms markdown into html -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/markdown-it.min.js"></script>
<!-- `vega-element` define `<vega-element>` tag into html -->
<script type="module" src="/scripts/vega-element.js"></script>
<script type="module">
// `vega-element` define `<vega-element>` tag into html
import * as vegaElement from './scripts/vega-element.js';
import { routeExecuter } from './scripts/route-executer.js';
const NotFoundContent = (stuff) => `
## Hum
Sorry ${stuff} does not exists
`
const routes = [
{ path: '/', func: async () => ({ content: await (await fetch('./README.md')).text(), header: 'Readme' }) },
{ path: '/readme', func: async () => ({ content: await (await fetch('./README.md')).text() }) },
{ path: '/tutorial', func: async () => ({content: await (await fetch('./pages/tutorial.md')).text()}) },
{ path: '/popular', func: async () => ({content: await (await fetch('./pages/popular.md')).text()}) },
{ path: '/gist/:id', func: async ({ id }) => {
const response = await fetch(`https://api.github.com/gists/${id}`)
if (!response.ok) return { content: NotFoundContent(`gist ${id}`), header: 'Not found' };
const gist = await response.json();
if (gist.files['index.md'] === undefined) return { content: NotFoundContent(`index.md file of gist ${id}`), header: 'Not found' }
return {
content: gist.files['index.md'].content,
header:`
<a href=${gist.owner.html_url}>${gist.owner.login}</a>'s gist
<a href=${gist.html_url}>${gist.id}</a>
`
};
},
}
];
async function main() {
// 1/ get content
const { content, header } = await routeExecuter(
routes,
location.hash.slice(1),
() => ({ content: NotFoundContent(location.hash.slice(1)), header: 'Not found' })
)
// 2/ Transform `content` into html:
const htmlContent = markdownit({
html: true,
linkify: true,
typographer: true
}).render(content)
// 3/ Inject `htmlContent` into container
document.getElementById("container").innerHTML = htmlContent;
document.getElementById("header__title").innerHTML = header || ''
}
main();
</script>
</head>
<body>
<div id="header">
<span id="header__title"></span>
<span id="header__logo" onclick="window.open('https://rhuille.github.io/hibou', '_self')">
🦉
</span>
</div>
<div id="container"></div>
</body>
</html>