Component Showcase

This page demonstrates all built-in components available for documentation. Use this as a reference when writing content.

Code Blocks

Syntax-highlighted code with automatic copy button.

Basic Code Block

// JavaScript example
function greet(name) {
  return `Hello, ${name}!`
}

With Filename

src/config.ts

export interface Config {
  apiUrl: string
  timeout: number
}

With Line Highlighting

def process_data(data):
    # These lines are highlighted
    cleaned = clean(data)
    return transform(cleaned)

Shell Commands

# Start Lombok with Docker Compose
docker compose up -d

# Check container status
docker compose ps

Tabs

For multi-variant content like OS-specific or language-specific instructions.

npm

bash npm install lombok-client

pnpm

bash pnpm add lombok-client

yarn

bash yarn add lombok-client

Sync Tabs Example

macOS

Open Terminal and run the command.

Windows

Open PowerShell and run the command.

Linux

Open your terminal emulator and run the command.

Callouts (Asides)

For highlighting important information.

Note

This is a note. Use it for general information that’s good to know.

Tip

This is a tip. Use it for helpful suggestions and best practices.

Caution

This is a caution. Use it for potential issues users should be aware of.

Danger

This is a danger warning. Use it for critical information about destructive actions or security concerns.

With Custom Titles

Custom Title

You can customize the title of any callout.

Pro Tip

Custom titles help provide context for the callout content.

Cards

For feature overviews and navigation.

Card Grid

Getting Started

Learn the basics of Lombok in just a few minutes.

Installation

Deploy Lombok on your own infrastructure.

Storage

Configure S3-compatible storage backends.

App Platform

Build TypeScript apps on Lombok.

Stagger Cards

Step 1

Create your configuration file.

Step 2

Add your storage providers.

Step 3

Deploy and start using Lombok.

Tables

Standard markdown tables with automatic mobile scroll.

Feature	Free	Pro	Enterprise
Storage	5 GB	100 GB	Unlimited
Apps	3	10	Unlimited
Workers	1	5	Unlimited
Support	Community	Email	Priority

Wide Table (Tests Horizontal Scroll)

Provider	Region	Pricing	Free Tier	Min Storage	Max Object Size	Egress Cost	API Compatibility
AWS S3	Global	Pay-as-you-go	5 GB/12 mo	None	5 TB	$0.09/GB	Full
Cloudflare R2	Global	Pay-as-you-go	10 GB	None	5 TB	Free	Full
Backblaze B2	US/EU	Pay-as-you-go	10 GB	None	5 TB	$0.01/GB	Partial
DigitalOcean Spaces	Regional	$5/mo base	None	250 GB	5 TB	$0.01/GB	Full
MinIO	Self-hosted	Free	N/A	None	5 TB	N/A	Full

Images

Images placed in src/assets/ are automatically optimized.

import { Image } from 'astro:assets'
import screenshot from '../../assets/screenshot.png'

<Image src={screenshot} alt="Screenshot description" />

Links

Internal Links

• Introduction
• Deployment Overview

External Links

• Lombok on GitHub
• Astro Documentation

Inline Formatting

• Bold text for emphasis
• Italic text for terms
• inline code for commands and code references
• Strikethrough for deprecated content
• Links for navigation

Lists

Unordered List

• First item
• Second item
  • Nested item
  • Another nested item
• Third item

Ordered List

1. First step
2. Second step
   1. Sub-step A
   2. Sub-step B
3. Third step

Task List

• Completed task
• Pending task
• Another pending task

Headings

Content uses H2 (##) for main sections and H3 (###) for subsections. These appear in the table of contents on the right.

The table of contents is configured to show H2 and H3 headings only (configured in astro.config.mjs).