add landing page for effect tutorials

Effect-TS · Jun 14, 2024 · b9a8968 · b9a8968
1 parent 0e73533
commit b9a8968
Show file tree

Hide file tree

Showing 23 changed files with 860 additions and 34 deletions.
diff --git a/content/tutorials/basics/100-your-first-effect.mdx b/content/tutorials/basics/100-your-first-effect.mdx
@@ -1,7 +1,5 @@
 ---
 title: Your first Effect
-excerpt: Learn the basics of Effect
-section: Learn the basics
 ---
 
 ### What is an Effect?

diff --git a/content/tutorials/basics/200-returning-values.mdx b/content/tutorials/basics/200-returning-values.mdx
@@ -1,6 +1,5 @@
 ---
 title: Returning values
-excerpt: Learn the basics of Effect
 ---
 
 Congratulations on running your first Effect!

diff --git a/content/tutorials/basics/300-combining-effects.mdx b/content/tutorials/basics/300-combining-effects.mdx
@@ -1,6 +1,5 @@
 ---
 title: Combining Effects
-excerpt: Learn the basics of Effect
 ---
 
 Now that you can create and run effects, let's take a look at how you can

diff --git a/content/tutorials/basics/400-using-generators.mdx b/content/tutorials/basics/400-using-generators.mdx
@@ -1,6 +1,5 @@
 ---
 title: Using generators
-excerpt: Learn the basics of Effect
 ---
 
 To make using Effect more approachable, we can use generators to write our

diff --git a/content/tutorials/basics/index.mdx b/content/tutorials/basics/index.mdx
@@ -1,7 +1,11 @@
 ---
 title: Welcome
-excerpt: Learn the basics of Effect
-section: Learn the basics
+excerpt: Learn the basics of Effect by exploring fundamental concepts and core data types.
+section: The Basics of Effect
+difficulty: beginner
+prerequisites:
+  - Familiarity with asynchronous programming in JavaScript
+  - Basic understanding of TypeScript syntax and features
 ---
 
 Welcome to the Effect tutorials!

diff --git a/content/tutorials/incremental-adoption/100-getting-started.mdx b/content/tutorials/incremental-adoption/100-getting-started.mdx
@@ -1,7 +1,5 @@
 ---
 title: Getting Started
-excerpt: Learn how to incrementally adopt Effect into your application
-section: Incremental Adoption
 workspace: express
 ---
 

diff --git a/content/tutorials/incremental-adoption/200-dealing-with-errors.mdx b/content/tutorials/incremental-adoption/200-dealing-with-errors.mdx
@@ -1,7 +1,5 @@
 ---
 title: Dealing with Errors
-excerpt: Learn how to incrementally adopt Effect into your application
-section: Incremental Adoption
 workspace: express
 ---
 

diff --git a/content/tutorials/incremental-adoption/300-handling-requirements.mdx b/content/tutorials/incremental-adoption/300-handling-requirements.mdx
@@ -1,7 +1,5 @@
 ---
 title: Handling Requirements
-excerpt: Learn how to incrementally adopt Effect into your application
-section: Incremental Adoption
 workspace: express
 ---
 

diff --git a/content/tutorials/incremental-adoption/index.mdx b/content/tutorials/incremental-adoption/index.mdx
@@ -1,8 +1,14 @@
 ---
 title: Introduction
-excerpt: Learn how to incrementally adopt Effect into your application
+excerpt: Explore how Effect can be adopted incrementally into existing applications.
 section: Incremental Adoption
+difficulty: intermediate
 workspace: express
+prerequisites:
+  - Completion of The Basics of Effect
+  - Understanding of how effects are executed
+  - Ability to handle errors with Effect
+  - Comfort managing requirements with Effect
 ---
 
 ### Incrementally Adopting Effect

diff --git a/package.json b/package.json
@@ -21,13 +21,16 @@
     "@effect/rpc-http": "^0.28.44",
     "@effect/schema": "^0.67.22",
     "@headlessui/react": "1.7.17",
+    "@hookform/resolvers": "^3.6.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
@@ -55,6 +58,7 @@
     "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
+    "react-hook-form": "^7.51.5",
     "react-instantsearch": "^7.4.1",
     "react-resizable-panels": "^2.0.19",
     "react-tweet": "^3.2.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/tutorials/[...slug]/components/Navigation.tsx b/src/app/tutorials/[...slug]/components/Navigation.tsx
@@ -16,6 +16,7 @@ export declare namespace Navigation {
 }
 
 export const Navigation: React.FC<Navigation.Props> = async ({ tutorial }) => {
+  console.log(groupedTutorials)
   const group = groupedTutorials[tutorialSection(tutorial)]
   const index = group.children.indexOf(tutorial)
   const previous = group.children[index - 1]

diff --git a/src/app/tutorials/[...slug]/page.tsx b/src/app/tutorials/[...slug]/page.tsx
@@ -3,7 +3,10 @@ import { notFound } from "next/navigation"
 import * as FS from "node:fs/promises"
 import * as Path from "node:path"
 import { MDX } from "@/components/atoms/mdx"
-import { groupedTutorials, tutorialSection } from "@/workspaces/domain/tutorial"
+import {
+  groupedTutorials,
+  tutorialSection
+} from "@/workspaces/domain/tutorial"
 import { Navigation } from "./components/Navigation"
 import { Tutorial } from "./components/Tutorial"
 
@@ -70,19 +73,21 @@ export default async function Page({
   )
 
   return (
-    <Tutorial
-      name={name}
-      files={filesWithContent}
-      workspace={page.workspace}
-      navigation={<Navigation tutorial={page} />}
-      next={
-        next && {
-          title: next.title,
-          url: next.urlPath
+    <div className="h-screen flex flex-col">
+      <Tutorial
+        name={name}
+        files={filesWithContent}
+        workspace={page.workspace}
+        navigation={<Navigation tutorial={page} />}
+        next={
+          next && {
+            title: next.title,
+            url: next.urlPath
+          }
         }
-      }
-    >
-      <MDX content={page.body.code} />
-    </Tutorial>
+      >
+        <MDX content={page.body.code} />
+      </Tutorial>
+    </div>
   )
 }