Automatically generate tutorial app from Markdown

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 '@site/src/components/TutorialAction';
 
 In the default `main.wasp` file created by `wasp new`, there is a **page** and a **route** declaration:
 
@@ -98,12 +99,16 @@ Start by cleaning up the starter project and removing unnecessary code and files
 
 First, remove most of the code from the `MainPage` component:
 
+<TutorialAction step="1" action="write" path="src/MainPage.tsx">
+
 ```tsx title="src/MainPage.tsx" auto-js
 export const MainPage = () => {
   return <div>Hello world!</div>
 }
 ```
 
+</TutorialAction>
+
 At this point, the main page should look like this:
 
 <img alt="Todo App - Hello World" src={useBaseUrl('img/todo-app-hello-world.png')} style={{ border: "1px solid black" }} />
@@ -114,6 +119,8 @@ Since `src/HelloPage.{jsx,tsx}` no longer exists, remove its `route` and `page`
 
 Your Wasp file should now look like this:
 
+<TutorialAction step="2" action="write" path="main.wasp">
+
 ```wasp title="main.wasp"
 app TodoApp {
   wasp: {
@@ -128,6 +135,8 @@ page MainPage {
 }
 ```
 
+</TutorialAction>
+
 Excellent work!
 
 You now have a basic understanding of Wasp and are ready to start building your TodoApp.

web/docs/tutorial/04-entities.md

@@ -3,13 +3,36 @@ title: 4. Database Entities
 ---
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import { TutorialAction } from '@site/src/components/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 step="3" action="diff">
+
+```diff
+diff --git a/schema.prisma b/schema.prisma
+index 190e2a8..65d7d30 100644
+--- a/schema.prisma
++++ b/schema.prisma
+@@ -8,3 +8,9 @@ datasource db {
+ generator client {
+   provider = "prisma-client-js"
+ }
++
++model Task {
++  id          Int     @id @default(autoincrement())
++  description String
++  isDone      Boolean @default(false)
++}
+
+```
+
+</TutorialAction>
+
 ```prisma title="schema.prisma"
 // ...
 
@@ -26,6 +49,7 @@ Read more about how Wasp Entities work in the [Entities](../data-model/entities.
 
 To update the database schema to include this entity, stop the `wasp start` process, if it's running, and run:
 
+<TutorialAction step="4" 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 '@site/src/components/TutorialAction';
 
 We want to know which tasks we need to do, so let's list them!
 
@@ -42,6 +43,35 @@ We need to add a **query** declaration to `main.wasp` so that Wasp knows it exis
   </TabItem>
 
   <TabItem value="ts" label="TypeScript">
+  <TutorialAction step="5" action="diff">
+
+  ```diff
+  diff --git a/main.wasp b/main.wasp
+  index 3a25ea9..ea22c79 100644
+  --- a/main.wasp
+  +++ b/main.wasp
+  @@ -8,4 +8,15 @@ app TodoApp {
+   route RootRoute { path: "/", to: MainPage }
+   page MainPage {
+     component: import { MainPage } from "@src/MainPage"
+  -}
+  \ No newline at end of file
+  +}
+  +
+  +query getTasks {
+  +  // Specifies where the implementation for the query function is.
+  +  // The path `@src/queries` resolves to `src/queries.ts`.
+  +  // No need to specify an extension.
+  +  fn: import { getTasks } from "@src/queries",
+  +  // Tell Wasp that this query reads from the `Task` entity. Wasp will
+  +  // automatically update the results of this query when tasks are modified.
+  +  entities: [Task]
+  +}
+  +
+
+  ```
+
+  </TutorialAction>
     ```wasp title="main.wasp"
     // ...
 
@@ -72,6 +102,8 @@ 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 step="6" action="write" path="src/queries.ts">
+
 ```ts title="src/queries.ts" auto-js
 import type { Task } from 'wasp/entities'
 import type { GetTasks } from 'wasp/server/operations'
@@ -83,6 +115,8 @@ export const getTasks: GetTasks<void, Task[]> = async (args, context) => {
 }
 ```
 
+ </TutorialAction>
+
 <ShowForTs>
 Wasp automatically generates the types `GetTasks` and `Task` based on the contents of `main.wasp`:
 
@@ -116,6 +150,8 @@ 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 step="7" action="write" path="src/MainPage.tsx">
+
 ```tsx title="src/MainPage.tsx" auto-js
 import type { Task } from 'wasp/entities'
 // highlight-next-line
@@ -160,6 +196,8 @@ const TasksList = ({ tasks }: { tasks: Task[] }) => {
 // highlight-end
 ```
 
+</TutorialAction>
+
 Most of this code is regular React, the only exception being the <ShowForJs>two</ShowForJs><ShowForTs>three</ShowForTs> special `wasp` imports:
 
 <ShowForJs>