feat: enhance layout of search

lib/crud.ts

@@ -1,6 +1,5 @@
 import {
   createDocument,
-  Document,
   getDocument,
   getDocuments,
   transformDocument,
@@ -20,7 +19,6 @@ export function createCrud<T>(
   async function read(id: string) {
     const path = pathFromId(id);
     const content = await getDocument(path);
-
     return parse(content, id);
   }
   function create(id: string, content: string | ArrayBuffer) {

lib/highlight.ts

@@ -1,79 +0,0 @@
-import { refractor } from "https://esm.sh/refractor@4.8.1";
-import { visit } from "https://esm.sh/unist-util-visit@5.0.0";
-import { toString } from "https://esm.sh/hast-util-to-string@2.0.0";
-
-import jsx from "https://esm.sh/refractor/lang/jsx";
-import javascript from "https://esm.sh/refractor/lang/javascript";
-import css from "https://esm.sh/refractor/lang/css";
-import cssExtras from "https://esm.sh/refractor/lang/css-extras";
-import jsExtras from "https://esm.sh/refractor/lang/js-extras";
-import sql from "https://esm.sh/refractor/lang/sql";
-import typescript from "https://esm.sh/refractor/lang/typescript";
-import swift from "https://esm.sh/refractor/lang/swift";
-import objectivec from "https://esm.sh/refractor/lang/objectivec";
-import markdown from "https://esm.sh/refractor/lang/markdown";
-import json from "https://esm.sh/refractor/lang/json";
-
-refractor.register(jsx);
-refractor.register(json);
-refractor.register(typescript);
-refractor.register(javascript);
-refractor.register(css);
-refractor.register(cssExtras);
-refractor.register(jsExtras);
-refractor.register(sql);
-refractor.register(swift);
-refractor.register(objectivec);
-refractor.register(markdown);
-
-refractor.alias({ jsx: ["js"] });
-refractor.alias({typescript:["ts"]})
-
-const getLanguage = (node) => {
-  const className = node.properties.className || [];
-
-  for (const classListItem of className) {
-    if (classListItem.slice(0, 9) === "language-") {
-      return classListItem.slice(9).toLowerCase();
-    }
-  }
-
-  return null;
-};
-
-const rehypePrism = (options) => {
-  options = options || {};
-
-  return (tree) => {
-    visit(tree, "element", visitor);
-  };
-
-  function visitor(node, index, parent) {
-    if (!parent || parent.tagName !== "pre" || node.tagName !== "code") {
-      return;
-    }
-
-    const lang = getLanguage(node);
-
-    if (lang === null) {
-      return;
-    }
-
-    let result;
-    try {
-      parent.properties.className = (parent.properties.className || []).concat(
-        "language-" + lang,
-      );
-      result = refractor.highlight(toString(node), lang);
-    } catch (err) {
-      if (options.ignoreMissing && /Unknown language/.test(err.message)) {
-        return;
-      }
-      throw err;
-    }
-
-    node.children = result;
-  }
-};
-
-export default rehypePrism;

lib/hooks/useDebouncedCallback.ts

@@ -1,24 +1,286 @@
-// useDebouncedCallback.tsx
-import { useEffect, useState } from "preact/hooks";
+import { useEffect, useMemo, useRef } from "preact/hooks";
 
-const useDebouncedCallback = (
-  callback: (...args: any[]) => void,
-  delay: number,
-) => {
-  const [debouncedCallback, setDebouncedCallback] = useState(() => callback);
+export interface CallOptions {
+  /**
+   * Controls if the function should be invoked on the leading edge of the timeout.
+   */
+  leading?: boolean;
+  /**
+   * Controls if the function should be invoked on the trailing edge of the timeout.
+   */
+  trailing?: boolean;
+}
+
+export interface Options extends CallOptions {
+  /**
+   * The maximum time the given function is allowed to be delayed before it's invoked.
+   */
+  maxWait?: number;
+}
+
+export interface ControlFunctions {
+  /**
+   * Cancel pending function invocations
+   */
+  cancel: () => void;
+  /**
+   * Immediately invoke pending function invocations
+   */
+  flush: () => void;
+  /**
+   * Returns `true` if there are any pending function invocations
+   */
+  isPending: () => boolean;
+}
+
+/**
+ * Subsequent calls to the debounced function `debounced.callback` return the result of the last func invocation.
+ * Note, that if there are no previous invocations it's mean you will get undefined. You should check it in your code properly.
+ */
+export interface DebouncedState<T extends (...args: any) => ReturnType<T>>
+  extends ControlFunctions {
+  (...args: Parameters<T>): ReturnType<T> | undefined;
+}
+
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait`
+ * milliseconds have elapsed since the last time the debounced function was
+ * invoked, or until the next browser frame is drawn.
+ *
+ * The debounced function comes with a `cancel` method to cancel delayed `func`
+ * invocations and a `flush` method to immediately invoke them.
+ *
+ * Provide `options` to indicate whether `func` should be invoked on the leading
+ * and/or trailing edge of the `wait` timeout. The `func` is invoked with the
+ * last arguments provided to the debounced function.
+ *
+ * Subsequent calls to the debounced function return the result of the last
+ * `func` invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the debounced function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * If `wait` is omitted in an environment with `requestAnimationFrame`, `func`
+ * invocation will be deferred until the next frame is drawn (typically about
+ * 16ms).
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `debounce` and `throttle`.
+ *
+ * @category Function
+ * @param {Function} func The function to debounce.
+ * @param {number} [wait=0]
+ *  The number of milliseconds to delay; if omitted, `requestAnimationFrame` is
+ *  used (if available, otherwise it will be setTimeout(...,0)).
+ * @param {Object} [options={}] The options object.
+ *  Controls if `func` should be invoked on the leading edge of the timeout.
+ * @param {boolean} [options.leading=false]
+ *  The maximum time `func` is allowed to be delayed before it's invoked.
+ * @param {number} [options.maxWait]
+ *  Controls if `func` should be invoked the trailing edge of the timeout.
+ * @param {boolean} [options.trailing=true]
+ * @returns {Function} Returns the new debounced function.
+ * @example
+ *
+ * // Avoid costly calculations while the window size is in flux.
+ * const resizeHandler = useDebouncedCallback(calculateLayout, 150);
+ * window.addEventListener('resize', resizeHandler)
+ *
+ * // Invoke `sendMail` when clicked, debouncing subsequent calls.
+ * const clickHandler = useDebouncedCallback(sendMail, 300, {
+ *   leading: true,
+ *   trailing: false,
+ * })
+ * <button onClick={clickHandler}>click me</button>
+ *
+ * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
+ * const debounced = useDebouncedCallback(batchLog, 250, { 'maxWait': 1000 })
+ * const source = new EventSource('/stream')
+ * source.addEventListener('message', debounced)
+ *
+ * // Cancel the trailing debounced invocation.
+ * window.addEventListener('popstate', debounced.cancel)
+ *
+ * // Check for pending invocations.
+ * const status = debounced.pending() ? "Pending..." : "Ready"
+ */
+export default function useDebouncedCallback<
+  T extends (...args: any) => ReturnType<T>,
+>(
+  func: T,
+  wait?: number,
+  options?: Options,
+): DebouncedState<T> {
+  const lastCallTime = useRef(null);
+  const lastInvokeTime = useRef(0);
+  const timerId = useRef(null);
+  const lastArgs = useRef<unknown[]>([]);
+  const lastThis = useRef<unknown>();
+  const result = useRef<ReturnType<T>>();
+  const funcRef = useRef(func);
+  const mounted = useRef(true);
 
   useEffect(() => {
-    const debounceHandler = setTimeout(() => {
-      setDebouncedCallback(() => callback);
-    }, delay);
+    funcRef.current = func;
+  }, [func]);
 
+  // Bypass `requestAnimationFrame` by explicitly setting `wait=0`.
+  const useRAF = !wait && wait !== 0 && typeof window !== "undefined";
+
+  if (typeof func !== "function") {
+    throw new TypeError("Expected a function");
+  }
+
+  wait = +wait || 0;
+  options = options || {};
+
+  const leading = !!options.leading;
+  const trailing = "trailing" in options ? !!options.trailing : true; // `true` by default
+  const maxing = "maxWait" in options;
+  const maxWait = maxing ? Math.max(+options.maxWait || 0, wait) : null;
+
+  useEffect(() => {
+    mounted.current = true;
     return () => {
-      clearTimeout(debounceHandler);
+      mounted.current = false;
     };
-  }, [callback, delay]);
+  }, []);
 
-  return debouncedCallback;
-};
+  // You may have a question, why we have so many code under the useMemo definition.
+  //
+  // This was made as we want to escape from useCallback hell and
+  // not to initialize a number of functions each time useDebouncedCallback is called.
+  //
+  // It means that we have less garbage for our GC calls which improves performance.
+  // Also, it makes this library smaller.
+  //
+  // And the last reason, that the code without lots of useCallback with deps is easier to read.
+  // You have only one place for that.
+  const debounced = useMemo(() => {
+    const invokeFunc = (time: number) => {
+      const args = lastArgs.current;
+      const thisArg = lastThis.current;
 
-export default useDebouncedCallback;
+      lastArgs.current = lastThis.current = null;
+      lastInvokeTime.current = time;
+      return (result.current = funcRef.current.apply(thisArg, args));
+    };
+
+    const startTimer = (pendingFunc: () => void, wait: number) => {
+      if (useRAF) cancelAnimationFrame(timerId.current);
+      timerId.current = useRAF
+        ? requestAnimationFrame(pendingFunc)
+        : setTimeout(pendingFunc, wait);
+    };
+
+    const shouldInvoke = (time: number) => {
+      if (!mounted.current) return false;
+
+      const timeSinceLastCall = time - lastCallTime.current;
+      const timeSinceLastInvoke = time - lastInvokeTime.current;
+
+      // Either this is the first call, activity has stopped and we're at the
+      // trailing edge, the system time has gone backwards and we're treating
+      // it as the trailing edge, or we've hit the `maxWait` limit.
+      return (
+        !lastCallTime.current ||
+        timeSinceLastCall >= wait ||
+        timeSinceLastCall < 0 ||
+        (maxing && timeSinceLastInvoke >= maxWait)
+      );
+    };
+
+    const trailingEdge = (time: number) => {
+      timerId.current = null;
+
+      // Only invoke if we have `lastArgs` which means `func` has been
+      // debounced at least once.
+      if (trailing && lastArgs.current) {
+        return invokeFunc(time);
+      }
+      lastArgs.current = lastThis.current = null;
+      return result.current;
+    };
+
+    const timerExpired = () => {
+      const time = Date.now();
+      if (shouldInvoke(time)) {
+        return trailingEdge(time);
+      }
+      // https://github.com/xnimorz/use-debounce/issues/97
+      if (!mounted.current) {
+        return;
+      }
+      // Remaining wait calculation
+      const timeSinceLastCall = time - lastCallTime.current;
+      const timeSinceLastInvoke = time - lastInvokeTime.current;
+      const timeWaiting = wait - timeSinceLastCall;
+      const remainingWait = maxing
+        ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke)
+        : timeWaiting;
+
+      // Restart the timer
+      startTimer(timerExpired, remainingWait);
+    };
+
+    const func: DebouncedState<T> = (...args: Parameters<T>): ReturnType<T> => {
+      const time = Date.now();
+      const isInvoking = shouldInvoke(time);
+
+      lastArgs.current = args;
+      lastThis.current = this;
+      lastCallTime.current = time;
+
+      if (isInvoking) {
+        if (!timerId.current && mounted.current) {
+          // Reset any `maxWait` timer.
+          lastInvokeTime.current = lastCallTime.current;
+          // Start the timer for the trailing edge.
+          startTimer(timerExpired, wait);
+          // Invoke the leading edge.
+          return leading ? invokeFunc(lastCallTime.current) : result.current;
+        }
+        if (maxing) {
+          // Handle invocations in a tight loop.
+          startTimer(timerExpired, wait);
+          return invokeFunc(lastCallTime.current);
+        }
+      }
+      if (!timerId.current) {
+        startTimer(timerExpired, wait);
+      }
+      return result.current;
+    };
+
+    func.cancel = () => {
+      if (timerId.current) {
+        useRAF
+          ? cancelAnimationFrame(timerId.current)
+          : clearTimeout(timerId.current);
+      }
+      lastInvokeTime.current = 0;
+      lastArgs.current =
+        lastCallTime.current =
+        lastThis.current =
+        timerId.current =
+          null;
+    };
+
+    func.isPending = () => {
+      return !!timerId.current;
+    };
+
+    func.flush = () => {
+      return !timerId.current ? result.current : trailingEdge(Date.now());
+    };
+
+    return func;
+  }, [leading, maxing, wait, maxWait, trailing, useRAF]);
+
+  return debounced;
+}
 

lib/hooks/useTraceProps.ts

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from "preact/hooks";
+
+export function useTraceUpdate(props) {
+  const prev = useRef(props);
+  useEffect(() => {
+    const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
+      if (prev.current[k] !== v) {
+        ps[k] = [prev.current[k], v];
+      }
+      return ps;
+    }, {});
+    if (Object.keys(changedProps).length > 0) {
+      console.log("Changed props:", changedProps);
+    }
+    prev.current = props;
+  });
+}

lib/menus.ts

@@ -1,18 +0,0 @@
-export const menu = [
-  {
-    name: "🏡 Home",
-    link: "/",
-  },
-  {
-    name: "🍽️ Recipes",
-    link: "/recipes",
-  },
-  {
-    name: "🍿 Movies",
-    link: "/movies",
-  },
-  {
-    name: "📝 Articles",
-    link: "/articles",
-  },
-];

lib/resource/recipes.ts

@@ -3,10 +3,9 @@ import {
   getTextOfChild,
   getTextOfRange,
   parseDocument,
-  renderMarkdown,
 } from "@lib/documents.ts";
 import { parse } from "yaml";
-import { parseIngredient } from "https://esm.sh/parse-ingredient";
+import { parseIngredient } from "https://esm.sh/parse-ingredient@1.0.1";
 import { createCrud } from "@lib/crud.ts";
 import { extractHashTags } from "@lib/string.ts";
 

lib/resources.ts

@@ -0,0 +1,26 @@
+export const resources = {
+  "home": {
+    emoji: "🏡",
+    name: "Home",
+    link: "/",
+    prefix: "",
+  },
+  "recipe": {
+    emoji: "🍽️",
+    name: "Recipes",
+    link: "/recipes",
+    prefix: "Recipes/",
+  },
+  "movie": {
+    emoji: "🍿",
+    name: "Movies",
+    link: "/movies",
+    prefix: "Media/movies/",
+  },
+  "article": {
+    emoji: "📝",
+    name: "Articles",
+    link: "/articles",
+    prefix: "Media/articles/",
+  },
+} as const;

lib/string.ts

@@ -1,3 +1,5 @@
+import { resources } from "@lib/resources.ts";
+
 export function formatDate(date: Date): string {
   const options = { year: "numeric", month: "long", day: "numeric" } as const;
   return new Intl.DateTimeFormat("en-US", options).format(date);
@@ -92,3 +94,9 @@ export function getCookie(name: string): string | null {
       return decodeURIComponent(cookie.substring(nameLenPlus));
     })[0] || null;
 }
+
+const resourcePrefixes = Object.values(resources).map((v) => v.prefix).filter(
+  (s) => s.length > 2,
+);
+export const isLocalImage = (src: string) =>
+  resourcePrefixes.some((p) => src.startsWith(p));

lib/types.ts

@@ -1,3 +1,6 @@
+import { SearchResponse } from "https://raw.githubusercontent.com/bradenmacdonald/typesense-deno/main/src/Typesense/Documents.ts";
+import { resources } from "@lib/resources.ts";
+
 export interface TMDBMovie {
   adult: boolean;
   backdrop_path: string;
@@ -23,3 +26,14 @@ export interface GiteaOauthUser {
   picture: string;
   groups: any;
 }
+
+export type SearchResult = SearchResponse<{
+  id:string;
+  name: string;
+  type: keyof typeof resources;
+  date?: string;
+  rating: number;
+  tags: string[];
+  description?: string;
+  image?: string;
+}>;

lib/typesense.ts

@@ -29,13 +29,6 @@ function sanitizeStringForTypesense(input: string) {
 // Use a promise to initialize the client as needed, rather than at import time.
 let clientPromise: Promise<Client | null> | undefined;
 
-clientPromise?.then((client) => {
-  client?.collections().create({
-    name: "resources",
-    fields: [],
-  });
-});
-
 export function getTypeSenseClient(): Promise<Client | null> {
   if (clientPromise === undefined) {
     let typesenseUrl: URL;
@@ -83,6 +76,7 @@ async function initializeTypesense() {
           { name: "rating", type: "int32", facet: true },
           { name: "tags", type: "string[]", facet: true },
           { name: "description", type: "string", optional: true },
+          { name: "image", type: "string", optional: true },
         ],
         default_sorting_field: "rating", // Default field for sorting
       });
@@ -117,6 +111,7 @@ async function synchronizeWithTypesense() {
         description: sanitizeStringForTypesense(
           resource?.description || resource?.content || "",
         ),
+        image: resource?.meta?.image,
         tags: resource?.tags || [],
         rating: resource?.meta?.rating || 0,
         date: resource?.meta?.date?.toString() || "",
@@ -130,23 +125,29 @@ async function synchronizeWithTypesense() {
     );
 
     // Get all the IDs of documents currently indexed in Typesense
-    // const allTypesenseDocuments = await client.collections("resources")
-    //   .documents()
-    //   .search({ q: "*", query_by: "name" });
+    const allTypesenseDocuments = await client.collections("resources")
+      .documents().search({
+        q: "*",
+        query_by: "name,type,date,description",
+        per_page: 250,
+        limit_hits: 9999,
+      });
 
-    // const documentIds = allTypesenseDocuments.hits?.map((doc) => doc.id);
+    const documentIds = allTypesenseDocuments.hits?.map((doc) =>
+      doc?.document?.id
+    ) as string[];
 
     // Find deleted document IDs by comparing the Typesense document IDs with the current list of resources
-    // const deletedDocumentIds = documentIds?.filter((id) =>
-    //   !allResources.some((resource) => resource.id.toString() === id)
-    // );
+    const deletedDocumentIds = documentIds?.filter((id) =>
+      !allResources.some((resource) => resource.id.toString() === id)
+    );
 
     // Delete the documents with IDs found in deletedDocumentIds
-    // await Promise.all(
-    //   deletedDocumentIds?.map((id) =>
-    //     client.collections("resources").documents()
-    //   ),
-    // );
+    await Promise.all(
+      deletedDocumentIds?.map((id) =>
+        client.collections("resources").documents(id).delete()
+      ),
+    );
 
     log.info("data synchronized");
   } catch (error) {