This is a very short post, because I wanted to write more stuff in small, not so long post, in order to prevent myself from writer's block. My future posts will also be shortened in order to maximize my productivity, ehe.

Okay, so...

As I've just begun to write more and more, I realized that I'm going to write more random stuffs which are not just focusing on coding or programming. I want to write about anime, entertainment, and probably writing my own web novel. Yes, I want to try to make web novel, hehe. But that makes my stuffs are going to be varied, and sometimes a visitor only want to seek for a certain thing. As the time I write this post, navigation is not that good, in which I need to add some way to find stuffs.

Most people gonna search for posts by category, by label, or by tags (those three are roughly the same), so that's what I want to implement for now.

Naive approach

As I'm using MongoDB, adding new fields or attributes is as simple as modifying the existing model and schema. And so I did. It was very straightforward. Add a new attribute with data type array of string, and just work on it afterwards. Nothing big, really.

The only thing I often forget is the difference between defining the data type in Typescript interfaces, and in mongoose schemas. It both goes like this.

// Typescript Interfaces
interface CertainModel {
    arrayOfString: string[];
}

// mongoose schemas
const schema = new mongoose.schema({
    arrayOfString: [String]
    // or you can go with
    arrayOfString: {
        type: [String],
        default: [], // or any default values you want
    },
});

A slight difference that needs to be memorized (at least for me (because i'm lazy in opening the docs)).

The rest is just the usual drill. Create a handler, create the tag searching page, add the tags for each post on the post page, and handle the rendering of the links. It goes for several extra steps for the editor page, but it's nothing complex.

But, because it's not complex, it starting to seems very... simplistic. I feel that I need to add more interactivity, as to add multi-tag searching, proper tags rendering, analytics, and other stuffs.

The thing that I want to pursue is the auto suggestion for the tag I want to input, like what you can find in Pixiv. This is what you'll see when trying to add tags

Pretty cool, right? You can see the statistics for each tags, preventing you to use some unknown tags with low result count because you misspelled. I already have the idea for this, but that will go for another post.

As for now, I just want to turn this lazy looking input field into something more exciting.

I mean, this is just plain sad, haha. Need to work on my frontend skills, dammit.

So, I think that's it for now. I forgot which development update this thing is, but lets start with using "Log-0x${hexadecimal value}" starting from now. I'm going to start this one with 0x10. Hopefully I can stay consistent.

Until next time, see ya!

Loading...

There will be awesome contents here

Log-0x10 : Adding Tags to Posts