search

scenaristeur / shighl

S-olid HIGH L-evel API for https://github.com/scenaristeur/solidarity interacting with Solid
https://scenaristeur.github.io/shighl/
MIT License
9 stars 1 forks source link

readme

////////////////////

What is a Shighl ?

Qu'est-ce que Shighl ?

////////////////////

Shighl

Why High Level ? Because Shighl is based on other libs like solid-auth-client, mostly @solid/query-ldflex, (solid-file-client, tripledoc in the next future)... to give you the most common used functionnalities to deal with session, pod, chat, inbox... using the Solid Project. If you have any question, feel free to ask on the Solid Community Forum

Examples

Usage

Shighl can be integrated in any gh-page, POD or static WebPage !

Browser

use cdn.jsdelivr.net

<script src="https://cdn.jsdelivr.net/gh/scenaristeur/shighl@master/dist/vendor/solid-auth-client.bundle.js"> </script>
<script src="https://cdn.jsdelivr.net/gh/scenaristeur/shighl@master/dist/vendor/solid-query-ldflex.bundle.js"> </script>
<script src="https://cdn.jsdelivr.net/gh/scenaristeur/shighl@master/dist/window/shighl.bundle.js"> </script>

or shighl.bundle.js, solid-query-ldflex.bundle.js, solid-auth-client.bundle.js that you can find in the /dist/ folder.

<script src="https://github.com/scenaristeur/shighl/raw/master/vendor/solid-auth-client.bundle.js"></script>
<script src="https://github.com/scenaristeur/shighl/raw/master/vendor/solid-query-ldflex.bundle.js"></script>
<script src="https://github.com/scenaristeur/shighl/raw/master/window/shighl.bundle.js"></script>

Es6 module / nodejs

install with npm install --save scenaristeur/shighl and import with

import  Shighl  from 'shighl'

Node server

not tested yet, but there is a node version in the dist folder

Login Popup

You will probably also need to copy the dist/dist-popup folder that provides you the better way to connect to a Solid Pod

Create a Shighl Object

const sh = new Shighl()
sh.test() // optional to verify that the lib is loaded

then you must create Objects from Shighl submodules :

ShighlSession

Often, you will need to login to your POD. Shighl.session is a simple way to connect to a POD, but you can use the basic solid-auth-client too if you prefer.

Shighl.session example

const sh = new Shighl()
let session = new sh.session()

function mycallback(webId){
  console.log("WebId: ",webId)
  if (webId != null){
    console.log("logged with ",webId)
  }else{
  console.log("not logged")
  session.login()
  }
}

await session.track(mycallback)

ShighlPod

Shighl.pod allows you to simply read pods informations.

Shighl.pod example

let sh = new Shighl()
let pod = new sh.pod()
pod.webId = "https://spoggy.solid.community/profile/card#me" // set the webId of the pod you want to read
let name = await pod.name
let photo = await pod.photo
let role = await pod.role
let organization = await pod.organization
let friends = await pod.friends
let pti = await pod.pti
let storage = await pod.storage

console.log("Name: ", name)
console.log("Photo: ", photo)
console.log("Role:", role)
console.log("Organization:", organization)
console.log("Friends: ", friends)
console.log("publicTypeIndex & instances: ", pti)
console.log("Storage: ", storage)

//Loop through friends
friends.forEach(async function(f, i) {
  console.log(f.webId)
  let f_pod = new sh.pod()
  f_pod.webId = f.webId
  let f_name = await f_pod.name
  let f_role = await f_pod.role
  let f_organization = await f_pod.organization
  console.log("--"+f_name+" has role "+f_role+" in "+f_organization)
});

ShighlChat

Shighl.chat Calendar example Shighl.chat Infinite Scroll example

let pti, chat, webId, user_pod
let sh = new Shighl()

//chat instances
let pod = new sh.pod()
pod.webId = "https://solidarity.inrupt.net/profile/card#me" // set the webId of the POD you want to retrieve the chat channels
pti = await pod.pti // get the publicTypeIndex of that pod
console.log(pti.instances)

// select the first instance with shortClass="LongChat" available in the publictypeIndex
let instance = pti.instances[0]

// create a chat object & initialize it
    chat = new sh.chat()
    chat.instance = instance
    await chat.init
    chat.subscribe = on_new_message // subscribe to chat change that launch on_new_message() callback function

 // get chat messages of the last day.

 let messages = await chat.messages

 /* get each message properties and you are free to display them as you want.
 use a calendar or a infinite scroll
 to display older messages
 (see examples above)
*/

 for(const message of messages){
    console.log(message.makername+" WROTE "+message.content+" AT "+message.date)
 }

// Then to interact you will need to connect
let session = new sh.session()
  await session.track(mycallback)
  async function mycallback(_webId){
    webId = _webId
    if (webId != null){
      user_pod = new sh.pod()
      user_pod.webId = webId
      }else{
      session.login()
    }
  }

// ... //

//so you can easily send a chat message to the chat previously initialised by
let mess = {content: content, webId: webId, postType: postType, replyTo: replyTo}
chat.message = mess
// and eventually notiy user inbox of a reply/comment on his post (see examples)

// you can create a new channel with
let params = {user_pod: user_pod , url: chat_create_input.value, discoverable: public_check.checked, shortClass: "LongChat"}
console.log(params)
user_pod.pti_new = params

ShighlInbox

Shighl.inbox example

to be able to receive message, you must grant "Authenticated Agent" to "Submitter"

Authenticated Agent Inbox Submitter

const sh = new Shighl()
let pod = new sh.pod()
let session = new sh.session() // retrieve webId as above

let user_inbox = {}
let inbox = ""

pod.webId = webId // obtained by session callback (see example)
inbox = await pod.inbox

user_inbox = new sh.inbox()
//
inbox_url = inbox // set & get document.getElementById("inbox_input").value in example

let messages  = await user_inbox.getMessages(inbox_url)

messages.forEach(function(m){
  let text = [ m.senderName, m.senderImg, m.sender, m.label, m.dateSent, m.text,  m.url, m.parentItem].join(' || ')
  console.log (text)
})

// then you can delete a message with
await user_inbox.delete(m_url)
...
// or send a message to a friend's inbox
async function send(){
  let m = {}
  m.content = document.getElementById("messageContent").value
  m.title = document.getElementById("title").value
  m.sender = pod.webId
  if (document.getElementById("parentItem").value.length > 0){
    m.parentItem = document.getElementById("parentItem").value
  }
  let w =   document.getElementById("writePan").getAttribute("webId")
  let p = new sh.pod()
  p.webId = w
  p_inbox = new sh.inbox(document.getElementById("to").value)
  p_inbox.message = m

}

pod.name for getting the name of a pod

const sh = new Shighl()
let pod = new sh.pod()
pod.webId = "https://[podname].[provider]/profile/card#me"
let name = await pod.name;
console.log(name)
let chat = new sh.chat()
chat.instance = [instance]
let chat_details = await chat.init
console.log(chat_details)

plural :

singulier: _year, _month, _day represent the "cursor" where you want to get the messages.

So the example above gives you the messages of the 02/17/2020 or 17/02/2020 in french. To get the message of the day before, just set the _day of your chat object to "16" with something like this

chat._day = "16"

and get the messages of the day as we did before with chat.messages

TODO infinite scroll : https://www.youtube.com/watch?v=hSsdhUG9rBI https://googlechrome.github.io/samples/intersectionobserver/