aboutsummaryrefslogtreecommitdiff
path: root/examples/web-demo/index.html
blob: 62d9dd34ff3d1cdc1be55dd56027a7d654d494e2 (plain)
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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Encoding for Robust Immutable Storage</title>
    <link rel="stylesheet" href="style.css">
    <script src="index.js"></script>
  </head>
  <body>
    <h1>Encoding for Robust Immutable Storage (ERIS)</h1>
    <div>

      <div id="notes">
        <p>This is a demo of ERIS - An Encoding for Robust Immutable Storage.</p>

        <p>ERIS encodes any content into uniformly sized (4kB) encrypted blocks. The original content can only be decoded with the read capability (an URN which contains the encryption key). </p>

      </div>

      <main>
        <div id="input">
          <h2>Input</h2>

          <p>Enter some text and click Encode to get the URN that uniquely identifies the text.</p>

          <textarea id="input-textarea"></textarea>

          <br> <br>

          <details>

            <summary>Sample Data</summary>

            <br>

            <button id="input-load-alice-in-wonderland">
              Load Alice in Wonderland
            </button>

            <h3>RDF</h3>
            <p>RDF data is normalized before it is encoded. This means that the same content always gets the same identifier (URN).</p><p>Load some sample RDF data, encode it and then decode it to see how the normalized form looks (it's not pretty).</p>

            <button id="input-load-sample-vocabulary">
              Load sample vocabulary
            </button>

            <button id="input-load-sample-actor">
              Load sample ActivityPub Actor (JSON-LD)
            </button>
          </details>

        </div>

        <div id="controls">
          <button id="controls-encode">Encode →</button>
          <details>
            <summary>input format</summary>
            <select id="controls-input-type" name="input-type" selected="plain-text">
              <option value="text/plain">plain text</option>
              <option value="text/turtle">RDF Turtle</option>
              <option value="application/ld+json">JSON-LD</option>
            </select>
          </details>
          <br>
          <button id="controls-decode">← Decode</button>
          <br>
          <br>
          <button id="controls-verify">Verify</button>

          <br>
          <pre id="controls-error"></pre>
          <pre id="controls-success"></pre>
        </div>

        <div id="encoded">
          <h2>Encoded</h2>

          <h3>Read capability</h3>
          <p>The read capability allows content to be read</p>
          <input id="encoded-eris-read-cap" type="url"></input>

          <h3>Verification capability</h3>
          <p>The verification capability allows all blocks to be verified for integrity, but does not allow the content to be read</p>
          <input id="encoded-eris-verification-cap" type="url"></input>

          <div id="blocks">
            <h3>Blocks</h3>
            <div id="block-container">
            </div>
          </div>

        </div>

        <div class="break">
        </div>


      </main>

      <h2>About</h2>


      <p>For more information on how ERIS works see TODO.</p>

      <p>There are two tricks used to encode RDF see TODO for more information.</p>

      <p>This demo and the JavaScript (and Guile) implementations are free software. See the <a href="https://gitlab.com/openengiadina/js-eris">Git repository</a>.

      <p>ERIS is developed as part of the <a href="https://openengiadina.net/">openEngiadina</a> project.</p>

    </div>

  </body>
</html>