Support for Ghost

[julien51]

Ghost recently introduced a new version, 3.0 which includes the ability for the blogger to set up a membership.

Their integration currently support only Stripe. We're looking for someone to build an integration with Unlock!

User Stories:

• As a Ghost blogger, I want to be able to set up one or more locks on my site so that only the people with valid keys are able to view the content that I am publishing.
• As the reader of a Ghost blog, I want to be able to purchase an access key to one or the locks that the blogger has put on their site
• As a reader of a Ghost blog, once I have purchased a key, I want to be able to read the full content of the blog.

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

This issue now has a funding of 500.0 DAI (500.00 USD @ $1.0/DAI) attached to it.

• If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
  • Want to chip in? Add your own contribution here.
  • Questions? Checkout Gitcoin Help or the Gitcoin Slack
  • $78,295.26 more funded OSS Work available on the Gitcoin Issue Explorer

[julien51]

Hello @iamonuwa! Please, let us know if you have any question! I am sure there are many...

The goal is to provide an integration on par with the features that Ghost offers through their Stripe integration!

[iamonuwa]

Hello @iamonuwa! Please, let us know if you have any question! I am sure there are many...

The goal is to provide an integration on par with the features that Ghost offers through their Stripe integration!

Will do just that. Still have your telegram username

[gitcoinbot]

@iamonuwa Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[iamonuwa]

@gitcoinbot @julien51 work is in progress, sending in a PR tonight

[julien51]

@iamonuwa Any progress?

[zoek1]

@julien51 I see this taking time, could I work on this? I could report daily my progress to unlock quickly any stopper obviously if @iamonuwa it's ok with this. 😀

[julien51]

@zoek1 Yes! @iamonuwa Please, post details about progress by today's end of day!

[julien51]

@zoek1 Do you mind applying on Gitcoin please ?

[zoek1]

I have an issue applying on gitcoin because I don't see the button "start work" or "express interest", this is related to https://github.com/gitcoinco/web/issues/5437. In the meantime, I can publish my proposal to solve the task, if everything is ok I can start to develop. What do you think? @julien51

[julien51]

@zoek1 This should be good now because I removed @iamonuwa .

[gitcoinbot]

Issue Status: 1. Open 2. Cancelled

---

Work has been started.

These users each claimed they can complete the work by 4 months ago. Please review their action plans below:

1) zoek1 has been approved to start work.

I'm doing research how stripe and patreon are integrated in ghost. The first deliverable will be a frontend integration to add the button and load the content only if the user has a valid key for the content.

Learn more on the Gitcoin Issue Details page.

[julien51]

Thanks a lot @zoek1 ! You've been approved ;) Please let me know if you need any help.

[zoek1]

Sure, i have two questions:

1. Based on my research, there 2 types of integrations, frontend and API+webhook.
   • Fronted integration:
   • Advantage The first option allow generate embedded code at token and insert the code at the post. This allow us denoting the position where the content will be locked.
   • Disasvantage turning off js the user cans see all the content.

• API+webhook
  • Advantage Allow us process and modify content using a third-party server to split the conent in two parts the allowed and the locked content.
  • Disadvantage use of third party server and prone to error and maybe add noise to user publication. Wich way we need to follow?
    2. To submit an WIP PR the code will exists as another repo or in a directory called plugins or integrations in this repository?

Extra: Also instead of cutting content we can cipher data as manning publisher does:

[julien51]

Thanks @zoek1 ! For now let's focus on a frontend only integration.

I think hiding is good enough for starters!

[zoek1]

Perfect, i'll develop the snippet to insert the ghost button and hide the content. I'll keep you informed!

[zoek1]

i'm implementing the code to detect if the user have a key for given lock and i surge me a a question: The lock button should be visible to every user, and only when click the lock button validate if has a key or inmediatly when a user visit the site? (this should popup metamask requiring access to get the user account). Because if i open three tabs and this three tabs have locks, many popp could be annoing.

[gitcoinbot]

@zoek1 Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

@zoek1 Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[zoek1]

@gitcoinbot i just took the weekend xD, doesn't matter. Still working on this. :smile:

[julien51]

Ok, please keep me in the loop here!

[zoek1]

Sure, i'm adding right now the functionality to buy one specified key and refresh the page once the user get the key to display full content.

[zoek1]

@julien51 one question, this is the event to track if the user has a key for one lock? Link

Also, to filter for user i would requires the abi, do oy have some endpoint where to access or i add a location to access the ABI

[julien51]

@julien51 one question, this is the event to track if the user has a key for one lock? Link

No, please ignore the smart contract and use the API described there. You will not need the ABI to do this, just thee Javascript API.

[zoek1]

Sure, that's what i do! :+1: The question was only to understand the repo code. :sweat_smile: Here my progress at the moment:

• The content is locked by default
• Requires metamask/provider access to the account
• Check if the user owns at least one key
• Unlock the content in case of owns at least key

[zoek1]

@julien51 i have the following snippet to add unlock to post in ghost:

<button id='unlock'>Unlock content</button>
<script src='https://pending.domain/unlock-ghost.js'></script>
<script>const locks = { 
    '0xe11766D4A2EBA95220b2': {
      name: 'One Week'
  }
}</script>

Optionally, to improve hide content speed. At the inject footer code section, add:

<script>hideContent('unlock');</script>

This is similat to GA snippet, generate the code and indicate the user where place the code, but playing with ghost integrations there are another 2 options to reduce this barrier.

1. Provide an oembed endpoint, so when the user introduce the following url https://embed.unlock-protocol.com/tokens?lock1=0xe11766D4A2EBA95220b2&name1='One Week', a server will generate the previous snippet and comunicate with ghost to inject the code.
2. Provide an hook endpoint that when a new post is created or updates, search for the button with id 'unlock' and inject the previous snippet.

This two options are more user friendly, given the previous points are already covered (add lock to posts, hide content when users doesn't owns a key, and display content if the user owns a key), could i start to implement one or both of this options or with the snippet is it enought for the moment?

[julien51]

Hey @zoek1 I am quite confused here. Why not use the snippets provided in the wiki that I sent earlier? https://github.com/unlock-protocol/unlock/wiki/Integrating-Unlock-on-your-site

[zoek1]

It's integrated at the ghost-unlock.js, just to reduce the boilerplate. But if you decide Is better being explicit i'll remove that from the script and added explicitly. @julien51

I think hide such snippets allow the user to focus only on the tokens instead of being confused by many lines of code.

[zoek1]

Based on the provided snippets at the wiki

1. Unlock content: https://github.com/unlock-protocol/unlock/pull/5347/files#diff-97f622ee5ea55486cdb00b01e8e01317R166
2. Async script loading : https://github.com/unlock-protocol/unlock/pull/5347/files#diff-97f622ee5ea55486cdb00b01e8e01317R180

[zoek1]

@julien51 i started to work on the endpoints for webhooks and oembed, i'm using hapi.js, i hope this wouldn't be a problem.

[zoek1]

I added oembed endpoints, just is required a url to insert the unlock code:

Add url to retrieve oembed payload and ghost will inject the code

At this point, inject the code manually or using oembed has the same behavior.

I just need to clean the server script, and change how to hide elements to finish this part and follow with webhooks,

[zoek1]

@julien51 at this moment do you have some recommendation or advice? Do you think if i deploy a ghost server for you to see the integrations could help you to validate the integration flow?

[julien51]

@zoek1 yes! That would be very very helpful.. Thanks!

[zoek1]

Perfect, just give me chance to update the readme, add examples and setup the server :wink: Today or tomorrow i'll send you the url of the server.

[zoek1]

Hi @julien51, sorry for the delay. Here is a temporal server for ghost and another to generate the oembed code to easy lock setup.

Servers Ghost Server OEmbed Server

Here a list with example scenarios:

OEmbed pages:

• Oembed page for a single lock

• Oembed page for many locks

Ghost examples

• Post with Single Lock

• Post with Multiple locks

• Post with injected code

The UI is pretty rough but if you approve the flow I'll take the unlock branding and integrate it into the pages. Also, can you send me an email to give you access to the ghost server to allow you test more in-depth, please? :smile:

[julien51]

@zoek1 I am getting an SSL error with all links above which means I am not able to test things :(

[gitcoinbot]

@zoek1 Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[zoek1]

:thinking: I tested on a different browser, you're right on my phone shows me a similar error, today I'll set up an SSL certificate to fix these errors. :+1:

[zoek1]

I updated the certs, but also I need to change the examples so I'll take today to this, I'll get you informed! :smile:

[zoek1]

@julien51 I updated the links and already have SSL configured. Also, If it is helpful, here a screencast about the flow to lock and unlock ghost posts. https://www.dropbox.com/s/uszqekfjkjpp47k/2019-12-23%2002-10-32.flv?dl=0

[zoek1]

If you approve the flow, I can start to add style based on the brand of unlock and write test. :smile: @julien51

[julien51]

@zoek1 This is great! Lets go ahead and finish this! Thanks a lot!

[julien51]

please, keep bugging me if I am not repsonsive!

[julien51]

@zoek1 Where are we?

[zoek1]

please, keep bugging me if I am not responsive!

Sure, I've been the major of time offline the last week, so basically starting to add the styles!

[julien51]

Thanks a lot! Let's close this ;)

[julien51]

@zoek1 Let's get it over the finish line please!

[gitcoinbot]

Issue Status: 1. Open 2. Cancelled

---

The funding of 500.0 SAI (500.0 USD @ $1.0/SAI) attached to this issue has been cancelled by the bounty submitter

• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $80,806.22 more funded OSS Work available on the Gitcoin Issue Explorer

[zoek1]

Sorry @julien51 for the delay, you'll have the finished UI implemented in react this weekend :)

[zoek1]

Status of this task:

1. DONE The creator can add locks to the post
2. DONE The users see the content locked
3. DONE The user can buy keys for specified locks
4. DONE The user sees the content if it already owns a key
5. PENDING The site used to generate the embed snippet and insert the locks looks ugly so it is required to add the look and feel of unlocking and migrate the plain HTML files to react.

These tasks will take me approx 8 hours, so Monday will be finished this issue.