@travetto/doc 3.0.2 → 3.1.0-rc.0

package/src/mapping/mod-mapping.ts

@@ -0,0 +1,250 @@
+export const MOD_MAPPING = {
+  Asset: {
+    name: '@travetto/asset', folder: '@travetto/asset', displayName: 'Asset',
+    description: 'Modular library for storing and retrieving binary assets'
+  },
+  AssetRest: {
+    name: '@travetto/asset-rest', folder: '@travetto/asset-rest', displayName: 'Asset Rest Support',
+    description: 'Provides integration between the travetto asset and rest module.'
+  },
+  Auth: {
+    name: '@travetto/auth', folder: '@travetto/auth', displayName: 'Authentication',
+    description: 'Authentication scaffolding for the Travetto framework'
+  },
+  AuthModel: {
+    name: '@travetto/auth-model', folder: '@travetto/auth-model', displayName: 'Authentication Model',
+    description: 'Authentication model support for the Travetto framework'
+  },
+  AuthRest: {
+    name: '@travetto/auth-rest', folder: '@travetto/auth-rest', displayName: 'Rest Auth',
+    description: 'Rest authentication integration support for the Travetto framework'
+  },
+  AuthRestContext: {
+    name: '@travetto/auth-rest-context', folder: '@travetto/auth-rest-context', displayName: 'Rest Auth Context',
+    description: 'Rest authentication context integration support for the Travetto framework'
+  },
+  AuthRestJwt: {
+    name: '@travetto/auth-rest-jwt', folder: '@travetto/auth-rest-jwt', displayName: 'Rest Auth JWT',
+    description: 'Rest authentication JWT integration support for the Travetto framework'
+  },
+  AuthRestPassport: {
+    name: '@travetto/auth-rest-passport', folder: '@travetto/auth-rest-passport', displayName: 'Rest Auth Passport',
+    description: 'Rest authentication integration support for the Travetto framework'
+  },
+  AuthRestSession: {
+    name: '@travetto/auth-rest-session', folder: '@travetto/auth-rest-session', displayName: 'Rest Auth Session',
+    description: 'Rest authentication session integration support for the Travetto framework'
+  },
+  Base: {
+    name: '@travetto/base', folder: '@travetto/base', displayName: 'Base',
+    description: 'Environment config and common utilities for travetto applications.'
+  },
+  Cache: {
+    name: '@travetto/cache', folder: '@travetto/cache', displayName: 'Caching',
+    description: 'Caching functionality with decorators for declarative use.'
+  },
+  Cli: {
+    name: '@travetto/cli', folder: '@travetto/cli', displayName: 'Command Line Interface',
+    description: 'CLI infrastructure for Travetto framework'
+  },
+  Command: {
+    name: '@travetto/command', folder: '@travetto/command', displayName: 'Command',
+    description: 'Support for executing complex commands at runtime.'
+  },
+  Compiler: {
+    name: '@travetto/compiler', folder: '@travetto/compiler', displayName: 'Compiler',
+    description: 'The compiler infrastructure for the Travetto framework'
+  },
+  Config: {
+    name: '@travetto/config', folder: '@travetto/config', displayName: 'Configuration',
+    description: 'Configuration support'
+  },
+  Context: {
+    name: '@travetto/context', folder: '@travetto/context', displayName: 'Async Context',
+    description: 'Async-aware state management, maintaining context across asynchronous calls.'
+  },
+  Di: {
+    name: '@travetto/di', folder: '@travetto/di', displayName: 'Dependency Injection',
+    description: 'Dependency registration/management and injection support.'
+  },
+  Doc: {
+    name: '@travetto/doc', folder: '@travetto/doc', displayName: 'Documentation',
+    description: 'Documentation support for the Travetto framework'
+  },
+  Email: {
+    name: '@travetto/email', folder: '@travetto/email', displayName: 'Email',
+    description: 'Email transmission module.'
+  },
+  EmailNodemailer: {
+    name: '@travetto/email-nodemailer', folder: '@travetto/email-nodemailer', displayName: 'Email Nodemailer Support',
+    description: 'Email transmission module.'
+  },
+  EmailTemplate: {
+    name: '@travetto/email-template', folder: '@travetto/email-template', displayName: 'Email Templating',
+    description: 'Email templating module'
+  },
+  Eslint: {
+    name: '@travetto/eslint', folder: '@travetto/eslint', displayName: 'ES Linting Rules',
+    description: 'ES Linting Rules'
+  },
+  Image: {
+    name: '@travetto/image', folder: '@travetto/image', displayName: 'Image',
+    description: 'Image support, resizing, and optimization'
+  },
+  Jwt: {
+    name: '@travetto/jwt', folder: '@travetto/jwt', displayName: 'JWT',
+    description: 'JSON Web Token implementation'
+  },
+  Log: {
+    name: '@travetto/log', folder: '@travetto/log', displayName: 'Logging',
+    description: 'Logging framework that integrates at the console.log level.'
+  },
+  Manifest: {
+    name: '@travetto/manifest', folder: '@travetto/manifest', displayName: 'Manifest',
+    description: 'Support for project indexing, manifesting, along with file watching'
+  },
+  Model: {
+    name: '@travetto/model', folder: '@travetto/model', displayName: 'Data Modeling Support',
+    description: 'Datastore abstraction for core operations.'
+  },
+  ModelDynamodb: {
+    name: '@travetto/model-dynamodb', folder: '@travetto/model-dynamodb', displayName: 'DynamoDB Model Support',
+    description: 'DynamoDB backing for the travetto model module.'
+  },
+  ModelElasticsearch: {
+    name: '@travetto/model-elasticsearch', folder: '@travetto/model-elasticsearch', displayName: 'Elasticsearch Model Source',
+    description: 'Elasticsearch backing for the travetto model module, with real-time modeling support for Elasticsearch mappings.'
+  },
+  ModelFirestore: {
+    name: '@travetto/model-firestore', folder: '@travetto/model-firestore', displayName: 'Firestore Model Support',
+    description: 'Firestore backing for the travetto model module.'
+  },
+  ModelMongo: {
+    name: '@travetto/model-mongo', folder: '@travetto/model-mongo', displayName: 'MongoDB Model Support',
+    description: 'Mongo backing for the travetto model module.'
+  },
+  ModelMysql: {
+    name: '@travetto/model-mysql', folder: '@travetto/model-mysql', displayName: 'MySQL Model Service',
+    description: 'MySQL backing for the travetto model module, with real-time modeling support for SQL schemas.'
+  },
+  ModelPostgres: {
+    name: '@travetto/model-postgres', folder: '@travetto/model-postgres', displayName: 'PostgreSQL Model Service',
+    description: 'PostgreSQL backing for the travetto model module, with real-time modeling support for SQL schemas.'
+  },
+  ModelQuery: {
+    name: '@travetto/model-query', folder: '@travetto/model-query', displayName: 'Data Model Querying',
+    description: 'Datastore abstraction for advanced query support.'
+  },
+  ModelRedis: {
+    name: '@travetto/model-redis', folder: '@travetto/model-redis', displayName: 'Redis Model Support',
+    description: 'Redis backing for the travetto model module.'
+  },
+  ModelS3: {
+    name: '@travetto/model-s3', folder: '@travetto/model-s3', displayName: 'S3 Model Support',
+    description: 'S3 backing for the travetto model module.'
+  },
+  ModelSql: {
+    name: '@travetto/model-sql', folder: '@travetto/model-sql', displayName: 'SQL Model Service',
+    description: 'SQL backing for the travetto model module, with real-time modeling support for SQL schemas.'
+  },
+  ModelSqlite: {
+    name: '@travetto/model-sqlite', folder: '@travetto/model-sqlite', displayName: 'SQLite Model Service',
+    description: 'SQLite backing for the travetto model module, with real-time modeling support for SQL schemas.'
+  },
+  Openapi: {
+    name: '@travetto/openapi', folder: '@travetto/openapi', displayName: 'OpenAPI Specification',
+    description: 'OpenAPI integration support for the Travetto framework'
+  },
+  Pack: {
+    name: '@travetto/pack', folder: '@travetto/pack', displayName: 'Pack',
+    description: 'Code packing utilities'
+  },
+  Registry: {
+    name: '@travetto/registry', folder: '@travetto/registry', displayName: 'Registry',
+    description: 'Patterns and utilities for handling registration of metadata and functionality for run-time use'
+  },
+  Repo: {
+    name: '@travetto/repo', folder: '@travetto/repo', displayName: 'Repo',
+    description: 'Monorepo utilities'
+  },
+  Rest: {
+    name: '@travetto/rest', folder: '@travetto/rest', displayName: 'RESTful API',
+    description: 'Declarative api for RESTful APIs with support for the dependency injection module.'
+  },
+  RestAwsLambda: {
+    name: '@travetto/rest-aws-lambda', folder: '@travetto/rest-aws-lambda', displayName: 'RESTful AWS Lambda',
+    description: 'RESTful APIs entry point support for AWS Lambdas.'
+  },
+  RestExpress: {
+    name: '@travetto/rest-express', folder: '@travetto/rest-express', displayName: 'Express REST Source',
+    description: 'Express provider for the travetto rest module.'
+  },
+  RestExpressLambda: {
+    name: '@travetto/rest-express-lambda', folder: '@travetto/rest-express-lambda', displayName: 'Express REST AWS Lambda Source',
+    description: 'Express AWS Lambda provider for the travetto rest module.'
+  },
+  RestFastify: {
+    name: '@travetto/rest-fastify', folder: '@travetto/rest-fastify', displayName: 'Fastify REST Source',
+    description: 'Fastify provider for the travetto rest module.'
+  },
+  RestFastifyLambda: {
+    name: '@travetto/rest-fastify-lambda', folder: '@travetto/rest-fastify-lambda', displayName: 'Fastify REST AWS Lambda Source',
+    description: 'Fastify AWS Lambda provider for the travetto rest module.'
+  },
+  RestKoa: {
+    name: '@travetto/rest-koa', folder: '@travetto/rest-koa', displayName: 'Koa REST Source',
+    description: 'Koa provider for the travetto rest module.'
+  },
+  RestKoaLambda: {
+    name: '@travetto/rest-koa-lambda', folder: '@travetto/rest-koa-lambda', displayName: 'Koa REST AWS Lambda Source',
+    description: 'Koa provider for the travetto rest module.'
+  },
+  RestModel: {
+    name: '@travetto/rest-model', folder: '@travetto/rest-model', displayName: 'RESTful Model Routes',
+    description: 'RESTful support for generating APIs from Model classes.'
+  },
+  RestModelQuery: {
+    name: '@travetto/rest-model-query', folder: '@travetto/rest-model-query', displayName: 'RESTful Model Query Routes',
+    description: 'RESTful support for generating query APIs from Model classes.'
+  },
+  RestSession: {
+    name: '@travetto/rest-session', folder: '@travetto/rest-session', displayName: 'REST Session',
+    description: 'Session provider for the travetto rest module.'
+  },
+  Scaffold: {
+    name: '@travetto/scaffold', folder: '@travetto/scaffold', displayName: 'App Scaffold',
+    description: 'App Scaffold for the Travetto framework'
+  },
+  Schema: {
+    name: '@travetto/schema', folder: '@travetto/schema', displayName: 'Schema',
+    description: 'Data type registry for runtime validation, reflection and binding.'
+  },
+  SchemaFaker: {
+    name: '@travetto/schema-faker', folder: '@travetto/schema-faker', displayName: 'Schema Faker',
+    description: 'Data generation for schema-registered objects.'
+  },
+  Terminal: {
+    name: '@travetto/terminal', folder: '@travetto/terminal', displayName: 'Terminal',
+    description: 'General terminal support'
+  },
+  Test: {
+    name: '@travetto/test', folder: '@travetto/test', displayName: 'Testing',
+    description: 'Declarative test framework'
+  },
+  TodoApp: {
+    name: '@travetto/todo-app', folder: '@travetto/todo-app', displayName: 'Todo Application',
+    description: ''
+  },
+  Transformer: {
+    name: '@travetto/transformer', folder: '@travetto/transformer', displayName: 'Transformation',
+    description: 'Functionality for AST transformations, with transformer registration, and general utils'
+  },
+  Worker: {
+    name: '@travetto/worker', folder: '@travetto/worker', displayName: 'Worker',
+    description: 'Process management utilities, with a focus on inter-process communication'
+  },
+  Yaml: {
+    name: '@travetto/yaml', folder: '@travetto/yaml', displayName: 'YAML',
+    description: 'Simple YAML support, provides only clean subset of yaml'
+  }
+};

package/src/render/context.ts

@@ -1,59 +1,129 @@
-import { path } from '@travetto/manifest';
+import { createElement, JSXRuntimeTag } from '@travetto/doc/jsx-runtime';
 
-import { AllType, AllTypeMap, node as n } from '../nodes';
-import { DocNode, RenderContextShape } from '../types';
+import { PackageUtil, path, RootIndex } from '@travetto/manifest';
 
-export type AllChildren = AllType;
+import { JSXElementByFn, c } from '../jsx';
+import { DocResolveUtil, ResolvedCode, ResolvedRef, ResolvedSnippetLink } from '../util/resolve';
+import { DocRunUtil } from '../util/run';
 
 /**
- * Render context
+ * Render Context
  */
-export class RenderContext implements RenderContextShape {
+export class RenderContext {
 
+  #executeCache: Record<string, string> = {};
+
+  /**
+   * Filename
+   */
   file: string;
+
+  /**
+   * Github root for project
+   */
   baseUrl: string;
+
+  /**
+   * Github root for Travetto framework
+   */
   travettoBaseUrl: string;
+
+  /**
+   * Repository root
+   */
   repoRoot: string;
 
-  constructor(file: string, repoRoot: string, baseUrl: string, travettoBaseUrl: string) {
+  constructor(file: string, baseUrl: string, repoRoot: string) {
+
+    const manifestPkg = PackageUtil.readPackage(RootIndex.getModule('@travetto/manifest')!.sourcePath);
+
     this.file = path.toPosix(file);
     this.baseUrl = baseUrl;
     this.repoRoot = repoRoot;
-    this.travettoBaseUrl = travettoBaseUrl;
+    this.travettoBaseUrl = repoRoot.includes('travetto.github') ? repoRoot : manifestPkg.travetto!.docBaseUrl!;
   }
 
-  toc(root: DocNode): AllTypeMap['Ordered'] {
-    return n.Ordered(
-      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      ...(root as AllTypeMap['Group']).nodes
-        .filter(x => x._type === 'section')
-        .map(x => {
-          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-          const { title } = x as AllTypeMap['Section'];
-          return n.Anchor(title, title);
-        })
-    );
+  /**
+   * Get generated comment
+   */
+  get generatedStamp(): string {
+    return 'This file was generated by @travetto/doc and should not be modified directly';
   }
 
-  get preamble(): AllTypeMap['Group'] {
-    return n.Group([
-      n.Comment('This file was generated by @travetto/doc and should not be modified directly'),
-      n.Text('\n'),
-      n.Comment(`Please modify ${this.file.replace(this.repoRoot, this.baseUrl)} and execute "npx trv doc" to rebuild`),
-    ]);
+  /**
+   * Get rebuilt comment
+   */
+  get rebuildStamp(): string {
+    return `Please modify ${this.file.replace(this.repoRoot, this.baseUrl)} and execute "npx trv doc" to rebuild`;
   }
 
+  /**
+   * Generate link location
+   */
   link(text: string, line?: number | { [key: string]: unknown, line?: number }): string {
     const num = typeof line === 'number' ? line : line?.line;
     return `${text.replace(this.repoRoot, this.baseUrl)
       .replace(/.*@travetto\//, `${this.travettoBaseUrl}/module/`)}${num ? `#L${num}` : ''}`;
   }
 
+  /**
+   * Clean text
+   */
   cleanText(a?: string): string {
     return a ? a.replace(/^[\n ]+|[\n ]+$/gs, '') : '';
   }
 
+  /**
+   * Get a consistent anchor id
+   */
   getAnchorId(a: string): string {
     return a.toLowerCase().replace(/<[^>]+>/g, ' ').replace(/[^a-z0-9]+/g, ' ').trim().replace(/ /g, '-');
   }
+
+  /**
+   * Execute a node that represents a code invocation
+   */
+  async execute(node: JSXElementByFn<'Execution'>): Promise<string> {
+    const key = node[JSXRuntimeTag]?.id ?? 0;
+    if (key && this.#executeCache[key]) {
+      return this.#executeCache[key];
+    }
+
+    const { cmd, args = [], config = {} } = node.props;
+    const result = await DocRunUtil.run(cmd, args, config);
+    return this.#executeCache[key] = result;
+  }
+
+  /**
+   * Resolve a reference to a given node
+   */
+  async resolveRef(node: JSXElementByFn<'Ref'>): Promise<ResolvedRef> {
+    return DocResolveUtil.resolveRef(node.props.title, node.props.href);
+  }
+
+  /**
+   * Resolve code link
+   */
+  async resolveCodeLink(node: JSXElementByFn<'CodeLink'>): Promise<ResolvedSnippetLink> {
+    const src = typeof node.props.src === 'string' ? node.props.src : RootIndex.getFunctionMetadata(node.props.src)!.source;
+    return DocResolveUtil.resolveCodeLink(src, node.props.startRe);
+  }
+
+  /**
+   * Resolve code/config
+   */
+  async resolveCode(node: JSXElementByFn<'Code' | 'Config'>): Promise<ResolvedCode> {
+    const src = typeof node.props.src === 'string' ? node.props.src : RootIndex.getFunctionMetadata(node.props.src)!.source;
+    return node.props.startRe ?
+      DocResolveUtil.resolveSnippet(src, node.props.startRe, node.props.endRe, node.props.outline) :
+      DocResolveUtil.resolveCode(src, node.props.language, node.props.outline);
+  }
+
+  /**
+   * Create a new element from a given JSX factory
+   */
+  createElement<K extends keyof typeof c>(name: K, props: JSXElementByFn<K>['props']): JSXElementByFn<K> {
+    // @ts-expect-error
+    return createElement(c[name], props) as JSXElementByFn<K>;
+  }
 }

package/src/render/html.ts

@@ -1,81 +1,161 @@
-import { node as n } from '../nodes';
-import { AllChildren, RenderContext } from './context';
+import fs from 'fs/promises';
+
+import { JSXElement } from '@travetto/doc/jsx-runtime';
+import { RootIndex, PackageUtil } from '@travetto/manifest';
+
 import { highlight } from './code-highlight';
-import { DocNode, Renderer } from '../types';
+import { RenderProvider, RenderState } from '../types';
+import { c, getComponentName } from '../jsx';
+import { MOD_MAPPING } from '../mapping/mod-mapping';
+import { LIB_MAPPING } from '../mapping/lib-mapping';
+import { RenderContext } from './context';
+import { DocResolveUtil } from '../util/resolve';
 
 const ESCAPE_ENTITIES: Record<string, string> = { '<': '&lt;', '>': '&gt;', '&': '&amp;', '{': "{{'{'}}", '}': "{{'}'}}" };
 const ENTITY_RE = new RegExp(`[${Object.keys(ESCAPE_ENTITIES).join('')}]`, 'gm');
 
-export const Html: Renderer = {
+const stdInline = async ({ recurse, el }: RenderState<JSXElement, RenderContext>): Promise<string> =>
+  `<${el.type}>${await recurse()}</${el.type}>`;
+
+const std = async ({ recurse, el }: RenderState<JSXElement, RenderContext>): Promise<string> =>
+  `<${el.type}>${await recurse()}</${el.type}>\n`;
+
+const stdFull = async ({ recurse, el }: RenderState<JSXElement, RenderContext>): Promise<string> =>
+  `\n<${el.type}>${await recurse()}</${el.type}>\n`;
+
+
+export const Html: RenderProvider<RenderContext> = {
   ext: 'html',
-  render(c: AllChildren, context: RenderContext, root = c) {
-    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    const recurse = (s: AllChildren | DocNode): string => this.render(s as AllChildren, context, root);
-    switch (c._type) {
-      case 'toc': {
-        const content = recurse(n.Group([n.SubSection(c.title), context.toc(root)]));
-        return `<div class="toc"><div class="inner">${content}</div></div>`;
-      }
-      case 'strong': return `<strong>${recurse(c.content)}</strong>`;
-      case 'group': return c.nodes.map(cc => recurse(cc)).join('');
-      case 'comment': return `<!-- ${recurse(c.text)} -->`;
-      case 'install':
-      case 'terminal':
-      case 'config':
-      case 'code': return `
-      <figure class="${c._type}">
-      <figcaption class="${c._type}">${recurse(c.title)}
-      ${'file' in c && c.file ? `<cite><a target="_blank" href="${context.link(recurse(c.file), c)}">Source</a></cite>` : ''}
-      </figcaption>
-      <pre><code class="language-${c.language}">${context.cleanText(highlight(recurse(c.content), c.language))}</code></pre>     
-      </figure>`;
-      case 'anchor': return `<a class="anchor-link" routerLink="." fragment="${context.getAnchorId(recurse(c.fragment))}">${recurse(c.title)}</a>`;
-      case 'library':
-      case 'file':
-      case 'ref': return `<a target="_blank" class="${c._type === 'library' ? 'external-link' : 'source-link'}" href="${context.link(recurse(c.link), c)}">${recurse(c.title)}</a>`;
-      case 'mod': return `<a class="module-link" href="${context.link(recurse(c.link), c)}" title="${recurse(c.description)}">${recurse(c.title)}</a>`;
-      case 'image': return `<img src="${context.link(recurse(c.link), c)}" alt="${recurse(c.title)}">`;
-      case 'section':
-      case 'subsection':
-      case 'subsubsection': {
-        const tag = c._type === 'section' ? 'h2' : (c._type === 'subsection' ? 'h3' : 'h4');
-        const title = recurse(c.title);
-        return `<${tag} id="${context.getAnchorId(title)}">${title}</${tag}>`;
-      }
-      case 'command':
-      case 'method':
-      case 'path':
-      case 'class':
-      case 'field':
-      case 'input': return `<code class="item ${c._type}">${context.cleanText(recurse(c.content)).replace(ENTITY_RE, k => ESCAPE_ENTITIES[k])}</code>`;
-      case 'note': return `<p class="note"><strong>Note</strong> ${recurse(c.content)}</p>`;
-      case 'item': return ` <li>${recurse(c.node)}</li>`;
-      case 'list': {
-        const out: string[] = [];
-        const ordered = c.items.find(x => x._type === 'item' && 'ordered' in x && x.ordered);
-
-        for (const el of c.items) {
-          out.push(recurse(el));
-        }
-        const tag = ordered ? 'ol' : 'ul';
-        return `<${tag}>${out.join('\n')}</${tag}>`;
+  finalize: (text, context) => {
+    const brand = `<!-- ${context.generatedStamp} -->\n<!-- ${context.rebuildStamp} -->`;
+    const cleaned = text
+      .replace(/(<[/](?:a)>)([A-Za-z0-9$])/g, (_, tag, v) => `${tag} ${v}`)
+      .replace(/(<[uo]l>)(<li>)/g, (_, a, b) => `${a} ${b}`);
+    return `${brand}\n${cleaned}`;
+  },
+  br: async () => '<br><br>\n',
+  hr: async () => '<hr>\n',
+  strong: stdInline, em: stdInline,
+  h2: stdFull, h3: stdFull, h4: stdFull,
+  li: std, ol: stdFull, ul: stdFull,
+  table: stdFull, thead: std, tr: std, td: std, tbody: std,
+  Execution: async ({ context, el, props, createState }) => {
+    const output = await context.execute(el);
+    const displayCmd = props.config?.formatCommand?.(props.cmd, props.args ?? []) ??
+      `${el.props.cmd} ${(el.props.args ?? []).join(' ')}`;
+    const sub = createState('Terminal', {
+      language: 'bash',
+      title: props.title,
+      src: [`$ ${displayCmd}`, '', context.cleanText(output)].join('\n')
+    });
+    return Html.Terminal(sub);
+  },
+  Install: async ({ context, el }) => {
+    const highlighted = highlight(`
+npm install ${el.props.pkg}
+
+# or
+
+yarn add ${el.props.pkg}
+`, 'bash');
+
+    return `\n
+  <figure class="install">
+    <figcaption class="install">Install ${el.props.title}
+    
+    </figcaption>
+    <pre><code class="language-bash">${highlighted}</code></pre>
+  </figure>\n\n
+`;
+  },
+  Terminal: state => Html.Code(state),
+  Config: state => Html.Code(state),
+  Code: async ({ context, el, props }) => {
+    const cls = getComponentName(el.type).replace(/^[A-Z]/g, v => v.toLowerCase());
+    const content = await context.resolveCode(el);
+    let link: string = '';
+    if ('src' in props && content.file) {
+      let linkCtx: { file: string, line?: number } = { file: content.file! };
+      if (props.startRe) {
+        linkCtx = await DocResolveUtil.resolveCodeLink(linkCtx.file, props.startRe);
       }
-      case 'table': {
-        const out: string[] = [
-          '<table>', '<thead>',
-          `<tr>${c.headers.map(h => recurse(h)).map(h => `<th>${h}</th>`).join('')}</tr>`,
-          '</thead>', '<tbody>',
-          ...c.rows.map(row => `<tr>${row.map(r => `<td>${recurse(r)}</td>`).join('')}</tr>`),
-          '</tbody>', '</table>'
-        ];
-        return out.join('\n');
+      link = `<cite><a target="_blank" href="${context.link(content.file!, linkCtx)}">Source</a></cite>`;
+    }
+    let lang = props.language ?? content.language;
+    if (!lang) {
+      if (el.type === c.Terminal) {
+        lang = 'bash';
+      } else if (el.type === c.Code) {
+        lang = 'typescript';
       }
-      case 'header':
-        return `<h1>${recurse(c.title)}
-          ${c.description ? `<small>${recurse(c.description)}</small>\n` : ''}
-        </h1>\n${('install' in c && c.install) ? recurse(n.Install(`Install ${c.package}`, c.package)) : ''}\n`;
-      case 'text':
-        return c.content;
     }
+
+    const highlighted = context.cleanText(highlight(content.text, lang));
+    return `\n
+  <figure class="${cls}">
+    <figcaption class="${cls}">${props.title}\n${link}\n\n</figcaption>
+    <pre><code class="language-${lang}">${highlighted}</code></pre>
+  </figure>\n\n`;
+  },
+
+  Section: async ({ context, recurse, props: { title } }) =>
+    `\n<h2 id="${context.getAnchorId(title)}">${title}</h2>\n\n${await recurse()}\n`,
+  SubSection: async ({ context, recurse, props: { title } }) =>
+    `\n<h3 id="${context.getAnchorId(title)}">${title}</h3>\n\n${await recurse()}\n`,
+  SubSubSection: async ({ context, recurse, props: { title } }) =>
+    `\n<h4 id="${context.getAnchorId(title)}">${title}</h4>\n\n${await recurse()}\n`,
+
+  Command: state => Html.Input(state),
+  Method: state => Html.Input(state),
+  Path: state => Html.Input(state),
+  Class: state => Html.Input(state),
+  Field: state => Html.Input(state),
+  Input: async ({ el, context }) => {
+    const cls = getComponentName(el.type).replace(/^[A-Z]/g, v => v.toLowerCase());
+    return `<code class="item ${cls}">${context.cleanText(el.props.name.replace(ENTITY_RE, k => ESCAPE_ENTITIES[k]))}</code>`;
+  },
+  CodeLink: async ({ context, props, el }) => {
+    const target = await context.resolveCodeLink(el);
+    return `<a target="_blank" class="source-link" href="${context.link(target.file, target)}">${props.title}</a>`;
+  },
+  Anchor: async ({ context, props }) =>
+    `<a class="anchor-link" routerLink="." fragment="${context.getAnchorId(props.href)}">${props.title}</a>`,
+
+  File: state => Html.Ref(state),
+  Ref: async ({ context, props }) =>
+    `<a target="_blank" class="source-link" href="${context.link(props.href, props)}">${props.title}</a>`,
+  Image: async ({ context, props }) => {
+    if (!/^https?:/.test(props.href) && !(await fs.stat(props.href).catch(() => false))) {
+      throw new Error(`${props.href} is not a valid location`);
+    }
+    return `<img src="${context.link(props.href, props)}" alt="${props.title}">`;
+  },
+
+  Mod: async ({ context, props }) => {
+    const cfg = MOD_MAPPING[props.name];
+    return `<a class="module-link" href="${context.link(cfg.folder, cfg)}" title="${cfg.description}">${cfg.displayName}</a>`;
+  },
+  Library: async ({ context, props }) => {
+    const cfg = LIB_MAPPING[props.name];
+    return `<a target="_blank" class="external-link" href="${context.link(cfg.href, cfg)}">${cfg.title}</a>`;
+  },
+
+  Note: async ({ recurse }) => `\n\n<p class="note"><strong>Note</strong> ${await recurse()}</p>\n`,
+  Header: async ({ props }) => `<h1>${props.title} ${props.description ? `\n<small>${props.description}</small>\n` : ''}</h1>\n`,
+
+  StdHeader: async state => {
+    const mod = state.el.props.mod ?? RootIndex.mainPackage.name;
+    const pkg = PackageUtil.readPackage(RootIndex.getModule(mod)!.sourcePath);
+    const title = pkg.travetto?.displayName ?? pkg.name;
+    const desc = pkg.description;
+    let install = '';
+    if (state.el.props.install !== false) {
+      const sub = state.createState('Install', {
+        title: pkg.name,
+        pkg: pkg.name,
+      });
+      install = await Html.Install(sub);
+    }
+    return `<h1>${title}${desc ? `\n<small>${desc}</small>\n` : ''}</h1>\n${install}\n`;
   }
-};
+};