Hive blog tutorial

Have you ever thought about connecting to hive blockchain and getting all post on your computer or on another website? Today I want to show you how simple this can be. All you need to have is text editor, browser and some time :) Our goal is to make website where we we can load our posts. I made an example on my static page website [here](https://grzegorz2047.pl/hive/). All html files are located in github pages server which is completely free. if there ever will be a need to show how to setup github pages, I will gladly show you here. But let's go back to our goal. Website at the end will look like this: ![Website with my last posts](https://files.peakd.com/file/peakd-hive/grzegorz2047/23wCLU7xoZ1dDPRqGpmJMiuJvgttytcrv2ezJHuUURrcnDSBiyq2UTog8NH4Yo1mbJjP8.png) So what i used here is 1. library to download all my hive profile data 2. library to read and parse markdowm 3. library to simple bootstrap design Sow how to start? First, create a folder in your desktop in whatever Operating system you have and create file named "index.html. It should look like this: ![image.png](https://files.peakd.com/file/peakd-hive/grzegorz2047/EnynYGjvyu4Xo7KrDTYspUWzBb1cM9Uj7UoeDfZuiZ8nf5sXnGKE1ZBRfovEuKzsiQS.png) Now use your favorite text editor like notepad++, Visual Studio code, sublime or anything you imagine. I will use Visual Studio Code and open my index.html file. ![image.png](https://files.peakd.com/file/peakd-hive/grzegorz2047/23sweNG48TLJnGDVBiULaDxH5R8wEUs4Rr31EtLa6gZvzfRZ6XQoZTAvd4JNpjdgHQMCW.png) next thing is to copy a template of block. It's a base to where we will add content. So first add this to index.html: ``` ``` Now run index.html in your browser so source code of website should look like this: ![image.png](https://files.peakd.com/file/peakd-hive/grzegorz2047/EqqxH8L97SEFhZi15wtshiQo6SDwf5GvMJ9Lbc5eWr2Ho5kNAjqEkYx7qYJpSdP4YD9.png) Now it's time to add libraries. Let's add library to download your data from hive blochchain. In this tutorial I will use [hive-js](https://gitlab.syncad.com/hive/hive-js). This is enough for our needs. It will use hive.blog node to connect with our account. our code should look like this: ``` Hive blog tutorial ``` Next, let's add library to parse markdown. I found a lib named [marked](https://marked.js.org/). Let's add script to our code: ``` Hive blog tutorial ``` And finally let's add a [bootstrap](https://getbootstrap.com/docs/5.3/getting-started/introduction/) and [bootstrap design](https://bootswatch.com/superhero/) to make it quicker to design: ``` Hive blog tutorial ``` Once we have all needed libs, let's make our template to place our posts from hive. I will add now some html markups so it would look sth like this: ``` Hive blog tutorial

``` This structure will let you add account data in "account" block, next I put "posts" id, "post-list" to inject posts, and "footer" class to place a button at the bottom of website so we can load more articles. Also button listening to click event("onclick") where once we click a button, function "appendMorePosts()" will trigger. Website should look like this right at this moment: ![image.png](https://files.peakd.com/file/peakd-hive/grzegorz2047/23tRrM5k8wkQafficsHhwnfbwpcfYLWGfWLvDg8sEVMVfWxNwobWV8mNDDxj4hZYWDFdr.png) Now it's time to create our script to load first 5 posts from our hive account. First function will be to load data from hive api. We will use 2 functions ``` const author = "grzegorz2047"; let lastPostId = Infinity; function addPosts(startingNumber, numberOfPosts) { hive.api.getBlogEntries(author, startingNumber, numberOfPosts, function(err, data) { lastPostId = data[0].entry_id; data.forEach(element => { const permlink = element.permlink; hive.api.getContent(author, permlink, function(errs, article) { console.log(article.title); console.log(article.body); }); }); }); } ``` function [hive.api.getBlogEntries](https://gitlab.syncad.com/hive/hive-js/tree/master/doc#get-blog-entries) ![image.png](https://files.peakd.com/file/peakd-hive/grzegorz2047/23sxpXQRAyqPbQCts824akDZgXocPsjaZPDA7JF9uVtezSdgJfWAteewmkscak1a6R8Td.png) I added 2 variables - author to get our account name and lastPostId to store pointer to next batch of posts to load.(from newest to oldest) If we know what is the perm link of post, now we need to get title and content of our post so we use [hive.api.getContent](https://gitlab.syncad.com/hive/hive-js/tree/master/doc#get-content) ![image.png](https://files.peakd.com/file/peakd-hive/grzegorz2047/23tcQixRoHwinxZQpuKDWN8BG5aeVvoSVuvuLQvzCguov5RFoQNzEKxEbmmx22qm5Y6Bf.png) Let's add one more function to run our addPosts function when website loads. The easiest way to do it is to you anonymous function like this: ``` (()=>{ addPosts(Infinity, 5); })(); ``` As you can see, I added 2 parameters to addPosts. First is the biggest possible number to get last post create, and number 5 which says load 5 first posts. Whole code should look like this: ``` Hive blog tutorial

``` Let's run this code in the browser ans see what console is going to print: ![image.png](https://files.peakd.com/file/peakd-hive/grzegorz2047/23t74yLbp2bbdRCRUqtxXuxdydgXt3p5gdVjKXxoWf9DNRVBmgtAtXsBu4AmPZduXNzxP.png) As you can see, there is a title and content of my posts. Code which prints data to console is ``` console.log(article.title); console.log(article.body); ``` Ok, let's use this data and dynamically put it to our html code. To do this, let's create a function to inject html code. Example function would look like this: ``` function createArticle(title, body) { const paragraph = document.createElement("div"); paragraph.classList = "article"; let articleTitle = document.createElement("h2"); let articleBody = document.createElement("p"); articleTitle.innerHTML = title; articleBody.innerHTML = marked.parse(body); paragraph.appendChild(articleTitle); paragraph.appendChild(articleBody); return paragraph; } ``` As you can see, I create div to store all text. I inject "article" css class to change visual aspect of this

Then I create h2 markup to place title. Then p markup for content of post, innerHTML inject text to html markup. marked.parse(body) takes content of post and translates markdown code to html code. At the end I appendChild all parts of html code to a div. So I just link everything to parent div markup. Our articles should be injected to "article-list". We can use ``` document.getElementById("post-list").appendChild() ``` To find "post-list" id element and add articles to this element. So now, let's replace adding articles instead of console.log functions like this: ``` Hive blog tutorial

``` When you run our code in browser, you should see something like this: ![image.png](https://files.peakd.com/file/peakd-hive/grzegorz2047/23t797yM18ijBTdiuecxwxphzY9VYT2ArFu48iap4JHuvid1er2yeLcUs9FaxoXpbbR7j.png) It should load some od your posts. (if you changed author variable value :D) Let's make it more readable by adding some css code to it. I will narrow articles by creating ".article" class in block in html code and I will make pictures smaller to adjust to width of article like this: ``` ``` As you can see, article has new font, new font size (16px * 1.5), it will look at spaces (pre-wrap), and it will center posts using margin auto and narrowing text to 80% of container width. Inside of this 80% I will take (16px * 2) pixels in padding and (2 * 16px) of bottom margin for every article. Now code of website should look like this: ``` Hive blog tutorial

``` And browser should look like this: ![image.png](https://files.peakd.com/file/peakd-hive/grzegorz2047/23xemxie69BNtuoV26wTyC2FwS76z5aTePaiLFHxtKDeXdUATNvwurJjNfDtan6JdBGqB.png) Next what we can do is to program a button to load more posts. So let's add function to load it: ``` const postPerPage = 5; let page = 1; function appendMorePosts() { page += 1; console.log(page); let loadNext = lastPostId - postPerPage * page; if (loadNext < 0) { if (lastPostId > 0) { loadNext = lastPostId; } else { loadNext = 0; } } addPosts(loadNext, postPerPage); } ``` What we basically do is we have *appendMorePosts* function which runs when button is clicked. This function is keeping memory of paging our posts, which page we are in. *lastPostId* store memory of newest post id. *loadNext * is take last post id and substract next 5 post in current page. and if just makes sure that we don't loop our paging. at the end *addPosts* just adds next portion of posts. Now we just move our button to more center and we're ready :) I just add two css classes like this: ``` .footer { margin-left: auto; margin-right: auto; width: 80%; display: flex; } .center-button { display: flex; margin-left: auto; margin-right: auto; } ``` Whole code should now look like this: ``` Hive blog tutorial

``` Our website is finished. Now we can add a navbarfrom bootstrap and you can make routing to different pages. So I just add navbar like this: ``` ``` Final code looks like this: ``` Hive blog tutorial

``` Final page look is ![image.png](https://files.peakd.com/file/peakd-hive/grzegorz2047/23xenF8APzJCRQVDZaBXQqHjisWCAb1ye4me1vAyVgDQo2xZHGZRqwe1n9zsHiehcGzgL.png) Congratz, you made your own read only hive interface just for your account. Next article will be about getting account information.