@raystack/chronicle 0.3.0 → 0.4.0

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

@@ -1,7 +1,12 @@
 .main {
   --paper-navbar-height: 40px;
   --paper-navbar-padding: var(--rs-space-3);
-  --paper-navbar-total: calc(var(--paper-navbar-height) + var(--paper-navbar-padding) * 2 + 1px);
+  --paper-navbar-total: calc(
+    var(--paper-navbar-height) +
+    var(--paper-navbar-padding) *
+    2 +
+    1px
+  );
 
   flex: 1;
   max-width: 1024px;
@@ -52,7 +57,7 @@
 }
 
 .breadcrumb {
-  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-family: "SF Mono", "Fira Code", monospace;
   font-size: var(--rs-font-size-small);
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -94,13 +99,15 @@
 }
 
 .content {
-  font-family: Georgia, 'Times New Roman', serif;
+  font-family: Georgia, "Times New Roman", serif;
   line-height: 1.8;
   background: var(--rs-color-background-base-primary);
   padding: var(--rs-space-9);
   border-left: 1px solid var(--rs-color-border-base-primary);
   border-right: 1px solid var(--rs-color-border-base-primary);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
+  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);
 }
 
@@ -167,6 +174,11 @@
   margin-bottom: var(--rs-space-3);
 }
 
+.content img {
+  max-width: 100%;
+  height: auto;
+}
+
 .content blockquote {
   margin: 1rem 0;
   padding-left: 1rem;

package/src/themes/paper/Page.tsx

@@ -1,78 +1,71 @@
-'use client'
-
-import { useMemo } from 'react'
-import { usePathname } from 'next/navigation'
-import NextLink from 'next/link'
-import { Flex } from '@raystack/apsara'
-import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline'
-import type { ThemePageProps, PageTreeItem } from '@/types'
-import { Search } from '@/components/ui/search'
-import { ReadingProgress } from './ReadingProgress'
-import styles from './Page.module.css'
-
-function flattenTree(items: PageTreeItem[]): PageTreeItem[] {
-  const result: PageTreeItem[] = []
-  for (const item of items) {
-    if (item.type === 'page' && item.url) result.push(item)
-    if (item.children) result.push(...flattenTree(item.children))
-  }
-  return result
-}
-
-function findBreadcrumb(items: PageTreeItem[], slug: string[]): { label: string; href: string }[] {
-  const result: { label: string; href: string }[] = []
-  for (let i = 0; i < slug.length; i++) {
-    const path = '/' + slug.slice(0, i + 1).join('/')
-    const found = findInTree(items, path)
-    result.push({ label: found?.name ?? slug[i], href: path })
-  }
-  return result
-}
-
-function findInTree(items: PageTreeItem[], path: string): PageTreeItem | undefined {
-  for (const item of items) {
-    if (item.url === path) return item
-    if (item.children) {
-      const found = findInTree(item.children, path)
-      if (found) return found
-    }
-  }
-  return undefined
-}
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import { Flex } from '@raystack/apsara';
+import { useMemo } 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 { ReadingProgress } from './ReadingProgress';
 
 export function Page({ page, config, tree }: ThemePageProps) {
-  const pathname = usePathname()
+  const { pathname } = useLocation();
 
   const { prev, next, crumbs } = useMemo(() => {
-    const pages = flattenTree(tree.children)
-    const currentIndex = pages.findIndex((p) => p.url === pathname)
+    const pages = flattenTree(tree.children);
+    const currentIndex = pages.findIndex(p => p.url === pathname);
+    const breadcrumbItems = getBreadcrumbItems(
+      pathname,
+      tree,
+      { includePage: true }
+    );
     return {
       prev: currentIndex > 0 ? pages[currentIndex - 1] : null,
       next: currentIndex < pages.length - 1 ? pages[currentIndex + 1] : null,
-      crumbs: findBreadcrumb(tree.children, page.slug),
-    }
-  }, [tree, pathname, page.slug])
+      crumbs: breadcrumbItems.map(item => ({
+        label: item.name,
+        href: item.url ?? pathname,
+      })),
+    };
+  }, [tree, pathname]);
 
   return (
     <>
       <main className={styles.main}>
-        <Flex align="center" className={styles.navbar}>
-          <Flex align="center" gap="small" className={styles.navLeft}>
+        <Flex align='center' className={styles.navbar}>
+          <Flex align='center' gap='small' className={styles.navLeft}>
             {prev ? (
-              <NextLink href={prev.url!} className={styles.arrow} aria-label="Previous page">
+              <RouterLink
+                to={prev.url}
+                className={styles.arrow}
+                aria-label='Previous page'
+              >
                 <ChevronLeftIcon width={14} height={14} />
-              </NextLink>
+              </RouterLink>
             ) : (
-              <button disabled className={styles.arrowDisabled} aria-label="Previous page">
+              <button
+                disabled
+                className={styles.arrowDisabled}
+                aria-label='Previous page'
+              >
                 <ChevronLeftIcon width={14} height={14} />
               </button>
             )}
             {next ? (
-              <NextLink href={next.url!} className={styles.arrow} aria-label="Next page">
+              <RouterLink
+                to={next.url}
+                className={styles.arrow}
+                aria-label='Next page'
+              >
                 <ChevronRightIcon width={14} height={14} />
-              </NextLink>
+              </RouterLink>
             ) : (
-              <button disabled className={styles.arrowDisabled} aria-label="Next page">
+              <button
+                disabled
+                className={styles.arrowDisabled}
+                aria-label='Next page'
+              >
                 <ChevronRightIcon width={14} height={14} />
               </button>
             )}
@@ -83,25 +76,25 @@ export function Page({ page, config, tree }: ThemePageProps) {
                   {i === crumbs.length - 1 ? (
                     <span className={styles.crumbActive}>{crumb.label}</span>
                   ) : (
-                    <NextLink href={crumb.href} className={styles.crumbLink}>
+                    <RouterLink to={crumb.href} className={styles.crumbLink}>
                       {crumb.label}
-                    </NextLink>
+                    </RouterLink>
                   )}
                 </span>
               ))}
             </nav>
           </Flex>
-          <Flex align="center" className={styles.navRight}>
-            {config.search?.enabled && <Search className={styles.searchButton} />}
+          <Flex align='center' className={styles.navRight}>
+            {config.search?.enabled && (
+              <Search className={styles.searchButton} />
+            )}
           </Flex>
         </Flex>
         <article className={styles.article} data-article-content>
-          <div className={styles.content}>
-            {page.content}
-          </div>
+          <div className={styles.content}>{page.content}</div>
         </article>
       </main>
       <ReadingProgress items={page.toc} />
     </>
-  )
+  );
 }

package/src/themes/paper/ReadingProgress.tsx

@@ -1,46 +1,46 @@
-'use client'
+'use client';
 
-import { cx } from 'class-variance-authority'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import type { TocItem } from '@/types'
-import styles from './ReadingProgress.module.css'
+import { cx } from 'class-variance-authority';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { TOCItemType } from 'fumadocs-core/toc';
+import styles from './ReadingProgress.module.css';
 
 interface Heading {
-  title: string
-  level: number
-  id: string
-  url: string
-  yPosition: number
+  title: string;
+  level: number;
+  id: string;
+  url: string;
+  yPosition: number;
 }
 
-const ARTICLE_SELECTOR = '[data-article-content]'
-const TICK_HEIGHT = 20
-const NAV_HEIGHT = 60
+const ARTICLE_SELECTOR = '[data-article-content]';
+const TICK_HEIGHT = 20;
+const NAV_HEIGHT = 60;
 
 function calculateTickBounds(containerHeight: number) {
-  const numTicks = Math.floor(containerHeight / TICK_HEIGHT) + 1
-  const maxPosition = (numTicks - 1) * TICK_HEIGHT
-  return { numTicks, maxPosition }
+  const numTicks = Math.floor(containerHeight / TICK_HEIGHT) + 1;
+  const maxPosition = (numTicks - 1) * TICK_HEIGHT;
+  return { numTicks, maxPosition };
 }
 
 function snapToTick(value: number, maxPosition: number): number {
-  const snapped = Math.round(value / TICK_HEIGHT) * TICK_HEIGHT
-  return Math.max(0, Math.min(snapped, maxPosition))
+  const snapped = Math.round(value / TICK_HEIGHT) * TICK_HEIGHT;
+  return Math.max(0, Math.min(snapped, maxPosition));
 }
 
 function resolveOverlaps(headings: Heading[], maxPosition: number): Heading[] {
-  if (headings.length <= 1) return headings
+  if (headings.length <= 1) return headings;
 
-  const resolved: Heading[] = []
-  let lastUsedPos = -TICK_HEIGHT
+  const resolved: Heading[] = [];
+  let lastUsedPos = -TICK_HEIGHT;
 
   for (const heading of headings) {
-    let newPos = heading.yPosition
+    let newPos = heading.yPosition;
     if (newPos <= lastUsedPos) {
-      newPos = lastUsedPos + TICK_HEIGHT
+      newPos = lastUsedPos + TICK_HEIGHT;
     }
-    resolved.push({ ...heading, yPosition: newPos })
-    lastUsedPos = newPos
+    resolved.push({ ...heading, yPosition: newPos });
+    lastUsedPos = newPos;
   }
 
   // Backward pass: clamp-and-shift to prevent overlapping positions
@@ -48,193 +48,212 @@ function resolveOverlaps(headings: Heading[], maxPosition: number): Heading[] {
     const maxAllowed =
       i === resolved.length - 1
         ? maxPosition
-        : resolved[i + 1].yPosition - TICK_HEIGHT
+        : resolved[i + 1].yPosition - TICK_HEIGHT;
 
-    const clampedPos = Math.max(0, maxAllowed)
+    const clampedPos = Math.max(0, maxAllowed);
     if (resolved[i].yPosition > clampedPos) {
-      resolved[i] = { ...resolved[i], yPosition: clampedPos }
+      resolved[i] = { ...resolved[i], yPosition: clampedPos };
       for (let j = i - 1; j >= 0; j--) {
-        const upperBound = resolved[j + 1].yPosition - TICK_HEIGHT
+        const upperBound = resolved[j + 1].yPosition - TICK_HEIGHT;
         if (resolved[j].yPosition > upperBound) {
-          resolved[j] = { ...resolved[j], yPosition: Math.max(0, upperBound) }
+          resolved[j] = { ...resolved[j], yPosition: Math.max(0, upperBound) };
         } else {
-          break
+          break;
         }
       }
     }
   }
 
-  return resolved
+  return resolved;
 }
 
 interface ReadingProgressProps {
-  items: TocItem[]
+  items: TOCItemType[];
 }
 
 export function ReadingProgress({ items }: ReadingProgressProps) {
-  const [headings, setHeadings] = useState<Heading[]>([])
-  const [containerHeight, setContainerHeight] = useState<number>(0)
-  const [ready, setReady] = useState<boolean>(false)
-  const [isScrollable, setIsScrollable] = useState<boolean>(true)
-  const containerRef = useRef<HTMLDivElement>(null)
-  const scrollMarkerRef = useRef<HTMLDivElement>(null)
-  const scrollPosRef = useRef<number>(0)
+  const [headings, setHeadings] = useState<Heading[]>([]);
+  const [containerHeight, setContainerHeight] = useState<number>(0);
+  const [ready, setReady] = useState<boolean>(false);
+  const [isScrollable, setIsScrollable] = useState<boolean>(true);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const scrollMarkerRef = useRef<HTMLDivElement>(null);
+  const scrollPosRef = useRef<number>(0);
 
   const { numTicks, maxPosition } = useMemo(
     () => calculateTickBounds(containerHeight),
     [containerHeight]
-  )
+  );
 
   const recalcHeadings = useCallback(() => {
-    const article = document.querySelector(ARTICLE_SELECTOR)
-    const container = containerRef.current
-    if (!article || !container || !items.length) return
+    const article = document.querySelector(ARTICLE_SELECTOR);
+    const container = containerRef.current;
+    if (!article || !container || !items.length) return;
 
-    const articleBox = article.getBoundingClientRect()
-    const containerBox = container.getBoundingClientRect()
-    const articleTop = articleBox.top + window.scrollY
+    const articleBox = article.getBoundingClientRect();
+    const containerBox = container.getBoundingClientRect();
+    const articleTop = articleBox.top + window.scrollY;
 
-    const hasScroll = articleBox.height > window.innerHeight
-    setIsScrollable(hasScroll)
-    setContainerHeight(containerBox.height)
+    const hasScroll = articleBox.height > window.innerHeight;
+    setIsScrollable(hasScroll);
+    setContainerHeight(containerBox.height);
 
-    const { maxPosition: maxPos } = calculateTickBounds(containerBox.height)
+    const { maxPosition: maxPos } = calculateTickBounds(containerBox.height);
 
     const mapped = items
-      .map((tocItem) => {
-        const id = tocItem.url.startsWith('#') ? tocItem.url.slice(1) : tocItem.url
-        const node = document.getElementById(id)
-        if (!node) return null
-
-        const { top } = node.getBoundingClientRect()
-        const headingPosInArticle = top + window.scrollY - articleTop
-        const progress = headingPosInArticle / articleBox.height
-        const rawY = progress * maxPos
-        const yPos = snapToTick(rawY, maxPos)
+      .map(tocItem => {
+        const id = tocItem.url.startsWith('#')
+          ? tocItem.url.slice(1)
+          : tocItem.url;
+        const node = document.getElementById(id);
+        if (!node) return null;
+
+        const { top } = node.getBoundingClientRect();
+        const headingPosInArticle = top + window.scrollY - articleTop;
+        const progress = headingPosInArticle / articleBox.height;
+        const rawY = progress * maxPos;
+        const yPos = snapToTick(rawY, maxPos);
 
         return {
           title: tocItem.title,
           level: tocItem.depth,
           id,
           url: tocItem.url,
-          yPosition: yPos,
-        }
+          yPosition: yPos
+        };
       })
-      .filter((item): item is Heading => item !== null)
+      .filter((item): item is Heading => item !== null);
 
-    const resolvedItems = resolveOverlaps(mapped, maxPos)
-    setHeadings(resolvedItems)
-  }, [items])
+    const resolvedItems = resolveOverlaps(mapped, maxPos);
+    setHeadings(resolvedItems);
+  }, [items]);
 
   // Imperative DOM updates to avoid React re-render on every scroll event
   const handleScroll = useCallback(() => {
-    const article = document.querySelector(ARTICLE_SELECTOR)
-    const container = containerRef.current
-    const scrollMarker = scrollMarkerRef.current
-    if (!article || !container || !scrollMarker) return
+    const article = document.querySelector(ARTICLE_SELECTOR);
+    const container = containerRef.current;
+    const scrollMarker = scrollMarkerRef.current;
+    if (!article || !container || !scrollMarker) return;
 
-    const { top, height } = article.getBoundingClientRect()
-    const { height: cHeight } = container.getBoundingClientRect()
-    const viewportHeight = window.innerHeight
-    const { maxPosition: maxPos } = calculateTickBounds(cHeight)
+    const { top, height } = article.getBoundingClientRect();
+    const { height: cHeight } = container.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const { maxPosition: maxPos } = calculateTickBounds(cHeight);
 
-    let newScrollPos: number
+    let newScrollPos: number;
     if (top > 0) {
-      newScrollPos = 0
+      newScrollPos = 0;
     } else {
-      const scrolled = Math.abs(top)
-      const scrollRange = height - viewportHeight
-      const progress = scrollRange > 0 ? Math.min(1, scrolled / scrollRange) : 0
-      const rawPos = progress * maxPos
-      newScrollPos = snapToTick(rawPos, maxPos)
+      const scrolled = Math.abs(top);
+      const scrollRange = height - viewportHeight;
+      const progress =
+        scrollRange > 0 ? Math.min(1, scrolled / scrollRange) : 0;
+      const rawPos = progress * maxPos;
+      newScrollPos = snapToTick(rawPos, maxPos);
     }
 
-    const prevScrollPos = scrollPosRef.current
+    const prevScrollPos = scrollPosRef.current;
     if (newScrollPos !== prevScrollPos) {
-      scrollPosRef.current = newScrollPos
-      scrollMarker.style.top = `${newScrollPos}px`
+      scrollPosRef.current = newScrollPos;
+      scrollMarker.style.top = `${newScrollPos}px`;
 
-      const textEl = scrollMarker.querySelector('[data-scroll-text]')
+      const textEl = scrollMarker.querySelector('[data-scroll-text]');
       if (textEl) {
-        textEl.textContent = (maxPos > 0 ? newScrollPos / maxPos : 0).toFixed(2)
+        textEl.textContent = (maxPos > 0 ? newScrollPos / maxPos : 0).toFixed(
+          2
+        );
       }
 
-      const tickLines = container.querySelectorAll('[data-tick-line]')
-      tickLines.forEach((tick) => {
-        const tickPos = Number(tick.getAttribute('data-tick-pos'))
+      const tickLines = container.querySelectorAll('[data-tick-line]');
+      tickLines.forEach(tick => {
+        const tickPos = Number(tick.getAttribute('data-tick-pos'));
         if (tickPos < newScrollPos) {
-          tick.classList.remove(styles.tickLineAfter)
-          tick.classList.add(styles.tickLineBefore)
+          tick.classList.remove(styles.tickLineAfter);
+          tick.classList.add(styles.tickLineBefore);
         } else {
-          tick.classList.remove(styles.tickLineBefore)
-          tick.classList.add(styles.tickLineAfter)
+          tick.classList.remove(styles.tickLineBefore);
+          tick.classList.add(styles.tickLineAfter);
         }
-      })
+      });
     }
-  }, [])
+  }, []);
 
   useEffect(() => {
-    recalcHeadings()
-    handleScroll()
-    setReady(true)
+    recalcHeadings();
+    handleScroll();
+    setReady(true);
 
-    const article = document.querySelector(ARTICLE_SELECTOR)
-    let ro: ResizeObserver | undefined
+    const article = document.querySelector(ARTICLE_SELECTOR);
+    let ro: ResizeObserver | undefined;
     if (article) {
       ro = new ResizeObserver(() => {
-        recalcHeadings()
-        handleScroll()
-      })
-      ro.observe(article)
+        recalcHeadings();
+        handleScroll();
+      });
+      ro.observe(article);
     }
 
-    window.addEventListener('resize', recalcHeadings)
-    window.addEventListener('scroll', handleScroll, { passive: true })
+    window.addEventListener('resize', recalcHeadings);
+    window.addEventListener('scroll', handleScroll, { passive: true });
 
     return () => {
-      ro?.disconnect()
-      window.removeEventListener('resize', recalcHeadings)
-      window.removeEventListener('scroll', handleScroll)
-    }
-  }, [recalcHeadings, handleScroll])
+      ro?.disconnect();
+      window.removeEventListener('resize', recalcHeadings);
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [recalcHeadings, handleScroll]);
 
   const scrollToTick = (y: number): void => {
-    const article = document.querySelector(ARTICLE_SELECTOR)
-    if (!article || maxPosition === 0) return
+    const article = document.querySelector(ARTICLE_SELECTOR);
+    if (!article || maxPosition === 0) return;
 
-    const articleBox = article.getBoundingClientRect()
-    const articleTop = articleBox.top + window.scrollY
-    const progress = y / maxPosition
-    const articlePos = progress * articleBox.height
-    const targetScroll = articleTop + articlePos - NAV_HEIGHT
+    const articleBox = article.getBoundingClientRect();
+    const articleTop = articleBox.top + window.scrollY;
+    const progress = y / maxPosition;
+    const articlePos = progress * articleBox.height;
+    const targetScroll = articleTop + articlePos - NAV_HEIGHT;
 
-    window.scrollTo({ top: Math.max(0, targetScroll), behavior: 'smooth' })
-  }
+    window.scrollTo({ top: Math.max(0, targetScroll), behavior: 'smooth' });
+  };
 
   const scrollToHeading = (id: string): void => {
-    const element = document.getElementById(id)
-    if (!element) return
+    const element = document.getElementById(id);
+    if (!element) return;
 
-    const elementTop = element.getBoundingClientRect().top + window.scrollY
-    window.scrollTo({ top: Math.max(0, elementTop - NAV_HEIGHT), behavior: 'smooth' })
-  }
+    const elementTop = element.getBoundingClientRect().top + window.scrollY;
+    window.scrollTo({
+      top: Math.max(0, elementTop - NAV_HEIGHT),
+      behavior: 'smooth'
+    });
+  };
 
   const ticks = useMemo(
     () => Array.from({ length: numTicks }, (_, i) => i * TICK_HEIGHT),
     [numTicks]
-  )
+  );
 
   if (!isScrollable || ticks.length < 2) {
-    return <div ref={containerRef} className={styles.container} />
+    return <div ref={containerRef} className={styles.container} />;
   }
 
   return (
     <div ref={containerRef} className={styles.container}>
       <div className={styles.inner}>
         {ticks.map((y, i) => (
-          <div key={`tick-${i}`} style={{ top: `${y}px` }} className={styles.tickContainer}>
-            <div data-tick-line data-tick-pos={y} className={cx(styles.tickLine, styles.tickLineAfter)} />
-            <div className={styles.tickClickable} onClick={() => scrollToTick(y)} />
+          <div
+            key={`tick-${i}`}
+            style={{ top: `${y}px` }}
+            className={styles.tickContainer}
+          >
+            <div
+              data-tick-line
+              data-tick-pos={y}
+              className={cx(styles.tickLine, styles.tickLineAfter)}
+            />
+            <div
+              className={styles.tickClickable}
+              onClick={() => scrollToTick(y)}
+            />
           </div>
         ))}
 
@@ -246,16 +265,16 @@ export function ReadingProgress({ items }: ReadingProgressProps) {
                 top: `${h.yPosition - 6}px`,
                 right: '24px',
                 zIndex: h.level < 4 ? 10 : 0,
-                transitionDelay: `${50 * i}ms`,
+                transitionDelay: `${50 * i}ms`
               }}
             >
               <a
                 href={h.url}
                 className={styles.headingLink}
-                onClick={(e) => {
-                  e.preventDefault()
-                  e.stopPropagation()
-                  scrollToHeading(h.id)
+                onClick={e => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  scrollToHeading(h.id);
                 }}
               >
                 {h.title}
@@ -270,7 +289,7 @@ export function ReadingProgress({ items }: ReadingProgressProps) {
             className={styles.connectingLine}
             style={{
               top: `${h.yPosition}px`,
-              width: `${Math.max(4, (3 - h.level) * 4 + 12)}px`,
+              width: `${Math.max(4, (3 - h.level) * 4 + 12)}px`
             }}
           />
         ))}
@@ -279,7 +298,9 @@ export function ReadingProgress({ items }: ReadingProgressProps) {
           ref={scrollMarkerRef}
           className={cx(
             styles.scrollMarkerContainer,
-            ready ? styles.scrollMarkerContainerReady : styles.scrollMarkerContainerNotReady
+            ready
+              ? styles.scrollMarkerContainerReady
+              : styles.scrollMarkerContainerNotReady
           )}
           style={{ top: '0px' }}
         >
@@ -290,5 +311,5 @@ export function ReadingProgress({ items }: ReadingProgressProps) {
         </div>
       </div>
     </div>
-  )
+  );
 }

package/src/themes/paper/index.ts

@@ -1,8 +1,8 @@
-import { Layout } from './Layout'
-import { Page } from './Page'
-import type { Theme } from '@/types'
+import type { Theme } from '@/types';
+import { Layout } from './Layout';
+import { Page } from './Page';
 
 export const paperTheme: Theme = {
   Layout,
-  Page,
-}
+  Page
+};