21
221. Visit the frontend URL
232. Enter a course topic in the text area (e.g., "Introduction to Machine Learning", "Web Development with React")
243. Click "Generate Course"
254. View the generated course structure with modules and lessons
41 class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
42 rows="3"
43 placeholder="Enter a course topic (e.g., 'Introduction to Machine Learning', 'Web Development with React', etc.)"
44 required
45 ></textarea>
1/** @jsxImportSource ../jsx */
2import React from "https://esm.sh/react@19";
3import { useLoaderData, Link, Outlet, useParams } from "https://esm.sh/react-router@7";
4
5const STYLESHEET = import.meta.resolve("../css/base.css").replace("esm.town", "juicy.town");
6
7function HTML ({ children }: {
8 children: React.ReactNode;
9}) {
10 const params = useParams();
1/** @jsxImportSource ../jsx */
2import { Link } from "https://esm.sh/react-router";
3import { Identicon2D } from "../vectors/identicon.tsx";
4
33 <body>
34 <div id="root">
35 <!-- Loading content will be replaced by React -->
36 </div>
37 <script type="module" src="/frontend/index.tsx"></script>
19โโโ frontend/
20โ โโโ components/
21โ โ โโโ Playground.tsx # React component for the playground
22โ โโโ index.html # HTML template
23โ โโโ index.tsx # Client-side entry point
30
31- [Hono](https://hono.dev/) - Lightweight web framework
32- [Satori](https://github.com/vercel/satori) - For rendering React components to SVG
33- [Lowlight](https://github.com/wooorm/lowlight) - For syntax highlighting
34- [Yoga](https://github.com/facebook/yoga) - For layout
35- [React](https://reactjs.org/) - For UI components
36
37## Usage
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from 'https://esm.sh/react@18.2.0';
3import { createRoot } from 'https://esm.sh/react-dom@18.2.0/client';
4import { Playground } from './components/Playground.tsx';
5
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { ImageResponse } from "npm:@vercel/og";
3import homepage from "./homepage.tsx";
1/** @jsxImportSource ../jsx */
2import { useState } from "https://esm.sh/react@19";
3import { useParams, useSearchParams, useNavigate } from "https://esm.sh/react-router";
4import MD5 from "https://esm.sh/js-md5";
5import chroma from "https://esm.sh/chroma-js";
1/** @jsxImportSource ./jsx */
2import { Identicon2D } from "./vectors/identicon.tsx";
3import { renderToString } from "npm:react-dom@19/server";
4import { render } from "https://deno.land/x/resvg_wasm@0.2.0/mod.ts";
5
