From 703a90bcb011a3d1234eea85b3eaec1e674e6f9b Mon Sep 17 00:00:00 2001
From: Mark Gibson <mgibson@adaptavist.com>
Date: Thu, 18 Apr 2024 09:52:51 +0100
Subject: [PATCH] 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              |  2 +
 lib/handle_route_static_dir.ts   | 24 ++++++-----
 routes.ts                        |  4 ++
 routes/_static/main.css          | 64 -----------------------------
 routes/_static/ready.js          |  3 ++
 routes/async.tsx                 |  8 ++++
 routes/calc/_static/calc.css     |  6 +++
 routes/calc/index.tsx            |  2 +
 routes/ex/_static/ex.css         | 12 ++++++
 routes/ex/index.tsx              |  2 +
 routes/quiz/_components/Quiz.tsx |  8 ++--
 routes/quiz/_static/quiz.css     | 69 ++++++++++++++++++++++++++++++++
 routes/quiz/index.tsx            |  3 ++
 routes/quote/_static/tv.js       |  4 +-
 routes/todo/:listId/index.tsx    |  3 ++
 routes/todo/_static/todo.css     |  5 +++
 16 files changed, 139 insertions(+), 80 deletions(-)
 create mode 100644 routes/_static/ready.js
 create mode 100644 routes/calc/_static/calc.css
 create mode 100644 routes/ex/_static/ex.css
 create mode 100644 routes/quiz/_static/quiz.css
 create mode 100644 routes/todo/_static/todo.css

diff --git a/components/Page.tsx b/components/Page.tsx
index a7a3c23..e2c27d9 100644
--- a/components/Page.tsx
+++ b/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>
   );
diff --git a/lib/handle_route_static_dir.ts b/lib/handle_route_static_dir.ts
index 43169cb..d209b00 100644
--- a/lib/handle_route_static_dir.ts
+++ b/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),
+);
diff --git a/routes.ts b/routes.ts
index c5a1601..f8fc521 100644
--- a/routes.ts
+++ b/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"))),
diff --git a/routes/_static/main.css b/routes/_static/main.css
index fff69f1..a5d7edb 100644
--- a/routes/_static/main.css
+++ b/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;
-}
diff --git a/routes/_static/ready.js b/routes/_static/ready.js
new file mode 100644
index 0000000..27a1979
--- /dev/null
+++ b/routes/_static/ready.js
@@ -0,0 +1,3 @@
+setTimeout(() => {
+  document.body.classList.add("ready");
+}, 1);
diff --git a/routes/async.tsx b/routes/async.tsx
index 7b8a484..7fd8495 100644
--- a/routes/async.tsx
+++ b/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 />
diff --git a/routes/calc/_static/calc.css b/routes/calc/_static/calc.css
new file mode 100644
index 0000000..3fe7f60
--- /dev/null
+++ b/routes/calc/_static/calc.css
@@ -0,0 +1,6 @@
+#result.result {
+  color: green;
+}
+#result.error {
+  color: red;
+}
diff --git a/routes/calc/index.tsx b/routes/calc/index.tsx
index 73a4c47..5350aa4 100644
--- a/routes/calc/index.tsx
+++ b/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"
diff --git a/routes/ex/_static/ex.css b/routes/ex/_static/ex.css
new file mode 100644
index 0000000..831758f
--- /dev/null
+++ b/routes/ex/_static/ex.css
@@ -0,0 +1,12 @@
+
+.ex-swap {
+  font-size: small;
+  font-weight: normal;
+}
+
+.result {
+  color: green;
+}
+.error {
+  color: red;
+}
diff --git a/routes/ex/index.tsx b/routes/ex/index.tsx
index aa2f0bb..d0038c0 100644
--- a/routes/ex/index.tsx
+++ b/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>
diff --git a/routes/quiz/_components/Quiz.tsx b/routes/quiz/_components/Quiz.tsx
index 3a47f4b..05f7eb1 100644
--- a/routes/quiz/_components/Quiz.tsx
+++ b/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">
diff --git a/routes/quiz/_static/quiz.css b/routes/quiz/_static/quiz.css
new file mode 100644
index 0000000..e304919
--- /dev/null
+++ b/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;
+}
diff --git a/routes/quiz/index.tsx b/routes/quiz/index.tsx
index df76161..2ebbff6 100644
--- a/routes/quiz/index.tsx
+++ b/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);
diff --git a/routes/quote/_static/tv.js b/routes/quote/_static/tv.js
index b0b4a0b..6ef4663 100644
--- a/routes/quote/_static/tv.js
+++ b/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(
diff --git a/routes/todo/:listId/index.tsx b/routes/todo/:listId/index.tsx
index d2e0624..0c420e2 100644
--- a/routes/todo/:listId/index.tsx
+++ b/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>
 ));
diff --git a/routes/todo/_static/todo.css b/routes/todo/_static/todo.css
new file mode 100644
index 0000000..ed0a7a8
--- /dev/null
+++ b/routes/todo/_static/todo.css
@@ -0,0 +1,5 @@
+
+.todo-item * {
+  display: inline;
+  margin: 2px 4px;
+}