npm - mkdnsite - Versions diffs - 0.0.1 - Mend

mkdnsite 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/LICENSE +21 -0
package/README.md +211 -0
package/package.json +72 -0
package/src/adapters/cloudflare.ts +85 -0
package/src/adapters/fly.ts +22 -0
package/src/adapters/local.ts +153 -0
package/src/adapters/netlify.ts +17 -0
package/src/adapters/types.ts +54 -0
package/src/adapters/vercel.ts +48 -0
package/src/cli.ts +140 -0
package/src/client/scripts.ts +106 -0
package/src/config/defaults.ts +68 -0
package/src/config/schema.ts +192 -0
package/src/content/filesystem.ts +210 -0
package/src/content/frontmatter.ts +66 -0
package/src/content/github.ts +211 -0
package/src/content/types.ts +86 -0
package/src/discovery/llmstxt.ts +70 -0
package/src/handler.ts +188 -0
package/src/index.ts +57 -0
package/src/negotiate/accept.ts +72 -0
package/src/negotiate/headers.ts +56 -0
package/src/render/bun-native.ts +54 -0
package/src/render/components/index.ts +149 -0
package/src/render/page-shell.ts +121 -0
package/src/render/portable.ts +222 -0
package/src/render/types.ts +74 -0
package/src/theme/prose-css.ts +377 -0

package/src/render/page-shell.ts ADDED Viewed

@@ -0,0 +1,121 @@
+import type { MkdnSiteConfig } from '../config/schema.ts'
+import type { MarkdownMeta, NavNode } from '../content/types.ts'
+import { THEME_CSS } from '../theme/prose-css.ts'
+import { CLIENT_SCRIPTS } from '../client/scripts.ts'
+interface PageShellProps {
+  renderedContent: string
+  meta: MarkdownMeta
+  config: MkdnSiteConfig
+  nav?: NavNode
+  currentSlug: string
+}
+/**
+ * Render a full HTML page wrapping the markdown content.
+ * This is pure SSR — no client-side React hydration required.
+ */
+export function renderPage (props: PageShellProps): string {
+  const { renderedContent, meta, config, nav, currentSlug } = props
+  const title = meta.title != null
+    ? `${meta.title} — ${config.site.title}`
+    : config.site.title
+  const description = meta.description ?? config.site.description ?? ''
+  const lang = config.site.lang ?? 'en'
+  const navHtml = (config.theme.showNav && nav != null)
+    ? renderNav(nav, currentSlug)
+    : ''
+  const clientScripts = config.client.enabled
+    ? CLIENT_SCRIPTS(config.client)
+    : ''
+  const themeToggleEnabled = config.client.enabled && config.client.themeToggle
+  const colorScheme = config.theme.colorScheme ?? 'system'
+  // Blocking script to set data-theme before paint (prevents FOUC)
+  const themeInitScript = colorScheme !== 'system'
+    // Fixed color scheme: always use the configured value
+    ? `<script>document.documentElement.setAttribute("data-theme","${colorScheme}")</script>`
+    : themeToggleEnabled
+      // System default + toggle: check localStorage first, then system preference
+      ? '<script>(function(){var t=localStorage.getItem("mkdn-theme");if(t==="dark"||t==="light"){document.documentElement.setAttribute("data-theme",t)}else{document.documentElement.setAttribute("data-theme",window.matchMedia("(prefers-color-scheme:dark)").matches?"dark":"light")}})()</script>'
+      // System default, no toggle: just respect system preference
+      : '<script>(function(){document.documentElement.setAttribute("data-theme",window.matchMedia("(prefers-color-scheme:dark)").matches?"dark":"light")})()</script>'
+  const themeToggleHtml = themeToggleEnabled
+    ? `<button class="mkdn-theme-toggle" type="button" aria-label="Toggle theme">
+      <svg class="mkdn-icon-sun" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
+      <svg class="mkdn-icon-moon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
+    </button>`
+    : ''
+  return `<!DOCTYPE html>
+<html lang="${esc(lang)}">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>${esc(title)}</title>
+  ${description !== '' ? `<meta name="description" content="${esc(description)}">` : ''}
+  <meta name="generator" content="mkdnsite">
+  ${config.client.math ? '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16/dist/katex.min.css" crossorigin="anonymous">' : ''}
+  <style>${THEME_CSS}</style>
+  ${themeInitScript}
+</head>
+<body>
+  ${themeToggleHtml}
+  <div class="mkdn-layout">
+    ${navHtml !== '' ? `<nav class="mkdn-nav" aria-label="Site navigation">${navHtml}</nav>` : ''}
+    <main class="mkdn-main">
+      <article class="mkdn-article mkdn-prose">
+        ${renderedContent}
+      </article>
+      <footer class="mkdn-footer">
+        <p>Powered by <a href="https://mkdn.site">mkdnsite</a></p>
+      </footer>
+    </main>
+  </div>
+  ${clientScripts}
+</body>
+</html>`
+}
+export function render404 (config: MkdnSiteConfig): string {
+  return renderPage({
+    renderedContent: '<h1>404 — Page Not Found</h1><p>The page you\'re looking for doesn\'t exist.</p><p><a href="/">← Back to home</a></p>',
+    meta: { title: 'Not Found' },
+    config,
+    currentSlug: ''
+  })
+}
+function renderNav (node: NavNode, currentSlug: string, depth = 0): string {
+  if (depth === 0) {
+    const items = node.children.map(c => renderNav(c, currentSlug, 1)).join('\n')
+    return `<div class="mkdn-nav-inner"><ul class="mkdn-nav-list">${items}</ul></div>`
+  }
+  const isActive = currentSlug === node.slug
+  if (node.isSection && node.children.length > 0) {
+    const childItems = node.children
+      .map(c => renderNav(c, currentSlug, depth + 1))
+      .join('\n')
+    return `<li class="mkdn-nav-section">
+      <span class="mkdn-nav-section-title">${esc(node.title)}</span>
+      <ul>${childItems}</ul>
+    </li>`
+  }
+  return `<li${isActive ? ' class="active"' : ''}><a href="${node.slug}"${isActive ? ' aria-current="page"' : ''}>${esc(node.title)}</a></li>`
+}
+function esc (str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}

package/src/render/portable.ts ADDED Viewed

@@ -0,0 +1,222 @@
+import React from 'react'
+import { renderToString } from 'react-dom/server'
+import Markdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import remarkMath from 'remark-math'
+import { remarkAlert } from 'remark-github-blockquote-alert'
+import rehypeSlug from 'rehype-slug'
+import rehypeKatex from 'rehype-katex'
+import rehypeRaw from 'rehype-raw'
+import rehypeSanitize from 'rehype-sanitize'
+import { defaultSchema } from 'hast-util-sanitize'
+import type { ReactElement } from 'react'
+import type { Highlighter } from 'shiki'
+import type { ComponentOverrides } from '../config/schema.ts'
+import type { MarkdownRenderer } from './types.ts'
+import { buildComponents } from './components/index.ts'
+/**
+ * Extended sanitization schema.
+ * Starts from the GitHub-style default and adds support for:
+ * - className on div, span, p, svg, path (alerts, KaTeX)
+ * - SVG elements and attributes (alert icons)
+ * - KaTeX attributes (style, aria)
+ */
+const sanitizeSchema = {
+  ...defaultSchema,
+  tagNames: [
+    ...(defaultSchema.tagNames ?? []),
+    'svg', 'path', 'span'
+  ],
+  attributes: {
+    ...defaultSchema.attributes,
+    div: [...(defaultSchema.attributes?.div ?? []), 'className', 'dir'],
+    span: [...(defaultSchema.attributes?.span ?? []), 'className', 'style'],
+    p: [...(defaultSchema.attributes?.p ?? []), 'className'],
+    svg: ['viewBox', 'width', 'height', 'ariaHidden', 'fill', 'xmlns', 'className'],
+    path: ['d', 'fill', 'fillRule']
+  }
+}
+/**
+ * Portable markdown renderer using react-markdown.
+ *
+ * Works in any JavaScript runtime (Bun, Node, CF Workers, Deno).
+ * Uses remark-gfm for GitHub-Flavored Markdown support and
+ * rehype plugins for heading IDs and anchor links.
+ */
+export class PortableRenderer implements MarkdownRenderer {
+  readonly engine = 'portable' as const
+  private readonly highlighter?: Highlighter
+  private readonly syntaxTheme?: string
+  private readonly syntaxThemeDark?: string
+  private readonly math: boolean
+  constructor (highlighter?: Highlighter, syntaxTheme?: string, syntaxThemeDark?: string, math?: boolean) {
+    this.highlighter = highlighter
+    this.syntaxTheme = syntaxTheme
+    this.syntaxThemeDark = syntaxThemeDark
+    this.math = math !== false
+  }
+  renderToElement (markdown: string, overrides?: ComponentOverrides): ReactElement {
+    const components = buildComponents(overrides)
+    // Map our ComponentOverrides to react-markdown's expected component shape
+    const rmComponents = mapToReactMarkdownComponents(
+      components,
+      this.highlighter,
+      this.syntaxTheme,
+      this.syntaxThemeDark
+    )
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const remarkPlugins: any[] = [remarkGfm, remarkAlert]
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const rehypePlugins: any[] = [rehypeSlug, rehypeRaw, [rehypeSanitize, sanitizeSchema]]
+    if (this.math) {
+      remarkPlugins.push(remarkMath)
+      // rehype-katex must run before rehype-raw
+      rehypePlugins.splice(1, 0, rehypeKatex)
+    }
+    return React.createElement(Markdown, {
+      remarkPlugins,
+      rehypePlugins,
+      components: rmComponents
+    }, markdown)
+  }
+  renderToHtml (markdown: string, overrides?: ComponentOverrides): string {
+    const element = this.renderToElement(markdown, overrides)
+    return renderToString(element)
+  }
+}
+/**
+ * Extract raw text from React children recursively.
+ * Needed to get the source code string from react-markdown's code element.
+ */
+function extractText (children: unknown): string {
+  if (typeof children === 'string') return children
+  if (typeof children === 'number') return String(children)
+  if (children == null || typeof children === 'boolean') return ''
+  if (Array.isArray(children)) return children.map(extractText).join('')
+  if (typeof children === 'object' && 'props' in (children as Record<string, unknown>)) {
+    const props = (children as Record<string, unknown>).props as Record<string, unknown>
+    return extractText(props.children)
+  }
+  return ''
+}
+/**
+ * Map our ComponentOverrides type to react-markdown's Components type.
+ * react-markdown passes slightly different props, so we adapt here.
+ */
+function mapToReactMarkdownComponents (
+  overrides: ComponentOverrides,
+  highlighter?: Highlighter,
+  syntaxTheme?: string,
+  syntaxThemeDark?: string
+): Record<string, React.ComponentType<Record<string, unknown>>> {
+  const mapped: Record<string, React.ComponentType<Record<string, unknown>>> = {}
+  if (overrides.h1 != null) {
+    const H1 = overrides.h1
+    mapped.h1 = (props: Record<string, unknown>) =>
+      React.createElement(H1, {
+        id: props.id as string | undefined,
+        level: 1
+      }, props.children as React.ReactNode)
+  }
+  if (overrides.h2 != null) {
+    const H2 = overrides.h2
+    mapped.h2 = (props: Record<string, unknown>) =>
+      React.createElement(H2, {
+        id: props.id as string | undefined,
+        level: 2
+      }, props.children as React.ReactNode)
+  }
+  if (overrides.h3 != null) {
+    const H3 = overrides.h3
+    mapped.h3 = (props: Record<string, unknown>) =>
+      React.createElement(H3, {
+        id: props.id as string | undefined,
+        level: 3
+      }, props.children as React.ReactNode)
+  }
+  // Direct pass-through for components with matching prop shapes
+  const directMappings: Array<keyof ComponentOverrides> = [
+    'p', 'a', 'img', 'blockquote', 'table', 'thead', 'tbody',
+    'tr', 'th', 'td', 'ul', 'ol', 'li', 'hr', 'code'
+  ]
+  for (const key of directMappings) {
+    if (overrides[key] != null) {
+      mapped[key] = overrides[key] as React.ComponentType<Record<string, unknown>>
+    }
+  }
+  // Code block handling: use shiki when available, otherwise fall back to default
+  if (highlighter != null && syntaxTheme != null) {
+    const loadedLangs = new Set(highlighter.getLoadedLanguages())
+    const darkTheme = syntaxThemeDark
+    const lightTheme = syntaxTheme
+    mapped.pre = (props: Record<string, unknown>) => {
+      const children = props.children as React.ReactElement
+      const codeProps = children?.props as Record<string, unknown> | undefined
+      const className = (codeProps?.className as string) ?? ''
+      const langMatch = className.match(/language-(\S+)/)
+      const language = langMatch?.[1]
+      // Extract raw code text from React children
+      const raw = extractText(codeProps?.children).replace(/\n$/, '')
+      // Only use shiki if the language is loaded
+      if (language != null && loadedLangs.has(language)) {
+        const themeOpts = darkTheme != null
+          ? { themes: { light: lightTheme, dark: darkTheme }, defaultColor: false as const }
+          : { theme: lightTheme }
+        const html = highlighter.codeToHtml(raw, { lang: language, ...themeOpts })
+        return React.createElement('div', {
+          className: 'mkdn-code-block',
+          'data-language': language,
+          dangerouslySetInnerHTML: { __html: html }
+        })
+      }
+      // Fall back to default pre/code rendering
+      if (overrides.pre != null) {
+        const Pre = overrides.pre
+        return React.createElement(Pre, {
+          language: language != null && language !== '' ? language : undefined
+        }, codeProps?.children as React.ReactNode)
+      }
+      return React.createElement('pre', null,
+        React.createElement('code', {
+          className: language != null ? `language-${language}` : undefined
+        }, codeProps?.children as React.ReactNode)
+      )
+    }
+  } else if (overrides.pre != null) {
+    const Pre = overrides.pre
+    mapped.pre = (props: Record<string, unknown>) => {
+      const children = props.children as React.ReactElement
+      const codeProps = children?.props as Record<string, unknown> | undefined
+      const className = (codeProps?.className as string) ?? ''
+      const language = className.replace('language-', '')
+      return React.createElement(Pre, {
+        language: language !== '' ? language : undefined
+      }, codeProps?.children as React.ReactNode)
+    }
+  }
+  return mapped
+}

package/src/render/types.ts ADDED Viewed

@@ -0,0 +1,74 @@
+import type { ReactElement } from 'react'
+import type { Highlighter } from 'shiki'
+import type { ComponentOverrides, RendererEngine } from '../config/schema.ts'
+/**
+ * Markdown renderer interface.
+ *
+ * Implementations convert markdown strings into React elements
+ * that can be rendered to HTML via renderToString().
+ *
+ * The component overrides allow users to customize how each
+ * markdown element is rendered (headings, links, code blocks, etc.).
+ */
+export interface MarkdownRenderer {
+  /** Which engine is actually in use */
+  readonly engine: RendererEngine
+  /**
+   * Render a markdown string to a React element tree.
+   * The returned element can be passed to renderToString().
+   */
+  renderToElement: (markdown: string, overrides?: ComponentOverrides) => ReactElement
+  /**
+   * Render a markdown string directly to an HTML string.
+   * Convenience method that calls renderToElement + renderToString.
+   */
+  renderToHtml: (markdown: string, overrides?: ComponentOverrides) => string
+}
+export interface RendererOptions {
+  engine?: RendererEngine
+  syntaxTheme?: string
+  syntaxThemeDark?: string
+  math?: boolean
+}
+/**
+ * Create the appropriate renderer for the current runtime and config.
+ */
+export async function createRenderer (engineOrOpts: RendererEngine | RendererOptions = 'portable'): Promise<MarkdownRenderer> {
+  const opts: RendererOptions = typeof engineOrOpts === 'string'
+    ? { engine: engineOrOpts }
+    : engineOrOpts
+  const engine = opts.engine ?? 'portable'
+  // Create shiki highlighter if syntax themes are provided
+  let highlighter: Highlighter | undefined
+  if (opts.syntaxTheme != null) {
+    const { createHighlighter } = await import('shiki')
+    const themes = [opts.syntaxTheme]
+    if (opts.syntaxThemeDark != null) themes.push(opts.syntaxThemeDark)
+    const langs = [
+      'javascript', 'typescript', 'jsx', 'tsx',
+      'html', 'css', 'json', 'jsonc',
+      'bash', 'shell', 'sh', 'zsh',
+      'python', 'ruby', 'go', 'rust', 'java', 'c', 'cpp',
+      'yaml', 'toml', 'markdown', 'sql', 'graphql',
+      'diff', 'xml', 'docker', 'nginx', 'ini'
+    ]
+    highlighter = await createHighlighter({ themes, langs })
+  }
+  if (engine === 'bun-native') {
+    if (typeof Bun !== 'undefined' && Bun.markdown != null) {
+      const { BunNativeRenderer } = await import('./bun-native.ts')
+      return new BunNativeRenderer()
+    }
+    console.warn('mkdnsite: bun-native renderer requested but Bun.markdown not available. Falling back to portable.')
+  }
+  const { PortableRenderer } = await import('./portable.ts')
+  return new PortableRenderer(highlighter, opts.syntaxTheme, opts.syntaxThemeDark, opts.math)
+}