Move page specific css into own files

Use CSS to reveal quiz options rather than streaming delays, which no longer works in Chrome
Add a 'ready' class to body after page load

components/Page.tsx

@@ -56,6 +56,8 @@ export function Page({ req, children, reqURL, module, ...props }: Props) {
           <Src module={module} />
           <div>©️ {new Date().getFullYear()} Mark Gibson</div>
         </footer>
+
+        <script src="/ready.js" defer />
       </body>
     </html>
   );

lib/handle_route_static_dir.ts

@@ -1,14 +1,18 @@
 import { byMethod } from "@http/route/by-method";
 import { serveDir } from "@std/http/file-server";
 import { fromFileUrl } from "@std/path/from-file-url";
+import { interceptResponse, skip } from "@http/interceptor/intercept";
 
-export default byMethod({
-  GET(req, match: URLPatternResult) {
-    const path = match.pathname.groups.path ?? "";
-    const urlRoot = match.pathname.input.slice(1, -path.length);
-    const fsRoot = fromFileUrl(
-      import.meta.resolve(`../routes/${urlRoot}_static`),
-    );
-    return serveDir(req, { quiet: true, fsRoot, urlRoot });
-  },
-});
+export default interceptResponse(
+  byMethod({
+    GET(req, match: URLPatternResult) {
+      const path = match.pathname.groups.path ?? "";
+      const urlRoot = match.pathname.input.slice(1, -path.length);
+      const fsRoot = fromFileUrl(
+        import.meta.resolve(`../routes/${urlRoot}_static`),
+      );
+      return serveDir(req, { quiet: true, fsRoot, urlRoot });
+    },
+  }),
+  skip(404, 405),
+);

routes.ts

@@ -6,6 +6,7 @@ import { byPattern } from "@http/route/by-pattern";
 import { cascade } from "@http/route/cascade";
 
 export default cascade(
+  byPattern("/todo/:path+", lazy(() => import("./lib/handle_route_static_dir.ts"))),
   byPattern("/todo/:listId/:itemId", lazy(async () => byMethod(await import("./routes/todo/:listId/:itemId.tsx")))),
   byPattern("/todo/:listId", lazy(async () => byMethod(await import("./routes/todo/:listId/index.tsx")))),
   byPattern("/todo", lazy(async () => byMethod(await import("./routes/todo/index.ts")))),
@@ -19,10 +20,13 @@ export default cascade(
   byPattern("/quote/:path+", lazy(() => import("./lib/handle_route_static_dir.ts"))),
   byPattern("/quote", lazy(() => import("./routes/quote/index.tsx"))),
   byPattern("/quiz/answer/:id/:answer", lazy(() => import("./routes/quiz/answer/:id/:answer.tsx"))),
+  byPattern("/quiz/:path+", lazy(() => import("./lib/handle_route_static_dir.ts"))),
   byPattern("/quiz", lazy(() => import("./routes/quiz/index.tsx"))),
+  byPattern("/ex/:path+", lazy(() => import("./lib/handle_route_static_dir.ts"))),
   byPattern("/ex/:from/:to", lazy(() => import("./routes/ex/:from/:to.tsx"))),
   byPattern("/ex", lazy(() => import("./routes/ex/index.tsx"))),
   byPattern("/calc/eval", lazy(() => import("./routes/calc/eval.tsx"))),
+  byPattern("/calc/:path+", lazy(() => import("./lib/handle_route_static_dir.ts"))),
   byPattern("/calc", lazy(() => import("./routes/calc/index.tsx"))),
   byPattern(["/blog/md{.:ext}?","/blog/links{.:ext}?","/blog/jsx_streaming{.:ext}?","/blog/index{.:ext}","/blog/http_fns{.:ext}?","/blog/dependency_hell{.:ext}?"], lazy(() => import("./lib/handle_route_md.tsx"))),
   byPattern("/blog/:path+", lazy(() => import("./lib/handle_route_static_dir.ts"))),

routes/_static/main.css

@@ -10,67 +10,3 @@ header {
 footer .src {
   float: right;
 }
-
-.signin-menu a {
-  margin-left: 0.5em;
-}
-
-.red {
-  color: red;
-}
-
-.quiz {
-  border-style: solid;
-  border-width: 2px 1ex 1ex 2px;
-  border-color: blueviolet;
-  border-radius: 2em;
-  padding: 1em 2em;
-  margin: 1em 0;
-}
-
-.quiz .question {
-  font-weight: bold;
-}
-
-.quiz .attribution {
-  font-size: smaller;
-  font-style: italic;
-}
-
-.quiz .answer button {
-  border-style: solid;
-  border-width: 1px 3px 3px 1px;
-  border-color: darkcyan;
-  background-color: lightblue;
-  border-radius: 1em;
-  padding: 0.5em 1em;
-  margin: 1ex 0;
-  font-size: inherit;
-}
-
-.quiz .answer button.correct {
-  border-color: darkseagreen;
-  background-color: lightgreen;
-}
-
-.quiz .answer button.incorrect {
-  border-color: salmon;
-  background-color: lightpink;
-}
-
-#result.error {
-  color: red;
-}
-#result.result {
-  color: green;
-}
-
-.ex-swap {
-  font-size: small;
-  font-weight: normal;
-}
-
-.todo-item * {
-  display: inline;
-  margin: 2px 4px;
-}

routes/_static/ready.js

@@ -0,0 +1,3 @@
+setTimeout(() => {
+  document.body.classList.add("ready");
+}, 1);

routes/async.tsx

@@ -5,6 +5,14 @@ import { handlePage } from "../lib/handle_page.ts";
 
 export default handlePage(({ req }) => (
   <Page req={req} module={import.meta.url}>
+    <style>
+      {`
+      .red {
+        color: red
+      }
+    `}
+    </style>
+
     <p>This is a demo of streaming of asynchronous components.</p>
 
     <hr />

routes/calc/_static/calc.css

@@ -0,0 +1,6 @@
+#result.result {
+  color: green;
+}
+#result.error {
+  color: red;
+}

routes/calc/index.tsx

@@ -7,6 +7,8 @@ export default handlePage(({ req }) => {
 
   return (
     <Page req={req} module={import.meta.url}>
+      <link rel="stylesheet" href="/calc/calc.css" />
+
       <h1>Service Worker Calculator</h1>
       <form
         action="/calc"

routes/ex/_static/ex.css

@@ -0,0 +1,12 @@
+
+.ex-swap {
+  font-size: small;
+  font-weight: normal;
+}
+
+.result {
+  color: green;
+}
+.error {
+  color: red;
+}

routes/ex/index.tsx

@@ -12,6 +12,8 @@ export default handlePage(({ req, match }) => {
     const swapUrl = `/ex/${toCurr}/${fromCurr}`;
     return (
       <Page>
+        <link rel="stylesheet" href="/ex/ex.css" />
+
         <h1>
           {fromCurr} to {toCurr} <a href={swapUrl} class="ex-swap">swap</a>
         </h1>

routes/quiz/_components/Quiz.tsx

@@ -39,11 +39,9 @@ async function Question() {
           <p class="question">{text}</p>
           <ol class="answers">
             {answers.map((answer, i) => (
-              <Delayed delay={(i + 1) * 300}>
-                <li class="answer">
-                  <QuizAnswer id={id} answer={answer} />
-                </li>
-              </Delayed>
+              <li class="answer">
+                <QuizAnswer id={id} answer={answer} />
+              </li>
             ))}
           </ol>
           <p class="attribution">

routes/quiz/_static/quiz.css

@@ -0,0 +1,69 @@
+
+.quiz {
+  border-style: solid;
+  border-width: 2px 1ex 1ex 2px;
+  border-color: blueviolet;
+  border-radius: 2em;
+  padding: 1em 2em;
+  margin: 1em 0;
+}
+
+.quiz .question {
+  font-weight: bold;
+}
+
+.quiz .attribution {
+  font-size: smaller;
+  font-style: italic;
+}
+
+.quiz .answer button {
+  border-style: solid;
+  border-width: 1px 3px 3px 1px;
+  border-color: darkcyan;
+  background-color: lightblue;
+  border-radius: 1em;
+  padding: 0.5em 1em;
+  margin: 1ex 0;
+  font-size: inherit;
+}
+
+.quiz .answer button.correct {
+  border-color: darkseagreen;
+  background-color: lightgreen;
+}
+
+.quiz .answer button.incorrect {
+  border-color: salmon;
+  background-color: lightpink;
+}
+
+.quiz .answer button {
+  opacity: 0;
+  transform: scale(0);
+  filter: blur(5px);
+  transition-property: all;
+  transition-duration: 1s;
+}
+
+.ready .quiz .answer button {
+  opacity: 1;
+  transform: scale(1);
+  filter: blur(0);
+}
+
+.quiz .answer:nth-of-type(1) button {
+  transition-delay: 0.5s;
+}
+
+.quiz .answer:nth-of-type(2) button {
+  transition-delay: 1s;
+}
+
+.quiz .answer:nth-of-type(3) button {
+  transition-delay: 1.5s;
+}
+
+.quiz .answer:nth-of-type(4) button {
+  transition-delay: 2s;
+}

routes/quiz/index.tsx

@@ -10,7 +10,10 @@ export default byMethod({
 
     return renderPage(() => (
       <Page req={req} module={import.meta.url}>
+        <link rel="stylesheet" href="/quiz/quiz.css" />
+
         <Quiz score={score} />
+
         <a href="/quiz">Next Question</a>
       </Page>
     ), headers)(req, match);

routes/quote/_static/tv.js

@@ -1,4 +1,6 @@
-document.body.classList.add("in");
+setTimeout(() => {
+  document.body.classList.add("in");
+}, 100);
 
 const refresh = document.head.querySelector('meta[name="refresh"]')
   ?.getAttribute(

routes/todo/:listId/index.tsx

@@ -12,7 +12,10 @@ import { renderHTML } from "../../../lib/render_html.tsx";
 
 export const GET = renderPage(({ req, match }) => (
   <Page req={req} module={import.meta.url}>
+    <link rel="stylesheet" href="/todo/todo.css" />
+
     <h1>Todo List demo (work in progress)</h1>
+
     <TodoListView listId={match.pathname.groups.listId!} />
   </Page>
 ));

routes/todo/_static/todo.css

@@ -0,0 +1,5 @@
+
+.todo-item * {
+  display: inline;
+  margin: 2px 4px;
+}