@format.dev/cli 0.0.0 → 0.1.0

package/templates/react/documents/welcome/pages/FeatureShowcase/feature-showcase.css

@@ -0,0 +1,296 @@
+.showcase-intro {
+	margin-bottom: 24px;
+}
+
+.feature-heading {
+	margin: 0 0 20px;
+	font-size: 24px;
+	line-height: 1.1;
+	letter-spacing: -0.5px;
+	font-weight: 800;
+}
+
+.feature-table {
+	margin: 24px 0 40px;
+	padding: 18px;
+	border-radius: 10px;
+	background: var(--color-bg-muted);
+	border: var(--hairline);
+
+	table {
+		width: 100%;
+		border-collapse: collapse;
+		font-variant-numeric: tabular-nums;
+	}
+
+	th,
+	td {
+		padding: 8px 24px 8px 0;
+		text-align: left;
+
+		&:last-child {
+			padding-right: 0;
+		}
+	}
+
+	.height {
+		text-align: right;
+	}
+
+	thead th {
+		font-family: monospace;
+		font-size: 12px;
+		text-transform: uppercase;
+		color: var(--color-text-muted);
+		padding-bottom: 8px;
+		border-bottom: 1px solid var(--color-text-muted);
+	}
+
+	tbody td {
+		font-size: 14px;
+		border-bottom: var(--hairline);
+
+		&.peak {
+			font-weight: 600;
+		}
+	}
+
+	tbody tr:last-child td {
+		padding-bottom: 0;
+		border-bottom: none;
+	}
+}
+
+.feature-table-caption {
+	margin: 0 0 12px;
+	font-family: monospace;
+	font-size: 12px;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	color: var(--color-text-muted);
+}
+
+.feature-prose {
+	margin-top: 4px;
+	font-family: serif;
+
+	.fleuron {
+		display: block;
+		margin: 0 auto 24px;
+
+		&:last-child {
+			margin: 24px auto 0;
+		}
+	}
+
+	p {
+		text-wrap: pretty;
+		font-size: 17px;
+		line-height: 1.6;
+
+		&:last-child {
+			margin: 0;
+		}
+	}
+}
+
+.prose-learn-more {
+	margin-top: 24px;
+}
+
+.css-demo {
+	margin-block: 40px;
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 14px;
+	break-inside: avoid;
+}
+
+.css-demo-tile {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 18px;
+	padding: 24px 18px;
+	border: var(--hairline);
+	border-radius: 12px;
+	background: white;
+
+	.tile-visual {
+		width: 56px;
+		height: 56px;
+		border-radius: 10px;
+	}
+
+	.tile-label {
+		font-family: monospace;
+		text-transform: uppercase;
+		font-size: 12px;
+		color: var(--color-text-muted);
+	}
+}
+
+.tile-visual {
+	.tile-shadow & {
+		background: white;
+		box-shadow: 0 8px 22px rgb(43 127 255 / 0.4);
+	}
+
+	.tile-gradient & {
+		background: linear-gradient(135deg, var(--color-accent), var(--color-code-text));
+	}
+
+	.tile-transform & {
+		background: var(--color-accent);
+		transform: rotate(12deg) scale(0.82);
+	}
+
+	.tile-radius & {
+		background: var(--color-code-bg);
+		border: 2px solid var(--color-accent);
+		border-radius: 50% 12px;
+	}
+
+	.tile-grid & {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		grid-auto-rows: 1fr;
+		gap: 5px;
+
+		span {
+			background: var(--color-accent);
+			border-radius: 2px;
+		}
+
+		span:first-child {
+			grid-column: span 2;
+		}
+
+		span:nth-child(4) {
+			grid-row: span 2;
+		}
+	}
+
+	.tile-flex & {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 6px;
+
+		span {
+			width: 8px;
+			height: 100%;
+			background: var(--color-accent);
+			border-radius: 3px;
+		}
+
+		span:nth-child(2) {
+			height: 60%;
+		}
+	}
+
+	.tile-orphans & {
+		display: flex;
+		flex-direction: column;
+		gap: 5px;
+
+		span {
+			height: 6px;
+			border-radius: 3px;
+			background: var(--color-accent);
+		}
+
+		span:last-child {
+			width: 55%;
+			margin-top: auto;
+			opacity: 0.4;
+		}
+	}
+
+	.tile-breaks & {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		gap: 5px;
+
+		span {
+			height: 6px;
+			border-radius: 3px;
+			background: var(--color-accent);
+		}
+
+		span:nth-child(2),
+		span:nth-child(5) {
+			width: 70%;
+		}
+
+		span:nth-child(3) {
+			height: 0;
+			border-top: 2px dashed var(--color-accent);
+			border-radius: 0;
+			background: none;
+		}
+	}
+
+	.tile-pattern & {
+		background: repeating-linear-gradient(-45deg, var(--color-accent) 0 5px, var(--color-code-bg) 5px 12px);
+	}
+}
+
+.css-pattern-demo {
+	margin-block: 20px;
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	break-inside: avoid;
+}
+
+.css-pattern {
+	display: block;
+	width: 100%;
+	height: 64px;
+	border: var(--hairline);
+	border-radius: 12px;
+	background-color: white;
+	overflow: hidden;
+}
+
+.css-pattern-stripe {
+	fill: var(--color-accent);
+	fill-opacity: 0.3;
+}
+
+.css-pattern-caption {
+	font-family: monospace;
+	font-size: 11px;
+	letter-spacing: 0.03em;
+	color: var(--color-text-muted);
+	text-align: center;
+}
+
+.more-list {
+	margin: 0 0 24px;
+	padding: 0;
+	list-style: none;
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+
+	li {
+		position: relative;
+		padding-left: 20px;
+		font-size: 15px;
+		line-height: 1.5;
+	}
+
+	li::before {
+		content: '';
+		position: absolute;
+		left: 2px;
+		top: 9px;
+		width: 5px;
+		height: 5px;
+		border-radius: 50%;
+		background: var(--color-accent);
+	}
+}

package/templates/react/documents/welcome/pages/FeatureShowcase/mountains.ts

@@ -0,0 +1,27 @@
+type Mountain = {
+	peak: string
+	height: string
+	range: string
+	country: string
+}
+
+export const mountains: Mountain[] = [
+	{ peak: 'Everest', height: '8,849 m', range: 'Mahalangur Himalaya', country: 'Nepal / China' },
+	{ peak: 'K2', height: '8,611 m', range: 'Karakoram', country: 'Pakistan / China' },
+	{ peak: 'Kangchenjunga', height: '8,586 m', range: 'Kangchenjunga Himalaya', country: 'Nepal / India' },
+	{ peak: 'Lhotse', height: '8,516 m', range: 'Mahalangur Himalaya', country: 'Nepal / China' },
+	{ peak: 'Makalu', height: '8,485 m', range: 'Mahalangur Himalaya', country: 'Nepal / China' },
+	{ peak: 'Cho Oyu', height: '8,188 m', range: 'Mahalangur Himalaya', country: 'Nepal / China' },
+	{ peak: 'Dhaulagiri I', height: '8,167 m', range: 'Dhaulagiri Himalaya', country: 'Nepal' },
+	{ peak: 'Manaslu', height: '8,163 m', range: 'Manaslu Himalaya', country: 'Nepal' },
+	{ peak: 'Nanga Parbat', height: '8,126 m', range: 'Nanga Parbat Himalaya', country: 'Pakistan' },
+	{ peak: 'Annapurna I', height: '8,091 m', range: 'Annapurna Himalaya', country: 'Nepal' },
+	{ peak: 'Gasherbrum I', height: '8,080 m', range: 'Karakoram', country: 'Pakistan / China' },
+	{ peak: 'Broad Peak', height: '8,051 m', range: 'Karakoram', country: 'Pakistan / China' },
+	{ peak: 'Gasherbrum II', height: '8,035 m', range: 'Karakoram', country: 'Pakistan / China' },
+	{ peak: 'Shishapangma', height: '8,027 m', range: 'Langtang Himalaya', country: 'China' },
+	{ peak: 'Gyachung Kang', height: '7,952 m', range: 'Mahalangur Himalaya', country: 'Nepal / China' },
+	{ peak: 'Gasherbrum III', height: '7,946 m', range: 'Karakoram', country: 'Pakistan / China' },
+	{ peak: 'Annapurna II', height: '7,937 m', range: 'Annapurna Himalaya', country: 'Nepal' },
+	{ peak: 'Himalchuli', height: '7,893 m', range: 'Manaslu Himalaya', country: 'Nepal' }
+]

package/templates/react/documents/welcome/pages/NextSteps/NextStepsPage.tsx

@@ -0,0 +1,146 @@
+import type { ComponentProps, ComponentType } from 'react'
+import { Flow, Stream } from '@format.dev/react'
+import { ButtonLink } from '../../components/ButtonLink'
+import { CssOfficialIcon } from '../../logos/css-official'
+import { SassIcon } from '../../logos/sass'
+import { TailwindIcon } from '../../logos/tailwind'
+import { CssModulesIcon } from '../../logos/css-modules'
+import { PandaCssIcon } from '../../logos/panda-css'
+import { LinariaIcon } from '../../logos/linaria'
+import { VanillaExtractIcon } from '../../logos/vanilla-extract'
+import { NodeIcon } from '../../logos/node'
+import { BunIcon } from '../../logos/bun'
+import { DenoIcon } from '../../logos/deno'
+import { VercelIcon } from '../../logos/vercel'
+import { CloudflareWorkersIcon } from '../../logos/cloudflare-workers'
+import { AwsLambdaIcon } from '../../logos/aws-lambda'
+import './next-steps.css'
+
+type Logo = { name: string; Icon: ComponentType<ComponentProps<'svg'>> }
+
+const stylingLogos: Logo[] = [
+	{ name: 'CSS', Icon: CssOfficialIcon },
+	{ name: 'Sass', Icon: SassIcon },
+	{ name: 'Tailwind', Icon: TailwindIcon },
+	{ name: 'CSS Modules', Icon: CssModulesIcon },
+	{ name: 'Panda', Icon: PandaCssIcon },
+	{ name: 'Linaria', Icon: LinariaIcon },
+	{ name: 'Vanilla Extract', Icon: VanillaExtractIcon }
+]
+
+const deployLogos: Logo[] = [
+	{ name: 'Node', Icon: NodeIcon },
+	{ name: 'Bun', Icon: BunIcon },
+	{ name: 'Deno', Icon: DenoIcon },
+	{ name: 'Vercel', Icon: VercelIcon },
+	{ name: 'Cloudflare', Icon: CloudflareWorkersIcon },
+	{ name: 'AWS Lambda', Icon: AwsLambdaIcon }
+]
+
+function Logos({ items }: { items: Logo[] }) {
+	return (
+		<div className='logos-row'>
+			{items.map(({ name, Icon }) => (
+				<span className='logo-item' key={name}>
+					<Icon />
+					{name}
+				</span>
+			))}
+		</div>
+	)
+}
+
+export function NextStepsPage() {
+	return (
+		<>
+			<section className='next-steps-page'>
+				<h2>Your next steps</h2>
+				<p>Here's the path from here to your first production PDF.</p>
+			</section>
+
+			<Flow>
+				<ol className='next-steps'>
+					<Stream>
+						<li className='next-steps-step'>
+							<span className='next-steps-marker'>1</span>
+							<div className='next-steps-content'>
+								<h3 className='next-steps-title'>Explore this document's code</h3>
+								<p className='next-steps-body'>
+									Open <code>documents/welcome</code> to see the source code for this document. It's purposely simple,
+									using just a few Format primitives like <code>&lt;Layout&gt;</code> and <code>&lt;Flow&gt;</code>.
+									It's also styled with plain CSS and uses Format's out the box fonts. Have a play with the code and see
+									how the document changes.
+								</p>
+							</div>
+						</li>
+						<li className='next-steps-step'>
+							<span className='next-steps-marker'>2</span>
+							<div className='next-steps-content'>
+								<h3 className='next-steps-title'>Create your own document</h3>
+								<p className='next-steps-body'>
+									Hit the{' '}
+									<span className='plus-key' aria-hidden='true'>
+										<svg
+											width='13'
+											height='13'
+											viewBox='0 0 24 24'
+											fill='none'
+											stroke='currentColor'
+											strokeWidth='2.2'
+											strokeLinecap='round'>
+											<path d='M12 5v14' />
+											<path d='M5 12h14' />
+										</svg>
+									</span>{' '}
+									button in the sidebar to scaffold a new document and see some of the options available.
+								</p>
+							</div>
+						</li>
+						<li className='next-steps-step'>
+							<span className='next-steps-marker'>3</span>
+							<div className='next-steps-content'>
+								<h3 className='next-steps-title'>Build your first paged document</h3>
+								<p className='next-steps-body'>Follow our step-by-step guide. You'll learn how to:</p>
+								<ul className='learn-list'>
+									<li>Use the document model</li>
+									<li>Add repeating headers and footers</li>
+									<li>Paginate content with page numbers</li>
+									<li>Pass in dynamic data</li>
+								</ul>
+								<ButtonLink href='https://format.dev/docs/introduction/build-your-first-pdf'>
+									Build your first PDF
+								</ButtonLink>
+							</div>
+						</li>
+						<li className='next-steps-step'>
+							<span className='next-steps-marker'>4</span>
+							<div className='next-steps-content'>
+								<h3 className='next-steps-title'>Test your favorite frameworks</h3>
+								<p className='next-steps-body'>
+									Styling on the web brings out some pretty strong opinions! Format supports a wide range of popular
+									frameworks so you can make fast progress without learning any new frameworks or syntax.
+								</p>
+								<Logos items={stylingLogos} />
+								<ButtonLink href='https://format.dev/docs/studio/styling'>Explore styling</ButtonLink>
+							</div>
+						</li>
+						<li className='next-steps-step'>
+							<span className='next-steps-marker'>5</span>
+							<div className='next-steps-content'>
+								<h3 className='next-steps-title'>Deploy and generate at runtime</h3>
+								<p className='next-steps-body'>
+									Once you've designed and built your documents, you will need to select the right approach for
+									deployment, so you can generate PDFs at runtime. Format supports many popular frameworks, bundlers and
+									runtimes and we recommend taking a look at the docs to see how you might deploy your creations to
+									production.
+								</p>
+								<Logos items={deployLogos} />
+								<ButtonLink href='https://format.dev/docs/studio/deployment/overview'>Explore deployment</ButtonLink>
+							</div>
+						</li>
+					</Stream>
+				</ol>
+			</Flow>
+		</>
+	)
+}

package/templates/react/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;
+	}
+}