Files
malkuthro-ComfyUI-Koolook/web/guide
malkuthroandClaude Opus 4.7 972accfd22 docs(guide): onboarding guide overhaul — visuals, layout, and copy (#110)
* docs(guide): refine overview, mental-model diagram, cards, and recipes

- Sidebar overview: replace screenshot with post-#108 redesign, re-tune
  marker percentages and grid layout, bring markers flush to image edge,
  rewrite Nodes/Workflows action-bar callouts.
- Snapshot mental-model SVG: drop the U-shaped return arrow, restyle
  boxes with ForgeFlow accent strips, show actual on-disk file paths
  (Client_Shot010.json + Client_Shot010_autosave/periodic.json), rename
  Project library to Custom Folder, replace dramatic caption with a
  single-line equation-style summary of manual vs auto-save behaviour.
- Function cards: convert chip spans to bullet lists, replace "Safety /
  setup" with "Smart organization" (folders/drag-drop/move), tighten
  Search description, "Group" -> "Smart view" on Nodes chip.
- Recipes: hide focus-dot overlays, restore wrapper panel with darker
  #111111 fill, strip all styling from images, scale screenshots to 70%,
  right-align callouts to screenshot edge, split callout text into
  separate paragraphs, pin figcaption to bottom.
- Crop save-snapshot.png and load-snapshot.png to remove backdrop
  padding.

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

* docs(guide): refreshed screenshots, recipe layout overhaul, marker re-tuning

Sidebar overview
- Replace sidebar-overview.png with the taller 666x1202 redesign so the
  screenshot fills more of the column height alongside the callouts.
- Re-measure section dividers (y=76/152/262/342/418/1202) and re-tune
  the six marker percentages to match the new image with ~0.4% inset
  inside each row band.

Recipes
- Replace all-icons-new.png, search-B.png, search-C.png with the
  redesigned screenshots showing post-#108 letter-glyph buttons.
- Recipe layout: outer wrapper restored with #111111 fill (darker than
  the screenshots' edge color), screenshots scaled to 70% with no inner
  border or shadow, callout right-aligned to the screenshot's right
  edge (margin-right: 15%), figcaption pinned to bottom via flex
  margin-top: auto, screenshot+callout pair vertically centered above
  the figcaption.
- Add folder-actions.png as a new "Smart organization" recipe with
  callout text covering create/delete/drag-drop.
- Add right-click-functions.png replacing the workflow-search recipe;
  callout describes the right-click action menu on saved workflows.
- Drop the autosave-recovery.svg in favor of the all-icons recipe; the
  recovery topic is already covered upstream in the Snapshot file box.
- Workflow save-selection callout rewritten with two paragraphs
  (Save / Save selection) and explains the 'Module' tag.
- Load snapshot callout split into two paragraphs and shortened.
- Search-C callout broadened to "Search narrows displayed items so
  useful nodes and workflows are easier to find."
- Re-enable .focus-module overlay as a translucent yellow rectangle
  anchored bottom-right of the all-icons screenshot, highlighting the
  two workflow action buttons.

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

* docs(guide): remove orphan image assets

- web/guide/img/autosave-recovery.svg — replaced upstream by the
  folder-actions recipe; the SVG is no longer referenced from
  index.html.
- web/guide/img/screenshots/search-B.png — replaced upstream by
  right-click-functions.png in the workflow-actions recipe.

Tree now contains only the 9 image assets actually used by the guide
(2 SVGs + 7 PNG screenshots).

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

* docs(guide): add Two-layer save band, dedupe Snapshot band header

- New band "Two-layer save" sits between the snapshot mental-model band
  and the simple-workflow section. Explains in prose: named save vs
  background autosave, the <snapshot>_autosave/ recovery copy, the
  YES/NO load-prompt when autosave is newer, and pre-load recovery
  files for reversible Loads.
- Style the new band with .band-text + scoped <code> styling for
  inline path fragments (subtle tinted bg, monospace).
- Snapshot mental-model band: replace h2 ("Snapshot = your project
  kit") with the SVG's previous inner header ("Snapshot saves the
  whole project kit.") since the two were redundant. Drop the inner
  header from the SVG and shift boxes/arrows/caption up to absorb the
  freed space (SVG height 460 -> 320).
- Drop max-width: 760px on .band > p so the band's intro paragraph
  spans full panel width.

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

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-08 21:29:27 +02:00
..