@seanmozeik/markdown-display 0.3.5 → 0.4.0

package/src/lib/parser.ts

@@ -0,0 +1,299 @@
+// Src/lib/parser.ts
+import { Effect, Schema } from 'effect';
+import { Marked, type RendererObject, type Token } from 'marked';
+
+import { theme } from '../ui/themes';
+import { getBoldStyle, getItalicStyle } from '../ui/themes/semantic';
+import { renderBlockquote } from './elements/blockquote';
+import { type CodeConfig, renderInlineCode } from './elements/code';
+import { renderHeading } from './elements/heading';
+import { renderLink } from './elements/link';
+import { renderListItem } from './elements/list';
+import { renderTable } from './elements/table';
+import { renderText } from './elements/text';
+import { renderCodeBlocksParallel } from './render-code-blocks';
+
+interface ParseOptions {
+  width: number;
+  osc8?: boolean | 'auto';
+  wrap?: boolean;
+  hyphenation?: boolean;
+  nerdFonts?: boolean;
+  continuation?: string;
+}
+
+class MarkdownParseError extends Schema.TaggedErrorClass<MarkdownParseError>()(
+  'MarkdownParseError',
+  { cause: Schema.Unknown },
+) {}
+
+// Type for marked renderer context (this binding)
+interface RendererThis {
+  parser: { parse(tokens: Token[]): string; parseInline(tokens: Token[]): string };
+}
+
+const RANDOM_ID_RADIX = 36;
+
+interface ListItemToken {
+  tokens: Token[];
+  task?: boolean;
+  checked?: boolean;
+}
+
+interface NestedList {
+  items: ListItemToken[];
+  ordered: boolean;
+  start?: number;
+}
+
+interface CodeToken {
+  text: string;
+  lang?: string;
+}
+
+const isNestedListToken = (
+  token: Token,
+): token is Token & { items: ListItemToken[]; ordered: boolean; start?: number } =>
+  token.type === 'list' && 'items' in token && Array.isArray(token.items);
+
+const isCodeToken = (token: Token): token is Token & CodeToken =>
+  token.type === 'code' && 'text' in token && typeof token.text === 'string';
+
+const createRenderer = (
+  options: ParseOptions,
+  codeBlocks: Map<string, { code: string; lang: string }>,
+): RendererObject => {
+  const classifyListItemTokens = (
+    item: ListItemToken,
+  ): { inlineTokens: Token[]; nestedLists: NestedList[]; blockContent: Token[] } => {
+    const INLINE_TYPES = new Set([
+      'text',
+      'strong',
+      'em',
+      'codespan',
+      'link',
+      'image',
+      'br',
+      'del',
+      'escape',
+      'checkbox',
+    ]);
+
+    const inlineTokens: Token[] = [];
+    const nestedLists: NestedList[] = [];
+    const blockContent: Token[] = [];
+
+    for (const t of item.tokens) {
+      if (isNestedListToken(t)) {
+        nestedLists.push({
+          items: t.items.map((listItem) => ({
+            tokens: listItem.tokens,
+            ...(listItem.task === undefined ? {} : { task: listItem.task }),
+            ...(listItem.checked === undefined ? {} : { checked: listItem.checked }),
+          })),
+          ordered: t.ordered,
+          ...(typeof t.start === 'number' ? { start: t.start } : {}),
+        });
+      } else if (isCodeToken(t)) {
+        const id = `__CODE_${Date.now()}_${Math.random().toString(RANDOM_ID_RADIX)}__`;
+        codeBlocks.set(id, { code: t.text, lang: t.lang ?? '' });
+        blockContent.push({ raw: id, text: id, type: 'html' } as Token);
+      } else if (t.type === 'paragraph' && 'tokens' in t) {
+        inlineTokens.push(...t.tokens);
+      } else if (t.type === 'space') {
+        // Whitespace between block content - skip
+      } else if (t.type === 'html' && 'block' in t && t.block === false) {
+        inlineTokens.push(t);
+      } else if (INLINE_TYPES.has(t.type)) {
+        inlineTokens.push(t);
+      } else {
+        blockContent.push(t);
+      }
+    }
+
+    return { blockContent, inlineTokens, nestedLists };
+  };
+
+  const renderListWithDepth = (
+    parser: RendererThis['parser'],
+    items: ListItemToken[],
+    ordered: boolean,
+    start: number,
+    depth: number,
+  ): string => {
+    return items
+      .map((item, i) => {
+        const { inlineTokens, nestedLists, blockContent } = classifyListItemTokens(item);
+
+        const text = parser.parseInline(inlineTokens);
+        const renderedItem = renderListItem(text, ordered, depth, start + i, {
+          width: options.width,
+          ...(item.checked === undefined ? {} : { checked: item.checked }),
+          ...(item.task === undefined ? {} : { task: item.task }),
+          ...(options.hyphenation === undefined ? {} : { hyphenation: options.hyphenation }),
+          ...(options.nerdFonts === undefined ? {} : { nerdFonts: options.nerdFonts }),
+        });
+
+        // Render any block content (tables, blockquotes, code blocks, etc.)
+        const blockRendered = blockContent.length > 0 ? parser.parse(blockContent).trim() : '';
+
+        // Recursively render nested lists
+        const nestedRendered = nestedLists
+          .map((nested) =>
+            renderListWithDepth(parser, nested.items, nested.ordered, nested.start ?? 1, depth + 1),
+          )
+          .join('\n');
+
+        // Join: item text, then block content, then nested lists
+        const parts = [renderedItem];
+        if (blockRendered) {
+          parts.push(blockRendered);
+        }
+        if (nestedRendered) {
+          parts.push(nestedRendered);
+        }
+        return parts.join('\n');
+      })
+      .join('\n');
+  };
+
+  return {
+    blockquote(this: RendererThis, { tokens }: { tokens: Token[] }): string {
+      // Blockquotes contain block-level tokens (paragraphs, lists, etc.), not inline
+      const text = this.parser.parse(tokens);
+      const blockquoteConfig: { width: number; hyphenation?: boolean } = { width: options.width };
+      if (options.hyphenation !== undefined) {
+        blockquoteConfig.hyphenation = options.hyphenation;
+      }
+      return `${renderBlockquote(text.trim(), blockquoteConfig)}\n\n`;
+    },
+    br(): string {
+      return '\n';
+    },
+
+    checkbox(): string {
+      // Return empty - we render checkboxes in renderListItem based on task/checked flags
+      return '';
+    },
+
+    code({ text, lang }: { text: string; lang?: string }): string {
+      const id = `__CODE_${Date.now()}_${Math.random().toString(RANDOM_ID_RADIX)}__`;
+      codeBlocks.set(id, { code: text, lang: lang ?? '' });
+      return id;
+    },
+
+    codespan({ text }: { text: string }): string {
+      return renderInlineCode(text);
+    },
+
+    em(this: RendererThis, { tokens }: { tokens: Token[] }): string {
+      const text = this.parser.parseInline(tokens);
+      return getItalicStyle()(text);
+    },
+
+    heading(this: RendererThis, { tokens, depth }: { tokens: Token[]; depth: number }): string {
+      const text = this.parser.parseInline(tokens);
+      return renderHeading(text, depth, options.width);
+    },
+
+    hr(): string {
+      return `\n${'─'.repeat(options.width)}\n\n`;
+    },
+
+    html({ text }: { text: string }): string {
+      if (/^<br\s*\/?>$/iu.test(text.trim())) {
+        return '\n';
+      }
+      return text;
+    },
+
+    link(this: RendererThis, { href, tokens }: { href: string; tokens: Token[] }): string {
+      const text = this.parser.parseInline(tokens);
+      return renderLink(text, href, { osc8: options.osc8 ?? 'auto', show_urls: false });
+    },
+
+    list(
+      this: RendererThis,
+      { items, ordered, start }: { items: ListItemToken[]; ordered: boolean; start: number | '' },
+    ): string {
+      return `${renderListWithDepth(this.parser, items, ordered, typeof start === 'number' ? start : 1, 0)}\n`;
+    },
+
+    listitem(this: RendererThis, { tokens }: { tokens: Token[] }): string {
+      return this.parser.parseInline(tokens);
+    },
+
+    paragraph(this: RendererThis, { tokens }: { tokens: Token[] }): string {
+      const text = this.parser.parseInline(tokens);
+      return `${renderText(text, { hyphenation: options.hyphenation ?? true, width: options.width })}\n`;
+    },
+
+    strong(this: RendererThis, { tokens }: { tokens: Token[] }): string {
+      const text = this.parser.parseInline(tokens);
+      return getBoldStyle()(text);
+    },
+
+    table({ header, rows }: { header: { text: string }[]; rows: { text: string }[][] }): string {
+      return `${renderTable(
+        header.map((h) => h.text),
+        rows.map((row) => row.map((c) => c.text)),
+        { width: options.width },
+      )}\n`;
+    },
+  };
+};
+
+// Decode HTML entities that marked escapes (we're outputting to terminal, not HTML)
+const HTML_ENTITIES: Record<string, string> = {
+  '&#39;': "'",
+  '&amp;': '&',
+  '&gt;': '>',
+  '&lt;': '<',
+  '&quot;': '"',
+};
+
+const decodeHtmlEntities = (text: string): string =>
+  text.replaceAll(/&#?\w+;/gu, (entity) => HTML_ENTITIES[entity] ?? entity);
+
+const parseMarkdown = Effect.fn('md.parse-markdown')(function* parseMarkdownGen(
+  markdown: string,
+  options: ParseOptions,
+) {
+  const codeBlocks = new Map<string, { code: string; lang: string }>();
+
+  const marked = new Marked();
+  marked.use({ renderer: createRenderer(options, codeBlocks) });
+
+  const parsed = marked.parse(markdown);
+  let result =
+    typeof parsed === 'string'
+      ? parsed
+      : yield* Effect.tryPromise({
+          catch: (cause) => new MarkdownParseError({ cause }),
+          try: () => parsed,
+        });
+
+  result = decodeHtmlEntities(result);
+
+  if (codeBlocks.size > 0) {
+    const codeConfig: CodeConfig = {
+      continuation: options.continuation ?? '→',
+      theme: theme().shikiTheme,
+      width: options.width,
+      wrap: options.wrap ?? true,
+      ...(options.nerdFonts === undefined ? {} : { useNerdFonts: options.nerdFonts }),
+    };
+
+    const refs = [...codeBlocks.entries()].map(([id, { code, lang }]) => ({ code, id, lang }));
+
+    const renderedById = yield* renderCodeBlocksParallel(refs, codeConfig, theme().shikiTheme);
+
+    for (const [id, rendered] of renderedById) {
+      result = result.replace(id, rendered);
+    }
+  }
+
+  return result;
+});
+
+export { createRenderer, MarkdownParseError, parseMarkdown };

package/src/lib/render-code-blocks.ts

@@ -0,0 +1,25 @@
+import { Effect } from 'effect';
+
+import { type CodeConfig, formatCodeBlockBox, highlightCodeBlockSource } from './elements/code';
+
+/** Parallel Shiki passes for documents with many fences (claudewatch-style bounded concurrency). */
+export const CODE_BLOCK_HIGHLIGHT_CONCURRENCY = 8;
+
+export interface CodeBlockRef {
+  readonly id: string;
+  readonly code: string;
+  readonly lang: string;
+}
+
+export const renderCodeBlocksParallel = Effect.fn('md.render-code-blocks')(
+  (blocks: readonly CodeBlockRef[], config: CodeConfig, themeId: string) =>
+    Effect.forEach(
+      blocks,
+      (block) =>
+        Effect.gen(function* renderCodeBlockEntryGen() {
+          const highlighted = yield* highlightCodeBlockSource(block.code, block.lang, themeId);
+          return { id: block.id, rendered: formatCodeBlockBox(highlighted, block.lang, config) };
+        }),
+      { concurrency: CODE_BLOCK_HIGHLIGHT_CONCURRENCY },
+    ).pipe(Effect.map((items) => new Map(items.map((item) => [item.id, item.rendered] as const)))),
+);

package/src/lib/render.ts

@@ -0,0 +1,37 @@
+// Src/lib/render.ts
+
+import { Effect } from 'effect';
+
+import type { Config } from './config';
+import { resolveNerdFonts } from './languages';
+import { applyPadding, calculateLayout } from './layout';
+import { parseMarkdown } from './parser';
+import { getRawTerminalWidth, getTerminalWidth } from './width';
+
+export const render = Effect.fn('md.render')(function* renderGen(markdown: string, config: Config) {
+  if (!markdown.trim()) {
+    return '';
+  }
+
+  const contentWidth =
+    config.width === 'auto' ? getTerminalWidth() : getTerminalWidth(config.width);
+
+  // Use raw terminal width for centering (not capped), but capped width for content
+  const rawTerminalWidth = getRawTerminalWidth();
+
+  const layout = calculateLayout(rawTerminalWidth, contentWidth, {
+    maxWidth: config.display.maxWidth,
+    padding: config.display.padding,
+  });
+
+  const content = yield* parseMarkdown(markdown, {
+    continuation: config.code.continuation,
+    hyphenation: config.text.hyphenation,
+    nerdFonts: resolveNerdFonts(config.nerd_fonts),
+    osc8: config.links.osc8,
+    width: layout.contentWidth,
+    wrap: config.code.wrap,
+  });
+
+  return applyPadding(content, layout.sidePadding);
+});

package/src/lib/shiki.ts

@@ -0,0 +1,197 @@
+/**
+ * Shiki ANSI highlighting — lazy module load, LRU cache, safe fallbacks.
+ * Patterns from claudewatch/src/render/shiki.ts.
+ */
+import type { codeToANSI as CodeToANSI } from '@shikijs/cli';
+import { Effect, Schema } from 'effect';
+import type { BundledLanguage, BundledTheme } from 'shiki';
+
+import { themes } from '../ui/themes/generated';
+import { normalizeLang } from './languages';
+
+const BYTES_PER_KIB = 1024;
+const MAX_CODE_SIZE = 16 * BYTES_PER_KIB;
+const MAX_HIGHLIGHT_CACHE_ENTRIES = 128;
+const START_INDEX = 0;
+const TRAILING_NEWLINE_OFFSET = -1;
+const EMPTY_LENGTH = 0;
+const ANSI_SGR_PREFIX = '\u001B[';
+const ANSI_SGR_SUFFIX = 'm';
+const ITALIC_ON = '3';
+const ITALIC_OFF = '23';
+
+const makeGlobalPattern = (source: string): RegExp => new RegExp(source, 'gu');
+const ANSI_SGR_PATTERN = makeGlobalPattern(String.raw`\u001B\[([0-9;]*)m`);
+
+interface ShikiModule {
+  codeToANSI: typeof CodeToANSI;
+}
+
+class ShikiHighlightError extends Schema.TaggedErrorClass<ShikiHighlightError>()(
+  'ShikiHighlightError',
+  { cause: Schema.Unknown },
+) {}
+
+/** Languages passed to Shiki's codeToANSI (superset of icon map keys). */
+const SHIKI_SUPPORTED_LANGS = new Set<string>([
+  'apache',
+  'bash',
+  'c',
+  'clojure',
+  'cmake',
+  'cpp',
+  'csharp',
+  'css',
+  'csv',
+  'diff',
+  'dockerfile',
+  'elixir',
+  'env',
+  'erlang',
+  'fsharp',
+  'git-commit',
+  'git-rebase',
+  'go',
+  'graphql',
+  'haskell',
+  'html',
+  'http',
+  'ini',
+  'java',
+  'javascript',
+  'json',
+  'jsonc',
+  'jsonl',
+  'julia',
+  'kotlin',
+  'latex',
+  'less',
+  'lisp',
+  'lua',
+  'makefile',
+  'markdown',
+  'matlab',
+  'nginx',
+  'nim',
+  'ocaml',
+  'perl',
+  'php',
+  'plsql',
+  'powershell',
+  'prisma',
+  'python',
+  'r',
+  'regex',
+  'ruby',
+  'rust',
+  'sass',
+  'scala',
+  'scheme',
+  'scss',
+  'shell',
+  'sql',
+  'svelte',
+  'swift',
+  'tex',
+  'toml',
+  'tsx',
+  'typescript',
+  'vim',
+  'vue',
+  'wasm',
+  'xml',
+  'yaml',
+  'zig',
+  'zsh',
+  'fish',
+  'jsx',
+]);
+
+let cachedShiki: ShikiModule | null = null;
+const highlightedCodeCache = new Map<string, string>();
+
+const isBundledLanguage = (value: string): value is BundledLanguage =>
+  SHIKI_SUPPORTED_LANGS.has(value);
+const isBundledTheme = (value: string): value is BundledTheme => value in themes;
+
+const stripItalicAnsi = (code: string): string =>
+  code.replaceAll(ANSI_SGR_PATTERN, (_full, params: string) => {
+    const filtered = params
+      .split(';')
+      .filter((part) => part.length > EMPTY_LENGTH && part !== ITALIC_ON && part !== ITALIC_OFF);
+    if (filtered.length === EMPTY_LENGTH) {
+      return '';
+    }
+    return `${ANSI_SGR_PREFIX}${filtered.join(';')}${ANSI_SGR_SUFFIX}`;
+  });
+
+const loadShiki = Effect.fn('md.load-shiki')(function* loadShikiGen() {
+  cachedShiki ??= yield* Effect.tryPromise({
+    catch: (cause) => new ShikiHighlightError({ cause }),
+    try: () => import('@shikijs/cli'),
+  });
+  return cachedShiki;
+});
+
+const makeHighlightCacheKey = (code: string, lang: string, themeId: string): string =>
+  `${themeId}\u0000${lang}\u0000${code}`;
+
+const rememberHighlightedCode = (key: string, code: string): void => {
+  if (highlightedCodeCache.size >= MAX_HIGHLIGHT_CACHE_ENTRIES) {
+    const oldestKey = highlightedCodeCache.keys().next().value;
+    if (oldestKey !== undefined) {
+      highlightedCodeCache.delete(oldestKey);
+    }
+  }
+  highlightedCodeCache.set(key, code);
+};
+
+const clearHighlightCache = (): void => {
+  highlightedCodeCache.clear();
+};
+
+/**
+ * Highlight code using Shiki; returns plain code on unsupported lang/theme, size limit, or errors.
+ */
+const highlightCode = Effect.fn('md.highlight-code')(function* highlightCodeEffect(
+  code: string,
+  lang: string,
+  themeId: string,
+) {
+  if (code.length > MAX_CODE_SIZE) {
+    return code;
+  }
+
+  const langId = normalizeLang(lang);
+  if (!isBundledLanguage(langId) || !isBundledTheme(themeId)) {
+    return code;
+  }
+
+  const cacheKey = makeHighlightCacheKey(code, langId, themeId);
+  const cached = highlightedCodeCache.get(cacheKey);
+  if (cached !== undefined) {
+    return cached;
+  }
+
+  return yield* Effect.gen(function* highlightCodeInner() {
+    const shiki = yield* loadShiki();
+    const highlighted = yield* Effect.tryPromise({
+      catch: (cause) => new ShikiHighlightError({ cause }),
+      try: () => shiki.codeToANSI(code, langId, themeId),
+    });
+    const normalized = highlighted.endsWith('\n')
+      ? highlighted.slice(START_INDEX, TRAILING_NEWLINE_OFFSET)
+      : highlighted;
+    const output = stripItalicAnsi(normalized);
+    rememberHighlightedCode(cacheKey, output);
+    return output;
+  }).pipe(Effect.catch(() => Effect.succeed(code)));
+});
+
+export {
+  clearHighlightCache,
+  highlightCode,
+  SHIKI_SUPPORTED_LANGS,
+  ShikiHighlightError,
+  stripItalicAnsi,
+};

package/src/lib/width.ts

@@ -0,0 +1,21 @@
+// Src/lib/width.ts
+const MIN_WIDTH = 40;
+const MAX_AUTO_WIDTH = 120;
+const DEFAULT_WIDTH = 80;
+const DEFAULT_TERMINAL_ROWS = 24;
+
+export const getTerminalWidth = (override?: number): number => {
+  if (override !== undefined) {
+    return Math.max(MIN_WIDTH, override);
+  }
+
+  const detected = process.stdout.columns;
+  const columns = detected > 0 ? detected : DEFAULT_WIDTH;
+  return Math.max(MIN_WIDTH, Math.min(MAX_AUTO_WIDTH, columns));
+};
+
+export const getRawTerminalWidth = (): number =>
+  process.stdout.columns > 0 ? process.stdout.columns : DEFAULT_WIDTH;
+
+export const getTerminalHeight = (): number =>
+  process.stdout.rows > 0 ? process.stdout.rows : DEFAULT_TERMINAL_ROWS;

package/src/paths.ts

@@ -0,0 +1,14 @@
+import { join } from 'node:path';
+
+import { CONFIG_DIR_NAME } from './constants';
+
+export const expandHome = (pathStr: string): string =>
+  pathStr === '~' || pathStr.startsWith('~/')
+    ? `${process.env['HOME'] ?? ''}${pathStr.slice(1)}`
+    : pathStr;
+
+export const configRoot = (): string =>
+  process.env['MD_CONFIG_HOME'] ??
+  `${process.env['XDG_CONFIG_HOME'] ?? `${process.env['HOME'] ?? '.'}/.config`}/${CONFIG_DIR_NAME}`;
+
+export const configTomlPath = (): string => join(configRoot(), 'config.toml');

package/src/ui/banner.ts

@@ -0,0 +1,23 @@
+import gradient from 'gradient-string';
+
+import { getGradientColors } from './themes/semantic';
+
+// Create gradient lazily to pick up theme changes
+const getBannerGradient = (): ReturnType<typeof gradient> =>
+  gradient([...getGradientColors().banner]);
+
+/**
+ * Display the ASCII art banner with gradient colors
+ */
+export const showBanner = (): void => {
+  const banner = `\n                    __
+     ____ ___  ____/ /
+    / __ \`__ \\/ __  / 
+   / / / / / / /_/ /  
+  /_/ /_/ /_/\\__,_/   
+                      
+  `;
+
+  console.log(`\n${getBannerGradient()(banner)}`);
+  console.log();
+};