Skip to content

Commit 33b2463

Browse files
retogretog
committed
Added examples
Examples are taken from https://github.com/mixmix/ssb-client-basic
1 parent d6f9933 commit 33b2463

File tree

11 files changed

+675
-8
lines changed

11 files changed

+675
-8
lines changed

‎site/async/get-avatar.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
const pull = window.pull
2+
const isBlob = (s) => s.startsWith('&')
3+
4+
export default function (server) {
5+
if (!server) throw new Error('day-posts helper requires a server!')
6+
if (!server.query) throw new Error('day-posts helper requires a server with the ssb-query installed!')
7+
8+
return function getAvatar (feedId, cb) {
9+
// NOTE the data is coming in from the dayPosts source and has been mapped into the form { author, timestamp, text, root }
10+
11+
// cb is a function provided to us by pull-paramap which we use to pass results out once we're done and to pass things on to the next part of the stream (the collect here)
12+
13+
const opts = {
14+
reverse: true,
15+
query: [
16+
{
17+
$filter: {
18+
value: {
19+
author: feedId,
20+
content: {
21+
type: 'about',
22+
about: feedId,
23+
image: { $truthy: true }
24+
},
25+
timestamp: { $gt: 0 } // a hack that forces ordering by timestamp
26+
}
27+
}
28+
},
29+
{
30+
$map: {
31+
image: ['value', 'content', 'image']
32+
}
33+
}
34+
]
35+
}
36+
37+
pull(
38+
server.query.read(opts),
39+
// hooray the format for image about is non-standardised... could be image.link or image that the blob link is stored under
40+
pull.map(data => typeof data.image === 'string'
41+
? data.image
42+
: data.image.link
43+
),
44+
pull.filter(link => isBlob(link)),
45+
pull.take(1),
46+
pull.collect((err, results) => {
47+
if (err) {
48+
cb(err)
49+
return
50+
}
51+
52+
if (!results || !results.length) cb(null, null)
53+
else cb(null, results[0])
54+
})
55+
)
56+
}
57+
}

‎site/async/get-name.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
const pull = window.pull
2+
3+
export default function (server) {
4+
if (!server) throw new Error('day-posts helper requires a server!')
5+
if (!server.query) throw new Error('day-posts helper requires a server with the ssb-query installed!')
6+
7+
return function getAuthorName (feedId, cb) {
8+
// NOTE the data is coming in from the dayPosts source and has been mapped into the form { author, timestamp, text, root }
9+
10+
// cb is a function provided to us by pull-paramap which we use to pass results out once we're done and to pass things on to the next part of the stream (the collect here)
11+
12+
const opts = {
13+
limit: 1,
14+
reverse: true,
15+
query: [
16+
{
17+
$filter: {
18+
value: {
19+
author: feedId,
20+
content: {
21+
type: 'about',
22+
about: feedId,
23+
name: { $is: 'string' } // there's a name string present
24+
}
25+
},
26+
timestamp: { $gt: 0 } // a hack that forces ordering by timestamp
27+
}
28+
},
29+
{
30+
$map: {
31+
name: ['value', 'content', 'name']
32+
}
33+
}
34+
]
35+
}
36+
37+
pull(
38+
server.query.read(opts),
39+
pull.collect((err, results) => {
40+
if (err) {
41+
cb(err)
42+
return
43+
}
44+
45+
if (!results || !results.length) cb(null, feedId)
46+
else cb(null, results[0].name)
47+
})
48+
)
49+
}
50+
}

‎site/index.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
:not(.waited) .after_wait {
2+
display: none
3+
}
4+
.waited .after_wait {
5+
display: block
6+
}

‎site/page.html‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,7 @@
22
<html>
33
<head>
44
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
5-
<style>
6-
:not(.waited) .after_wait {
7-
display: none
8-
}
9-
.waited .after_wait {
10-
display: block
11-
}
12-
</style>
5+
<link rel="stylesheet" href="./index.css">
136
</head>
147
<body>
158
<p>RPC connection with SSB via native messaging.</p>

‎site/page00.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
5+
<link rel="stylesheet" href="./index.css">
6+
</head>
7+
<body>
8+
<h1>Scuttle Shell Browser example page</h1>
9+
<p>This is an browser equivalent of
10+
<a href="https://github.com/mixmix/ssb-client-basic#v00---whoami">https://github.com/mixmix/ssb-client-basic#v00---whoami</a></p>
11+
<div id="output">
12+
<div style="background-color: yellow;" class="after_wait">
13+
This Page needs to access Scuttlebut. Make sure that Scuttle Shell Browser is installed and that "SSB access" is
14+
switched on for this page.
15+
</div>
16+
</div>
17+
<script src="connect-ssb.js"></script>
18+
<script>
19+
const outElem = document.getElementById('output')
20+
21+
const opts = {
22+
limit: 100,
23+
reverse: true
24+
}
25+
connectSsb().then(ssb => {
26+
outElem.innerHTML = ''
27+
ssb.whoami((err, keys) => {
28+
outElem.innerHTML += 'whoami details: <pre>' + JSON.stringify(keys, undefined, 2)+'</pre>'
29+
})
30+
})
31+
setTimeout(() => document.body.classList.add('waited'), 1000)
32+
</script>
33+
</body>
34+
</html>

‎site/page01.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
5+
<link rel="stylesheet" href="./index.css">
6+
</head>
7+
<body>
8+
<h2>Scuttle Shell Browser example</h2>
9+
<h1>A pull-stream query!</h1>
10+
<p>This is an browser equivalent of
11+
<a href="https://github.com/mixmix/ssb-client-basic#v01---a-pull-stream-query">https://github.com/mixmix/ssb-client-basic#v01---a-pull-stream-query</a></p>
12+
<div id="output">
13+
<div style="background-color: yellow;" class="after_wait">
14+
This Page needs to access Scuttlebut. Make sure that Scuttle Shell Browser is installed and that "SSB access" is
15+
switched on for this page.
16+
</div>
17+
</div>
18+
<script src="connect-ssb.js"></script>
19+
<script>
20+
const outElem = document.getElementById('output')
21+
22+
const opts = {
23+
limit: 100,
24+
reverse: true
25+
}
26+
connectSsb().then(server => {
27+
outElem.innerHTML = ''
28+
const opts = {
29+
limit: 100,
30+
reverse: true
31+
}
32+
33+
function prettyPrint (msg) {
34+
outElem.innerHTML += `<pre>${JSON.stringify(msg, null, 2)}</pre>`
35+
outElem.innerHTML += '<hr>'
36+
// this just print the full object out as a string that's been nicely indented
37+
// with each level of nesting
38+
}
39+
40+
pull(
41+
server.query.read(opts),
42+
pull.filter(msg => msg.value.content.type === 'post'),
43+
pull.collect(onDone)
44+
)
45+
46+
function onDone (err, msgs) {
47+
if (err) {
48+
console.error(err)
49+
server.close()
50+
return
51+
}
52+
53+
msgs.forEach(msg => {
54+
prettyPrint(msg)
55+
})
56+
}
57+
58+
})
59+
setTimeout(() => document.body.classList.add('waited'), 1000)
60+
</script>
61+
</body>
62+
</html>

‎site/page02.html‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
5+
<link rel="stylesheet" href="./index.css">
6+
</head>
7+
<body>
8+
<h2>Scuttle Shell Browser example</h2>
9+
<h1>v02 - todays post</h1>
10+
<p>This is an browser equivalent of
11+
<a href="https://github.com/mixmix/ssb-client-basic#v02---todays-post">https://github.com/mixmix/ssb-client-basic#v02---todays-post</a></p>
12+
<div id="output">
13+
<div style="background-color: yellow;" class="after_wait">
14+
This Page needs to access Scuttlebut. Make sure that Scuttle Shell Browser is installed and that "SSB access" is
15+
switched on for this page.
16+
</div>
17+
</div>
18+
<script src="connect-ssb.js"></script>
19+
<script>
20+
const outElem = document.getElementById('output')
21+
22+
const opts = {
23+
limit: 100,
24+
reverse: true
25+
}
26+
connectSsb().then(server => {
27+
outElem.innerHTML = ''
28+
29+
function prettyPrint (msg) {
30+
outElem.innerHTML += `<pre>${JSON.stringify(msg, null, 2)}</pre>`
31+
outElem.innerHTML += '<hr>'
32+
// this just print the full object out as a string that's been nicely indented
33+
// with each level of nesting
34+
}
35+
36+
const today = new Date()
37+
const opts = {
38+
reverse: true,
39+
query: [
40+
{
41+
$filter: {
42+
value: {
43+
content: { type: 'post' },
44+
timestamp: {
45+
$gte: Number(startOfDay(today)),
46+
$lt: Number(startOfDay(today, +1))
47+
}
48+
}
49+
}
50+
},
51+
{
52+
$map: {
53+
author: ['value', 'author'],
54+
timestamp: ['value', 'timestamp'],
55+
text: ['value', 'content', 'text'],
56+
root: ['value', 'content', 'root'] // the root messages of a thread, this is present if this post is a reply to another message
57+
}
58+
}
59+
]
60+
}
61+
62+
pull(
63+
server.query.read(opts),
64+
pull.collect(onDone)
65+
)
66+
67+
function onDone (err, msgs) {
68+
if (err) {
69+
console.error('oh noes', err)
70+
return
71+
}
72+
73+
msgs.forEach(msg => {
74+
prettyPrint(msg)
75+
76+
})
77+
}
78+
79+
})
80+
function startOfDay (time = new Date(), dayOffset = 0) {
81+
// dayOffset = 0 means if this argument is not supplied to set it to default to 0
82+
83+
const year = time.getFullYear()
84+
const month = time.getMonth()
85+
const date = time.getDate() + dayOffset
86+
return new Date(year, month, date, 0, 0, 0) // 0 hours, 0 minutes, 0 secords
87+
}
88+
89+
setTimeout(() => document.body.classList.add('waited'), 1000)
90+
</script>
91+
</body>
92+
</html>

0 commit comments

Comments
 (0)