MLog

A bilingual blog crafted for our own voice

PROJECT OVERVIEW

MLog: An AI-Enhanced Bilingual Blogging System

MLog is a serverless, content-first blog platform combining AI writing enhancement, in-place admin publishing, and automation-ready operations.

Tech Stack & Architecture

We built a low-ops and maintainable publishing workflow while keeping performance and readability first.

  • Next.js App Router + TypeScript + Tailwind v4 + Framer Motion
  • Git + Markdown content model with zh/en routing and strict frontmatter contracts
  • Vercel serverless deployment: production auto-deploys, PR previews, and scheduled cron jobs
  • Complete SEO baseline: metadata, canonical, hreflang, RSS, sitemap, and robots
Next.jsTypeScriptTailwind v4Vercel

Core Feature Matrix

The first release covers the end-to-end loop of writing, publishing, discovery, subscription, and feedback.

  • Bilingual site with /zh and /en, including search, tag, category, and shareable filter params
  • Post detail supports TOC anchors, previous/next navigation, reading time, and locale fallback notice
  • Admin supports create/edit/delete, media upload, draft save, and publishing
  • Publishing flow creates a PR and attempts auto-merge, with manual fallback when needed
BilingualAdminSearchPublishing

Product Highlights

The product is designed for long-term evolution, with maintainability and observability built into each workflow.

  • Git as source of truth: content changes are auditable, reviewable, and rollback-friendly
  • Unified glassmorphism design language shared by public pages and admin pages
  • Pluggable comments and analytics: Giscus + Umami with graceful fallback behavior
  • Structured error codes, request IDs, and operation logs for fast troubleshooting
ObservabilityAuditabilityGlassmorphismComposable

Innovation Layer

AI here is an execution layer inside publishing, not a gimmick: blocking, fallback, and traceability come first.

  • AI bilingual enhancement: publish in one locale and auto-complete the counterpart locale
  • Automatic frontmatter enrichment: summary, tags, and category generation when fields are empty
  • Provider failover strategy: Gemini / OpenAI-compatible / DeepSeek / Qwen
  • Automated topic pipeline: scheduled GitHub hot-project curation and content generation
AI BilingualProvider FallbackFail-SafeAutomation