@raystack/chronicle 0.6.1 → 0.7.0

package/dist/cli/index.js

@@ -1,5 +1,35 @@
 import { createRequire } from "node:module";
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toESMCache_node;
+var __toESMCache_esm;
+var __toESM = (mod, isNodeMode, target) => {
+  var canCache = mod != null && typeof mod === "object";
+  if (canCache) {
+    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
+    var cached = cache.get(mod);
+    if (cached)
+      return cached;
+  }
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: __accessProp.bind(mod, key),
+        enumerable: true
+      });
+  if (canCache)
+    cache.set(mod, to);
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
 var __returnValue = (v) => v;
 function __exportSetter(name, newValue) {
   this[name] = __returnValue.bind(null, newValue);
@@ -33,11 +63,146 @@ var init_remark_strip_md_extensions = __esm(() => {
   remark_strip_md_extensions_default = remarkStripMdExtensions;
 });
 
-// src/lib/remark-unused-directives.ts
+// ../../node_modules/.bun/reading-time@1.5.0/node_modules/reading-time/lib/reading-time.js
+var require_reading_time = __commonJS((exports, module) => {
+  /*!
+   * reading-time
+   * Copyright (c) Nicolas Gryman <ngryman@gmail.com>
+   * MIT Licensed
+   */
+  function codeIsInRanges(number, arrayOfRanges) {
+    return arrayOfRanges.some(([lowerBound, upperBound]) => lowerBound <= number && number <= upperBound);
+  }
+  function isCJK(c) {
+    if (typeof c !== "string") {
+      return false;
+    }
+    const charCode = c.charCodeAt(0);
+    return codeIsInRanges(charCode, [
+      [12352, 12447],
+      [19968, 40959],
+      [44032, 55203],
+      [131072, 191456]
+    ]);
+  }
+  function isAnsiWordBound(c) {
+    return ` 
+\r	`.includes(c);
+  }
+  function isPunctuation(c) {
+    if (typeof c !== "string") {
+      return false;
+    }
+    const charCode = c.charCodeAt(0);
+    return codeIsInRanges(charCode, [
+      [33, 47],
+      [58, 64],
+      [91, 96],
+      [123, 126],
+      [12288, 12351],
+      [65280, 65519]
+    ]);
+  }
+  function readingTime(text, options = {}) {
+    let words = 0, start = 0, end = text.length - 1;
+    const wordsPerMinute = options.wordsPerMinute || 200;
+    const isWordBound = options.wordBound || isAnsiWordBound;
+    while (isWordBound(text[start]))
+      start++;
+    while (isWordBound(text[end]))
+      end--;
+    const normalizedText = `${text}
+`;
+    for (let i = start;i <= end; i++) {
+      if (isCJK(normalizedText[i]) || !isWordBound(normalizedText[i]) && (isWordBound(normalizedText[i + 1]) || isCJK(normalizedText[i + 1]))) {
+        words++;
+      }
+      if (isCJK(normalizedText[i])) {
+        while (i <= end && (isPunctuation(normalizedText[i + 1]) || isWordBound(normalizedText[i + 1]))) {
+          i++;
+        }
+      }
+    }
+    const minutes = words / wordsPerMinute;
+    const time = Math.round(minutes * 60 * 1000);
+    const displayed = Math.ceil(minutes.toFixed(2));
+    return {
+      text: displayed + " min read",
+      minutes,
+      time,
+      words
+    };
+  }
+  module.exports = readingTime;
+});
+
+// ../../node_modules/.bun/reading-time@1.5.0/node_modules/reading-time/lib/stream.js
+var require_stream = __commonJS((exports, module) => {
+  /*!
+   * reading-time
+   * Copyright (c) Nicolas Gryman <ngryman@gmail.com>
+   * MIT Licensed
+   */
+  var readingTime = require_reading_time();
+  var Transform = __require("stream").Transform;
+  var util = __require("util");
+  function ReadingTimeStream(options) {
+    if (!(this instanceof ReadingTimeStream)) {
+      return new ReadingTimeStream(options);
+    }
+    Transform.call(this, { objectMode: true });
+    this.options = options || {};
+    this.stats = {
+      minutes: 0,
+      time: 0,
+      words: 0
+    };
+  }
+  util.inherits(ReadingTimeStream, Transform);
+  ReadingTimeStream.prototype._transform = function(chunk, encoding, callback) {
+    const stats = readingTime(chunk.toString(encoding), this.options);
+    this.stats.minutes += stats.minutes;
+    this.stats.time += stats.time;
+    this.stats.words += stats.words;
+    callback();
+  };
+  ReadingTimeStream.prototype._flush = function(callback) {
+    this.stats.text = Math.ceil(this.stats.minutes.toFixed(2)) + " min read";
+    this.push(this.stats);
+    callback();
+  };
+  module.exports = ReadingTimeStream;
+});
+
+// ../../node_modules/.bun/reading-time@1.5.0/node_modules/reading-time/index.js
+var require_reading_time2 = __commonJS((exports, module) => {
+  exports.default = module.exports = require_reading_time();
+  module.exports.readingTimeStream = require_stream();
+});
+
+// ../../node_modules/.bun/remark-reading-time@2.1.0/node_modules/remark-reading-time/index.js
 import { visit as visit2 } from "unist-util-visit";
+function readingTime({
+  attribute = "readingTime"
+} = {}) {
+  return function(info, file) {
+    let text = "";
+    visit2(info, ["text", "code"], (node) => {
+      text += node.value;
+    });
+    file.data[attribute] = import_reading_time.default(text);
+  };
+}
+var import_reading_time;
+var init_remark_reading_time = __esm(() => {
+  import_reading_time = __toESM(require_reading_time2(), 1);
+});
+
+// src/lib/remark-unused-directives.ts
+import { visit as visit3 } from "unist-util-visit";
 var remarkUnusedDirectives = () => {
   return (tree) => {
-    visit2(tree, ["textDirective"], (node) => {
+    visit3(tree, ["textDirective"], (node) => {
       const directive = node;
       if (!directive.data) {
         const hasAttributes = directive.attributes && Object.keys(directive.attributes).length > 0;
@@ -105,6 +270,7 @@ async function createViteConfig(options) {
       mdx({
         default: defineFumadocsConfig({
           mdxOptions: {
+            valueToExport: ["readingTime"],
             remarkPlugins: [
               remarkDirective,
               [remarkDirectiveAdmonition, {
@@ -126,7 +292,8 @@ async function createViteConfig(options) {
               }],
               remark_unused_directives_default,
               remark_strip_md_extensions_default,
-              remarkMdxMermaid
+              remarkMdxMermaid,
+              readingTime
             ]
           }
         })
@@ -183,6 +350,7 @@ async function createViteConfig(options) {
 }
 var init_vite_config = __esm(() => {
   init_remark_strip_md_extensions();
+  init_remark_reading_time();
   init_remark_unused_directives();
 });
 
@@ -266,6 +434,7 @@ var dirNameSchema = z.string().min(1).refine((s) => DIR_NAME_PATTERN.test(s) &&
 var contentEntrySchema = z.object({
   dir: dirNameSchema,
   label: z.string().min(1),
+  description: z.string().optional(),
   icon: z.string().optional()
 });
 var badgeVariantSchema = z.enum([
@@ -428,6 +597,7 @@ function getLatestContentRoots(config2) {
     versionLabel: config2.latest?.label ?? null,
     contentDir: c.dir,
     contentLabel: c.label,
+    contentDescription: c.description,
     contentIcon: c.icon,
     fsPath: `content/${c.dir}`,
     urlPrefix: `/${c.dir}`
@@ -442,6 +612,7 @@ function getVersionContentRoots(config2, versionDir) {
     versionLabel: version.label,
     contentDir: c.dir,
     contentLabel: c.label,
+    contentDescription: c.description,
     contentIcon: c.icon,
     fsPath: `versions/${version.dir}/${c.dir}`,
     urlPrefix: `/${version.dir}/${c.dir}`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raystack/chronicle",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Config-driven documentation framework",
   "license": "Apache-2.0",
   "type": "module",

package/src/lib/config.ts

@@ -35,6 +35,7 @@ export interface ContentRoot {
   versionLabel: string | null
   contentDir: string
   contentLabel: string
+  contentDescription?: string
   contentIcon?: string
   fsPath: string
   urlPrefix: string
@@ -46,6 +47,7 @@ export function getLatestContentRoots(config: ChronicleConfig): ContentRoot[] {
     versionLabel: config.latest?.label ?? null,
     contentDir: c.dir,
     contentLabel: c.label,
+    contentDescription: c.description,
     contentIcon: c.icon,
     fsPath: `content/${c.dir}`,
     urlPrefix: `/${c.dir}`,
@@ -64,6 +66,7 @@ export function getVersionContentRoots(
     versionLabel: version.label,
     contentDir: c.dir,
     contentLabel: c.label,
+    contentDescription: c.description,
     contentIcon: c.icon,
     fsPath: `versions/${version.dir}/${c.dir}`,
     urlPrefix: `/${version.dir}/${c.dir}`,
@@ -79,6 +82,7 @@ export interface VersionDescriptor {
 
 export interface LandingEntry {
   label: string
+  description?: string
   href: string
   contentDir: string
   icon?: string
@@ -95,6 +99,7 @@ export function getLandingEntries(
 
   return roots.map((r) => ({
     label: r.contentLabel,
+    description: r.contentDescription,
     href: r.urlPrefix,
     contentDir: r.contentDir,
     icon: r.contentIcon,

package/src/lib/source.ts

@@ -206,6 +206,7 @@ export function extractFrontmatter(page: { data: unknown }, fallbackTitle?: stri
     order: d.order as number | undefined,
     icon: d.icon as string | undefined,
     lastModified: d.lastModified as string | undefined,
+    _readingTime: d._readingTime as number | undefined,
   };
 }
 
@@ -217,13 +218,20 @@ export function getOriginalPath(page: { data: unknown }): string {
   return ((page.data as Record<string, unknown>)._originalPath as string) ?? '';
 }
 
-const ssrModules = import.meta.glob<{ default?: MDXContent; toc?: TableOfContents }>(
+interface ReadingTime {
+  text: string;
+  minutes: number;
+  words: number;
+  time: number;
+}
+
+const ssrModules = import.meta.glob<{ default?: MDXContent; toc?: TableOfContents; readingTime?: ReadingTime }>(
   '../../.content/**/*.{mdx,md}'
 );
 
 export async function loadPageModule(
   relativePath: string
-): Promise<{ default: MDXContent | null; toc: TableOfContents }> {
+): Promise<{ default: MDXContent | null; toc: TableOfContents; _readingTime?: number }> {
   if (!relativePath || relativePath.includes('..')) return { default: null, toc: [] };
   const withoutExt = relativePath.replace(/\.(mdx|md)$/, '');
   const key = relativePath.endsWith('.md')
@@ -232,5 +240,6 @@ export async function loadPageModule(
   const loader = ssrModules[key];
   if (!loader) return { default: null, toc: [] };
   const mod = await loader();
-  return { default: mod.default ?? null, toc: mod.toc ?? [] };
+  const minutes = mod.readingTime?.minutes;
+  return { default: mod.default ?? null, toc: mod.toc ?? [], _readingTime: minutes != null ? Math.max(1, Math.round(minutes)) : undefined };
 }

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/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/vite-config.ts

@@ -8,6 +8,7 @@ import path from 'node:path';
 import remarkDirective from 'remark-directive';
 import { type InlineConfig } from 'vite';
 import remarkStripMdExtensions from '../lib/remark-strip-md-extensions';
+import remarkReadingTime from 'remark-reading-time';
 import remarkUnusedDirectives from '../lib/remark-unused-directives';
 
 function resolveOutputDir(projectRoot: string, preset?: string): string {
@@ -55,6 +56,7 @@ export async function createViteConfig(
       mdx({
         default: defineFumadocsConfig({
           mdxOptions: {
+            valueToExport: ['readingTime'],
             remarkPlugins: [
               remarkDirective,
               [remarkDirectiveAdmonition, {
@@ -77,6 +79,7 @@ export async function createViteConfig(
               remarkUnusedDirectives,
               remarkStripMdExtensions,
               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;