$ show inkonchain/docs
A polished documentation website for Ink, a Layer 2 blockchain (OP Stack) built by Kraken. The site is implemented with Next.js 15 and Nextra 3 using the Pages Router, with MDX-authored content covering network setup, contract deployment, bridges, faucets, and ecosystem tools. It features a highly custom UI: a WebGL interactive ink animation on the homepage, a theme toggle using View Transitions API, a full-text search with a custom modal, and a 'copy page as Markdown' feature designed for LLM consumption. The codebase is meticulously crafted with extensive comments explaining design rationales (e.g., Tailwind token mapping, font loading, shader adaptations). Build tooling includes ESLint, Prettier, CSpell, remark linting, and a GitHub Actions CI/CD pipeline with Vercel deployments. No tests are present, but the code is clean, well-organized, and demonstrates strong frontend engineering skills.
The LLM identified 3 files worth highlighting for reuse:
Converts the rendered DOM of a page into clean Markdown, preserving headings, lists, tables, code blocks, and inline formatting. It skips page chrome (navigation, edit links, search) and handles nested structures recursively. This is a generic utility that could be extracted and reused in any web application that needs to export rendered content to Markdown for note-taking, LLM ingestion, or documentation generation. It demonstrates strong DOM traversal and text handling skills.
Defines a custom Shiki theme with dark and light variants specifically tuned to the Ink brand palette (violet accent, green strings, grey comments). The theme is structured as plain JavaScript objects and can be easily reused in any project that uses Shiki for code highlighting. It shows an attention to detail in mapping token scopes and adjusting colors for contrast in both modes.
A lightweight global toast notification that appears when any copy operation succeeds. It listens for a custom window event ('ink:copied') and also intercepts clicks on Nextra's code-block copy buttons via event delegation. The toast uses a spring-like animation and respects reduced-motion preferences. This component is self-contained and could be extracted into any web app that needs a consistent 'copied' feedback mechanism, demonstrating a clean event-driven architecture.