blodemd 0.0.5 → 0.0.6

package/docs/components/docs/contextual-menu.tsx

@@ -0,0 +1,406 @@
+"use client";
+
+import type { ContextualOption } from "@repo/models";
+import {
+  Checkmark1Icon,
+  ChevronDownSmallIcon,
+  ClaudeaiIcon,
+  CodeAssistantIcon,
+  CodeBracketsIcon,
+  CodeIcon,
+  CodeLinesIcon,
+  CopySimpleIcon,
+  GoogleColoredIcon,
+  GrokIcon,
+  MarkdownIcon,
+  OpenaiIcon,
+  PerplexityIcon,
+  Plugin1Icon,
+  SparkleIcon,
+  WindIcon,
+} from "blode-icons-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { ComponentType, ReactNode, SVGProps } from "react";
+
+import {
+  buildBuiltinUrl,
+  builtinOptions,
+  resolveCustomHref,
+} from "@/lib/contextual-options";
+
+type IconComponent = ComponentType<SVGProps<SVGSVGElement>>;
+
+const iconMap: Record<string, IconComponent> = {
+  ClaudeaiIcon,
+  CodeAssistantIcon,
+  CodeBracketsIcon,
+  CodeIcon,
+  CodeLinesIcon,
+  CopySimpleIcon,
+  GoogleColoredIcon,
+  GrokIcon,
+  MarkdownIcon,
+  OpenaiIcon,
+  PerplexityIcon,
+  Plugin1Icon,
+  SparkleIcon,
+  WindIcon,
+};
+
+const getBuiltinIcon = (iconName: string): IconComponent =>
+  iconMap[iconName] ?? CopySimpleIcon;
+
+type ActionId = "copy" | "mcp" | "add-mcp" | "assistant";
+
+interface ResolvedOption {
+  key: string;
+  title: string;
+  description: string;
+  icon: IconComponent;
+  type: "action" | "link";
+  action?: ActionId;
+  href?: string;
+}
+
+interface ContextualContext {
+  pageUrl: string;
+  pageContent: string;
+  pagePath: string;
+  mcpServerUrl?: string;
+}
+
+const resolveOptions = (
+  options: ContextualOption[],
+  context: ContextualContext
+): ResolvedOption[] => {
+  const resolved: ResolvedOption[] = [];
+  for (const option of options) {
+    if (typeof option === "string") {
+      const definition = builtinOptions[option];
+      if (!definition) {
+        continue;
+      }
+      if (definition.type === "action") {
+        resolved.push({
+          action: option as ActionId,
+          description: definition.description,
+          icon: getBuiltinIcon(definition.iconName),
+          key: option,
+          title: definition.title,
+          type: "action",
+        });
+      } else {
+        const href = buildBuiltinUrl(option, context);
+        if (href) {
+          resolved.push({
+            description: definition.description,
+            href,
+            icon: getBuiltinIcon(definition.iconName),
+            key: option,
+            title: definition.title,
+            type: "link",
+          });
+        }
+      }
+    } else {
+      resolved.push({
+        description: option.description,
+        href: resolveCustomHref(option.href, context),
+        icon: CopySimpleIcon,
+        key: `custom-${option.title}`,
+        title: option.title,
+        type: "link",
+      });
+    }
+  }
+  return resolved;
+};
+
+const useContextualActions = (content: string, title: string) => {
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+
+  const handleAction = useCallback(
+    async (action: string, key?: string) => {
+      const id = key ?? action;
+      switch (action) {
+        case "copy": {
+          await navigator.clipboard.writeText(`# ${title}\n\n${content}`);
+          setCopiedId(id);
+          setTimeout(() => setCopiedId(null), 2000);
+          break;
+        }
+        default: {
+          break;
+        }
+      }
+    },
+    [content, title]
+  );
+
+  return { copiedId, handleAction };
+};
+
+const usePageContext = (
+  content: string,
+  title: string,
+  pagePath: string
+): ContextualContext => {
+  const [pageUrl, setPageUrl] = useState("");
+
+  useEffect(() => {
+    setPageUrl(window.location.href);
+  }, []);
+
+  return {
+    mcpServerUrl: undefined,
+    pageContent: `# ${title}\n\n${content}`,
+    pagePath,
+    pageUrl,
+  };
+};
+
+const MenuIcon = ({ children }: { children: ReactNode }) => (
+  <div className="flex size-8 shrink-0 items-center justify-center rounded-md border border-border">
+    {children}
+  </div>
+);
+
+const MenuItem = ({
+  children,
+  href,
+  onSelect,
+}: {
+  children: ReactNode;
+  href?: string;
+  onSelect?: () => void;
+}) =>
+  href ? (
+    <a
+      className="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm transition-colors hover:bg-secondary/25"
+      href={href}
+      onClick={onSelect}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      {children}
+    </a>
+  ) : (
+    <button
+      className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left text-sm transition-colors hover:bg-secondary/25"
+      onClick={onSelect}
+      type="button"
+    >
+      {children}
+    </button>
+  );
+
+const ExternalArrow = () => (
+  <svg
+    aria-hidden="true"
+    className="ml-1 inline-block size-3"
+    fill="none"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={2}
+    viewBox="0 0 24 24"
+  >
+    <path d="M7 17L17 7M7 7h10v10" />
+  </svg>
+);
+
+interface ContextualMenuProps {
+  options: ContextualOption[];
+  content: string;
+  title: string;
+  pagePath: string;
+}
+
+export const ContextualMenu = ({
+  options,
+  content,
+  title,
+  pagePath,
+}: ContextualMenuProps) => {
+  const menuRef = useRef<HTMLDivElement>(null);
+  const context = usePageContext(content, title, pagePath);
+  const { copiedId, handleAction } = useContextualActions(content, title);
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  const resolved = useMemo(
+    () => resolveOptions(options, context),
+    [context, options]
+  );
+
+  const [primaryOption] = resolved;
+
+  useEffect(() => {
+    if (!menuOpen) {
+      return;
+    }
+
+    const handlePointerDown = (event: MouseEvent) => {
+      if (menuRef.current?.contains(event.target as Node)) {
+        return;
+      }
+      setMenuOpen(false);
+    };
+
+    document.addEventListener("mousedown", handlePointerDown);
+    return () => document.removeEventListener("mousedown", handlePointerDown);
+  }, [menuOpen]);
+
+  const closeMenu = useCallback(() => {
+    setMenuOpen(false);
+  }, []);
+
+  const toggleMenu = useCallback(() => {
+    setMenuOpen((current) => !current);
+  }, []);
+
+  const handlePrimaryAction = useCallback(async () => {
+    if (!primaryOption) {
+      return;
+    }
+
+    if (primaryOption.type === "link" && primaryOption.href) {
+      window.open(primaryOption.href, "_blank", "noopener,noreferrer");
+      return;
+    }
+
+    await handleAction(primaryOption.action ?? "", primaryOption.key);
+  }, [handleAction, primaryOption]);
+
+  const actionHandlers = useMemo(
+    () =>
+      Object.fromEntries(
+        resolved
+          .filter((item) => item.type === "action")
+          .map((item) => [
+            item.key,
+            async () => {
+              await handleAction(item.action ?? "", item.key);
+              closeMenu();
+            },
+          ])
+      ),
+    [closeMenu, handleAction, resolved]
+  );
+
+  if (!primaryOption) {
+    return null;
+  }
+
+  const isCopied = copiedId === primaryOption.key;
+
+  return (
+    <div className="relative flex shrink-0 items-center" ref={menuRef}>
+      <button
+        className="inline-flex items-center gap-2 rounded-l-xl border border-r-0 border-border px-3 py-1.5 text-sm font-medium transition-colors hover:bg-secondary/25"
+        onClick={handlePrimaryAction}
+        type="button"
+      >
+        {primaryOption.type === "action" && isCopied ? (
+          <Checkmark1Icon aria-hidden="true" className="size-[18px]" />
+        ) : (
+          <primaryOption.icon aria-hidden="true" className="size-[18px]" />
+        )}
+        <span>
+          {primaryOption.type === "action" && isCopied
+            ? "Copied"
+            : primaryOption.title}
+        </span>
+      </button>
+
+      {resolved.length > 1 ? (
+        <>
+          <button
+            aria-expanded={menuOpen}
+            aria-label="More actions"
+            className="inline-flex items-center self-stretch rounded-r-xl border border-border px-2 transition-colors hover:bg-secondary/25"
+            onClick={toggleMenu}
+            type="button"
+          >
+            <ChevronDownSmallIcon
+              aria-hidden="true"
+              className="size-[18px] text-muted-foreground"
+            />
+          </button>
+          {menuOpen ? (
+            <div className="absolute right-0 top-[calc(100%+0.25rem)] z-50 min-w-[320px] rounded-xl border border-border bg-background p-1 shadow-lg">
+              {resolved.slice(1).map((item) => (
+                <MenuItem
+                  href={item.type === "link" ? item.href : undefined}
+                  key={item.key}
+                  onSelect={
+                    item.type === "action"
+                      ? actionHandlers[item.key]
+                      : closeMenu
+                  }
+                >
+                  <MenuIcon>
+                    {item.type === "action" && copiedId === item.key ? (
+                      <Checkmark1Icon
+                        aria-hidden="true"
+                        className="size-[18px]"
+                      />
+                    ) : (
+                      <item.icon aria-hidden="true" className="size-[18px]" />
+                    )}
+                  </MenuIcon>
+                  <div className="flex-1">
+                    <div className="font-medium">
+                      {item.title}
+                      {item.type === "link" ? <ExternalArrow /> : null}
+                    </div>
+                    <div className="text-xs text-muted-foreground">
+                      {item.description}
+                    </div>
+                  </div>
+                </MenuItem>
+              ))}
+            </div>
+          ) : null}
+        </>
+      ) : null}
+    </div>
+  );
+};
+
+export const ContextualTocItems = ({
+  content,
+  options,
+  title,
+  pagePath,
+}: ContextualMenuProps) => {
+  const context = usePageContext(content, title, pagePath);
+  const resolved = useMemo(
+    () =>
+      resolveOptions(options, context).filter(
+        (item): item is ResolvedOption & { href: string; type: "link" } =>
+          item.type === "link" && Boolean(item.href)
+      ),
+    [context, options]
+  );
+
+  if (!resolved.length) {
+    return null;
+  }
+
+  return (
+    <div className="grid gap-1.5">
+      {resolved.map((item) => (
+        <a
+          className="inline-flex items-center gap-2 rounded-md px-2 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+          href={item.href}
+          key={item.key}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <item.icon aria-hidden="true" className="size-3.5 shrink-0" />
+          <span className="truncate">{item.title}</span>
+        </a>
+      ))}
+    </div>
+  );
+};

package/docs/components/docs/copy-page-menu.tsx

@@ -0,0 +1,255 @@
+"use client";
+
+import { slugify } from "@repo/common";
+import {
+  Checkmark1Icon,
+  ChevronDownSmallIcon,
+  ClaudeaiIcon,
+  CopySimpleIcon,
+  OpenaiIcon,
+} from "blode-icons-react";
+import type React from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+interface CopyPageMenuProps {
+  content?: string;
+  contentUrl?: string;
+  title: string;
+}
+
+const LEADING_H1_REGEX = /^#\s+([^\r\n]+)(?:\r?\n(?:\r?\n)?)?/;
+
+const stripMatchingLeadingH1 = (source: string, title: string) => {
+  const trimmed = source.trimStart();
+  const match = LEADING_H1_REGEX.exec(trimmed);
+  if (!match) {
+    return trimmed.trim();
+  }
+
+  const [headingLine = "", headingTitle = ""] = match;
+  if (slugify(headingTitle) !== slugify(title)) {
+    return trimmed.trim();
+  }
+
+  return trimmed.slice(headingLine.length).trim();
+};
+
+const formatMarkdownForCopy = (source: string, title: string) => {
+  const content = stripMatchingLeadingH1(source, title);
+  if (!content) {
+    return `# ${title}`;
+  }
+
+  return `# ${title}\n\n${content}`;
+};
+
+const MenuItem = ({
+  children,
+  href,
+  onSelect,
+}: {
+  children: React.ReactNode;
+  href?: string;
+  onSelect?: () => void;
+}) =>
+  href ? (
+    <a
+      className="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm transition-colors hover:bg-secondary/25"
+      href={href}
+      onClick={onSelect}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      {children}
+    </a>
+  ) : (
+    <button
+      className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left text-sm transition-colors hover:bg-secondary/25"
+      onClick={onSelect}
+      type="button"
+    >
+      {children}
+    </button>
+  );
+
+const MenuIcon = ({ children }: { children: React.ReactNode }) => (
+  <div className="flex size-8 shrink-0 items-center justify-center rounded-md border border-border">
+    {children}
+  </div>
+);
+
+const ExternalArrow = () => (
+  <svg
+    aria-hidden="true"
+    className="ml-1 inline-block size-3"
+    fill="none"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={2}
+    viewBox="0 0 24 24"
+  >
+    <path d="M7 17L17 7M7 7h10v10" />
+  </svg>
+);
+
+export const CopyPageMenu = ({
+  content,
+  contentUrl,
+  title,
+}: CopyPageMenuProps) => {
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [copied, setCopied] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [pageUrl, setPageUrl] = useState("");
+  const [resolvedContent, setResolvedContent] = useState(content ?? "");
+
+  useEffect(() => {
+    setPageUrl(window.location.href);
+  }, []);
+
+  useEffect(() => {
+    if (content !== undefined) {
+      setResolvedContent(content);
+    }
+  }, [content]);
+
+  useEffect(() => {
+    if (!menuOpen) {
+      return;
+    }
+
+    const handlePointerDown = (event: MouseEvent) => {
+      if (menuRef.current?.contains(event.target as Node)) {
+        return;
+      }
+      setMenuOpen(false);
+    };
+
+    document.addEventListener("mousedown", handlePointerDown);
+    return () => document.removeEventListener("mousedown", handlePointerDown);
+  }, [menuOpen]);
+
+  const closeMenu = useCallback(() => {
+    setMenuOpen(false);
+  }, []);
+
+  const toggleMenu = useCallback(() => {
+    setMenuOpen((current) => !current);
+  }, []);
+
+  const getContent = useCallback(async () => {
+    if (resolvedContent) {
+      return resolvedContent;
+    }
+
+    if (!contentUrl) {
+      return "";
+    }
+
+    const response = await fetch(contentUrl, {
+      headers: {
+        accept: "text/markdown,text/plain;q=0.9,*/*;q=0.8",
+      },
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to load page markdown: ${response.status}`);
+    }
+
+    const nextContent = await response.text();
+    setResolvedContent(nextContent);
+    return nextContent;
+  }, [contentUrl, resolvedContent]);
+
+  const handleCopy = useCallback(async () => {
+    const nextContent = await getContent();
+    const markdown = formatMarkdownForCopy(nextContent, title);
+    await navigator.clipboard.writeText(markdown);
+    setCopied(true);
+    closeMenu();
+    setTimeout(() => setCopied(false), 2000);
+  }, [closeMenu, getContent, title]);
+
+  const chatgptUrl = pageUrl
+    ? `https://chatgpt.com/?hints=search&q=${encodeURIComponent(`Read from ${pageUrl} so I can ask questions about it.`)}`
+    : "#";
+  const claudeUrl = pageUrl
+    ? `https://claude.ai/new?q=${encodeURIComponent(`Read from ${pageUrl} so I can ask questions about it.`)}`
+    : "#";
+
+  return (
+    <div className="relative flex shrink-0 items-center" ref={menuRef}>
+      <button
+        className="inline-flex items-center gap-2 rounded-l-xl border border-r-0 border-border px-3 py-1.5 text-sm font-medium transition-colors hover:bg-secondary/25"
+        onClick={handleCopy}
+        type="button"
+      >
+        {copied ? (
+          <Checkmark1Icon aria-hidden="true" className="size-[18px]" />
+        ) : (
+          <CopySimpleIcon aria-hidden="true" className="size-[18px]" />
+        )}
+        <span>{copied ? "Copied" : "Copy page"}</span>
+      </button>
+
+      <button
+        aria-expanded={menuOpen}
+        aria-label="More actions"
+        className="inline-flex items-center self-stretch rounded-r-xl border border-border px-2 transition-colors hover:bg-secondary/25"
+        onClick={toggleMenu}
+        type="button"
+      >
+        <ChevronDownSmallIcon
+          aria-hidden="true"
+          className="size-[18px] text-muted-foreground"
+        />
+      </button>
+
+      {menuOpen ? (
+        <div className="absolute right-0 top-[calc(100%+0.25rem)] z-50 min-w-[280px] rounded-xl border border-border bg-background p-1 shadow-lg">
+          <MenuItem onSelect={handleCopy}>
+            <MenuIcon>
+              <CopySimpleIcon aria-hidden="true" className="size-[18px]" />
+            </MenuIcon>
+            <div>
+              <div className="font-medium">Copy page</div>
+              <div className="text-xs text-muted-foreground">
+                Copy page as Markdown for LLMs
+              </div>
+            </div>
+          </MenuItem>
+
+          <MenuItem href={chatgptUrl} onSelect={closeMenu}>
+            <MenuIcon>
+              <OpenaiIcon aria-hidden="true" className="size-[18px]" />
+            </MenuIcon>
+            <div className="flex-1">
+              <div className="font-medium">
+                Open in ChatGPT
+                <ExternalArrow />
+              </div>
+              <div className="text-xs text-muted-foreground">
+                Ask questions about this page
+              </div>
+            </div>
+          </MenuItem>
+
+          <MenuItem href={claudeUrl} onSelect={closeMenu}>
+            <MenuIcon>
+              <ClaudeaiIcon aria-hidden="true" className="size-[18px]" />
+            </MenuIcon>
+            <div className="flex-1">
+              <div className="font-medium">
+                Open in Claude
+                <ExternalArrow />
+              </div>
+              <div className="text-xs text-muted-foreground">
+                Ask questions about this page
+              </div>
+            </div>
+          </MenuItem>
+        </div>
+      ) : null}
+    </div>
+  );
+};