Guides

packages/nextjs/app/guides/[slug]/page.tsx

@@ -0,0 +1,27 @@
+import { notFound } from "next/navigation";
+import { getAllGuidesSlugs, getGuideBySlug } from "~~/services/guides";
+
+// ToDo: Metadata
+
+export async function generateStaticParams() {
+  const slugs = await getAllGuidesSlugs();
+
+  return slugs;
+}
+
+export default async function GuidePage({ params }: { params: { slug: string } }) {
+  const guide = await getGuideBySlug(params.slug);
+
+  if (!guide) {
+    return notFound();
+  }
+
+  return (
+    <div className="flex flex-col gap-8 p-4 max-w-[900px] mx-auto">
+      <div className="flex flex-col gap-4">
+        <h1 className="text-4xl font-bold">{guide.title}</h1>
+      </div>
+      <div className="prose dark:prose-invert max-w-none">{guide.content}</div>
+    </div>
+  );
+}

packages/nextjs/guides/getting-started.md

@@ -0,0 +1,24 @@
+---
+title: Getting Started with SpeedRunEthereum
+description: Learn how to get started with SpeedRunEthereum challenges
+---
+
+Welcome to SpeedRunEthereum! This guide will help you get started with the challenges and set up your development environment.
+
+## Prerequisites
+
+Before you begin, make sure you have:
+
+- Node.js installed (v18 or higher)
+- Git installed
+- Basic knowledge of Ethereum and smart contracts
+
+## Setting Up Your Environment
+
+1. Clone the repository
+2. Install dependencies
+3. Start coding!
+
+## Next Steps
+
+Check out our first challenge to begin your journey into Ethereum development!

packages/nextjs/services/guides.ts

@@ -0,0 +1,39 @@
+import { ReactElement } from "react";
+import fs from "fs";
+import { compileMDX } from "next-mdx-remote/rsc";
+import path from "path";
+
+const guidesDirectory = path.join(process.cwd(), "guides");
+
+type GuideMetadata = {
+  title: string;
+  description: string;
+};
+
+type Guide = GuideMetadata & {
+  content: ReactElement;
+};
+
+export function getAllGuidesSlugs(): string[] {
+  return fs.readdirSync(guidesDirectory).map(fileName => fileName.replace(/\.md$/, ""));
+}
+
+export async function getGuideBySlug(slug: string): Promise<Guide | null> {
+  const fullPath = path.join(guidesDirectory, `${slug}.md`);
+
+  try {
+    const fileContents = fs.readFileSync(fullPath, "utf8");
+    const { frontmatter, content } = await compileMDX<GuideMetadata>({
+      source: fileContents,
+      options: { parseFrontmatter: true },
+    });
+
+    return {
+      ...frontmatter,
+      content: content,
+    };
+  } catch (error) {
+    // Not found.
+    return null;
+  }
+}