-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathoverview.html
107 lines (94 loc) · 3.01 KB
/
overview.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@celine</title>
<link rel="stylesheet" href="celine/cell.css" />
<link rel="stylesheet" href="libertine/libertine.css" />
<script type="module">
import { CelineModule, registerScriptReevaluationOnBlur } from 'https://esm.sh/jsr/@celine/[email protected]';
import * as Inputs from 'https://esm.run/@observablehq/[email protected]';
import * as htl from 'https://esm.run/[email protected]';
window.celine = CelineModule.usingNewObservableRuntimeAndModule(document);
window.library = celine.library;
window.Inputs = Inputs;
window.htl = htl;
registerScriptReevaluationOnBlur(document, 'echo');
</script>
</head>
<body>
<main>
<h1>@celine</h1>
<div class="authors">
<div class="author">
<span class="author-name"><a href="https://maxbo.me">Max Bo</a></span>
</div>
</div>
<section class="abstract">
<p>
<cite>@celine</cite> is suite of libraries.
</p>
</section>
<script type="module" id="landing">
const extractAbstract = (html) => {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const abstract = doc.querySelector('.abstract');
if (!abstract) return '';
return abstract.querySelector('p');
};
const extractInstallation = (html) => {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const importElement = doc.getElementById('import');
if (!importElement) return '';
return importElement;
};
celine.cell("landing", async () => {
const fetchText = async (url) => {
const response = await fetch(url);
return response.text();
};
const libraries = [
{
name: '@celine/celine',
content: await fetchText('index.html'),
imagePath: 'static/og.png'
},
{
name: '@celine/libertine',
content: await fetchText('libertine/index.html'),
imagePath: 'libertine/static/og.png'
},
{
name: '@celine/bibhtml',
content: await fetchText('bibhtml/index.html'),
imagePath: 'bibhtml/static/og.png'
}
].map(lib => ({
...lib,
description: extractAbstract(lib.content),
installation: extractInstallation(lib.content)
}));
return htl.html`
<div>
${libraries.map(lib => htl.html`
<div class="card">
<div>
<img src=${lib.imagePath} alt="${lib.name} preview" class="card-image">
</div>
<div>
<h2>${lib.name}</h2>
<p>${lib.description}</p>
<pre>${lib.installation}</pre>
</div>
</div>
`)}
</div>
`;
});
</script>
</main>
</body>
</html>