fix: make the website also work on mobile

.gitignore

@@ -9,3 +9,4 @@ data/
 data-dev/
 _fresh/
 node_modules/
+mise.toml

components/PageHero.tsx

@@ -110,7 +110,7 @@ function Subline(
   const ctx = useContext(HeroContext);
   return (
     <div
-      class={`relative flex items-center z-50 flex gap-5 font-sm text-light mt-3`}
+      class={`relative flex items-center z-10 flex gap-5 font-sm text-light mt-3`}
       style={{ color: ctx.image ? "#1F1F1F" : "white" }}
     >
       {children}

deno.json

@@ -1,6 +1,9 @@
 {
   "lock": false,
   "nodeModulesDir": "auto",
+  "unstable": [
+    "cron"
+  ],
   "tasks": {
     "check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx",
     "start": "deno run --env-file -A --watch=static/,routes/ dev.ts",

fresh.gen.ts

@@ -6,6 +6,7 @@ import * as $_404 from "./routes/_404.tsx";
 import * as $_app from "./routes/_app.tsx";
 import * as $_layout from "./routes/_layout.tsx";
 import * as $_middleware from "./routes/_middleware.ts";
+import * as $admin_cache_index from "./routes/admin/cache/index.tsx";
 import * as $admin_log_index from "./routes/admin/log/index.tsx";
 import * as $admin_performance_index from "./routes/admin/performance/index.tsx";
 import * as $api_articles_name_ from "./routes/api/articles/[name].ts";
@@ -68,6 +69,7 @@ const manifest = {
     "./routes/_app.tsx": $_app,
     "./routes/_layout.tsx": $_layout,
     "./routes/_middleware.ts": $_middleware,
+    "./routes/admin/cache/index.tsx": $admin_cache_index,
     "./routes/admin/log/index.tsx": $admin_log_index,
     "./routes/admin/performance/index.tsx": $admin_performance_index,
     "./routes/api/articles/[name].ts": $api_articles_name_,

islands/KMenu.tsx

@@ -191,7 +191,7 @@ export const KMenu = (
                   }}
                   style={{ outline: "none !important" }}
                   placeholder="Command"
-                  class="bg-transparent color pl-4 outline outline outline-2  outline-offset-2"
+                  class="bg-transparent color pl-4 outline-none"
                 />
               </>
             )}

lib/cache.ts

@@ -6,9 +6,9 @@ interface SetCacheOptions {
   expires?: number; // Override expiration for individual cache entries
 }
 
-export const caches = new Map<
+const caches = new Map<
   string,
-  { info: () => { count: number; sizeInKB: number } }
+  { info: () => { name: string; count: number; sizeInKB: number } }
 >();
 
 export function createCache<T>(
@@ -48,7 +48,7 @@ export function createCache<T>(
       }
     },
 
-    info(): { count: number; sizeInKB: number } {
+    info() {
       // Cleanup expired entries before calculating info
       this.cleanup();
 
@@ -65,8 +65,8 @@ export function createCache<T>(
         totalBytes += keySize + valueSize;
       }
 
-      const sizeInKB = totalBytes / 1024; // Convert bytes to kilobytes
-      return { count, sizeInKB };
+      const sizeInKB = Math.floor(totalBytes / 1024); // Convert bytes to kilobytes
+      return { name: cacheName, count, sizeInKB };
     },
 
     has(key: string): boolean {
@@ -96,5 +96,10 @@ export function createCache<T>(
   caches.set(cacheName, {
     info: api.info.bind(api),
   });
+
   return api;
 }
+
+export function getCacheInfo() {
+  return [...caches.values().map((c) => c.info())];
+}

lib/crud.ts

@@ -89,10 +89,10 @@ export function createCrud<T extends GenericResource>(
       return;
     }
 
-    const parsed = parse(content, id);
+    let parsed = parse(content, id);
 
     if (hasThumbnails) {
-      return addThumbnailToResource(parsed);
+      parsed = await addThumbnailToResource(parsed);
     }
     const doc = { ...parsed, content };
     cache.set(path, doc, { expires: 10 * 1000 });
@@ -124,7 +124,6 @@ export function createCrud<T extends GenericResource>(
       return;
     }
     const newDoc = transformDocument(content, updater);
-    cache.set("all", undefined);
     await createDocument(path, newDoc);
   }
 

lib/documents.ts

@@ -172,3 +172,4 @@ export function getTextOfChild(child: DocumentChild): string | undefined {
   }
   return;
 }
+

lib/openai.ts

@@ -3,7 +3,7 @@ import { zodResponseFormat } from "https://deno.land/x/openai@v4.69.0/helpers/zo
 import { OPENAI_API_KEY } from "@lib/env.ts";
 import { hashString } from "@lib/helpers.ts";
 import { createCache } from "@lib/cache.ts";
-import recipeSchema, { recipeResponseSchema } from "@lib/recipeSchema.ts";
+import { recipeResponseSchema } from "@lib/recipeSchema.ts";
 
 const openAI = OPENAI_API_KEY && new OpenAI({ apiKey: OPENAI_API_KEY });
 

lib/string.ts

@@ -13,6 +13,15 @@ export function safeFileName(inputString: string): string {
   return fileName;
 }
 
+export function toUrlSafeString(input: string): string {
+  return input
+    .trim() // Remove leading and trailing whitespace
+    .toLowerCase() // Convert to lowercase
+    .replace(/[^a-z0-9\s-]/g, "") // Remove non-alphanumeric characters except spaces and hyphens
+    .replace(/\s+/g, "-") // Replace spaces with hyphens
+    .replace(/-+/g, "-"); // Remove consecutive hyphens
+}
+
 export function extractHashTags(inputString: string) {
   const hashtags = [];
 

routes/_app.tsx

@@ -19,6 +19,7 @@ export default function App({ Component }: PageProps) {
         />
         <link rel="manifest" href="/site.webmanifest" />
         <meta name="msapplication-TileColor" content="#da532c" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="theme-color" content="#141218" />
         <style>{globalCss}</style>
         <title>Memorium</title>

routes/admin/cache/index.tsx

@@ -0,0 +1,32 @@
+import { MainLayout } from "@components/layouts/main.tsx";
+import { Handlers, PageProps } from "$fresh/server.ts";
+import { getCacheInfo } from "@lib/cache.ts";
+
+export const handler: Handlers<
+  { cacheInfo: ReturnType<typeof getCacheInfo> }
+> = {
+  GET(_, ctx) {
+    return ctx.render({ cacheInfo: getCacheInfo() });
+  },
+};
+
+export default function Greet(
+  props: PageProps<
+    { cacheInfo: ReturnType<typeof getCacheInfo> }
+  >,
+) {
+  const { cacheInfo } = props.data;
+  return (
+    <MainLayout
+      url={props.url}
+      title="Recipes"
+      context={{ type: "recipe" }}
+    >
+      <code>
+        <pre class="text-white">
+          {JSON.stringify(cacheInfo, null, 2)}
+        </pre>
+      </code>
+    </MainLayout>
+  );
+}

routes/api/articles/create/index.ts

@@ -8,7 +8,11 @@ import * as openai from "@lib/openai.ts";
 import tds from "https://cdn.skypack.dev/turndown@7.2.0";
 import { Article, createArticle } from "@lib/resource/articles.ts";
 import { getYoutubeVideoDetails } from "@lib/youtube.ts";
-import { extractYoutubeId, isYoutubeLink } from "@lib/string.ts";
+import {
+  extractYoutubeId,
+  isYoutubeLink,
+  toUrlSafeString,
+} from "@lib/string.ts";
 import { createLogger } from "@lib/log/index.ts";
 
 const parser = new DOMParser();
@@ -69,6 +73,10 @@ async function processCreateArticle(
   const url = new URL(fetchUrl);
 
   function makeUrlAbsolute(src: string) {
+    if (src.startsWith("//")) {
+      return "https:" + src;
+    }
+
     if (src.startsWith("/")) {
       return `${url.origin}${src.replace(/$\//, "")}`;
     }
@@ -98,20 +106,16 @@ async function processCreateArticle(
 
       if (href.startsWith("/")) {
         return `[${content}](${url.origin}${href.replace(/$\//, "")})`;
-      }
-
-      if (href.startsWith("#")) {
+      } else if (href.startsWith("//")) {
+        return `[${content}](https:${href})`;
+      } else if (href.startsWith("#")) {
         if (content.length < 2) return "";
         return `[${content}](${url.href}#${href})`.replace("##", "#");
-      }
-
-      if (!href.startsWith("https://") && !href.startsWith("http://")) {
+      } else {
         return `[${content}](${url.origin.replace(/\/$/, "")}/${
           href.replace(/^\//, "")
         })`;
       }
-
-      return `[${content}](${href})`;
     },
   });
 
@@ -125,7 +129,10 @@ async function processCreateArticle(
     metaAuthor || openai.extractAuthorName(markdown),
   ]);
 
-  const id = shortTitle || title || "";
+  console.log({ tags, shortTitle, author });
+  streamResponse.enqueue("postprocessing article");
+
+  const id = toUrlSafeString(shortTitle || title || "");
 
   const meta: Article["meta"] = {
     author: (author || "").replace("@", "twitter:"),
@@ -161,7 +168,7 @@ async function processCreateArticle(
     }
   }
 
-  streamResponse.enqueue("finished processing");
+  streamResponse.enqueue("writing to disk");
 
   await createArticle(newArticle.id, newArticle);