Gatsby-source-hiveJS plugin Development #1

in #hive4 years ago

Data sample for body. The main idea is to send a post from my gatsby app, using a gatsby-plugin
based on the initial work of @codingdefined.

Programming as many other things we can do, allows us to create. The feeling about creating something is amazing. Makes you feel great. -@theghost1980.

img

How's the work doing so far?

So far I have been able to fetch the data without using the plugin itself, first phase. Also in order to not crash the app, on the building time, I have used dummy data that match the data that comes from the api. So the initial render functions do not break.

Part 1 (data fetching)

  • fetch api.hive.blog data
  • create the nodes for each post & inject data into graphql
  • create the json_metadata field as json-object so it can be easily maniputaled by grapqhl queries
  • add pagination configuration, so you can decide how many posts per page & create the page dinamically
  • create a nodeImage as child of each post to pull the data easily from grapqhl

Part 2 (submiting a post)

  • check if the permlink is non existent for this particular author
  • construct the json_metadata based of the analysis of the body images present(if any) "on the go"
  • construct the json_metadata.tags as an array from the user's input on the editor
  • safely use the posting private key (.env files + gatsby handling to inject env variables into JS code)

img

Some tests I did so far

Are you mad? Are you testing directly to the mainnet? Under another account which is yours also????....???

I know, I know this is a big risk. Maybe I will get a downvote by doing this. But as I cannot set up a testnet right, I prefer to take that risk. :D

I have tried to use the gatsby-remote-plugin in order to pull the json_metadata.images array into a new object node. The problems I have found are:

  1. The plugin need a fast internet connection in order to bring the data as fast as possible. This plugin will copy all the image files into local content, in order to use the plugin-sharp to make possible the fluid/fixed queries inside graphql.
  2. So due to this limitations. I had stop using this plugin, mainly because of my isp speed. I have decided to use the image as it comes from api.hive.blog.

Near future improvements?

Well first of all I have many ideas but so far:

  • Adapt of the current working code as a configurable plugin.

Key points

-After digging into Hive repository I could notice they are using the following npm packages to format correctly the pseudo markdown used in the posts.

  • "remarkable": "^2.0.1".
  • "sanitize-html": "^2.3.2".

By using those 2 the body data can be easily formatted as they do and cleaned from any error on typying also.

Where can I see your work?

I haven't uploaded the code on my github account yet. As soon as I get a decent product, I will publish some date and make it public. Stay tuned.

What if I want to see the previous work done?

Please feel free to see @codingdefined repository right here.

Any updates for today's work?

In deed yes. I will work on constructing the post's data. Specifically the fields: json_metadata, so it can respect the initial form as used in hive.

Data for testing markdown bellow

H1 Title

H2 Title

A h3 Title

A h4 Title

A h5 Title
A h6 Title

This is a test coming from Gatsby client.

Things are not that easy

It is a lot of work getting all the necessary to implement a crypto-social network.

Single line of code

let gatsbyJS = document.getAllByName("all");

Multiline of code

const imageNode = {
    id: createNodeId(`${firstImage}`),
    imageUrl: `${firstImage}`,
    internal: {
      type: `CoverImage`,
      description: `dummy`,
      contentDigest: createContentDigest({}),
    }
}

Lists ul & ol

  • List 1.
  • List 2.
  1. List 1.
  2. List 2.
  3. List 3.

Finally more Images:

img

img

Posted using my wannabe gatsby-plugin from saturnoman.com