Align blog post author card with reference layout in production

[Copilot]

Description

The blog author card under post pages was inconsistent between preview and production and did not match the requested reference UI. This update aligns the production-rendered footer author card with the target structure and styling so it appears as expected below blog posts.

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

• Footer author card structure (src/theme/BlogPostItem/Footer/index.tsx)

  • Reworked markup to match the requested card layout: avatar block, verified indicator, author name + Author pill, metadata row, summary text, and GitHub CTA.
  • Kept rendering scoped to blog post pages (isBlogPostPage) and primary author availability.

• Metadata and production-safe formatting

  • Replaced brittle date usage with locale-aware formatting using site locale fallback.
  • Built metadata line consistently from handle/date/read-time with a single separator constant.
  • Simplified GitHub handle fallback behavior to URL/key sources only.

• Styling parity (src/theme/BlogPostItem/Footer/styles.module.css)

  • Updated spacing, border radius, card background treatment, typography scale, and button styles to mirror the reference direction.
  • Added responsive adjustments for smaller screens.
  • Replaced hardcoded badge colors with theme variables for consistency across themes.

• Reference screenshot

  • Target reference: https://github.com/user-attachments/assets/609f0143-54e4-40d5-a7b9-970039994b59
  • PR screenshot used for validation context: https://github.com/user-attachments/assets/b9057eca-990d-4e6f-aa6d-0cdffffd9e64

const blogDate =
  metadata.date &&
  new Intl.DateTimeFormat(siteConfig.i18n?.defaultLocale || "en-US", {
    year: "numeric",
    month: "short",
    day: "numeric",
  }).format(new Date(metadata.date));

const metaItems = [authorHandle, blogDate, readTimeText]
  .filter(Boolean)
  .join(META_SEPARATOR);

Dependencies

• No new dependencies added.
• No version/config changes required for this update.

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 5:48am

[Adez017]

@copilot can you post the screenshots with the changes?

[Adez017]

@sanjay-kv i think it did a great job :

i had verified the build locally.