Skip to content

what-is-iroh: merge in "how iroh works" narrative with animated diagrams#74

Open
okdistribute wants to merge 1 commit into
mainfrom
rae/what-is-iroh-animations
Open

what-is-iroh: merge in "how iroh works" narrative with animated diagrams#74
okdistribute wants to merge 1 commit into
mainfrom
rae/what-is-iroh-animations

Conversation

@okdistribute

@okdistribute okdistribute commented Jun 19, 2026

Copy link
Copy Markdown
Contributor

Merges the animated SVG walkthrough from iroh.computer#479 into the docs What is iroh? page, with the PR's newer narrative and animations taking precedence over the old prose.

What's here

  • New How iroh works section driven by the PR's story, each step with its animated diagram:
    • connect-by-key → guaranteed connections → library & relays → endpoint startup → finding peers (DNS + DHT) → direct connections (hole punching + LAN)
  • 8 animated SVGs added under images/how-iroh-works/
  • Kept the existing layer-stack diagram, Rust composition example, core features, use cases, and getting-started links

Adaptation notes

  • Converted the blog's Next.js JSX (<object>, BlogPostLayout) to Mintlify's <Frame> + <img> convention
  • Animations are pure SMIL/CSS (no <script>), so they play fine via <img>
  • Each diagram renders on a white background so the near-black labels stay readable in both light and dark themes (skips needing _dark variants)
  • Cross-linked to existing concept/connecting pages; reference-style links inlined; typos fixed

Verification

Ran mint dev locally — all 8 SVGs load, 0 console errors, links resolve, diagrams render correctly.

🤖 Generated with Claude Code

Brings the animated SVG walkthrough from iroh.computer PR #479 into the
docs "What is iroh?" page: connect-by-key, guaranteed connections, library
and relays, endpoint startup, peer lookup (DNS + DHT), and direct
connections (hole punching + LAN).

Adapts the blog's Next.js JSX to Mintlify's <Frame>/<img> convention,
cross-links to existing concept/connecting pages, and renders each diagram
on a white background so the SMIL/CSS animations stay readable in both
light and dark themes. Keeps the existing layer-stack diagram, code
example, and getting-started links.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@mintlify

mintlify Bot commented Jun 19, 2026

Copy link
Copy Markdown

Preview deployment for your docs. Learn more about Mintlify Previews.

Project Status Preview Updated (UTC)
number0 🟢 Ready View Preview Jun 19, 2026, 12:17 AM

💡 Tip: Enable Workflows to automatically generate PRs for you.

@rklaehn

rklaehn commented Jun 19, 2026

Copy link
Copy Markdown

Nice. I think the stack image now looks a bit out of place. We can replace it as well.

Most of the animations don't work for me in the preview. Not sure what's going on.

I think we should adapt the SVGs so they also work with a black background. The white background in dark mode looks a bit strong.

img should work well, but I did object because some of the svgs do have tooltips which aren't visible for img.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants