feat: New Features セクションを新設し脚注／CMYK／ページグループの実践ガイドを追加#17
Open
feat: New Features セクションを新設し脚注／CMYK／ページグループの実践ガイドを追加#17
Conversation
Set up `/[lang]/new-features/` as a new top-level documentation
section that organises Vivliostyle features by capability rather
than by product. This first commit lands the infrastructure only;
the three guide articles follow in separate commits.
- `src/content.config.ts`: register `new-features-en` /
`new-features-ja` collections backed by VFM loader.
- `src/pages/{en,ja}/new-features/[...slug].astro`: dynamic
routing pages, modelled on the CLI section's flat-list
sidebar (no DownloadLinks for now since this section has no
PDF/EPUB build target yet).
- `content/{en,ja}/new-features/index.md`: section landing page
that introduces the upcoming guides.
Refs #15
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
A practical walk-through of footnote support, structured around
"what was already there" vs "what's new in v2.41.0":
- DPUB-ARIA recognition (`role="doc-noteref"` / `doc-footnote`)
that works without theme CSS thanks to the new built-in UA
stylesheet.
- The standard CSS GCPM 3 `@page { @footnote { } }` rule and
`footnote-display: block | inline | compact`.
- The three VFM `footnote` modes (`pandoc` / `gcpm` / `dpub`),
the object form `{ mode, body }`, and per-file YAML frontmatter
override.
- Terminology aligned with W3C JLReq §4.2 (footnotes / endnotes /
sidenotes).
EN/JA articles authored side-by-side.
Refs #15
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Covers both ends of the CMYK pipeline introduced in v2.40.0: - The CSS `device-cmyk()` function: syntax (space- and comma-separated), alpha, and use across `color`, `background-color`, borders, gradients and `@page`. - Practical process-colour recipes (rich black, process RGB). - CLI post-processing via `pdfPostprocess.cmyk` for whole-document conversion, with `overrideMap` for hand-tuned RGB→CMYK mappings, `mapOutput` for debugging, and `replaceImage` for swapping in pre-converted assets. - Verification with Ghostscript's `inkcov` device. EN/JA articles authored side-by-side. Refs #15 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Explains how to give different chapters of a book different page layouts, building up from named pages to per-group selectors: - `page` property + `@page <name>` rules. - `:nth(An+B)` for selecting pages by position, and combining it with `counter-reset: page <n>` to restart numbering per chapter. - The page-group concept: a run of consecutive pages from a single named-page block, separated by forced page breaks. - `:nth(An+B of <name>)`, new in v2.39.0, for selecting *within* a page group (e.g. "the first page of every chapter"). - A worked example based on CSS GCPM 3 Examples 13 and 14. EN/JA articles authored side-by-side. Refs #15 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Final wiring step. Done last so that earlier commits never refer
to a section that doesn't exist yet.
- `content/{en,ja}/index.md`: add a New Features section to the
homepage with links to the three guides and their target
versions (v2.41.0+ / v2.40.0+ / v2.39.0+).
- `src/components/Breadcrumb.astro`: extend the `sectionNames`
map so paths under `/[lang]/new-features/` render as
"New Features" / "新機能ガイド" instead of the raw segment.
The global navigation in `DocsLayout.astro` is intentionally left
alone: this section is reachable from the homepage and from
inter-article links, and the existing nav layout is already
densely packed.
Closes #15
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Insert "New Features" / "新機能ガイド" between Tutorials and Reference in the global navigation. The new section is internal documentation and sits naturally in the learning path Tutorials → New Features → Reference. - Unify the visible top-level nav font size at 1.1rem (17.6px). `<summary>` (Product / Reference) was already at 1.1rem; bringing `<a>` (Tutorials / FAQ / New Features) up from 0.95rem matches it. Sub-items inside dropdowns and the section headings within them are left at their existing smaller sizes on purpose, since they form a deliberate visual hierarchy. Refs #15 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Per user request: surface the new section first so it's the most visible item in the global navigation. New order: New Features → Product → Tutorials → Reference → FAQ Refs #15 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Latin "FAQ" looked one size smaller than the surrounding kana labels (新機能ガイド / プロダクト / チュートリアル / リファレンス) even though they share the same nominal 1.1rem font-size, because Latin glyphs typically have a smaller x-height than CJK at the same point size. - Add a `.nav-faq` class to the FAQ <a> in the global nav. - On `html[lang="ja"]` only, bump that link to 1.2rem (~9% larger) so it visually matches the kana items. English pages keep the uniform 1.1rem. Refs #15 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The home-page sidebar previously listed only the original four
products plus Reference, which no longer reflects the site's
information architecture (New Features, Tutorials, FAQ now live
in the global nav but were missing from the sidebar).
Restructure the sidebar to mirror the global navigation, in the
same order:
Home
▾ New Features
Overview / Footnotes / CMYK Conversion / Page Groups
▾ Product
Vivliostyle Viewer / CLI / VFM / Themes
Tutorials ↗
▾ Reference
Documentation
Awesome Vivliostyle / Supported CSS Features /
Core API Reference
Contribution Guides
Vivliostyle.js / CLI / VFM / Themes
FAQ ↗
- Reuse the accordion pattern already used on the Reference
pages (button + aria-expanded + toggle JS), with each section
initially expanded so the structure is visible at first glance.
- External links (Tutorials, FAQ) get a "↗" suffix via a CSS
`[target="_blank"]::after` rule so the convention is applied
automatically as more external links are added.
- Subgroup headings ("Documentation" / "Contribution Guides")
inside Reference mirror the same grouping used in the global
nav dropdown.
Refs #15
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Reorganise the L1 / L2 / L3 hierarchy in the new home-page sidebar so each level is clearly subordinate in both size and indent. Both /en/ and /ja/: - L1 toggle / top-level peer (Home, Tutorials, FAQ): 1rem, weight 500, full text colour. Unchanged. - L2 subgroup heading (Documentation, Contribution Guides): 0.9rem, weight 500, muted colour. Was 0.85rem weight 600 with letter-spacing, which made the subgroup look heavier than the parent toggle. - L3 accordion items: 0.85rem, weight 400, full text colour. Previously inherited 1rem from the sidebar default, making them visually larger than their L2 parent. /ja/ only: - L3 indent bumped from 1.5rem to 1.75rem so the L2→L3 gap is exactly 1em (one full-width character). The English page keeps 1.5rem on the user's request — the half-rem gap reads fine for Latin labels but the Japanese full-width characters benefit from a full-em step. Refs #15 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The intro and frontmatter description previously framed the section as "Vivliostyle.js and CLI features", but the guides already span more than two products (the Footnotes guide covers VFM `footnote` modes and theme-base/techbook themes; CMYK covers core CSS + CLI; Page Groups is core CSS only). Reword both the EN and JA index pages so the section is described as cross-product / feature-oriented: - EN intro: "Vivliostyle.js and Vivliostyle CLI features" → "additions across the Vivliostyle ecosystem". - JA intro: "Vivliostyle.js と Vivliostyle CLI の" → "Vivliostyle の", with "プロダクト別ではなく機能別に" added. - "How this section is organised" / "このセクションについて" bodies updated to mention all four products (core CSS, CLI, VFM, themes) instead of just core + CLI. - frontmatter `description` updated to match. Refs #15 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two tweaks to the Footnotes guide based on a readability review. - Intro: previously said "with Vivliostyle" / "Vivliostyleで脚注 を扱う方法を…", which is too vague — readers couldn't tell which product the article was about. Make it explicit: Vivliostyle.js (and VFM), with v2.41.0 spelled out as Vivliostyle.js v2.41.0. Not all readers read the version banner at the top. - JLReq §4.2.6 (sidenotes) link: the anchor used was `processing_of_sidenotes_in_vertical_writing_mode` (plural "sidenotes"), but the actual W3C spec uses the singular `processing_of_sidenote_in_vertical_writing_mode`. The link was 404-ing. Fixed in both EN and JA. Refs #15 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The Footnotes guide has many CSS / VFM examples whose rendering
isn't obvious from code alone. Set up a working directory of
self-contained HTML samples that can be opened in Vivliostyle.js
v2.41.0+ (via \`vivliostyle preview\` or the hosted Viewer) so a
reviewer can capture screenshots and embed them into the guide.
- Pages are intentionally sized 140mm × 90mm (a "strip"-shaped
page) so the body excerpt and footnote area both fit in one
page. Capture the page as-is — no cropping needed, and the
resulting PNGs are small enough to embed inline.
- Seven samples cover the sections of the guide that benefit
from a screenshot:
01 \`<span class="footnote">\` + GCPM-class style
02 VFM Pandoc endnote section
03 DPUB-ARIA aside, no theme CSS (UA stylesheet only)
04 \`@page { @footnote { } }\` + \`::before\` heading
05 \`footnote-display: inline\`
06 \`footnote-display: compact\`
07 \`::footnote-marker\` with \`list-style-position: outside\`
- Separate \`en/\` and \`ja/\` subdirectories so each language
gets its own screenshots embedded later.
- README documents the workflow (preview → capture →
\`public/new-features/footnotes/{en,ja}/<n>-<name>.png\` →
Markdown insertion).
The sources live under \`_screenshots/\` (outside \`public/\`),
so they aren't deployed.
Refs #15
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
When the auto-generated footnote marker (counter(footnote)) is followed by a body that itself begins with a digit, the rendered output reads as a confusing "2 2つめの注" — two numerals in a row, the first being the marker and the second being literal text. Rewrite all such bodies in the Japanese sample HTMLs to use positional words instead of numerals: - "2 つめの注。" → "もう一つの注。" - "後注の本文 1/2。" → "最初の/次の後注の本文。" - "スタイル付き脚注 1/2" → "スタイル付きの脚注。/もう一つの…" - "短い注 1/2/3。" → "短い注/もう一つの短い注/別の短い注。" The English samples don't have this issue (they use English articles and ordinal words like "A second note") and are unchanged. Refs #15 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
\`vivliostyle preview\` creates a .vite/deps/ cache directory next to the previewed file. Two of those files slipped into the previous commit (\`_screenshots/footnotes/ja/.vite/deps/\`). - Remove the accidentally committed cache files. - Add \`.vite/\` to .gitignore so future preview sessions don't re-stage them. Refs #15 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The Footnotes guide claims target versions of Vivliostyle.js v2.41.0+ / CLI v10.5.0+, but the project still pinned the older \`@vivliostyle/cli ^10.3.0\` (which bundles Viewer / core 2.40.0) and \`@vivliostyle/vfm ^2.5.0\`. Running \`vivliostyle preview\` against the screenshot test pages therefore did not exercise the new DPUB-ARIA UA stylesheet behaviour ([role="doc-footnote"] auto-floating to the @footnote area), so the screenshots came out with footnote bodies stuck in the body flow. Bump: - \`@vivliostyle/cli\` ^10.3.0 → ^10.5.0 (now bundles Viewer 2.41.0 and core 2.41.0, matching the guide's claimed target) - \`@vivliostyle/vfm\` ^2.5.0 → ^2.6.0 (adds the new \`footnote\` modes \`gcpm\` / \`dpub\` referenced by the guide) \`npm install\` accepted the new resolutions without lockfile drift surprises, and \`npm run build\` continues to succeed. Refs #15 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The DPUB-ARIA UA stylesheet in Vivliostyle.js leaves
\`::footnote-marker { content }\` empty (the assumption being that
the aside body itself carries the marker, e.g. via an inner
\`<sup>\`). With nothing inside the aside and no author rule, the
sample rendered footnote bodies as flush-left blocks with no
numbers, which made the screenshot hard to read against its
in-body \`¹\` / \`²\` references.
Add a single rule:
::footnote-marker { content: counter(footnote) ". "; }
This restores numerals in the footnote area while preserving the
sample's main point (that float into the @footnote area happens
without theme CSS or any \`@footnote\` rule). Title updated to say
"minimal marker styling" so the small concession is explicit.
Refs #15
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
While preparing the screenshot for the DPUB-ARIA sample, I found
that author-supplied \`::footnote-marker { content: ... }\` is
silently ignored unless \`list-style-position: outside\` is also
set. Reading
\`vivliostyle.js/packages/core/src/vivliostyle/semantic-footnote.ts\`
confirms this is intentional — the implementation only applies
the author's marker content when \`list-style-position\` is
\`outside\`. Without that, DPUB-ARIA notes render with no marker
even though \`content\` is specified.
This is a non-obvious constraint that the guide now needs to
state explicitly:
- §5 (DPUB-ARIA footnote support): add a callout explaining that
the footnote-area marker is empty by default and that authors
must pair \`content\` with \`list-style-position: outside\` to
produce a visible numeral. The callout shows the working
selector \`aside[role="doc-footnote"]::footnote-marker\`
together with \`margin-inline-start\` on the aside to leave
room for the hanging marker.
- §9 (list-style-position: outside): note that \`outside\` is a
hard requirement for DPUB-ARIA, while the GCPM class form
works with either \`inside\` or \`outside\`.
The 03-dpub-aria-default.html screenshot fixtures (en + ja) are
updated to follow the same pattern, so the screenshot now shows
"1. 脚注の本文…" / "2. もう一つの注…" with visible markers, and
the file documents the rule with a comment.
Refs #15
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two real-world findings while capturing screenshots: 03 — DPUB-ARIA default Reaching into Vivliostyle's semantic-footnote logic to drive ::footnote-marker via CSS pseudo-elements turned out to be finicky in practice (the marker silently does not render even with list-style-position: outside, an explicit aside.footnote class, and the test-file backlink pattern). For a fixture whose only job is to show "asides float to the @footnote area with no theme CSS", switch to plain HTML markers — a literal <sup>n</sup> at the start of each aside body. The file then has zero stylesheet rules beyond page geometry / typography, which actually strengthens the "no theme CSS" message. 04 — @page { @footnote { … } } styling The CSS GCPM 3 spec and Vivliostyle's own test fixture both require the form `@footnote ::before` (with a space). The earlier `@footnote::before` (no space) makes the entire @page block invalid, so no @footnote styling applied at all and the asides stayed in the body flow. Add the space and adopt the same inline <sup> marker pattern as 03. Refs #15 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Capture an investigation note for upstream issue triage.
Even when:
- `.footnote { footnote-display: inline }`
- the section-wrap pattern from
`dpub-footnote-display.html`
- the full noteref/backlink pattern with `<sup>` markers
- larger page sizes
…are applied, DPUB-ARIA footnote bodies still render
block-stacked in the @footnote area on
`@vivliostyle/cli@10.5.0` (which bundles
`@vivliostyle/viewer@2.41.0` /
`@vivliostyle/core@2.42.0`).
Strangely, the in-tree test
`dpub-footnote-display.html` itself renders identically
to `footnote-display: block` when previewed locally — so
either the test is checking internal state rather than
visual output, or the feature has regressed since the
test fixture was last updated.
The investigation note records the environment, the
patterns we tried, the relevant source line in
`semantic-footnote.ts`, and a draft Issue body for
filing against vivliostyle/vivliostyle.js. The 05 sample
HTML files are kept in the closest test-matching form so
they can be linked from the upstream Issue as a minimal
reproducer.
Refs #15
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Vivliostyle.js was originally a Japanese-led project and accepts issues in Japanese; rewrite the draft Issue body to Japanese so the maintainers can engage in their first language. Refs #15 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Two screenshots that the upstream Issue will reference via raw GitHub URLs once this branch is pushed: - 01-dpub-footnote-display-test.png — vivliostyle.js's own test fixture dpub-footnote-display.html. The "footnote-display: block" and "footnote-display: inline" sections render identically, so the bug is visible even from the in-tree fixture. - 02-repro-block-stacked.png — minimal docs-site fixture _screenshots/footnotes/ja/05-footnote-display-inline.html. Three short DPUB-ARIA footnote bodies block-stack despite `footnote-display: inline` on `.footnote`. Refs #15 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
`@vivliostyle/cli@10.5.0` pins `@vivliostyle/viewer@2.41.0` as a transitive dependency, so a plain `npm install` resolves Viewer to 2.41.0 even though 2.42.0 is the latest on npm. That meant `vivliostyle preview` was running on Viewer 2.41.0, which lacks the DPUB-ARIA footnote properties / pseudos added in core 2.42.0 (ref vivliostyle/vivliostyle.js#1884, #1933). Add an `overrides` block so the installed Viewer matches the latest published version. Verified locally that `node_modules/@vivliostyle/viewer/package.json` reports 2.42.0 after the override. Refs #15 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Now that `@vivliostyle/viewer` is overridden to ^2.42.0, the
DPUB-ARIA footnote properties / pseudos are actually applied,
which lets these two fixtures finally render their intended
behaviour.
06 — `footnote-display: compact`
Restructure the demo as 3 short notes + 1 long note so the
contrast between compact's "inline-by-default for short notes"
and "block fallback for notes that don't fit on one line" is
visible in a single screenshot. Also adopt the section-wrap
pattern from `dpub-footnote-display.html` and switch to the
noteref / backlink + `<sup>` markup so the markers behave
consistently with file 05.
07 — `::footnote-marker { list-style-position: outside }`
Match the `dpub-footnote-call-marker-outside.html` test
pattern: reset the footnote counter on `:root`, hide the
inline `<sup>` in both noterefs and backlinks, and let
`a.footnote-ref::footnote-call` and
`aside.footnote::footnote-marker` generate the visible
numerals. Without this, the inline `<sup>` and the CSS-
generated marker both rendered, and the marker counter froze
at the post-increment final value (every aside read "2.").
Refs #15
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Now that the screenshot capture environment is producing real output for every code example, embed the resulting 14 PNG files into the Footnotes guide (en + ja) at the spots where the original prose was carrying the explanation alone. The exercise also surfaced a version-banner bug. The guide originally claimed `v2.41.0+` for the entire feature set, but several DPUB-ARIA-specific items were only landed in v2.42.0 (closing vivliostyle/vivliostyle.js#1884): - author CSS for `::footnote-marker` content / list-style-position on DPUB-ARIA `<aside role="doc-footnote">` (§5 callout, §9) - `footnote-display: inline / compact` on DPUB-ARIA semantics (§8) Update the version banner to spell out which features need v2.41.0 vs v2.42.0, add a `package.json` `overrides` note for forcing viewer 2.42.0 since CLI 10.5.0 still bundles 2.41.0, and add v2.42.0+ callouts on the affected sections. Other corrections found while embedding: - §7: change `@footnote::before` to `@footnote ::before` (with a space). Without the space the entire `@page` block is invalid per CSS GCPM 3 and Vivliostyle's own `footnote-before-content.html` test. - §8: move `footnote-display` from inside `@footnote` to `.footnote { footnote-display: ... }` because it applies to the footnote elements themselves, not the @footnote area. - §9: rewrite the example to use `aside.footnote::footnote-marker` with `margin-inline-start` on the aside, matching what actually works under v2.42.0. - Last-updated date bumped to 2026-05-06. Refs #15 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
When troubleshooting `footnote-display: inline` against the older bundled Viewer, fixtures 05 / 06 / 07 were enlarged to 180mm × 110mm in case the smaller page wasn't giving the inline layout enough horizontal room. After the `@vivliostyle/viewer` override moved to 2.42.0 the feature works fine at the original 140mm × 90mm, but the larger source PNGs ended up scaled down more than 01–04 in the article — so the §8 / §9 figures looked smaller than the surrounding ones. Restore the 140mm × 90mm page size on all three fixtures (en and ja) and recapture the screenshots so every figure in the guide reads at the same body-text size. Refs #15 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The single em dash `—` in the Japanese §6 heading sat too close in shape to katakana `ー` (chōonpu) and kanji `一`, which made the heading momentarily ambiguous. Replace it with `――` (two em dashes = 2倍ダッシュ) so the separator reads as clearly longer than either confusable. Refs #15 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new top-level “New Features / 新機能ガイド” documentation section to help users quickly catch up on recent Vivliostyle.js/CLI capabilities, including bilingual practical guides and navigation integration across the docs site.
Changes:
- Introduces
/en/new-features/and/ja/new-features/content collections plus dynamic routing pages for guide articles. - Updates global/header navigation, breadcrumbs, and rebuilds the home-page sidebar into an accordion structure that includes the new section.
- Adds three bilingual guide articles (Footnotes / CMYK / Page Groups), plus screenshot-capture source HTML, and bumps Vivliostyle CLI/VFM dependencies (with a Viewer override).
Reviewed changes
Copilot reviewed 34 out of 52 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/pages/ja/new-features/[...slug].astro | Adds dynamic routing + sidebar + prev/next navigation for JA New Features pages |
| src/pages/ja/index.astro | Replaces JA home sidebar with accordion navigation including New Features |
| src/pages/en/new-features/[...slug].astro | Adds dynamic routing + sidebar + prev/next navigation for EN New Features pages |
| src/pages/en/index.astro | Replaces EN home sidebar with accordion navigation including New Features |
| src/layouts/DocsLayout.astro | Adds “New Features” to global header nav and adjusts nav font sizing (incl. JA FAQ tweak) |
| src/content.config.ts | Registers new-features-en / new-features-ja content collections using vfmLoader |
| src/components/Breadcrumb.astro | Adds new-features section label for EN/JA breadcrumbs |
| package.json | Bumps @vivliostyle/vfm and @vivliostyle/cli, adds Viewer override |
| package-lock.json | Locks updated dependency graph for CLI/VFM/Viewer and transitive updates |
| content/ja/new-features/index.md | New JA New Features index page |
| content/ja/new-features/footnotes.md | New JA Footnotes guide content (incl. screenshots) |
| content/ja/new-features/cmyk.md | New JA CMYK guide content |
| content/ja/new-features/page-groups.md | New JA Page Groups guide content |
| content/ja/index.md | Adds New Features section links to the JA landing content |
| content/en/new-features/index.md | New EN New Features index page |
| content/en/new-features/footnotes.md | New EN Footnotes guide content (incl. screenshots) |
| content/en/new-features/cmyk.md | New EN CMYK guide content |
| content/en/new-features/page-groups.md | New EN Page Groups guide content |
| content/en/index.md | Adds New Features section links to the EN landing content |
| .gitignore | Ignores .vite/ cache directory |
| _screenshots/footnotes/README.md | Documents screenshot capture workflow and directory layout |
| _screenshots/footnotes/ja/01-html-class-themebase.html | JA screenshot source HTML (example 1) |
| _screenshots/footnotes/ja/02-vfm-pandoc-endnotes.html | JA screenshot source HTML (example 2) |
| _screenshots/footnotes/ja/03-dpub-aria-default.html | JA screenshot source HTML (example 3) |
| _screenshots/footnotes/ja/04-page-footnote-styled.html | JA screenshot source HTML (example 4) |
| _screenshots/footnotes/ja/05-footnote-display-inline.html | JA screenshot source HTML (example 5) |
| _screenshots/footnotes/ja/06-footnote-display-compact.html | JA screenshot source HTML (example 6) |
| _screenshots/footnotes/ja/07-footnote-marker-outside.html | JA screenshot source HTML (example 7) |
| _screenshots/footnotes/en/01-html-class-themebase.html | EN screenshot source HTML (example 1) |
| _screenshots/footnotes/en/02-vfm-pandoc-endnotes.html | EN screenshot source HTML (example 2) |
| _screenshots/footnotes/en/03-dpub-aria-default.html | EN screenshot source HTML (example 3) |
| _screenshots/footnotes/en/04-page-footnote-styled.html | EN screenshot source HTML (example 4) |
| _screenshots/footnotes/en/05-footnote-display-inline.html | EN screenshot source HTML (example 5) |
| _screenshots/footnotes/en/06-footnote-display-compact.html | EN screenshot source HTML (example 6) |
| _screenshots/footnotes/en/07-footnote-marker-outside.html | EN screenshot source HTML (example 7) |
| _investigation/footnote-display-inline.md | Investigation notes for footnote-display: inline behavior |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Member
Author
追加対応: submodule 由来の和欧境界スペース問題 (
|
ogwata
added a commit
that referenced
this pull request
May 7, 2026
The /new-features/ pages live on the sibling feat/issue-15-new-features-section branch (PR #17), not on phase5-pdf-epub-publishing (PR #16). Adding a top-level "新機能ガイド" / "New Features" link to the home sidebar from PR #16 caused two issues: 1. The link 404s on this branch — there's no /new-features/ page yet. 2. PR #17 introduces its own home-sidebar entry for new-features (an accordion with sub-items: 概要 / 脚注ガイド / CMYK 変換ガイド / ページグループガイド) on the same line range. Both PRs editing the same `<nav slot="sidebar">` block guarantees a merge conflict. Roll back the link added in 5d58464 to keep PR #16 scoped to the PDF / font / common-sidebar work and let PR #17 land the new-features section in one piece (its accordion already includes the link). When PR #17 merges, the home sidebar will show new-features in its proper structure without conflict against PR #16. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The string literal previously contained an actual U+0000 byte between the single quotes rather than the four-character escape sequence (backslash-u-0-0-0-0). Git's binary-blob heuristic flags any file with a NUL byte in the first 8 KB as binary, which silently disabled the three-way text merge driver on this file — attempts to merge main into this branch produced "Cannot merge binary files" warnings and dropped one side's edits without a conflict marker. Switching to the proper text escape preserves the runtime behaviour of cleanJaeuSpacesInHtml (the regex still matches the single NUL char) but keeps the source pure ASCII so git treats it as text. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Bring PR #16 (PDF/EPUB/WebPub publishing infrastructure) into the New Features branch. The merge driver could not reconcile 15 files automatically; resolutions were applied as follows. Pre-merge fix - src/loaders/vfm-loader.ts had an embedded U+0000 byte in a string literal that tripped git's binary heuristic and disabled three-way text merge. Fixed in the prior commit; this merge now resolves the file as ordinary text. EASY conflicts (kept both sides as additive) - .gitignore: combined .vite/ cache and public/downloads + publications - package.json: kept PR #17's overrides plus PR #16's sharp + vitest - src/layouts/DocsLayout.astro and src/pages/ja/reference/index.astro: unified Reference order to CSS / API / Awesome (matches main) while adopting PR #17's no-half-width-space JA labels per project policy - src/pages/{en,ja}/{cli,themes,vfm}/[...slug].astro and src/pages/{en,ja}/viewer/[...slug].astro: imported both SidebarTocHeadings and DownloadLinks since each is used in distinct regions HARD: viewer slug pages - src/pages/{en,ja}/viewer/[...slug].astro: dropped main's inline vivliostyle-viewer-specific TOC grouping UI in favour of the generic SidebarTocHeadings component (which provides equivalent H2/H3 expand/collapse behaviour), keeping PR #17's sibling-page list pattern. Appended <DownloadLinks> from main so the viewer pages match the cli/themes/vfm slug pattern. MEDIUM/HARD: home index.astro (en + ja) - Hybrid: PR #17's information architecture (New Features section, Reference grouped into Documentation / Contribution Guides subgroups, sidebar-flat for tutorials/FAQ, external-link arrow, .home-sidebar-scoped JS using aria-controls + the hidden attribute) plus main's UX improvements (accordion-header pattern with clickable section title for New Features and Reference; toggle-icon ::before content swap between filled and outline triangles). - Necessary URL corrections discovered during the merge: - tutorials and FAQ external links now use the locale-prefixed paths (/en/, /ja/) per main's commit fixing English nav links - contribution-guide URLs updated to the post-refactor structure (/reference/contribution-guide/{js,cli,vfm,themes}/) since the older /contributing-{cli,vfm,themes}/ paths no longer resolve after main's contribution-guide unification Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Run npm install after the main → feat/issue-15 merge so the lockfile records the resolved tree for the unified dependency set (PR #17's overrides + PR #16's sharp and vitest, and github-slugger which had been declared but not committed to the lockfile). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…merge The main → feat/issue-15 merge silently auto-merged the responsive section of DocsLayout.astro and dropped the intermediate scale-down @media block. PR #17's responsive design was a two-tier: @media (max-width: 1024px) -> shrink nav font/gap (still visible) @media (max-width: 900px) -> hide nav, show hamburger Main had a single @media (max-width: 1024px) -> hide nav. Git aligned the two 1024px wrappers and discarded PR #17's intermediate body, so the post-merge tree only had a 1024px hide block — losing the scale- down stage entirely. Combined with PR #17 adding "New Features" as a fifth nav item, the full-size nav no longer fits in the >1024px range and Japanese labels wrap mid-character because there is no whitespace to break on. Restore the two-tier structure (1024 scale-down, 900 hide) and add white-space: nowrap to .header-nav a, .header-nav summary so labels never wrap inside a single nav item even if a future breakpoint slips. The mobile-menu auto-close threshold in the script is moved back to 900 to match the hide breakpoint. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Member
Author
main 取り込み完了報告
追加した 4 コミット
マージ衝突の解決方針EASY 10 件（両側併記で成立）
viewer slug 2 件
マージで必要となった URL 是正
nav レスポンシブの regression 修正（
|
Member
spring-raining
left a comment
spring-raining
left a comment
There was a problem hiding this comment.
new-featuresの各記事の内容は、プロダクトのリファレンスとは別に一つの機能に着目して紹介するものとして認識していますが、必ずしも「新機能」として紹介するのが良いかは微妙に思えます。それぞれの機能は時間とともに一般化するので、単に目的別のガイドとして用意して、各記事の中でサポートされたバージョンを明記するのはどうでしょうか？
- もし各記事について速報性を重視し、Vivliostyleのアップデートをキャッチアップしてもらうこと自体を目的とするなら、「Release note」「What's new」などのように各バージョンでの変更点を紹介する記事として用意するのも良いアイディアかもしれません。その場合、それぞれの記事のタイトルは「Vivliostyle.js v2.40.0/Vivliostyle CLI v10.5.0のアップデート」などのようにバージョンが入る形になります
- TypeScriptの例: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-6-0.html
- Astroの例 (documentationではなくblogとして書いている): https://astro.build/blog/
- Remove unused `TableOfContents` import from 8 [...slug].astro files
(en/ja × cli/themes/vfm/viewer). Linter/TS warnings cleaned up.
- SidebarTocHeadings.astro: drop the TS generic syntax
`querySelectorAll<HTMLButtonElement>(...)` from the inline `<script>`
block. The generic argument was unused inside the loop and is invalid
plain JS, which Copilot flagged as a build/runtime parse risk.
- SidebarTocHeadings.astro: localize the toggle `aria-label`. The
component is used on both English and Japanese pages but had a
hard-coded Japanese label ("…のサブセクションを開閉"). Add a `lang`
prop with default `'en'`, switch the aria-label to "Toggle
subsections of <heading>" or "<heading> のサブセクションを開閉"
accordingly, and pass `lang` from each of the 8 [...slug].astro
call sites.
- vfm-loader.ts: export `cleanJaeuSpacesInHtml` so it can be tested.
- vfm-loader.test.ts: add 11 unit tests for `cleanJaeuSpacesInHtml`
covering JA-ASCII boundary stripping (both directions), the
fixed-point loop on alternating boundaries, JA+JA / ASCII+ASCII
passthrough, and `<pre>/<code>/<style>/<script>/<kbd>` content
preservation.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…ガイド" Per spring-raining's review on PR #17, the "New Features" framing ages poorly: features that are new today become commonplace tomorrow, but the cross-product, feature-axis grouping these articles use is itself the value. Reframe the section as a Cookbook (en) / 活用ガイド (ja) — practical, feature-oriented guides with each article stating its minimum target version up front. URL also moves from /new-features/ to /cookbook/ to keep the path in sync with the section name (URL-content principle), since renaming the display label without renaming the URL would just shift the inconsistency. Mechanical changes: - git mv content/{en,ja}/new-features/ -> content/{en,ja}/cookbook/ - git mv public/new-features/ -> public/cookbook/ - git mv src/pages/{en,ja}/new-features/ -> src/pages/{en,ja}/cookbook/ - Replace identifier `new-features` -> `cookbook` repo-wide (URL paths, collection names, HTML element ids, Astro content config keys). - Replace camelCase identifier `newFeatures` / `newFeaturesEn` / `newFeaturesJa` in src/layouts/DocsLayout.astro and src/content.config.ts. - Replace display labels: - "新機能ガイド" -> "活用ガイド" - "New Features" -> "Cookbook" in DocsLayout (nav), Breadcrumb, sidebar accordion, slug page fallback titles, and overview index pages. - Update overview prose so the JA description no longer reads "最近の 新機能" (which contradicts the new framing); reword as "最近の追加 機能" to mirror the EN "recent additions across the Vivliostyle ecosystem". Descriptive uses of "新機能" inside individual cookbook articles (e.g. "v2.41.0 の新機能", "v2.6.0新機能" in footnote tables) are left untouched: they describe a specific feature's release timing, not the section name. Verification: - All 8 cookbook routes (`/{en,ja}/cookbook/{,footnotes/,cmyk/,page-groups/}`) resolve to 200; old `/new-features/` paths now return 404 as expected. - Screenshot references `/cookbook/footnotes/{lang}/*.png` resolve. - Global nav and home sidebar show "Cookbook" (en) / "活用ガイド" (ja). - 38 vitest cases still pass. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Member
Author
|
レビューありがとうございます。指摘の核心 ──「『新機能』というラベリングは時間とともに陳腐化する／一方で複数プロダクトを横断した『機能軸』の整理自体には意義がある」── を踏まえて、以下の方針で本 PR 内で対応しました（ad14943）。 変更内容
URL がコンテンツ内容を表す原則を保つため、表示名とパスを同時に変更しました（表示名だけ変えると URL とのズレが残るため）。 保持した部分
これにより、機能リリースの古さに関わらず「目的別ガイド集」として陳腐化しない構造になります。 Release note / What's new 案について挙げてくださった TypeScript / Astro の Release note 方式は、別の有用な情報構造（バージョン軸での速報性）として認識しています。本 PR は機能軸の Cookbook として完結させ、リリースノート系のコンテンツが必要になった段階で別セクションとして検討する想定です。 検証
ご確認のほどよろしくお願いします。 |
§10 page-scope reset 説明文の "章ごとに脚注番号を再開する書籍" は 「再開」だと一度止めたものを再び続ける含意があり、ここで意図する 「各章の頭で 1 から振り直す」挙動と合わない。「新規に採番」の方が カウンタリセットの動きを正確に表すので置き換える。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- src/pages/{en,ja}/cookbook/[...slug].astro: pass lang prop to
SidebarTocHeadings. The earlier Copilot fix (commit 5a9186c) wired
lang through the cli/themes/vfm/viewer slug pages but missed the
new-features slug page (now cookbook). Without lang, the toggle
aria-label rendered as "Toggle subsections of <heading>" even on
Japanese pages.
- src/layouts/DocsLayout.astro: align global-nav Tutorials/FAQ URLs
with the home sidebar. Both now use https://vivliostyle.org/en/...
and https://vivliostyle.org/ja/... — the global nav was previously
using the bare /tutorials/ and /faq/ paths for en pages, which
required the marketing site to redirect.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The home-page Cookbook section was introduced as "Vivliostyle.js and
CLI の最近の追加機能" / "recent Vivliostyle.js and CLI features", but
the section actually covers cross-product material (core CSS, CLI,
VFM, themes), so naming only two of those products in the intro is
misleading.
- ja: "Vivliostyle.jsとCLIの最近の追加機能を実践的に解説:" →
"最近追加された機能を、プロダクトを横断して実践的に解説:"
- en: "Practical guides to recent Vivliostyle.js and CLI features:" →
"Practical, cross-product guides to recently added Vivliostyle features:"
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
「新機能ガイド」のときは「最近の動向 → 概念導入」の通時的な順で 最左端に置いていたが、Cookbook / 活用ガイドへの改名で「機能カタログ」 の性格が強くなったため、起点としては Product（プロダクト）を置く方が 自然。グローバルナビとホームサイドバーの両方で順序を入れ替える。 旧: Cookbook | Product | Tutorials | Reference | FAQ 新: Product | Cookbook | Tutorials | Reference | FAQ Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The Cookbook section was added as web content only. Other product
sections (cli/vfm/themes/viewer/reference) all expose PDF / EPUB /
WebPub downloads in the sidebar via <DownloadLinks>; cookbook had
neither the build configuration nor the download UI. Add both so
cookbook articles are available in the same multi-format set.
- Add vivliostyle.config-cookbook-{en,ja}.js modeled after the
reference configs. Entry list covers index + 3 cookbook articles
(footnotes / cmyk / page-groups). Outputs go to:
public/downloads/vivliostyle-cookbook-{en,ja}.pdf
public/downloads/vivliostyle-cookbook-{en,ja}.epub
public/publications/cookbook-{en,ja}/
- vivliostyle.config-shared.js: extend the PRODUCTS array (and the
JSDoc type) to include 'cookbook' so getCopyAssetExcludes
correctly excludes other-product paths from cookbook builds and
vice versa.
- DownloadLinks.astro / LiveView.astro: extend the product type
union with 'cookbook' and add the fileBase entry
('vivliostyle-cookbook') so DownloadLinks resolves to the right
PDF/EPUB filenames and LiveView builds the right webpub manifest
URL.
- src/pages/{en,ja}/cookbook/[...slug].astro: import DownloadLinks
and place <DownloadLinks product="cookbook" lang=…> inside
<nav slot="sidebar"> after the entry list, matching the cli /
themes / vfm / viewer slug layouts.
- package.json: add build:vivliostyle:cookbook-{en,ja} scripts and
append them to the build:vivliostyle chain so CI's existing
build:formats step generates cookbook outputs alongside the
other products.
Verified locally that build:vivliostyle:cookbook-en produces a
2.9 MB PDF, a 4.4 MB EPUB, and the webpub directory cleanly.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Member
Author
追加変更（前回
|
| Commit | 内容 |
|---|---|
9406cfb docs(home) |
ホームの Cookbook 紹介文を 「Vivliostyle.js と CLI」 限定の表現から 「プロダクトを横断して」 に変更（活用ガイドはコア・CLI・VFM・テーマすべてを対象とするため） |
056eb3d fix(nav) |
グローバルナビとホームサイドバーで Product を最左端、Cookbook をその右隣 に並べ替え。Cookbook（活用ガイド）の起点としては Product が自然と判断 |
0f975a6 feat(cookbook) |
Cookbook の PDF / EPUB / WebPub 生成パイプラインを追加。vivliostyle.config-cookbook-{en,ja}.js 新規作成、PRODUCTS 配列・DownloadLinks / LiveView の product union に 'cookbook' を追加、slug ページサイドバーに <DownloadLinks> 配置、build:vivliostyle:cookbook-{en,ja} スクリプト追加。ローカルで PDF 2.9 MB / EPUB 4.4 MB の生成を確認済み |
Each product (Viewer / CLI / VFM / Themes / Reference / Cookbook) now ships PDF and EPUB built by Vivliostyle CLI from the same Markdown sources, but the home page didn't expose them as a coherent list — only per-product slug pages had a sidebar download widget. Add an H2 "Vivliostyle CLI生成物のダウンロード" / "Downloads (built by Vivliostyle CLI)" right after the VFM Features Demo, with a 6-row table linking each product to its PDF and EPUB. Order matches the sidebar accordion: Product 4 items → Reference → Cookbook. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The <title> element was assembled inline inside the head:
<title>{title}{lang === 'ja' ? '｜' : ' | '}Vivliostyle Documentation</title>
Astro's parser was treating the trailing literal string `Vivliostyle
Documentation` and the close `</title>` separately from the JSX
expressions, which caused the static build to:
1. close <title> right after the ternary (so the title became
e.g. `活用ガイド｜` with no "Vivliostyle Documentation"),
2. emit `Vivliostyle Documentation` as raw text after </head>,
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 && ( )` 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
<head> stays in <head>.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…ibility
`.prose img` had `border-radius: 8px` but no border, so screenshots
that themselves have a near-white background lost their boundary
against the light-mode page background and read as floating text. The
issue was reported on the cookbook footnotes guide (7 typeset-page
screenshots) but the same condition exists on:
- /{en,ja}/cookbook/footnotes/ (7 PNGs each)
- /{en,ja}/themes/gallery/ (9 theme capture WebPs each)
- /{en,ja}/viewer/vivliostyle-viewer/ (UI screenshots)
Add `border: 1px solid var(--color-border)`. The token resolves to
#e5e5e5 in light mode and #404040 in dark mode, so the outline stays
subtle but visible in both schemes — no need for a media query.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Member
Author
追加変更（前回
|
| Commit | 内容 |
|---|---|
62c0f0d fix(layout) |
DocsLayout.astro の <title> タグ内に式と文字列リテラルが混在していたため、Astro パーサが </title> を ternary 直後で誤クローズし、Vivliostyle Documentation と次の {isJa && (...)} ブロックのソーステキストが </head> 以降にリーク。全プロダクトの PDF / EPUB の冒頭に空白ページ＋意味不明文字列が出る問題（cookbook-ja.pdf で発見）。タイトルを frontmatter で template literal として組み立て、<title>{fullTitle}</title> の単純な置換に変更して回避 |
5153a59 fix(css) |
.prose img に border: 1px solid var(--color-border) を追加。明モードでスクリーンショットが背景と境目を失う問題を解消。同種の画像がある cookbook footnotes / themes gallery / viewer/vivliostyle-viewer の 3 系統に同時適用。テーマトークン経由で明/暗どちらも適切なコントラスト |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
概要
Issue #15 の実装。Vivliostyle.js / CLI / VFM などの最近の追加機能をユーザがキャッチアップできるよう、ドキュメントサイトに Cookbook（活用ガイド） セクション (
/en/cookbook/、/ja/cookbook/) を追加し、3 つの実践的ガイド記事を作成しました。あわせてサイト全体のナビゲーションを新セクションに対応させ、脚注ガイドにはレンダリング結果のスクリーンショット 14 枚を埋め込んでいます。Closes #15
追加されたガイド記事（en / ja 両言語）
@page { @footnote { } }、@footnote ::before、footnote-display、::footnote-markerのoutside、VFM の 3 モード（pandoc/gcpm/dpub）device-cmyk()の文法と各プロパティでの利用、CLI のpdfPostprocess.cmyk、overrideMap/mapOutput/replaceImage:nth(An+B of C)、ページグループ単位のカウンタリセット各記事の冒頭に対象バージョン・公開日・最終更新日を明記し、読者が自分の環境で該当機能が使えるか即座に判断できるようにしています。
主な変更点
1. Cookbook セクション基盤
src/content.config.tsにcookbook-en/cookbook-jaコレクションを追加content/{en,ja}/cookbook/にインデックスページと 3 ガイド記事を配置src/pages/{en,ja}/cookbook/[...slug].astroで動的ルーティング2. ナビゲーション統合
:lang(ja)経由で 1.2rem に視覚調整↗記号で外部遷移を明示。L1 / L2 / L3 の階層を font-size・weight・color・インデント量で段階的に区別Breadcrumb.astroのsectionNamesにcookbookを追加（en: "Cookbook"、ja: "活用ガイド"）3. 脚注ガイドへのスクリーンショット埋め込み
_screenshots/footnotes/{en,ja}/に整備（短冊型 140×90mm の自己完結 HTML × 7 種）public/cookbook/footnotes/に配置し、記事の該当節に Markdown 画像参照で埋め込み4. 依存ライブラリの更新
@vivliostyle/cli^10.3.0 → ^10.5.0@vivliostyle/vfm^2.5.0 → ^2.6.0@vivliostyle/viewerをoverridesで^2.42.0にフロア指定（CLI 10.5.0 が同梱する Viewer 2.41.0 を上書きし、DPUB-ARIA 向け footnote プロパティ・擬似要素のサポート vivliostyle/vivliostyle.js#1884 を有効化。2.42.x / 2.43.x 系へのアップデート追従を許容）PR #16 との関係
mainから派生しており、PR Phase 5: PDF/EPUB/WebPub 生成と SSMO ライブデモ #16（PDF/EPUB/WebPub 生成基盤）が main にマージされた後、本ブランチに main を取り込みました（merge commit 113b175）検証項目
npm run devで/{en,ja}/cookbook/および各ガイドが表示されるnpm run buildでエラーなしnpm test（vitest）38 件 pass撮影環境について
_screenshots/footnotes/配下の HTML はソース（プレビュー用）のみで記事には含まれません。再撮影が必要な場合はのように直接プレビューし、
public/cookbook/footnotes/{ja,en}/に PNG を上書き保存してください。詳細は_screenshots/footnotes/README.md。🤖 Generated with Claude Code