datenknoten/ngx-ssb-client

Experimentation into scuttlebut

ngx-ssb-client

secure scuttlebutt client using „modern“ web development technologies.

ngx-ssb-client is an approach to the secure scuttlebutt network using „modern“ technologies like angular, ngxs and semantic ui.

Installation

If you want to give it a try checkout the release page

Development setup

You want to dive into the internals? Please do so! ngx-ssb-client uses a loose interpretation of git flow, so feel free to submit pull requests, I'm more than happy to review and incorporate them!

If you have the luxury to be able to use nvm I highly recommend it to you to use it.

So to get started punsh these incantation into your shell and start hacking:

$ nvm use # only if you have nvm installed
$ npm i
$ npm run start

ngx-ssb-client's Issues

Detail view for an identity

There should be a detail view for an identity. It should have these features:

• Show the primary picture of the identity
• Show the primary name of the identity
• Show the latest description for the identity
• Show the public feed for the identity

Ability to follow an identity

Add support for the geo uri scheme

If we encounter a url with a Geo URI scheme we should display a map. There should also be an option to enable remote tiles for better display. A good library for displaying maps is leaflet.

messages loaded number gets really really high

I've got it running, but it's not displaying any messages... but it seems to be loading, with the "messages in feed" counter getting really high. It starts out about 180 which seems like a reasonable number to display, but after a while it gets up to like 13000 and still hasn't displayed anything yet. I'm not sure why this but possibly a factor is that I have posted over 10 thousand ssb messages?

Improve navigation

The navigation in its current state is a mess and it should be improved. Patchwork has this figured out quite good.

Format Source Code

At the moment source code looks not very well formated. This should be changed. Githubs Gist look very good: https://gist.github.com/enko/26eff8ca7e7528a708d384a6eb39f597

Ability to like a posting or remove a like from a posting

Add translation support

Integrate ngx-translate to make the application translateable.

Integrate mermaid

Integrate mermaid so we can have nice diagrams

https://mermaidjs.github.io/

Mention support for identities

It should be possible in the editor to type @ and get a list of idenities and become suggestions as you are typing.

Render Ticktack blog posts

Ticktack lets you compose longer blog posts. This client should at least render the content of these blog posts.

Add a reply button to a post

Add a reply button to a post, that opens the editor and has the post that was clicked on as a quote already inside.

Make the client run standalone

At the moment the client is dependend on patchwork. The client should spin it's own instance of the scuttlebot.

Improve performance of page switching

Currently when switching pages blocks the whole application, this should not be. Maybe I should use ssb-query to fetch the root elements then fetch the comments for these elements and then fetch the likes for all of this and not just use createFeedStream.

Support dat

Support dat for blobs

Provide some editing help

Provide a nice box below the editor what the editor can do, for example completion of stuff with C-SPC or dragging files into it!

The helper dialog should be hideable for people knowing how to do stuff.

Clicking on an identity in the sidebar does nothing

Click on an identity in the sidebar and nothing happens 😱.

The identity feed for this identity should be opened.

Implement gatherings

I should implement the gatherings message type.

A good visual component would be angular-calendar.

Mentions are not appended to the post

My post has no mentions for channels, but it should have them.

Mention support for channels

It should be possible in the editor to type # and get a list of channels and become suggestions as you are typing.

Blobs are not fetched

New blobs are not fetched by sbot.blob.get I think I need some fetching, but did not find any reasonable methods in patchcore or patchwork how this is done.

Ability to list all your conversations you are participating in.

You should have a feed where all the posts are listed where your own identity is participating.

Integrate MathJax

So we can have nice formulas

https://www.npmjs.com/package/mathjax

Render PDF blobs with pdf.js

Now that there is a modal that renders blobs (#37), the dialog should use pdfjs to render pdfs.

Make comments more obvious

At the moment you have to know, that if the number besides the small comment icon is greater than 0, that there are comments.

It should be made more obvious that there are comments on post.

Subscribed channels are missing from the sidebar

The subscribed channels are missing from the sidebar.

Remove the ip packet from the dependency tree

ERROR in ./node_modules/ip/lib/ip.js
Module not found: Error: Can't resolve 'os' in '/Users/masukomi/workspace/scuttlebutt/ngx-ssb-client/node_modules/ip/lib'
ℹ ｢wdm｣: Failed to compile.

occurred when running npm run start (after running npm i )

most recent commit is:

commit b9f00926547d5dac9b48ec2a0f743aaf2e6e1bd4
Author: Tim Schumacher <[email protected]>
Date:   Sun May 6 22:49:35 2018 +0200

    feat: introduce a feedenderror

holler if there's more debugging you'd like. I'm not a node dev so not sure what the standard techniques are but can follow geeky instructions.

build error

I got the following error when attempting to npm run build on a fresh install, at commit
003400a with [email protected] and [email protected]

$ npm run build | x
 10% building modules 0/1 modules 1 active â¦me/dominic/c/ngx-ssb-clie 10% building modules 1/2 modules 1 active â¦minic/c/ngx-ssb-client/sr 10% building modules 2/3 modules 1 active â¦de_modules/semantic-ui-cs 10% building modules 3/4 modules 1 active â¦me/dominic/c/ngx-ssb-clie 10% building modules 3/5 modules 2 active â¦minic/c/ngx-ssb-client/sr 10% building modules 4/5 modules 1 active â¦minic/c/ngx-ssb-client/sr 10% building modules 5/6 modules 1 active â¦dominic/c/ngx-ssb-client/ 10% building modules 6/7 modules 1 active â¦de_modules/semantic-ui-cs 10% building modules 7/8 modules 1 active â¦_modules/tui-editor/dist/ 10% building modules 8/9 modules 1 active â¦tui-editor/dist/tui-edito 11% building modules 9/10 modules 1 active â¦e_modules/codemirror/lib 11% building modules 10/11 modules 1 active â¦_modules/highlight.js/s 11% building modules 11/12 modules 1 active â¦de_modules/semantic-ui- 11% building modules 11/13 modules 2 active â¦dominic/c/ngx-ssb-clien 11% building modules 11/14 modules 3 active â¦_modules/tui-editor/dis 11% building modules 11/15 modules 4 active â¦tui-editor/dist/tui-edi 11% building modules 11/16 modules 5 active â¦e_modules/codemirror/li 11% building modules 11/17 modules 6 active â¦_modules/highlight.js/s 11% building modules 11/18 modules 7 active â¦e_modules/style-loader/                                                         11% building modules 12/18 modules 6 active â¦e_modules/style-loader/                                                         11% building modules 13/18 modules 5 active â¦e_modules/style-loader/                                                         11% building modules 14/18 modules 4 active â¦e_modules/style-loader/                                                         11% building modules 15/18 modules 3 active â¦_modules/tui-editor/dis                                                         11% building modules 16/18 modules 2 active â¦dominic/c/ngx-ssb-clien                                                         11% building modules 16/19 modules 3 active â¦t/node_modules/style-lo                                                         12% building modules 17/19 modules 2 active â¦dominic/c/ngx-ssb-clien                                                         12% building modules 18/19 modules 1 active â¦de_modules/semantic-ui-                                                         92% after chunk asset optimization SourceMapDevToolPlugin main.js gen                                                         92% after chunk asset optimization SourceMapDevToolPlugin polyfills.j                                                         92% after chunk asset optimization SourceMapDevToolPlugin runtime.js                                                          92% after chunk asset optimization SourceMapDevToolPlugin styles.js g                                                         92% after chunk asset optimization SourceMapDevToolPlugin resolve sou Q 92% after chunk asset optimization SourceMapDevToolPlugin main.js att 92% after chunk asset optimization SourceMapDevToolPlugin polyfills.j 92% after chunk asset optimization SourceMapDevToolPlugin runtime.js  92% after chunk asset optimization SourceMapDevToolPlugin styles.js a                                                          
ERROR in node_modules/@types/node/index.d.ts(167,14): error TS2687: All declarations of 'observable' must have identical modifiers.
node_modules/rxjs/internal/symbol/observable.d.ts(4,9): error TS2687: All declarations of 'observable' must have identical modifiers.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `ng build --base-href . && npm run electron:tsc`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/dominic/.npm/_logs/2018-06-03T23_53_09_527Z-debug.log

Ability to follow a channel

Move statistics in the menu bar to an extra page

mix reported on scuttlebutt, that the number in the top right is very confusing and the reload button does not help either.

I will move the number to an extra page which shows a bit more statistics.

Find a better name

I want to give this project a better name with a nice backstorry. It should have something to do with space, as I'm quite fond of space, as space is the place.

From "%aBqsa9h7uSfKdz4hUnodsLYLgfqJS5+dGCLJNmc4cPs=.sha256":

So what do I want?

I fancy space and space exploration and I envision my client as a vehicle or tool to visit either your neighbours, remote friends on different planets, but also strange and alien people in another galaxy.

So if you have any ideas and best a story behind the name, that would be very appriciated!

Show subscribed channels in the sidebar

The sidebar on the right should show all subscribed channels as the first step.

For this I need to parse channel packet types and track when an identity joined and parted a channel. I should use ssb-ref to normalize channel names and also inspire myself to how to implement this feature by patchcore

Ablity to save posts as drafts

When writing a longer post, it would be nice to save a message into local storage as draft, so you can continue later on and dont have to skip the message.

Integrate flowchart.js

It would be nice to integrate flowcharts with flowchart.js.

Enable completion with prefix characters

At the moment you have to press ctrl+space to trigger the auto completion and then you get all the types (emojis, identities and blobs). It should be possible to use the prefix characters to directly summoning the mention dialog and filtered by type.

@ for identity
& for blob
: for emoji

Reduce image size when posting content

When a user drags an image into a post the user should get a message that asks him if he wants to reduce the image size by reducing the size and adding more compression.

I think the dialog should have two sliders where the user can adjust the values of size and compression, a preview of the image and a field that indicates the size in kilobytes.

A good library for doing this in javascript land is sharp:

https://www.npmjs.com/package/sharp

I have used it in a project and it worked pretty well.

Modal for blobs

I want to have a modal view that displays blobs. At first only for images but later one could integrate mozillas pdf.js and render pdfs directly in the client.

Create blobs

It should be possible in the editor to generate blobs.

Support hot keys

We should support some hot keys, like opening the post editor and moving from posting to posting.

There are two research tasks here:

• Get to know what shortcuts would be good a good fit.
• Research what library would be good for that. Mousetrap was/is good, I do not know if it is still a viable solution.

Detailview for a posting

There should be a detail view for a posting. This are the sub tasks for the detail view:

• Show the Root Posting
• Show comments of the posting in flat view
• Allow to post a comment to the posting

Integrate ssb-names

At the moment I use a rather naive approach to get the canonical name and image of an identity. A better way would be ssb-names which weights the names and images.

For now I cannot use this package, as I would have to spin up my own sbot instance and that would collide with patchwork. I need to get to the point where I can dog food my own client and do not depend on patchwork, so I can spin up my own sbot and add the plugin.

Refs ssbc/ssb-names#1