85 lines
4.4 KiB
TypeScript
85 lines
4.4 KiB
TypeScript
import type React from 'react'
|
||
|
||
export type NodeType = 'config' | 'render' | 'variable' | 'function'
|
||
|
||
export type NodeHelpEntry = {
|
||
title: string
|
||
content: React.ReactNode
|
||
}
|
||
|
||
const Code = ({ children }: { children: React.ReactNode }) => (
|
||
<code className="rounded bg-muted px-1 py-0.5 text-xs font-mono">{children}</code>
|
||
)
|
||
|
||
const Section = ({ title, children }: { title: string; children: React.ReactNode }) => (
|
||
<div className="mt-3 first:mt-0">
|
||
<h4 className="text-xs font-semibold text-foreground">{title}</h4>
|
||
<div className="mt-1 text-xs text-muted-foreground">{children}</div>
|
||
</div>
|
||
)
|
||
|
||
export const NODE_HELP: Record<NodeType, NodeHelpEntry> = {
|
||
config: {
|
||
title: 'Config node',
|
||
content: (
|
||
<>
|
||
<Section title="How to use">
|
||
<p>Config nodes hold PlantUML + Nunjucks template content. Connect one config to a Render node to display the diagram. Use the editor to write <Code>@startuml</Code> blocks and Nunjucks tags (<Code>{'{{ }}'}</Code>, <Code>{'{% %}'}</Code>).</p>
|
||
</Section>
|
||
<Section title="Using in another node">
|
||
<p>From another config, reference this template:</p>
|
||
<ul className="list-disc pl-4 mt-1 space-y-0.5">
|
||
<li><Code>{'{% extends "configId" %}'}</Code> — inherit layout</li>
|
||
<li><Code>{'{% include "configId" %}'}</Code> — inline content</li>
|
||
<li><Code>{'{% import "configId" as alias %}'}</Code> — use as macro namespace</li>
|
||
</ul>
|
||
<p className="mt-2">Replace <Code>configId</Code> with this node’s id or its title. Connect variables/functions to this config; they are available as <Code>{'{{ varId }}'}</Code> and <Code>{'{{ x | fnId }}'}</Code> in the template.</p>
|
||
</Section>
|
||
</>
|
||
),
|
||
},
|
||
render: {
|
||
title: 'Renderer node',
|
||
content: (
|
||
<>
|
||
<Section title="How to use">
|
||
<p>Connect a single Config node (input) to this Render node. It resolves the config’s PlantUML + Nunjucks (variables, function filters, extends/include), sends the result to the diagram service, and shows the SVG here.</p>
|
||
</Section>
|
||
<Section title="Using in another node">
|
||
<p>Renderer nodes are terminal: they only consume configs. They are not referenced from other nodes. To reuse a diagram, reference the Config node from another Config (extends/include), then connect that config to a Render node.</p>
|
||
</Section>
|
||
</>
|
||
),
|
||
},
|
||
variable: {
|
||
title: 'Variable node',
|
||
content: (
|
||
<>
|
||
<Section title="How to use">
|
||
<p>Variables hold a value (string, number, or boolean). Connect a Variable node to a Config node to expose it in that config’s template.</p>
|
||
</Section>
|
||
<Section title="Using in another node">
|
||
<p>In a Config template connected to this variable, use <Code>{'{{ '}<em>nodeId</em>{' }}'}</Code> where <em>nodeId</em> is this node’s id. Example: if the variable node id is <Code>var_001</Code>, write <Code>{'{{ var_001 }}'}</Code> in the config.</p>
|
||
</Section>
|
||
</>
|
||
),
|
||
},
|
||
function: {
|
||
title: 'Function node',
|
||
content: (
|
||
<>
|
||
<Section title="How to use">
|
||
<p>Functions are Nunjucks custom filters. Write a body using either named parameters (<Code>function(num, x, kwargs) { ... }</Code>) or the <Code>args</Code> array. Connect this node to a Config to use the filter in that config’s template.</p>
|
||
</Section>
|
||
<Section title="Using in another node">
|
||
<p>In a Config template, use the filter syntax: <Code>{'{{ value | '}<em>nodeId</em>{' }}'}</Code> or <Code>{'{{ value | '}<em>nodeId</em>{'(arg1, key=val) }}'}</Code>. The first argument is the value before <Code>|</Code>; extra arguments and keyword args are passed as in Nunjucks. Return a value or a Promise for async filters.</p>
|
||
</Section>
|
||
</>
|
||
),
|
||
},
|
||
}
|
||
|
||
export function getNodeHelp(nodeType: NodeType): NodeHelpEntry {
|
||
return NODE_HELP[nodeType] ?? { title: nodeType, content: null }
|
||
}
|