celine/cdn-starter.html at master · MaxwellBo/celine · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>@celine/celine CDN starter</title>

  <script type="module">
    import { CelineModule, registerScriptReevaluationOnBlur } from 'https://esm.sh/jsr/@celine/celine@9.2.0';
    import * as Inputs from 'https://esm.run/@observablehq/inputs@0.12.0';
    import * as htl from 'https://esm.run/htl@0.3.1';

    window.celine = CelineModule.usingNewObservableRuntimeAndModule(document);
    window.library = celine.library; /* @observablehq/stdlib */
    window.Inputs = Inputs;
    window.htl = htl;

    registerScriptReevaluationOnBlur(document, /*class=*/'echo');
  </script>

  <link rel="stylesheet" href="https://esm.sh/jsr/@celine/celine@9.2.0/cell.css" />

  <link rel="stylesheet" href="https://esm.sh/jsr/@celine/libertine@26.0.0/libertine.css" />
</head>
<body>
  <main>
    <header>
      <h1>@celine/celine CDN starter</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">
        Abstract
      </section>
    </header>
    <section>
      <h2><a href="#section-1" id="section-1"></a>Section header</h2>
      <p>
<script type="module" class="echo reflect" data-display="counter" contenteditable="true">
celine.cell("counter", async function* () {
  let i = 0;
  while (true) {
    await library.Promises.delay(1000);
    yield i++;
  }
});
</script>
      </p>
    </section>

<script data-display="viewof save" type="module" class="echo reflect" contenteditable="true">
celine.viewof("save", () => {
  return Inputs.button("Save", {
    reduce: async () => {
      const filename = prompt("Enter a filename", "index.html");
      const content = document.documentElement.outerHTML;
      const blob = new Blob([content], { type: 'text/html' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = filename;
      a.click();
    }
  });
});
</script>
  </main>
</body>
</html>