242 lines
10 KiB
HTML
242 lines
10 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Quick Start - DWN Documentation</title>
|
||
|
|
<link rel="stylesheet" href="css/style.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<button class="mobile-menu-btn">Menu</button>
|
||
|
|
|
||
|
|
<div class="layout">
|
||
|
|
<aside class="sidebar">
|
||
|
|
<div class="sidebar-header">
|
||
|
|
<h1>DWN</h1>
|
||
|
|
<span class="version">v1.0.0</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="search-box">
|
||
|
|
<input type="text" class="search-input" placeholder="Search docs...">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<nav class="sidebar-nav">
|
||
|
|
<div class="nav-section">
|
||
|
|
<div class="nav-section-title">Getting Started</div>
|
||
|
|
<a href="index.html" class="nav-link">Introduction</a>
|
||
|
|
<a href="installation.html" class="nav-link">Installation</a>
|
||
|
|
<a href="quickstart.html" class="nav-link">Quick Start</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="nav-section">
|
||
|
|
<div class="nav-section-title">User Guide</div>
|
||
|
|
<a href="features.html" class="nav-link">Features</a>
|
||
|
|
<a href="shortcuts.html" class="nav-link">Keyboard Shortcuts</a>
|
||
|
|
<a href="configuration.html" class="nav-link">Configuration</a>
|
||
|
|
<a href="layouts.html" class="nav-link">Layouts</a>
|
||
|
|
<a href="ai-features.html" class="nav-link">AI Integration</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="nav-section">
|
||
|
|
<div class="nav-section-title">API Reference</div>
|
||
|
|
<a href="api-overview.html" class="nav-link">API Overview</a>
|
||
|
|
<a href="api-reference.html" class="nav-link">API Reference</a>
|
||
|
|
<a href="api-examples.html" class="nav-link">API Examples</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="nav-section">
|
||
|
|
<div class="nav-section-title">Advanced</div>
|
||
|
|
<a href="architecture.html" class="nav-link">Architecture</a>
|
||
|
|
<a href="building.html" class="nav-link">Building from Source</a>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<main class="main-content">
|
||
|
|
<div class="content">
|
||
|
|
<div class="page-header">
|
||
|
|
<h1>Quick Start</h1>
|
||
|
|
<p class="lead">Get up and running with DWN in 5 minutes</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>Essential Shortcuts</h2>
|
||
|
|
<p>These are the most important shortcuts to know:</p>
|
||
|
|
|
||
|
|
<div class="table-container">
|
||
|
|
<table class="shortcut-table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Shortcut</th>
|
||
|
|
<th>Action</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td><code>Ctrl+Alt+T</code></td>
|
||
|
|
<td>Open terminal</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><code>Super</code> or <code>Alt+F2</code></td>
|
||
|
|
<td>Open application launcher (dmenu)</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><code>Alt+F4</code></td>
|
||
|
|
<td>Close focused window</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><code>Alt+Tab</code></td>
|
||
|
|
<td>Cycle through windows</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><code>F1</code> - <code>F9</code></td>
|
||
|
|
<td>Switch to workspace 1-9</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><code>Super+Space</code></td>
|
||
|
|
<td>Cycle layout mode</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><code>Super+Backspace</code></td>
|
||
|
|
<td>Quit DWN</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>Your First Session</h2>
|
||
|
|
|
||
|
|
<h3>1. Launch Applications</h3>
|
||
|
|
<p>Press <code>Super</code> (Windows key) to open the application launcher. Type the name of the application and press Enter.</p>
|
||
|
|
|
||
|
|
<h3>2. Navigate Workspaces</h3>
|
||
|
|
<p>DWN provides 9 virtual workspaces. Use <code>F1</code> through <code>F9</code> to switch between them. The panel at the top shows which workspaces have windows.</p>
|
||
|
|
|
||
|
|
<h3>3. Manage Windows</h3>
|
||
|
|
<p>By default, DWN uses a tiling layout where windows automatically arrange themselves. The first window takes the "master" area (left side), and subsequent windows stack on the right.</p>
|
||
|
|
|
||
|
|
<h3>4. Move Windows Between Workspaces</h3>
|
||
|
|
<p>Press <code>Shift+F1</code> through <code>Shift+F9</code> to move the focused window to a different workspace.</p>
|
||
|
|
|
||
|
|
<h2>Layout Modes</h2>
|
||
|
|
<p>Press <code>Super+Space</code> to cycle through layout modes:</p>
|
||
|
|
|
||
|
|
<div class="feature-grid">
|
||
|
|
<div class="feature-card">
|
||
|
|
<div class="feature-title">Tiling</div>
|
||
|
|
<div class="feature-desc">Master-stack layout. First window on the left, others stacked on the right. Use <code>Super+H/L</code> to resize the master area.</div>
|
||
|
|
</div>
|
||
|
|
<div class="feature-card">
|
||
|
|
<div class="feature-title">Floating</div>
|
||
|
|
<div class="feature-desc">Traditional floating windows. Drag title bars to move, drag edges to resize.</div>
|
||
|
|
</div>
|
||
|
|
<div class="feature-card">
|
||
|
|
<div class="feature-title">Monocle</div>
|
||
|
|
<div class="feature-desc">All windows fullscreen, stacked. Use Alt+Tab to switch between them.</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>Window Snapping</h2>
|
||
|
|
<p>Use <code>Super+Arrow</code> keys to snap windows:</p>
|
||
|
|
|
||
|
|
<div class="table-container">
|
||
|
|
<table class="shortcut-table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Shortcut</th>
|
||
|
|
<th>Action</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td><code>Super+Left</code></td>
|
||
|
|
<td>Snap to left half (press twice for full width)</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><code>Super+Right</code></td>
|
||
|
|
<td>Snap to right half</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><code>Super+Up</code></td>
|
||
|
|
<td>Snap to top half</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><code>Super+Down</code></td>
|
||
|
|
<td>Snap to bottom half</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>Snapping is composable: <code>Super+Left</code> then <code>Super+Up</code> snaps to the top-left quarter.</p>
|
||
|
|
|
||
|
|
<h2>Window States</h2>
|
||
|
|
|
||
|
|
<div class="table-container">
|
||
|
|
<table class="shortcut-table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Shortcut</th>
|
||
|
|
<th>Action</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td><code>Alt+F9</code></td>
|
||
|
|
<td>Minimize window</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><code>Alt+F10</code></td>
|
||
|
|
<td>Maximize window</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><code>Alt+F11</code></td>
|
||
|
|
<td>Fullscreen (no decorations)</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><code>Super+F9</code></td>
|
||
|
|
<td>Toggle floating mode</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>Configuration</h2>
|
||
|
|
<p>DWN reads configuration from <code>~/.config/dwn/config</code>. Create one from the example:</p>
|
||
|
|
|
||
|
|
<div class="code-block">
|
||
|
|
<pre><code>mkdir -p ~/.config/dwn
|
||
|
|
cp /etc/dwn/config.example ~/.config/dwn/config</code></pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>Edit the file to customize terminal, launcher, colors, and more. See the <a href="configuration.html">Configuration</a> page for details.</p>
|
||
|
|
|
||
|
|
<h2>Enable the API</h2>
|
||
|
|
<p>To enable the WebSocket API for automation, add this to your config:</p>
|
||
|
|
|
||
|
|
<div class="code-block">
|
||
|
|
<pre><code>[api]
|
||
|
|
enabled = true
|
||
|
|
port = 8777</code></pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>Then you can control DWN programmatically. See <a href="api-overview.html">API Overview</a>.</p>
|
||
|
|
|
||
|
|
<h2>Next Steps</h2>
|
||
|
|
<ul>
|
||
|
|
<li><a href="shortcuts.html">Full keyboard shortcuts reference</a></li>
|
||
|
|
<li><a href="configuration.html">Configuration options</a></li>
|
||
|
|
<li><a href="ai-features.html">AI integration setup</a></li>
|
||
|
|
<li><a href="api-overview.html">API documentation</a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
<p>DWN Window Manager - retoor <retoor@molodetz.nl></p>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="js/main.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|