Automatically generate tutorial app from Markdown

web/docs/tutorial/03-pages.md

@@ -99,27 +99,15 @@ Start by cleaning up the starter project and removing unnecessary code and files
 
 First, remove most of the code from the `MainPage` component:
 
-<Tabs groupId="js-ts">
-  <TabItem value="js" label="JavaScript">
-    ```jsx title="src/MainPage.jsx"
-    export const MainPage = () => {
-      return <div>Hello world!</div>
-    }
-    ```
-  </TabItem>
+<TutorialAction step="1" action="write" path="src/MainPage.tsx">
 
-  <TabItem value="ts" label="TypeScript">
-  <TutorialAction step="1" action="write" path="src/MainPage.tsx">
-
-  ```tsx title="src/MainPage.tsx"
-  export const MainPage = () => {
-    return <div>Hello world!</div>
-  }
-  ```
-
-  </TutorialAction>
-  </TabItem>
-</Tabs>
+```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:
 
@@ -131,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: {
@@ -139,33 +129,13 @@ app TodoApp {
   title: "TodoApp"
 }
 
-    route RootRoute { path: "/", to: MainPage }
-    page MainPage {
-      component: import { MainPage } from "@src/MainPage"
-    }
-    ```
-  </TabItem>
+route RootRoute { path: "/", to: MainPage }
+page MainPage {
+  component: import { MainPage } from "@src/MainPage"
+}
+```
 
-  <TabItem value="ts" label="TypeScript">
-  <TutorialAction step="2" action="write" path="main.wasp">
-
-  ```wasp title="main.wasp"
-  app TodoApp {
-    wasp: {
-      version: "{latestWaspVersion}"
-    },
-    title: "TodoApp"
-  }
-
-  route RootRoute { path: "/", to: MainPage }
-  page MainPage {
-    component: import { MainPage } from "@src/MainPage"
-  }
-  ```
-
-  </TutorialAction>
-  </TabItem>
-</Tabs>
+</TutorialAction>
 
 Excellent work!
 

web/docs/tutorial/05-queries.md

@@ -102,25 +102,23 @@ 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'
 
-  <TabItem value="ts" label="TypeScript">
-  <TutorialAction step="6" action="write" path="src/queries.ts">
+export const getTasks: GetTasks<void, Task[]> = async (args, context) => {
+  return context.entities.Task.findMany({
+    orderBy: { id: 'asc' },
+  })
+}
+```
 
-  ```js title="src/queries.ts"
-  import { Task } from 'wasp/entities'
-  import { type GetTasks } from 'wasp/server/operations'
+ </TutorialAction>
 
-  export const getTasks: GetTasks<void, Task[]> = async (args, context) => {
-    return context.entities.Task.findMany({
-      orderBy: { id: 'asc' },
-    })
-  }
-  ```
-
-  </TutorialAction>
+<ShowForTs>
+Wasp automatically generates the types `GetTasks` and `Task` based on the contents of `main.wasp`:
 
 - `Task` is a type corresponding to the `Task` entity you defined in `schema.prisma`.
 - `GetTasks` is a generic type Wasp automatically generated based on the `getTasks` Query you defined in `main.wasp`.
@@ -152,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
@@ -185,62 +185,18 @@ const TaskView = ({ task }: { task: Task }) => {
 const TasksList = ({ tasks }: { tasks: Task[] }) => {
   if (!tasks?.length) return <div>No tasks</div>
 
-      return (
-        <div>
-          {tasks.map((task, idx) => (
-            <TaskView task={task} key={idx} />
-          ))}
-        </div>
-      )
-    }
-    ```
-  </TabItem>
+  return (
+    <div>
+      {tasks.map((task, idx) => (
+        <TaskView task={task} key={idx} />
+      ))}
+    </div>
+  )
+}
+// highlight-end
+```
 
-  <TabItem value="ts" label="TypeScript">
-  <TutorialAction step="7" action="write" path="src/MainPage.tsx">
-
-  ```tsx {1-2,5-14,17-36} title="src/MainPage.tsx"
-  import { Task } from 'wasp/entities'
-  import { getTasks, useQuery } from 'wasp/client/operations'
-
-  export const MainPage = () => {
-    const { data: tasks, isLoading, error } = useQuery(getTasks)
-
-    return (
-      <div>
-        {tasks && <TasksList tasks={tasks} />}
-
-        {isLoading && 'Loading...'}
-        {error && 'Error: ' + error}
-      </div>
-    )
-  }
-
-  const TaskView = ({ task }: { task: Task }) => {
-    return (
-      <div>
-        <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>
-
-    return (
-      <div>
-        {tasks.map((task, idx) => (
-          <TaskView task={task} key={idx} />
-        ))}
-      </div>
-    )
-  }
-  ```
-
-  </TutorialAction>
-  </TabItem>
-</Tabs>
+</TutorialAction>
 
 Most of this code is regular React, the only exception being the <ShowForJs>two</ShowForJs><ShowForTs>three</ShowForTs> special `wasp` imports: