Revamping the Tech Blog: A Leap Towards 'Research Institute' Aesthetics

Technical Implementation (구현 상세)

1. Blog Index Page (/blog)

• Hybrid Layout:
  • Engineering Posts: Displayed as a 2-column Grid for visual impact.
  • Daily Reports: Displayed as a dense List in the sidebar (latest 5) or main column when filtered.
• Pagination Logic: Implemented server-side pagination (6 items per page) to optimize load performance.
• Visuals: Added a "Featured Post" Hero section with dynamic gradients and glassmorphism effects.

2. Blog Detail Page (/blog/[slug])

• Sticky Table of Contents (TOC):
  • Desktop: A sticky sidebar that highlights the active section while scrolling using IntersectionObserver.
  • Mobile: A collapsible Accordion component at the top of the article.
• Reading Enhancements:
  • Scroll Progress Bar: A minimal blue line at the top indicating reading progress (framer-motion).
  • Typography: Increased line-height and font size for better readability.
  • Metadata: Added "Read Time" calculation and Author Profile.

3. Custom MDX Components

We created a suite of custom React components to enrich our technical documentation:

• <Callout>: For Tips, Warnings, and Notes.
• <CodeBlock>: Mac-OS style terminal windows with copy functionality.
• <ImageBlock>: Enhanced image containers with rounded corners and captions.
• <Breadcrumb>: Clear navigation paths for deep linking.

// Example: MDX Component Mapping
const mdxComponents = {
    Callout,
    ImageBlock,
    pre: CodeBlock, // Maps standard markdown code blocks to our custom component
};