Skip to main content

🔒 This page is not indexed and is for internal reference only.

Component Showcase

All available components for use in articles and reviews. Copy the code snippets to use them in your MDX files.

Callouts

Highlighted information boxes for tips, warnings, and notes.

Information

This is an info callout. Use it for general helpful information.

Pro Tip

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

Warning

This is a warning callout. Use it to highlight important cautions.

Note

This is a note callout with default title. Use it for additional context.
View Code 
import Callout from '../../components/content/Callout.astro';

<Callout type="info" title="Custom Title">
  Your content here
</Callout>

// Types: info | tip | warning | note

Pros & Cons

Display product advantages and disadvantages side by side.

Pros

  • Excellent value for money
  • High quality tungsten barrel
  • Multiple weight options available
  • Complete set included

Cons

  • Basic flights and stems
  • May need upgrading accessories
  • Limited colour options
View Code 
import ProsCons from '../../components/content/ProsCons.astro';

<ProsCons
  pros={[
    'First advantage',
    'Second advantage',
  ]}
  cons={[
    'First disadvantage',
    'Second disadvantage',
  ]}
/>

Product Highlight

Showcase a product with rating, features, and affiliate link.

Recommended

Winmau Blade 6 Triple Core

  • Official PDC tournament dartboard
  • Triple Core technology
  • East African sisal
  • Rota-Lock mounting system
£89.99 Check Price

Budget Dartboard

  • Staple-free construction
  • Basic sisal quality
£29.99 Check Price
View Code 
import ProductHighlight from '../../components/content/ProductHighlight.astro';

<ProductHighlight
  name="Product Name"
  price="£89.99"
  rating={5}
  recommended={true}
  features={[
    'Feature one',
    'Feature two',
  ]}
  affiliateLink="https://amzn.to/xxx"
/>

Ratings

Simple star rating display.

5/5 - Excellent
4/5 - Great
3/5 - Good
2/5 - Fair
1/5 - Poor
View Code 
import Rating from '../../components/content/Rating.astro';

<Rating score={4} label="Great" />
<Rating score={3} max={5} />

Verdict Box

Summary verdict for product reviews with rating.

Our Verdict

4/5 - Great
The Red Dragon Pegasus offers exceptional value for anyone looking to upgrade from brass darts. While the included accessories are basic, the barrel quality punches well above its price point. A solid recommendation for beginners and intermediate players.
View Code 
import Verdict from '../../components/content/Verdict.astro';

<Verdict rating={4} title="Our Verdict">
  Your verdict summary text here.
</Verdict>

Darts Rating (Reviews)

Detailed breakdown for darts reviews with grip, value, durability, and appearance.

Our Rating

Darts are personal. What works for me might not work for you.

4.0 / 5
Grip
(not in overall)
3/5

Medium knurl pattern - good balance between grip and release.

Value
5/5

Outstanding value for 80% tungsten darts at this price.

Durability
3/5

Paint shows wear after a few months of regular use.

Appearance
(not in overall)
4/5

Clean, professional look with subtle styling.

View Code 
import DartsRating from '../../components/DartsRating.astro';

<DartsRating
  ratings={{
    grip: 3,
    value: 5,
    durability: 3,
    appearance: 4
  }}
  comments={{
    grip: 'Comment about grip',
    value: 'Comment about value',
    durability: 'Comment about durability',
    appearance: 'Comment about appearance'
  }}
/>

Match Scoreboard

Display match results with player stats.

World Championship Final
(1) Luke Humphries 103.45 avg
7
(3) Michael van Gerwen 99.87 avg
4
Luke Littler 110.24 avg
6
Rob Cross 95.12 avg
2
View Code 
import MatchScoreboard from '../../components/MatchScoreboard.astro';

<MatchScoreboard
  player1="Player One"
  player2="Player Two"
  score1={7}
  score2={4}
  player1Avg={103.45}
  player2Avg={99.87}
  player1Seed={1}
  player2Seed={2}
  round="Final"
/>

Satire Disclaimer

Automatically shown on satire articles. Can also be used manually.

View Code 
import SatireDisclaimer from '../../components/SatireDisclaimer.astro';

<SatireDisclaimer />

// Note: Automatically shown on articles with category: 'Satire'

Table of Contents

Auto-generated from article headings. Used automatically in article layouts.

View Code 
import TableOfContents from '../../components/TableOfContents.astro';

// Automatically receives headings from article render
const { headings } = await article.render();

<TableOfContents headings={headings} />

Social Share

Share buttons for articles. Used automatically in article layouts.

View Code 
import SocialShare from '../../components/SocialShare.astro';

<SocialShare
  title="Article Title"
  url="/articles/article-slug"
/>

Affiliate Button

Styled button for affiliate links. Uses CSS class in article content.

View on Amazon
View Code 
<!-- In MDX content -->
<a href="https://amzn.to/xxx" class="affiliate-button" target="_blank" rel="noopener noreferrer nofollow">
  View on Amazon
</a>

FAQ Section

Accordion-style FAQ using HTML details/summary. Styled via CSS class.

What dartboard do they use in the PDC?

The PDC uses the Winmau Blade 6 Triple Core for all televised tournaments including the World Championship at Alexandra Palace.

How often should I rotate my dartboard?

For casual play, rotate every 4-6 weeks. If you practice daily, rotate every 1-2 weeks to spread wear evenly across all segments.

What is the highest checkout in darts?

The highest checkout is 170 (T20, T20, Bull). This is known as the "Big Fish" and is relatively rare even among professionals.

View Code 
<!-- In MDX content -->
<div class="faq-section">

<details>
<summary>Question one?</summary>
<div class="faq-answer">
<p>Answer to question one.</p>
</div>
</details>

<details>
<summary>Question two?</summary>
<div class="faq-answer">
<p>Answer to question two.</p>
</div>
</details>

</div>

Comparison Table

Styled table for product comparisons. Uses CSS class wrapper.

Dartboard Best For Price Range
Winmau Blade 6 PDC tournaments £80-100
Target TOR Modern features £70-90
Unicorn Eclipse Pro 2 WDF tournaments £45-60
Mission Samurai 2 UKDA/SDA leagues £35-50
View Code 
<!-- In MDX content -->
<div class="comparison-table">

| Product | Feature | Price |
|---------|---------|-------|
| **Item 1** | Description | £XX |
| **Item 2** | Description | £XX |

</div>

Interactive Games (React)

The following React components are used for interactive games. They're included in dedicated pages under /practice/:

  • Game501.tsx - Full 501 darts game
  • CheckoutGame.tsx - Checkout practice
  • CheckoutCalculator.tsx - Checkout route finder
  • Bobs27Game.tsx - Bob's 27 practice
  • Treble20Game.tsx - Treble 20 challenge
  • AroundTheBoardGame.tsx - Around the clock
  • ScoringGame.tsx - Score counting practice
  • RandomTargetGame.tsx - Random target practice
  • Quiz.tsx - Quiz component for quizzes