Portable Text Showcase: All Custom Block Types

Portable Text Showcase

This post demonstrates all 6 custom block types supported by Rocketlink's portable text renderer. Each block type below corresponds to a custom schema definition in blockContent.ts.

Image Block

A single image with alt text and caption:

Code Block

A TypeScript code block with syntax highlighting:

1interface PaymentRoute {
2  provider: string;
3  weight: number;
4  maxVolume: number;
5}
6
7async function routePayment(
8  amount: number,
9  currency: string,
10  routes: PaymentRoute[]
11): Promise<PaymentRoute> {
12  const available = routes.filter(r => r.maxVolume > amount);
13  return available.sort((a, b) => b.weight - a.weight)[0];
14}

Callout Block

An informational callout with title and body:

Video Embed

An embedded YouTube video:

Image Gallery

A gallery of portfolio company screenshots:

Pull Quote

A styled pull quote with attribution:

“

The best acquisitions are the ones where the founder calls you back a year later to say their company is growing faster than ever.

Conclusion

All 6 custom block types render correctly. This post serves as both a visual showcase and an automated verification target for the portable text rendering pipeline.