CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-nuxt--content

File-based content management system for Nuxt.js applications with powerful querying and Vue component rendering in Markdown

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

runtime-utilities.mddocs/

Runtime Utilities

Low-level utilities for working with content trees, compression, and AST manipulation for advanced content processing scenarios. These utilities provide direct access to the internal tree structures used by Nuxt Content.

Capabilities

Compress Tree

Converts a full MDC (Markdown Components) AST tree into a compressed Minimark tree format for efficient storage and transmission.

/**
 * Converts an MDC root tree into compressed Minimark format
 * @param input - The MDC root tree to compress
 * @returns Compressed Minimark tree representation
 */
function compressTree(input: MDCRoot): MinimarkTree;

Usage Examples:

import { compressTree } from '@nuxt/content/runtime';

// Compress a content tree for storage
const mdcTree = {
  type: 'root',
  children: [
    { type: 'element', tagName: 'h1', children: [{ type: 'text', value: 'Hello' }] },
    { type: 'element', tagName: 'p', children: [{ type: 'text', value: 'World' }] }
  ]
};

const compressed = compressTree(mdcTree);
// Result: { type: 'minimark', value: '...' } (compressed representation)

Decompress Tree

Converts a compressed Minimark tree back into a full MDC AST tree for rendering and manipulation.

/**
 * Converts a compressed tree back into full MDC format
 * @param input - The compressed tree (Tree format) to decompress
 * @returns Full MDC root tree for rendering
 */
function decompressTree(input: Tree): MDCRoot;

Usage Examples:

import { decompressTree } from '@nuxt/content/runtime';

// Decompress a stored tree for rendering
const compressedTree = { type: 'minimark', value: '...' };
const mdcTree = decompressTree(compressedTree);

// Result: Full MDC tree ready for rendering
// {
//   type: 'root',
//   children: [
//     { type: 'element', tagName: 'h1', children: [...] },
//     { type: 'element', tagName: 'p', children: [...] }
//   ]
// }

Visit Tree

Traverses a content tree and allows modification of nodes matching specific criteria using a visitor pattern.

/**
 * Traverses tree nodes and applies visitor function to matching nodes
 * @param tree - The tree to traverse (Tree format)
 * @param checker - Function to test if a node should be visited
 * @param visitor - Function to transform matching nodes
 */
function visit(
  tree: Tree, 
  checker: (node: Node) => boolean, 
  visitor: (node: Node) => Node | undefined
): void;

Usage Examples:

import { visit } from '@nuxt/content/runtime';

// Transform all heading nodes in a tree
visit(
  contentTree,
  (node) => node.type === 'element' && ['h1', 'h2', 'h3'].includes(node.tagName),
  (node) => {
    // Add an ID attribute to all headings
    return {
      ...node,
      properties: {
        ...node.properties,
        id: node.children?.[0]?.value?.toLowerCase().replace(/\s+/g, '-')
      }
    };
  }
);

// Remove all images from a tree
visit(
  contentTree,
  (node) => node.type === 'element' && node.tagName === 'img',
  () => undefined // Remove the node by returning undefined
);

// Convert code blocks to a specific format
visit(
  contentTree,
  (node) => node.type === 'element' && node.tagName === 'code',
  (node) => ({
    ...node,
    properties: {
      ...node.properties,
      className: ['highlight', ...(node.properties?.className || [])]
    }
  })
);

Types

interface MDCRoot {
  type: 'root';
  children: Node[];
}

interface MinimarkTree {
  type: 'minimark';
  value: unknown;
}

interface Tree {
  type: string;
  value?: unknown;
}

interface Node {
  type: string;
  [key: string]: unknown;
}

Use Cases

Tree Compression: Use compressTree when you need to store or transmit content trees efficiently, such as caching processed content or sending content over a network.

Tree Decompression: Use decompressTree when you need to restore a compressed tree for rendering or further processing.

Tree Traversal: Use visit for:

  • Adding metadata to specific node types
  • Transforming content structure
  • Removing or filtering nodes
  • Implementing custom content processors
  • Building content analysis tools

Install with Tessl CLI

npx tessl i tessl/npm-nuxt--content

docs

collections.md

configuration.md

index.md

navigation-utilities.md

navigation.md

preview.md

querying.md

rendering.md

runtime-utilities.md

tile.json