@raystack/chronicle 0.7.3 → 0.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raystack/chronicle",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "Config-driven documentation framework",
   "license": "Apache-2.0",
   "type": "module",
@@ -46,6 +46,7 @@
     "@opentelemetry/resources": "^2.6.1",
     "@opentelemetry/sdk-metrics": "^2.6.1",
     "@opentelemetry/semantic-conventions": "^1.40.0",
+    "@radix-ui/react-icons": "^1.3.2",
     "@raystack/apsara": "1.0.0-rc.4",
     "@shikijs/rehype": "^4.0.2",
     "@vitejs/plugin-react": "^6.0.1",

package/src/lib/source.ts

@@ -97,6 +97,8 @@ function buildSyntheticMeta(): {
 }
 
 let cachedSource: ReturnType<typeof loader> | null = null;
+let cachedTree: Root | null = null;
+let cachedNavMap: Map<string, PageNav> | null = null;
 
 async function getSource() {
   if (cachedSource) return cachedSource;
@@ -112,6 +114,8 @@ export { getSource as source };
 
 export function invalidate() {
   cachedSource = null;
+  cachedTree = null;
+  cachedNavMap = null;
 }
 
 function getOrder(node: Node, orderMap: Map<string, number>): number | undefined {
@@ -146,8 +150,10 @@ function sortTreeByOrder(tree: Root, pages: { url: string; data: unknown }[]): R
 }
 
 export async function getPageTree(): Promise<Root> {
+  if (cachedTree) return cachedTree;
   const s = await getSource();
-  return sortTreeByOrder(s.pageTree as Root, s.getPages());
+  cachedTree = sortTreeByOrder(s.pageTree as Root, s.getPages());
+  return cachedTree;
 }
 
 export async function getPages() {
@@ -186,12 +192,10 @@ function titleFromUrl(url: string): string {
     .join(' ');
 }
 
-export async function getPageNav(slug: string[], tree?: Root): Promise<PageNav> {
-  const resolvedTree = tree ?? (await getPageTree());
-  const pages = flattenTree(resolvedTree.children);
-  const url = slug.length === 0 ? '/' : `/${slug.join('/')}`;
-  const i = pages.findIndex(p => p.url === url);
-  if (i < 0) return { prev: null, next: null };
+async function getNavMap(): Promise<Map<string, PageNav>> {
+  if (cachedNavMap) return cachedNavMap;
+  const tree = await getPageTree();
+  const pages = flattenTree(tree.children);
   const toLink = (p: (typeof pages)[number]): PageNavLink => ({
     url: p.url,
     title:
@@ -199,10 +203,21 @@ export async function getPageNav(slug: string[], tree?: Root): Promise<PageNav>
         ? p.name
         : titleFromUrl(p.url)
   });
-  return {
-    prev: i > 0 ? toLink(pages[i - 1]) : null,
-    next: i < pages.length - 1 ? toLink(pages[i + 1]) : null
-  };
+  const navMap = new Map<string, PageNav>();
+  for (let i = 0; i < pages.length; i++) {
+    navMap.set(pages[i].url, {
+      prev: i > 0 ? toLink(pages[i - 1]) : null,
+      next: i < pages.length - 1 ? toLink(pages[i + 1]) : null
+    });
+  }
+  cachedNavMap = navMap;
+  return cachedNavMap;
+}
+
+export async function getPageNav(slug: string[]): Promise<PageNav> {
+  const navMap = await getNavMap();
+  const url = slug.length === 0 ? '/' : `/${slug.join('/')}`;
+  return navMap.get(url) ?? { prev: null, next: null };
 }
 
 export function extractFrontmatter(page: { data: unknown }, fallbackTitle?: string): Frontmatter {

package/src/server/entry-server.tsx

@@ -45,7 +45,7 @@ export default {
       getPageTree(),
       route.type === RouteType.DocsPage ? getPage(route.slug) : Promise.resolve(null),
     ]);
-    const nav = page ? await getPageNav(pageSlug, tree) : { prev: null, next: null };
+    const nav = page ? await getPageNav(pageSlug) : { prev: null, next: null };
 
     const relativePath = page ? getRelativePath(page) : null;
     const originalPath = page ? getOriginalPath(page) : 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}/>