Filtering Out Tags and Cross-Posts in Your Custom Hive Feed

Now we are getting back data from the Hive blockchain, we need to clean up the results so that they make sense to a viewer who is only interested in the content and does not understand anything Hive-related.

The most prominent out-of-place item is the cross-post.

This is where you take an existing article and publish it in another specific topic-based community. For example I could take this article today and cross-post to STEMGeeks or the Programming community. It would appear in my feed and in addition would start appearing in the community feed, but the new post wouldn't contain the full content, it would simply tell that community to pull up the original post.

As you can see in this screenshot, when on Hive you cross-post an article into a community, in your own feed it simply appears as a duplicate entry, with the content being that the article was a cross post.

This makes no sense to a reader who arrived from a Google search, and it would cause them to click the back button more confused than when they started.

---

This is the third part in my NextJS Hive Front End Website series (see Part 1 Part 2)

Easy enough, you would think?

Well, it is easy, once you know how to do it.

When we grab our feed using the API, we get back a whole bunch of JSON data. We have been pulling back (for now) certain attributes, namely the ID, title, description, permlink and the body contents.

There isn't initially any way to tell actual blog posts and cross-posts apart until you get down to the body copy.

We could filter anything that contains "Cross post" but that would be inefficient and possibly would filter out false positives (like this article that you are reading).

JSON Metadata to the Rescue

As with many content management systems, there is more data available than the top-level fields if you know where to look. Fortunately, the team who developed the Hive data structure was forward-thinking enough to offer meta data.

Meta data is information about information. You can think of it as "context".

When you watch a Police CSI unit on TV track down a murderer based on their photograph EXIF data it is kind of the same thing. Where in a photograph the metadata might contain the brand of camera and the GPS location, our blog articles will reveal the front-end App we used to publish it, the format (in this case "markdown" versus "HTML"), etc.

It turns out that cross-posts are given the tag "cross-post" (I am not sure if this breaks when you already have 10 tags but I never reach that number personally).

This means we can stop those getting through (or even have a switch to allow them or suppress them) using simple logic:

var crossPost = meta.tags.toString().search(/cross-post/i);

What this statement does is it sets a variable called crossPost to a number. The number is the result of searching the meta tags string for the text "cross-post" (using the 'i' to state that we want it case-insensitive but that is likely unnecessary defensive programming on my part).

If the search text is found in the meta tags, the number will be 0 or above, but if the text is not discovered in the string then we will get -1 as the result. This is because the returned number is the character position in the string where the search text was found rather than a true or false answer.

All that remains is for us to wrap our existing API code in an if statement like so:

if(crossPost == -1) { 

    // do the things

}

This will only allow legit blog posts to get through to our front-end display logic.

Other Uses for Meta

Going back to our original plan for this custom front end, we want our blog to appear on a non-Hive domain.

This code searches through the tags looking to suppress a specific tag, but we can now have the ability to be even more cunning!

Perhaps you like having community conversations around Hive that you don't want to appear on your non-Hive site? Just check for the Hive tag.

Alternatively, and an option I am considering, you might want to include certain topics. The domain I have been testing this site with as I develop it is using a linux topic related domain - I could have only linux tags appear on that site, but deploy another site with only python topics, and so on.

In our config we can set a constant:

export const suppress_tags = ['cross-post','hive'];

When we need to know these tags we set the import:

import { suppress_tags } from '../../../config'

Now we can iterate over the tags to suppress, and only allow the rest of the articles through!

var suppressPost;
        suppress_tags.forEach( tag=> { if(meta.tags.toString().search(tag) != -1) { suppressPost = true }  } );
                
        if(!suppressPost) { 
        // do the thing
    }

Et Voila!