Files
Artstr-Studio/src/help/jewel.md
T
thePR0M3TH3ANandClaude Opus 4.7 23a16c8e89 docs: in-app "Read the docs" modal + per-mode help pages
Adds a 📖 Docs link to the sidebar footer (next to GitHub + artstr.org)
that opens a Read-the-Docs-style two-pane modal: topic sidebar on the
left, rendered markdown on the right.

Content (src/help/*.md, 11 files):
- index.md            — overview + nav
- template.md         — Template tab explainer
- designer.md         — Designer tab explainer
- cover.md            — Case cover wrap
- disc.md             — Disc-label sheet
- jewel.md            — Jewel-case insert
- customart.md        — Custom art
- slide.md            — Slide
- deck.md             — Slide deck
- pixelart.md         — Pixel art
- book.md             — Book Designer (links out to the deeper
                        BOOK_DESIGNER_TUTORIAL.md + spec on GitHub)

Implementation:
- _DOCS_TOPICS registry maps slug → { title, group, file }. Sidebar
  groups headings under "Start here", "App tabs", "Template-mode
  layouts".
- loadDocsTopic(slug) fetches `help/<slug>.md` (force-cache), renders
  via the already-vendored marked, caches the rendered HTML for
  session-instant re-visits, and updates the URL hash via
  history.replaceState so deep links work.
- #/help/<slug> hash route auto-opens the modal at that topic on
  page load + on hashchange.
- Esc closes; backdrop click closes; internal `#/help/foo` links in
  page content load via the dispatcher (no page bounce); external
  http(s) links get target="_blank" + noopener.

Styling:
- Inherits the rest of the modal aesthetic (var(--line),
  var(--accent), system font for chrome, Georgia serif for body
  text). Dark-mode-aware backdrops on code / blockquote / table
  blocks.
- Two-pane layout collapses to a narrower sidebar on <720px viewports.

Files live in src/help/ (not docs/) because Vercel's outputDirectory
is "src" — the production site only serves files under src/. The
canonical deeper docs (BOOK_DESIGNER_TUTORIAL, FEATURE specs) stay
in docs/ and are linked-out from the in-app pages.

Co-Authored-By: Claude Opus 4.7 <[email protected]>
2026-06-04 08:52:34 -04:00

1.2 KiB
Raw Blame History

Jewel-case insert

Front-cover + tray inserts for a standard CD jewel case.

Geometry

  • Jewel front — 4.72 × 4.72 in trim, sits behind the clear plastic front cover.
  • Jewel tray — 5.91 × 4.72 in trim, sits under the disc tray (with vertical spine edges that wrap into the case sides).
  • Bleed + safe area mirror the standard CD/DVD design.

Slots

Both inserts pick up artwork the same way:

  • Drop in a local image, or
  • Browse community → to pick a published design from Nostr.

Per slot you can set fit / zoom / x / y / rotate independently.

Spine labels

Left + right spine inputs feed the strips that wrap around the tray-card sides — typically your album / movie title text.

Publishing

Posts a casewrap-jewel event. Both inserts' images + the spine labels live in the same event so a forker gets the complete jewel package.

Tips

  • Test print at 100% on plain paper first; trim by hand and check the fit before printing on label stock.
  • For double-sided printing, the tray usually needs a flipped layout on the back — print the same event twice with the front oriented correctly and you'll match most consumer printers.