fix(layout): build the page title in frontmatter to stop body-leak

ogwata · claude · ogwata · commit 62c0f0d19f56 · 2026-05-08T18:01:40.000+09:00
The &lt;title&gt; element was assembled inline inside the head:

    &lt;title&gt;{title}{lang === 'ja' ? '｜' : ' | '}Vivliostyle Documentation&lt;/title&gt;

Astro's parser was treating the trailing literal string `Vivliostyle
Documentation` and the close `&lt;/title&gt;` separately from the JSX
expressions, which caused the static build to:

  1. close &lt;title&gt; right after the ternary (so the title became
     e.g. `活用ガイド｜` with no "Vivliostyle Documentation"),
  2. emit `Vivliostyle Documentation` as raw text after &lt;/head&gt;,
  3. fall back to dumping the rest of the layout's head content as
     raw text into the body — including the literal source text
     `isJa &amp;&amp; ( )` from the next conditional block.

For web pages the leaked text was hidden by layout CSS so it went
unnoticed, but Vivliostyle CLI rendered it as a visible orphan
string on a blank cover page in every product's PDF / EPUB
(reported on vivliostyle-cookbook-ja.pdf, but cli/themes/vfm/
viewer/reference/cookbook all share the issue).

Compute fullTitle in the frontmatter as a plain template string and
substitute it with a single `{fullTitle}` interpolation. This keeps
the entire title atomic from the parser's standpoint and the rest of
&lt;head&gt; stays in &lt;head&gt;.

Co-Authored-By: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/src/layouts/DocsLayout.astro b/src/layouts/DocsLayout.astro
@@ -19,6 +19,7 @@ const { title, description = '', lang = 'en', showBreadcrumb = true, availableLa
 const currentPath = Astro.url.pathname;
 
 const isJa = lang === 'ja';
+const fullTitle = `${title}${isJa ? '｜' : ' | '}Vivliostyle Documentation`;
 const navLabels = isJa
   ? {
       product: 'プロダクト',
@@ -81,7 +82,7 @@ const navLinks = {
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content={description}>
-  <title>{title}{lang === 'ja' ? '｜' : ' | '}Vivliostyle Documentation</title>
+  <title>{fullTitle}</title>
   <link rel="icon" type="image/png" href="/favicon.png">
   <link rel="canonical" href={`${Astro.url.origin}${currentPath}`}>
   {availableLanguages.map((language) => (
