{"_id":"@andyed/marginalia","name":"@andyed/marginalia","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@andyed/marginalia","publishConfig":{"access":"public"},"version":"0.1.0","description":"Typographic callout library — pull quotes, callouts, code blocks, badges, collapsible sections, drop caps","style":"marginalia.css","main":"marginalia.js","exports":{".":"./marginalia.js","./md":"./marginalia-md.js","./marginalia.css":"./marginalia.css","./marginalia-md":"./marginalia-md.js"},"keywords":["typography","callouts","pull-quotes","css","design-system","llm","markdown"],"author":{"name":"Andy Edmonds"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/andyed/marginalia.git"},"homepage":"https://andyed.github.io/marginalia/","scripts":{"test":"node --test test/*.test.js"},"gitHead":"61fb212f0abcdd157a207c1b969f61a592175877","_id":"@andyed/marginalia@0.1.0","bugs":{"url":"https://github.com/andyed/marginalia/issues"},"_nodeVersion":"25.8.2","_npmVersion":"11.11.1","dist":{"integrity":"sha512-dTVWEGjd25EBApyd7WpVrHjaIYXyjKwk3ZWyH0XG0Pktci+VOKQrKnWIs5ts1Nx9VjTpZyhkrffYsH86v9b6hg==","shasum":"08b7f06e08690b9bced757323aa8da3510cea1c0","tarball":"https://registry.npmjs.org/@andyed/marginalia/-/marginalia-0.1.0.tgz","fileCount":7,"unpackedSize":42989,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGHu4nK6mnQ0zoDOwBC6jyHaZccJwGGrD9dvy8mqVHlMAiBwevjYUFuhkrCFrmhg0PadUGLkeD+ad4J4lHYErxd9kw=="}]},"_npmUser":{"name":"andyed","email":"andyed@gmail.com"},"directories":{},"maintainers":[{"name":"andyed","email":"andyed@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/marginalia_0.1.0_1777147087093_0.7803034932438055"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-25T19:58:06.968Z","0.1.0":"2026-04-25T19:58:07.239Z","modified":"2026-04-25T19:58:07.497Z"},"maintainers":[{"name":"andyed","email":"andyed@gmail.com"}],"description":"Typographic callout library — pull quotes, callouts, code blocks, badges, collapsible sections, drop caps","homepage":"https://andyed.github.io/marginalia/","keywords":["typography","callouts","pull-quotes","css","design-system","llm","markdown"],"repository":{"type":"git","url":"git+https://github.com/andyed/marginalia.git"},"author":{"name":"Andy Edmonds"},"bugs":{"url":"https://github.com/andyed/marginalia/issues"},"license":"MIT","readme":"![Marginalia](assets/wordmark-800x200.png)\n\n15 components, CSS custom properties, zero dependencies.\n\nExtracted from [Inside the Math](https://andyed.github.io/psychodeli-webgl-port/inside_the_math/) and [Scrutinizer](https://andyed.github.io/scrutinizer-www/) blog posts. Inspired by the editorial layouts of Rolling Stone and early Wired.\n\n![Marginalia showcase](images/showcase_03072026.png)\n\n**[Live Demo & Documentation](https://andyed.github.io/marginalia/)**\n\n## Install\n\n```html\n<link rel=\"stylesheet\" href=\"marginalia.css\">\n<script src=\"marginalia.js\" defer></script>\n```\n\nJS is optional. All components work without it.\n\n### Vite / npm\n\n```bash\nnpm install @andyed/marginalia\n```\n\n```js\nimport '@andyed/marginalia/marginalia.css';\nimport { convert } from '@andyed/marginalia/md';\n\ndocument.querySelector('#content').innerHTML = convert(markdownString);\n```\n\n## Markdown Converter\n\n`marginalia-md.js` converts a markdown subset into Marginalia-classed HTML. Write standard markdown — GitHub-style alerts, fenced code blocks, `==highlights==`, `{badges}` — and get styled components out.\n\n```html\n<script src=\"marginalia-md.js\" defer></script>\n<script>\n  document.querySelector('#content').innerHTML = Marginalia.md(markdownString);\n</script>\n```\n\nSee [`llm.md`](llm.md) for the full pattern reference, designed to drop into an LLM system prompt.\n\n## Components\n\n| Component | Element | Key feature |\n|-----------|---------|-------------|\n| Callout | `<div class=\"mg-callout\" data-type=\"note\">` | 4 semantic variants, left-border indicator |\n| Pull quote | `<aside class=\"mg-pull\">` | 3D perspective tilt, text aligns to border, `shape-outside` wrapping |\n| Code block | `<pre class=\"mg-code\" data-lang=\"js\">` | Language label, copy button (JS) |\n| Badge | `<span class=\"mg-badge\">` | Small caps, inline label |\n| Collapse | `<details class=\"mg-collapse\">` | Native `<details>`, smooth animation (JS) |\n| Highlight | `<mark class=\"mg-mark\">` | Theme-aware inline highlight |\n| Drop Cap | `<p class=\"mg-dropcap\">` | `::first-letter` large initial, ornate variant |\n| Lead-in | `<span class=\"mg-lede\">` | Rubricated opening words, small-caps variant |\n| Footnotes | `<span class=\"mg-fn\">` | Auto-numbered popover, tap-to-toggle |\n| Gallery | `<figure class=\"mg-gallery\">` | Click-to-expand lightbox, side-by-side compare |\n| Inline Skew | `<div class=\"mg-callout mg-skew\">` | Perspective-tilted block callout |\n| Sidebar | `<aside class=\"mg-sidebar\">` | Float-right body-copy tangential note |\n| Margin Note | `<div class=\"mg-margin\">` | Escapes into gutter on wide screens, inline on mobile |\n| Content Mode | `data-content=\"repeat\\|insert\"` | Signals duplicated body text vs new standalone content |\n| Spread | `<div class=\"mg-spread\">` | Two-column magazine layout, callouts bridge columns |\n\n## Usage Examples\n\n```html\n<!-- Drop cap -->\n<p class=\"mg-dropcap\">Your opening paragraph.</p>\n<p class=\"mg-dropcap\" data-type=\"ornate\">Ornate variant with border accent.</p>\n```\n\n## Theming\n\nDark by default. Override via CSS custom properties (`--mg-*`). Light theme via `data-mg-theme=\"light\"` or `prefers-color-scheme`.\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-7d2b0aee846ba20a2ec76a6934b0cb44"}