본문으로 건너뛰기

Recently Added Feature Documentation

Overview​

The "Recently Added" feature automatically displays newly translated documents on the homepage, helping visitors discover the latest content. It uses a build-time script to scan all documents and extract their translation_date from the frontmatter.

Implementation Details​

1. Build-Time Script (scripts/generate-recent-docs.js)​

This Node.js script runs before each build/start and:

  • Scans all markdown files in the /docs directory
  • Extracts frontmatter data using the gray-matter package
  • Filters documents with valid translation_date
  • Sorts by translation date (newest first)
  • Generates /static/recent-docs.json with the data

2. Homepage Component (src/components/RecentlyAdded)​

The React component:

  • Fetches the generated JSON file on mount
  • Displays the 8 most recent translations
  • Shows translation date and category badges
  • Links to the full list via "모든 최근 번역 보기" button

3. Full List Page (src/pages/recent-translations.tsx)​

A dedicated page that:

  • Shows all recent translations
  • Provides category filtering (Anthropic, OpenAI, General, References)
  • Uses the same JSON data source

Adding New Translations​

When adding new translated documents:

  1. Include translation_date in the frontmatter:

    ---
    title: "Document Title"
    translation_date: "2025-06-27"
    ---

  2. The document will automatically appear in:

    • Homepage "Recently Added" section (if among the 8 most recent)
    • Full recent translations page

  3. No manual updates needed - the build script handles everything!

Technical Architecture​

Build Process:
1. npm run start/build
2. Triggers prestart/prebuild script
3. Runs generate-recent-docs.js
4. Creates/updates static/recent-docs.json
5. Components fetch and display the data

Maintenance​

  • The feature is fully automated - no manual maintenance required
  • To adjust the number of items shown on homepage, modify RECENT_ITEMS_COUNT in the component
  • To change date ranges or add new categories, update the generation script

Performance​

  • Build-time generation ensures no runtime overhead
  • Static JSON file is cached by browsers
  • Fast loading with minimal impact on page performance