Skip to main content

Link Preview Component Example

This page demonstrates how to use the LinkPreview component to create Gitbook-style link cards.

Basic Usage​

import LinkPreview from '@site/src/components/LinkPreview';

<LinkPreview
  url="https://hub.spigotmc.org/javadocs/bukkit/org/bukkit/Material.html"
  title="Material (Spigot-API 1.21.10-R0.1-SNAPSHOT API)"
/>

Live Example​

Material (Spigot-API 1.21.10-R0.1-SNAPSHOT API)
Attribute (Spigot-API)
Enchantment (Bukkit API)

With Custom Favicon​

You can also specify a custom favicon:

Site icon
Join our Discord Server

You can now use relative paths for internal wiki links:

Getting Started
Introduction to the Score Plugins Wiki
ExecutableItems Information

Usage Instructions​

  1. Import the component at the top of your markdown file:

    import LinkPreview from '@site/src/components/LinkPreview';

  2. Use it anywhere in your markdown:

    For external links:

    <LinkPreview
      url="https://external-site.com"
      title="Page Title"
    />

    For internal wiki links (no host needed!):

    <LinkPreview
      url="/docs/your-page"
      title="Internal Page Title"
    />

  3. Optional props:

    • description: Add a description line
    • favicon: Custom favicon URL (auto-fetched if not provided)

  4. Benefits of internal links:

    • ✅ No need to type the full URL
    • ✅ Works in both local development and production
    • ✅ Uses Docusaurus Link component for better performance
    • ✅ Automatically uses your site's favicon