ZaguanAI/zblade.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(screenshot): add screenshot capture section to user guide and docs page

Browse Source
This commit is contained in:
Stig-Ørjan Smelror
2026-02-07 15:07:49 +01:00
parent ce0065fe8c
commit 8d74ac5433
2 changed files with 149 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/docs.astro
+126 -7
View File
@@ -365,10 +365,43 @@ import BaseLayout from '../layouts/BaseLayout.astro';
</div>
</section>
<!-- Privacy Section -->
<section id="privacy" class="docs-section section-alt">
<!-- Screenshot Capture Section -->
<section id="screenshot" class="docs-section section-alt">
<div class="container">
<div class="section-label">[010] PRIVACY_&_DATA</div>
<div class="section-label">[010] SCREENSHOT_CAPTURE</div>
<h2 class="section-title">Screenshot Capture</h2>
<p class="section-desc">Attach screenshots to your chat messages to give the AI visual context. Access capture options from the <strong>Feature Menu</strong> (grid icon) in the Command Center.</p>
<div class="screenshot-grid">
<div class="screenshot-card">
<div class="screenshot-icon">🖼</div>
<h3>Capture Window</h3>
<p>Select a window from the picker and attach a full screenshot of it.</p>
</div>
<div class="screenshot-card">
<div class="screenshot-icon">✂</div>
<h3>Capture Region</h3>
<p>Select a window, then drag to crop a specific region from it.</p>
</div>
</div>
<div class="screenshot-notes">
<h3>Platform Notes (Linux / X11)</h3>
<p>On X11-based desktops (e.g., Openbox, i3, Fluxbox), window capture has the following limitations:</p>
<ul>
<li><strong>Current workspace only</strong> — The window picker only shows windows on your active workspace. Windows on other virtual desktops cannot be captured because X11 does not render off-screen windows.</li>
<li><strong>Window must be visible</strong> — The target window must be visible and not fully obscured by another window. If a window is covered, the capture may return a black image. <strong>Click the window to bring it to the front before capturing.</strong></li>
<li><strong>Compositors help</strong> — If you run a compositor such as <code class="inline-code">picom</code> or <code class="inline-code">compton</code>, these limitations are largely eliminated — compositors maintain off-screen buffers for all windows, enabling capture of obscured or unfocused windows.</li>
</ul>
<p class="screenshot-note-wayland">These limitations do not apply to <strong>Wayland</strong> desktops (GNOME, KDE Plasma 6) or <strong>macOS</strong>, which use compositing by default.</p>
</div>
</div>
</section>
<!-- Privacy Section -->
<section id="privacy" class="docs-section">
<div class="container">
<div class="section-label">[011] PRIVACY_&_DATA</div>
<h2 class="section-title">Your Data, Your Control</h2>
<div class="privacy-grid">
@@ -394,7 +427,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<!-- Local AI System Prompts Section -->
<section id="local-ai-prompts" class="docs-section">
<div class="container">
<div class="section-label">[011] LOCAL_AI_SYSTEM_PROMPTS</div>
<div class="section-label">[012] LOCAL_AI_SYSTEM_PROMPTS</div>
<h2 class="section-title">Custom System Prompts</h2>
<div class="instructions-content">
@@ -461,7 +494,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<!-- Tool Calls Reference Section -->
<section id="tool-calls" class="docs-section section-alt">
<div class="container">
<div class="section-label">[012] TOOL_CALLS_REFERENCE</div>
<div class="section-label">[013] TOOL_CALLS_REFERENCE</div>
<h2 class="section-title">Tool Calls Reference</h2>
<div class="instructions-content">
@@ -486,7 +519,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<!-- Known Bugs Section -->
<section id="known-bugs" class="docs-section section-alt">
<div class="container">
<div class="section-label">[012] KNOWN_BUGS</div>
<div class="section-label">[014] KNOWN_BUGS</div>
<h2 class="section-title">Known Issues</h2>
<p class="section-desc">As an alpha release, there are some known limitations and bugs we're actively working on:</p>
@@ -525,7 +558,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<!-- Support Section -->
<section id="support" class="docs-section">
<div class="container">
<div class="section-label">[013] SUPPORT_&_FEEDBACK</div>
<div class="section-label">[015] SUPPORT_&_FEEDBACK</div>
<div class="support-card">
<div class="support-header">
<h2>Alpha Release</h2>
@@ -1296,6 +1329,92 @@ import BaseLayout from '../layouts/BaseLayout.astro';
border-color: var(--color-accent);
}
/* Screenshot Capture */
.screenshot-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-lg);
margin-bottom: var(--space-xl);
}
.screenshot-card {
background: var(--color-bg);
border: 1px solid var(--color-border);
padding: var(--space-xl);
text-align: center;
transition: all 0.3s ease;
}
.screenshot-card:hover {
border-color: var(--color-accent);
transform: translateY(-4px);
}
.screenshot-icon {
font-size: 2.5rem;
margin-bottom: var(--space-md);
}
.screenshot-card h3 {
font-size: 1.125rem;
font-weight: 700;
margin-bottom: var(--space-sm);
text-transform: uppercase;
}
.screenshot-card p {
color: var(--color-text-secondary);
font-size: 0.95rem;
line-height: 1.6;
}
.screenshot-notes {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-left: 4px solid var(--color-accent-alt);
padding: var(--space-xl);
}
.screenshot-notes h3 {
font-size: 1.125rem;
font-weight: 700;
margin-bottom: var(--space-md);
text-transform: uppercase;
}
.screenshot-notes p {
color: var(--color-text-secondary);
line-height: 1.7;
margin-bottom: var(--space-md);
}
.screenshot-notes ul {
list-style: none;
margin: var(--space-md) 0;
}
.screenshot-notes li {
padding: var(--space-sm) 0;
border-bottom: 1px solid var(--color-border);
color: var(--color-text-secondary);
font-size: 0.95rem;
line-height: 1.6;
}
.screenshot-notes li:last-child {
border-bottom: none;
}
.screenshot-notes strong {
color: var(--color-text);
}
.screenshot-note-wayland {
font-style: italic;
color: var(--color-text-tertiary) !important;
margin-bottom: 0 !important;
}
/* Privacy */
.privacy-grid {
display: grid;