\n \n \n Continue with GitHub\n \n

\n );\n }\n return (\n

\n Welcome,\n \n {user.name}!\n

\n Logout\n

\n );\n}\n\nconst client_id = Deno.env.get(\"GITHUB_OAUTH_CLIENT_ID\");\nconst client_secret = Deno.env.get(\"GITHUB_OAUTH_CLIENT_SECRET\");\nconst cookie_secret = Deno.env.get(\"SESSION_COOKIE_SECRET\");\n\nfunction Login(this: FC) {\n const state = crypto.randomUUID();\n const oauth_url =\n `https://github.com/login/oauth/authorize?client_id=${client_id}&scope=read:user+user:email&state=${state}`;\n this.session.set(\"oauth_state\", state);\n return ;\n}\n\nfunction Logout(this: FC) {\n this.session.destroy();\n return ;\n}\n\nasync function Callback(this: FC) {\n const { searchParams } = this.request.URL;\n const code = searchParams.get(\"code\");\n const state = searchParams.get(\"state\");\n const oauth_state = this.session.get(\"oauth_state\");\n if (!code) {\n return

Missing code

;\n }\n if (!state) {\n return

Missing state

;\n }\n if (state !== oauth_state) {\n return

Invalid state

;\n }\n const { access_token, error } = await fetch(\n \"https://github.com/login/oauth/access_token\",\n {\n method: \"POST\",\n headers: {\n \"Accept\": \"application/json\",\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ client_id, client_secret, code }),\n },\n ).then((r) => r.json());\n if (error) {\n return

{error}

;\n }\n const { name, avatar_url } = await fetch(\"https://api.github.com/user\", {\n headers: {\n Accept: \"application/json\",\n Authorization: `token ${access_token}`,\n UserAgent: \"Deno/2.0.0\",\n },\n }).then((r) => r.json());\n this.session.delete(\"oauth_state\");\n this.session.set(\"user\", { name, avatar_url });\n return ;\n}\n\nconst routes = {\n \"/\": Index,\n \"/login\": Login,\n \"/logout\": Logout,\n \"/callback\": Callback,\n};\n\nexport default (req: Request) => (\n \n \n \n \n);","mono-jsx-session",[],[218],"ad762d30-1e8b-11f1-b577-42dde27851f2","router.tsx","329904c6-3c6d-11f0-bc3f-9e149126039e",894,["D",1773372068455],53,"/** @jsxImportSource https://esm.sh/mono-jsx@0.9.10 */\n\nimport posts from \"./data/posts.json\" with { type: \"json\" };\n\nconst routes = {\n \"/\": () => (\n

Welcome to mono-jsx!

\n ),\n \"/about\": () => (\n

About mono-jsx

Building User Interfaces.

\n ),\n \"/blog\": () => (\n

Blog

\n Hello World!\n
\n Building User Interfaces.\n

\n ),\n \"/post/:slug\": async function (this: FC) {\n const post = posts[this.request.params!.slug];\n return (\n

{post.title}

{post.date}

{html(post.content)}

\n );\n },\n};\n\nexport default (res: Request) => (\n \n

\n \n

Page not Found

\n \n \n);","mono-jsx-router",[],[228],"8f04cb24-2113-11f1-b0d5-42dde27851f2","route-form.tsx","805a0588-a528-11f0-ab87-0224a6c84d84",["D",1773650331263],46,"/** @jsxImportSource https://esm.sh/mono-jsx@0.9.10 */\n\nimport { sqlite } from \"https://esm.town/v/std/sqlite\";\n\nawait sqlite.execute(`create table if not exists kv(\n key text unique,\n value text\n)`);\n\n// delete all rows\n// await sqlite.execute(`delete from kv where 1=1`);\n\nasync function Index(this: FC) {\n const result = await sqlite.execute({ sql: `select * from kv`, args: [] });\n return (\n

\n {result.rows.map((row: [string, string]) =>

* {row[1]}

)}\n {/* <- new message will be inserted here */}\n \n \n \n \n );\n}\n\nIndex.FormHandler = async (form: FormData) => {\n const message = form.get(\"message\") as string | null;\n if (!message) {\n return Message is required;\n }\n const key = crypto.randomUUID();\n await sqlite.execute({\n sql: `insert into kv(key, value) values(?, ?)`,\n args: [key, message],\n });\n return

* {message}

;\n};\n\nexport default (req: Request) => (\n \n \n \n \n);","mono-jsx-route-form",[],[238],"aa46e37a-1e8b-11f1-b78a-42dde27851f2","lazy.tsx","ceb7af6c-3c7a-11f0-b5fd-9e149126039e",892,["D",1773372063109],55,"/** @jsxImportSource https://esm.sh/mono-jsx@0.9.10 */\n\ntype Props = { title: string };\n\nconst components = {\n Profile: (props: Props) =>

#{props.title}

,\n Projects: (props: Props) =>

#{props.title}

,\n Settings: (props: Props) =>

#{props.title}

,\n};\n\nfunction Dash(this: FC<{ page: keyof typeof components }>) {\n this.page = \"Profile\";\n\n return (\n <>\n

\n this.page = \"Profile\"}\n disabled={this.$(() => this.page === \"Profile\")}\n >\n Profile\n \n this.page = \"Projects\"}\n disabled={this.$(() => this.page === \"Projects\")}\n >\n Projects\n \n this.page = \"Settings\"}\n disabled={this.$(() => this.page === \"Settings\")}\n >\n Settings\n \n

\n Loading...

}\n />\n

\n \n );\n}\n\nexport default (req: Request) => (\n \n \n \n);","mono-jsx-lazy",[],[247],"a84fc7da-1e8b-11f1-aa70-42dde27851f2","hello.tsx",891,["D",1773372059818],179,"/** @jsxImportSource https://esm.sh/mono-jsx@0.9.10 */\n\nfunction App(this: FC<{ a: number; b: number }>) {\n this.init({\n a: 1,\n b: 2,\n });\n\n this.effect(() => {\n // effect is called when the component is mounted or when the dependencies(calc.a & calc.b) change\n console.log(\"sum\", this.a * this.b);\n return () => {\n console.log(\"cleanup\");\n };\n });\n\n return (\n <>\n

Welcome to mono-jsx!

\n \n \n {\" * \"}\n \n {\" = \"}\n {this.computed(() => this.a * this.b)}\n \n \n );\n}\n\nexport default (request: Request) => (\n \n \n \n);",[],[257],"9c6c789c-a5b3-11f0-8817-0224a6c84d84","README.md","0abecaea-3b09-11f0-bf90-9e149126039e",470,["D",1760085129043],"# mono-jsx\n\n`` as a `Response`.\n\nhttps://github.com/ije/mono-jsx ↗",[],[265],["D",1773372055961],[],[18,80],["D",1760026753407],[197],[18],"178592aa-3c75-11f0-b67a-9e149126039e","posts.json","6e1fe28e-3c73-11f0-b503-9e149126039e","5f8c8268-3c73-11f0-87ba-9e149126039e",150,["D",1748513405183],6,"{\n \"hello-world\": {\n \"title\": \"Hello World!\",\n \"date\": \"2025-05-25\",\n \"content\": \"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

\"\n },\n \"building-user-interfaces\": {\n \"title\": \"Building User Interfaces.\",\n \"date\": \"2025-05-26\",\n \"content\": \"

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

\"\n }\n}",[],[288,279],"data","6308e058-3c73-11f0-b390-9e149126039e",142,["D",1748512672882],[195],[288],"a0147d54-1e8b-11f1-aa70-42dde27851f2","index.tsx","d5d7db30-c386-11f0-ba80-42dde27851f2","ccb64cf8-c386-11f0-9578-42dde27851f2",888,["D",1773372045997],101,"/** @jsxImportSource https://esm.sh/mono-jsx@0.9.10 */\n\nexport interface Todo {\n id: string;\n content: string;\n completed: boolean;\n}\n\nconst todos: Todo[] = [\n {\n id: crypto.randomUUID(),\n content: \"Buy food\",\n completed: false,\n },\n {\n id: crypto.randomUUID(),\n content: \"Go to the gym\",\n completed: false,\n },\n];\n\nexport default (req: Request) => {\n const url = new URL(req.url);\n if (url.pathname === \"/api/todos\") {\n return Response.json(todos);\n }\n\n return (\n \n \n Todos\n

History · icons