Support for _static sub folders

Add fade animations for quote/tv

handler.ts

@@ -9,5 +9,6 @@ export default handle([
     skip(404, 405),
   ),
   routes,
+  // TODO: Migrate /static to a /_static folder instead
   staticRoute("/", import.meta.resolve("./static")),
 ]);

lib/handle_route_static.ts

@@ -1,6 +1,8 @@
 import { byMethod } from "@http/fns/by_method";
 import { fetchContent } from "../lib/content.ts";
 
+// TODO: Migrate all static content that relies on this to a _static folder instead
+
 export default byMethod({
   GET: rawContent,
 });

lib/handle_route_static_dir.ts

@@ -0,0 +1,13 @@
+import { byMethod } from "@http/fns/by_method";
+import { fetchContent } from "../lib/content.ts";
+
+export default byMethod({
+  GET: rawContent,
+});
+
+function rawContent(_req: Request, match: URLPatternResult) {
+  const path = match.pathname.groups.path ?? "";
+  const prefix = match.pathname.input.slice(0, -path.length);
+  const route = `../routes${prefix}_static/${path}`;
+  return fetchContent(import.meta.resolve(route));
+}

lib/route_mapper.ts

@@ -3,9 +3,18 @@ import type {
   DiscoveredRoute,
 } from "@http/fns/discover_routes";
 
+// TODO: Fix generateRoutesModule to remove duplicate routes
+
 export default function routeMapper(
   { parentPath, name, ext, pattern, module }: DiscoveredPath,
 ): DiscoveredRoute[] {
+  if (/[/\\]_static/.test(parentPath)) {
+    return [{
+      pattern: pattern.replace(/_static\/.*/, ":path+"),
+      module: import.meta.resolve("./handle_route_static_dir.ts"),
+    }];
+  }
+
   // Skip any route that has a path segment that starts with an underscore
   if (name.startsWith("_") || /[/\\]_/.test(parentPath)) {
     return [];
@@ -25,6 +34,7 @@ export default function routeMapper(
           : `${pattern}{.:ext}?`,
         module: import.meta.resolve("./handle_route_md.tsx"),
       }];
+    // TODO: Migrate png/svg files into _static folders
     case ".png":
     case ".svg":
       return [{

routes.ts

@@ -15,6 +15,7 @@ export default cascade(
   byPattern("/sse", lazy(() => import("./routes/sse/index.tsx"))),
   byPattern("/sleep", lazy(() => import("./routes/sleep.ts"))),
   byPattern("/quote/tv", lazy(() => import("./routes/quote/tv.tsx"))),
+  byPattern(["/quote/:path+","/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", lazy(() => import("./routes/quiz/index.tsx"))),

routes/quote/_cron/generate_quote.ts

@@ -4,7 +4,7 @@ import OpenAI from "npm:openai";
 
 export const name = "Generate a new quote of the moment";
 
-export const schedule = Deno.env.get("QUOTE_SCHEDULE") ?? "*/15 * * * *";
+export const schedule = Deno.env.get("QUOTE_SCHEDULE") ?? "*/5 * * * *";
 
 export default async function generateQuote() {
   if (await isQuoteUnseen()) {
@@ -17,7 +17,7 @@ export default async function generateQuote() {
   const openai = new OpenAI();
 
   const completion = await openai.chat.completions.create({
-    model: "gpt-4",
+    model: "gpt-3.5-turbo",
     messages: [
       {
         role: "user",

routes/quote/_static/tv.css

@@ -0,0 +1,50 @@
+html {
+  background: black;
+  color: white;
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  height: 100%;
+  opacity: 0;
+  transition: opacity 3s ease;
+}
+
+body.ready {
+  opacity: 1;
+}
+
+blockquote {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+blockquote p {
+  font-size: xxx-large;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+  text-align: center;
+  padding: 1em;
+  transform: scale(1);
+  filter: blur(0.8px);
+}
+
+.out blockquote p {
+  transform: scale(5);
+  filter: blur(20px);
+  transition: all 3s ease-in;
+}
+
+blockquote footer {
+  text-align: end;
+  font-family: cursive;
+  font-style: italic;
+  text-shadow: 1px 1px 5px whitesmoke;
+}
+
+.out blockquote footer {
+  filter: blur(20px);
+  transition: all 3s ease-in;
+}

routes/quote/_static/tv.js

@@ -0,0 +1,14 @@
+document.body.classList.add("ready");
+
+const refresh =
+  document.head.querySelector('meta[name="refresh"]')?.getAttribute(
+    "content",
+  ) ?? 1;
+
+setTimeout(() => {
+  document.body.classList.remove("ready");
+  document.body.classList.add("out");
+  document.body.addEventListener("transitionend", () => {
+    location.reload();
+  });
+}, refresh * 1000);

routes/quote/tv.tsx

@@ -2,16 +2,19 @@ import { Page } from "../../components/Page.tsx";
 import { renderPage } from "../../lib/handle_page.ts";
 import { byMethod } from "@http/fns/by_method";
 import { Quote } from "./_components/Quote.tsx";
+import { getSearchValues } from "jsr:@http/fns@^0.6.3/request/search_values";
 
 export default byMethod({
   GET: (req, match: URLPatternResult) => {
+    const refresh = getSearchValues(req)("refresh")[0] ?? "420";
     return renderPage(() => (
       <html lang="en-GB">
         <head>
           <meta charset="utf-8" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
-          <meta http-equiv="refresh" content="900" />
-          <link rel="stylesheet" href="/quote_tv.css" />
+          <meta name="refresh" content={refresh} />
+          <link rel="stylesheet" href="tv.css" />
+          <script src="tv.js" defer />
         </head>
         <body>
           <Quote />