2anki
diff --git a/‎web/src/pages/DocsPage/Callout.tsx‎
Lines changed: 23 additions & 0 deletions b/‎web/src/pages/DocsPage/Callout.tsx‎
Lines changed: 23 additions & 0 deletions
diff --git a/‎web/src/pages/DocsPage/CodeBlock.tsx‎
Lines changed: 47 additions & 0 deletions b/‎web/src/pages/DocsPage/CodeBlock.tsx‎
Lines changed: 47 additions & 0 deletions
diff --git a/‎web/src/pages/DocsPage/DocContent.tsx‎
Lines changed: 75 additions & 7 deletions b/‎web/src/pages/DocsPage/DocContent.tsx‎
Lines changed: 75 additions & 7 deletions
diff --git a/‎web/src/pages/DocsPage/DocsDrawer.tsx‎
Lines changed: 64 additions & 0 deletions b/‎web/src/pages/DocsPage/DocsDrawer.tsx‎
Lines changed: 64 additions & 0 deletions
diff --git a/‎web/src/pages/DocsPage/DocsHome.test.tsx‎
Lines changed: 48 additions & 0 deletions b/‎web/src/pages/DocsPage/DocsHome.test.tsx‎
Lines changed: 48 additions & 0 deletions
@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import styles from './DocsPage.module.css';
+
+export type CalloutVariant = 'note' | 'tip' | 'warning';
+
+interface CalloutProps {
+  variant: CalloutVariant;
+  children: ReactNode;
+}
+
+const variantClass: Record<CalloutVariant, string> = {
+  note: styles.calloutNote,
+  tip: styles.calloutTip,
+  warning: styles.calloutWarning,
+};
+
+export function Callout({ variant, children }: Readonly<CalloutProps>) {
+  return (
+    <aside className={`${styles.callout} ${variantClass[variant]}`} role="note">
+      {children}
+    </aside>
+  );
+}
@@ -0,0 +1,47 @@
+import { HTMLAttributes, ReactNode, useState } from 'react';
+import styles from './DocsPage.module.css';
+
+type PreProps = HTMLAttributes<HTMLPreElement> & { children?: ReactNode };
+
+function getTextContent(node: ReactNode): string {
+  if (node == null || typeof node === 'boolean') return '';
+  if (typeof node === 'string' || typeof node === 'number') return String(node);
+  if (Array.isArray(node)) return node.map(getTextContent).join('');
+  if (typeof node === 'object' && 'props' in node) {
+    const props = node.props as { children?: ReactNode } | null;
+    if (props && 'children' in props) {
+      return getTextContent(props.children);
+    }
+  }
+  return '';
+}
+
+export function CodeBlock({ children, ...rest }: Readonly<PreProps>) {
+  const [copied, setCopied] = useState(false);
+
+  const onCopy = async () => {
+    const text = getTextContent(children);
+    if (!text) return;
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    } catch {
+      setCopied(false);
+    }
+  };
+
+  return (
+    <div className={styles.codeWrapper}>
+      <button
+        type="button"
+        className={styles.copyButton}
+        onClick={onCopy}
+        aria-label="Copy code to clipboard"
+      >
+        {copied ? 'Copied' : 'Copy'}
+      </button>
+      <pre {...rest}>{children}</pre>
+    </div>
+  );
+}
@@ -1,11 +1,18 @@
 import { AnchorHTMLAttributes, useEffect, useMemo } from 'react';
-import { Link, useLocation, useNavigate } from 'react-router-dom';
+import {
+  Link,
+  Navigate,
+  useLocation,
+  useNavigate,
+} from 'react-router-dom';
 import ReactMarkdown, { Components } from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import rehypeRaw from 'rehype-raw';
 import rehypeSlug from 'rehype-slug';
-import { loadDoc } from './loader';
-import { findAdjacent } from './sidebar';
+import { loadDoc, resolveSlug } from './loader';
+import { findAdjacent, redirects } from './sidebar';
+import { CalloutVariant } from './Callout';
+import { CodeBlock } from './CodeBlock';
 import styles from './DocsPage.module.css';
 
 interface DocContentProps {
@@ -58,15 +65,68 @@ function DocsAnchor({ href, children, ...rest }: AnchorProps) {
   );
 }
 
-const markdownComponents: Components = { a: DocsAnchor };
+const CALLOUT_VARIANT_CLASS: Record<CalloutVariant, string> = {
+  note: 'callout-note',
+  tip: 'callout-tip',
+  warning: 'callout-warning',
+};
+
+function parseCalloutOpen(line: string): CalloutVariant | null {
+  if (!line.startsWith(':::')) return null;
+  const rest = line.slice(3).trim();
+  return Object.hasOwn(CALLOUT_VARIANT_CLASS, rest)
+    ? (rest as CalloutVariant)
+    : null;
+}
+
+function isCalloutClose(line: string): boolean {
+  return line.trim() === ':::';
+}
+
+function transformCallouts(body: string): string {
+  const lines = body.split('\n');
+  const out: string[] = [];
+  let i = 0;
+  while (i < lines.length) {
+    const variant = parseCalloutOpen(lines[i]);
+    if (variant == null) {
+      out.push(lines[i]);
+      i++;
+      continue;
+    }
+    let close = i + 1;
+    while (close < lines.length && !isCalloutClose(lines[close])) close++;
+    if (close >= lines.length) {
+      out.push(lines[i]);
+      i++;
+      continue;
+    }
+    const inner = lines.slice(i + 1, close).join('\n').trim();
+    out.push(
+      `<aside class="callout ${CALLOUT_VARIANT_CLASS[variant]}">`,
+      '',
+      inner,
+      '',
+      '</aside>',
+    );
+    i = close + 1;
+  }
+  return out.join('\n');
+}
+
+const markdownComponents: Components = {
+  a: DocsAnchor,
+  pre: CodeBlock as Components['pre'],
+};
 const remarkPlugins = [remarkGfm];
 const rehypePlugins = [rehypeRaw, rehypeSlug];
 
-const EDIT_BASE = 'https://github.com/2anki/web/edit/main/';
+const EDIT_BASE = 'https://github.com/2anki/server/edit/main/';
 
 export function DocContent({ slug }: Readonly<DocContentProps>) {
   const doc = loadDoc(slug);
   const { hash } = useLocation();
+  const resolvedSlug = resolveSlug(slug);
 
   useEffect(() => {
     if (!hash) {
@@ -78,7 +138,14 @@ export function DocContent({ slug }: Readonly<DocContentProps>) {
     if (el) el.scrollIntoView();
   }, [slug, hash]);
 
-  const { prev, next } = useMemo(() => findAdjacent(slug), [slug]);
+  const { prev, next } = useMemo(
+    () => findAdjacent(resolvedSlug),
+    [resolvedSlug],
+  );
+
+  if (slug !== resolvedSlug && Object.hasOwn(redirects, slug)) {
+    return <Navigate to={`/documentation/${resolvedSlug}`} replace />;
+  }
 
   if (!doc) {
     return (
@@ -94,6 +161,7 @@ export function DocContent({ slug }: Readonly<DocContentProps>) {
 
   const { frontmatter, body, sourcePath } = doc;
   const editUrl = `${EDIT_BASE}${sourcePath}`;
+  const transformedBody = transformCallouts(body);
 
   return (
     <article className={styles.article}>
@@ -112,7 +180,7 @@ export function DocContent({ slug }: Readonly<DocContentProps>) {
           rehypePlugins={rehypePlugins}
           components={markdownComponents}
         >
-          {body}
+          {transformedBody}
         </ReactMarkdown>
       </div>
 
 
@@ -0,0 +1,64 @@
+import { useEffect } from 'react';
+import { DocsSidebar } from './DocsSidebar';
+import styles from './DocsPage.module.css';
+
+interface DocsDrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  activeSlug: string;
+}
+
+export function DocsDrawer({
+  isOpen,
+  onClose,
+  activeSlug,
+}: Readonly<DocsDrawerProps>) {
+  useEffect(() => {
+    if (!isOpen) return undefined;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) return undefined;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className={styles.drawerOverlay} role="dialog" aria-modal="true">
+      <button
+        type="button"
+        className={styles.drawerBackdrop}
+        onClick={onClose}
+        aria-label="Close menu"
+      />
+      <div className={styles.drawer}>
+        <div className={styles.drawerHeader}>
+          <span className={styles.drawerTitle}>Documentation</span>
+          <button
+            type="button"
+            className={styles.drawerClose}
+            onClick={onClose}
+            aria-label="Close menu"
+          >
+            ×
+          </button>
+        </div>
+        <DocsSidebar
+          isDrawer
+          onNavigate={onClose}
+          activeSlug={activeSlug}
+        />
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,48 @@
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { describe, expect, it } from 'vitest';
+import { DocsHome } from './DocsHome';
+
+function renderHome() {
+  return render(
+    <MemoryRouter>
+      <DocsHome />
+    </MemoryRouter>,
+  );
+}
+
+describe('DocsHome', () => {
+  it('renders the headline and tagline', () => {
+    renderHome();
+    expect(
+      screen.getByRole('heading', { level: 1, name: /2anki documentation/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/simplest way to turn what you're studying/i),
+    ).toBeInTheDocument();
+  });
+
+  it('shows the primary Connect Notion CTA', () => {
+    renderHome();
+    const cta = screen.getByRole('link', { name: /Connect Notion in 5 min/i });
+    expect(cta).toHaveAttribute(
+      'href',
+      '/documentation/start-here/connect-notion',
+    );
+  });
+
+  it('lists the four start-here cards linking to the right slugs', () => {
+    const { container } = renderHome();
+    const hrefs = Array.from(
+      container.querySelectorAll('a[href^="/documentation/start-here/"]'),
+    ).map((a) => a.getAttribute('href'));
+    expect(hrefs).toEqual(
+      expect.arrayContaining([
+        '/documentation/start-here/what-is-2anki',
+        '/documentation/start-here/connect-notion',
+        '/documentation/start-here/upload-a-file',
+        '/documentation/start-here/open-in-anki',
+      ]),
+    );
+  });
+});