> ## Documentation Index
> Fetch the complete documentation index at: https://okl-ink.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Link Types & Widgets

> Supported link categories, social media embeds, OpenGraph metadata parsing, and icon styles.

# Link Types & Widgets

okl.ink provides specialized rendering, badges, and icon styling for distinct link types.

***

## Supported Link Types

| Type Identifier    | Display Label     | Default Size | Description / Interaction                                    |
| :----------------- | :---------------- | :----------- | :----------------------------------------------------------- |
| `live-demo`        | **Live Demo**     | `2x1`        | Primary launch URL with pulsing status indicator.            |
| `github`           | **GitHub**        | `2x1`        | Code repository with repository icon and clean URL preview.  |
| `documentation`    | **Documentation** | `2x1`        | Developer docs, manuals, or API references.                  |
| `youtube`          | **YouTube**       | `2x2`        | Video links with automatic thumbnail or inline embed player. |
| `x` (or `twitter`) | **X (Twitter)**   | `2x2`        | Social post or profile with rich interactive tweet embeds.   |
| `linkedin`         | **LinkedIn**      | `2x2`        | Professional profile or article cards.                       |
| `product-hunt`     | **Product Hunt**  | `2x1`        | Product launch badges and direct ranking links.              |
| `devpost`          | **Devpost**       | `2x1`        | Hackathon submissions and project showcases.                 |
| `blog`             | **Blog**          | `2x1`        | Editorial articles, Substack posts, or Medium essays.        |
| `other`            | **Other**         | `2x1`        | Universal link tile for custom destinations.                 |

***

## Automatic OpenGraph Resolver (`/api/og`)

When you paste a URL into the link builder, okl.ink triggers an internal server-side metadata resolver:

```http theme={null}
GET /api/og?url=https://github.com/hebuildapps/demo-links
```

The server fetches the page safely and scans for:

* `og:image` / `twitter:image`
* Page `<title>` and `og:title`
* Favicons and apple touch icons

### Security & Sanitization

* Follows up to 5 redirects safely
* Rejects non-HTTP(S) schemas (`javascript:`, `file:`, `data:`)
* Enforces a 6-second fetch timeout (`AbortController`) to prevent SSRF or long-hanging requests
* Limits parsing to the first 1.5MB of HTML content

***

## Icon Style Variants

Themes support 3 distinct icon treatments:

1. **Duotone**: Phosphor-style duotone SVG icons with 20% opacity primary backings and crisp foreground paths.
2. **Filled**: Solid glyphs with high contrast accents.
3. **Colored**: Authentic brand-colored SVGs (GitHub black, YouTube red, LinkedIn blue, Product Hunt orange).