From 23a16c8e894c1b2554f41b438f5a376520892902 Mon Sep 17 00:00:00 2001 From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com> Date: Thu, 4 Jun 2026 08:52:34 -0400 Subject: [PATCH] docs: in-app "Read the docs" modal + per-mode help pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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/.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/ 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 --- src/help/book.md | 111 +++++++++++++++++ src/help/cover.md | 49 ++++++++ src/help/customart.md | 57 +++++++++ src/help/deck.md | 64 ++++++++++ src/help/designer.md | 43 +++++++ src/help/disc.md | 43 +++++++ src/help/index.md | 49 ++++++++ src/help/jewel.md | 39 ++++++ src/help/pixelart.md | 57 +++++++++ src/help/slide.md | 45 +++++++ src/help/template.md | 65 ++++++++++ src/index.html | 275 ++++++++++++++++++++++++++++++++++++++++++ 12 files changed, 897 insertions(+) create mode 100644 src/help/book.md create mode 100644 src/help/cover.md create mode 100644 src/help/customart.md create mode 100644 src/help/deck.md create mode 100644 src/help/designer.md create mode 100644 src/help/disc.md create mode 100644 src/help/index.md create mode 100644 src/help/jewel.md create mode 100644 src/help/pixelart.md create mode 100644 src/help/slide.md create mode 100644 src/help/template.md diff --git a/src/help/book.md b/src/help/book.md new file mode 100644 index 0000000..ae69f21 --- /dev/null +++ b/src/help/book.md @@ -0,0 +1,111 @@ +# Book + +Multi-page reflowable book with cover, designed pages, reflow +chapters, masters, PDF export, and full-screen Reader Mode. + +> Hands-on walkthrough: see [`BOOK_DESIGNER_TUTORIAL.md`](https://github.com/PR0M3TH3AN/Artstr-Studio/blob/main/docs/BOOK_DESIGNER_TUTORIAL.md). +> Spec: see [`BOOK_DESIGNER_FEATURE.md`](https://github.com/PR0M3TH3AN/Artstr-Studio/blob/main/docs/BOOK_DESIGNER_FEATURE.md). + +## Starting + +When you enter Book mode with no pages, four starter cards appear +(US Trade / A5 / A4 / Square). Clicking one seeds a default master +with a text-frame, a starter chapter, and a Title page. + +A 5th card appears when you have a slide deck loaded β€” **Convert +deck to book** turns each slide into a designed page (letterbox-fit +into the trim). + +## The two main views + +- **Pages overview** β€” every manifest entry as a tile (designed + pages + reflow chapters). Drag to reorder. Hover for per-tile + actions (proof PDF, duplicate, delete, master picker). +- **Cover** β€” wraparound spread editor. Front / spine / back panels + selected via the layer-target dropdown. + +Plus two **per-entry** views: + +- **Designed page editor** β€” same flat-canvas tools as Custom Art, + scoped to one `book-page:` target. Master layers render + underneath at 55% opacity. +- **Chapter editor** β€” markdown-on-left, paginated preview on right. + CodeMirror with markdown syntax + smart Enter for list + continuation. + +## Masters + +Reusable underlays. A master with a **text-frame** layer becomes a +valid reflow target β€” the chapter's prose flows into that frame. +Header / footer text on the master can use **tokens** that resolve +per page: + +- `{page-number}`, `{page-count}`, `{physical-page-count}` +- `{book-title}`, `{book-author}` +- `{chapter-title}`, `{chapter-number}` + +## Markdown features in chapters + +- GFM headings / lists / blockquotes / code / tables / task lists. +- Nested lists (up to depth 6). +- `[^N]` footnote refs + `[^N]: definition` for footnote bodies + (renders as Unicode superscript + chapter-end Footnotes section). +- `^[term]` invisible index markers. +- `[link text](#chapter-3)` cross-references β€” auto-appended with + ` (p. N)` at render time. +- Magic tokens on their own line: + - `{toc}` β€” auto-generated table of contents with page numbers. + - `{index}` β€” alphabetical index of every `^[term]` marker. + +## Publishing + +Sidecar-architecture: each surface publishes as its own Nostr event. + +| Surface | Event | d-tag | +|---------|-------|-------| +| Designed page | kind-30078 `casewrap-page` (role: 'interior') | `book-page:` | +| Master | kind-30078 `casewrap-page` (role: 'master') | `book-master:` | +| Cover | kind-30078 `casewrap-page` (role: 'cover-spread') | `book-cover:` | +| Chapter (public) | kind-30023 NIP-23 article | `chapter:` | +| Chapter (private) | kind-30078 encrypted envelope | `book-chapter:` | +| Manifest | kind-30078 `casewrap-book` | `book:` | + +The manifest references its sidecars via `{kind, pubkey, dTag}` +coords + emits matching `link` tags so external clients can +resolve them. + +Publish each surface first (via the per-editor Publish buttons), +then the manifest (top-bar Publish). + +## Private path + +Toggle the sidebar **πŸ”’ Private** chip. Every subsequent publish +(manifest + sidecars) goes through the encrypted envelope path +(AES-256-GCM, key wrapped to your own pubkey via NIP-44 / NIP-04). +Re-opens decrypt automatically. + +## Reader Mode + embed + +- **β–Ά Read** opens a full-screen page-flip viewer with TOC sidebar, + keyboard nav, click-to-flip, and prefetch. +- The published manifest's `naddr` works in the embed iframe via + `?book=` (cut-down Reader Mode without TOC). + +## PDF export + +The **Export PDF…** modal exposes: + +- Page range (All / from–to). +- Include cover spread. +- Include bleed margin. +- Crop marks (L-marks at trim corners). +- Single vs split output (interior + cover separate). +- Filename pattern. + +Reflowed prose using Times / Helvetica / Courier-family fonts emits +as real PDF text (vector, selectable, searchable). Other fonts fall +back to vector raster + warning. + +**πŸ“„ Proof PDF** in any editor toolbar exports just that single +page / chapter β€” useful for a printer paper-and-colour proof +before committing to the full book. diff --git a/src/help/cover.md b/src/help/cover.md new file mode 100644 index 0000000..d9b8157 --- /dev/null +++ b/src/help/cover.md @@ -0,0 +1,49 @@ +# Case cover wrap + +A printable wraparound for DVD, Blu-ray, softcover, or any +back + spine + front case format. + +## Geometry + +- **Trim** β€” outer cut line. +- **Bleed** β€” extends past the trim on each outer edge so the + printer's cut tolerance doesn't reveal white. +- **Spine** β€” middle strip whose width depends on the case style + (DVD = 14 mm, Blu-ray = 11 mm, etc). +- **Safe area** β€” interior margin you should keep text + key art + inside. + +Pick a preset in the sidebar (DVD / Blu-ray / U-Card / Custom) or +enter your own panel width + trim height + spine + bleed under the +**Custom** preset. + +## Artwork modes + +- **Combined wraparound** β€” one canvas spanning the full + back+spine+front. Best for continuous artwork. +- **Slots** β€” separate back / spine / front layers. Best for posters + + spine text + back-cover layout. + +## Slots panel + +When you're in slot mode, each panel exposes: + +- A drop-zone for an image or a published cover design from Nostr. +- Fit (`cover` / `contain` / `fill` / `none`), zoom, position offsets, + rotation. +- Show / hide for testing different layouts. + +## Spine text + +The **Spine label** input adds a vertical text caption along the +spine. Family + weight + colour controls in the right options pane. + +## Common gotchas + +- The **show guides** checkbox toggles trim + bleed lines on the + canvas; **show crops** adds the cut marks. Both stay off in the + exported file unless you also enable the matching **print** options. +- Switching presets resets panel widths to that preset's defaults β€” + if you've customised, save first. +- Publishing posts a `casewrap-cover` event with the same flat + payload anyone can fork. diff --git a/src/help/customart.md b/src/help/customart.md new file mode 100644 index 0000000..9dd306c --- /dev/null +++ b/src/help/customart.md @@ -0,0 +1,57 @@ +# Custom art + +A freeform flat canvas you can size to anything from a Twitter banner +(1500Γ—500) to a poster. The most general-purpose Artstr surface β€” if +your design doesn't fit one of the other modes, start here. + +## Sizing the canvas + +In the sidebar: + +- **Preset** β€” common social / print sizes. +- **W Γ— H (px)** β€” manual override. +- **Background** β€” solid colour or `#ffffff` for transparent-on-export. + +The canvas is rendered at 96 DPI; the PDF/PNG export upscales to your +chosen DPI on the way out. + +## Layer types + +Custom Art accepts every layer kind in the app: + +- **Text** β€” full HTML rich text with bold / italic / underline / + strikethrough / link, inline-marks-aware. +- **Image** β€” drag-drop or pick; fit (cover / contain / fill / none), + rotate, opacity, optional clip. +- **Shape** β€” rectangle / ellipse / polygon / star + Pen-tool path + (full SVG-path support with anchors + handles). +- **Color block** β€” solid fill. +- **QR code** β€” input a string, choose ECC + style. +- **Pixel art** β€” sub-grid pixel art layer, edited via the Pixel + editor. +- **Linked design** β€” embeds another author's published Artstr design + as a live-resolving layer (Linked Designs feature). Right-click the + layer to expand into the linked event's full layer list and edit + pieces inline. + +## Tools + +The vertical tool palette has: +- **Select (V)** β€” move / scale / rotate whole layers. +- **Direct Selection (A)** β€” edit anchors + handles on a path. +- **Pen (P)** β€” Illustrator-parity pen tool (auto-add/delete anchors, + spacebar reposition, alt-drag asymmetric handles, Cmd+J join, + Cmd+Alt+J average). +- **Eyedropper (I)** β€” uses `window.EyeDropper` to sample any colour + on screen. +- **Pathfinder** β€” Unite / Subtract / Intersect / Exclude on selected + vector shapes. +- **Align / Distribute** β€” left/center/right + top/middle/bottom + + even-distribute. +- **Free Transform** β€” handles around the selection bbox for scale + + rotate. + +## Publish + +Posts a `casewrap-customart` event. Public, private (encrypted), or +premium (zap-gated) β€” selected in the publish-confirm modal. diff --git a/src/help/deck.md b/src/help/deck.md new file mode 100644 index 0000000..e83940c --- /dev/null +++ b/src/help/deck.md @@ -0,0 +1,64 @@ +# Slide deck + +An ordered list of slides published as a single event. Every slide's +full layer data is embedded inline β€” Presenter Mode + previews never +depend on additional relay fetches. + +## Sorter view + +The deck-sorter grid shows every slide as a thumbnail: + +- **+ Add slide** β€” append a blank slide. +- **Import PowerPoint (.pptx)** β€” imports `.pptx` files via a + vendored parser. Shapes, text runs, images, charts, tables, theme + fills, and slide notes all convert. +- **β†’ Convert to book** β€” turn the deck into a Book Designer book + (each slide β†’ one designed page, letterbox-fit into the trim). +- Click a thumbnail to edit that slide; the canvas opens with the + slide's layers as canvas layers. +- Drag thumbnails to reorder. Right-click for duplicate / delete. + +## Theme + +Deck-wide theme overrides under **Deck theme** in the sidebar: + +- **Font family** β€” applied to every slide's text layers (unless + the slide explicitly opts out via "Ignore deck theme"). +- **Background colour** β€” applied to every slide's canvas + background. Same opt-out applies. + +A slide can pin its own font + background by toggling **Ignore deck +theme** in the slide-editor sidebar. + +## Presenter Mode + +Click **Present** to launch a full-screen reader: + +- Arrow keys flip slides. +- **S** toggles speaker-notes overlay. +- **F** toggles fullscreen. +- **Esc** exits. +- Footer counter shows `N / total`. + +## Embed + +A published deck's `naddr` works in the embed iframe: + +```html + +``` + +The embed renders a paginated player with prev/next + a slide +counter, plus fullscreen + reduced-motion handling. + +## Publish + +Posts a `casewrap-deck` event with every slide inlined. Forks land +with the full deck intact; remixers can swap slides + republish. + +## Tips + +- For just one slide, the [Slide](#/help/slide) mode is lighter β€” + standalone slides import into decks as forkable units later. +- The deck's `deck.theme` overrides apply at render time only β€” a + slide's own `fontFamily` / `background` stay in the event payload. diff --git a/src/help/designer.md b/src/help/designer.md new file mode 100644 index 0000000..f8e8805 --- /dev/null +++ b/src/help/designer.md @@ -0,0 +1,43 @@ +# Designer tab + +The **Designer** tab opens a dedicated single-disc canvas β€” one +13.5 cm circular disc face, optimised for designing the kind of +reusable disc artwork you'd drop into multiple disc-label sheets. + +## When to use the Designer tab + +- You want one disc artwork to publish + reuse across many disc-label + sheets (Top / Bottom of a single sheet, or shared across multiple + releases). +- The geometry is a single circle, not a sheet. Bleed + safe-area + rings render dedicated to the circular trim instead of the + rectangular cover/jewel layout. + +## Compared to Template > Disc-label sheet + +- **Template / Disc** = a sheet with *two* disc slots side-by-side, + printed on full-page label stock. +- **Designer** = one disc design, publishable as `disc-design`. Import + it later into a sheet via the Disc-label slot picker. + +## Layers + +Layers target `designer-disc`. The single disc surface scales them in +its native pixel space (the same `discTemplate.discD` constant used +by sheet rendering), so a disc design opened standalone vs dropped +into a sheet slot renders identically. + +## Publish + +- Title + Category in **Project Metadata** are required. +- The publish event type is `casewrap-disc-design`. Other authors can + fork it or drop it into their own disc-label sheets via the sheet's + slot picker β†’ *Browse community*. + +## Tips + +- The **Spine label** input in the sidebar applies to Disc-label + sheets, not Designer mode β€” leave it alone here. +- Use **Print / Save as PDF** to get a circular vector cut sheet for + test prints. Most consumer printers won't print full bleed on a + disc; check your printer's safe area before mass printing. diff --git a/src/help/disc.md b/src/help/disc.md new file mode 100644 index 0000000..83537d5 --- /dev/null +++ b/src/help/disc.md @@ -0,0 +1,43 @@ +# Disc-label sheet + +Two-up disc-label sheet, sized for full-page label stock with two disc +circles arranged vertically (Disc 1 / Disc 2). + +## Geometry + +- **Sheet** β€” full-page (Letter / A4) with two disc cut-outs. +- **Disc diameter** β€” standard CD/DVD ~118 mm with a centre hole. +- **Safe area** β€” interior ring that printers and label stock + tolerances tend to respect. + +## Slots: Disc 1 + Disc 2 + +Each slot accepts: + +- A local image (drop or pick). +- A previously-published **disc design** from Nostr (the standalone + `disc-design` from the Designer tab). Click **Browse community β†’** + inside the slot. +- Disc-level meta: title, IMDb id, language. Used for both publish + tagging and the layout's text decoration. + +You can also leave a slot empty β€” only the populated disc(s) emit +output. + +## Spine labels + +The **Spine labels** inputs apply to a CD/DVD spine running between +the two discs (some label stocks include a spine strip). Top label ++ bottom label render in the small strip between the two discs. + +## Publishing + +Posts a `casewrap-disc` event with both disc slot images + +spine-label text. Forks land with the full sheet preserved. + +## Tips + +- For ONE disc only, use the Designer tab instead β€” that's the + standalone-publishable single-disc surface. +- The Crop marks toggle in the Export fieldset adds printer cut + marks at the trim corners of each disc. diff --git a/src/help/index.md b/src/help/index.md new file mode 100644 index 0000000..fd71325 --- /dev/null +++ b/src/help/index.md @@ -0,0 +1,49 @@ +# Artstr Studio docs + +Welcome. Artstr Studio is a single-page design tool that publishes +everything to Nostr instead of a private server. Pick a topic below. + +## The two app modes + +- **[Template](#/help/template)** β€” print + screen artwork (cover wraps, disc + labels, jewel inserts, custom-art canvases, slides, decks, pixel art, + books). Every artboard publishes as one or more Nostr events that anyone + can fork or remix. +- **[Designer](#/help/designer)** β€” a reusable single-disc design surface. + Disc designs publish independently, then drop into any disc slot of a + disc-label sheet. + +## Template-mode layouts + +- **[Case cover wrap](#/help/cover)** β€” front + spine + back wraparound + for DVD / Blu-ray / softcover printable cases. +- **[Disc-label sheet](#/help/disc)** β€” two-up CD/DVD label sheet. +- **[Jewel-case insert](#/help/jewel)** β€” front + tray jewel inserts. +- **[Custom art](#/help/customart)** β€” any-aspect flat canvas. +- **[Slide](#/help/slide)** β€” 16:9 standalone slide with speaker notes. +- **[Slide deck](#/help/deck)** β€” ordered collection of slides. +- **[Pixel art](#/help/pixelart)** β€” palette-indexed grid editor with + multi-frame animation. +- **[Book](#/help/book)** β€” multi-page reflowable book with cover, + chapters, masters, PDF export, and Reader Mode. + +## Working in Nostr + +- Sign in with a browser extension (Alby, nos2x, etc) using the top- + right widget. Without one you can still author and export locally; + publishing + browsing the community requires a key. +- Every Artstr event is replaceable (NIP-33). Re-publishing under the + same d-tag updates the design in place. +- Private publishing uses NIP-44 / NIP-04 to encrypt the payload to + your own key β€” only you can decrypt on a fresh device. + +## Tips + +- Most modes autosave to localStorage as you edit, so you can close + the tab and come back later. Publish to Nostr to share or to back + up across devices. +- Linked Designs let you reference another author's published design + as a layer in yours. Their event is fetched and rendered live; the + manifest p-tags the contributors for attribution. +- The community browser (top-right Nostr widget) shows feeds you can + filter and import from. diff --git a/src/help/jewel.md b/src/help/jewel.md new file mode 100644 index 0000000..cadb2f6 --- /dev/null +++ b/src/help/jewel.md @@ -0,0 +1,39 @@ +# 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. diff --git a/src/help/pixelart.md b/src/help/pixelart.md new file mode 100644 index 0000000..de79cf2 --- /dev/null +++ b/src/help/pixelart.md @@ -0,0 +1,57 @@ +# Pixel art + +Palette-indexed grid editor for sprite work + simple animation. + +## Canvas + +- Grid sizes from 8Γ—8 up to 128Γ—128. +- Palette-indexed (not RGB) β€” every pixel is an index into the + palette block, which means animations + colour-cycling are cheap. +- Pencil / eraser / fill / eyedropper / line / rect / ellipse tools. +- Mirror X / Y for symmetric sprites. +- Flip / rotate / resize transforms. + +## Animation + +- Multi-frame timeline at the bottom of the canvas. +- Per-frame duration (ms). +- Playback preview with onion-skin of the previous frame. +- Reorder frames by drag. + +## Palette + +- HSV picker inline. +- **Eyedropper (I)** uses `window.EyeDropper` to sample any colour + on screen. +- Up to 256 palette entries; unused entries don't cost anything in + the export. + +## Import + +- **Browse community** β€” pulls a published pixel-art design from + Nostr as a layer. +- **Import from file** β€” JSON design export. +- **From image…** β€” pick any image, then the live side-by-side + preview tunes target W/H, colour count, and fit mode (Cover / + Fit / Stretch) before applying. Uses median-cut quantization. + +## Export + +- **PNG** at 1Γ— / 2Γ— / 4Γ— / 8Γ— / 16Γ— / 32Γ— (transparent or solid bg, + optional grid lines). +- **Sprite sheet PNG** β€” every frame tiled in a Grid or Row layout. +- **Animated GIF** β€” inline GIF89a encoder, no vendored dependency + (palette-indexed input is what GIF expects natively). + +## Embed + +Published pixel-art animations play back live in the embed iframe. +Embed URL params: `?play=0` starts paused; `?fps=N` overrides +frame rate; reduced-motion users get static start unless `?play=1` +opts in. + +## Publish + +Posts a `casewrap-pixelart` event with the palette + per-frame +pixel data (run-length encoded). Forks land with the full +animation intact. diff --git a/src/help/slide.md b/src/help/slide.md new file mode 100644 index 0000000..fe4a971 --- /dev/null +++ b/src/help/slide.md @@ -0,0 +1,45 @@ +# Slide + +A 16:9 standalone slide. Same flat-canvas model as Custom Art but +locked to 16:9 + carries a speaker-notes field. + +## When to use + +- A single one-off slide you want to share or embed (16:9 social + card, lecture insert, recap card). +- The slide is the artwork β€” you don't need a multi-slide deck shell. + +## Geometry + +Default 1920 Γ— 1080 at 96 DPI. The aspect lock keeps you on 16:9; you +can resize via Presets in the sidebar. + +## Speaker notes + +The **Notes** field in the sidebar attaches a freeform string to the +slide event. Shown in: + +- Presenter Mode (Deck mode only). +- The published event's payload β€” anyone who forks gets your notes. + +## Importing into a deck + +A standalone Slide is also a Deck-importable unit: + +1. In **Deck** mode, click **Import slide** on a slide tile. +2. Pick from Nostr or paste a slide event id. +3. The slide drops in as a new entry; can be edited inline. + +## Publish + +Posts a `casewrap-slide` event. The full layer state ships in +`payload.slide.layers`; the canvas dimensions + background + notes +live in `payload.slide`. + +## Tips + +- For multi-slide presentations, jump to [Slide deck](#/help/deck) + instead. A deck owns its own ordered slide list; standalone + slides import as forkable units. +- Linked-design layers work in slides too β€” embed someone else's + Custom Art / Pixel Art as a layer. diff --git a/src/help/template.md b/src/help/template.md new file mode 100644 index 0000000..d667186 --- /dev/null +++ b/src/help/template.md @@ -0,0 +1,65 @@ +# Template tab + +The **Template** tab is where you author finished artwork β€” anything +you'd hand off to a printer, post as a slide, or publish to a community +feed. Each option below the tab switcher picks a different artboard. + +## Choosing a layout + +Click an item in the left sidebar's *Template type* picker. The +canvas reshapes to that mode's geometry and the right-side options +(layers, export) re-scope to it. + +| Mode | When to use | +|------|-------------| +| **[Cover wrap](#/help/cover)** | DVD / Blu-ray / softcover case wraparound. | +| **[Disc-label sheet](#/help/disc)** | Two-up CD/DVD label sheet for printing on full-page label stock. | +| **[Jewel-case insert](#/help/jewel)** | Front + tray inserts for a CD jewel case. | +| **[Custom art](#/help/customart)** | Any-aspect freeform canvas. Posters, social art, anything. | +| **[Slide](#/help/slide)** | 16:9 single slide with speaker-notes field. | +| **[Slide deck](#/help/deck)** | Ordered list of slides; publishes as one event with all slides inlined. | +| **[Pixel art](#/help/pixelart)** | Palette-indexed grid editor up to 128Γ—128 with multi-frame animation. | +| **[Book](#/help/book)** | Multi-page reflowable book with cover, masters, chapters, PDF export. | + +## Project metadata + +Above the type picker is the **Project Metadata** block: + +- **Title** β€” required for publish. +- **Category** β€” required for publish; chooses the discovery facet + (`movie`, `comic`, `book`, etc). +- **IMDb / UPC / TVDB / MusicBrainz IDs** β€” optional external IDs; + used to deduplicate against other community designs. +- **Language** β€” affects search / browser filters. +- **Custom tag** β€” free-form discovery tag. + +## Layers panel + +Once you add anything to the canvas, the **Layers** panel surfaces: + +- Per-layer visibility / lock toggles. +- Drag to reorder z. +- Multi-select with shift/cmd, then use the **Align / Distribute** + panel + the **Pathfinder** ops (Unite / Subtract / Intersect / + Exclude) for vector shapes. +- Layer-target dropdown picks which sub-surface a new layer belongs + to (e.g. cover front vs spine vs back; jewel front vs tray). + +## Export + publish + +- **Save / Save as** β€” local JSON download of the project. +- **Open** β€” load a previously-saved JSON file. +- **Print / Save as PDF** β€” opens the browser print dialog with + proper trim + bleed. +- **Export JPEG / PNG** β€” direct raster export. +- **Publish to Nostr** β€” opens a confirmation modal. Public, private + (encrypted to self), or premium (zap-gated, watermarked preview). + +## Common gotchas + +- The Layers panel respects the active layer-target. If you don't see + a layer you just added, switch the dropdown to its surface. +- "Custom" book size unlocks the trim inputs in Document settings. +- Mode-specific guides + bleed lines toggle on the canvas via the + show-guides / show-bleed / show-crops checkboxes in the right-side + Export fieldset. diff --git a/src/index.html b/src/index.html index ede0808..2d4a13d 100644 --- a/src/index.html +++ b/src/index.html @@ -545,6 +545,119 @@ text-decoration: underline; } + /* Docs modal β€” Read-the-Docs-style two-pane layout. */ + #docsModal .modalInner { + max-width: 1100px; width: 92vw; + max-height: 88vh; height: 720px; + padding: 0; overflow: hidden; + display: flex; flex-direction: column; + } + .docsHeader { + display: flex; align-items: center; gap: 10px; + padding: 10px 14px; border-bottom: 1px solid var(--line); + background: var(--bg); + } + .docsHeader h2 { margin: 0; font-size: 1rem; font-family: inherit; flex: 1; } + .docsHeader .docsBreadcrumb { + font-size: .76rem; color: var(--muted); + } + .docsBody { + flex: 1; display: flex; min-height: 0; + } + .docsSidebar { + width: 240px; flex-shrink: 0; + border-right: 1px solid var(--line); + overflow-y: auto; + background: var(--bg); + } + .docsSidebarGroup { padding: 6px 0; } + .docsSidebarGroup + .docsSidebarGroup { border-top: 1px solid var(--line); } + .docsSidebarLabel { + font-size: .68rem; text-transform: uppercase; + letter-spacing: .08em; color: var(--muted); + padding: 10px 14px 6px; font-weight: 700; + } + .docsSidebarItem { + display: block; padding: 6px 14px; + font-size: .85rem; color: var(--ink); + cursor: pointer; text-decoration: none; + border-left: 3px solid transparent; + } + .docsSidebarItem:hover { background: rgba(0,0,0,.04); } + .docsSidebarItem.current { + background: rgba(0,0,0,.06); + border-left-color: var(--accent); + font-weight: 600; + } + body.dark .docsSidebarItem:hover { background: rgba(255,255,255,.05); } + body.dark .docsSidebarItem.current { background: rgba(255,255,255,.08); } + .docsContent { + flex: 1; overflow-y: auto; + padding: 22px 30px; + font-family: Georgia, serif; + line-height: 1.6; font-size: 15px; + color: var(--ink); background: #fff; + } + body.dark .docsContent { background: #1a1a1a; } + .docsContent h1 { + font-family: inherit; font-size: 1.6rem; + margin: 0 0 .4em; padding-bottom: .3em; + border-bottom: 1px solid var(--line); + } + .docsContent h2 { + font-family: inherit; font-size: 1.2rem; + margin: 1.4em 0 .4em; + } + .docsContent h3 { + font-family: inherit; font-size: 1rem; + margin: 1.1em 0 .3em; + } + .docsContent p { margin: 0 0 .9em; } + .docsContent ul, .docsContent ol { margin: 0 0 .9em; padding-left: 1.4em; } + .docsContent li { margin-bottom: .2em; } + .docsContent a { color: var(--accent); } + .docsContent code { + font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; + font-size: .92em; padding: 1px 5px; + background: rgba(0,0,0,.06); border-radius: 3px; + } + body.dark .docsContent code { background: rgba(255,255,255,.08); } + .docsContent pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; + font-size: .85em; padding: 10px 14px; + background: rgba(0,0,0,.06); border-radius: 4px; + overflow-x: auto; + } + body.dark .docsContent pre { background: rgba(255,255,255,.06); } + .docsContent pre code { background: transparent; padding: 0; } + .docsContent blockquote { + margin: .9em 0; padding: 6px 14px; + border-left: 3px solid var(--accent); + background: rgba(0,0,0,.03); font-style: italic; + } + body.dark .docsContent blockquote { background: rgba(255,255,255,.04); } + .docsContent table { + border-collapse: collapse; margin: 1em 0; + font-size: .9em; + } + .docsContent th, .docsContent td { + border: 1px solid var(--line); padding: 6px 10px; + text-align: left; + } + .docsContent th { background: rgba(0,0,0,.04); font-weight: 700; } + body.dark .docsContent th { background: rgba(255,255,255,.05); } + .docsContent hr { + border: none; border-top: 1px solid var(--line); + margin: 1.4em 0; + } + .docsLoading { + color: var(--muted); font-style: italic; + } + @media (max-width: 720px) { + .docsSidebar { width: 160px; } + .docsContent { padding: 16px 18px; } + } + .appModeTabs { display: grid; grid-template-columns: 1fr 1fr; @@ -4362,6 +4475,7 @@
+ πŸ“– Docs GitHub Repository artstr.org
@@ -5524,6 +5638,20 @@ + +