Markon Publication Renderer

// Framework-Agnostic Core (Zero-DOM Isomorphic Compiler)
import { renderMarkdown, renderMarkonContent, type MarkonRenderOptions } from '@nofinite/markon';

// React Adapter (Components)
import { MarkonRender } from '@nofinite/markon/react';

import { renderMarkdown } from '@nofinite/markon';
import '@nofinite/nuicss/styles.css';

const markdownSource = `
# Designing Perceptually Uniform UI Systems with OKLCH

Modern digital interfaces require color systems that behave predictably across dark and light modes.

## The Mathematical Foundation of OKLCH

Euler's identity links five fundamental constants:

$$e^{i\\pi} + 1 = 0$$

:::info
All components strictly consume tokens from \`@nofinite/nuicss\`.
:::
`;

// Compile to full editorial HTML with KaTeX and lowlight highlighting:
const html = renderMarkdown(markdownSource, {
  layout: 'article',
  metadata: {
    title: 'Designing Perceptually Uniform UI Systems with OKLCH',
    author: {
      name: 'Elena Rostova',
      title: 'Principal Systems Architect'
    },
    publishedAt: '2026-03-15',
    category: 'Architecture'
  },
  showTOC: true
});

// Inject into response:
// res.setHeader('Content-Type', 'text/html');
// res.send(html);

import React from 'react';
import { MarkonRender } from '@nofinite/markon/react';
import '@nofinite/nuicss/styles.css';

const postMarkdown = `
# Designing Perceptually Uniform UI Systems with OKLCH

Modern digital interfaces require color systems that behave predictably across dark and light modes.

$$e^{i\\pi} + 1 = 0$$
`;

export function BlogPost() {
  return (
    <div className="w-full max-w-4xl mx-auto p-6 bg-surface border border-default rounded-2xl shadow-sm">
      <MarkonRender
        content={postMarkdown}
        layout="article"
        metadata={{
          title: 'Designing Perceptually Uniform UI Systems with OKLCH',
          author: {
            name: 'Elena Rostova',
            title: 'Principal Systems Architect'
          },
          publishedAt: '2026-03-15',
          category: 'Architecture'
        }}
        showTOC={true}
      />
    </div>
  );
}