Skip to content

Instantly share code, notes, and snippets.

@jacobbf

jacobbf/bindery.html

Created February 25, 2022 18:08
Show Gist options
  • Save jacobbf/c5255e07c3ffdd717fcca9e76ebabbdc to your computer and use it in GitHub Desktop.
Save jacobbf/c5255e07c3ffdd717fcca9e76ebabbdc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bindery.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Lipsum</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#content {
line-height: 1.3;
}
h1, h2 {
font-weight: 400;
font-family: 'Helvetica', Arial, Helvetica, sans-serif;
text-align: center;
}
p {
font-size: 10pt;
}
.📖-running-header {
left: 1em;
right: 1em;
}
.header {
display: flex;
width: 100%;
justify-content: space-between;
}
</style>
</head>
<body>
<div id="content">
<h1>Book Title</h1>
<div class="section">
<h2>Lipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere magna eget dolor semper ullamcorper. Nullam sagittis posuere nibh vitae interdum. Curabitur id enim sit amet est blandit rhoncus. Donec ut nunc diam. Morbi sit amet hendrerit quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc sollicitudin leo non diam convallis pellentesque. Morbi sit amet quam lobortis, ultrices turpis eget, hendrerit orci. Nunc magna nisl, ornare nec arcu eu, consequat facilisis urna. Phasellus velit nisl, venenatis a lorem nec, bibendum imperdiet odio. Suspendisse ac nisl libero. Curabitur sed massa id nisl ullamcorper hendrerit. Pellentesque non blandit magna.
Phasellus ultrices sodales dapibus. Morbi hendrerit rhoncus velit quis condimentum. Praesent odio ante, tempor quis ipsum sagittis, eleifend consequat ligula. Sed a urna maximus, hendrerit diam eget, feugiat nibh. In mollis, nisi at porta egestas, dolor turpis aliquam justo, id dapibus leo neque eu mi. Morbi vestibulum dignissim metus in semper. Maecenas iaculis, dolor posuere pharetra eleifend, ligula nibh finibus turpis, sit amet rhoncus purus libero quis mauris. Pellentesque in metus felis. Nunc auctor maximus magna sit amet consectetur. Aliquam euismod urna sit amet volutpat blandit. Nam sollicitudin mi sit amet erat ultricies egestas. Fusce ac fermentum tortor.
Nullam in libero ac tellus maximus vulputate. Proin sed lobortis felis. Pellentesque felis leo, dignissim sed molestie sit amet, bibendum ac nunc. Etiam ornare turpis a nulla consequat, et pharetra velit malesuada. Pellentesque aliquam molestie dapibus. Nunc malesuada aliquam leo, eget tempor augue accumsan vel. Phasellus ut maximus arcu, hendrerit laoreet justo. Vivamus vehicula dignissim metus eu rutrum. Mauris pharetra ornare turpis et sagittis. In a mauris ac urna luctus tristique. Sed sed varius dolor.
</p>
</div>
<div class="section">
<h2>Lipsum 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere magna eget dolor semper ullamcorper. Nullam sagittis posuere nibh vitae interdum. Curabitur id enim sit amet est blandit rhoncus. Donec ut nunc diam. Morbi sit amet hendrerit quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc sollicitudin leo non diam convallis pellentesque. Morbi sit amet quam lobortis, ultrices turpis eget, hendrerit orci. Nunc magna nisl, ornare nec arcu eu, consequat facilisis urna. Phasellus velit nisl, venenatis a lorem nec, bibendum imperdiet odio. Suspendisse ac nisl libero. Curabitur sed massa id nisl ullamcorper hendrerit. Pellentesque non blandit magna.
Phasellus ultrices sodales dapibus. Morbi hendrerit rhoncus velit quis condimentum. Praesent odio ante, tempor quis ipsum sagittis, eleifend consequat ligula. Sed a urna maximus, hendrerit diam eget, feugiat nibh. In mollis, nisi at porta egestas, dolor turpis aliquam justo, id dapibus leo neque eu mi. Morbi vestibulum dignissim metus in semper. Maecenas iaculis, dolor posuere pharetra eleifend, ligula nibh finibus turpis, sit amet rhoncus purus libero quis mauris. Pellentesque in metus felis. Nunc auctor maximus magna sit amet consectetur. Aliquam euismod urna sit amet volutpat blandit. Nam sollicitudin mi sit amet erat ultricies egestas. Fusce ac fermentum tortor.
Nullam in libero ac tellus maximus vulputate. Proin sed lobortis felis. Pellentesque felis leo, dignissim sed molestie sit amet, bibendum ac nunc. Etiam ornare turpis a nulla consequat, et pharetra velit malesuada. Pellentesque aliquam molestie dapibus. Nunc malesuada aliquam leo, eget tempor augue accumsan vel. Phasellus ut maximus arcu, hendrerit laoreet justo. Vivamus vehicula dignissim metus eu rutrum. Mauris pharetra ornare turpis et sagittis. In a mauris ac urna luctus tristique. Sed sed varius dolor.
</p>
</div>
</div>
<script src="https://unpkg.com/bindery@2.3.0"></script>
<script>
const instructions = {
content: "#content",
rules: [
Bindery.PageBreak({
selector: 'h1',
position: 'after',
continue: 'next'
}),
Bindery.PageBreak({
selector: 'h2',
position: 'before',
continue: 'right'
}),
Bindery.RunningHeader({
render: (pageInfo) => {
if(!pageInfo.isEmpty) {
return `
<div class="header">
<span>Book Title</span> <span>${pageInfo.number}</span>
</div>`
} else {
return ''
}
}
})
]
}
Bindery.makeBook(instructions)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment