Add label taxonomy to blog posts with SEO integration

[Copilot]

Adds a label system to categorize blog posts and improve discoverability through SEO metadata and RSS feeds.

Changes

Core Implementation

• Extended frontmatter metadata schema with optional labels: string[] field
• Added Label component with book spine aesthetic matching site's cozy, library-inspired design
• Two variants: compact (list view) and default (post view)

Design Approach
Labels are styled to resemble horizontal book spines laying flat on a shelf, creating a warm, literary aesthetic:

• Rectangular shape with prominent left border accent (book spine edge)
• Subtle shadows and gradients for 3D depth
• Slight color variations between labels (different "books")
• Interactive hover effect that lifts labels up slightly
• Maintains soft, earthy, intelligent design theme

Integration Points

• Blog list: Labels render below post titles
• Post pages: Labels display in header below date/share controls
• SEO: Labels populate meta keywords and JSON-LD structured data
• RSS: Labels map to <category> elements per RSS 2.0 spec

Content
Applied semantic labels to existing posts:

# Example frontmatter
---
title: "the ripped shoes mentality"
publishedAt: "2025-12-12"
summary: "the feeling of being underrated, undervalued, and unknown"
labels: ["mindset", "philosophy", "personal-growth"]
---

Label taxonomy: life, philosophy, mindset, personal-growth, gaming, tech, productivity, personal

Screenshots

Desktop - Blog List

Desktop - Individual Post

Mobile - Blog List

Mobile - Individual Post

Original prompt

i’d like to add labels to my blog post articles.

first, understand the codebase and UI thoroughly second, ideate good ways to incorporate labels into the UI and for SEO purposes based on the next.js tech stack and best practices. third, add in the code for labels. fourth, add in labels to existing articles.

think from the perspective that this is your personal portfolio website and want to showcase things in a clean manner. understand the soft earthy intelligent vibes we have and design accordingly

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
adiadd-github-io	Ready	Preview, Comment	Dec 22, 2025 3:31pm

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[adiadd]

@copilot can you make the labels appear like sideways (horizontal laying flat) books? update the screenshots and think deeply about how books would pair up to be displayed in a clean way. ensure both desktop and mobile responsive while adhering to the design theme we're going for: soft, earthy, intelligent, cozy, welcoming

[Copilot]

@copilot can you make the labels appear like sideways (horizontal laying flat) books? update the screenshots and think deeply about how books would pair up to be displayed in a clean way. ensure both ...

Redesigned the labels to look like horizontal book spines laying flat on a shelf. The design features:

• Rectangular shape with prominent left border accent (spine edge)
• Subtle shadows and gradients for depth
• Slight color variations between labels (different "books")
• Hover effect that lifts labels up slightly
• Maintains the soft, earthy, intelligent aesthetic

All views (desktop/mobile, list/individual posts) updated and fully responsive.

Commit: bef494a

Screenshots:

Desktop Blog List:

Desktop Individual Post:

Mobile Blog List:

Mobile Individual Post:

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• fonts.googleapis.com
  • Triggering command: /usr/local/bin/node /usr/local/bin/node /home/REDACTED/work/adiadd.github.io/adiadd.github.io/node_modules/next/dist/server/lib/start-server.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)