@raystack/chronicle 0.7.3 → 0.8.0

package/src/themes/default/Layout.module.css

@@ -226,3 +226,56 @@
 .page {
   padding: var(--rs-space-2) 0;
 }
+
+.apiGroup {
+  margin-top: var(--rs-space-8);
+  width: 100%;
+}
+
+.apiGroup:first-child {
+  margin-top: 0;
+}
+
+.apiGroupLabel {
+  font-size: var(--rs-font-size-small);
+  font-weight: var(--rs-font-weight-medium);
+  line-height: var(--rs-line-height-small);
+  letter-spacing: var(--rs-letter-spacing-small);
+  color: var(--rs-color-foreground-base-secondary);
+  padding: 0 var(--rs-space-3);
+}
+
+.apiItem {
+  padding: var(--rs-space-3);
+  border-radius: var(--rs-radius-2);
+  text-decoration: none;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.apiItem:hover {
+  background: var(--rs-color-background-neutral-secondary);
+}
+
+.apiItemActive {
+  background: var(--rs-color-background-neutral-secondary);
+}
+
+.apiItemName {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--rs-font-size-small);
+  font-weight: var(--rs-font-weight-medium);
+  line-height: var(--rs-line-height-small);
+  letter-spacing: var(--rs-letter-spacing-small);
+  color: var(--rs-color-foreground-base-primary);
+}
+
+.apiMethodText {
+  font-family: var(--rs-font-mono);
+  font-size: var(--rs-font-size-mono-mini);
+  line-height: var(--rs-line-height-mini);
+  flex-shrink: 0;
+}

package/src/themes/default/Layout.tsx

@@ -6,18 +6,22 @@ import {
   DocumentTextIcon,
   Squares2X2Icon
 } from '@heroicons/react/24/outline';
-import { Flex, IconButton, Sidebar } from '@raystack/apsara';
+import { Flex, IconButton, Button, Sidebar } from '@raystack/apsara';
+import { PlayIcon } from '@radix-ui/react-icons';
 import { cx } from 'class-variance-authority';
-import { useEffect, useMemo, useRef } from 'react';
+import { useState, useEffect, useMemo, useRef } from 'react';
 import { Link as RouterLink, useLocation, useNavigate } from 'react-router';
+import type { OpenAPIV3 } from 'openapi-types';
 import { MethodBadge } from '@/components/api/method-badge';
+import { useApiOperation } from '@/lib/use-api-operation';
+import { PlaygroundDialog } from '@/components/api/playground-dialog';
 import { ClientThemeSwitcher } from '@/components/ui/client-theme-switcher';
 import { Search } from '@/components/ui/search';
 import { Breadcrumbs } from '@/components/ui/breadcrumbs';
 import { getLandingEntries } from '@/lib/config';
 import { getActiveContentDir } from '@/lib/navigation';
 import { usePageContext } from '@/lib/page-context';
-import type { Node } from 'fumadocs-core/page-tree';
+import type { Node, Root } from 'fumadocs-core/page-tree';
 import type { ThemeLayoutProps } from '@/types';
 import styles from './Layout.module.css';
 import { OpenInAI } from './OpenInAI';
@@ -67,7 +71,12 @@ export function Layout({
   const isApiRoute = pathname === '/apis' || pathname.startsWith('/apis/');
   const isApiBase = (basePath: string) =>
     pathname === basePath || pathname.startsWith(`${basePath}/`);
-  const { prev, next } = page ?? { prev: null, next: null };
+  const docNav = page ?? { prev: null, next: null };
+  const apiNav = useMemo(() => {
+    if (!isApiRoute) return { prev: null, next: null };
+    return getApiPrevNext(pathname, tree);
+  }, [isApiRoute, pathname, tree]);
+  const { prev, next } = isApiRoute ? apiNav : docNav;
 
   const contentEntries = getLandingEntries(config, version.dir);
   const activeContentDir = getActiveContentDir(pathname, config);
@@ -151,11 +160,19 @@ export function Layout({
                 </div>
               ) : null}
               {tree.children.map((item, i) => (
-                <SidebarNode
-                  key={item.type === 'page' ? item.url : (item.name?.toString() ?? i)}
-                  item={item}
-                  pathname={pathname}
-                />
+                isApiRoute ? (
+                  <ApiSidebarNode
+                    key={item.type === 'page' ? item.url : (item.name?.toString() ?? i)}
+                    item={item}
+                    pathname={pathname}
+                  />
+                ) : (
+                  <SidebarNode
+                    key={item.type === 'page' ? item.url : (item.name?.toString() ?? i)}
+                    item={item}
+                    pathname={pathname}
+                  />
+                )
               ))}
             </Sidebar.Main>
             {config.versions?.length ? (
@@ -188,9 +205,13 @@ export function Layout({
                       <ArrowRightIcon width={14} height={14} />
                     </IconButton>
                   </Flex>
-                  {!isApiRoute && <Breadcrumbs slug={slug} tree={tree} />}
+                  <Breadcrumbs slug={slug} tree={tree} />
+                </Flex>
+                <Flex align='center' gap='small'>
+                  {isApiRoute && <TestRequestButton />}
+                  {isApiRoute && <ViewDocsButton />}
+                  <OpenInAI />
                 </Flex>
-                <OpenInAI />
               </nav>
               <main className={cx(styles.content, classNames?.content)}>
                 {children}
@@ -262,3 +283,133 @@ function SidebarNode({
     </Sidebar.Item>
   );
 }
+
+const methodColorMap: Record<string, string> = {
+  'method-get': 'var(--rs-color-foreground-success-primary)',
+  'method-post': 'var(--rs-color-foreground-accent-primary)',
+  'method-put': 'var(--rs-color-foreground-attention-primary)',
+  'method-delete': 'var(--rs-color-foreground-danger-primary)',
+  'method-patch': 'var(--rs-color-foreground-base-secondary)',
+};
+
+const methodLabelMap: Record<string, string> = {
+  'method-get': 'GET',
+  'method-post': 'POST',
+  'method-put': 'PUT',
+  'method-delete': 'DEL',
+  'method-patch': 'PATCH',
+};
+
+function ApiSidebarNode({ item, pathname }: { item: Node; pathname: string }) {
+  if (item.type === 'separator') return null;
+
+  if (item.type === 'folder') {
+    return (
+      <Flex direction='column' gap='small' className={styles.apiGroup}>
+        <span className={styles.apiGroupLabel}>{item.name?.toString()}</span>
+        <Flex direction='column'>
+          {item.children.map((child, i) => (
+            <ApiSidebarNode
+              key={child.type === 'page' ? child.url : (child.name?.toString() ?? i)}
+              item={child}
+              pathname={pathname}
+            />
+          ))}
+        </Flex>
+      </Flex>
+    );
+  }
+
+  const isActive = pathname === item.url;
+  const href = item.url ?? '#';
+  const iconKey = typeof item.icon === 'string' ? item.icon : '';
+  const methodLabel = methodLabelMap[iconKey];
+  const methodColor = methodColorMap[iconKey];
+
+  return (
+    <Flex
+      align='center'
+      gap='small'
+      className={`${styles.apiItem} ${isActive ? styles.apiItemActive : ''}`}
+      render={<RouterLink to={href} />}
+    >
+      <span className={styles.apiItemName}>{item.name}</span>
+      {methodLabel && (
+        <span className={styles.apiMethodText} style={{ color: methodColor }}>
+          {methodLabel}
+        </span>
+      )}
+    </Flex>
+  );
+}
+
+function TestRequestButton() {
+  const match = useApiOperation();
+  const [open, setOpen] = useState(false);
+  if (!match) return null;
+
+  return (
+    <>
+      <Button
+        variant='outline'
+        color='neutral'
+        size='small'
+        leadingIcon={<PlayIcon width={12} height={12} />}
+        onClick={() => setOpen(true)}
+      >
+        Test request
+      </Button>
+      <PlaygroundDialog
+        key={`${match.spec.name}-${match.path}-${match.method}`}
+        open={open}
+        onOpenChange={setOpen}
+        method={match.method}
+        path={match.path}
+        operation={match.operation}
+        serverUrl={match.spec.server.url}
+        specName={match.spec.name}
+        auth={match.spec.auth}
+        document={match.spec.document}
+      />
+    </>
+  );
+}
+
+function ViewDocsButton() {
+  const match = useApiOperation();
+  if (!match) return null;
+
+  const operation = match.operation as OpenAPIV3.OperationObject;
+  const docsUrl = operation.externalDocs?.url ?? match.spec.document.externalDocs?.url;
+  if (!docsUrl) return null;
+
+  return (
+    <Button
+      variant='outline'
+      color='neutral'
+      size='small'
+      leadingIcon={<DocumentTextIcon width={12} height={12} />}
+      onClick={() => window.open(docsUrl, '_blank', 'noopener,noreferrer')}
+    >
+      View documentation
+    </Button>
+  );
+}
+
+function getApiPrevNext(pathname: string, tree: Root): { prev: { url: string; title: string } | null; next: { url: string; title: string } | null } {
+  const pages: { url: string; title: string }[] = [];
+  function collect(node: Node) {
+    if (node.type === 'page') {
+      pages.push({ url: node.url, title: node.name?.toString() ?? '' });
+    } else if (node.type === 'folder') {
+      for (const child of node.children) collect(child);
+    }
+  }
+  for (const child of tree.children) collect(child);
+
+  const idx = pages.findIndex(p => p.url === pathname);
+  return {
+    prev: idx > 0 ? pages[idx - 1] : null,
+    next: idx >= 0 && idx < pages.length - 1 ? pages[idx + 1] : null,
+  };
+}

package/src/themes/paper/Page.module.css

@@ -1,6 +1,6 @@
 .main {
   flex: 1;
-  width: 90%;
+  width: 100%;
   max-width: calc(1024px + var(--rs-space-17));
   margin: 0 auto;
   padding-top: var(--rs-space-12);
@@ -137,8 +137,8 @@
   box-shadow:
     0 1px 3px rgba(0, 0, 0, 0.08),
     0 4px 12px rgba(0, 0, 0, 0.04);
-  margin-bottom: var(--rs-space-9);
   min-height: calc(100vh - var(--rs-space-12));
+  margin: 0 var(--rs-space-7) var(--rs-space-9) var(--rs-space-7);
 }
 
 .content h1,
@@ -225,5 +225,10 @@
 }
 
 .loader {
+    flex: 1;
     margin-bottom: var(--rs-space-3)
 }
+
+.navbarLoaderWrapper {
+    width: 30%;
+}

package/src/themes/paper/Page.tsx

@@ -1,12 +1,14 @@
 import {
-  ArrowLeftIcon,
-  ArrowRightIcon,
-  AdjustmentsHorizontalIcon,
   EyeIcon,
   SunIcon,
   MoonIcon,
-  XMarkIcon,
 } from '@heroicons/react/24/outline';
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  MixerHorizontalIcon,
+  Cross2Icon
+} from '@radix-ui/react-icons'
 import { IconButton, useTheme } from '@raystack/apsara';
 import { useEffect, useMemo, useState } from 'react';
 import { Link as RouterLink, useLocation } from 'react-router';
@@ -83,12 +85,12 @@ export function Page({ page, tree }: ThemePageProps) {
                   </IconButton>
                 )}
                 <IconButton size={2} onClick={() => setSettingsOpen(false)} aria-label='Close settings'>
-                  <XMarkIcon width={14} height={14} />
+                  <Cross2Icon width={14} height={14} />
                 </IconButton>
               </>
             ) : (
               <IconButton size={2} onClick={() => setSettingsOpen(true)} aria-label='Open settings'>
-                <AdjustmentsHorizontalIcon width={14} height={14} />
+                <MixerHorizontalIcon width={14} height={14} />
               </IconButton>
             )}
           </div>

package/src/themes/paper/Skeleton.tsx

@@ -1,9 +1,18 @@
 import { Skeleton } from '@raystack/apsara';
 import styles from './Page.module.css';
+import { cx } from 'class-variance-authority';
 
 export function PageSkeleton() {
   return (
     <main className={styles.main}>
+      <div className={styles.navbar}>
+        <div className={cx(styles.navLeft, styles.navbarLoaderWrapper)}>
+          <Skeleton highlightColor="var(--rs-color-foreground-base-emphasis)" containerClassName={styles.loader}/>
+        </div>
+        <div className={cx(styles.navRight, styles.navbarLoaderWrapper)}>
+          <Skeleton highlightColor="var(--rs-color-foreground-base-emphasis)" containerClassName={styles.loader}/>
+        </div>
+      </div>
     <div className={styles.content}>
         <header className={styles.articleHeader}>
           <Skeleton width="50%" height="16px" containerClassName={styles.headerLoader}/>

package/src/types/config.ts

@@ -86,6 +86,7 @@ const contentEntrySchema = z.object({
   label: z.string().min(1),
   description: z.string().optional(),
   icon: z.string().optional(),
+  index_page: z.string().optional(),
 })
 
 // Variants map to Apsara Badge color prop.

package/src/components/api/code-snippets.module.css

@@ -1,7 +0,0 @@
-.snippets {
-  width: 100%;
-}
-
-.snippets :global([class*="code-block-module_header"]) {
-  justify-content: space-between;
-}

package/src/components/api/code-snippets.tsx

@@ -1,76 +0,0 @@
-"use client";
-
-import { useMemo, useState } from "react";
-import { CodeBlock } from "@raystack/apsara";
-import {
-  generateCurl,
-  generatePython,
-  generateGo,
-  generateTypeScript,
-} from "@/lib/snippet-generators";
-import styles from "./code-snippets.module.css";
-
-interface CodeSnippetsProps {
-  method: string;
-  url: string;
-  headers: Record<string, string>;
-  body?: string;
-}
-
-const languages = [
-  { value: "curl", label: "cURL", lang: "curl", generate: generateCurl },
-  {
-    value: "python",
-    label: "Python",
-    lang: "python",
-    generate: generatePython,
-  },
-  { value: "go", label: "Go", lang: "go", generate: generateGo },
-  {
-    value: "typescript",
-    label: "TypeScript",
-    lang: "typescript",
-    generate: generateTypeScript,
-  },
-];
-
-export function CodeSnippets({
-  method,
-  url,
-  headers,
-  body,
-}: CodeSnippetsProps) {
-  const opts = { method, url, headers, body };
-  const [selected, setSelected] = useState("curl");
-  const current = languages.find((l) => l.value === selected) ?? languages[0];
-
-  const code = useMemo(
-    () => current.generate(opts),
-    [selected, method, url, headers, body],
-  );
-
-  return (
-    <CodeBlock
-      value={selected}
-      onValueChange={setSelected}
-      className={styles.snippets}
-    >
-      <CodeBlock.Header>
-        <CodeBlock.LanguageSelect>
-          <CodeBlock.LanguageSelectTrigger />
-          <CodeBlock.LanguageSelectContent>
-            {languages.map((l) => (
-              <CodeBlock.LanguageSelectItem key={l.value} value={l.value}>
-                {l.label}
-              </CodeBlock.LanguageSelectItem>
-            ))}
-          </CodeBlock.LanguageSelectContent>
-        </CodeBlock.LanguageSelect>
-        <CodeBlock.CopyButton />
-      </CodeBlock.Header>
-      <CodeBlock.Content>
-        <CodeBlock.Code language={current.lang}>{code}</CodeBlock.Code>
-      </CodeBlock.Content>
-    </CodeBlock>
-  );
-}

package/src/components/api/endpoint-page.module.css

@@ -1,58 +0,0 @@
-.layout {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--rs-space-9);
-  padding: var(--rs-space-7);
-  max-width: 1400px;
-}
-
-.left {
-  gap: var(--rs-space-7);
-  min-width: 0;
-}
-
-.right {
-  gap: var(--rs-space-5);
-  min-width: 0;
-}
-
-.title {
-  margin: 0;
-}
-
-.description {
-  color: var(--rs-color-foreground-base-secondary);
-}
-
-.methodPath {
-  gap: var(--rs-space-3);
-  padding: var(--rs-space-4) var(--rs-space-5);
-  border: 1px solid var(--rs-color-border-base-primary);
-  border-radius: 8px;
-  background: var(--rs-color-background-base-secondary);
-  overflow: hidden;
-}
-
-.path {
-  font-family: monospace;
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.tryButton {
-  margin-left: auto;
-  flex-shrink: 0;
-}
-
-@media (max-width: 900px) {
-  .layout {
-    grid-template-columns: 1fr;
-  }
-
-  .right {
-    position: static;
-  }
-}