@format.dev/cli 0.0.0 → 0.1.0

package/templates/vue/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/vue/documents/welcome/pages/NextSteps/NextStepsPage.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+
+import { Flow, Stream } from '@format.dev/vue'
+
+import ButtonLink from '../../components/ButtonLink.vue'
+import CssOfficialIcon from '../../logos/css-official.vue'
+import SassIcon from '../../logos/sass.vue'
+import TailwindIcon from '../../logos/tailwind.vue'
+import CssModulesIcon from '../../logos/css-modules.vue'
+import PandaCssIcon from '../../logos/panda-css.vue'
+import LinariaIcon from '../../logos/linaria.vue'
+import VanillaExtractIcon from '../../logos/vanilla-extract.vue'
+import NodeIcon from '../../logos/node.vue'
+import BunIcon from '../../logos/bun.vue'
+import DenoIcon from '../../logos/deno.vue'
+import VercelIcon from '../../logos/vercel.vue'
+import CloudflareWorkersIcon from '../../logos/cloudflare-workers.vue'
+import AwsLambdaIcon from '../../logos/aws-lambda.vue'
+import './next-steps.css'
+
+interface Logo {
+	name: string
+	icon: Component
+}
+
+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 }
+]
+</script>
+
+<template>
+	<section class='next-steps-page'>
+		<h2>Your next steps</h2>
+		<p>Here's the path from here to your first production PDF.</p>
+	</section>
+
+	<Flow>
+		<ol class='next-steps'>
+			<Stream>
+				<li class='next-steps-step'>
+					<span class='next-steps-marker'>1</span>
+					<div class='next-steps-content'>
+						<h3 class='next-steps-title'>Explore this document's code</h3>
+						<p class='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 class='next-steps-step'>
+					<span class='next-steps-marker'>2</span>
+					<div class='next-steps-content'>
+						<h3 class='next-steps-title'>Create your own document</h3>
+						<p class='next-steps-body'>
+							Hit the
+							<span class='plus-key' aria-hidden='true'>
+								<svg
+									width='13'
+									height='13'
+									viewBox='0 0 24 24'
+									fill='none'
+									stroke='currentColor'
+									stroke-width='2.2'
+									stroke-linecap='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 class='next-steps-step'>
+					<span class='next-steps-marker'>3</span>
+					<div class='next-steps-content'>
+						<h3 class='next-steps-title'>Build your first paged document</h3>
+						<p class='next-steps-body'>Follow our step-by-step guide. You'll learn how to:</p>
+						<ul class='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 class='next-steps-step'>
+					<span class='next-steps-marker'>4</span>
+					<div class='next-steps-content'>
+						<h3 class='next-steps-title'>Test your favorite frameworks</h3>
+						<p class='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>
+						<div class='logos-row'>
+							<span class='logo-item' v-for="logo in stylingLogos" :key="logo.name">
+								<component :is="logo.icon" />
+								{{ logo.name }}
+							</span>
+						</div>
+						<ButtonLink href='https://format.dev/docs/studio/styling'>Explore styling</ButtonLink>
+					</div>
+				</li>
+				<li class='next-steps-step'>
+					<span class='next-steps-marker'>5</span>
+					<div class='next-steps-content'>
+						<h3 class='next-steps-title'>Deploy and generate at runtime</h3>
+						<p class='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>
+						<div class='logos-row'>
+							<span class='logo-item' v-for="logo in deployLogos" :key="logo.name">
+								<component :is="logo.icon" />
+								{{ logo.name }}
+							</span>
+						</div>
+						<ButtonLink href='https://format.dev/docs/studio/deployment/overview'>Explore deployment</ButtonLink>
+					</div>
+				</li>
+			</Stream>
+		</ol>
+	</Flow>
+</template>

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

package/templates/vue/documents/welcome/styles.css

@@ -0,0 +1,214 @@
+:host {
+	--color-text: #333333;
+	--color-accent: #2b7fff;
+	--color-hairline: #ebebeb;
+	--color-text-muted: rgb(from currentColor r g b / 0.6);
+	--color-bg-muted: #fcfcfc;
+	--color-code-bg: #f1f4ff;
+	--color-code-text: #615fff;
+	--color-code-border: #a3b3ff;
+
+	--hairline: 1px solid var(--color-hairline);
+	--grid-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20793.71%201122.52'%20preserveAspectRatio='none'%20shape-rendering='crispEdges'%3E%3ClinearGradient%20id='g'%20gradientUnits='userSpaceOnUse'%20x1='0'%20y1='0'%20x2='793.71'%20y2='1122.52'%3E%3Cstop%20offset='0'%20stop-color='%23ffffff'/%3E%3Cstop%20offset='0.25'%20stop-color='%23ffffff'/%3E%3Cstop%20offset='0.8'%20stop-color='%23f0f0f0'/%3E%3C/linearGradient%3E%3Cpath%20d='M0%200V1122.52M40%200V1122.52M80%200V1122.52M120%200V1122.52M160%200V1122.52M200%200V1122.52M240%200V1122.52M280%200V1122.52M320%200V1122.52M360%200V1122.52M400%200V1122.52M440%200V1122.52M480%200V1122.52M520%200V1122.52M560%200V1122.52M600%200V1122.52M640%200V1122.52M680%200V1122.52M720%200V1122.52M760%200V1122.52M0%200H793.71M0%2040H793.71M0%2080H793.71M0%20120H793.71M0%20160H793.71M0%20200H793.71M0%20240H793.71M0%20280H793.71M0%20320H793.71M0%20360H793.71M0%20400H793.71M0%20440H793.71M0%20480H793.71M0%20520H793.71M0%20560H793.71M0%20600H793.71M0%20640H793.71M0%20680H793.71M0%20720H793.71M0%20760H793.71M0%20800H793.71M0%20840H793.71M0%20880H793.71M0%20920H793.71M0%20960H793.71M0%201000H793.71M0%201040H793.71M0%201080H793.71M0%201120H793.71'%20fill='none'%20stroke='url(%23g)'%20stroke-width='1'/%3E%3C/svg%3E");
+
+	display: flex;
+	flex-direction: column;
+	background-color: white;
+	background-image: var(--grid-svg);
+}
+
+:host([data-first-page]) {
+	--grid-svg: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20793.71%201122.52'%20preserveAspectRatio='none'%20shape-rendering='crispEdges'%3E%3CradialGradient%20id='g'%20gradientUnits='userSpaceOnUse'%20cx='396.855'%20cy='561.26'%20r='687.39'%3E%3Cstop%20offset='0'%20stop-color='%23ffffff'/%3E%3Cstop%20offset='0.3'%20stop-color='%23ffffff'/%3E%3Cstop%20offset='0.72'%20stop-color='%23f0f0f0'/%3E%3C/radialGradient%3E%3Cpath%20d='M0%200V1122.52M40%200V1122.52M80%200V1122.52M120%200V1122.52M160%200V1122.52M200%200V1122.52M240%200V1122.52M280%200V1122.52M320%200V1122.52M360%200V1122.52M400%200V1122.52M440%200V1122.52M480%200V1122.52M520%200V1122.52M560%200V1122.52M600%200V1122.52M640%200V1122.52M680%200V1122.52M720%200V1122.52M760%200V1122.52M0%200H793.71M0%2040H793.71M0%2080H793.71M0%20120H793.71M0%20160H793.71M0%20200H793.71M0%20240H793.71M0%20280H793.71M0%20320H793.71M0%20360H793.71M0%20400H793.71M0%20440H793.71M0%20480H793.71M0%20520H793.71M0%20560H793.71M0%20600H793.71M0%20640H793.71M0%20680H793.71M0%20720H793.71M0%20760H793.71M0%20800H793.71M0%20840H793.71M0%20880H793.71M0%20920H793.71M0%20960H793.71M0%201000H793.71M0%201040H793.71M0%201080H793.71M0%201120H793.71'%20fill='none'%20stroke='url(%23g)'%20stroke-width='1'/%3E%3C/svg%3E");
+}
+
+.header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 24px;
+	border-bottom: var(--hairline);
+	background: var(--color-bg-muted);
+}
+
+.header-title {
+	color: var(--color-text-muted);
+}
+
+.content {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	padding: 90px 120px;
+
+	&:has(.showcase-intro, .showcase-feature, .feature-table, .feature-prose) {
+		justify-content: flex-start;
+		padding-block: 70px;
+	}
+}
+
+.hero-page {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	max-width: 95%;
+	margin-inline: auto;
+}
+
+.hero-title {
+	margin: 0 0 24px;
+	font-size: 68px;
+	letter-spacing: -3.5px;
+	line-height: 1;
+	font-weight: 800;
+
+	span {
+		color: var(--color-accent);
+	}
+}
+
+.lead {
+	font-size: 24px;
+	line-height: 1.3;
+	color: var(--color-text-muted);
+}
+
+.kicker {
+	margin: 0 0 16px;
+	font-family: monospace;
+	font-size: 12px;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+	color: var(--color-text-muted);
+}
+
+code {
+	display: inline-block;
+	padding: 0.2em 0.4em;
+	background-color: var(--color-code-bg);
+	border: 1px solid var(--color-code-border);
+	color: var(--color-code-text);
+	font-size: 0.75em;
+	font-weight: 550;
+	line-height: 1;
+	border-radius: 0.55em;
+	letter-spacing: -0.5px;
+	transform: translateY(-1px);
+}
+
+p {
+	margin: 0 0 24px;
+	font-size: 18px;
+	line-height: 1.4;
+}
+
+a {
+	color: var(--color-accent);
+	text-decoration: none;
+}
+
+h2 {
+	margin: 0 0 24px;
+	font-size: 48px;
+	letter-spacing: -2px;
+	line-height: 1;
+	font-weight: 800;
+}
+
+.footer {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-top: auto;
+	padding: 24px;
+	border-top: var(--hairline);
+	background: var(--color-bg-muted);
+}
+
+.footer-stamp {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	font-size: 12px;
+}
+
+.footer-logo {
+	display: block;
+	width: 50px;
+	height: auto;
+}
+
+.page-numbers {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	color: var(--color-text-muted);
+	font-size: 12px;
+}
+
+.button {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	width: fit-content;
+	padding: 7px 10px;
+	color: var(--color-accent);
+	border: 1px solid var(--color-accent);
+	background: white;
+	border-radius: 9px;
+	font-size: 14px;
+	font-weight: 500;
+	line-height: 1;
+
+	.svg {
+		flex-shrink: 0;
+		opacity: 0.7;
+	}
+
+	&.button-inline {
+		padding: 4px 7px;
+		gap: 4px;
+		border-radius: 7px;
+		font-size: 12px;
+	}
+}
+
+.button-row {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+}
+
+.footer .page-numbers {
+	font-variant-numeric: tabular-nums;
+}
+
+:host([data-first-page]) .page-numbers {
+	visibility: hidden;
+}
+
+[data-type='footnotes'] {
+	font-size: 12px;
+	line-height: 1.5;
+	padding-block: 12px;
+	margin-inline: 120px;
+	color: var(--color-text-muted);
+	border-top: var(--hairline);
+
+	dl {
+		margin: 0;
+		display: grid;
+		grid-template-columns: auto 1fr;
+		column-gap: 10px;
+		row-gap: 4px;
+	}
+
+	dt {
+		font-variant-numeric: tabular-nums;
+	}
+
+	dd {
+		margin: 0;
+	}
+}

package/templates/vue/documents/welcome/types.ts

@@ -0,0 +1,4 @@
+import schema from './data/schema'
+import * as v from 'valibot'
+
+export type Data = v.InferOutput<typeof schema>

package/templates/vue/format.config.json

@@ -0,0 +1,4 @@
+{
+	"$schema": "https://format.dev/schema/format-config.json",
+	"framework": "vue"
+}

package/templates/vue/package.json

@@ -0,0 +1,19 @@
+{
+	"name": "{{ name }}",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "format dev",
+		"compile": "format compile"
+	},
+	"devDependencies": {
+		"@format.dev/cli": "workspace:*",
+		"@format.dev/vue": "workspace:*",
+		"typescript": "^5.0.0"
+	},
+	"dependencies": {
+		"@format.dev/client": "workspace:*",
+		"valibot": "^1.1.0",
+		"vue": "^3.5.25"
+	}
+}

package/templates/vue/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"extends": "@format.dev/cli/tsconfig.recommended",
+	"compilerOptions": {
+		"jsx": "preserve",
+		"jsxImportSource": "vue"
+	}
+}

package/tsconfig.recommended.json

@@ -0,0 +1,22 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig",
+	"compilerOptions": {
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		"target": "es2022",
+		"allowJs": true,
+		"resolveJsonModule": true,
+		"moduleResolution": "bundler",
+		"moduleDetection": "force",
+		"verbatimModuleSyntax": true,
+		"strict": true,
+		"noUncheckedIndexedAccess": true,
+		"noImplicitOverride": true,
+		"module": "preserve",
+		"checkJs": true,
+		"noEmit": true,
+		"lib": ["es2022", "dom", "dom.iterable"],
+		"types": ["@format.dev/cli/env"]
+	},
+	"exclude": ["**/node_modules", "_generated"]
+}

package/index.d.ts

@@ -1,2 +0,0 @@
-// This is a bootstrap placeholder. Format is not released yet.
-export {}

package/index.js

@@ -1,3 +0,0 @@
-// This is a bootstrap placeholder. Format is not released yet, and this version
-// carries no implementation. See README.md.
-export {}