Building a Blazing Fast, Multi-Language Game Database with Astro (Zero JS)

Hey developers! 👋

I recently took on a challenge: building a comprehensive Wiki/Database for the open-world RPG "Where Winds Meet".

The problem with most modern game wikis (like Fandom) is that they are bloated, slow, and covered in ads. I wanted to build something different:

1. Instant Load Times (100/100 Lighthouse score).
2. Full i18n Support (English, Chinese, French, Spanish, Vietnamese).
3. Open Source and community-driven.

Here is how I built it using Astro and Static Site Generation (SSG).

🛠️ The Stack

• Framework: Astro (for zero-JS by default).
• Styling: Tailwind CSS (utility-first).
• Data Source: JSON files (simulating a CMS without the overhead).
• SEO: Schema.org structured data (JSON-LD) for rich results.

🚀 Key Technical Challenges

1. Handling Dynamic Routes for 5 Languages

I used Astro's getStaticPaths to generate thousands of pages at build time. The logic unwraps nested JSON data to create paths like /en/weapons/spear-01 and /zh/weapons/spear-01 automatically.

typescript
// Simplified example of my path generation
export async function getStaticPaths() {
  const languages = ['en', 'zh', 'fr', 'es', 'vi'];
  return languages.flatMap((lang) => {
    // Logic to read JSON files...
    return weapons.map((w) => ({
      params: { lang, id: w.id },
      props: { weapon: w },
    }));
  });
}
Since this is a database, every page needs unique metadata. I created a dynamic SEO utility that injects specific stats (like "Attack Power" or "Tier Ranking") directly into the <meta description> tag. This prevents "Duplicate Content" penalties from Google.

3. Component Architecture
I built reusable components like <StatsPanel /> and <WeaponHero />. The cool part? Because it's Astro, these components ship zero client-side JavaScript to the browser. It's just pure HTML/CSS.

📈 The Result
The site is live and serves as a fast reference for players.

Live Demo: [ https://wwm-db.com/ ]

🙌 Contributing
The project is fully open-source. If you are learning Astro or want to see how to structure a large content site, feel free to check out the repo!

Comments and PRs are welcome!