Tagging & Discovery
Overview
Tagging is a core feature of the Blogify platform, enabling users to categorize their stories and help readers find relevant content. By associating specific keywords with a post, you create a dynamic ecosystem where ideas are connected across different authors and topics.
Adding Tags to Your Posts
When creating or editing a post, you can add multiple tags to categorize your content. The system is designed to be flexible and handles formatting automatically.
- Input Format: Enter your tags in the Tags field, separated by commas.
- Example:
Technology, React, Web Development
- Example:
- Normalization: Blogify automatically trims unnecessary whitespace from your tags.
- Storage: Tags are stored as an array of strings within the database and are associated directly with the post object.
Best Practices for Tagging
- Be Specific: Use tags that accurately describe the niche of your post (e.g.,
KaTeXinstead of justMath). - Consistency: While tags are case-insensitive for discovery purposes, using consistent casing helps maintain a clean UI.
- Relevance: Use 3–5 tags to ensure your post appears in the most relevant discovery feeds without cluttering the post header.
Discovering Content
Discovery on Blogify is driven by user-generated tags. There are two primary ways to explore tagged content:
1. Post Header Navigation
Every post displays its associated tags at the top of the article. Clicking on any of these tags will redirect you to a dedicated discovery feed featuring all posts that share that specific tag.
2. Tag-Based Filtering
The platform supports dynamic routing for discovery. You can manually navigate to specific topics by appending the tag name to the URL:
https://yuggoel-blogify.vercel.app/tags/[tag-name]
The discovery engine uses case-insensitive matching, ensuring that a search for markdown will return posts tagged as Markdown, MARKDOWN, or markdown.
Technical Reference
For developers looking to interact with the tagging system via the API or frontend components, the following structures are used.
Post Data Structure
The Post object includes a tags property which is always returned as an array, even if empty.
export interface Post {
id: string;
title: string;
content: string;
tags: string[]; // Always an array of strings
user_id: string;
created_at: string;
// ... other fields
}
Updating Tags
When sending updates to the backend, tags should be sent as a cleaned array. The frontend performs the following transformation before hitting the PUT /posts/{id} endpoint:
const tagArray = tags
.split(',')
.map((tag) => tag.trim())
.filter((tag) => tag.length > 0);
await updatePost(id, {
tags: tagArray,
// ... other fields
});
UI Implementation
The PostPageContent component renders tags using standard Next.js Link components for SEO-friendly navigation:
<div className="flex flex-wrap gap-2">
{post.tags.map((tag) => (
<Link
key={tag}
href={`/tags/${tag.toLowerCase()}`}
className="text-indigo-600 hover:underline"
>
{tag}
</Link>
))}
</div>