@raystack/chronicle 0.6.1 → 0.7.1

package/src/pages/ApiLayout.tsx

@@ -1,6 +1,5 @@
 import { cx } from 'class-variance-authority';
 import type { ReactNode } from 'react';
-import { Search } from '@/components/ui/search';
 import { buildApiPageTree } from '@/lib/api-routes';
 import { usePageContext } from '@/lib/page-context';
 import { getTheme } from '@/themes/registry';
@@ -26,7 +25,6 @@ export function ApiLayout({ children }: ApiLayoutProps) {
         content: styles.content
       }}
     >
-      <Search className={styles.hiddenSearch} />
       {children}
     </Layout>
   );

package/src/pages/LandingPage.module.css

@@ -1,56 +1,169 @@
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--rs-space-8);
-  padding: var(--rs-space-9) var(--rs-space-7);
-  max-width: 960px;
-  margin: 0 auto;
+  padding: var(--rs-space-12) var(--rs-space-9);
+  width: 100%;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  padding-bottom: var(--rs-space-10);
+  border-bottom: 0.5px solid var(--rs-color-border-base-primary);
 }
 
 .title {
-  font-size: var(--rs-font-size-h3);
-  font-weight: 600;
-  color: var(--rs-color-foreground-base-primary);
+  flex: 1;
+  font-family: var(--paper-font-mono, inherit);
+  font-size: 64px;
+  line-height: 1.1;
+  color: var(--rs-color-foreground-accent-primary);
+  text-transform: uppercase;
   margin: 0;
+  font-weight: var(--rs-font-weight-regular);
 }
 
 .description {
+  width: 385px;
+  flex-shrink: 0;
+  font-family: var(--paper-font-body, inherit);
   font-size: var(--rs-font-size-regular);
-  color: var(--rs-color-foreground-base-secondary);
+  line-height: 1.4;
+  color: var(--rs-color-foreground-base-primary);
   margin: 0;
 }
 
 .grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: var(--rs-space-6);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--rs-space-7);
+  margin-top: var(--rs-space-9);
 }
 
 .card {
   display: flex;
   flex-direction: column;
-  gap: var(--rs-space-3);
-  padding: var(--rs-space-6);
-  border: 1px solid var(--rs-color-border-base-primary);
-  border-radius: var(--rs-radius-3);
+  gap: var(--rs-space-7);
+  padding: var(--rs-space-2);
   text-decoration: none;
   color: inherit;
-  background: var(--rs-color-background-base-primary);
-  transition: border-color 0.15s ease, background 0.15s ease;
+  width: 360px;
+}
+
+.card:hover .cardImage {
+  border-color: var(--rs-color-foreground-accent-primary);
+}
+
+.cardImage {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  aspect-ratio: 1.05;
+  min-height: 280px;
+  max-width: 360px;
+  background: var(--rs-color-background-accent-secondary);
+  border: 1px solid var(--rs-color-foreground-accent-primary);
+  overflow: hidden;
+  transition: border-color 0.15s ease;
+}
+
+.cardImage::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image:
+    radial-gradient(circle, var(--rs-color-foreground-accent-primary) 1px, transparent 1px);
+  background-size: 10px 10px;
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+.cardImageLabel {
+  position: absolute;
+  font-family: var(--paper-font-mono, monospace);
+  font-size: var(--rs-font-size-micro);
+  text-transform: uppercase;
+  color: var(--rs-color-foreground-base-secondary);
+  background: var(--rs-color-background-accent-secondary);
+  padding: var(--rs-space-1);
+  white-space: nowrap;
+}
+
+.cardImageLabelTop {
+  top: 19px;
+  left: -1px;
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
 }
 
-.card:hover {
-  border-color: var(--rs-color-border-accent-primary);
-  background: var(--rs-color-background-neutral-secondary);
+.cardImageLabelRight {
+  bottom: 19px;
+  right: -1px;
+  writing-mode: vertical-rl;
+}
+
+.cardIcon {
+  width: 90%;
+  height: 90%;
+  min-width: 64px;
+  min-height: 64px;
+  color: var(--rs-color-foreground-accent-primary);
+  opacity: 0.3;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.card:hover .cardIcon {
+  opacity: 0.5;
+  transform: scale(1.05);
+}
+
+.card:hover .cardImage {
+  background: var(--rs-color-background-accent-primary);
+}
+
+.cardBody {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rs-space-3);
+  padding-bottom: var(--rs-space-4);
 }
 
 .cardLabel {
+  font-family: var(--paper-font-mono, inherit);
   font-size: var(--rs-font-size-large);
-  font-weight: 500;
+  line-height: 1.4;
+  text-transform: uppercase;
+  color: var(--rs-color-foreground-base-primary);
 }
 
-.cardHref {
+.cardDescription {
+  font-family: var(--paper-font-body, inherit);
   font-size: var(--rs-font-size-small);
-  color: var(--rs-color-foreground-base-secondary);
-  font-family: var(--rs-font-family-mono);
+  line-height: 1.4;
+  color: var(--rs-color-foreground-base-primary);
+}
+
+@media (max-width: 768px) {
+  .header {
+    flex-direction: column;
+    gap: var(--rs-space-5);
+  }
+
+  .title {
+    font-size: var(--rs-font-size-t4);
+  }
+
+  .description {
+    width: 100%;
+  }
+
+  .card {
+    width: 100%;
+  }
+
+  .cardImage {
+    max-width: 100%;
+  }
 }

package/src/pages/LandingPage.tsx

@@ -1,3 +1,4 @@
+import { FolderIcon } from '@heroicons/react/24/outline';
 import { Link as RouterLink } from 'react-router';
 import { getLandingEntries } from '@/lib/config';
 import { usePageContext } from '@/lib/page-context';
@@ -13,15 +14,30 @@ export function LandingPage() {
 
   return (
     <div className={styles.root}>
-      <h1 className={styles.title}>{heading}</h1>
-      {config.site.description ? (
-        <p className={styles.description}>{config.site.description}</p>
-      ) : null}
+      <div className={styles.header}>
+        <h1 className={styles.title}>{heading}</h1>
+        {config.site.description ? (
+          <p className={styles.description}>{config.site.description}</p>
+        ) : null}
+      </div>
       <div className={styles.grid}>
-        {entries.map((entry) => (
+        {entries.map((entry, i) => (
           <RouterLink key={entry.href} to={entry.href} className={styles.card}>
-            <span className={styles.cardLabel}>{entry.label}</span>
-            <span className={styles.cardHref}>{entry.href}</span>
+            <div className={styles.cardImage} aria-hidden='true'>
+              <span className={`${styles.cardImageLabel} ${styles.cardImageLabelTop}`}>
+                Fig_{String(i + 1).padStart(3, '0')}
+              </span>
+              <span className={`${styles.cardImageLabel} ${styles.cardImageLabelRight}`}>
+                [ {entry.label} ]
+              </span>
+              <FolderIcon className={styles.cardIcon} />
+            </div>
+            <div className={styles.cardBody}>
+              <span className={styles.cardLabel}>{entry.label}</span>
+              {entry.description ? (
+                <span className={styles.cardDescription}>{entry.description}</span>
+              ) : null}
+            </div>
           </RouterLink>
         ))}
       </div>

package/src/server/api/apis-proxy.ts

@@ -51,11 +51,11 @@ export default defineHandler(async event => {
       ? await response.json()
       : await response.text();
 
-    return {
+    return Response.json({
       status: response.status,
       statusText: response.statusText,
       body: responseBody
-    };
+    });
   } catch (error) {
     const message =
       error instanceof Error

package/src/server/api/health.ts

@@ -1,5 +1,5 @@
 import { defineHandler } from 'nitro';
 
 export default defineHandler(() => {
-  return { status: 'ok' };
+  return Response.json({ status: 'ok' });
 });

package/src/server/api/page.ts

@@ -12,11 +12,11 @@ export default defineHandler(async event => {
 
   const nav = await getPageNav(slug);
 
-  return {
+  return Response.json({
     frontmatter: extractFrontmatter(page, slug[slug.length - 1]),
     relativePath: getRelativePath(page),
     originalPath: getOriginalPath(page),
     prev: nav.prev,
     next: nav.next,
-  };
+  });
 });

package/src/server/api/search.ts

@@ -125,7 +125,7 @@ export default defineHandler(async event => {
 
   if (!query) {
     const docs = await getDocs(ctx);
-    return docs
+    return Response.json(docs
       .filter(d => d.type === 'page')
       .slice(0, 8)
       .map(d => ({
@@ -133,13 +133,13 @@ export default defineHandler(async event => {
         url: d.url,
         type: d.type,
         content: d.title
-      }));
+      })));
   }
 
-  return index.search(query).map(r => ({
+  return Response.json(index.search(query).map(r => ({
     id: r.id,
     url: r.url,
     type: r.type,
     content: r.title
-  }));
+  })));
 });

package/src/server/api/specs.ts

@@ -15,7 +15,7 @@ export default defineHandler(async event => {
   }
 
   const apiConfigs = getApiConfigsForVersion(config, versionDir);
-  if (!apiConfigs.length) return [];
+  if (!apiConfigs.length) return Response.json([]);
 
-  return loadApiSpecs(apiConfigs);
+  return Response.json(await loadApiSpecs(apiConfigs));
 });

package/src/server/entry-server.tsx

@@ -54,7 +54,10 @@ export default {
     const pageData = page
       ? {
           slug: pageSlug,
-          frontmatter: extractFrontmatter(page, pageSlug[pageSlug.length - 1]),
+          frontmatter: {
+            ...extractFrontmatter(page, pageSlug[pageSlug.length - 1]),
+            _readingTime: mdxModule?._readingTime,
+          },
           content: mdxModule?.default
             ? React.createElement(mdxModule.default, { components: mdxComponents })
             : null,

package/src/server/routes/[...slug].md.ts

@@ -34,6 +34,5 @@ export default defineHandler(async event => {
     throw new HTTPError({ status: 404, message: 'Not Found' });
   }
 
-  event.res.headers.set('Content-Type', 'text/markdown; charset=utf-8');
-  return matter(raw).content;
+  return new Response(matter(raw).content, { headers: { 'Content-Type': 'text/markdown; charset=utf-8' } });
 });

package/src/server/routes/[version]/llms.txt.ts

@@ -21,6 +21,5 @@ export default defineHandler(async event => {
     ctx,
   );
 
-  event.res.headers.set('Content-Type', 'text/plain');
-  return body;
+  return new Response(body, { headers: { 'Content-Type': 'text/plain' } });
 });

package/src/server/routes/_content/[...path].ts

@@ -0,0 +1,40 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { defineHandler, HTTPError } from 'nitro';
+import { safePath } from '@/server/utils/safe-path';
+
+const MIME: Record<string, string> = {
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+  '.webp': 'image/webp',
+  '.ico': 'image/x-icon',
+  '.pdf': 'application/pdf',
+};
+
+export default defineHandler(async event => {
+  const pathname = event.path?.replace(/^\/_content/, '') || '';
+  if (!pathname || pathname.endsWith('.md') || pathname.endsWith('.mdx')) {
+    throw new HTTPError({ status: 404, message: 'Not Found' });
+  }
+
+  const contentDir = __CHRONICLE_CONTENT_DIR__;
+  let filePath: string | null = null;
+  try { filePath = safePath(contentDir, pathname); } catch { /* malformed URL encoding */ }
+  if (!filePath) throw new HTTPError({ status: 404, message: 'Not Found' });
+
+  const data = await fs.readFile(filePath).catch(() => null);
+  if (!data) throw new HTTPError({ status: 404, message: 'Not Found' });
+
+  const ext = path.extname(filePath).toLowerCase();
+  const contentType = MIME[ext] ?? 'application/octet-stream';
+
+  return new Response(data, {
+    headers: {
+      'Content-Type': contentType,
+      'Cache-Control': 'public, max-age=86400',
+    },
+  });
+});

package/src/server/routes/llms.txt.ts

@@ -4,7 +4,7 @@ import { buildLlmsTxt } from '@/lib/llms';
 import { extractFrontmatter, getPagesForVersion } from '@/lib/source';
 import { LATEST_CONTEXT } from '@/lib/version-source';
 
-export default defineHandler(async event => {
+export default defineHandler(async () => {
   const config = loadConfig();
 
   const pages = await getPagesForVersion(LATEST_CONTEXT);
@@ -14,6 +14,5 @@ export default defineHandler(async event => {
     LATEST_CONTEXT,
   );
 
-  event.res.headers.set('Content-Type', 'text/plain');
-  return body;
+  return new Response(body, { headers: { 'Content-Type': 'text/plain' } });
 });

package/src/server/routes/og.tsx

@@ -69,7 +69,5 @@ export default defineHandler(async event => {
     },
   );
 
-  event.res.headers.set('Content-Type', 'image/svg+xml');
-  event.res.headers.set('Cache-Control', 'public, max-age=86400');
-  return svg;
+  return new Response(svg, { headers: { 'Content-Type': 'image/svg+xml', 'Cache-Control': 'public, max-age=86400' } });
 });

package/src/server/routes/robots.txt.ts

@@ -1,11 +1,10 @@
 import { defineHandler } from 'nitro';
 import { loadConfig } from '@/lib/config';
 
-export default defineHandler(event => {
+export default defineHandler(() => {
   const config = loadConfig();
   const sitemap = config.url ? `\nSitemap: ${config.url}/sitemap.xml` : '';
   const body = `User-agent: *\nAllow: /${sitemap}`;
 
-  event.res.headers.set('Content-Type', 'text/plain');
-  return body;
+  return new Response(body, { headers: { 'Content-Type': 'text/plain' } });
 });

package/src/server/routes/sitemap.xml.ts

@@ -4,12 +4,11 @@ import { getAllVersions, getApiConfigsForVersion, loadConfig } from '@/lib/confi
 import { loadApiSpecs } from '@/lib/openapi';
 import { getPages } from '@/lib/source';
 
-export default defineHandler(async event => {
+export default defineHandler(async () => {
   const config = loadConfig();
 
   if (!config.url) {
-    event.res.headers.set('Content-Type', 'application/xml');
-    return '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"/>';
+    return new Response('<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"/>', { headers: { 'Content-Type': 'application/xml' } });
   }
 
   const baseUrl = config.url.replace(/\/$/, '');
@@ -43,6 +42,5 @@ export default defineHandler(async event => {
 ${[...docPages, ...apiPages].join('\n')}
 </urlset>`;
 
-  event.res.headers.set('Content-Type', 'application/xml');
-  return xml;
+  return new Response(xml, { headers: { 'Content-Type': 'application/xml' } });
 });

package/src/server/vite-config.ts

@@ -7,7 +7,9 @@ import fs from 'node:fs/promises';
 import path from 'node:path';
 import remarkDirective from 'remark-directive';
 import { type InlineConfig } from 'vite';
-import remarkStripMdExtensions from '../lib/remark-strip-md-extensions';
+import remarkResolveImages from '../lib/remark-resolve-images';
+import remarkResolveLinks from '../lib/remark-resolve-links';
+import remarkReadingTime from 'remark-reading-time';
 import remarkUnusedDirectives from '../lib/remark-unused-directives';
 
 function resolveOutputDir(projectRoot: string, preset?: string): string {
@@ -55,6 +57,8 @@ export async function createViteConfig(
       mdx({
         default: defineFumadocsConfig({
           mdxOptions: {
+            remarkImageOptions: false,
+            valueToExport: ['readingTime'],
             remarkPlugins: [
               remarkDirective,
               [remarkDirectiveAdmonition, {
@@ -75,8 +79,10 @@ export async function createViteConfig(
                 },
               }],
               remarkUnusedDirectives,
-              remarkStripMdExtensions,
+              remarkResolveLinks,
+              remarkResolveImages,
               remarkMdxMermaid,
+              remarkReadingTime,
             ],
           },
         }),

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

@@ -1,21 +1,25 @@
 .nav {
   display: flex;
   flex-direction: column;
-  gap: var(--rs-space-5);
+  gap: var(--rs-space-8);
 }
 
 .chapter {
   display: flex;
   flex-direction: column;
   gap: var(--rs-space-2);
+  margin-top: var(--rs-space-8);
 }
 
 .chapterLabel {
+  font-family: var(--paper-font-mono);
   font-size: var(--rs-font-size-small);
-  font-weight: 600;
+  font-weight: var(--rs-font-weight-medium);
+  line-height: var(--rs-line-height-small);
+  letter-spacing: var(--rs-letter-spacing-small);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--rs-color-foreground-base-primary);
+  color: var(--rs-color-foreground-base-secondary);
+  padding: 0 var(--rs-space-3);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -27,30 +31,32 @@
   margin: 0;
   display: flex;
   flex-direction: column;
-  gap: var(--rs-space-1);
-  padding-left: var(--rs-space-4);
 }
 
 .link {
   display: flex;
   align-items: center;
-  gap: var(--rs-space-2);
+  gap: var(--rs-space-3);
+  font-family: var(--paper-font-body);
   font-size: var(--rs-font-size-small);
-  color: var(--rs-color-foreground-base-tertiary);
+  font-weight: var(--rs-font-weight-regular);
+  line-height: var(--rs-line-height-small);
+  letter-spacing: var(--rs-letter-spacing-small);
+  color: var(--rs-color-foreground-base-primary);
   text-decoration: none;
-  padding: var(--rs-space-1) 0;
+  padding: var(--rs-space-3);
+  border-radius: var(--rs-radius-2);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .link:hover {
-  color: var(--rs-color-foreground-base-primary);
+  color: var(--rs-color-foreground-accent-primary);
 }
 
 .active {
   color: var(--rs-color-foreground-accent-primary);
-  font-weight: 500;
 }
 
 .icon {
@@ -60,9 +66,14 @@
 }
 
 .subLabel {
+  font-family: var(--paper-font-mono);
   font-size: var(--rs-font-size-small);
-  font-weight: 500;
+  font-weight: var(--rs-font-weight-medium);
+  line-height: var(--rs-line-height-small);
+  letter-spacing: var(--rs-letter-spacing-small);
+  text-transform: uppercase;
   color: var(--rs-color-foreground-base-secondary);
+  padding: 0 var(--rs-space-3);
   margin-top: var(--rs-space-3);
   display: block;
   white-space: nowrap;

package/src/themes/paper/ChapterNav.tsx

@@ -15,23 +15,8 @@ interface ChapterNavProps {
   tree: Root;
 }
 
-function buildChapterIndices(
-  children: Node[]
-): Map<Node, number> {
-  const indices = new Map<Node, number>();
-  let index = 0;
-  for (const item of children) {
-    if (item.type === 'folder') {
-      index++;
-      indices.set(item, index);
-    }
-  }
-  return indices;
-}
-
 export function ChapterNav({ tree }: ChapterNavProps) {
   const { pathname } = useLocation();
-  const chapterIndices = buildChapterIndices(tree.children);
 
   return (
     <nav className={styles.nav}>
@@ -40,11 +25,10 @@ export function ChapterNav({ tree }: ChapterNavProps) {
           if (item.type === 'separator') return null;
 
           if (item.type === 'folder') {
-            const chapterIndex = chapterIndices.get(item) ?? 0;
             return (
               <li key={item.name?.toString()} className={styles.chapter}>
                 <span className={styles.chapterLabel}>
-                  {String(chapterIndex).padStart(2, '0')}. {item.name}
+                  {item.name}
                 </span>
                 <ul className={styles.chapterItems}>
                   {item.children.map(child => (