The reusable code component used throughout StylesDoc.
Author a code_block object in data, map it through Header/Body/Footer, and the renderer handles escaping, labels, language tags, copy affordance, spacing, and syntax token styling.
Put the source code in a code_block object. The renderer owns the markup so every docs page gets the same terminal-style shell.
{
"code_block": {
"label": "Databoard mapping",
"language": "json",
"code": "{\n \"data_mapping\": { ... }\n}"
}
}
Use this for template examples, component markup, and H/B/F output examples.
<section class="stylesdoc-band">
<header class="stylesdoc-section-header">
<h2>One structure</h2>
</header>
<div class="data-container">
<article class="data-sub-container">...</article>
</div>
</section>
Use this for menu sources, section topo, API payloads, patch_delta, and mapping examples.
{
"data_mapping": {
"api_data": [
["api_data"],
["databoard", "menu", "stylesdoc_component_code"]
]
}
}
Use this for generated HMVC examples, custom PHP snippets, and deployment-time normalization.
$rows = $orders->find(['status' => 'paid'])->toArray();
$api_data['body'][]['datatable'] = array_map(function ($row) {
return [
'customer' => $row['customer_name'],
'total' => $row['total'],
'status' => $row['status']
];
}, $rows);
Use this for deploy, smoke tests, API examples, and local build commands.
curl -s -X POST http://localhost/api/v1/databoards/$BOARD_ID/deploy \
-H "X-Antsand-API-Key: $ANTSAND_API_KEY" \
-H "Content-Type: application/json" \
-d '{}'
Use this for Sass v2 component contracts, board Sass overrides, and utility examples.
.stylesdoc-code-contract-card {
background: #ffffff;
border: 1px solid #e5eaf1;
border-radius: 18px;
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}
When a docs page needs exact highlighting, pass pre-tokenized spans. The renderer preserves trusted token markup.
<span class="syn-tag"><section</span> <span class="syn-attr">class</span>=<span class="syn-str">"stylesdoc-band"</span><span class="syn-tag">></span>
<span class="syn-tag"><h2></span>One structure<span class="syn-tag"></h2></span>
<span class="syn-tag"></section></span>
The same object works inside body items or footer. This is why the table, form, API, Databoard, and quick-start pages can all show code consistently.
{
"header": {"h2": "Example"},
"data": [
{"h3": "Step", "p": "Explain it", "code_block": {"language": "bash", "code": "make test"}}
],
"footer": {
"code_block": {"language": "json", "code": "{\"status\":\"ok\"}"}
}
}
Use code_preview.variants[] when the same idea needs examples in multiple languages.
The data controls the examples, Sass v2 controls the visual system, and the renderer handles tab switching, active-panel copy, and syntax coloring.
from datetime import timedelta
@workflow.defn
class ReliablePublish:
@workflow.run
async def run(self, post_id: str) -> str:
draft = await workflow.execute_activity(
fetch_draft,
post_id,
schedule_to_close_timeout=timedelta(seconds=20),
)
await workflow.execute_activity(verify_seo, draft)
return await workflow.execute_activity(publish_post, draft)
func ReliablePublish(ctx workflow.Context, postID string) (string, error) {
opts := workflow.ActivityOptions{
ScheduleToCloseTimeout: 20 * time.Second,
}
ctx = workflow.WithActivityOptions(ctx, opts)
var draft Draft
if err := workflow.ExecuteActivity(ctx, FetchDraft, postID).Get(ctx, &draft); err != nil {
return "", err
}
if err := workflow.ExecuteActivity(ctx, VerifySEO, draft).Get(ctx, nil); err != nil {
return "", err
}
return draft.URL, workflow.ExecuteActivity(ctx, PublishPost, draft).Get(ctx, nil)
}
import { proxyActivities } from '@antsand/workflow';
const { fetchDraft, verifySeo, publishPost } = proxyActivities({
startToCloseTimeout: '20 seconds',
});
export async function reliablePublish(postId: string): Promise<string> {
const draft = await fetchDraft(postId);
await verifySeo(draft);
return await publishPost(draft);
}
class ReliablePublishWorkflow < Temporalio::Workflow::Definition
def execute(post_id)
draft = Temporalio::Workflow.execute_activity(
FetchDraft,
post_id,
start_to_close_timeout: 20
)
Temporalio::Workflow.execute_activity(VerifySeo, draft)
Temporalio::Workflow.execute_activity(PublishPost, draft)
end
end
public class ReliablePublishWorkflow
{
[WorkflowRun]
public async Task<string> RunAsync(string postId)
{
var draft = await Workflow.ExecuteActivityAsync(
(Activities a) => a.FetchDraft(postId),
new() { StartToCloseTimeout = TimeSpan.FromSeconds(20) });
await Workflow.ExecuteActivityAsync((Activities a) => a.VerifySeo(draft));
return await Workflow.ExecuteActivityAsync((Activities a) => a.PublishPost(draft));
}
}
public class ReliablePublishWorkflowImpl implements ReliablePublishWorkflow {
private final Activities activities = Workflow.newActivityStub(
Activities.class,
ActivityOptions.newBuilder()
.setStartToCloseTimeout(Duration.ofSeconds(20))
.build());
public String run(String postId) {
Draft draft = activities.fetchDraft(postId);
activities.verifySeo(draft);
return activities.publishPost(draft);
}
}
$workflow = new ReliablePublishWorkflow();
return $workflow->run(function () use ($post_id) {
$draft = Activity::execute('fetchDraft', $post_id, timeout: 20);
Activity::execute('verifySeo', $draft);
return Activity::execute('publishPost', $draft);
});
Use one code_preview object with a variants array. Each variant maps to one tab and one syntax-highlighted code panel.
{
"body": [
{
"code_preview": {
"label": "Reliable workflow example",
"theme": "multi_code",
"copy": true,
"variants": [
{
"label": "PYTHON",
"language": "python",
"code": "def run():\n return publish()"
},
{
"label": "GO",
"language": "go",
"code": "func Run() string {\n return Publish()\n}"
},
{
"label": "PHP",
"language": "php",
"code": "$result = publish($draft);"
}
]
}
}
]
}