@raystack/chronicle 0.6.0 → 0.7.0

package/src/themes/paper/Page.tsx

@@ -1,16 +1,31 @@
-import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
-import { Flex } from '@raystack/apsara';
-import { useMemo } from 'react';
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  ChevronRightIcon,
+  AdjustmentsHorizontalIcon,
+  EyeIcon,
+  SunIcon,
+  MoonIcon,
+  XMarkIcon,
+} from '@heroicons/react/24/outline';
+import { IconButton, useTheme } from '@raystack/apsara';
+import { useEffect, useMemo, useState } from 'react';
 import { Link as RouterLink, useLocation } from 'react-router';
 import { getBreadcrumbItems } from 'fumadocs-core/breadcrumb';
 import { flattenTree } from 'fumadocs-core/page-tree';
-import { Search } from '@/components/ui/search';
 import type { ThemePageProps } from '@/types';
 import styles from './Page.module.css';
+import { useReaderMode } from './ReaderModeContext';
 import { ReadingProgress } from './ReadingProgress';
 
-export function Page({ page, config, tree }: ThemePageProps) {
+export function Page({ page, tree }: ThemePageProps) {
   const { pathname } = useLocation();
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [isClient, setIsClient] = useState(false);
+  const { resolvedTheme, setTheme } = useTheme();
+  const { readerMode, toggleReaderMode } = useReaderMode();
+
+  useEffect(() => { setIsClient(true); }, []);
 
   const { prev, next, crumbs } = useMemo(() => {
     const pages = flattenTree(tree.children);
@@ -32,47 +47,33 @@ export function Page({ page, config, tree }: ThemePageProps) {
 
   return (
     <>
-      <main className={styles.main}>
-        <Flex align='center' className={styles.navbar}>
-          <Flex align='center' gap='small' className={styles.navLeft}>
-            {prev ? (
-              <RouterLink
-                to={prev.url}
-                className={styles.arrow}
-                aria-label='Previous page'
-              >
-                <ChevronLeftIcon width={14} height={14} />
-              </RouterLink>
-            ) : (
-              <button
-                disabled
-                className={styles.arrowDisabled}
-                aria-label='Previous page'
-              >
-                <ChevronLeftIcon width={14} height={14} />
-              </button>
-            )}
-            {next ? (
-              <RouterLink
-                to={next.url}
-                className={styles.arrow}
-                aria-label='Next page'
-              >
-                <ChevronRightIcon width={14} height={14} />
-              </RouterLink>
-            ) : (
-              <button
-                disabled
-                className={styles.arrowDisabled}
-                aria-label='Next page'
-              >
-                <ChevronRightIcon width={14} height={14} />
-              </button>
-            )}
+      <main className={`${styles.main} ${readerMode ? styles.readerMode : ''}`}>
+        <div className={styles.navbar}>
+          <div className={styles.navLeft}>
+            <div className={styles.arrows}>
+              {prev ? (
+                <RouterLink to={prev.url} className={styles.arrowLink} aria-label='Previous page'>
+                  <ArrowLeftIcon width={14} height={14} />
+                </RouterLink>
+              ) : (
+                <span className={styles.arrowDisabled} aria-hidden='true'>
+                  <ArrowLeftIcon width={14} height={14} />
+                </span>
+              )}
+              {next ? (
+                <RouterLink to={next.url} className={styles.arrowLink} aria-label='Next page'>
+                  <ArrowRightIcon width={14} height={14} />
+                </RouterLink>
+              ) : (
+                <span className={styles.arrowDisabled} aria-hidden='true'>
+                  <ArrowRightIcon width={14} height={14} />
+                </span>
+              )}
+            </div>
             <nav className={styles.breadcrumb}>
               {crumbs.map((crumb, i) => (
                 <span key={crumb.href}>
-                  {i > 0 && <span className={styles.separator}>/</span>}
+                  {i > 0 && <ChevronRightIcon width={12} height={12} className={styles.separator} />}
                   {i === crumbs.length - 1 ? (
                     <span className={styles.crumbActive}>{crumb.label}</span>
                   ) : (
@@ -83,18 +84,53 @@ export function Page({ page, config, tree }: ThemePageProps) {
                 </span>
               ))}
             </nav>
-          </Flex>
-          <Flex align='center' className={styles.navRight}>
-            {config.search?.enabled && (
-              <Search className={styles.searchButton} />
+          </div>
+          <div className={styles.navRight}>
+            {settingsOpen ? (
+              <>
+                <IconButton size={2} onClick={toggleReaderMode} aria-label='Toggle reader mode'>
+                  <EyeIcon width={14} height={14} />
+                </IconButton>
+                {isClient && (
+                  <IconButton
+                    size={2}
+                    onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
+                    aria-label={resolvedTheme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'}
+                  >
+                    {resolvedTheme === 'dark'
+                      ? <SunIcon width={14} height={14} />
+                      : <MoonIcon width={14} height={14} />
+                    }
+                  </IconButton>
+                )}
+                <IconButton size={2} onClick={() => setSettingsOpen(false)} aria-label='Close settings'>
+                  <XMarkIcon width={14} height={14} />
+                </IconButton>
+              </>
+            ) : (
+              <IconButton size={2} onClick={() => setSettingsOpen(true)} aria-label='Open settings'>
+                <AdjustmentsHorizontalIcon width={14} height={14} />
+              </IconButton>
+            )}
+          </div>
+        </div>
+        <div className={styles.content}>
+          <header className={styles.articleHeader}>
+            {page.frontmatter._readingTime && (
+              <span className={styles.readingTime}>{page.frontmatter._readingTime}min Read</span>
+            )}
+            <h1 className={styles.articleTitle}>{page.frontmatter.title}</h1>
+            {page.frontmatter.description && (
+              <p className={styles.articleDescription}>{page.frontmatter.description}</p>
             )}
-          </Flex>
-        </Flex>
-        <article className={styles.article} data-article-content>
-          <div className={styles.content}>{page.content}</div>
-        </article>
+            <hr className={styles.articleSeparator} />
+          </header>
+          <article className={styles.article} data-article-content>
+            {page.content}
+          </article>
+        </div>
       </main>
-      <ReadingProgress items={page.toc} />
+      {!readerMode && <ReadingProgress items={page.toc} />}
     </>
   );
 }

package/src/themes/paper/ReaderModeContext.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { createContext, useContext, useState, type ReactNode } from 'react';
+
+interface ReaderModeContextValue {
+  readerMode: boolean;
+  toggleReaderMode: () => void;
+}
+
+const ReaderModeContext = createContext<ReaderModeContextValue>({
+  readerMode: false,
+  toggleReaderMode: () => {},
+});
+
+export function ReaderModeProvider({ children }: { children: ReactNode }) {
+  const [readerMode, setReaderMode] = useState(false);
+  return (
+    <ReaderModeContext.Provider
+      value={{ readerMode, toggleReaderMode: () => setReaderMode(v => !v) }}
+    >
+      {children}
+    </ReaderModeContext.Provider>
+  );
+}
+
+export function useReaderMode() {
+  return useContext(ReaderModeContext);
+}

package/src/themes/paper/ReadingProgress.tsx

@@ -220,6 +220,7 @@ export function ReadingProgress({ items }: ReadingProgressProps) {
     const element = document.getElementById(id);
     if (!element) return;
 
+    history.pushState(null, '', `#${id}`);
     const elementTop = element.getBoundingClientRect().top + window.scrollY;
     window.scrollTo({
       top: Math.max(0, elementTop - NAV_HEIGHT),

package/src/themes/registry.ts

@@ -15,7 +15,7 @@ export function getTheme(name?: string): Theme {
 
 export function getThemeConfig(name?: string) {
   if (name === 'paper') {
-    return { enableSystem: false, forcedTheme: 'light' };
+    return { enableSystem: true };
   }
   return { enableSystem: true };
 }

package/src/types/config.ts

@@ -84,6 +84,7 @@ const dirNameSchema = z
 const contentEntrySchema = z.object({
   dir: dirNameSchema,
   label: z.string().min(1),
+  description: z.string().optional(),
   icon: z.string().optional(),
 })
 

package/src/types/content.ts

@@ -10,6 +10,7 @@ export interface Frontmatter {
   order?: number
   icon?: string
   lastModified?: string
+  _readingTime?: number
 }
 
 export interface PageNavLink {