denoland · philhawksworth · Nov 27, 2024 · Nov 26, 2024 · Nov 27, 2024 · Nov 27, 2024
diff --git a/learn/_components/TutorialList.tsx b/learn/_components/TutorialList.tsx
@@ -0,0 +1,16 @@
+export function TutorialList(
+  props: { title: string; items: ({ label: string; id: string })[] },
+) {
+  return (
+    <section className="mb-6">
+      <h2 className="text-lg font-semibold mb-3">{props.title}</h2>
+      <ul className="">
+        {props.items.map((item) => (
+          <li>
+            <a className="homepage-link mb-1 runtime-link" href={item.id}>{item.label}</a>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
diff --git a/learn/_pages/TutorialsPage.tsx b/learn/_pages/TutorialsPage.tsx
@@ -1,3 +1,35 @@
+import { TutorialList } from "../_components/TutorialList.tsx";
+import { sidebar } from "../tutorials/_data.ts";
+
 export default function TutorialPage() {
-  return <div>The tutorials page</div>;
+  const componentsPerSidebarItem = sidebar.map((item) => {
+    return (
+      <TutorialList
+        title={item.title}
+        items={item.items}
+      />
+    );
+  });
+
+  return (
+    <main
+      id="content"
+      className="w-full px-8 pt-6 mt-16 max-w-screen-xl mx-auto mb-20"
+    >
+      <div className="pb-16 md:pb-0 w-full flex items-center">
+        <div className="align-middle gap-8 mb-20">
+          <h1 className="text-4xl md:text-6xl font-semibold mb-4">
+            Tutorials and guides
+          </h1>
+          <p className="max-w-prose mx-auto">
+            Walkthrough tutorials and guides to teach you about the Deno runtime
+            and how to use it with your favorite tools.
+          </p>
+        </div>
+      </div>
+      <div className="grid grid-cols-3 gap-8">
+        {componentsPerSidebarItem}
+      </div>
+    </main>
+  );
 }
diff --git a/learn/tutorials/_data.ts b/learn/tutorials/_data.ts
@@ -0,0 +1,156 @@
+import { Sidebar } from "../../types.ts";
+
+export const sidebar = [
+  {
+    title: "Basics",
+    items: [
+      {
+        label: "Hello World!",
+        id: "/learn/tutorials/hello_world/",
+      },
+      {
+        label: "Fetch data",
+        id: "/learn/tutorials/fetch_data/",
+      },
+      {
+        label: "Executable scripts",
+        id: "/learn/tutorials/hashbang/",
+      },
+      {
+        label: "Updating from CommonJS to ESM",
+        id: "/learn/tutorials/cjs_to_esm/",
+      },
+      {
+        label: "Write a file server",
+        id: "/learn/tutorials/file_server/",
+      },
+    ],
+  },
+  {
+    title: "Web frameworks and libraries",
+    items: [
+      {
+        label: "Build a React App",
+        id: "/learn/tutorials/react/",
+      },
+      {
+        label: "Build a React app with create-vite",
+        id: "/learn/tutorials/react/create-react/",
+      },
+      {
+        label: "Build a Next.js app",
+        id: "/learn/tutorials/next/",
+      },
+      {
+        label: "Build a Fresh app",
+        id: "https://fresh.deno.dev/docs/getting-started/create-a-project",
+      },
+      {
+        label: "Build a Vue app",
+        id: "/learn/tutorials/vue/",
+      },
+      {
+        label: "Use Express with Deno",
+        id: "/learn/tutorials/express/",
+      },
+      {
+        label: "How to use Apollo with Deno",
+        id: "/learn/tutorials/apollo/",
+      },
+    ],
+  },
+  {
+    title: "Deploying Deno projects",
+    items: [
+      {
+        label: "AWS Lambda",
+        id: "/learn/tutorials/aws_lambda/",
+      },
+      {
+        label: "AWS Lightsail",
+        id: "/learn/tutorials/aws_lightsail/",
+      },
+      {
+        label: "Cloudflare workers",
+        id: "/learn/tutorials/cloudflare_workers/",
+      },
+      {
+        label: "Digital Ocean",
+        id: "/learn/tutorials/digital_ocean/",
+      },
+      {
+        label: "Google Cloud Run",
+        id: "/learn/tutorials/google_cloud_run/",
+      },
+      {
+        label: "Kinsta",
+        id: "/learn/tutorials/kinsta/",
+      },
+    ],
+  },
+  {
+    title: "Connecting to Databases",
+    items: [
+      {
+        label: "Connecting to databases",
+        id: "/learn/tutorials/connecting_to_databases/",
+      },
+      {
+        label: "Use MySQL2 with Deno",
+        id: "/learn/tutorials/mysql2/",
+      },
+      {
+        label: "Use PlanetScale with Deno",
+        id: "/learn/tutorials/planetscale/",
+      },
+      {
+        label: "Use Redis with Deno",
+        id: "/learn/tutorials/redis/",
+      },
+      {
+        label: "Mongoose and MongoDB",
+        id: "/learn/tutorials/mongoose/",
+      },
+      {
+        label: "Use Prisma with Deno",
+        id: "/learn/tutorials/prisma/",
+      },
+    ],
+  },
+  {
+    title: "Advanced",
+    items: [
+      {
+        label: "Create a subprocess",
+        id: "/learn/tutorials/subprocess/",
+      },
+      {
+        label: "Handle OS signals",
+        id: "/learn/tutorials/os_signals/",
+      },
+      {
+        label: "File system events",
+        id: "/learn/tutorials/file_system_events/",
+      },
+      {
+        label: "Module Metadata",
+        id: "/learn/tutorials/module_metadata/",
+      },
+      {
+        label: "File Based Routing",
+        id: "/learn/tutorials/file_based_routing/",
+      },
+      {
+        label: "Build a chat app with WebSockets",
+        id: "/learn/tutorials/chat_app/",
+      },
+      {
+        label: "Build a word finder app",
+        id: "/learn/tutorials/word_finder/",
+      }
+    ],
+  },
+] satisfies Sidebar;
+
+export const sectionTitle = "Tutorials";
+export const sectionHref = "/learn/tutorials";
diff --git a/runtime/tutorials/how_to_with_npm/apollo.md → learn/tutorials/apollo.md b/runtime/tutorials/how_to_with_npm/apollo.md → learn/tutorials/apollo.md
@@ -3,6 +3,7 @@ title: "How to use Apollo with Deno"
 oldUrl:
   - /runtime/manual/examples/how_to_with_npm/apollo/
   - /runtime/manual/node/how_to_with_npm/apollo/
+  - /runtime/tutorials/how_to_with_npm/apollo/
 ---
 
 [Apollo Server](https://www.apollographql.com/) is a GraphQL server that you can

diff --git a/runtime/tutorials/aws_lambda.md → learn/tutorials/aws_lambda.md b/runtime/tutorials/aws_lambda.md → learn/tutorials/aws_lambda.md
@@ -1,5 +1,8 @@
 ---
 title: "How to Deploy Deno to AWS Lambda"
+oldUrl: 
+- /runtime/tutorials/aws_lambda/
+
 ---
 
 AWS Lambda is a serverless computing service provided by Amazon Web Services. It

diff --git a/runtime/tutorials/aws_lightsail.md → learn/tutorials/aws_lightsail.md b/runtime/tutorials/aws_lightsail.md → learn/tutorials/aws_lightsail.md
@@ -1,6 +1,8 @@
 ---
 title: Deploy Deno to Amazon Lightsail
-oldUrl: /runtime/manual/advanced/deploying_deno/aws_lightsail/
+oldUrl: 
+- /runtime/manual/advanced/deploying_deno/aws_lightsail/
+- /runtime/tutorials/aws_lightsail/
 ---
 
 [Amazon Lightsail](https://aws.amazon.com/lightsail/) is the easiest and

diff --git a/runtime/tutorials/chat_app.md → learn/tutorials/chat_app.md b/runtime/tutorials/chat_app.md → learn/tutorials/chat_app.md
@@ -2,6 +2,7 @@
 title: "Chat application with WebSockets"
 oldUrl:
   - /runtime/manual/examples/chat_app/
+  - /runtime/tutorials/chat_app/
 ---
 
 WebSockets are a powerful tool for building real-time applications. They allow

diff --git a/runtime/tutorials/cjs_to_esm.md → learn/tutorials/cjs_to_esm.md b/runtime/tutorials/cjs_to_esm.md → learn/tutorials/cjs_to_esm.md
@@ -1,6 +1,8 @@
 ---
 title: "Updating from CommonJS to ESM"
-oldUrl: /runtime/manual/node/cjs_to_esm
+oldUrl: 
+- /runtime/manual/node/cjs_to_esm
+- /runtime/tutorials/cjs_to_esm/
 ---
 
 If your Node.js project uses CommonJS modules (e.g. it uses `require`), you'll

diff --git a/runtime/tutorials/cloudflare_workers.md → learn/tutorials/cloudflare_workers.md b/runtime/tutorials/cloudflare_workers.md → learn/tutorials/cloudflare_workers.md
@@ -1,6 +1,8 @@
 ---
 title: "Deploying Deno to Cloudflare Workers"
-oldUrl: /runtime/manual/advanced/deploying_deno/cloudflare_workers/
+oldUrl: 
+- /runtime/manual/advanced/deploying_deno/cloudflare_workers/
+- /runtime/tutorials/cloudflare_workers/
 ---
 
 Cloudflare Workers allows you to run JavaScript on Cloudflare's edge network.

diff --git a/runtime/tutorials/connecting_to_databases.md → learn/tutorials/connecting_to_databases.md b/runtime/tutorials/connecting_to_databases.md → learn/tutorials/connecting_to_databases.md
@@ -1,5 +1,7 @@
 ---
 title: "Connecting to databases"
+oldUrl: 
+- /runtime/tutorials/connecting_to_databases/
 ---
 
 It is common for applications to store and retrieve data from databases. Deno

diff --git a/...tutorials/how_to_with_npm/create-react.md → learn/tutorials/create-react.md b/...tutorials/how_to_with_npm/create-react.md → learn/tutorials/create-react.md
@@ -1,5 +1,7 @@
 ---
 title: "Build a React app with create-vite"
+oldUrl: 
+- /runtime/tutorials/how_to_with_npm/create-react/
 ---
 
 [React](https://reactjs.org) is the most widely used JavaScript frontend

diff --git a/runtime/tutorials/digital_ocean.md → learn/tutorials/digital_ocean.md b/runtime/tutorials/digital_ocean.md → learn/tutorials/digital_ocean.md
@@ -1,6 +1,8 @@
 ---
 title: "How to deploy Deno to Digital Ocean"
-oldUrl: /runtime/manual/advanced/deploying_deno/digital_ocean/
+oldUrl: 
+- /runtime/manual/advanced/deploying_deno/digital_ocean/
+- /runtime/tutorials/digital_ocean/
 ---
 
 Digital Ocean is a popular cloud infrastructure provider offering a variety of

diff --git a/runtime/tutorials/how_to_with_npm/express.md → learn/tutorials/express.md b/runtime/tutorials/how_to_with_npm/express.md → learn/tutorials/express.md
@@ -3,6 +3,7 @@ title: "How to use Express with Deno"
 oldUrl:
   - /runtime/manual/examples/how_to_with_npm/express/
   - /runtime/manual/node/how_to_with_npm/express/
+  - /runtime/tutorials/how_to_with_npm/express/
 ---
 
 [Express](https://expressjs.com/) is a popular web framework known for being

diff --git a/runtime/tutorials/fetch_data.md → learn/tutorials/fetch_data.md b/runtime/tutorials/fetch_data.md → learn/tutorials/fetch_data.md
@@ -2,6 +2,7 @@
 title: "Fetch and stream data"
 oldUrl:
   - /runtime/manual/examples/fetch_data/
+  - /runtime/tutorials/fetch_data/
 ---
 
 Deno brings several familiar Web APIs to the server-side environment. If you've

diff --git a/runtime/tutorials/file_based_routing.md → learn/tutorials/file_based_routing.md b/runtime/tutorials/file_based_routing.md → learn/tutorials/file_based_routing.md
@@ -1,6 +1,8 @@
 ---
 title: File-based routing
-oldUrl: /examples/http-server-file-router/
+oldUrl: 
+- /examples/http-server-file-router/
+- /runtime/tutorials/file_based_routing/
 ---
 
 If you've used frameworks like [Next.js](https://nextjs.org/), you might be

diff --git a/runtime/tutorials/file_server.md → learn/tutorials/file_server.md b/runtime/tutorials/file_server.md → learn/tutorials/file_server.md
@@ -2,6 +2,7 @@
 title: "Write a file server"
 oldUrl:
   - /runtime/manual/examples/file_server/
+  - /runtime/tutorials/file_server/
 ---
 
 A file server listens for incoming HTTP requests and serves files from the local

diff --git a/runtime/tutorials/file_system_events.md → learn/tutorials/file_system_events.md b/runtime/tutorials/file_system_events.md → learn/tutorials/file_system_events.md
@@ -2,6 +2,7 @@
 title: "File system events"
 oldUrl:
   - /runtime/manual/examples/file_system_events/
+  - /runtime/tutorials/file_system_events/
 ---
 
 ## Concepts

diff --git a/runtime/tutorials/google_cloud_run.md → learn/tutorials/google_cloud_run.md b/runtime/tutorials/google_cloud_run.md → learn/tutorials/google_cloud_run.md
@@ -1,6 +1,8 @@
 ---
 title: "How to deploy to Google Cloud Run"
-oldUrl: /runtime/manual/advanced/deploying_deno/google_cloud_run/
+oldUrl: 
+- /runtime/manual/advanced/deploying_deno/google_cloud_run/
+- /runtime/tutorials/google_cloud_run
 ---
 
 [Google Cloud Run](https://cloud.google.com/run) is a managed compute platform

diff --git a/runtime/tutorials/hashbang.md → learn/tutorials/hashbang.md b/runtime/tutorials/hashbang.md → learn/tutorials/hashbang.md
@@ -2,6 +2,7 @@
 title: "Executable scripts"
 oldUrl:
   - /runtime/manual/examples/hashbang/
+  - /runtime/tutorials/hashbang/
 ---
 
 Making Deno scripts executable can come in handy when creating small tools or

diff --git a/runtime/tutorials/hello_world.md → learn/tutorials/hello_world.md b/runtime/tutorials/hello_world.md → learn/tutorials/hello_world.md
@@ -3,6 +3,7 @@ title: "Hello World"
 oldUrl:
   - /runtime/manual/examples/hello_world/
   - /runtime/tutorials/init_project/
+  - /runtime/tutorials/hello_world/
 ---
 
 Deno is a secure runtime for JavaScript and TypeScript.

diff --git a/...tsail/create-container-service-on-aws.png → ...tsail/create-container-service-on-aws.png b/...tsail/create-container-service-on-aws.png → ...tsail/create-container-service-on-aws.png
diff --git a/...llo-world-from-deno-and-aws-lightsail.png → ...llo-world-from-deno-and-aws-lightsail.png b/...llo-world-from-deno-and-aws-lightsail.png → ...llo-world-from-deno-and-aws-lightsail.png
diff --git a/...-lightsail/hello-world-from-localhost.png → ...-lightsail/hello-world-from-localhost.png b/...-lightsail/hello-world-from-localhost.png → ...-lightsail/hello-world-from-localhost.png
diff --git a/...aws-lightsail/new-image-on-docker-hub.png → ...aws-lightsail/new-image-on-docker-hub.png b/...aws-lightsail/new-image-on-docker-hub.png → ...aws-lightsail/new-image-on-docker-hub.png
diff --git a/...cloudflare-workers/main-on-cloudflare.png → ...cloudflare-workers/main-on-cloudflare.png b/...cloudflare-workers/main-on-cloudflare.png → ...cloudflare-workers/main-on-cloudflare.png
diff --git a/...ean/hello-from-deno-and-digital-ocean.png → ...ean/hello-from-deno-and-digital-ocean.png b/...ean/hello-from-deno-and-digital-ocean.png → ...ean/hello-from-deno-and-digital-ocean.png
diff --git a/...ital-ocean/hello-world-from-localhost.png → ...ital-ocean/hello-world-from-localhost.png b/...ital-ocean/hello-world-from-localhost.png → ...ital-ocean/hello-world-from-localhost.png
diff --git a/...e-on-digital-ocean-container-registry.png → ...e-on-digital-ocean-container-registry.png b/...e-on-digital-ocean-container-registry.png → ...e-on-digital-ocean-container-registry.png
diff --git a/...cloud-run/hello-from-google-cloud-run.png → ...cloud-run/hello-from-google-cloud-run.png b/...cloud-run/hello-from-google-cloud-run.png → ...cloud-run/hello-from-google-cloud-run.png
diff --git a/...-cloud-run/hello-world-from-localhost.png → ...-cloud-run/hello-world-from-localhost.png b/...-cloud-run/hello-world-from-localhost.png → ...-cloud-run/hello-world-from-localhost.png
diff --git a/...run/image-in-google-artifact-registry.png → ...run/image-in-google-artifact-registry.png b/...run/image-in-google-artifact-registry.png → ...run/image-in-google-artifact-registry.png
diff --git a/...ository-in-google-artifact-repository.png → ...ository-in-google-artifact-repository.png b/...ository-in-google-artifact-repository.png → ...ository-in-google-artifact-repository.png
diff --git a/.../tutorials/images/how-to/next/dinoapp.gif → .../tutorials/images/how-to/next/dinoapp.gif b/.../tutorials/images/how-to/next/dinoapp.gif → .../tutorials/images/how-to/next/dinoapp.gif
diff --git a/...s/how-to/prisma/1-dinosaurs-in-prisma.png → ...s/how-to/prisma/1-dinosaurs-in-prisma.png b/...s/how-to/prisma/1-dinosaurs-in-prisma.png → ...s/how-to/prisma/1-dinosaurs-in-prisma.png
diff --git a/...es/how-to/prisma/2-dinosaurs-from-api.png → ...es/how-to/prisma/2-dinosaurs-from-api.png b/...es/how-to/prisma/2-dinosaurs-from-api.png → ...es/how-to/prisma/2-dinosaurs-from-api.png
diff --git a/...ow-to/prisma/3-new-dinosaur-in-prisma.png → ...ow-to/prisma/3-new-dinosaur-in-prisma.png b/...ow-to/prisma/3-new-dinosaur-in-prisma.png → ...ow-to/prisma/3-new-dinosaur-in-prisma.png
diff --git a/.../how-to/react/react-dinosaur-app-demo.gif → .../how-to/react/react-dinosaur-app-demo.gif b/.../how-to/react/react-dinosaur-app-demo.gif → .../how-to/react/react-dinosaur-app-demo.gif
diff --git a/...images/how-to/redis/cached-redis-body.png → ...images/how-to/redis/cached-redis-body.png b/...images/how-to/redis/cached-redis-body.png → ...images/how-to/redis/cached-redis-body.png
diff --git a/...ages/how-to/redis/cached-redis-header.png → ...ages/how-to/redis/cached-redis-header.png b/...ages/how-to/redis/cached-redis-header.png → ...ages/how-to/redis/cached-redis-header.png
diff --git a/...ages/how-to/redis/uncached-redis-body.png → ...ages/how-to/redis/uncached-redis-body.png b/...ages/how-to/redis/uncached-redis-body.png → ...ages/how-to/redis/uncached-redis-body.png
diff --git a/...es/how-to/redis/uncached-redis-header.png → ...es/how-to/redis/uncached-redis-header.png b/...es/how-to/redis/uncached-redis-header.png → ...es/how-to/redis/uncached-redis-header.png
diff --git a/runtime/tutorials/images/how-to/vue/vue.gif → learn/tutorials/images/how-to/vue/vue.gif b/runtime/tutorials/images/how-to/vue/vue.gif → learn/tutorials/images/how-to/vue/vue.gif
diff --git a/runtime/tutorials/images/quick-fix.png → learn/tutorials/images/quick-fix.png b/runtime/tutorials/images/quick-fix.png → learn/tutorials/images/quick-fix.png
diff --git a/runtime/tutorials/images/websockets.gif → learn/tutorials/images/websockets.gif b/runtime/tutorials/images/websockets.gif → learn/tutorials/images/websockets.gif
diff --git a/runtime/tutorials/images/word_finder.png → learn/tutorials/images/word_finder.png b/runtime/tutorials/images/word_finder.png → learn/tutorials/images/word_finder.png
diff --git a/runtime/tutorials/kinsta.md → learn/tutorials/kinsta.md b/runtime/tutorials/kinsta.md → learn/tutorials/kinsta.md
@@ -1,6 +1,8 @@
 ---
 title: "How to deploy Deno on Kinsta"
-oldUrl: /runtime/manual/advanced/deploying_deno/kinsta/
+oldUrl: 
+- /runtime/manual/advanced/deploying_deno/kinsta/
+- runtime/tutorials/kinsta
 ---
 
 [Kinsta Application Hosting](https://kinsta.com/application-hosting) is a

diff --git a/runtime/tutorials/module_metadata.md → learn/tutorials/module_metadata.md b/runtime/tutorials/module_metadata.md → learn/tutorials/module_metadata.md
@@ -2,6 +2,7 @@
 title: "Module metadata"
 oldUrl:
   - /runtime/manual/examples/module_metadata/
+  - /runtime/tutorials/module_metadata/
 ---
 
 ## Concepts

diff --git a/...ime/tutorials/how_to_with_npm/mongoose.md → learn/tutorials/mongoose.md b/...ime/tutorials/how_to_with_npm/mongoose.md → learn/tutorials/mongoose.md
@@ -2,6 +2,7 @@
 title: "How to use Mongoose with Deno"
 oldUrl:
   - /runtime/manual/examples/how_to_with_npm/mongoose/
+  - /runtime/tutorials/how_to_with_npm/mongoose/
 ---
 
 [Mongoose](https://mongoosejs.com/) is a popular, schema-based library that

diff --git a/runtime/tutorials/how_to_with_npm/mysql2.md → learn/tutorials/mysql2.md b/runtime/tutorials/how_to_with_npm/mysql2.md → learn/tutorials/mysql2.md
@@ -2,6 +2,7 @@
 title: "How to use MySQL2 with Deno"
 oldUrl:
   - /runtime/manual/examples/how_to_with_npm/mysql2/
+  - /runtime/tutorials/how_to_with_npm/mysql2/
 ---
 
 [MySQL](https://www.mysql.com/) is the most popular database in the