Valkyrian Labs logo

In-Page Docs Blocks

Install and render the compact v1 docs block for page layouts.

In-Page Docs Blocks

payload-markdown-docs/blocks exports one optional v1 Payload Block for page layouts:

  • docsCTA: what should the reader do next?

Generated docs routes keep working the same way. This block is only for app layouts that wrap or reference generated documentation.

Manual Block Installation

1import type { CollectionConfig } from 'payload'2 3import { DocsCTABlock } from '@valkyrianlabs/payload-markdown-docs/blocks'4 5export const Pages: CollectionConfig = {6  slug: 'pages',7  fields: [8    {9      name: 'layout',10      type: 'blocks',11      blocks: [DocsCTABlock],12    },13  ],14}

Docs CTA

Docs CTA is docs-set-first. Editors select one docs set, and the block derives the title, description, docs link, and skill buttons from that set whenever possible.

It supports exactly one action mode:

  • one button linking to the selected docs set's docs route
  • skill buttons detected from synced skill assets for the selected docs set

Docs CTA does not render both modes at the same time. Optional skill overrides only change detected skill labels and descriptions by agent.

Variants

Docs CTA ships three width-correct variants. The host page can constrain the content column, but the block panel itself fills the available layout width.

  • subtle: quiet inline/in-page CTA with compact spacing.
  • normal: default full-width CTA with a controlled decorative gradient.
  • full: taller media-capable CTA with optional background image and overlay.

Roadmap

Docs Excerpt is deferred until a first-class read-only markdown highlighter is available.

Auto Install

Auto-install appends Docs CTA to existing blocks fields on eligible collections. It does not create new collections or inject a new layout field.

1import { payloadMarkdownDocs } from '@valkyrianlabs/payload-markdown-docs'2 3payloadMarkdownDocs({4  blocks: true,5})

Select the block explicitly when needed:

1payloadMarkdownDocs({2  blocks: {3    docsCTA: true,4  },5})

Use collection-scoped settings to install Docs CTA into a specific collection:

1payloadMarkdownDocs({2  collections: {3    pages: {4      blocks: {5        docsCTA: true,6      },7    },8  },9})

Rendering Blocks

Render the block in your app's normal RenderBlocks.tsx component map.

1import { DocsCTA } from '@valkyrianlabs/payload-markdown-docs/next'2 3const blockComponents = {4  docsCTA: DocsCTA,5}6 7export function RenderBlocks({ blocks }: { blocks?: { blockType?: string }[] }) {8  return blocks?.map((block, index) => {9    const Block = block.blockType10      ? blockComponents[block.blockType as keyof typeof blockComponents]11      : undefined12 13    return Block ? <Block key={index} {...block} /> : null14  })15}

Docs hero fields and components are documented separately in Docs Heroes.