@raystack/chronicle 0.1.0-canary.5a2be79

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

@@ -0,0 +1,174 @@
+.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);
+
+  flex: 1;
+  max-width: 1024px;
+  margin: 0 auto;
+}
+
+.navbar {
+  height: var(--paper-navbar-height);
+  padding: var(--paper-navbar-padding) 0;
+  border-bottom: 1px solid var(--rs-color-border-base-primary);
+  justify-content: space-between;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  background: var(--rs-color-background-neutral-primary);
+  z-index: 10;
+  max-width: 1024px;
+}
+
+.navLeft {
+  align-items: center;
+}
+
+.navRight {
+  align-items: center;
+}
+
+.arrow {
+  display: flex;
+  align-items: center;
+  color: var(--rs-color-foreground-base-primary);
+  text-decoration: none;
+}
+
+.arrow:hover {
+  color: var(--rs-color-foreground-accent-primary);
+}
+
+.arrowDisabled {
+  display: flex;
+  align-items: center;
+  color: var(--rs-color-foreground-base-tertiary);
+  opacity: 0.4;
+  cursor: default;
+  border: none;
+  background: none;
+  padding: 0;
+}
+
+.breadcrumb {
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: var(--rs-font-size-small);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-left: var(--rs-space-3);
+}
+
+.separator {
+  margin: 0 var(--rs-space-2);
+  color: var(--rs-color-foreground-base-tertiary);
+}
+
+.crumbLink {
+  color: var(--rs-color-foreground-base-tertiary);
+  text-decoration: none;
+}
+
+.crumbLink:hover {
+  color: var(--rs-color-foreground-base-primary);
+}
+
+.crumbActive {
+  color: var(--rs-color-foreground-base-primary);
+  font-weight: 600;
+}
+
+.article {
+  flex: 1;
+  min-width: 0;
+  margin-top: var(--paper-navbar-total);
+  padding: 0 var(--rs-space-7);
+}
+
+.searchButton {
+  height: 28px;
+  padding: 0 var(--rs-space-3);
+  font-size: var(--rs-font-size-small);
+  border: none;
+  box-shadow: none;
+}
+
+.content {
+  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);
+  margin-bottom: var(--rs-space-9);
+}
+
+.content h1,
+.content h2,
+.content h3,
+.content h4,
+.content h5,
+.content h6 {
+  line-height: 1.4;
+}
+
+.content h1 {
+  margin: 2rem 0 1rem;
+  font-size: 2rem;
+}
+
+.content h2 {
+  margin: 1.75rem 0 0.75rem;
+  font-size: 1.5rem;
+}
+
+.content h3 {
+  margin: 1.5rem 0 0.5rem;
+  font-size: 1.25rem;
+}
+
+.content h4 {
+  margin: 1.25rem 0 0.5rem;
+  font-size: 1.1rem;
+}
+
+.content h5 {
+  margin: 1rem 0 0.5rem;
+  font-size: 1rem;
+}
+
+.content h6 {
+  margin: 1rem 0 0.5rem;
+  font-size: 0.875rem;
+}
+
+.content p {
+  margin: 0.75rem 0;
+}
+
+.content ul,
+.content ol {
+  margin: 0.75rem 0;
+  padding-left: 1.5rem;
+  margin-bottom: var(--rs-space-5);
+}
+
+.content li {
+  font-size: var(--rs-font-size-regular);
+  margin: var(--rs-space-2) 0;
+}
+
+.content table {
+  margin-bottom: var(--rs-space-5);
+}
+
+.content [role="tablist"] {
+  margin-bottom: var(--rs-space-3);
+}
+
+.content blockquote {
+  margin: 1rem 0;
+  padding-left: 1rem;
+  border-left: 3px solid var(--rs-color-border-base-primary);
+}

package/src/themes/paper/Page.tsx

@@ -0,0 +1,107 @@
+'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
+}
+
+export function Page({ page, config, tree }: ThemePageProps) {
+  const pathname = usePathname()
+
+  const { prev, next, crumbs } = useMemo(() => {
+    const pages = flattenTree(tree.children)
+    const currentIndex = pages.findIndex((p) => p.url === pathname)
+    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])
+
+  return (
+    <>
+      <main className={styles.main}>
+        <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">
+                <ChevronLeftIcon width={14} height={14} />
+              </NextLink>
+            ) : (
+              <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">
+                <ChevronRightIcon width={14} height={14} />
+              </NextLink>
+            ) : (
+              <button disabled className={styles.arrowDisabled} aria-label="Next page">
+                <ChevronRightIcon width={14} height={14} />
+              </button>
+            )}
+            <nav className={styles.breadcrumb}>
+              {crumbs.map((crumb, i) => (
+                <span key={crumb.href}>
+                  {i > 0 && <span className={styles.separator}>/</span>}
+                  {i === crumbs.length - 1 ? (
+                    <span className={styles.crumbActive}>{crumb.label}</span>
+                  ) : (
+                    <NextLink href={crumb.href} className={styles.crumbLink}>
+                      {crumb.label}
+                    </NextLink>
+                  )}
+                </span>
+              ))}
+            </nav>
+          </Flex>
+          <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>
+        </article>
+      </main>
+      <ReadingProgress items={page.toc} />
+    </>
+  )
+}

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

@@ -0,0 +1,132 @@
+.container {
+  position: fixed;
+  right: var(--rs-space-4);
+  top: 100px;
+  width: 200px;
+  height: calc(100vh - 200px);
+  z-index: 10;
+}
+
+.inner {
+  position: absolute;
+  inset: 0;
+}
+
+.tickContainer {
+  position: absolute;
+  right: 0;
+  display: grid;
+  width: 6rem;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.tickLine {
+  height: 1px;
+  width: 0.5rem;
+  transition: all 100ms;
+}
+
+.tickLineBefore {
+  background-color: var(--rs-color-foreground-accent-primary);
+}
+
+.tickLineAfter {
+  background-color: var(--rs-color-background-neutral-tertiary);
+}
+
+.tickContainer:hover .tickLine {
+  width: 1rem;
+}
+
+.tickClickable {
+  position: absolute;
+  inset-inline: 0;
+  height: 0.5rem;
+  cursor: pointer;
+}
+
+.headingContainer {
+  transition: transform 150ms;
+}
+
+.headingContainer:hover {
+  transform: translateX(-0.125rem);
+}
+
+.headingLabel {
+  position: absolute;
+  display: flex;
+  height: 0.75rem;
+  align-items: center;
+  font-family: var(--rs-font-mono);
+  font-size: 0.75rem;
+  color: var(--rs-color-foreground-base-primary);
+  text-transform: capitalize;
+  opacity: 0;
+  transition: opacity 300ms;
+}
+
+.headingLink {
+  color: var(--rs-color-foreground-base-primary);
+  text-align: right;
+  font-family: var(--rs-font-mono);
+  font-size: var(--rs-font-size-mini);
+  font-weight: var(--rs-font-weight-regular);
+  line-height: var(--rs-line-height-mini);
+  letter-spacing: var(--rs-letter-spacing-mini);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.headingLink:hover {
+  color: var(--rs-color-foreground-accent-primary);
+}
+
+.container:hover .headingLabel {
+  opacity: 1;
+}
+
+.connectingLine {
+  position: absolute;
+  right: 0;
+  height: 1px;
+  background-color: var(--rs-color-background-neutral-emphasis);
+}
+
+.scrollMarkerContainer {
+  position: absolute;
+  right: 0;
+  z-index: 20;
+  transition: opacity 300ms;
+  pointer-events: none;
+}
+
+.scrollMarkerContainerReady {
+  opacity: 1;
+}
+
+.scrollMarkerContainerNotReady {
+  opacity: 0;
+}
+
+.scrollMarkerLine {
+  height: 1px;
+  width: 1rem;
+  background-color: var(--rs-color-foreground-accent-primary);
+}
+
+.scrollMarkerText {
+  position: absolute;
+  top: 0;
+  left: -2.5rem;
+  transform: translateY(-50%);
+  font-family: var(--rs-font-mono);
+  font-size: 0.75rem;
+  color: var(--rs-color-foreground-accent-primary);
+  transition: opacity 300ms;
+}
+
+.container:hover .scrollMarkerText {
+  opacity: 0;
+}

package/src/themes/paper/ReadingProgress.tsx

@@ -0,0 +1,294 @@
+'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'
+
+interface Heading {
+  title: string
+  level: number
+  id: string
+  url: string
+  yPosition: number
+}
+
+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 }
+}
+
+function snapToTick(value: number, maxPosition: number): number {
+  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
+
+  const resolved: Heading[] = []
+  let lastUsedPos = -TICK_HEIGHT
+
+  for (const heading of headings) {
+    let newPos = heading.yPosition
+    if (newPos <= lastUsedPos) {
+      newPos = lastUsedPos + TICK_HEIGHT
+    }
+    resolved.push({ ...heading, yPosition: newPos })
+    lastUsedPos = newPos
+  }
+
+  // Backward pass: clamp-and-shift to prevent overlapping positions
+  for (let i = resolved.length - 1; i >= 0; i--) {
+    const maxAllowed =
+      i === resolved.length - 1
+        ? maxPosition
+        : resolved[i + 1].yPosition - TICK_HEIGHT
+
+    const clampedPos = Math.max(0, maxAllowed)
+    if (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
+        if (resolved[j].yPosition > upperBound) {
+          resolved[j] = { ...resolved[j], yPosition: Math.max(0, upperBound) }
+        } else {
+          break
+        }
+      }
+    }
+  }
+
+  return resolved
+}
+
+interface ReadingProgressProps {
+  items: TocItem[]
+}
+
+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 { 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 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 { 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)
+
+        return {
+          title: tocItem.title,
+          level: tocItem.depth,
+          id,
+          url: tocItem.url,
+          yPosition: yPos,
+        }
+      })
+      .filter((item): item is Heading => item !== null)
+
+    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 { top, height } = article.getBoundingClientRect()
+    const { height: cHeight } = container.getBoundingClientRect()
+    const viewportHeight = window.innerHeight
+    const { maxPosition: maxPos } = calculateTickBounds(cHeight)
+
+    let newScrollPos: number
+    if (top > 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 prevScrollPos = scrollPosRef.current
+    if (newScrollPos !== prevScrollPos) {
+      scrollPosRef.current = newScrollPos
+      scrollMarker.style.top = `${newScrollPos}px`
+
+      const textEl = scrollMarker.querySelector('[data-scroll-text]')
+      if (textEl) {
+        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'))
+        if (tickPos < newScrollPos) {
+          tick.classList.remove(styles.tickLineAfter)
+          tick.classList.add(styles.tickLineBefore)
+        } else {
+          tick.classList.remove(styles.tickLineBefore)
+          tick.classList.add(styles.tickLineAfter)
+        }
+      })
+    }
+  }, [])
+
+  useEffect(() => {
+    recalcHeadings()
+    handleScroll()
+    setReady(true)
+
+    const article = document.querySelector(ARTICLE_SELECTOR)
+    let ro: ResizeObserver | undefined
+    if (article) {
+      ro = new ResizeObserver(() => {
+        recalcHeadings()
+        handleScroll()
+      })
+      ro.observe(article)
+    }
+
+    window.addEventListener('resize', recalcHeadings)
+    window.addEventListener('scroll', handleScroll, { passive: true })
+
+    return () => {
+      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 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' })
+  }
+
+  const scrollToHeading = (id: string): void => {
+    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 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}>
+      <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>
+        ))}
+
+        {headings.map((h, i) => (
+          <div key={h.id || i} className={styles.headingContainer}>
+            <div
+              className={styles.headingLabel}
+              style={{
+                top: `${h.yPosition - 6}px`,
+                right: '24px',
+                zIndex: h.level < 4 ? 10 : 0,
+                transitionDelay: `${50 * i}ms`,
+              }}
+            >
+              <a
+                href={h.url}
+                className={styles.headingLink}
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  scrollToHeading(h.id)
+                }}
+              >
+                {h.title}
+              </a>
+            </div>
+          </div>
+        ))}
+
+        {headings.map((h, i) => (
+          <div
+            key={`line-${i}`}
+            className={styles.connectingLine}
+            style={{
+              top: `${h.yPosition}px`,
+              width: `${Math.max(4, (3 - h.level) * 4 + 12)}px`,
+            }}
+          />
+        ))}
+
+        <div
+          ref={scrollMarkerRef}
+          className={cx(
+            styles.scrollMarkerContainer,
+            ready ? styles.scrollMarkerContainerReady : styles.scrollMarkerContainerNotReady
+          )}
+          style={{ top: '0px' }}
+        >
+          <div className={styles.scrollMarkerLine} />
+          <span data-scroll-text className={styles.scrollMarkerText}>
+            0.00
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/themes/paper/index.ts

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