-
Notifications
You must be signed in to change notification settings - Fork 4
/
ipfs.html
125 lines (116 loc) · 4.17 KB
/
ipfs.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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="description" content="An Experimental Web Based User Agent" />
<meta name="theme-color" content="wheat" />
<title>Capyloon - Reclaim Your Web! - IPFS Support</title>
<link rel="icon" href="images/logo_64.png" />
<link rel="stylesheet" href="style.css" />
<script src="main.js" type="module"></script>
<script>
document.addEventListener(
"DOMContentLoaded",
() => {
let ipfsContent = document.getElementById("ipfs-content");
ipfsContent.value = "<html><body>Hello IPFS!</body></html>";
let ipfsName = document.getElementById("ipfs-name");
ipfsName.value = "my_file.html";
document.getElementById("ipfs-publish").onclick = () => {
if (!window.WebActivity) {
alert(
"You need to load tha page in Capyloon to publish to IPFS!"
);
return;
}
let blob = new Blob([ipfsContent.value], { type: "text/html" });
let activity = new WebActivity("publish-to-ipfs", {
blob,
name: ipfsName.value,
});
activity.start();
};
},
{ once: true }
);
</script>
</head>
<body>
<div id="top">
<a class="header" href="/">
<div class="title">Capyloon</div>
<div class="subtitle">Reclaim Your Web!</div>
</a>
<div class="filler"></div>
<a href="https://matrix.to/#/#capyloon:matrix.org" title="Chat On Matrix">
<img
width="32px"
alt="Chat On Matrix"
src="images/matrix-favicon.png"
/>
</a>
<a href="https://github.com/capyloon" title="Code On Github">
<img
width="32px"
alt="Code On Github"
src="images/GitHub-Mark-64px.png"
/>
</a>
<a href="https://twitter.com/capyloon" title="Follow Us On Twitter">
<img
width="32px"
alt="Follow Us On Twitter"
src="images/2021 Twitter logo - black.png"
/>
</a>
</div>
<div id="content">
<h1>IPFS In Capyloon</h1>
<h3 id="protocol">Protocol support</h3>
<p>
Loading content from ipfs:// and ipns:// protocols is supported. This
currently relies on http gateways, but will switch to a native ipfs
stack in the future.
</p>
<h3 id="publishing">Publishing to IPFS</h3>
<p>
You can easily publish files from the Files application. Likewise, any
published file url can be shared through a QR Code, copied to the
clipboard or shared as a url with other applications.
</p>
<h3 id="create">Creating Content</h3>
<p>
Because IPFS is using content based addressing instead of names, it's
possible to create content and publish it directly. This is exposed in
Capyloon to any web page through the "publish-to-ipfs" Web Activity:
</p>
<pre>
// Create the content to publish as a Blob.
let blob = new Blob(["<html><body>Hello IPFS!</body></html>"], { type: "text/html" });
// Choose a name.
let name = "my_first_ipfs_doc.html";
// Start the activity.
let activity = new WebActivity("publish-to-ipfs", { name, blob});
activity.start();</pre>
<h3 id="publish">IPFS Playground</h3>
<div class="ipfs-playground">
<label for="ipfs-name">File name:</label>
<input id="ipfs-name" placeholder="file name" />
<label for="ipfs-content">Content:</label>
<textarea id="ipfs-content" rows="10"></textarea>
<button id="ipfs-publish">Publish</button>
</div>
<footer>
<div>© 2023 Capyloon LLC.</div>
<div id="privacy-link" tabindex="0">Privacy Policy</div>
</footer>
<div id="privacy-policy" tabindex="0">
We don't track you and use analytics by
<a href="https://plausible.io/" target="_blank" rel="noopener"
>Plausible</a
>.
</div>
</div>
</body>
</html>