Skip to content

feat: improve examples and move routing logic #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Jul 1, 2025
+703 −195
Merged

feat: improve examples and move routing logic #31

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
0e943cc
feat: improve example loading and add more examples
brettkolodny Jun 27, 2025
94361e0
fix: make copy more presentable
brettkolodny Jun 27, 2025
6edd26c
chore: move routing logic and share code loading to the backend
brettkolodny Jun 27, 2025
8fbb7ef
feat: give examples their own url
brettkolodny Jun 30, 2025
99c9cd4
chore: remove connections example
brettkolodny Jun 30, 2025
43ba750
chore: move asset path logic and shared headers into new utils.tsx
brettkolodny Jul 1, 2025
befd0bf
feat: 404 page
brettkolodny Jul 1, 2025
a2743eb
chore: move max code size into top level const
brettkolodny Jul 1, 2025
30e6be8
chore: add external link icons to example links
brettkolodny Jul 1, 2025
bc95498
feat: add query param to auto open examples dropdown
brettkolodny Jul 1, 2025
aa10349
fix: use url sep
brettkolodny Jul 1, 2025
fb9caad
fix: use proper prod asset paths
brettkolodny Jul 1, 2025
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
chore: move asset path logic and shared headers into new utils.tsx
  • Loading branch information
@brettkolodny
brettkolodny committed Jul 1, 2025
commit 43ba7504ab48438174dc3eabaeb1dab91a9f4141
46 changes: 7 additions & 39 deletions src/server/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Hono } from "hono";
import { renderToString } from "react-dom/server";
import { getShareData } from "./blob";
import { trimTrailingSlash } from "hono/trailing-slash";
import { BaseHeader, getAssetPath, HmrScript } from "./utils";

// This must be exported for the dev server to work
export const app = new Hono();
Expand All @@ -20,6 +21,8 @@ app.route("/api", api);

app.use(trimTrailingSlash());

app.get("/", (c) => c.redirect("/parameters"));

// Serves the main web application. This must come after the API route.
app.get("/parameters/:shareId?/:example?", async (c) => {
const getExampleCode = async (): Promise<string | null> => {
Expand All @@ -37,33 +40,6 @@ app.get("/parameters/:shareId?/:example?", async (c) => {
return examples[example] ?? null;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe not necessary for this PR but you could add some validation to check if the example slug is valid
};

// Along with the vite React plugin this enables HMR within react while
// running the dev server.
const { url } = c.req;
const { origin } = new URL(url);
const injectClientScript = `
import RefreshRuntime from "${origin}/@react-refresh";
RefreshRuntime.injectIntoGlobalHook(window);
window.$RefreshReg$ = () => {};
window.$RefreshSig$ = () => (type) => type;
window.__vite_plugin_react_preamble_installed__ = true;
`;
const hmrScript = import.meta.env.DEV ? (
<script type="module">{injectClientScript}</script>
) : null;

// Sets the correct path for static assets based on the environment.
// The production paths are hard coded based on the output of the build script.
const cssPath = import.meta.env.PROD
? "/assets/index.css"
: "/src/client/index.css";
const clientScriptPath = import.meta.env.PROD
? "/assets/client.js"
: "/src/client/index.tsx";
const wasmExecScriptPath = import.meta.env.PROD
? "/assets/wasm_exec.js"
: "/wasm_exec.js";
const iconPath = import.meta.env.PROD ? "/assets/logo.svg" : "/logo.svg";
const exampleCode = await getExampleCode();

return c.html(
Expand All @@ -72,28 +48,20 @@ app.get("/parameters/:shareId?/:example?", async (c) => {
renderToString(
<html lang="en">
<head>
<meta charSet="UTF-8" />
<link rel="icon" type="image/svg+xml" href={iconPath} />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Parameters Playground</title>
<link rel="stylesheet" href={cssPath} />
{hmrScript}
<script type="module" src={wasmExecScriptPath}></script>
<BaseHeader />
<HmrScript url={new URL(c.req.url)} />
<script type="module" src={getAssetPath("/wasm_exec.js")}></script>
</head>
<body>
<div id="root"></div>
{exampleCode ? (
<script type="module">{`window.CODE = ${JSON.stringify(exampleCode)}`}</script>
) : null}
<script type="module" src={clientScriptPath}></script>
<script type="module" src={getAssetPath("/src/client/index.tsx")}></script>
</body>
</html>,
),
].join("\n"),
);
});

app.get("*", (c) => c.redirect("/parameters"));
40 changes: 40 additions & 0 deletions src/server/utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import path from "node:path";
import type { FC } from "react";

export const getAssetPath = (assetPath: string): string => {
if (import.meta.env.PROD) {
const pathParts = assetPath.split(path.sep);
return pathParts[pathParts.length - 1];
} else {
return assetPath;
}
};

// Along with the vite React plugin this enables HMR within react while
// running the dev server.
export const HmrScript: FC<{ url: URL }> = ({ url }) => {
if (import.meta.env.PROD) {
return null;
}

const injectClientScript = `
import RefreshRuntime from "${url.origin}/@react-refresh";
RefreshRuntime.injectIntoGlobalHook(window);
window.$RefreshReg$ = () => {};
window.$RefreshSig$ = () => (type) => type;
window.__vite_plugin_react_preamble_installed__ = true;
`;

return <script type="module">{injectClientScript}</script>;
};

export const BaseHeader = () => {
return (
<>
<meta charSet="UTF-8" />
<link rel="icon" type="image/svg+xml" href={getAssetPath("/logo.svg")} />
<link rel="stylesheet" href={getAssetPath("/src/client/index.css")} />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</>
);
};