Write a Steemit Web App: Part 11 - Posting Content

[jfollas]

(Previous Post: Part 10)

Previously in this series, we learned how to fetch content (blog posts and replies) from the Steemit blockchain using Steem.js. How would a web app submit new content to Steemit?

Introducing steem.broadcast.comment

When posting content, there is only one Steem.js function to know: steem.broadcast.comment. This is used to both create new blog posts and reply to content written by other people:

steem.broadcast.comment (
    private_posting_wif,  // Steemit.com Wallet -> Permissions -> Show Private Key (for Posting)
    parent_author,        // empty for new blog post 
    parent_permlink,      // main tag for new blog post
    author,               // same user the private_posting_key is for
    permlink,             // a slug (lowercase 'a'-'z', '0'-'9', and '-', min 1 character, max 255 characters)
    title,                // human-readable title
    body,                 // body of the post or comment
    json_metadata         // arbitrary metadata
)

New Blog Posts

For new blog posts, use an empty string for parent_author and use the post's main Tag (Category) as the parent_permlink.

It is up to your app to create the slug that will be used as the permlink. Steemit requires that the slug be lowercase and only numbers, letters, and the '-' dash characters be in the slug string. The length of the slug must be between 1 and 255 characters total.

The json_metadata argument can be either an object literal, or JSON string. While not well documented, it appears that Steemit needs certain data to appear in the metadata for a new post.

As an example, let's look at the metadata that was submitted with Part 10's Blog Post:

{
    "tags": [
        "steemdev",
        "developer",
        "javascript",
        "steemjs",
        "steem-dev"
    ],
    "links": [
        "\/@jfollas\/write-a-steemit-web-app-part-9-retrieving-content-with-getdiscussionsby",
        "https:\/\/esteem.ws\/"
    ],
    "image": [
        "https:\/\/steemitimages.com\/DQmZBbDGvKqM8V46NHaXoT7nZvrXhHLtTysrhixRu8eS87g\/javascriptlogo.png"
    ],
    "format": "markdown",
    "app": "steemit\/0.1"
}

Steemit uses the first entry from the image array as the blog's picture (you can even provide this in the metadata without actually having an image in the blog post). It also uses the tags array to set the various categories for the blog post (maximum of 5).

I am not sure at this time if the remaining data is used by the Condenser (i.e., steemit.com) or other apps, but format seems to be either "markdown" or "html", depending on the content of the post body. app is an identifier for the application that is posting (i.e., your web app). And links is apparently an array of all of the URLs found in the body.

Replies

For replies or comments, provide the actual author and permlink that you are replying to as the parent_author and parent_permlink (these will be properties of the content's data).

There seems to be a convention for the structure of a reply's own permlink (slug). For example:

re-jfollas-write-a-steemit-web-app-part-10-retrieving-comments-with-getcontentreplies-20170802t041610122z

Fortunately, Steem.js provides a helper function to create a proper permlink for you given the parent_author and parent_permlink:

const permlink = steem.formatter.commentPermlink(parent_author, parent_permlink)

As for the json_metadata, there doesn't seem to be a lot of consistency between apps. Steemit.com will submit something like this:

{
    "tags": [
        "steemdev"
    ],
    "users": [
        "jfollas"
    ],
    "app": "steemit\/0.1"
}

The tags array will contain the main post's primary tag, as well as any #tag mentions found in the body. users will contain any @user mention found in the body. Steemit doesn't seem to use these yet, but I'm hopeful that there will be a database API developed later to allow you to find @user mentions (so maybe including them in the metadata is just the first step in that process).

Deleting Content

Now, the Steemit.com website doesn't permit a post or comment to be deleted. But, there is an API function that allows for this, if ever needed. Note that this will not remove record of the post or comment from the blockchain itself, because that is a permanent recording of all transactions. But, it will prevent the content from appearing on Steemit.com, at least.

steem.broadcast.deleteComment(private_posting_wif, author, permlink)

The caveat here, though, is that the post cannot have any children (replies). Once it does, calling deleteComment() will result in an error.

(Next Post: Part 12)

Comments

[neuromancer]

Interesting, again. Of note:

"...length of the slug must be between 1 and 255 characters..."

A byte, path depth, ? Hmm...

"...provide this in the metadata without actually having an image in the blog post..."

Custom thumbnails, anyone?

..."format seems to be either "markdown" or "html", depending on the content..."

Interesting, but, I wonder; I've made posts with mixed markdown & html tag content, which is necessary if you wish to make use of <div>s, for example:

### [useful resource](https://steemit.com/@neuromancer)
<div class=pull-right>https://steemitimages.com/DQmQMZPRjgWkSdhQZMYrmtm6PU9sS1HKSpVHzmjTXp9j2Se/noteymcnoteface.png</div> I will show you how to make some text that will wrap the noteymcnoteface.png image but also has <b>bold</b> and <i>italic</i> HMTL tagged text in it. <br> <br> In fact, I'm about to publish an article on it to help you all achieve advanced formatting for your work :]

Produces:

useful resource

I will show you how to make some text that will wrap the noteymcnoteface.png image but also has bold and italic HMTL tagged text in it.

In fact, I'm about to publish an article on it to help you all achieve advanced formatting for your work :]

[jfollas]

Again, I'm not sure how much Steemit (or other apps) actually depend on the format metadata value, so you may get the same results with no format specified at all (because it looks like they preserve sanitized html within markdown when it renders). I noticed after I posted that eSteem provides "markdown+html" as the format value in its posts.

But, because each app renders markdown differently, I would be concerned that doing anything really fancy would result in a post that looks bad when rendered on different apps. eSteem, for instance, does a bad job rendering markdown code blocks (and I'm not even a fan of how Steemit renders code - my own app will use Prism.js to enhance the styling of code blocks).

[neuromancer]

There really needs to be a canonical approach if they want authors to put any effort into formatting their articles. Somewhere over the rainbow.

Thanks for your efforts investigating and clarifying, I think the inspection and insight will prove useful to devs and may result in further consideration (provided someone's watching this).

[stoodkev]

This is a test!

[dollface]

Upvoted & RESTEEMED :]

[marcaprio]

I am looking thru your posts and they are very interesting, writing steemit apps. I might be interested to play a bit myself with that at some point, who knows. I generally like coding, but not doing much of that at the moment. All props to you sir!

[dan.sanchez]

var jsontext = '["image",""]';

[dan.sanchez]

var jsontext = '["image",""]';

The / are actually /

[oyvindsabo]

Thanks! I'm super grateful for this tutorial. I have literally found no other documentation about how to write replies, using Steem.js. This one worked like a charm!

[dibya612]

just asking how to add image in post using steemjs

[fish-tennis]

1231231

[quangle]

Dear jfollas,

That's very helpful API

There are some points that I don't get it:

1. I did use this API to delete a comment and it works well if you create a post and delete it a few seconds later. However, it seems it doesn't work with a post which is created couple of hours ago.
2. I did search and know that we can delete a post/comment if they don't have any replies/votes and must be less than 7 days

My case fulfiled all these conditions, but API is always return this error " comment.cashout_time != fc::time_point_sec::maximum()"

You can take a look at this link
https://github.com/EOSIO/logchain/blob/master/libraries/chain/steem_evaluator.cpp#L378

Thank you so much for any feedback

Regards