feat: improve examples and move routing logic #31
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
|
||
| return parsedData.output; | ||
| } catch (e) { | ||
| console.error(`Failed to load playground with id ${id}: ${e}`); |
There was a problem hiding this comment.
What about displaying a user facing error if there is an issue with getting the share data?
There was a problem hiding this comment.
Yeah good call. There isn't really any actionable items the user could take, but looking at what other playgrounds do it seems like it's common to show a 404 page which I think would work well enough
src/server/index.tsx
Outdated
| } | ||
|
|
||
| return examples.find((e) => e.slug === example)?.code; | ||
| return examples[example] ?? null; |
There was a problem hiding this comment.
Maybe not necessary for this PR but you could add some validation to check if the example slug is valid
src/server/routes/api.ts
Outdated
| const bytes = new TextEncoder().encode(JSON.stringify(data)); | ||
|
|
||
| // Check if the data is larger than 1mb | ||
| if (bytes.length > 1024 * 1000) { |
There was a problem hiding this comment.
you could self document this with a const, const MAX_DATA_SIZE = 1024 * 1000;
|
|
||
| const href = `${window.location.origin}/parameters?${params.toString()}`; | ||
| {Object.entries(examples).map(([ slug, title ]) => { | ||
| const href = `${window.location.origin}/parameters/example/${slug}`; | ||
| return ( | ||
| <DropdownMenuItem key={slug} asChild={true}> | ||
| <a href={href} target="_blank" rel="noreferrer"> |
There was a problem hiding this comment.
It could be useful to show external link icons when opening external links
src/server/index.tsx
Outdated
| @@ -54,9 +64,7 @@ app.get("*", (c) => { | |||
| ? "/assets/wasm_exec.js" | |||
There was a problem hiding this comment.
You could simplify these paths a bit with something like this,
const getAssetPath = (filename: string) =>
import.meta.env.PROD ? `/assets/${filename}` : `/${filename}`;
Improves the code for handling examples, and moves the routing logic/code share loading from the frontend to the backend.
I also cleaned up the copy a little while I was there