docs: Update design

apps/docs/package.json

@@ -14,11 +14,11 @@
     "@astrojs/sitemap": "^3.0.0",
     "@astrojs/solid-js": "^3.0.1",
     "@mdi/js": "^7.2.96",
-    "@microsoft/fetch-event-source": "^2.0.1",
     "@solid-primitives/scheduled": "^1.4.0",
     "@types/marked": "^5.0.1",
     "@unocss/reset": "^0.55.7",
     "@vrite/components": "workspace:*",
+    "@vrite/sdk": "workspace:*",
     "astro": "^3.1.0",
     "clsx": "^2.0.0",
     "curl-string": "^3.1.0",
@@ -32,6 +32,7 @@
     "tinykeys": "^2.1.0",
     "typescript": "^5.2.2",
     "unocss": "^0.55.7",
+    "url-slug": "^4.0.1",
     "vite": "^4.4.9"
   },
   "devDependencies": {

apps/docs/src/components/fragments/navigation.tsx → apps/docs/src/components/fragments/footer.tsx

@@ -2,18 +2,19 @@ import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
 import { Component, Show } from "solid-js";
 import { IconButton } from "#components/primitives";
 
-interface NavigateProps {
-  nextEntry?: { label: string; link: string };
-  previousEntry?: { label: string; link: string };
+interface FooterProps {
+  nextEntry?: { label: string; link: string } | null;
+  previousEntry?: { label: string; link: string } | null;
 }
 
-const Navigation: Component<NavigateProps> = (props) => {
+const Footer: Component<FooterProps> = (props) => {
   return (
     <div class="flex flex-col lg:flex-row w-full gap-2 lg:gap-4 pt-16">
       <div class="flex-1">
         <Show when={props.previousEntry}>
           <IconButton
             label={props.previousEntry!.label}
+            text="soft"
             path={mdiChevronLeft}
             iconProps={{ class: "min-w-8" }}
             size="large"
@@ -26,6 +27,7 @@ const Navigation: Component<NavigateProps> = (props) => {
         <Show when={props.nextEntry}>
           <IconButton
             label={<span class="pr-2">{props.nextEntry!.label}</span>}
+            text="soft"
             path={mdiChevronRight}
             iconProps={{ class: "min-w-8" }}
             size="large"
@@ -38,4 +40,4 @@ const Navigation: Component<NavigateProps> = (props) => {
   );
 };
 
-export { Navigation };
+export { Footer };

apps/docs/src/components/fragments/header.tsx

@@ -1,6 +1,6 @@
 import { SearchPaletteProvider, useSearchPalette } from "./search-palette";
 import { mdiAppleKeyboardCommand, mdiGithub, mdiMagnify } from "@mdi/js";
-import { For, type Component } from "solid-js";
+import { For, type Component, Show } from "solid-js";
 import clsx from "clsx";
 import { Button, Icon, IconButton, Tooltip } from "#components/primitives";
 import { discordIcon } from "#assets/icons";
@@ -59,16 +59,23 @@ const Header: Component = () => {
         label={
           <div class="hidden md:flex w-full items-center">
             <span class="pl-1 flex-1 text-start">Search</span>
-            <kbd class="bg-gray-300 dark:bg-gray-700 group-hover:bg-gray-200 dark:group-hover:bg-gray-800 flex justify-center items-center rounded-md px-1 h-5 text-sm">
-              {isAppleDevice() ? <Icon path={mdiAppleKeyboardCommand} class="h-3 w-3" /> : "Ctrl "}K
-            </kbd>
+            <Show when={typeof window === "object"}>
+              <kbd class="bg-gray-300 dark:bg-gray-700 group-hover:bg-gray-200 dark:group-hover:bg-gray-800 flex justify-center items-center rounded-md px-1 h-5 text-sm">
+                {isAppleDevice() ? (
+                  <Icon path={mdiAppleKeyboardCommand} class="h-3 w-3" />
+                ) : (
+                  "Ctrl "
+                )}
+                K
+              </kbd>
+            </Show>
           </div>
         }
         text="soft"
         class="lg:min-w-48 justify-start m-0 group"
         onClick={() => setOpened(!opened())}
       />
-      <Button color="primary" class="m-0">
+      <Button color="primary" class="m-0" link="https://app.vrite.io">
         Sign in
       </Button>
     </div>

apps/docs/src/components/fragments/index.tsx

@@ -4,5 +4,6 @@ export * from "./header";
 export * from "./side-bar";
 export * from "./on-this-page";
 export * from "./svg-defs";
-export * from "./navigation";
+export * from "./footer";
 export * from "./search-palette";
+export * from "./footer";

apps/docs/src/components/fragments/on-this-page.tsx

@@ -1,4 +1,12 @@
-import { Component, For, onMount, onCleanup, createSignal, createMemo } from "solid-js";
+import {
+  Component,
+  For,
+  onMount,
+  onCleanup,
+  createSignal,
+  createMemo,
+  createEffect
+} from "solid-js";
 import { mdiListBox } from "@mdi/js";
 import clsx from "clsx";
 import { scroll } from "seamless-scroll-polyfill";
@@ -16,11 +24,39 @@ const OnThisPage: Component<OnThisPageProps> = (props) => {
       return heading.depth === 2 || heading.depth === 3;
     });
   });
+  const scrollToActiveHeading = (smooth?: boolean): void => {
+    const heading = activeHeading();
+    const element = document.getElementById(heading);
+
+    if (!element) return;
+
+    const rect = element.getBoundingClientRect();
+    const y = rect.top + window.scrollY - 60;
+
+    scroll(window, {
+      top: y,
+      behavior: smooth === false ? "instant" : "smooth"
+    });
+  };
+  const handleClick = (event: MouseEvent): void => {
+    const target = event.target as HTMLElement;
+
+    if (target.matches("h1, h2, h3, h4, h5, h6")) {
+      const { id } = target;
+
+      if (id) {
+        setActiveHeading(id);
+        scrollToActiveHeading();
+        history.replaceState(null, "", `#${id}`);
+        navigator.clipboard.writeText(window.location.href);
+      }
+    }
+  };
 
   onMount(() => {
     if (!headings().length) return;
 
-    const observedElements: HTMLElement[] = [];
+    const hash = location.hash.slice(1);
     const setCurrent: IntersectionObserverCallback = (entries) => {
       for (const entry of entries) {
         if (entry.isIntersecting) {
@@ -60,10 +96,17 @@ const OnThisPage: Component<OnThisPageProps> = (props) => {
       )
       .forEach((h) => headingsObserver.observe(h));
     container?.addEventListener("scroll", handleScroll);
+    document.body.addEventListener("click", handleClick);
     onCleanup(() => {
       headingsObserver.disconnect();
       container?.removeEventListener("scroll", handleScroll);
+      document.body.removeEventListener("click", handleClick);
     });
+
+    if (hash) {
+      setActiveHeading(hash);
+      scrollToActiveHeading(false);
+    }
   });
 
   return (
@@ -93,18 +136,8 @@ const OnThisPage: Component<OnThisPageProps> = (props) => {
                 class={clsx("text-start m-0", heading.depth === 3 && "ml-6")}
                 size={heading.depth === 2 ? "medium" : "small"}
                 onClick={() => {
-                  const element = document.getElementById(heading.slug);
-
-                  if (!element) return;
-
-                  const rect = element.getBoundingClientRect();
-                  const y = rect.top + window.scrollY - 60;
-
-                  scroll(window, {
-                    top: y,
-                    behavior: "smooth"
-                  });
                   setActiveHeading(heading.slug);
+                  scrollToActiveHeading();
                 }}
               >
                 {heading.text}

apps/docs/src/components/fragments/search-palette.tsx

@@ -8,15 +8,13 @@ import {
   Show,
   Switch,
   createEffect,
-  createMemo,
   createSignal,
   on,
   onCleanup,
   useContext
 } from "solid-js";
 import {
   mdiChevronRight,
-  mdiConsoleLine,
   mdiCreationOutline,
   mdiFileDocumentOutline,
   mdiHeadSnowflakeOutline,
@@ -30,8 +28,9 @@ import clsx from "clsx";
 import { scrollIntoView } from "seamless-scroll-polyfill";
 import { createContext } from "solid-js";
 import { debounce } from "@solid-primitives/scheduled";
-import { fetchEventSource } from "@microsoft/fetch-event-source";
+import { convert as convertToSlug } from "url-slug";
 import { marked } from "marked";
+import { createClient, SearchResult } from "@vrite/sdk/api";
 import {
   Button,
   Card,
@@ -54,12 +53,14 @@ interface SearchPaletteContextData {
 
 const SearchPaletteContext = createContext<SearchPaletteContextData>();
 const SearchPalette: Component<SearchPaletteProps> = (props) => {
+  const client = createClient({
+    token: import.meta.env.PUBLIC_VRITE_SEARCH_TOKEN,
+    baseURL: "http://localhost:4444"
+  });
   const [inputRef, setInputRef] = createSignal<HTMLInputElement | null>(null);
   const [abortControllerRef, setAbortControllerRef] = createSignal<AbortController | null>(null);
   const [mode, setMode] = createSignal<"search" | "ask">("search");
-  const [searchResults, setSearchResults] = createSignal<
-    Array<{ content: string; breadcrumb: string[]; contentPieceId: string }>
-  >([]);
+  const [searchResults, setSearchResults] = createSignal<SearchResult[]>([]);
   const [answer, setAnswer] = createSignal<string>("");
   const [loading, setLoading] = createSignal(false);
   const [scrollableContainerRef, setScrollableContainerRef] = createSignal<HTMLDivElement | null>(
@@ -71,25 +72,17 @@ const SearchPalette: Component<SearchPaletteProps> = (props) => {
   const ask = async (): Promise<void> => {
     let content = "";
 
-    await fetchEventSource(`http://localhost:4444/search/ask/?query=${query()}`, {
-      method: "GET",
-      headers: {
-        "Authorization": `Bearer Fq0U5T6vebJHtIqCPmyAt:jihNYSVwqNVgS9v8RqccR`,
-        "Content-Type": "application/json",
-        "Accept": "text/event-stream"
-      },
-      signal: abortControllerRef()?.signal,
-      onerror(error) {
+    client.useSignal(abortControllerRef()?.signal || null).ask({
+      query: query(),
+      onError(error) {
         setLoading(false);
         throw error;
       },
-      onmessage(event) {
-        const partOfContent = decodeURIComponent(event.data);
-
-        content += partOfContent;
+      onChunk(chunk) {
+        content += chunk;
         setAnswer(marked.parse(content, { gfm: true }));
       },
-      onclose() {
+      onEnd() {
         setLoading(false);
       }
     });
@@ -98,37 +91,31 @@ const SearchPalette: Component<SearchPaletteProps> = (props) => {
   const search = debounce(async () => {
     setSearchResults([]);
 
+    if (abortControllerRef()) abortControllerRef()?.abort();
+
     if (!query()) {
       setLoading(false);
+      setSearchResults([]);
 
       return;
     }
 
-    if (abortControllerRef()) abortControllerRef()?.abort();
-
     setAbortControllerRef(new AbortController());
 
     try {
-      const response = await fetch(`http://localhost:4444/search/?query=${query()}`, {
-        signal: abortControllerRef()?.signal,
-        credentials: "include",
-        headers: {
-          "Authorization": `Bearer Fq0U5T6vebJHtIqCPmyAt:jihNYSVwqNVgS9v8RqccR`,
-          "Content-Type": "application/json",
-          "Accept": "application/json"
-        }
-      });
-      const results = await response.json();
+      const search = await client
+        .useSignal(abortControllerRef()?.signal || null)
+        .search({ query: query() });
 
-      setSearchResults(results);
+      setSearchResults(search);
       setLoading(false);
 
       return;
     } catch (error) {
       const trpcError = error as any;
       const causeErrorName = trpcError.cause?.name?.toLowerCase() || "";
 
-      if (!causeErrorName.includes("aborterror")) {
+      if (!causeErrorName.includes("aborterror") && abortControllerRef()?.signal.aborted) {
         setLoading(false);
       }
     }
@@ -143,10 +130,16 @@ const SearchPalette: Component<SearchPaletteProps> = (props) => {
       });
     }
   };
-  const goToContentPiece = (contentPieceId: string, breadcrumb?: string[]): void => {
+  const goToContentPiece = (searchResult: SearchResult): void => {
     // eslint-disable-next-line no-console
-    console.log(contentPieceId, breadcrumb);
     props.setOpened(false);
+
+    const { slug } = searchResult.contentPiece;
+    const [title, subHeading1, subHeading2] = searchResult.breadcrumb;
+
+    window.location.href = `/${slug.startsWith("/") ? slug.slice(1) : slug}#${convertToSlug(
+      subHeading2 || subHeading1
+    )}`;
   };
 
   createEffect(
@@ -223,10 +216,7 @@ const SearchPalette: Component<SearchPaletteProps> = (props) => {
           if (!props.opened) return;
 
           if (mode() === "search") {
-            goToContentPiece(
-              searchResults()[selectedIndex()].contentPieceId,
-              searchResults()[selectedIndex()].breadcrumb
-            );
+            goToContentPiece(searchResults()[selectedIndex()]);
           }
         }
       });
@@ -354,7 +344,7 @@ const SearchPalette: Component<SearchPaletteProps> = (props) => {
                           )}
                           color="base"
                           onClick={() => {
-                            goToContentPiece(result.contentPieceId, result.breadcrumb);
+                            goToContentPiece(result);
                           }}
                           onPointerEnter={() => {
                             if (!mouseHoverEnabled()) return;