include directory in tutorial content

Author: Rich-Harris

src/fs/get_content.ts

@@ -1,6 +1,5 @@
 import { promises as fs } from "fs";
 import * as path from "path";
-import { docs_full_out } from "../transform/fixtures/docs";
 
 export type SimpleFile = {
 	name: string;

src/transform/docs.ts

@@ -215,6 +215,7 @@ export async function transform_examples(
 }
 
 async function process_tutorial(
+	dir: string,
 	content: SimpleFile[],
 	seen_slugs: Map<string, number>,
 	project: string,
@@ -252,10 +253,10 @@ async function process_tutorial(
 			const _example = {
 				name: vfile.data.section_title,
 				slug: slug,
-
 			};
 
 			full.push({
+				dir: `${dir}/${name}`,
 				..._example,
 				initial: initial.map(get_files),
 				complete: completed ? completed.map(get_files) : [],
@@ -278,9 +279,10 @@ export async function transform_tutorial(
 
 	const full: Tutorial[] = [];
 	const list = await Promise.all(
-		examples.map(async ({ content }) => {
+		examples.map(async ({ name, content }) => {
 			const [files, meta] = extract_meta(content);
 			const [example_full, example_list] = await process_tutorial(
+				name,
 				files,
 				seen_slugs,
 				project,

src/transform/fixtures/tutorials.ts

@@ -126,6 +126,7 @@ export const tutorials_out_list = [
 
 export const tutorials_out_full = [
 	{
+		dir: '01-introduction/01-basics',
 		name: "Basics",
 		slug: "basics",
 		initial: [
@@ -140,6 +141,7 @@ export const tutorials_out_full = [
 			"<p>Welcome to the Svelte tutorial. This will teach you everything you need to know to build fast, small web applications easily.</p>\n<p>You can also consult the <a href=\"docs\" rel=\"noopener noreferrer\">API docs</a> and the <a href=\"examples\" rel=\"noopener noreferrer\">examples</a>, or — if you're impatient to start hacking on your machine locally — the <a href=\"blog/the-easiest-way-to-get-started\" rel=\"noopener noreferrer\">60-second quickstart</a>.</p>\n<h2>What is Svelte?</h2>\n<p>Svelte is a tool for building fast web applications.</p>\n<p>It is similar to JavaScript frameworks such as React and Vue, which share a goal of making it easy to build slick interactive user interfaces.</p>\n<p>But there's a crucial difference: Svelte converts your app into ideal JavaScript at <em>build time</em>, rather than interpreting your application code at <em>run time</em>. This means you don't pay the performance cost of the framework's abstractions, and you don't incur a penalty when your app first loads.</p>\n<p>You can build your entire app with Svelte, or you can add it incrementally to an existing codebase. You can also ship components as standalone packages that work anywhere, without the overhead of a dependency on a conventional framework.</p>\n<h2>How to use this tutorial</h2>\n<p>You'll need to have basic familiarity with HTML, CSS and JavaScript to understand Svelte.</p>\n<p>As you progress through the tutorial, you'll be presented with mini exercises designed to illustrate new features. Later chapters build on the knowledge gained in earlier ones, so it's recommended that you go from start to finish. If necessary, you can navigate via the dropdown above (click 'Introduction / Basics').</p>\n<p>Each tutorial chapter will have a 'Show me' button that you can click if you get stuck following the instructions. Try not to rely on it too much; you will learn faster by figuring out where to put each suggested code block and manually typing it in to the editor.</p>\n<h2>Understanding components</h2>\n<p>In Svelte, an application is composed from one or more <em>components</em>. A component is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written into a <code>.svelte</code> file. The 'hello world' example in the code editor is a simple component.</p>",
 	},
 	{
+		dir: '01-introduction/02-adding-data',
 		name: "Adding data",
 		slug: "adding-data",
 		initial: [
@@ -161,6 +163,7 @@ export const tutorials_out_full = [
 			'<p>A component that just renders some static markup isn\'t very interesting. Let\'s add some data.</p>\n<p>First, add a script tag to your component and declare a <code>name</code> variable:</p>\n<div class="code-block"><pre class=\'language-markup\'><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n\t<span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token string">\'world\'</span><span class="token punctuation">;</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>Hello world!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span></code></pre></div>\n<p>Then, we can refer to <code>name</code> in the markup:</p>\n<div class="code-block"><pre class=\'language-markup\'><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>Hello {name}!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span></code></pre></div>\n<p>Inside the curly braces, we can put any JavaScript we want. Try changing <code>name</code> to <code>name.toUpperCase()</code> for a shoutier greeting.</p>',
 	},
 	{
+		dir: '02-reactivity/01-reactive-assignments',
 		name: "Assignments",
 		slug: "reactive-assignments",
 		initial: [

src/types.ts

@@ -50,6 +50,7 @@ export type TutorialMeta = {
 };
 // single tutorial
 export type Tutorial = TutorialMeta & {
+	dir: string;
 	content: string;
 	initial: File[];
 	complete: File[]; // not a feature for every tutorial