serve-my-md 1.1.0

package/web/src/components/Rendrer.tsx

@@ -0,0 +1,140 @@
+import { useNavigate } from '@tanstack/react-router';
+import { useEffect, useRef } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+
+import Bettercrumb from './Bettercrumb';
+import { Button } from './ui/button';
+import IntentLink from './IntentLink';
+import { Kbd } from './ui/kbd';
+import { SidebarTrigger } from './ui/sidebar';
+import { useIsMobile } from '@/hooks/useMobile';
+import { markElements, slugify } from '@/lib/utils';
+import Search from './Search';
+import ThemeSwitch from './ThemeSwitcher';
+import pathBrowser from 'path-browserify';
+import out from '@/.generated/output.json' with { type: 'json' };
+
+export default function Rendrer({
+  path,
+  content,
+  next,
+  prev,
+  title
+}: {
+  path: string;
+  content: string;
+  next?: string;
+  prev?: string;
+  title: string;
+}) {
+  const articleRef = useRef<HTMLDivElement>(null);
+  const navigate = useNavigate();
+  const isMobile = useIsMobile();
+
+  const prevRef = useRef<HTMLButtonElement>(null);
+  const nextRef = useRef<HTMLButtonElement>(null);
+
+  useHotkeys(
+    'alt+shift+enter',
+    (e) => {
+      e.preventDefault();
+      if (prev && prevRef.current) prevRef.current.click();
+    },
+    [prev]
+  );
+
+  useHotkeys(
+    'alt+enter',
+    (e) => {
+      e.preventDefault();
+      if (next && nextRef.current) nextRef.current.click();
+    },
+    [next]
+  );
+
+  useEffect(() => {
+    if (!articleRef.current) return;
+
+    const article = articleRef.current;
+    article.querySelectorAll('a').forEach((elem: HTMLAnchorElement) => {
+      elem.setAttribute(
+        'href',
+        pathBrowser.join(out.baseRoute || '/', elem.getAttribute('href') || '')
+      );
+
+      elem.addEventListener('click', (e) => {
+        if (
+          elem.getAttribute('href')?.startsWith('http://') ||
+          elem.getAttribute('href')?.startsWith('https://')
+        )
+          return;
+        e.preventDefault();
+        navigate({ to: elem.getAttribute('href') || '/' });
+      });
+    });
+
+    markElements(article);
+    article.querySelectorAll('h1,h2,h3,h4').forEach((element) => {
+      element.id = slugify(element.textContent);
+
+      const a = document.createElement('a');
+      a.href = `#${element.id}`;
+      a.classList.add('heading-anchor');
+      a.innerHTML = element.innerHTML;
+      element.innerHTML = '';
+      element.appendChild(a);
+    });
+
+    // Prism.highlightAllUnder(article, true);
+  }, [articleRef.current]);
+
+  return (
+    <>
+      <main className="py-10 w-full">
+        <div className="flex items-center gap-2 justify-between">
+          <div className="flex items-center gap-2 justify-start">
+            {isMobile && <SidebarTrigger variant="outline" />}
+            <Bettercrumb path={path} />
+          </div>
+          <div className="flex items-center gap-2 justify-end">
+            <ThemeSwitch />
+            <Search />
+          </div>
+        </div>
+
+        <h1 className="text-3xl font-bold mt-4">{title}</h1>
+
+        <article
+          ref={articleRef}
+          className="main-article w-full mt-4"
+          dangerouslySetInnerHTML={{ __html: content }}
+        />
+
+        <div className="flex justify-between mt-10 w-full">
+          {prev ? (
+            <>
+              <Button variant="outline" asChild ref={prevRef}>
+                <IntentLink to={prev}>
+                  Previous <Kbd>Alt + Shift + ⏎</Kbd>
+                </IntentLink>
+              </Button>
+            </>
+          ) : (
+            <span></span>
+          )}
+          {next ? (
+            <>
+              <Button variant="outline" asChild ref={nextRef}>
+                <IntentLink to={next}>
+                  Next <Kbd>Alt + ⏎</Kbd>
+                </IntentLink>
+              </Button>
+            </>
+          ) : (
+            <span></span>
+          )}
+        </div>
+      </main>
+    </>
+  );
+}

package/web/src/components/Search.tsx

@@ -0,0 +1,275 @@
+import ReactDOM from 'react-dom';
+import { SearchIcon } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import output from '@/.generated/output.json' with { type: 'json' };
+
+import type { Dispatch, SetStateAction } from 'react';
+import {
+  cn,
+  extractText,
+  getTitleFromExtraction,
+  highlightSubstring
+} from '@/lib/utils';
+import { useRouterState } from '@tanstack/react-router';
+import IntentLink from './IntentLink';
+
+type SearchResult = {
+  path: string;
+  title: string;
+  matches: number;
+  text: string;
+  targetElement: HTMLElement;
+};
+
+type SearchResultSimple = {
+  text: string;
+  targetElement: HTMLElement;
+};
+
+type SearchResults = {
+  internal: SearchResultSimple[];
+  external: SearchResult[];
+};
+
+export default function Search() {
+  const [trig, trigger] = useState(false);
+  const [results, setResults] = useState<{
+    internal: SearchResultSimple[];
+    external: SearchResult[];
+  }>({
+    internal: [],
+    external: []
+  });
+  const pathname = useRouterState({ select: (s) => s.location.pathname });
+
+  const onChange = (val: string) => {
+    if (!val) {
+      setResults({ internal: [], external: [] });
+
+      return;
+    }
+
+    setResults(
+      output.routes.reduce(
+        (acc, route) => {
+          const extraction = extractText(route.content);
+
+          if (route.path === pathname) {
+            extraction.forEach(({ targetElement, text }) => {
+              if (text.toLowerCase().includes(val.toLowerCase())) {
+                acc.internal.push({
+                  text,
+                  targetElement
+                });
+              }
+            });
+
+            return acc;
+          }
+
+          extraction.every(({ targetElement, text }) => {
+            if (text.toLowerCase().includes(val.toLowerCase())) {
+              acc.external.push({
+                path: route.path,
+                matches: (text.match(new RegExp(val, 'gi')) || []).length,
+                text,
+                targetElement,
+                title: getTitleFromExtraction(extraction)
+              });
+
+              return false;
+            }
+
+            return true;
+          });
+
+          return acc;
+        },
+        { internal: [], external: [] } as typeof results
+      )
+    );
+  };
+
+  useEffect(() => {
+    setResults({ internal: [], external: [] });
+  }, [trig]);
+
+  useHotkeys('ctrl+shift+f', () => trigger((t) => !t));
+  useHotkeys('esc', () => trigger(false));
+
+  return (
+    <>
+      <Button
+        variant="outline"
+        size="icon"
+        title="Search"
+        onClick={() => trigger((t) => !t)}
+        aria-keyshortcuts="Ctrl+Shift+F"
+      >
+        <SearchIcon />
+      </Button>
+      <SearchInput
+        displayState={trig}
+        trigger={trigger}
+        onChange={onChange}
+        searchResults={results}
+      />
+    </>
+  );
+}
+
+interface SearchInputProps {
+  trigger: Dispatch<SetStateAction<boolean>>;
+  displayState: boolean;
+  query?: string;
+  onChange: (val: string) => void;
+  searchResults: SearchResults;
+}
+
+function SearchInput({
+  displayState,
+  trigger,
+  query,
+  onChange,
+  searchResults
+}: SearchInputProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [changed, setChanged] = useState(0);
+  const [value, setValue] = useState(query || '');
+
+  useEffect(() => {
+    setChanged((c) => c + 1);
+  }, [searchResults]);
+
+  useEffect(() => {
+    function remInput(e: MouseEvent) {
+      if (!inputRef.current) return;
+
+      const input = inputRef.current;
+      const rect = input.getBoundingClientRect();
+      if (
+        e.clientX < rect.x ||
+        e.clientY < rect.y ||
+        e.clientX > rect.x + rect.width ||
+        e.clientY > rect.y + rect.height
+      ) {
+        trigger(false);
+      }
+    }
+
+    if (displayState)
+      setTimeout(() => document.addEventListener('click', remInput), 100);
+
+    return () => {
+      if (displayState) document.removeEventListener('click', remInput);
+    };
+  }, [displayState]);
+
+  useEffect(() => {
+    setChanged(0);
+    setValue(query || '');
+    if (displayState && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [displayState]);
+
+  if (!displayState) return null;
+
+  return ReactDOM.createPortal(
+    <div
+      className={cn(
+        'fixed top-0 left-0 w-full h-screen z-50 transition-all',
+        searchResults.internal.length + searchResults.external.length ||
+          changed > 2
+          ? 'bg-background/50 backdrop-blur-sm'
+          : ''
+      )}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) {
+          trigger(false);
+        }
+      }}
+    >
+      <div className="absolute top-4 left-1/2 -translate-x-1/2 w-1/2">
+        <Input
+          className="shadow-[0px_-25px_50px_-10px_black] backdrop-blur-md bg-background/80!"
+          placeholder="Search for a candy.."
+          ref={inputRef}
+          value={value}
+          onChange={(e) => {
+            setValue(e.currentTarget.value);
+            onChange(e.currentTarget.value);
+          }}
+        />
+
+        <SearchResults searchResults={searchResults} query={value} />
+      </div>
+    </div>,
+    document.body
+  );
+}
+
+interface SearchResultsProps {
+  searchResults: SearchResults;
+  query: string;
+}
+
+function SearchResults({ searchResults, query }: SearchResultsProps) {
+  if (!searchResults.internal.length && !searchResults.external.length) {
+    return <></>;
+  }
+
+  return (
+    <>
+      {searchResults.internal.length > 0 && (
+        <p className="px-2 text-sm text-muted-foreground">On this page</p>
+      )}
+      {searchResults.internal.map(
+        (result, i) =>
+          !result.targetElement.classList.contains('template') && (
+            <div
+              key={i}
+              onClick={() => {
+                if (result.targetElement.getAttribute('data-label')) {
+                  const el = document.querySelector(
+                    `[data-label="${result.targetElement.getAttribute('data-label')}"]`
+                  ) as HTMLElement;
+                  if (el) el.scrollIntoView({ behavior: 'smooth' });
+                } else if (result.targetElement.id) {
+                  const el = document.getElementById(result.targetElement.id);
+                  if (el) el.scrollIntoView({ behavior: 'smooth' });
+                }
+              }}
+              className="cursor-pointer p-2 rounded hover:bg-secondary"
+            >
+              <p>{highlightSubstring(result.text, query)}</p>
+            </div>
+          )
+      )}
+
+      <hr className="my-4" />
+
+      {searchResults.external.map((result, i) => (
+        <IntentLink
+          key={i}
+          to={result.path}
+          className="block p-3 rounded hover:bg-secondary border border-outline my-3"
+        >
+          <p className="text-sm text-muted-foreground">In {result.title}</p>
+          <div className="flex items-center gap-2">
+            <p className="block text-ellipsis w-full overflow-hidden text-nowrap">
+              {highlightSubstring(result.text, query)}
+            </p>
+            <span className="py-1 px-1.5 rounded bg-secondary text-xs float-right text-nowrap">
+              matches: {result.matches}
+            </span>
+          </div>
+        </IntentLink>
+      ))}
+    </>
+  );
+}

package/web/src/components/Sidebar.tsx

@@ -0,0 +1,89 @@
+import { useContext, useMemo } from 'react';
+import { ChevronsUpDown } from 'lucide-react';
+import type { JSX } from 'react';
+
+import type { Out } from '@shared/index';
+import { pathsContext } from '@/contexts';
+import {
+  Sidebar as Sb,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader
+} from '@/components/ui/sidebar';
+import outJ from '@/.generated/output.json' with { type: 'json' };
+import IntentLink from '@/components/IntentLink';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from '@/components/ui/collapsible';
+
+const out = outJ as Out;
+
+export default function Sidebar() {
+  const paths = useContext(pathsContext);
+
+  const nestedLinks = useMemo(() => {
+    const buildLinks = (
+      pairs: typeof paths,
+      prefix: string
+    ): Array<JSX.Element | null> => {
+      return pairs.map(({label, children, isGrouper, pathSegment}, i) => {
+        if (prefix !== '/' && !label) return null;
+
+        return children ? isGrouper ? (
+            <div key={i} title={label} className="pl-2 mt-2 mb-0.5">
+              <span className="text-sm text-muted-foreground pr-2">{label}</span>
+              <div className="flex flex-col gap-0 pl-1">
+                {buildLinks(children, prefix)}
+              </div>
+            </div>
+          ) : (
+          <Collapsible key={i} className="my-0.5">
+            <CollapsibleTrigger className="flex justify-between w-full font-body">
+              <IntentLink to={prefix + '/' + pathSegment} className="px-2 py-0.5">
+                {label || 'Home'}
+              </IntentLink>
+              <ChevronsUpDown className="w-4 text-muted-foreground" />
+            </CollapsibleTrigger>
+
+            <CollapsibleContent style={{ paddingLeft: '0.75em' }}>
+              {buildLinks(children, prefix + '/' + pathSegment)}
+            </CollapsibleContent>
+          </Collapsible>
+        ) : (
+          <IntentLink
+            key={i}
+            to={prefix + '/' + pathSegment}
+            className="block px-2 py-0.5 my-0.5 font-body"
+          >
+            {label || 'Home'}
+          </IntentLink>
+        );
+      });
+    };
+    return buildLinks(paths, out.baseRoute || "/");
+  }, []);
+
+  return (
+    <>
+      <Sb variant="inset">
+        <SidebarHeader>
+          {out.logo && (
+            <img src={out.logo} height="24px" alt={`${out.name} logo`} />
+          )}
+          {(out.showNameWithLogo || !out.logo) && out.name}
+        </SidebarHeader>
+
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupContent>
+              {nestedLinks}
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sb>
+    </>
+  );
+}

package/web/src/components/ThemeSwitcher.tsx

@@ -0,0 +1,46 @@
+import { Moon, Sun } from "lucide-react";
+import { useEffect } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import output from "@/.generated/output.json" with { type: "json" };
+
+export default function ThemeSwitch({ className }: { className?: string }) {
+  const switchTheme = () => {
+    if (document.body.classList.contains("dark")) {
+      document.body.classList.remove("dark");
+      localStorage.setItem("theme", "light");
+    } else {
+      document.body.classList.add("dark");
+      localStorage.setItem("theme", "dark");
+    }
+  };
+
+  useEffect(() => {
+    const initTheme =
+      localStorage.getItem("theme") ||
+      output.defaultTheme || 
+      (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+
+    if (initTheme === "dark") {
+      document.body.classList.add("dark");
+    } else {
+      document.body.classList.remove("dark");
+    }
+  }, []);
+
+  return (
+    <>
+      <Button
+        variant="outline"
+        size="icon"
+        className={cn("relative", className)}
+        onClick={switchTheme}
+        title={"Switch Theme"}
+      >
+        <Sun className="scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0 dark:hover:scale-75 dark:hover:rotate-90" />
+        <Moon className="absolute scale-100 rotate-0 transition-all hover:scale-100 hover:rotate-0 dark:scale-0 dark:rotate-90" />
+      </Button>
+    </>
+  );
+}

package/web/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+
+import IntentLink from '../IntentLink';
+import type { IntentLinkProps } from '../IntentLink';
+
+import { cn } from '@/lib/utils';
+
+function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word sm:gap-2.5',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn('inline-flex items-center gap-1.5', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: IntentLinkProps & {
+  asChild?: boolean;
+  className?: string;
+}) {
+  if (asChild) {
+    const slotProps = props as React.ComponentProps<typeof Slot>;
+    return (
+      <Slot
+        data-slot="breadcrumb-link"
+        className={cn('hover:text-foreground transition-colors', className)}
+        {...slotProps}
+      />
+    );
+  }
+
+  return (
+    <IntentLink
+      data-slot="breadcrumb-link"
+      className={cn('hover:text-foreground transition-colors', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn('text-foreground font-normal', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('[&>svg]:size-3.5', className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('flex size-9 items-center justify-center', className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis
+};