-
-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #485 from vivliostyle/feat/toc-cover-template
Add feature generating ToC/cover documents from existing Markdown/HTML
- Loading branch information
Showing
48 changed files
with
2,031 additions
and
729 deletions.
There are no files selected for viewing
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| /publication.json | ||
| package-lock.json | ||
| yarn.lock | ||
| pnpm-lock.yaml |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| # Customize the generated contents | ||
|
|
||
| You can customize automatically generated content like the table of contents and cover page. To do this, prepare an original HTML file and specify its path as a `path` option in the entry; the document will then be created based on that file. | ||
|
|
||
| HTML files for customization are converted according to these simple rules: | ||
|
|
||
| * Table of contents page: Place a `<nav role="doc-toc"></nav>` tag where you want the table of contents content to appear in the HTML. The table of contents content will be automatically inserted when the document is converted. | ||
|
|
||
| ```html | ||
| <nav role="doc-toc"> | ||
| <h2>Table of Contents</h2> | ||
| <ol> | ||
| <li data-section-level="1"> | ||
| <a href="..." >Section 1</a> | ||
| </li> | ||
| <li data-section-level="1"> | ||
| <a href="..." >Section 2</a> | ||
| <ol> | ||
| <li data-section-level="2"> | ||
| <a href="..." >Section 2.1</a> | ||
| </li> | ||
| </ol> | ||
| </li> | ||
| </ol> | ||
| </nav> | ||
| ``` | ||
|
|
||
| Tips: The text of the `<h2>Table of Contents</h2>` can be changed with the `toc.title` option. | ||
|
|
||
| * Cover page: Place a `<img role="doc-cover" />` tag where you want the cover image to appear in the HTML. The path to the image specified by the `cover` option will be automatically inserted when the document is converted. | ||
|
|
||
| ```html | ||
| <img role="doc-cover" src="cover-image.jpg" alt="Cover image" /> | ||
| ``` | ||
|
|
||
| ### vivliostyle.config.js | ||
|
|
||
| ```js | ||
| 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', | ||
| }, | ||
| }; | ||
| ``` |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| <html> | ||
| <body> | ||
| <div class="cover-wrapper"> | ||
| <img role="doc-cover" /> | ||
| </div> | ||
| </body> | ||
| </html> |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <html lang="en"> | ||
| <head> | ||
| <title>ToC customization example</title> | ||
| </head> | ||
| <body> | ||
| <div class="cover-wrapper"> | ||
| <img role="doc-cover" src="cover-image.jpg" alt="My awesome cover" /> | ||
| </div> | ||
| </body> | ||
| </html> |
53 changes: 53 additions & 0 deletions
53
examples/customize-generated-content/manuscript/01_Computing Paradigms.html
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Computing Paradigms</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| </head> | ||
| <body> | ||
| <section class="level1" aria-labelledby="computing-paradigms"> | ||
| <h1 id="computing-paradigms">Computing Paradigms</h1> | ||
| <section class="level2" aria-labelledby="introduction-to-computational-thinking"> | ||
| <h2 id="introduction-to-computational-thinking">Introduction to Computational Thinking</h2> | ||
| <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate molestiae ut repellendus vero modi molestias perferendis fugiat laboriosam aperiam incidunt! Magnam non hic error aliquam ut velit, provident odit beatae!</p> | ||
| <section class="level3" aria-labelledby="problem-solving-techniques"> | ||
| <h3 id="problem-solving-techniques">Problem Solving Techniques</h3> | ||
| <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur veniam officia provident sed labore eius ratione corporis soluta accusantium, optio maxime quam ipsam repudiandae eos blanditiis quia quasi quae fugiat.</p> | ||
| </section> | ||
| <section class="level3" aria-labelledby="computational-abstraction"> | ||
| <h3 id="computational-abstraction">Computational Abstraction</h3> | ||
| <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit, repudiandae. Possimus voluptatem suscipit a iste, eum, placeat cum repudiandae dignissimos fugit alias nemo! Quas molestias dolor omnis excepturi laudantium quaerat.</p> | ||
| <section class="level4" aria-labelledby="algorithmic-efficiency"> | ||
| <h4 id="algorithmic-efficiency">Algorithmic Efficiency</h4> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus numquam cumque dolores, dolor quam similique nisi cupiditate obcaecati, in laboriosam id minus sit tenetur odit ipsa, eligendi voluptas repellat iste?</p> | ||
| </section> | ||
| <section class="level4" aria-labelledby="data-abstraction"> | ||
| <h4 id="data-abstraction">Data Abstraction</h4> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa deleniti iure aliquid sed! Dolore odio, sint aliquid quasi ipsam deleniti temporibus nostrum quidem, magni voluptatibus optio porro minus saepe vero?</p> | ||
| </section> | ||
| </section> | ||
| </section> | ||
| <section class="level2" aria-labelledby="programming-language-concepts"> | ||
| <h2 id="programming-language-concepts">Programming Language Concepts</h2> | ||
| <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. At mollitia aperiam fuga, consequatur esse quod ratione, hic minus vitae blanditiis officiis ea! Minus rem hic omnis repellat possimus reprehenderit corporis!</p> | ||
| <section class="level3" aria-labelledby="syntax-and-semantics"> | ||
| <h3 id="syntax-and-semantics">Syntax and Semantics</h3> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, consequuntur expedita voluptas eligendi eius deserunt nobis placeat maiores eos, sunt quidem! Asperiores ab eos eligendi sit dolores, consectetur perferendis nulla?</p> | ||
| </section> | ||
| <section class="level3" aria-labelledby="type-systems-and-static-analysis"> | ||
| <h3 id="type-systems-and-static-analysis">Type Systems and Static Analysis</h3> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint voluptas iure sapiente nesciunt minima corrupti explicabo fugiat asperiores ullam, debitis omnis tenetur? Ipsum quibusdam mollitia voluptas nemo voluptatibus, harum id?</p> | ||
| <section class="level4" aria-labelledby="type-inference"> | ||
| <h4 id="type-inference">Type Inference</h4> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit molestias fugiat nisi vitae maxime quisquam porro quaerat aut vero officiis velit tempora, atque optio temporibus corporis rerum explicabo autem fuga.</p> | ||
| </section> | ||
| <section class="level4" aria-labelledby="polymorphism-and-generics"> | ||
| <h4 id="polymorphism-and-generics">Polymorphism and Generics</h4> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti beatae, quam est asperiores repellat culpa reprehenderit numquam nemo laudantium placeat, inventore exercitationem voluptatibus similique quia assumenda saepe at, pariatur suscipit.</p> | ||
| </section> | ||
| </section> | ||
| </section> | ||
| </section> | ||
| </body> | ||
| </html> |
45 changes: 45 additions & 0 deletions
45
examples/customize-generated-content/manuscript/01_Computing Paradigms.md
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| --- | ||
| title: Computing Paradigms | ||
| --- | ||
|
|
||
| # Computing Paradigms | ||
|
|
||
| ## Introduction to Computational Thinking | ||
|
|
||
| Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate molestiae ut repellendus vero modi molestias perferendis fugiat laboriosam aperiam incidunt! Magnam non hic error aliquam ut velit, provident odit beatae! | ||
|
|
||
| ### Problem Solving Techniques | ||
|
|
||
| Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur veniam officia provident sed labore eius ratione corporis soluta accusantium, optio maxime quam ipsam repudiandae eos blanditiis quia quasi quae fugiat. | ||
|
|
||
| ### Computational Abstraction | ||
|
|
||
| Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit, repudiandae. Possimus voluptatem suscipit a iste, eum, placeat cum repudiandae dignissimos fugit alias nemo! Quas molestias dolor omnis excepturi laudantium quaerat. | ||
|
|
||
| #### Algorithmic Efficiency | ||
|
|
||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus numquam cumque dolores, dolor quam similique nisi cupiditate obcaecati, in laboriosam id minus sit tenetur odit ipsa, eligendi voluptas repellat iste? | ||
|
|
||
| #### Data Abstraction | ||
|
|
||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa deleniti iure aliquid sed! Dolore odio, sint aliquid quasi ipsam deleniti temporibus nostrum quidem, magni voluptatibus optio porro minus saepe vero? | ||
|
|
||
| ## Programming Language Concepts | ||
|
|
||
| Lorem ipsum dolor sit amet consectetur, adipisicing elit. At mollitia aperiam fuga, consequatur esse quod ratione, hic minus vitae blanditiis officiis ea! Minus rem hic omnis repellat possimus reprehenderit corporis! | ||
|
|
||
| ### Syntax and Semantics | ||
|
|
||
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, consequuntur expedita voluptas eligendi eius deserunt nobis placeat maiores eos, sunt quidem! Asperiores ab eos eligendi sit dolores, consectetur perferendis nulla? | ||
|
|
||
| ### Type Systems and Static Analysis | ||
|
|
||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint voluptas iure sapiente nesciunt minima corrupti explicabo fugiat asperiores ullam, debitis omnis tenetur? Ipsum quibusdam mollitia voluptas nemo voluptatibus, harum id? | ||
|
|
||
| #### Type Inference | ||
|
|
||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit molestias fugiat nisi vitae maxime quisquam porro quaerat aut vero officiis velit tempora, atque optio temporibus corporis rerum explicabo autem fuga. | ||
|
|
||
| #### Polymorphism and Generics | ||
|
|
||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti beatae, quam est asperiores repellat culpa reprehenderit numquam nemo laudantium placeat, inventore exercitationem voluptatibus similique quia assumenda saepe at, pariatur suscipit. |
53 changes: 53 additions & 0 deletions
53
examples/customize-generated-content/manuscript/02_Algorithm Design and Analysis.html
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Algorithm Design and Analysis</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| </head> | ||
| <body> | ||
| <section class="level1" aria-labelledby="algorithm-design-and-analysis"> | ||
| <h1 id="algorithm-design-and-analysis">Algorithm Design and Analysis</h1> | ||
| <section class="level2" aria-labelledby="introduction-to-algorithms"> | ||
| <h2 id="introduction-to-algorithms">Introduction to Algorithms</h2> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi fugit nisi atque aperiam sed magnam tenetur nostrum unde quas eveniet laudantium aut repellendus iure dolor esse, inventore itaque excepturi molestias?</p> | ||
| <section class="level3" aria-labelledby="algorithmic-complexity"> | ||
| <h3 id="algorithmic-complexity">Algorithmic Complexity</h3> | ||
| <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, earum! Perferendis recusandae suscipit, voluptas eaque unde obcaecati omnis magni corporis quae autem itaque. Aliquid ut numquam reiciendis aspernatur magni a?</p> | ||
| </section> | ||
| <section class="level3" aria-labelledby="asymptotic-analysis"> | ||
| <h3 id="asymptotic-analysis">Asymptotic Analysis</h3> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, dolores quos perferendis distinctio natus explicabo? Earum nihil voluptas excepturi aliquid repellat quisquam assumenda, cumque repudiandae suscipit eos ullam reprehenderit natus?</p> | ||
| <section class="level4" aria-labelledby="big-o-notation"> | ||
| <h4 id="big-o-notation">Big O Notation</h4> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam omnis fuga voluptatibus quae accusantium cum nisi beatae voluptatum necessitatibus ratione sed ut repellendus, quidem amet reprehenderit distinctio dolore, at quam?</p> | ||
| </section> | ||
| <section class="level4" aria-labelledby="algorithmic-paradigms-divide-and-conquer"> | ||
| <h4 id="algorithmic-paradigms-divide-and-conquer">Algorithmic Paradigms: Divide and Conquer</h4> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos quia minima fuga enim molestias iusto recusandae amet ullam hic vitae? Aliquid nobis vitae doloremque quos eum placeat voluptates aut maxime.</p> | ||
| </section> | ||
| </section> | ||
| </section> | ||
| <section class="level2" aria-labelledby="data-structures"> | ||
| <h2 id="data-structures">Data Structures</h2> | ||
| <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae vel iusto fugiat veritatis ipsum voluptates perferendis tempore, dolorum nisi sapiente facere amet, dignissimos, dolores consequatur assumenda. Maxime officia fugit a.</p> | ||
| <section class="level3" aria-labelledby="arrays-and-linked-lists"> | ||
| <h3 id="arrays-and-linked-lists">Arrays and Linked Lists</h3> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci enim officia minus velit aspernatur consequuntur obcaecati quam atque eum, repudiandae iure sunt dolorem saepe accusantium nesciunt neque illum, nulla tenetur?</p> | ||
| </section> | ||
| <section class="level3" aria-labelledby="trees-and-graphs"> | ||
| <h3 id="trees-and-graphs">Trees and Graphs</h3> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id similique maxime ex numquam rerum, repudiandae eum odio modi earum vel labore quasi molestias nobis quis inventore vitae sapiente blanditiis molestiae?</p> | ||
| <section class="level4" aria-labelledby="binary-search-trees"> | ||
| <h4 id="binary-search-trees">Binary Search Trees</h4> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum exercitationem quasi corporis, corrupti beatae provident, velit eaque totam quas numquam vero. Dignissimos nam, quia incidunt mollitia atque odit labore nihil!</p> | ||
| </section> | ||
| <section class="level4" aria-labelledby="depth-first-search-and-breadth-first-search"> | ||
| <h4 id="depth-first-search-and-breadth-first-search">Depth-First Search and Breadth-First Search</h4> | ||
| <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam, quis optio a commodi consequatur officiis beatae dolor nesciunt itaque id adipisci culpa expedita provident fuga odit delectus eveniet esse saepe.</p> | ||
| </section> | ||
| </section> | ||
| </section> | ||
| </section> | ||
| </body> | ||
| </html> |
45 changes: 45 additions & 0 deletions
45
...ples/customize-generated-content/manuscript/02_Algorithm Design and Analysis.md
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| --- | ||
| title: Algorithm Design and Analysis | ||
| --- | ||
|
|
||
| # Algorithm Design and Analysis | ||
|
|
||
| ## Introduction to Algorithms | ||
|
|
||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi fugit nisi atque aperiam sed magnam tenetur nostrum unde quas eveniet laudantium aut repellendus iure dolor esse, inventore itaque excepturi molestias? | ||
|
|
||
| ### Algorithmic Complexity | ||
|
|
||
| Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, earum! Perferendis recusandae suscipit, voluptas eaque unde obcaecati omnis magni corporis quae autem itaque. Aliquid ut numquam reiciendis aspernatur magni a? | ||
|
|
||
| ### Asymptotic Analysis | ||
|
|
||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, dolores quos perferendis distinctio natus explicabo? Earum nihil voluptas excepturi aliquid repellat quisquam assumenda, cumque repudiandae suscipit eos ullam reprehenderit natus? | ||
|
|
||
| #### Big O Notation | ||
|
|
||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam omnis fuga voluptatibus quae accusantium cum nisi beatae voluptatum necessitatibus ratione sed ut repellendus, quidem amet reprehenderit distinctio dolore, at quam? | ||
|
|
||
| #### Algorithmic Paradigms: Divide and Conquer | ||
|
|
||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos quia minima fuga enim molestias iusto recusandae amet ullam hic vitae? Aliquid nobis vitae doloremque quos eum placeat voluptates aut maxime. | ||
|
|
||
| ## Data Structures | ||
|
|
||
| Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae vel iusto fugiat veritatis ipsum voluptates perferendis tempore, dolorum nisi sapiente facere amet, dignissimos, dolores consequatur assumenda. Maxime officia fugit a. | ||
|
|
||
| ### Arrays and Linked Lists | ||
|
|
||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci enim officia minus velit aspernatur consequuntur obcaecati quam atque eum, repudiandae iure sunt dolorem saepe accusantium nesciunt neque illum, nulla tenetur? | ||
|
|
||
| ### Trees and Graphs | ||
|
|
||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Id similique maxime ex numquam rerum, repudiandae eum odio modi earum vel labore quasi molestias nobis quis inventore vitae sapiente blanditiis molestiae? | ||
|
|
||
| #### Binary Search Trees | ||
|
|
||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum exercitationem quasi corporis, corrupti beatae provident, velit eaque totam quas numquam vero. Dignissimos nam, quia incidunt mollitia atque odit labore nihil! | ||
|
|
||
| #### Depth-First Search and Breadth-First Search | ||
|
|
||
| Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam, quis optio a commodi consequatur officiis beatae dolor nesciunt itaque id adipisci culpa expedita provident fuga odit delectus eveniet esse saepe. |
Oops, something went wrong.