Automatically generate tutorial app from Markdown

web/docs/tutorial/01-create.md

@@ -3,6 +3,7 @@ title: 1. Creating a New Project
 ---
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import { TutorialAction } from './TutorialAction';
 
 :::info
 You'll need to have the latest version of Wasp installed locally to follow this tutorial. If you haven't installed it yet, check out the [QuickStart](../quick-start) guide!
@@ -24,9 +25,12 @@ You can find the complete code of the app we're about to build [here](https://gi
 
 To setup a new Wasp project, run the following command in your terminal:
 
+<TutorialAction id="create-wasp-app" action="INIT_APP" starterTemplateName="minimal">
+
 ```sh
 wasp new TodoApp -t minimal
 ```
+</TutorialAction>
 
 <small>
 

web/docs/tutorial/03-pages.md

@@ -6,6 +6,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import { ShowForTs } from '@site/src/components/TsJsHelpers';
 import WaspStartNote from '../\_WaspStartNote.md'
 import TypescriptServerNote from '../\_TypescriptServerNote.md'
+import { TutorialAction } from './TutorialAction';
 
 In the default `main.wasp` file created by `wasp new`, there is a **page** and a **route** declaration:
 
@@ -47,7 +48,7 @@ import './Main.css';
 
 export function MainPage() {
   // ...
-}
+};
 ```
 
 This is a regular functional React component. It also imports some CSS and a logo from the `assets` folder.
@@ -74,12 +75,12 @@ page HelloPage {
 When a user visits `/hello/their-name`, Wasp renders the component exported from `src/HelloPage.{jsx,tsx}` and you can use the `useParams` hook from `react-router-dom` to access the `name` parameter:
 
 ```tsx title="src/HelloPage.tsx" auto-js
-import { useParams } from 'react-router-dom'
+import { useParams } from "react-router-dom";
 
 export const HelloPage = () => {
-  const { name } = useParams<'name'>()
-  return <div>Here's {name}!</div>
-}
+  const { name } = useParams<"name">();
+  return <div>Here's {name}!</div>;
+};
 ```
 
 Now you can visit `/hello/johnny` and see "Here's johnny!"
@@ -96,12 +97,14 @@ Now that you've seen how Wasp deals with Routes and Pages, it's finally time to
 
 Start by cleaning up the starter project and removing unnecessary code and files.
 
+<TutorialAction id="prepare-project" action="APPLY_PATCH">
+
 First, remove most of the code from the `MainPage` component:
 
 ```tsx title="src/MainPage.tsx" auto-js
 export const MainPage = () => {
-  return <div>Hello world!</div>
-}
+  return <div>Hello world!</div>;
+};
 ```
 
 At this point, the main page should look like this:
@@ -130,6 +133,7 @@ page MainPage {
   component: import { MainPage } from "@src/MainPage"
 }
 ```
+</TutorialAction>
 
 Excellent work!
 

web/docs/tutorial/04-entities.md

@@ -3,13 +3,16 @@ title: 4. Database Entities
 ---
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import { TutorialAction } from './TutorialAction';
 
 Entities are one of the most important concepts in Wasp and are how you define what gets stored in the database.
 
 Wasp uses Prisma to talk to the database, and you define Entities by defining Prisma models in the `schema.prisma` file.
 
 Since our Todo app is all about tasks, we'll define a Task entity by adding a Task model in the `schema.prisma` file:
 
+<TutorialAction id="prisma-task" action="APPLY_PATCH">
+
 ```prisma title="schema.prisma"
 // ...
 
@@ -19,13 +22,15 @@ model Task {
     isDone      Boolean @default(false)
 }
 ```
+</TutorialAction>
 
 :::note
 Read more about how Wasp Entities work in the [Entities](../data-model/entities.md) section or how Wasp uses the `schema.prisma` file in the [Prisma Schema File](../data-model/prisma-file.md) section.
 :::
 
 To update the database schema to include this entity, stop the `wasp start` process, if it's running, and run:
 
+<TutorialAction id="migration-add-task" action="MIGRATE_DB" />
 ```sh
 wasp db migrate-dev
 ```

web/docs/tutorial/05-queries.md

@@ -4,6 +4,7 @@ title: 5. Querying the Database
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import { ShowForTs, ShowForJs } from '@site/src/components/TsJsHelpers';
+import { TutorialAction } from './TutorialAction';
 
 We want to know which tasks we need to do, so let's list them!
 
@@ -24,6 +25,7 @@ We'll create a new Query called `getTasks`. We'll need to declare the Query in t
 
 We need to add a **query** declaration to `main.wasp` so that Wasp knows it exists:
 
+<TutorialAction id="query-get-tasks" action="APPLY_PATCH">
 <Tabs groupId="js-ts">
   <TabItem value="js" label="JavaScript">
     ```wasp title="main.wasp"
@@ -39,6 +41,7 @@ We need to add a **query** declaration to `main.wasp` so that Wasp knows it exis
       entities: [Task]
     }
     ```
+
   </TabItem>
 
   <TabItem value="ts" label="TypeScript">
@@ -59,8 +62,10 @@ We need to add a **query** declaration to `main.wasp` so that Wasp knows it exis
     :::note
     To generate the types used in the next section, make sure that `wasp start` is still running.
     :::
+
   </TabItem>
 </Tabs>
+</TutorialAction>
 
 ### Implementing a Query
 
@@ -72,17 +77,19 @@ We need to add a **query** declaration to `main.wasp` so that Wasp knows it exis
   Next, create a new file called `src/queries.ts` and define the TypeScript function we've just imported in our `query` declaration:
 </ShowForTs>
 
+<TutorialAction id="query-get-tasks-impl" action="APPLY_PATCH">
+
 ```ts title="src/queries.ts" auto-js
-import type { Task } from 'wasp/entities'
-import type { GetTasks } from 'wasp/server/operations'
+import type { Task } from "wasp/entities";
+import type { GetTasks } from "wasp/server/operations";
 
 export const getTasks: GetTasks<void, Task[]> = async (args, context) => {
   return context.entities.Task.findMany({
-    orderBy: { id: 'asc' },
-  })
-}
+    orderBy: { id: "asc" },
+  });
+};
 ```
-
+</TutorialAction>
 <ShowForTs>
 Wasp automatically generates the types `GetTasks` and `Task` based on the contents of `main.wasp`:
 
@@ -116,25 +123,27 @@ While we implement Queries on the server, Wasp generates client-side functions t
 
 This makes it easy for us to use the `getTasks` Query we just created in our React component:
 
+<TutorialAction id="main-page-tasks" action="APPLY_PATCH">
+
 ```tsx title="src/MainPage.tsx" auto-js
-import type { Task } from 'wasp/entities'
+import type { Task } from "wasp/entities";
 // highlight-next-line
-import { getTasks, useQuery } from 'wasp/client/operations'
+import { getTasks, useQuery } from "wasp/client/operations";
 
 export const MainPage = () => {
   // highlight-start
-  const { data: tasks, isLoading, error } = useQuery(getTasks)
+  const { data: tasks, isLoading, error } = useQuery(getTasks);
 
   return (
     <div>
       {tasks && <TasksList tasks={tasks} />}
 
-      {isLoading && 'Loading...'}
-      {error && 'Error: ' + error}
+      {isLoading && "Loading..."}
+      {error && "Error: " + error}
     </div>
-  )
+  );
   // highlight-end
-}
+};
 
 // highlight-start
 const TaskView = ({ task }: { task: Task }) => {
@@ -143,22 +152,23 @@ const TaskView = ({ task }: { task: Task }) => {
       <input type="checkbox" id={String(task.id)} checked={task.isDone} />
       {task.description}
     </div>
-  )
-}
+  );
+};
 
 const TasksList = ({ tasks }: { tasks: Task[] }) => {
-  if (!tasks?.length) return <div>No tasks</div>
+  if (!tasks?.length) return <div>No tasks</div>;
 
   return (
     <div>
       {tasks.map((task, idx) => (
         <TaskView task={task} key={idx} />
       ))}
     </div>
-  )
-}
+  );
+};
 // highlight-end
 ```
+</TutorialAction>
 
 Most of this code is regular React, the only exception being the <ShowForJs>two</ShowForJs><ShowForTs>three</ShowForTs> special `wasp` imports:
 
@@ -172,7 +182,7 @@ Most of this code is regular React, the only exception being the <ShowForJs>two<
   - `useQuery` - Wasp's [useQuery](../data-model/operations/queries#the-usequery-hook-1) React hook, which is based on [react-query](https://github.com/tannerlinsley/react-query)'s hook with the same name.
   - `Task` - The type for the Task entity defined in `schema.prisma`.
 
-  Notice how you don't need to annotate the type of the Query's return value: Wasp uses the types you defined while implementing the Query for the generated client-side function. This is **full-stack type safety**: the types on the client always match the types on the server.
+Notice how you don't need to annotate the type of the Query's return value: Wasp uses the types you defined while implementing the Query for the generated client-side function. This is **full-stack type safety**: the types on the client always match the types on the server.
 </ShowForTs>
 
 We could have called the Query directly using `getTasks()`, but the `useQuery` hook makes it reactive: React will re-render the component every time the Query changes. Remember that Wasp automatically refreshes Queries whenever the data is modified.