LunariaJS Localization Dashboard - Understand Translation Progress at a Glance

In previous articles, we learned how to install, configure, and run LunariaJS. Today, let’s dive into LunariaJS’s most powerful feature — the Localization Dashboard, and learn how to use it to efficiently manage multilingual projects.

💡 Official Documentation: LunariaJS Documentation - Dashboard

Dashboard Overview

What is a Localization Dashboard?

A localization dashboard is a visual interface that displays project translation status. It answers the questions maintainers care most about:

What’s the overall progress? What’s the translation completion percentage for each language?
Which files need attention? Which translations are outdated? Which are missing?
How’s translation quality? Are translations kept in sync with source documents?

Why Do You Need a Dashboard?

In traditional localization management, tracking translation status usually requires:

Manually maintaining a spreadsheet
Adding various TODO comments in files
Relying on contributors to self-report progress

These methods have obvious problems: scattered information, untimely updates, hard to maintain.

LunariaJS dashboard solves these problems through automation:

Auto-update: Translation status is automatically analyzed on each build
Central display: Status of all languages and files at a glance
Real-time sync: Fully synced with Git repository status

Dashboard Interface Analysis

Main Interface Layout

After accessing the dashboard, you’ll see a clear interface:

┌─────────────────────────────────────────────────────────────┐
│  🌙 My Project - Localization Status                        │
├─────────────────────────────────────────────────────────────┤
│  [Language Selector]  [Status Filter]                       │
├─────────────────────────────────────────────────────────────┤
│  Overall Progress                                           │
│  ┌─────────────────────────────────────────────────────────┐│
│  │  🇺🇸 English (source) ████████████████████ 100%         ││
│  │  🇨🇳 Chinese          ██████████████░░░░░░  85%         ││
│  │  🇯🇵 Japanese         ████████████░░░░░░░░░░ 70%         ││
│  │  🇰🇷 Korean           ████████░░░░░░░░░░░░░░ 55%         ││
│  └─────────────────────────────────────────────────────────┘│
├─────────────────────────────────────────────────────────────┤
│  File List                                                  │
│  ┌─────────────────────────────────────────────────────────┐│
│  │  📄 index.md                    🟢 🟢 🟢 🟢             ││
│  │  📄 getting-started.md          🟢 🟢 🟡 🟢             ││
│  │  📄 configuration.md            🟢 🟢 🟢 🔴             ││
│  │  📄 api/overview.md             🟢 🔴 🔴 🔴             ││
│  └─────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────┘

Section Descriptions

1. Top Navigation Bar

Project title
Language switcher (if multi-language interface is supported)
Theme toggle (light/dark mode)

2. Language Selector

Allows you to filter displayed content by language:

[All Languages ▼]  [English]  [Chinese]  [Japanese]  [Korean]

3. Status Filter

Filter files by translation status:

[All Status ▼]  [✅ Done]  [⚠️ Outdated]  [❌ Missing]

4. Overall Progress Section

Displays overall translation completion for each language:

Element	Description
Language flag/icon	Language identifier
Language name	Full language name
Progress bar	Visual completion rate
Percentage	Specific completion ratio

5. File List Section

Lists all tracked files and their translation status.

Translation Status Details

LunariaJS uses three statuses to mark each translation file’s state.

🟢 Done

Meaning: Translation is complete and synced with the source file.

Criteria:

Translation file exists
Translation file’s last modified time ≥ source file’s last modified time

Example:

📄 getting-started.md
├── Source: en/getting-started.md (modified 2026-02-28)
├── Translation: zh-cn/getting-started.md (modified 2026-02-28) ✅
└── Status: 🟢 Done

Action Suggestion: No action needed, translation is up to date.

🟡 Outdated

Meaning: Translation exists, but source file has been updated, translation needs syncing.

Criteria:

Translation file exists
Translation file’s last modified time < source file’s last modified time

Example:

📄 configuration.md
├── Source: en/configuration.md (modified 2026-02-28)
├── Translation: ja/configuration.md (modified 2026-02-20) ⚠️
└── Status: 🟡 Outdated (8 days behind)

Action Suggestion:

View latest changes in source file
Update translation file
Commit updated translation

🔴 Missing

Meaning: Translation file doesn’t exist.

Criteria:

Translation file doesn’t exist at expected path

Example:

📄 api/overview.md
├── Source: en/api/overview.md (exists)
├── Translation: ko/api/overview.md (doesn't exist) ❌
└── Status: 🔴 Missing

Action Suggestion:

Create translation file
Translate source file content
Commit new translation

File Status Tracking

Single File Status View

Click on a file name to view detailed information:

┌─────────────────────────────────────────────────────────────┐
│  📄 getting-started.md                                      │
├─────────────────────────────────────────────────────────────┤
│  Source path: docs/en/getting-started.md                    │
│  Last updated: 2026-02-28 14:30 (commit: abc1234)           │
│  File size: 4.2 KB                                          │
├─────────────────────────────────────────────────────────────┤
│  Translation Status                                         │
│  ┌─────────────────────────────────────────────────────────┐│
│  │  🇺🇸 English (source)  ✅ Source file                   ││
│  │  🇨🇳 Chinese          ✅ Done (2026-02-28)              ││
│  │  🇯🇵 Japanese         ⚠️ Outdated 8 days (2026-02-20)   ││
│  │  🇰🇷 Korean           ❌ Missing                        ││
│  └─────────────────────────────────────────────────────────┘│
├─────────────────────────────────────────────────────────────┤
│  [View Source]  [Edit Translation]                          │
└─────────────────────────────────────────────────────────────┘

Batch Status Analysis

The dashboard provides batch analysis view to help you quickly identify problem areas:

By Language Analysis:

Language Status Summary
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Language      Done    Outdated    Missing    Total
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Chinese       38      3           1          42
Japanese      30      8           4          42
Korean        25      10          7          42
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

By Directory Analysis:

Directory Status Summary
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Directory              Completion    Outdated    Missing
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
docs/                  85%           5           2
docs/api/              60%           8           4
docs/guide/            90%           2           1
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Git Commit Association

The dashboard integrates deeply with Git history, each status links to specific commits:

📄 configuration.md

Change History:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📌 2026-02-28 abc1234 "Update configuration docs"
   Modified by: @username
   Changes: +15 -3 lines

📌 2026-02-20 def5678 "Add new config options"
   Modified by: @another-user
   Changes: +8 lines
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

This file was updated on 2026-02-28, translation is 8 days behind.

Filtering and Search Features

Filter by Language

Select a specific language to only show translation status for that language:

// Filter logic
filterByLanguage('zh-cn')  // Only show Chinese translation status

Use Cases:

Chinese translation lead only wants to see Chinese translation progress
Quickly locate missing translations for specific language

Filter by Status

Quickly filter files that need attention:

Filter Option	Display Content	Use Case
All Status	All files	View overall situation
Only Done	🟢 Green status	Celebrate achievements, confirm completed items
Only Outdated	🟡 Yellow status	Most common - Find translations needing updates
Only Missing	🔴 Red status	Find completely untranslated files

Search by File Path

Supports fuzzy file path search:

Search: [api___________]

Results:
📄 api/overview.md
📄 api/authentication.md
📄 api/endpoints/users.md
📄 api/endpoints/posts.md

Combined Filtering

Multiple filter criteria can be combined:

Language: [Chinese ▼]  Status: [Outdated ▼]  Search: [guide]

Results:
📄 guide/installation.md      🟡 Outdated 3 days
📄 guide/configuration.md     🟡 Outdated 8 days

Dashboard Customization

Custom Theme

Customize dashboard appearance through CSS variables:

/* lunaria-theme.css */
:root {
  --lunaria-color-primary: #6366f1;
  --lunaria-color-success: #22c55e;
  --lunaria-color-warning: #eab308;
  --lunaria-color-danger: #ef4444;

  --lunaria-bg-primary: #ffffff;
  --lunaria-bg-secondary: #f8fafc;
  --lunaria-text-primary: #1e293b;
  --lunaria-text-secondary: #64748b;
}

.dark {
  --lunaria-bg-primary: #0f172a;
  --lunaria-bg-secondary: #1e293b;
  --lunaria-text-primary: #f8fafc;
  --lunaria-text-secondary: #94a3b8;
}

Configuration Customization

Customize dashboard in lunaria.config.json:

{
  "dashboard": {
    "outputDir": "public/i18n-status",
    "title": "My Project Localization Status",
    "description": "Track the translation progress of our documentation",
    "uiLanguage": "zh-cn",
    "customCss": "./lunaria-theme.css",
    "favicon": "./public/favicon.ico"
  }
}

Integration into Existing Site

Embed dashboard into existing documentation site:

Method 1: As a subpath

// astro.config.mjs
export default defineConfig({
  integrations: [
    starlight({
      title: 'My Docs',
      // Dashboard at /i18n-status path
    }),
  ],
});

Method 2: Navigation link

// Add link in documentation site navigation
{
  label: 'Translation Status',
  link: '/i18n-status/',
  icon: 'translate',
}

Add Custom Badges

Add custom badge display in dashboard:

{
  "dashboard": {
    "badges": [
      {
        "label": "Chinese Translation",
        "status": "85%",
        "color": "green"
      },
      {
        "label": "Japanese Translation",
        "status": "70%",
        "color": "yellow"
      }
    ]
  }
}

Practical Tips

1. Check Dashboard Regularly

Recommended times to check the dashboard:

Before weekly team meetings
Before releasing new versions
After adding new source documents
After translation contributors submit PRs

2. Use Dashboard to Assign Tasks

Share dashboard screenshots or links with translation team:

## This Week's Translation Tasks

Please check the [LunariaJS Dashboard](/i18n-status/)

Priority:
1. 🟡 Outdated translations (8 files)
2. 🔴 Missing translations (4 files)

Goal: Complete updates for all outdated translations this week.

3. Set Progress Goals

Display goals in dashboard title:

{
  "dashboard": {
    "title": "Translation Progress (Goal: 90% by end of March)"
  }
}

4. Use Dashboard Data

Dashboard-generated JSON data can be used for other purposes:

// data/status.json
{
  "summary": {
    "total": 42,
    "zh-cn": { "done": 38, "outdated": 3, "missing": 1 },
    "ja": { "done": 30, "outdated": 8, "missing": 4 }
  }
}

You can use this data to:

Generate automated reports
Display badges in README
Trigger CI/CD conditions

Dashboard Best Practices

1. Keep Dashboard Updated

// package.json
{
  "scripts": {
    "build": "astro build && lunaria build",
    "dev": "concurrently \"astro dev\" \"lunaria build --watch\""
  }
}

2. Team Shared Access

Deploy dashboard to public URL
Add dashboard link in contribution guidelines
Regularly share progress in community channels

3. Set Quality Goals

Metric	Target	Check Frequency
Overall completion	≥ 90%	Weekly
Outdated translations	≤ 5	Each PR
Missing translations	0	Before release

4. Dashboard and Issue Integration

Reference dashboard in GitHub Issues:

## Translation Task

Please translate `getting-started.md` to Chinese.

Reference: [Dashboard Status](/i18n-status/#getting-started.md)

Summary

LunariaJS localization dashboard’s core value:

Feature	Value
Visual progress	Understand translation completion at a glance
Status tracking	Automatically identify outdated and missing translations
Git integration	Translation status synced with code history
Filter & search	Quickly locate files needing attention
Customizable	Adapt to project brand and workflow

Key Points:

Three statuses: 🟢 Done, 🟡 Outdated, 🔴 Missing
Use filtering to quickly locate issues
Check dashboard regularly to keep translations synced
Share dashboard with team for better collaboration

Next Steps

In the next article, we’ll dive into LunariaJS’s deep integration with Git, learning how to:

Use Git to track localization changes
Understand outdated translation detection principles
Design efficient team collaboration workflows
Resolve translation issues in branch strategies

Stay tuned!

💡 Recommended Reading:

LunariaJS Documentation

LunariaJS Dashboard Configuration

LunariaJS Chinese Documentation

LunariaJS Japanese Documentation

LunariaJS Korean Documentation