Skip to content

Kitchen Sink

This page demonstrates every available component and directive in the NoMercy documentation system. Use this as a reference for building documentation pages.

Hero Pattern

The hero pattern provides a decorative background element for landing pages. It’s already applied to this page.

Usage:

MARKDOWN
::Hero

Icon Cards

Icon cards display a grid of linked cards with icons, perfect for documentation sections.

Documentation Sections

App Documentation

Complete guide to setting up and using the NoMercy application.

Media Server

Configure and manage your media server instance.

API Reference

Integrate with the NoMercy API programmatically.

Usage:

MARKDOWN
::IconCards {{ heading: 'Documentation Sections' }}

::IconCard {{ href: '/path', name: 'Card Title', icon: 'api' }}

Card description goes here.

::IconCard {{ href: '/path', name: 'Another Card', icon: 'server' }}

Another description.

::

Logo Cards

Logo cards display a grid of items with custom logos, ideal for SDK libraries or integrations.

Supported Languages

JavaScript

Build applications with Node.js and modern JavaScript frameworks.

Read more

Python

Integrate with Python for data processing and automation.

Read more

PHP

Server-side integration with PHP applications.

Read more

Usage:

MARKDOWN
::LogoCards {{ heading: 'Official SDKs' }}

::LogoCard {{ name: 'Node.js', href: '#', logo: '/images/logos/node.svg' }}

Description of the SDK or integration.

::

Callouts

Callouts highlight important information with an info icon and colored background.

This is a callout component. Use it to draw attention to important notes, warnings, or tips that users should be aware of before proceeding.

Usage:

MARKDOWN
::Callout

Your important message here. Can span multiple paragraphs.

::

Buttons

Buttons can be styled with different variants and can include icons.

Text Variant

Get Started

Outline Variant

View SDKs

Multiple Buttons in a Row

App Setup
Media Server
API Quickstart

Usage:

MARKDOWN
::button {{ url: '/path', variant: 'text' }}

Button Label

::icon arrow-right

::

Code Blocks

Single code blocks with syntax highlighting and optional titles.

Install dependencies
npm install @nomercy/sdk
Initialize the client
import { NoMercyClient } from '@nomercy/sdk';

const client = new NoMercyClient({
  apiKey: process.env.NOMERCY_API_KEY,
});
Python example
from nomercy import Client

client = Client(api_key='your-api-key')
response = client.media.list()

Usage:

MARKDOWN
```javascript {{ title: 'Example code' }}
const example = 'code here';
```

Code Groups

Code groups display multiple language examples with tabs.

curl -X GET https://api.nomercy.tv/v1/media \
  -H "Authorization: Bearer {token}"

Usage:

MARKDOWN
::code-group

```bash {{ title: 'cURL' }}
curl example
```

```javascript
// JS example
```

::

Properties

Properties display API parameters, fields, or configuration options.

  • Name
    api_key
    Type
    string
    Description

    Your API authentication key. Required for all requests.

  • Name
    timeout
    Type
    integer
    Description

    Request timeout in milliseconds. Defaults to 30000.

  • Name
    retries
    Type
    integer
    Description

    Number of retry attempts for failed requests. Defaults to 3.

  • Name
    debug
    Type
    boolean
    Description

    Enable debug logging for troubleshooting. Defaults to false.

Usage:

MARKDOWN
::properties

::property {{ name: 'field_name', type: 'string' }}

Description of the property.

::

Layout Columns

Create multi-column layouts for side-by-side content.

Left Column

This content appears in the left column. Perfect for explanatory text, documentation, or instructions.

You can include:

  • Paragraphs
  • Lists
  • Links
  • Any markdown content
{
  "id": "12345",
  "name": "Example",
  "status": "active",
  "created_at": "2024-01-20T12:00:00Z"
}

Sticky Column

Regular content in the left column that scrolls normally with the page.

// This code block stays visible
// while you scroll the left column
const stickyExample = true;

Usage:

MARKDOWN
::row

::col

Left column content

::col

Right column content

::

# Or with sticky:

::row

::col

Scrolling content

::col sticky

Fixed content

::

Typography

Headings

Standard markdown headings are automatically styled with anchor links.

Heading 1

Heading 2

Heading 3

Heading 4

Paragraphs

Regular paragraph text with bold, italic, and inline code formatting.

You can also use the lead class for emphasis:

This is a lead paragraph with larger text that stands out from regular content.

Lists

Unordered lists:

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

Ordered lists:

  1. First step
  2. Second step
  3. Third step

Standard markdown links: Visit NoMercy

Blockquotes

This is a blockquote. Use it for important callouts or quotations. It can span multiple lines.

Horizontal Rules

Use --- for section dividers:

Tables

FeatureStatusNotes
Icon Cards✓Fully supported
Logo Cards✓Fully supported
Callouts✓Fully supported
Code Groups✓Fully supported

Combinations

You can combine multiple components for complex layouts:

Documentation + Code

Here’s a common pattern combining explanatory text with a code example.

Remember to replace {token} with your actual API key.

curl https://api.nomercy.tv/v1/status \
  -H "Authorization: Bearer {token}"

Summary

This page demonstrates all available directives:

  • ::Hero - Decorative background pattern
  • ::IconCards / ::IconCard - Documentation section cards
  • ::LogoCards / ::LogoCard - SDK/integration cards
  • ::Callout - Important notes and warnings
  • ::button with ::icon - Call-to-action buttons
  • ::code-group - Multi-language code examples
  • ::properties / ::property - API parameter documentation
  • ::row / ::col / ::col sticky - Multi-column layouts

All directives use the :: prefix and avoid JSX imports, keeping your markdown clean and portable.