### Setup vivliostyle-cli Development Environment Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/CONTRIBUTING.md This snippet details the steps to clone the repository, install dependencies using pnpm, and start the development watch mode. ```bash git clone https://github.com/vivliostyle/vivliostyle-cli.git && cd vivliostyle-cli pnpm install ``` -------------------------------- ### Install Vivliostyle CLI Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/docs/getting-started.md Installs the Vivliostyle CLI globally using npm. Requires Node.js version 16 or later. ```bash npm install -g @vivliostyle/cli ``` -------------------------------- ### Vivliostyle CLI Help Commands Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/docs/getting-started.md Displays help information for Vivliostyle CLI commands, including general help and specific command help. ```bash vivliostyle help ``` ```bash vivliostyle help init ``` ```bash vivliostyle help build ``` ```bash vivliostyle help preview ``` -------------------------------- ### Preview Typesetting Result Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/docs/getting-started.md Previews the typesetting result of HTML, Markdown, or EPUB files in a browser using the Vivliostyle Viewer. ```bash vivliostyle preview index.html ``` ```bash vivliostyle preview manuscript.md ``` ```bash vivliostyle preview epub-sample.epub ``` -------------------------------- ### Generate PDF from EPUB or JSON Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/docs/getting-started.md Generates PDFs from EPUB files or JSON manifest files (pub-manifest). ```bash vivliostyle build epub-sample.epub -o epub.pdf ``` ```bash vivliostyle build publication.json -o webpub.pdf ``` -------------------------------- ### Quick Preview of Publications Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/docs/getting-started.md Quickly previews publications composed of multiple documents using rough page count estimation for faster loading. Page numbers may be inaccurate. ```bash vivliostyle preview index.html --quick ``` ```bash vivliostyle preview publication.json --quick ``` ```bash vivliostyle preview epub-sample.epub --quick ``` -------------------------------- ### Generate PDF from HTML or Markdown Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/docs/getting-started.md Builds a PDF document from an HTML or Markdown file. The output file defaults to 'output.pdf'. ```bash vivliostyle build index.html ``` ```bash vivliostyle build manuscript.md -s A4 -o paper.pdf ``` -------------------------------- ### Generate PDF from Web URL Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/docs/getting-started.md Builds a PDF from a web URL, specifying the input HTML and output PDF file, along with paper size. ```bash vivliostyle build https://vivliostyle.github.io/vivliostyle_doc/samples/gutenberg/Alice.html -s A4 -o Alice.pdf ``` -------------------------------- ### Specify Output PDF File Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/docs/getting-started.md Generates a PDF from an HTML file and specifies the output file name using the -o or --output option. ```bash vivliostyle build book.html -o book.pdf ``` -------------------------------- ### Vivliostyle Configuration File Example (JavaScript) Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/docs/using-config-file.md Provides an example of a `vivliostyle.config.js` file, demonstrating how to define publication metadata such as title, author, language, and entry points. It also shows how to specify themes and output formats. ```javascript // @ts-check /** @type {import('@vivliostyle/cli').VivliostyleConfigSchema} */ const vivliostyleConfig = { title: 'Principia', author: 'Isaac Newton', language: 'la', image: 'ghcr.io/vivliostyle/cli:latest', entry: [ ... ], }; module.exports = vivliostyleConfig; ``` -------------------------------- ### Start Eleventy Dev Server Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/examples/with-eleventy/README.md Command to start the Eleventy development server. After execution, the Vivliostyle Viewer can be accessed via a specific URL to preview publications. ```sh npm run start ``` -------------------------------- ### Start Astro Dev Server and Vivliostyle Viewer Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/examples/with-astro/README.md Starts both the Astro development server and the Vivliostyle Viewer simultaneously for real-time preview during development. This command is typically used for the writing phase. ```sh npm run dev ``` -------------------------------- ### Release vivliostyle-cli: Enter Pre-release Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/CONTRIBUTING.md This command is used by maintainers to initiate a pre-release of the vivliostyle-cli package, tagging it as 'next'. ```bash release-it --preRelease=beta --npm.tag=next ``` -------------------------------- ### Markdown Code Block Syntax Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/examples/with-astro/src/content/blog/markdown-style-guide.md Explains how to create code blocks in Markdown using triple backticks, with an option to specify the language for syntax highlighting. Includes an example of an HTML code block. ```markdown ```html Example HTML5 Document

Test

``` ``` -------------------------------- ### Markdown Ordered List Syntax Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/examples/with-astro/src/content/blog/markdown-style-guide.md Demonstrates the syntax for creating ordered lists in Markdown, using numbered items. ```markdown 1. First item 2. Second item 3. Third item ``` -------------------------------- ### Release vivliostyle-cli: Graduate to Stable Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/CONTRIBUTING.md This command graduates a pre-release version to a stable release for the vivliostyle-cli package. ```bash pnpm release ``` ```bash release-it ``` -------------------------------- ### Markdown Other Elements Syntax Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/examples/with-astro/src/content/blog/markdown-style-guide.md Provides syntax examples for various other Markdown elements, including abbreviations, subscripts, superscripts, keyboard input, and marked text. ```markdown GIF is a bitmap image format. H2O Xn + Yn = Zn Press CTRL + ALT + Delete to end the session. Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures. ``` -------------------------------- ### Markdown Table Syntax Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/examples/with-astro/src/content/blog/markdown-style-guide.md Illustrates the Markdown syntax for creating tables, including column alignment using hyphens and pipes. ```markdown | Italics | Bold | Code | | --------- | -------- | ------ | | _italics_ | **bold** | `code` | ``` -------------------------------- ### Install Vivliostyle CLI Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/README.md Installs the Vivliostyle CLI globally using npm. This command is essential for making the vivliostyle command available in your terminal. ```bash npm install -g @vivliostyle/cli ``` -------------------------------- ### Install Bunko Theme with Yarn Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/examples/theme-preset/themes/packages/@vivliostyle/theme-bunko/README.md This snippet shows how to add the Bunko theme package to your project using the yarn package manager. ```bash yarn add @vivliostyle/theme-bunko ``` -------------------------------- ### JavaScript Diff Example Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/examples/with-eleventy/content/blog/firstpost.md Demonstrates a JavaScript code snippet with added and removed lines, typical for version control or patch applications. Includes a console log for testing. ```javascript // this is a command function myCommand() { + let counter = 0; - let counter = 1; counter++; } // Test with a line break above this line. console.log('Test'); ``` -------------------------------- ### Start Astro Dev Server Only Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/examples/with-astro/README.md Starts only the Astro development server without launching the Vivliostyle Viewer. This is useful if you only need to test the Astro application itself. ```sh npm run astro dev ``` -------------------------------- ### Release vivliostyle-cli: Bump Pre-release Version Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/CONTRIBUTING.md This command bumps the pre-release version of the vivliostyle-cli package, suitable for testing new features before a stable release. ```bash pnpm release:pre ``` ```bash release-it --preRelease --npm.tag=next ``` -------------------------------- ### Markdown Unordered List Syntax Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/examples/with-astro/src/content/blog/markdown-style-guide.md Shows the syntax for creating unordered lists in Markdown, using hyphens or asterisks for list items. ```markdown - List item - Another item - And another item ``` -------------------------------- ### Markdown Image Syntax Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/examples/with-astro/src/content/blog/markdown-style-guide.md Demonstrates the syntax for including images in Markdown, specifying the alt text and the relative or absolute path to the image file. ```markdown ![Alt text](./full/or/relative/path/of/image) ``` -------------------------------- ### Vivliostyle CLI Configuration Example Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/examples/customize-generated-content/README.md This JavaScript configuration file (`vivliostyle.config.js`) sets up the Vivliostyle CLI for document generation. It specifies the title, language, entry points for the manuscript and custom templates (cover and ToC), output file, and options for TOC and cover customization. ```javascript module.exports = { title: 'ToC customization example', language: 'en', entry: [ { rel: 'cover', path: 'cover-template.html', output: 'cover.html', }, { rel: 'contents', path: 'toc-template.html', output: 'toc.html', }, './manuscript/01_Computing Paradigms.md', './manuscript/02_Algorithm Design and Analysis.md', './manuscript/03_Systems and Architecture.md', ], output: 'draft.pdf', toc: { sectionDepth: 2, title: 'My awesome contents', }, cover: { src: 'cover-image.jpg', name: 'My awesome cover', }, }; ``` -------------------------------- ### Vivliostyle CLI: Use npm Vivliostyle Theme Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/docs/themes-and-css.md Applies a theme published as an npm package. The CLI automatically installs the theme if it's not found locally, simplifying the process of using pre-designed styles. ```bash vivliostyle build manuscript.md --theme @vivliostyle/theme-techbook -o paper.pdf ``` -------------------------------- ### Vivliostyle CLI Usage Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/README.md Provides an overview of the Vivliostyle CLI commands and options. It lists available commands such as 'init', 'build', 'preview', and 'help', along with general options like version and help flags. ```bash Usage: vivliostyle [options] [command] Options: -v, --version output the version number -h, --help display help for command Commands: init create vivliostyle config build build and create PDF file preview launch preview server help [command] display help for command ``` -------------------------------- ### Initialize Vivliostyle Configuration Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/README.md Creates a Vivliostyle configuration file. This is the first step for setting up a new project with Vivliostyle. ```bash vivliostyle init ``` -------------------------------- ### Vivliostyle CLI init Options Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/README.md Lists the available options for the 'vivliostyle init' command, used to customize the creation of the Vivliostyle configuration file. Options include title, author, language, size, theme, and log level. ```bash Options: --title title --author <author> author -l, --language <language> language -s, --size <size> paper size -T, --theme <theme> theme --log-level <level> specify a log level of console outputs (choices: "silent", "info", "verbose", "debug", default: "info") -h, --help display help for command ``` -------------------------------- ### Use Vivliostyle CLI as a Vite Plugin in Astro Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/docs/frontend-framework-support.md Integrates Vivliostyle CLI into an Astro project by using it as a Vite plugin. This allows simultaneous use of Astro's features and Vivliostyle CLI for publication generation. The example shows how to automatically open the Vivliostyle Viewer on server start. ```typescript import { createVitePlugin } from '@vivliostyle/cli'; import { defineConfig } from 'astro/config'; export default defineConfig({ vite: { plugins: [ createVitePlugin({ openViewer: true, }), ], }, }); ``` -------------------------------- ### Initialize Vivliostyle Project Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/docs/api-javascript.md The init() function initializes a new vivliostyle.config.js file. It accepts a wide range of options to configure the project, such as author, CSS paths, rendering mode, and viewer settings. This function returns a Promise that resolves with void. ```JavaScript import vivliostyle from "vivliostyle-cli"; // Example usage: vivliostyle.init({ author: "Your Name", css: "styles.css", output: "output.pdf" }); ``` -------------------------------- ### Markdown Nested List Syntax Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/examples/with-astro/src/content/blog/markdown-style-guide.md Illustrates how to create nested lists in Markdown, showing indentation for sub-items within a list. ```markdown - Fruit - Apple - Orange - Banana - Dairy - Milk - Cheese ``` -------------------------------- ### Configuring Multiple Outputs in Vivliostyle Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/docs/using-config-file.md Demonstrates how to configure multiple output destinations and formats for Vivliostyle builds. This includes specifying PDF, EPUB, and WebPub formats, along with custom paths for each output. ```javascript output: [ './output.pdf', { path: './book', format: 'webpub', }, ], ``` -------------------------------- ### Build Astro Project and Vivliostyle CLI Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/examples/with-astro/README.md Executes the build process for both Astro and Vivliostyle CLI. First, it builds the Astro project to generate static HTML files, then it runs the Vivliostyle CLI build to process these files. ```sh npm run astro build npm run vivliostyle build ``` -------------------------------- ### Initialize Vivliostyle Configuration Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/docs/using-config-file.md Initializes a new Vivliostyle configuration file named `vivliostyle.config.js` in the current directory. This command sets up a basic structure for customizing your publication build process. ```bash vivliostyle init ``` -------------------------------- ### Markdown Blockquote Syntax Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/examples/with-astro/src/content/blog/markdown-style-guide.md Shows how to create blockquotes in Markdown, with and without attribution. The syntax allows for nested Markdown elements within the quote. ```markdown > Tiam, ad mint andaepu dandae nostion secatur sequo quae. > **Note** that you can use _Markdown syntax_ within a blockquote. ``` ```markdown > Don't communicate by sharing memory, share memory by communicating.<br> > — <cite>Rob Pike[^1]</cite> ``` -------------------------------- ### Vivliostyle Preview Command Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/README.md Executes the 'preview' command for Vivliostyle CLI, which opens a preview page and allows for interactive PDF saving. ```bash vivliostyle preview ``` -------------------------------- ### Build Eleventy and Vivliostyle CLI Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/examples/with-eleventy/README.md Commands to execute the Eleventy build followed by the Vivliostyle CLI build. These steps are necessary for Vivliostyle CLI to reference the HTML files generated by Eleventy. ```sh npm run eleventy npm run vivliostyle build ``` -------------------------------- ### TypeScript: Greeting Function Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/examples/customize-processor/manuscript.html A simple TypeScript function that takes a name as a string and returns a greeting message. This function demonstrates basic string interpolation in TypeScript. ```TypeScript export async function greet(name: string): string { return `Hello, ${name}`; } ``` -------------------------------- ### Execute Command Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/examples/with-eleventy/content/blog/thirdpost.md This snippet demonstrates a basic JavaScript command execution. It initializes a counter and increments it, followed by a console log. This is a common pattern for simple script operations. ```javascript // this is a command function myCommand() { let counter = 0; counter++; } // Test with a line break above this line. console.log('Test'); ``` -------------------------------- ### Vivliostyle CLI: Add Crop Marks Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/docs/themes-and-css.md Adds crop marks to the output PDF, which are guides for trimming printed materials. Options for bleed width and offset are also available. ```bash vivliostyle build example.html -m ``` ```bash vivliostyle build example.html -m --bleed 5mm ``` ```bash vivliostyle build example.html -m --crop-offset 20mm ``` -------------------------------- ### Vivliostyle CLI: Local Theme Configuration Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/examples/local-theme/README.md Demonstrates how to specify a local theme in the vivliostyle.config.js file. The path must be prefixed with './' to ensure the CLI recognizes it as a local directory rather than an npm package. ```JavaScript module.exports = { theme: './theme' }; ``` -------------------------------- ### Configure Static File Serving (JavaScript) Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/docs/config.md Demonstrates how to configure static files to be served by the Vivliostyle preview server using a JavaScript object. ```javascript export default { static: { '/static': 'path/to/static', '/': ['root1', 'root2'], }, }; ``` -------------------------------- ### Configure Eleventy for Vivliostyle Vite Plugin Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/examples/with-eleventy/README.md JavaScript configuration for Eleventy to integrate the Vivliostyle CLI's Vite plugin. This setup is crucial for enabling the Vivliostyle Viewer within the Eleventy project. ```js import pluginVite from '@11ty/eleventy-plugin-vite'; import { createVitePlugin } from '@vivliostyle/cli'; eleventyConfig.addPlugin(pluginVite, { viteOptions: { plugins: [createVitePlugin()], }, }); ``` -------------------------------- ### Apply rehype-expressive-code Styling Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/examples/customize-processor/manuscript.html This CSS applies styling for code blocks rendered by rehype-expressive-code. It defines styles for the overall container, pre and code elements, line highlighting, and scrollbars, ensuring a visually appealing and functional code display. ```CSS .expressive-code{font-family:var(--ec-uiFontFml);font-size:var(--ec-uiFontSize);font-weight:var(--ec-uiFontWg);line-height:var(--ec-uiLineHt);text-size-adjust:none;-webkit-text-size-adjust:none}.expressive-code *:not(path){all:revert;box-sizing:border-box}.expressive-code pre{display:flex;margin:0;padding:0;border:var(--ec-brdWd) solid var(--ec-brdCol);border-radius:calc(var(--ec-brdRad) + var(--ec-brdWd));background:var(--ec-codeBg)}.expressive-code pre:focus-visible{outline:3px solid var(--ec-focusBrd);outline-offset:-3px}.expressive-code pre > code{all:unset;display:block;flex:1 0 100%;padding:var(--ec-codePadBlk) 0;color:var(--ec-codeFg);font-family:var(--ec-codeFontFml);font-size:var(--ec-codeFontSize);font-weight:var(--ec-codeFontWg);line-height:var(--ec-codeLineHt)}.expressive-code pre{overflow-x:auto}.expressive-code pre.wrap .ec-line .code{white-space:pre-wrap;overflow-wrap:break-word;min-width:min(20ch, var(--ecMaxLine, 20ch))}.expressive-code pre.wrap .ec-line .code span.indent{white-space:pre}.expressive-code pre::-webkit-scrollbar,.expressive-code pre::-webkit-scrollbar-track{background-color:inherit;border-radius:calc(var(--ec-brdRad) + var(--ec-brdWd));border-top-left-radius:0;border-top-right-radius:0}.expressive-code pre::-webkit-scrollbar-thumb{background-color:var(--ec-sbThumbCol);border:4px solid transparent;background-clip:content-box;border-radius:10px}.expressive-code pre::-webkit-scrollbar-thumb:hover{background-color:var(--ec-sbThumbHoverCol)}.expressive-code .ec-line{direction:ltr;unicode-bidi:isolate;display:grid;grid-template-areas:'gutter code';grid-template-columns:auto 1fr;position:relative}.expressive-code .ec-line .gutter{grid-area:gutter;color:var(--ec-gtrFg)}.expressive-code .ec-line .gutter > *:not(path){pointer-events:none;user-select:none;-webkit-user-select:none}.expressive-code .ec-line .gutter ~ .code{--ecLineBrdCol:var(--ec-gtrBrdCol)}.expressive-code .ec-line.highlight .gutter{color:var(--ec-gtrHlFg)}.expressive-code .ec-line .code{grid-area:code;position:relative;box-sizing:content-box;padding-inline-start:calc(var(--ecIndent, 0ch) + var(--ec-codePadInl) - var(--ecGtrBrdWd));padding-inline-end:var(--ec-codePadInl);text-indent:calc(var(--ecIndent, 0ch) * -1)}.expressive-code .ec-line .code::before,.expressive-code .ec-line .code::after,.expressive-code .ec-line .code :where(*){text-indent:0}.expressive-code .ec-line .code{--ecGtrBrdWd:var(--ec-gtrBrdWd);border-inline-start:var(--ecGtrBrdWd) solid var(--ecLineBrdCol, transparent)}.expressive-code :nth-child(1 of .ec-line) .code{padding-inline-end:calc(2rem + var(--ec-codePadInl))}.expressive-code .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.expressive-code .ec-line.mark{--tmLineBgCol:var(--ec-tm-markBg)}.expressive-code .ec-line.mark .code{--ecLineBrdCol:var(--ec-tm-markBrdCol)}.expressive-code .ec-line.ins{--tmLineBgCol:var(--ec-tm-insBg);--tmLabel:var(--ec-tm-insDiffIndContent)}.expressive-code .ec-line.ins .code{--ecLineBrdCol:var(--ec-tm-insBrdCol)}.expressive-code .ec-line.ins .code::before{color:var(--ec-tm-insDiffIndCol)}.expressive-code .ec-line.del{--tmLineBgCol:var(--ec-tm-delBg);--tmLabel:var(--ec-tm-delDiffIndContent)}.expressive-code .ec-line.del .code{--ecLineBrdCol:var(--ec-tm-delBrdCol)}.expressive-code .ec-line.del .code::before{color:var(--ec-tm-delDiffIndCol)}.expressive-code .ec-line.mark,.expressive-code .ec-line.ins,.expressive-code .ec-line.del{background:var(--tmLineBgCol)}.expressive-code .ec-line.mark .code,.expressive-code .ec-line.ins .code,.expressive-code .ec-line.del .code{--ecGtrBrdWd:var(--ec-tm-lineMarkerAccentWd)}.expressive-code .ec-line.mark .code::before,.expressive-code .ec-line.ins .code::before,.expressive-code .ec-line.del .code::before{display:block;position:absolute;left:0;box-sizing:border-box;content:var(--tmLabel, ' ');padding-inline-start:var(--ec-tm-lineMarkerLabelPadInl);text-align:center;white-space:pre}.expressive-code .ec-line.mark.tm-label .code::before,.expressive-code .ec-line.ins.tm-label .code::before,.expressive-code .ec-line.del.tm-label .code::before{background:var(--ecLineBrdCol);padding:0 calc(var(--ec-tm-lineMarkerLabelPadInl) + var(--ec-tm-lineMarkerAccentWd)) 0 var(--ec-tm-lineMarkerLabelPadInl);color:var(--ec-tm-lineMarkerLabelCol)}.expressive-code .ec-line mark{--tmInlineBgCol:var(--ec-tm-markBg);--tmInlineBrdCol:var(--ec-tm-markBrdCol)}.expressive-code .ec-line ins{--tmInlineBgCol:var(--ec-tm-insBg);--tmInlineBrdCol:var(--ec-tm-insBrdCol)}.expressive-code .ec-line del{--tmInlineBgCol:var(--ec-tm-delBg);--tmInlineBrdCol:var(--ec-tm-delBrdCol)}.expressive-code .ec-line mark,.expressive-code .ec-line ins,.expressive-code .ec-line del{all:unset;display:inline-block;position:rel ``` -------------------------------- ### Configure Vivliostyle CLI Preflight Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/examples/preflight/README.md This JavaScript configuration sets up Vivliostyle CLI for PDF generation, including options for preflight post-processing like 'press-ready' for print-ready PDFs. It specifies the output paths and applies 'press-ready' with options such as 'gray-scale' and 'enforce-outline'. ```javascript module.exports = { title: 'Preflight', language: 'en', size: 'letter', entry: 'manuscript.html', // Docker image name for preflight image: 'ghcr.io/vivliostyle/cli:latest', output: [ { path: 'draft.pdf', }, { path: 'draft_press_ready.pdf', // press-ready: runs press-ready on Docker container // press-ready-local: runs press-ready without Docker preflight: 'press-ready', // preflight: 'press-ready-local', preflightOption: [ // Options for press-ready // Please refer https://github.com/vibranthq/press-ready#options 'gray-scale', 'enforce-outline', ], } ], }; ``` -------------------------------- ### Generate Print-Ready PDF (PDF/X-1a) with Grayscale Option Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/docs/special-output-settings.md Outputs a document in a print-ready PDF/X-1a format using the --preflight press-ready option. This specific example includes the --preflight-option gray-scale to ensure the output is in grayscale, suitable for certain print workflows. ```bash vivliostyle build manuscript.md --preflight press-ready --preflight-option gray-scale ``` -------------------------------- ### JavaScript: Manage Element Tab Index and Scrollability Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/examples/customize-processor/manuscript.html This JavaScript code enhances accessibility by managing the 'tabindex' attribute for elements based on their scrollability. It uses ResizeObserver and MutationObserver to dynamically update the tabindex when content or layout changes. It also includes a fallback for environments without requestIdleCallback. ```JavaScript try{ (() => { function a(e) { if (!e) return; let t = e.getAttribute("tabindex") !== null, n = e.scrollWidth > e.clientWidth; n && !t ? e.setAttribute("tabindex", "0") : !n && t && e.removeAttribute("tabindex"); } var u = window.requestIdleCallback || ((e) => setTimeout(e, 1)), i = window.cancelIdleCallback || clearTimeout; function l(e) { let t = new Set, n, r; return new ResizeObserver((c) => { c.forEach((o) => t.add(o.target)); n && clearTimeout(n); r && i(r); n = setTimeout(() => { r && i(r); r = u(() => { t.forEach((o) => e(o)); t.clear(); }); }, 250); }); } function d(e, t) { e.querySelectorAll?.(".expressive-code pre > code").forEach((n) => { let r = n.parentElement; r && t.observe(r); }); } var s = l(a); d(document, s); var b = new MutationObserver((e) => e.forEach((t) => t.addedNodes.forEach((n) => { d(n, s); }) ) ); b.observe(document.body, { childList: !0, subtree: !0, }); document.addEventListener("astro:page-load", () => { d(document, s); }); })(); } catch (e) { console.error("[EC] tabindex-js-module failed:", e); } ``` -------------------------------- ### Vivliostyle CLI Options Source: https://github.com/vivliostyle/vivliostyle-cli/blob/main/README.md Lists and describes the available command-line options for the Vivliostyle CLI. These options control various aspects of document processing, styling, and output generation. ```bash Options: -c, --config <config_file> path to vivliostyle.config.js -T, --theme <theme...> theme path or package name -s, --size <size> output pdf size preset: A5, A4, A3, B5, B4, JIS-B5, JIS-B4, letter, legal, ledger custom(comma separated): 182mm,257mm or 8.5in,11in -m, --crop-marks print crop marks --bleed <bleed> extent of the bleed area for printing with crop marks [3mm] --crop-offset <offset> distance between the edge of the trim size and the edge of the media size. [auto (13mm + bleed)] --css <CSS> custom style CSS code. (ex: ":root {--my-color: lime;}") --style <stylesheet> additional stylesheet URL or path --user-style <user_stylesheet> user stylesheet URL or path -d, --single-doc single HTML document input -q, --quick quick loading with rough page count --title <title> title --author <author> author -l, --language <language> language --reading-progression <direction> Direction of reading progression (choices: "ltr", "rtl") --executable-browser <path> specify a path of executable browser you installed --viewer <URL> specify a URL of displaying viewer instead of vivliostyle-cli's one It is useful that using own viewer that has staging features. (ex: https://vivliostyle.vercel.app/) --viewer-param <parameters> specify viewer parameters. (ex: "allowScripts=false&pixelRatio=16") --browser <browser> EXPERIMENTAL SUPPORT: Specify a browser type to launch Vivliostyle viewer [chromium] Currently, Firefox and Webkit support preview command only! (choices: "chromium", "firefox", "webkit") --proxy-server <proxyServer> HTTP/SOCK proxy server url for underlying Playwright --proxy-bypass <proxyBypass> optional comma-separated domains to bypass proxy --proxy-user <proxyUser> optional username for HTTP proxy authentication --proxy-pass <proxyPass> optional password for HTTP proxy authentication --log-level <level> specify a log level of console outputs (choices: "silent", "info", "verbose", "debug", default: "info") --ignore-https-errors true to ignore HTTPS errors when Playwright browser opens a new page --host <host> IP address the server should listen on --port <port> port the server should listen on --no-open-viewer do not open viewer --no-enable-static-serve disable static file serving --no-enable-viewer-start-page disable viewer start page --vite-config-file <path> Vite config file path --no-vite-config-file ignore Vite config file even if it exists -h, --help display help for command ```