Skip to main content

​
Product Overview

okl.ink is organized around Projects (each having a public /:slug page), Links (interactive tiles within a bento grid), and Themes (customizable visual styling and layout tokens).

​
Core Entities

​
Projects (Pages)

A project represents your public-facing page. Each project is uniquely identified by a clean URL slug (e.g., okl.ink/my-launch).
  • Slug Constraints: 1–50 alphanumeric characters and hyphens. Reserved paths (such as api, dashboard, settings, r, inspector, etc.) are protected.
  • Publication State: Pages start in draft mode and can be toggled live instantly.
  • Access Control: Projects can be publicly open, draft-only, or password protected.
Links are the individual content units on a page. Unlike conventional link trees with standard uniform buttons, okl.ink organizes links into a dynamic bento grid.
  • Sizes: 1x1 (Icon), 2x1 (Standard), 2x2 (Rich Preview/Social), and 4x1 (Full Banner).
  • Positioning: Zero-indexed ordering stored in PostgreSQL and reordered via optimistic transactions.
  • Shortlink Routing: Every link gets a unique /r/:id route that increments the click counter and redirects the visitor safely.

​
Theming & Styling

Visual styling in okl.ink is powered by a procedural theme engine that translates JSON configurations into CSS custom properties:
  • Custom background and accent colors are validated for WCAG luminance contrast.
  • Precomputed light/dark icon wells ensure maximum contrast for icons in dark themes.
  • Fluid radius and density variables control padding and tile margins.

​
Workspace Navigation