Earendil Ray

A ray.so-style snippet press in the Earendil aesthetic: paste code, get PNG / SVG / HTML exports set in Commit Mono (code) and Departure Mono (chrome) on the warm paper palette.

Live at earendil-works.github.io/ray

Usage

• Paste code anywhere on the page (or type into the card).
• Click the labels top-right to cycle options:
  • Lang — auto-detect or pick from the highlight.js list (also available by clicking the language tag in the card); changing languages preserves the filename base and replaces its extension
  • Theme — paper (light card on taupe) / dark paper (taupe card on light) / night
  • Padding — S / M / L / XL frame padding
  • Size — code font size
  • Tab — tab display width (defaults to 2)
  • Bar — title bar with editable filename + language tag
  • Bg — frame background on/off (off = transparent export around the card)
  • Round — round the card corners (off by default for square corners)
  • Logo — add the white Earendil emblem to any corner, or leave it off
• Export bottom-right: PNG (2x), SVG, HTML, or Copy the PNG to the clipboard.
• In the editor, Tab indents and Shift+Tab dedents using the snippet's existing indentation style (tabs vs spaces).

Development

Plain static files, no build step. Serve the repo root with any static file server (fetch is used for font embedding, so file:// won't do), e.g. python3 -m http.server.

How it works

• app.js holds SNIPPET_CSS, the single stylesheet shared by the live preview and every export, so what you see is exactly what you get.
• SVG export wraps the frame markup in a <foreignObject> with the fonts embedded as base64 @font-face rules (Commit Mono regular + italic, Departure Mono; ~120 KB total), so the file is self-contained.
• PNG export rasterizes that SVG through a canvas at 2x. The SVG is loaded via a data: URI because Chromium taints canvases for blob-URL SVGs containing foreignObject.
• HTML export is a standalone document with the same inlined CSS and font.

Assets

• Fonts and textures are taken from earendil-website (Commit Mono converted from OTF to woff2 via fonttools, Departure Mono, PlantinNow, star cursors, emblem).
• Syntax highlighting is a vendored highlight.js common bundle plus a few extra grammars (elixir, dockerfile, nginx, http, protobuf, django), themed in the Earendil palette inside SNIPPET_CSS.