chipchoc/src/App.svelte

<script>
	import Importabular from "importabular"

	let editor

	let emailContent = 'Hi [TK name],\n\nIt\'s been a while since we heard from you. How are you doing? Your last article [TK article] did quite well, and we were wondering if you\'d be interested in writing a sequel?\n\nCheers,\nThe Snipette Team[TK PS]'

	let sheetOne
	let step = 0
	let tkList = []

	function showEmail() {
		step = 1
	}

	function detectFields(value) {
		if (!value) return []

		let matches = value.match(/\[TK (\w+?)\]/gm)
		let tkList = []

		if (!!matches) {
			let propertyRegex = new RegExp(/\[TK (\w+)\]/)
			for (let m of matches) {
				tkList.push(propertyRegex.exec(m)[1])
			}
		}

		return tkList
	}

	$: tkList = detectFields(emailContent)

	function showSheet() {
		// Figure out columns
		let columns = []

		if (!tkList.includes('email')) {
			columns.push({
				label: 'email',
				description: 'Email address of the recipient',
				placeholder: 'someone@members.snipettemag.com',
			})
		}

		for (let tk of tkList) {
			columns.push({
				label: tk,
			})
		}

		// First sheet
		sheetOne = new Importabular({
			node: editor,
			columns: columns,
		})

		step = 2

		// for debugging only
		window.sheetOne = sheetOne
	}

	function next() {
		step += 1
	}
</script>

<main>
	<img src="/assets/email-baker.png" class="main-pic" alt="Email Oven"/>
	<h1>Chip <span class="highlight">Choc</span></h1>
	<h2>Cookie-cutter emails made easy.</h2>

	{#if step != 0}
	<h3 class="mt-3">Step {step}</h3>
	{/if}

	{#if step == 0}
		<button on:click={showEmail}>Start Drafting</button>
	{/if}

	{#if step == 1}
	<div class="instructions">
		<p>Compose your email below, leaving [TK stuff] to be replaced in the table. Make sure each TK is a single word: no spaces allowed!</p>
	</div>
	<div class="email-content">
		<textarea bind:value={emailContent}/>
		<p>
			<strong>Detected fields:</strong>
			{#each tkList as tk (tk)}
				<span class="tag">{tk}</span>
			{/each}
		</p>
	</div>
	{/if}

	{#if step >= 2}
	<div class="instructions">
		<p>Now, fill in the fields for each user. (You can also copy-paste rows and columns directly from Air, if the ordering is right!)</p>
	</div>
	{/if}
	<div id="editor" bind:this={editor}></div>

	{#if step == 1}
	<button on:click={showSheet}>Next</button>
	{/if}
</main>

<style>
	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}

	h1 {
		margin-bottom: 0;
	}

	h1 + h2 {
		margin-top: 0;
	}

	.main-pic {
		max-width: 100%;
	}

	@media (min-width: 640px) {
		main {
			max-width: none;
		}

		.main-pic {
			max-width: 240px;
		}
	}

	.instructions {
		max-width: 640px;
		margin: 0 auto;
	}

	.email-content {
		margin: 4em auto;
	}

	.email-content textarea {
		width: 100%;
		max-width: 640px;
		font-family: inherit;
		min-height: 15em;
	}

	.tag {
		margin: 0.2em;
		padding: 0.5em 1em 0.5em 1em;
		background: #ffe3ff;
		border-radius: 1em;
	}
</style>