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.

1. Input Format: Enter your tags in the Tags field, separated by commas.
   • Example: Technology, React, Web Development
2. Normalization: Blogify automatically trims unnecessary whitespace from your tags.
3. 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., KaTeX instead of just Math).
• 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>