Component Test Page

Every reusable MDX block in one place — use this page to visually verify components before publishing articles.

January 1, 2025·4 min read

title: "Component Test Page" seoTitle: "Component Test Page" description: "A visual reference page showing every reusable MDX component available in the blog system." excerpt: "Every reusable MDX block in one place — use this page to visually verify components before publishing articles." tags: ["internal", "components"] publishedAt: "2025-01-01T00:00:00.000Z" featured: false ogVariant: "gradient" ogPalette: "purple"

This page renders every reusable MDX component. Use /blog/test-components to visually verify the design system before publishing real articles.

CodeBlock

Plain styled code block with copy button. No syntax highlighting yet (deferred to Phase 2).

webhook-payload.json

{
"token": "your_secret_token",
"action": "BUY"
}

pine

//@version=5
strategy("EMA Cross", overlay=true)
fast = ta.ema(close, 9)
slow = ta.ema(close, 21)
if ta.crossover(fast, slow)
  strategy.entry("Long", strategy.long)

curl-test.sh

curl -X POST https://your-webhook-url \
-H "Content-Type: application/json" \
-d '{"token":"abc123","action":"BUY"}'

CTABlock — Primary variant

Ready to automate your first trade?

Create a bot, connect TradingView, and execute your first automated trade in minutes.

Create a Bot

CTABlock — Subtle variant

Learn how webhooks work

Understand the full signal pipeline before connecting your strategy.

Read the guide

BinanceWarning

Binance Warning

Never enable withdrawal permissions on an API key used for automated trading. The platform does not require withdrawal access under any circumstances.

IP Whitelisting Required

Your Binance API key must have IP whitelisting enabled. Add the platform's outbound IP address to your key's whitelist before adding it here.

TradingViewTip

TradingView Tip

Set your alert to fire only once per bar close to avoid duplicate signals being sent to your bot.

ENTRY_EXIT Bot Type

For ENTRY_EXIT bots, use "action": "BUY" for entry signals and "action": "EXIT" for exit signals.

SecurityNote

Security Note

Your API keys are encrypted before storage and decrypted only in worker memory during trade execution. They are never logged or stored in plaintext.

Token Validation

Every incoming webhook request is validated against your bot's secret token before any signal is processed. Requests with invalid or missing tokens are rejected immediately.

AdPlaceholder

These render only when NEXT_PUBLIC_SHOW_AD_ZONES=true. They are invisible in production.

RelatedPosts (stub)

Currently renders nothing — architecture stub for Phase 2 tag-based fetching.

Markdown Element Overrides

The following are standard markdown elements rendered through the MDX component overrides.

Headings

h1 — Page Title Level

h2 — Section Level

h3 — Subsection Level

h4 — Detail Level

Paragraph

This is a standard paragraph. It uses text-foreground/85 with relaxed line height for comfortable reading. Links like this one use the primary color with underline.

Inline code

Use "action": "BUY" in your alert message body. The token field must match your bot's secret token exactly.

Bold and emphasis

Bold text is rendered with font-semibold text-foreground. Use it for key terms and important values.

Blockquote

Signals are processed only through secured, approved connections. Only your bot can place trades — no external access is allowed.

Unordered list

First item in the list
Second item with more detail
Third item — lists use marker:text-primary/60 for the bullet color

Ordered list

Create your Binance API key
Add it to the platform
Create a bot
Connect TradingView alerts

Horizontal rule

Table

| Permission | Required | |---|---| | Reading | ✅ Yes | | Futures | ✅ Yes | | Spot Trading | ❌ No | | Withdrawals | ❌ Never |

Pre / code block (native markdown)

This is a native markdown fenced code block.
It uses the pre/code override from mdx-components.tsx.
No copy button — use <CodeBlock> for that.