xu60/index.html at main · rfinz/xu60 · 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
73
74
75
76
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.7/dist/htmx.min.js"></script>
    <script src="https://unpkg.com/hyperscript.org@0.9.14"></script>
  </head>
  <body>
    <!-- Whole Document Templates -->
    <template id="xu60-version">
      <slot></slot>
    </template>
    <template id="xu60-parallel">
      <slot></slot>
    </template>

    <!-- Document Fragment Templates -->
    <template id="xu60-change">
      <slot name="pre-content"></slot>
      <slot></slot>
      <slot name="post-content"></slot>
    </template>
    <template id="xu60-note">
      <slot name="pre-content"></slot>
      <slot></slot>
      <slot name="post-content"></slot>
    </template>
    <template id="xu60-quote">
      <slot name="pre-content"></slot>
      <slot></slot>
      <slot name="post-content"></slot>
    </template>

    <script>
     let templates = document.getElementsByTagName('template');
     for(let t = 0; t<templates.length; t++){
         let componentName = templates[t].id;
         customElements.define(
             componentName,
             class extends HTMLElement {
                 constructor() {
                     super();
                     let template = document.getElementById(componentName);
                     let templateContent = template.content;
                     const shadowRoot = this.attachShadow({ mode: "open" });
                     shadowRoot.appendChild(document.importNode(templateContent, true));
                 }
             },
         );
     };
    </script>

    <div hx-target="find <pre.output/>"
         hx-swap="innerHTML"
         class="ctainer"
         data-xu60-name="README.md"
    >
      <pre _="init
              set :x to 0
              set :container to the closest parent <div.ctainer/>
              set name to :container's @data-xu60-name
              fetch `/versions/$name` then set :versions to result.trim().split('\n') then
              fetch `/object/${:versions[0]}` then put the result into me
              end
              on mutation of childList increment :x then
              set :container's @hx-get to `/object/${:versions[:x]}` then
              put :container into container
              js(container) htmx.process(container) end
              if :x >= (:versions.length - 1) then set :x to -1"
           class="output">

      </pre>
    </div>
  </body>
</html>