#Blog and Latest Banner

The template includes a file-based blog system and app-specific latest-post banner routes.

#Blog content structure

public/blogs/[appSlug]/[postSlug]/[locale].html

Each blog HTML file must include a BLOG_META JSON block at the top.

Example:

<!--BLOG_META
{
  "title": "Post title",
  "description": "Short summary",
  "appSlug": "your-app",
  "slug": "post-slug",
  "locale": "en-US",
  "publishedAt": "2026-03-01",
  "modifiedAt": "2026-03-01",
  "coverImage": "./images/cover.png",
  "tags": ["release", "update"]
}
-->

#Code Blocks (Shiki Highlighting)

Blog article pages apply Shiki syntax highlighting on the server. Use <pre><code class="language-..."> to get language-specific highlighting.

Example:

<pre><code class="language-ts">const sum = (a: number, b: number) =&gt; a + b;
console.log(sum(1, 2));
</code></pre>

Supported languages (with aliases): ts, tsx, js, jsx, json, bash, html, css, yaml, markdown.

If no language (or an unsupported language) is provided, it falls back to plain text (txt).

#Blog routes

  • /{locale}/blogs: all blog categories/apps
  • /{locale}/blogs/{appSlug}: posts for one app
  • /{locale}/blogs/{appSlug}/{slug}: article detail page

#Latest banner routes per app

  • /{locale}/blogs/{appSlug}/banner/latest
    • fullscreen banner page for the latest post
  • /{locale}/blogs/{appSlug}/banner/latest/redirect
    • redirects users to the latest post and app store links

Latest post selection is date-based using blog metadata (publishedAt then modifiedAt).

#Product detail page integration

Product detail pages show recent blog posts automatically when posts exist for that app slug.

Setup ProjectDeveloper Profile