[docs] Redesign blog homepage with filterable article cards

[wuchong]

Purpose

The current blog index combines an ever-growing sidebar of titles with long, full-width article excerpts. This gives readers very little information per screen: they must scroll through substantial portions of posts before they can identify the few articles relevant to them.

Modern project blogs such as LanceDB, Daft, and Apache Doris use compact card-based overviews that make an archive easier to scan. This PR brings that approach to Fluss: readers can compare covers, titles, short summaries, and categories at a glance, then narrow the archive to their interests.

Dependency and merge order

Depends on apache/fluss-blog#17. Please merge the blog content PR first.

website/setup_blog.sh fetches apache/fluss-blog from main during website setup. The companion PR provides the four-category taxonomy, concise descriptions, and standardized covers used in the previews below. This PR keeps the normal upstream content source; it does not pin deployments to a personal fork.

Brief change log

• Replace the title sidebar and expanded excerpts with a responsive three-, two-, or one-column card grid. Each card shows a cover, title, author, date, short summary, and clickable category tags.
• Feature the newest article above the filters. On narrow screens, stack its image above the text while preserving the same 40:17 cover aspect ratio as regular cards.
• Add Announcement, Case Study, Engineering, and Guides filters with counts and shareable URL state. Initially show nine archive cards, with a control to load nine more at a time.
• Derive missing cover and summary metadata from older posts, normalize relative cover paths for Docusaurus, and document the category and 1200 × 510 cover conventions.
• Support light/dark themes, visible keyboard focus, and larger tag/filter controls; simplify the page by removing the visible RSS shortcut and redundant featured-story labels.

Preview

The screenshots combine website commit 2748aeb0f437adb27934cad993532a1d996fc8e7 with blog content commit 2ea0a97a5a16d93f0c72b68decf022884b26bdff. They are full-page captures, including the footer, hosted separately from the production change at immutable commit URLs.

Desktop — complete initial page (1440 px wide)

Entire archive — all 31 articles loaded

Open the full-resolution archive preview

Mobile — complete initial page (390 px wide)

Dark mode — complete initial page

To reproduce the combined preview before the dependency is merged, run from website/:

BLOG_REPO=https://github.com/wuchong/fluss-blog.git BLOG_BRANCH=blog-card-metadata ./setup_blog.sh
npm run build -- --no-minify
npm run serve -- --host 127.0.0.1 --port 3100

Tests

• Website production build: npm run build -- --no-minify passed after rebasing onto the latest main.
• Website TypeScript check: npm run typecheck passed after the build.
• Root-level Maven checks: ./mvnw -N -B verify spotless:check passed, including license and formatting checks. No Java runtime code changed; the full Java module test suite was not run.
• Companion blog source: npm run build passed; all 31 articles have one or two supported tags and the 30 new covers have the documented dimensions. Existing article bodies remain unchanged.
• Browser checks passed for all four filters (10 Announcement, 3 Case Study, 14 Engineering, 5 Guides), URL refresh, loading all 31 articles, light/dark mode, and widths of 1440, 800, 390, and 320 px without horizontal page overflow or page errors.
• git diff --check passed in both repositories. Existing broken-anchor warnings in the website and link warnings in the standalone blog build remain.

API and Format

No Java API, wire protocol, or storage format changes. The companion PR consolidates blog categories, so the generated category/tag routes reflect the new taxonomy.

Documentation

Update the blog contribution guide with card descriptions, category definitions, and cover-image requirements. The companion PR also updates the blog repository README.

Generative AI used: OpenAI Codex (gpt-6-astra).