Steps Block (Astro)

1---
2import type { StepsData } from '@contentbit/blocks'
3import type { ValidatedBlockNode } from '@contentbit/core'
4import type { AstroBlockContext } from '@contentbit/astro'
5 
6interface Props {
7  node: ValidatedBlockNode<unknown>
8  ctx: AstroBlockContext
9}
10 
11const { node, ctx } = Astro.props
12const data = node.data as StepsData
13const last = data.items.length - 1
14const items = await Promise.all(
15  data.items.map(async (item) => ({
16    html: await ctx.renderMarkdown(item.text),
17  })),
18)
19---
20 
21<ol data-cb-styled class="my-6 list-none p-0">
22  {
23    items.map((item, i) => (
24      <li class="relative flex gap-4 pb-7 last:pb-0">
25        {i < last ? <span class="bg-border absolute top-7 bottom-1 left-[13px] w-px" aria-hidden="true" /> : null}
26        <span class="bg-card text-foreground z-10 flex size-7 shrink-0 items-center justify-center rounded-full border font-mono text-xs font-semibold shadow-sm">
27          {i + 1}
28        </span>
29        <div class="min-w-0 pt-1 text-sm leading-relaxed [&>p]:m-0 [&>p+p]:mt-2" set:html={item.html} />
30      </li>
31    ))
32  }
33</ol>