Add compact author meta bar and colored tag pills to blog post content page

[Copilot]

Blog post pages showed a verbose author card layout (date + stacked author rows with social links) and no tags. This brings the display in line with the reference design: a compact inline meta bar with all author avatars and GitHub handles, date, reading time, and colored tag pills — matching what the blog listing cards already show. The meta bar and tag pills are center-aligned under the title, and the reading time is displayed as a styled pill badge.

Type of Change

• New feature (e.g., new page, component, or functionality)
• Bug fix (non-breaking change that fixes an issue)
• UI/UX improvement (design, layout, or styling updates)
• Performance optimization (e.g., code splitting, caching)
• Documentation update (README, contribution guidelines, etc.)
• Other (please specify):

Changes Made

• src/theme/BlogPostItem/Header/index.tsx — New Docusaurus swizzle wrapper for BlogPostItem/Header:

  • On blog post pages: renders only the title via BlogPostItemHeaderTitle, then injects a compact meta bar + tag pills (replaces default Docusaurus date/authors section)
  • On list/archive views: falls through to original header unchanged
  • Meta bar: iterates over all authors in metadata.authors — each rendered as a 32px circular avatar + @github_handle (linked) chip; multiple authors are separated by &
  • Bug fix: previously only metadata.authors[0] was used, causing posts with multiple authors (e.g. authors: [sowmiya-v, sanjay-kv]) to show only the first author
  • Tags: colored pill badges using the same deterministic color-hash palette as blog listing cards
  • Gracefully handles missing avatar (initial fallback), missing GitHub URL, no tags

• src/theme/BlogPostItem/Header/styles.module.css — Scoped styles for the meta row and tag pills:

  • Meta section and meta row are center-aligned (align-items: center / justify-content: center) so avatars, handles, date, reading time, and tags are horizontally centered under the title
  • Tag pills row is also center-aligned (justify-content: center)
  • Reading time rendered as a rounded pill badge with padding, light background (--ifm-color-emphasis-100), and border (--ifm-color-emphasis-300) — matching the reference design
  • New .authorsPart and .authorSep classes for the multi-author flex layout
  • Includes dark-mode opacity adjustment and responsive shrink at <480px

Dependencies

No new dependencies. Uses existing @docusaurus/plugin-content-blog/client hooks and src/utils/authors.ts.

Checklist

• My code follows the style guidelines of this project.
• I have tested my changes across major browsers and devices
• My changes do not generate new console warnings or errors .
• I ran npm run build and attached screenshot(s) in this PR.
• This is already assigned Issue to me, not an unassigned issue.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
recode-website	Ready	Preview, Comment	May 22, 2026 12:39pm

[Adez017]

@copilot can we make the user name and min read part in the center ? rest things are fine

[Adez017]

@sanjay-kv :

[Adez017]

just need to alging the author to the center

[sanjay-kv]

@copilot align this to center.

and on the reading time UI need fix it need to appear like below.

[Adez017]

@sanjay-kv also there is some bug with the changes it remove the two author feature :
https://recode-website-git-copilot-bring-tag-cha-725cd6-recode-9c2fd7df.vercel.app/blog/ux-ui-design-job

[Copilot]

@copilot align this to center.

and on the reading time UI need fix it need to appear like below.
...

Done in commit 876f797. Two changes made to styles.module.css:

1. Centered the meta bar — added align-items: center to .metaSection and justify-content: center to .metaRow and .tagsRow, so the avatar, @handle, date, reading time, and tag pills all center horizontally under the title.

2. Reading time as a pill — .readTime now has padding, border-radius: 20px, a light background (--ifm-color-emphasis-100), and a border (--ifm-color-emphasis-300), matching the rounded pill style shown in the reference screenshot.

[sanjay-kv]

@copilot there is a bug with the changes it removed the two author feature .

only one author name is visible there.

[Copilot]

@copilot there is a bug with the changes it removed the two author feature .

only one author name is visible there.

Fixed in commit fe3b3c0. The root cause was that the code only read metadata.authors?.[0] (the first author). It now iterates over the full metadata.authors array and renders every author's avatar and @handle chip, separated by & — so a post with two authors like [sowmiya-v, sanjay-kv] will display both side by side in the centered meta bar.