Developer Docs

Custom Sections

There are three tiers of section, from simplest to most complex. Each tier adds more integration with the tools.

Tier 1: Data-Only Section

Just a form with fields. No autodetection, the render function formats the field values into markdown. Works in all three consumers.

// 1. Define section data in ptkrdmelib/src/sections/
import { SectionData } from "../types";


export const ApiSectionFields = [
  { name: "endpoint", type: "input",  value: "", options: [] },
  { name: "method",   type: "select", value: "GET", options: ["GET","POST","PUT","DELETE"] },
  { name: "auth",     type: "input",  value: "", options: [] },
];


export const ApiSectionData: SectionData = {
  title: "API Reference",
  content: "API endpoint documentation",
  configoptions: ApiSectionFields,
  modalStatus: false,
};


// 2. Export from ptkrdmelib/src/sections/index.ts
export * from './ApiSection';

Web App Registration

// src/app/lib/sections/ApiSection.ts
import { ApiSectionData as PtApiSection } from "ptkrdmelib/sections";
import type { SectionData } from "~/lib/types/section/Section";


export const ApiSectionData: SectionData = {
  ...PtApiSection,
  order: 5,
  render: (config: SectionData) => {
    const endpoint = config.configoptions.find(c => c.name === "endpoint")?.value || "";
    const method   = config.configoptions.find(c => c.name === "method")?.value || "";
    const auth     = config.configoptions.find(c => c.name === "auth")?.value || "";
    return `## API Reference


- **Endpoint:** \`\`\`${endpoint}\`\`\`
- **Method:** ${method}
- **Auth:** ${auth}
`;
  },
};


// Register in src/app/lib/sections/index.ts
export { ApiSectionData } from "./ApiSection";

CLI Registration

// Create src/sections/api/ with these files:
//   section.ts   — SectionConfig subclass
//   prompts.ts   — init and edit prompts
//   data.ts      — section data configuration
//   template.md  — Mustache template for rendering


// Register in ConfigManager.allSections

VS Code Extension Registration

// Add section data to web/src/sectionsContext.tsx allSectionData
// Create render in src/sections/YourSection.ts
// Register in ConfigManager.ts

Tier 2: Section with Autodetection

Extends SectionAutodetect to scan project dependencies and pre-populate section data.

import { SectionAutodetect } from "../types";


export class ApiSectionAutodetect extends SectionAutodetect {
  async scan() {
    const deps = this.configManager.autodetector.dependencies;
    const tech = this.configManager.autodetector.tech;


    for (const dep of deps) {
      if (dep.name?.includes("express") || dep.name?.includes("fastify")) {
        this.data.push({ name: dep.name, url: dep.repository });
      }
    }
  }
}


// Wire into SectionConfig subclass for CLI/VS Code:
export class ApiSection extends SectionConfig {
  constructor(configManager) {
    super(configManager, new ApiSectionAutodetect(configManager), ApiSectionData);
  }
  async render() {
    const endpoints = this.data.data || [];
    return `## API Reference\n\n${endpoints.map(e => `- [${e.name}](${e.url})`).join("\n")}`;
  }
}

Tier 3: Full Section with Mustache Rendering

For the CLI and VS Code extension, sections use a template.mdMustache file and the _render() helper that enriches context with{config, tech, env, git}.

<!-- .dev/sections/api/template.md -->
## API Reference


**Base URL:** {{baseUrl}}
**Authentication:** {{authMethod}}


{{#endpoints}}
### {{method}} {{path}}
{{description}}
{{/endpoints}}


---
*Detected {{endpoints.length}} endpoints*

Registration Checklist

  1. Create section data file in ptkrdmelib/src/sections/YourSection.ts
  2. Export from ptkrdmelib/src/sections/index.ts
  3. Rebuild the library (cd ptkrdmelib && npm run build)
  4. Web App: create src/app/lib/sections/YourSection.ts, add render(), register in allSections
  5. CLI: create src/sections/your-section/ with section.ts prompts.ts data.ts template.md, register in ConfigManager.allSections
  6. VS Code: add section data to web/src/sectionsContext.tsx allSectionData, create render in src/sections/YourSection.ts, register in ConfigManager.ts