Create initial tutorial for the website

content/astro.config.ts

@@ -18,11 +18,11 @@ import { pluginOpenInPlayground } from "./src/plugins/expressive-code/open-in-pl
 import { pluginTwoslashPagefind } from "./src/plugins/expressive-code/twoslash-pagefind"
 import { effectPlaygroundPlugin } from "./src/plugins/starlight/playground"
 import { effectPodcastPlugin } from "./src/plugins/starlight/podcast"
+import { effectLearnPlugin } from "./src/plugins/starlight/learn"
 import { monacoEditorPlugin } from "./src/plugins/vite/monaco-editor"
 
 const VERCEL_PREVIEW_DOMAIN =
-  process.env.VERCEL_ENV !== "production" &&
-  process.env.VERCEL_BRANCH_URL
+  process.env.VERCEL_ENV !== "production" && process.env.VERCEL_BRANCH_URL
 
 const domain = VERCEL_PREVIEW_DOMAIN || "effect.website"
 
@@ -208,6 +208,7 @@ export default defineConfig({
         starlightLinksValidator({
           exclude: ["/events/effect-days*"]
         }),
+        effectLearnPlugin(),
         effectPlaygroundPlugin({
           pattern: "/play"
         }),

content/package.json

@@ -46,6 +46,7 @@
     "@radix-ui/react-tooltip": "^1.1.4",
     "@sentry/opentelemetry": "^8.50.0",
     "@tanstack/react-table": "^8.20.5",
+    "@types/express": "^5.0.0",
     "@types/json-schema": "^7.0.15",
     "@types/node": "^22.9.3",
     "@types/react": "^18.3.12",

content/src/components/plugins/learn/Tutorial.astro

@@ -0,0 +1,38 @@
+---
+import type { GetStaticPathsResult, InferGetStaticPropsType } from "astro"
+import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro"
+import type { StarlightPageProps } from "@astrojs/starlight/props"
+import { getTutorialEntries } from "@/lib/content/tutorial"
+
+export const prerender = true
+
+export async function getStaticPaths() {
+  const entries = await getTutorialEntries()
+  return entries.map((entry) => ({
+    params: {
+      prefix: "learn",
+      tutorial: entry.slug.replace("learn/tutorial", "")
+    },
+    props: {
+      tutorial: entry.data,
+      render: entry.render
+    }
+  })) satisfies GetStaticPathsResult
+}
+
+type Props = InferGetStaticPropsType<typeof getStaticPaths>
+
+const pageProps: StarlightPageProps = {
+  frontmatter: {
+    title: "Effect Tutorials",
+  },
+}
+
+const { tutorial } = Astro.props
+const { Content } = await Astro.props.render()
+---
+
+<StarlightPage {...pageProps}>
+  <div>{tutorial.title}</div>
+  <Content />
+</StarlightPage>

content/src/content/config.ts

@@ -3,25 +3,29 @@ import { defineCollection, z } from "astro:content"
 import { docsSchema } from "@astrojs/starlight/schema"
 import { blogSchema } from "starlight-blog/schema"
 import { podcastSchema } from "@/lib/schema/podcast"
+import { tutorialSchema } from "@/lib/schema/tutorial"
 
 export const collections = {
   docs: defineCollection({
     schema: docsSchema({
-      extend: (context) => z.union([podcastSchema, blogSchema(context)])
+      extend: (context) =>
+        z.union([podcastSchema, tutorialSchema, blogSchema(context)])
     })
   }),
   transcripts: defineCollection({
     loader: glob({
-      pattern: "**\/*.json",
+      pattern: "**/*.json",
       base: "./src/data/transcripts"
     }),
-    schema: z.array(z.object({
-      id: z.string(),
-      startTime: z.string(),
-      startSeconds: z.number(),
-      endTime: z.string(),
-      endSeconds: z.number(),
-      text: z.string()
-    }))
+    schema: z.array(
+      z.object({
+        id: z.string(),
+        startTime: z.string(),
+        startSeconds: z.number(),
+        endTime: z.string(),
+        endSeconds: z.number(),
+        text: z.string()
+      })
+    )
   })
-};
+}

content/src/content/docs/index.mdx

@@ -11,4 +11,10 @@ hero:
     - text: Blog
       link: /blog/
       icon: right-arrow
+    - text: Learn
+      link: /learn/tutorials/introduction/
+      icon: right-arrow
+    - text: Podcast
+      link: /podcast/
+      icon: right-arrow
 ---