@format.dev/cli 0.0.0 → 0.1.1

package/templates/html/documents/welcome/pages/FeatureShowcase/feature-showcase.html

@@ -0,0 +1,296 @@
+<section class="showcase-intro">
+	<h2>Made it this far?</h2>
+	<p>You're clearly in the zone. Let's demonstrate a few stand out features.</p>
+</section>
+<section class="showcase-feature">
+	<h3 class="feature-heading">Tables that paginate themselves</h3>
+	<p>
+		A long table is notoriously tricky to get right when you're making PDFs from HTML and CSS. Format flows the
+		rows across as many pages as they need, and repeats the header row on each one. Remember, in the table
+		example below, we haven't explicitly told Format where to split the table, it just flows across the two
+		pages automatically.
+	</p>
+</section>
+<template data-type="flow">
+	<div class="feature-table">
+		<p class="feature-table-caption">The world's highest mountains</p>
+		<table>
+			<thead>
+				<tr>
+					<th>Peak</th>
+					<th class="height">Height</th>
+					<th>Range</th>
+					<th>Country</th>
+				</tr>
+			</thead>
+			<tbody>
+				<template data-type="stream">
+					<tr>
+						<td class="peak">Everest</td>
+						<td class="height">8,849 m</td>
+						<td>Mahalangur Himalaya</td>
+						<td>Nepal / China</td>
+					</tr>
+					<tr>
+						<td class="peak">K2</td>
+						<td class="height">8,611 m</td>
+						<td>Karakoram</td>
+						<td>Pakistan / China</td>
+					</tr>
+					<tr>
+						<td class="peak">Kangchenjunga</td>
+						<td class="height">8,586 m</td>
+						<td>Kangchenjunga Himalaya</td>
+						<td>Nepal / India</td>
+					</tr>
+					<tr>
+						<td class="peak">Lhotse</td>
+						<td class="height">8,516 m</td>
+						<td>Mahalangur Himalaya</td>
+						<td>Nepal / China</td>
+					</tr>
+					<tr>
+						<td class="peak">Makalu</td>
+						<td class="height">8,485 m</td>
+						<td>Mahalangur Himalaya</td>
+						<td>Nepal / China</td>
+					</tr>
+					<tr>
+						<td class="peak">Cho Oyu</td>
+						<td class="height">8,188 m</td>
+						<td>Mahalangur Himalaya</td>
+						<td>Nepal / China</td>
+					</tr>
+					<tr>
+						<td class="peak">Dhaulagiri I</td>
+						<td class="height">8,167 m</td>
+						<td>Dhaulagiri Himalaya</td>
+						<td>Nepal</td>
+					</tr>
+					<tr>
+						<td class="peak">Manaslu</td>
+						<td class="height">8,163 m</td>
+						<td>Manaslu Himalaya</td>
+						<td>Nepal</td>
+					</tr>
+					<tr>
+						<td class="peak">Nanga Parbat</td>
+						<td class="height">8,126 m</td>
+						<td>Nanga Parbat Himalaya</td>
+						<td>Pakistan</td>
+					</tr>
+					<tr>
+						<td class="peak">Annapurna I</td>
+						<td class="height">8,091 m</td>
+						<td>Annapurna Himalaya</td>
+						<td>Nepal</td>
+					</tr>
+					<tr>
+						<td class="peak">Gasherbrum I</td>
+						<td class="height">8,080 m</td>
+						<td>Karakoram</td>
+						<td>Pakistan / China</td>
+					</tr>
+					<tr>
+						<td class="peak">Broad Peak</td>
+						<td class="height">8,051 m</td>
+						<td>Karakoram</td>
+						<td>Pakistan / China</td>
+					</tr>
+					<tr>
+						<td class="peak">Gasherbrum II</td>
+						<td class="height">8,035 m</td>
+						<td>Karakoram</td>
+						<td>Pakistan / China</td>
+					</tr>
+					<tr>
+						<td class="peak">Shishapangma</td>
+						<td class="height">8,027 m</td>
+						<td>Langtang Himalaya</td>
+						<td>China</td>
+					</tr>
+					<tr>
+						<td class="peak">Gyachung Kang</td>
+						<td class="height">7,952 m</td>
+						<td>Mahalangur Himalaya</td>
+						<td>Nepal / China</td>
+					</tr>
+					<tr>
+						<td class="peak">Gasherbrum III</td>
+						<td class="height">7,946 m</td>
+						<td>Karakoram</td>
+						<td>Pakistan / China</td>
+					</tr>
+					<tr>
+						<td class="peak">Annapurna II</td>
+						<td class="height">7,937 m</td>
+						<td>Annapurna Himalaya</td>
+						<td>Nepal</td>
+					</tr>
+					<tr>
+						<td class="peak">Himalchuli</td>
+						<td class="height">7,893 m</td>
+						<td>Manaslu Himalaya</td>
+						<td>Nepal</td>
+					</tr>
+				</template>
+			</tbody>
+		</table>
+	</div>
+</template>
+<template data-type="page-break"></template>
+<section class="showcase-feature">
+	<h3 class="feature-heading">Flowing prose and footnotes</h3>
+	<p>
+		Format's pagination model is very effective for long-form text that you want to flow naturally across
+		pages. Choose your <code>splitGranularity</code> and let the engine do the rest. Check out the automatic
+		<code>&lt;Footnote&gt;</code> system too.
+	</p>
+</section>
+<template data-type="flow" data-split-granularity="word">
+	<div class="feature-prose">
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 766 766" fill="currentColor" class="fleuron" width="10" height="10" aria-hidden="true"><path d="M157 675Q133 675 112 654Q91 633 91 609Q91 583 114 560Q131 543 152.5 530.0Q174 517 200 504Q223 492 248.0 477.0Q273 462 302 440Q289 422 285 400Q250 405 221.5 412.0Q193 419 168 427Q140 436 115.5 442.0Q91 448 68 448Q36 448 18.0 430.5Q0 413 0 383Q0 353 18.0 335.5Q36 318 68 318Q91 318 115.5 324.0Q140 330 168 339Q193 347 221.5 354.0Q250 361 286 367Q290 344 303 326Q274 304 248.5 289.0Q223 274 200 262Q174 248 152.5 235.0Q131 222 114 206Q91 183 91 157Q91 133 112 112Q133 91 157 91Q183 91 206 114Q223 130 236.0 152.0Q249 174 262 200Q274 223 289.0 248.5Q304 274 326 303Q344 289 367 286Q361 250 354.0 221.5Q347 193 339 168Q330 139 324.0 115.0Q318 91 318 68Q318 36 335.5 18.0Q353 0 383 0Q413 0 430.5 18.0Q448 36 448 68Q448 91 442.0 115.0Q436 139 427 168Q419 193 412.0 221.5Q405 250 400 285Q422 289 440 302Q462 273 477.0 248.0Q492 223 504 200Q518 174 531.0 152.0Q544 130 560 114Q583 91 609 91Q633 91 654 112Q675 133 675 157Q675 183 652 206Q636 222 614.0 235.0Q592 248 566 262Q543 274 518.0 289.0Q493 304 464 326Q477 344 481 367Q516 361 544.5 354.0Q573 347 598 339Q627 330 651.0 324.0Q675 318 698 318Q730 318 748.0 335.5Q766 353 766 383Q766 413 748.0 430.5Q730 448 698 448Q675 448 651.0 442.0Q627 436 598 427Q573 419 544.5 412.0Q516 405 481 400Q477 422 464 441Q493 462 518.0 477.0Q543 492 566 504Q592 517 614.0 530.0Q636 543 652 560Q675 583 675 609Q675 633 654 654Q633 675 609 675Q583 675 560 652Q544 635 531.0 613.5Q518 592 504 566Q492 543 477.0 518.0Q462 493 441 464Q422 477 400 481Q405 516 412.0 544.5Q419 573 427 598Q436 626 442.0 650.5Q448 675 448 698Q448 730 430.5 748.0Q413 766 383 766Q353 766 335.5 748.0Q318 730 318 698Q318 675 324.0 650.5Q330 626 339 598Q347 573 354.0 544.5Q361 516 367 481Q344 477 326 464Q304 493 289.0 518.0Q274 543 262 566Q249 592 236.0 613.5Q223 635 206 652Q183 675 157 675Z"/></svg>
+		<p>
+			In the early 1990s, digital documents were strangely unstable<template data-type="footnote">Format lifts this note to the foot of the page it lands on, and numbers it for you.</template>.
+			You could write something, send it across town, and see it return with different fonts, altered spacing,
+			and page breaks that landed wherever they felt like. The text survived, but the layout, the thing that
+			made it readable, often didn't.
+		</p>
+		<p>
+			That wasn't because computers couldn't show text. It was because they all did it differently. Operating
+			systems handled fonts in inconsistent ways, printers relied on varied drivers and defaults, and even
+			similar setups could disagree on margins or letter widths. A document was less a finished object than a
+			set of instructions open to interpretation.
+		</p>
+		<p>
+			PDF showed up as a practical fix: a format designed to preserve the look of a page. Instead of depending
+			on the recipient's computer to recreate the layout, a PDF includes what's needed to render the page
+			consistently. It acted like digital paper, portable, stable, and reliable across devices.
+		</p>
+		<p>
+			At first, that predictability was the whole pitch. Manuals, invoices, design proofs, anything official
+			needed certainty, not improvisation. The promise was simple: what you see is what they will see, down to
+			the last line break.
+		</p>
+		<p>
+			Adoption took time, but PDFs fit into existing habits<template data-type="footnote">Format numbers footnotes continuously through the whole document.</template>. They printed
+			cleanly, handled images and typography well, and could be shared as a single file rather than a messy
+			bundle of fonts and linked graphics. For organizations, that alone made exporting to PDF worth it.
+		</p>
+		<p>
+			As the web became the main way information traveled, portability mattered even more. Documents weren't
+			just moving between coworkers; they were crossing platforms, browsers, and devices that didn't share the
+			same assumptions. A PDF offered a straightforward deal: you can view this without rebuilding it.
+		</p>
+		<p>
+			PDF also changed how a file felt. Editable formats implied collaboration and revision; PDFs implied
+			reading, signing, and completion. Even if the content could still change later, the format signaled
+			intent: this is the document, not a draft.
+		</p>
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 766 766" fill="currentColor" class="fleuron" width="10" height="10" aria-hidden="true"><path d="M157 675Q133 675 112 654Q91 633 91 609Q91 583 114 560Q131 543 152.5 530.0Q174 517 200 504Q223 492 248.0 477.0Q273 462 302 440Q289 422 285 400Q250 405 221.5 412.0Q193 419 168 427Q140 436 115.5 442.0Q91 448 68 448Q36 448 18.0 430.5Q0 413 0 383Q0 353 18.0 335.5Q36 318 68 318Q91 318 115.5 324.0Q140 330 168 339Q193 347 221.5 354.0Q250 361 286 367Q290 344 303 326Q274 304 248.5 289.0Q223 274 200 262Q174 248 152.5 235.0Q131 222 114 206Q91 183 91 157Q91 133 112 112Q133 91 157 91Q183 91 206 114Q223 130 236.0 152.0Q249 174 262 200Q274 223 289.0 248.5Q304 274 326 303Q344 289 367 286Q361 250 354.0 221.5Q347 193 339 168Q330 139 324.0 115.0Q318 91 318 68Q318 36 335.5 18.0Q353 0 383 0Q413 0 430.5 18.0Q448 36 448 68Q448 91 442.0 115.0Q436 139 427 168Q419 193 412.0 221.5Q405 250 400 285Q422 289 440 302Q462 273 477.0 248.0Q492 223 504 200Q518 174 531.0 152.0Q544 130 560 114Q583 91 609 91Q633 91 654 112Q675 133 675 157Q675 183 652 206Q636 222 614.0 235.0Q592 248 566 262Q543 274 518.0 289.0Q493 304 464 326Q477 344 481 367Q516 361 544.5 354.0Q573 347 598 339Q627 330 651.0 324.0Q675 318 698 318Q730 318 748.0 335.5Q766 353 766 383Q766 413 748.0 430.5Q730 448 698 448Q675 448 651.0 442.0Q627 436 598 427Q573 419 544.5 412.0Q516 405 481 400Q477 422 464 441Q493 462 518.0 477.0Q543 492 566 504Q592 517 614.0 530.0Q636 543 652 560Q675 583 675 609Q675 633 654 654Q633 675 609 675Q583 675 560 652Q544 635 531.0 613.5Q518 592 504 566Q492 543 477.0 518.0Q462 493 441 464Q422 477 400 481Q405 516 412.0 544.5Q419 573 427 598Q436 626 442.0 650.5Q448 675 448 698Q448 730 430.5 748.0Q413 766 383 766Q353 766 335.5 748.0Q318 730 318 698Q318 675 324.0 650.5Q330 626 339 598Q347 573 354.0 544.5Q361 516 367 481Q344 477 326 464Q304 493 289.0 518.0Q274 543 262 566Q249 592 236.0 613.5Q223 635 206 652Q183 675 157 675Z"/></svg>
+	</div>
+	<div class="prose-learn-more">
+		<p>Learn more about how to split content across pages and how to work with footnotes.</p>
+		<div class="button-row">
+			<a class="button" href="https://format.dev/docs/document-model/types/flow" target="_blank" rel="noopener noreferrer">Flow docs<svg class="button-icon" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"/><path d="M8 7h9v9"/></svg></a>
+			<a class="button" href="https://format.dev/docs/document-model/types/footnote" target="_blank" rel="noopener noreferrer">Footnote docs<svg class="button-icon" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"/><path d="M8 7h9v9"/></svg></a>
+		</div>
+	</div>
+</template>
+<template data-type="page-break"></template>
+<section class="showcase-feature">
+	<h3 class="feature-heading">Full support for modern CSS</h3>
+	<p>
+		You might have experienced other tools flattening or "rasterizing" certain CSS visuals such as box shadows,
+		fancy borders or gradients. Format produces fully vector output, increasing fidelity, whilst decreasing
+		filesize. Equally, all modern layout techniques are supported, like flexbox and grid.
+	</p>
+	<div class="css-demo">
+		<div class="css-demo-tile tile-shadow">
+			<div class="tile-visual"></div>
+			<span class="tile-label">Drop shadow</span>
+		</div>
+		<div class="css-demo-tile tile-gradient">
+			<div class="tile-visual"></div>
+			<span class="tile-label">Gradients</span>
+		</div>
+		<div class="css-demo-tile tile-transform">
+			<div class="tile-visual"></div>
+			<span class="tile-label">Transforms</span>
+		</div>
+		<div class="css-demo-tile tile-grid">
+			<div class="tile-visual"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
+			<span class="tile-label">Grid</span>
+		</div>
+		<div class="css-demo-tile tile-flex">
+			<div class="tile-visual"><span></span><span></span><span></span></div>
+			<span class="tile-label">Flexbox</span>
+		</div>
+		<div class="css-demo-tile tile-radius">
+			<div class="tile-visual"></div>
+			<span class="tile-label">Rounded corners</span>
+		</div>
+		<div class="css-demo-tile tile-orphans">
+			<div class="tile-visual"><span></span><span></span><span></span><span></span></div>
+			<span class="tile-label">Orphans &amp; widows</span>
+		</div>
+		<div class="css-demo-tile tile-breaks">
+			<div class="tile-visual"><span></span><span></span><span></span><span></span><span></span></div>
+			<span class="tile-label">Break before/after</span>
+		</div>
+		<div class="css-demo-tile tile-pattern">
+			<div class="tile-visual"></div>
+			<span class="tile-label">Repeating patterns</span>
+		</div>
+	</div>
+	<p>
+		Take repeating backgrounds, for example. These are especially awkward in other tools, often either not
+		displaying at all, or just getting rasterized, which, for anyone that wants quality will not be happy with.
+		In Format, whether you're using <code>background-repeat</code> to tile an SVG or the
+		<code>&lt;pattern&gt;</code> tag inside an SVG on the page, you'll get crisp pattern repeats and small PDF
+		filesizes.
+	</p>
+	<div class="css-pattern-demo">
+		<svg class="css-pattern" aria-hidden="true">
+			<defs>
+				<pattern id="fs-diagonal-stripes" width="14" height="14" fill="#999" patternUnits="userSpaceOnUse" patternTransform="rotate(-45)">
+					<rect class="css-pattern-stripe" width="6" height="14" />
+				</pattern>
+			</defs>
+			<rect width="800" height="200" fill="url(#fs-diagonal-stripes)" />
+		</svg>
+		<span class="css-pattern-caption">A seamless SVG &lt;pattern&gt;, kept as vector in the PDF</span>
+	</div>
+	<p>
+		We've spent countless hours smoothing over CSS quirks and PDF-viewer edge cases, so your documents render
+		the same everywhere, at the smallest file sizes, delivered fast over the wire.
+	</p>
+</section>
+<section class="showcase-feature">
+	<h3 class="feature-heading">And there's plenty more&hellip;</h3>
+	<p>
+		We're determined to conquer every feature and every edge-case in HTML and CSS, so you can build the very
+		highest quality PDFs. Here are a few other features to read about.
+	</p>
+	<ul class="more-list">
+		<li>
+			<strong>Automatic tables of contents.</strong> Built from your headings, with page numbers filled in
+			after layout. Even use several ToCs in one document with no overlap.
+			<a class="button button-inline" href="https://format.dev/docs/document-model/types/table-of-contents" target="_blank" rel="noopener noreferrer">ToC docs<svg class="button-icon" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"/><path d="M8 7h9v9"/></svg></a>
+		</li>
+		<li>
+			<strong>Page counters.</strong> Live page numbers and totals in any numbering style.
+			<a class="button button-inline" href="https://format.dev/docs/document-model/types/counter" target="_blank" rel="noopener noreferrer">Counter docs<svg class="button-icon" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"/><path d="M8 7h9v9"/></svg></a>
+		</li>
+		<li>
+			<strong>Numbered figures and cross-references.</strong> Number a figure or heading, then point to it by
+			name. "See Figure 3" resolves to the right number even as content reflows.
+			<a class="button button-inline" href="https://format.dev/docs/document-model/types/ref" target="_blank" rel="noopener noreferrer">Ref docs<svg class="button-icon" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"/><path d="M8 7h9v9"/></svg></a>
+		</li>
+		<li>
+			<strong>Endnotes and references.</strong> Collect footnotes into an endnotes list, or output the page a
+			target landed on once the layout settles.
+			<a class="button button-inline" href="https://format.dev/docs/document-model/types/footnotes" target="_blank" rel="noopener noreferrer">Endnotes docs<svg class="button-icon" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"/><path d="M8 7h9v9"/></svg></a>
+		</li>
+	</ul>
+</section>

package/templates/html/documents/welcome/pages/NextSteps/next-steps.css

@@ -0,0 +1,107 @@
+.next-steps {
+	list-style: none;
+	margin-block-start: 36px;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 40px;
+
+	.button {
+		margin-block-start: 12px;
+	}
+}
+
+.next-steps-step {
+	display: grid;
+	grid-template-columns: 32px 1fr;
+	gap: 16px;
+	align-items: baseline;
+	break-inside: avoid;
+}
+
+.next-steps-marker {
+	display: grid;
+	place-items: center;
+	width: 32px;
+	height: 32px;
+	border: var(--hairline);
+	border-radius: 50%;
+	background: white;
+	font-family: monospace;
+	font-size: 14px;
+	font-variant-numeric: tabular-nums;
+	transform: translateY(-2px);
+}
+
+.next-steps-content {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 12px;
+}
+
+.next-steps-title {
+	margin: 0;
+	font-size: 18px;
+	font-weight: 800;
+	letter-spacing: -0.3px;
+	color: var(--color-text-prose);
+}
+
+.next-steps-body {
+	margin: 0;
+	font-size: 15px;
+}
+
+.learn-list {
+	padding: 0;
+	list-style: none;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+
+	li {
+		position: relative;
+		padding-left: 24px;
+		font-size: 14px;
+		line-height: 1.4;
+		color: var(--color-text);
+
+		&:before {
+			content: '';
+			position: absolute;
+			left: 5px;
+			top: 3px;
+			width: 5px;
+			height: 9px;
+			border: solid var(--color-accent);
+			border-width: 0 2px 2px 0;
+			transform: rotate(45deg);
+		}
+	}
+}
+
+.logos-row {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 16px;
+	margin-block-start: 12px;
+}
+
+.logo-item {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 12px;
+	font-weight: 600;
+	background: var(--color-bg-muted);
+	padding: 8px 14px;
+	border-radius: 48px;
+	border: var(--hairline);
+	box-shadow: 0 1px 4px -1px rgb(0 0 0 / 3%);
+
+	svg {
+		width: auto;
+		height: 18px;
+	}
+}