malkuthro
27705be037
* feat(sidebar): add onboarding guide * docs(guide): clarify tag search casing * docs(guide): clarify workflow save copy * docs(guide): refine sidebar visuals * docs(guide): refresh save snapshot visual * docs(guide): refresh load snapshot visual * docs(guide): refresh module save visual * docs(guide): use real sidebar screenshot * docs(guide): render sidebar overview screenshot directly * docs(guide): soften sidebar overview annotations * docs(guide): clarify nodes action bar callout * docs(guide): clarify workflow action bar callout * docs(guide): simplify sidebar overview markers * docs(guide): align sidebar overview intro * docs(guide): use real snapshot recipe screenshots * docs(guide): simplify project workflow diagram * docs(guide): make function cards scannable * docs(guide): sketch module recipe icon focus * docs(guide): use real icon screenshot for module recipe * docs(guide): add cropped workflow action screenshot * docs(guide): use full toolbar screenshot for module recipe * docs(guide): use real search screenshot * docs(guide): use real node search screenshot * docs(guide): standardize screenshot recipe cards * docs(guide): tighten recipe callout styling * docs: require visual QA for UI work * docs(guide): address pass-2 review nits
215 lines
9.7 KiB
HTML
215 lines
9.7 KiB
HTML
<!--
|
|
SPDX-FileCopyrightText: 2025-2026 Kforge Labs <https://github.com/malkuthro/ComfyUI-Koolook>
|
|
SPDX-License-Identifier: GPL-3.0-only
|
|
-->
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Kforge Labs Sidebar Guide</title>
|
|
<link rel="stylesheet" href="./guide.css">
|
|
</head>
|
|
<body>
|
|
<header class="hero">
|
|
<p class="eyebrow">Kforge Labs</p>
|
|
<h1>Use the sidebar as a project kit.</h1>
|
|
<p class="lead">Save the nodes, modules, workflows, tags, and snapshot state you need for a project, then load that setup again when the work comes back.</p>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="section">
|
|
<div class="section-copy">
|
|
<p class="eyebrow">Start here</p>
|
|
<h2>The sidebar has six main areas.</h2>
|
|
<p>Snapshot, Tools, Search, Nodes, Workflows, and saved lists work together to keep each project kit easy to save, find, and reload.</p>
|
|
</div>
|
|
<figure class="visual">
|
|
<div class="overview-map">
|
|
<div class="overview-shot">
|
|
<img src="./img/screenshots/sidebar-overview.png" alt="Kforge Labs sidebar overview screenshot">
|
|
<span class="overview-box overview-snapshot" aria-hidden="true"></span>
|
|
<span class="overview-box overview-tools" aria-hidden="true"></span>
|
|
<span class="overview-box overview-search" aria-hidden="true"></span>
|
|
<span class="overview-box overview-nodes" aria-hidden="true"></span>
|
|
<span class="overview-box overview-workflows" aria-hidden="true"></span>
|
|
<span class="overview-box overview-saved" aria-hidden="true"></span>
|
|
</div>
|
|
<div class="overview-callouts" aria-label="Sidebar sections">
|
|
<article class="overview-callout snapshot">
|
|
<h3>Snapshot row</h3>
|
|
<p>Load, Quick Save, Save, Settings.</p>
|
|
</article>
|
|
<article class="overview-callout tools">
|
|
<h3>Tools row</h3>
|
|
<p>Maintenance plus the Help guide.</p>
|
|
</article>
|
|
<article class="overview-callout search">
|
|
<h3>Search</h3>
|
|
<p>Find nodes, workflows, folders, and tags.</p>
|
|
</article>
|
|
<article class="overview-callout nodes">
|
|
<h3>Nodes action bar</h3>
|
|
<p>Switch tree or list view, then add a favorite node.</p>
|
|
</article>
|
|
<article class="overview-callout workflows">
|
|
<h3>Workflows action bar</h3>
|
|
<p>Save the canvas or selected nodes, then browse saved workflows.</p>
|
|
</article>
|
|
<article class="overview-callout saved">
|
|
<h3>Saved lists</h3>
|
|
<p>Nodes, Workflows, and Tags stay visible below.</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
<figcaption>First read the sidebar from top to bottom: Snapshot, Tools, Search, Nodes, Workflows, Tags.</figcaption>
|
|
</figure>
|
|
</section>
|
|
|
|
<section class="band">
|
|
<div>
|
|
<p class="eyebrow">Most important idea</p>
|
|
<h2>Snapshot = your project kit</h2>
|
|
</div>
|
|
<p>A Snapshot saves Kforge Labs state: favorite nodes, saved workflows, modules, tags, archive, and the current sidebar organization. Use one named snapshot per project, shot, client, or experiment.</p>
|
|
<figure class="visual full">
|
|
<img src="./img/snapshot-flow.svg" alt="Snapshot flow from sidebar state to saved file to project library and later reload">
|
|
</figure>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="section-copy">
|
|
<p class="eyebrow">Project rhythm</p>
|
|
<h2>A simple workflow</h2>
|
|
<ol class="steps">
|
|
<li>Load or create a snapshot, for example <strong>Client_Shot010</strong>.</li>
|
|
<li>Add favorite nodes while building the shot.</li>
|
|
<li>Save reusable node clusters as modules.</li>
|
|
<li>Quick Save during the session.</li>
|
|
<li>Save named snapshots for each project, shot, or task.</li>
|
|
<li>Load the right snapshot when you return.</li>
|
|
</ol>
|
|
</div>
|
|
<figure class="visual">
|
|
<img src="./img/project-workflow.svg" alt="Six step project workflow for snapshots and modules">
|
|
<figcaption>The goal is not to remember every button. The goal is to keep each project setup reusable.</figcaption>
|
|
</figure>
|
|
</section>
|
|
|
|
<section class="cards" aria-label="Main sidebar functions">
|
|
<article>
|
|
<h3>Snapshots</h3>
|
|
<p>Save and reload the whole project kit.</p>
|
|
<div class="function-list" aria-label="Snapshot functions">
|
|
<span>Load</span>
|
|
<span>Quick Save</span>
|
|
<span>Save</span>
|
|
<span>Settings</span>
|
|
</div>
|
|
</article>
|
|
<article>
|
|
<h3>Nodes</h3>
|
|
<p>Keep favorite nodes organized and easy to update.</p>
|
|
<div class="function-list" aria-label="Node functions">
|
|
<span>Search</span>
|
|
<span>Add</span>
|
|
<span>Remove</span>
|
|
<span>Group</span>
|
|
</div>
|
|
</article>
|
|
<article>
|
|
<h3>Search</h3>
|
|
<p>Find saved work from one field. Tags keep exact capitalization.</p>
|
|
<div class="function-list" aria-label="Search functions">
|
|
<span>Nodes</span>
|
|
<span>Workflows</span>
|
|
<span>Folders</span>
|
|
<span>Tags</span>
|
|
</div>
|
|
</article>
|
|
<article>
|
|
<h3>Workflows</h3>
|
|
<p>Save full scripts or reusable node selections.</p>
|
|
<div class="function-list" aria-label="Workflow functions">
|
|
<span>Save script</span>
|
|
<span>Save selection</span>
|
|
<span>Load</span>
|
|
<span>Insert module</span>
|
|
</div>
|
|
</article>
|
|
<article>
|
|
<h3>Safety / setup</h3>
|
|
<p>Quiet helpers protect projects and make saved kits portable.</p>
|
|
<div class="function-list" aria-label="Safety and setup functions">
|
|
<span>Autosaves</span>
|
|
<span>Missing packs</span>
|
|
<span>Starter preset</span>
|
|
<span>Library folder</span>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="recipes">
|
|
<div class="section-copy wide">
|
|
<p class="eyebrow">Visual recipes</p>
|
|
<h2>Common things you will do</h2>
|
|
</div>
|
|
<figure class="visual recipe-real">
|
|
<div class="recipe-shot">
|
|
<img src="./img/screenshots/save-snapshot.png" alt="Save snapshot dialog showing library folder and save options">
|
|
<span class="focus-dot focus-save" aria-hidden="true"></span>
|
|
</div>
|
|
<div class="recipe-callout blue" aria-label="Save snapshot notes">
|
|
<p><strong>Save</strong> updates the current project kit. <strong>Save as new</strong> creates another named snapshot.</p>
|
|
</div>
|
|
<figcaption>Save the current sidebar state as a named project snapshot.</figcaption>
|
|
</figure>
|
|
<figure class="visual recipe-real">
|
|
<div class="recipe-shot">
|
|
<img src="./img/screenshots/load-snapshot.png" alt="Load snapshot dialog showing saved snapshots and recovery autosaves">
|
|
<span class="focus-dot focus-load" aria-hidden="true"></span>
|
|
</div>
|
|
<div class="recipe-callout blue" aria-label="Load snapshot notes">
|
|
<p><strong>Snapshot row</strong> restores that saved project kit. <strong>Recovery auto-saves</strong> are available below saved snapshots.</p>
|
|
</div>
|
|
<figcaption>Load a snapshot when you switch projects or return to a shot.</figcaption>
|
|
</figure>
|
|
<figure class="visual recipe-real module-recipe">
|
|
<div class="recipe-shot">
|
|
<img src="./img/screenshots/all-icons-new.png" alt="Sidebar toolbar screenshot with workflow save-selection highlighted">
|
|
<span class="focus-dot focus-module" aria-hidden="true"></span>
|
|
</div>
|
|
<div class="recipe-callout amber" aria-label="Save selected nodes as module notes">
|
|
<p><strong>Workflow save-selection</strong> is the bottom-right workflow action. Use it after selecting nodes on the canvas.</p>
|
|
</div>
|
|
<figcaption>Save selected nodes as a module, then insert that module into another canvas.</figcaption>
|
|
</figure>
|
|
<figure class="visual recipe-real">
|
|
<div class="recipe-shot">
|
|
<img src="./img/screenshots/search-C.png" alt="Search results showing matching favorite nodes">
|
|
<span class="focus-dot focus-node-search" aria-hidden="true"></span>
|
|
</div>
|
|
<div class="recipe-callout green" aria-label="Node search notes">
|
|
<p><strong>Node search</strong> narrows favorites so useful nodes are easier to scan and add.</p>
|
|
</div>
|
|
<figcaption>Search narrows the Nodes list so useful favorites are easier to scan and add.</figcaption>
|
|
</figure>
|
|
<figure class="visual recipe-real">
|
|
<div class="recipe-shot">
|
|
<img src="./img/screenshots/search-B.png" alt="Search results showing matching nodes and workflows">
|
|
<span class="focus-dot focus-workflow-search" aria-hidden="true"></span>
|
|
</div>
|
|
<div class="recipe-callout purple" aria-label="Workflow search notes">
|
|
<p><strong>One search field</strong> finds nodes and workflows, including saved workflows found through tags.</p>
|
|
</div>
|
|
<figcaption>Search finds both nodes and workflows from the same field, including saved workflows found through tags.</figcaption>
|
|
</figure>
|
|
<figure class="visual">
|
|
<img src="./img/autosave-recovery.svg" alt="Annotated mockup showing autosave recovery">
|
|
<figcaption>If something goes sideways, load an autosave from the Snapshot Load dialog.</figcaption>
|
|
</figure>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|