chore: update c, css, d files
This commit is contained in:
@@ -0,0 +1,458 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="AI integration in DWN window manager - command palette, semantic search, and context analysis.">
|
||||
<title>AI Features - DWN Window Manager</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<a href="index.html" class="logo">
|
||||
<span class="logo-icon">D</span>
|
||||
<span>DWN</span>
|
||||
</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="features.html">Features</a></li>
|
||||
<li><a href="installation.html">Install</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="documentation.html" class="active">Docs</a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="documentation.html">Getting Started</a>
|
||||
<a href="shortcuts.html">Keyboard Shortcuts</a>
|
||||
<a href="configuration.html">Configuration</a>
|
||||
<a href="ai-features.html">AI Features</a>
|
||||
<a href="architecture.html">Architecture</a>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="https://github.com/dwn/dwn">GitHub</a></li>
|
||||
</ul>
|
||||
<div class="nav-toggle" onclick="toggleNav()">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero" style="padding: 8rem 0 4rem;">
|
||||
<div class="container hero-content">
|
||||
<h1>AI Integration</h1>
|
||||
<p class="subtitle">
|
||||
Control your desktop with natural language and get intelligent assistance.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="alert alert-info" style="margin-bottom: 2rem;">
|
||||
<strong class="alert-title">Optional Features</strong>
|
||||
<p style="margin: 0;">AI features are completely optional and require external API keys.
|
||||
DWN works perfectly without them.</p>
|
||||
</div>
|
||||
|
||||
<h2>Overview</h2>
|
||||
<p>
|
||||
DWN integrates with two AI services to provide intelligent desktop assistance:
|
||||
</p>
|
||||
<ul style="margin-bottom: 2rem;">
|
||||
<li><strong>OpenRouter API</strong> - Powers the AI command palette and context analysis</li>
|
||||
<li><strong>Exa API</strong> - Provides semantic web search capabilities</li>
|
||||
</ul>
|
||||
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🤖</div>
|
||||
<h3>AI Command Palette</h3>
|
||||
<p>Type natural language commands to control your desktop.
|
||||
Launch apps, query system info, and more.</p>
|
||||
<p style="margin-top: 1rem;"><kbd>Super</kbd> + <kbd>Shift</kbd> + <kbd>A</kbd></p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">👁</div>
|
||||
<h3>Context Analysis</h3>
|
||||
<p>AI analyzes your current workspace to understand your task
|
||||
and provide relevant suggestions.</p>
|
||||
<p style="margin-top: 1rem;"><kbd>Super</kbd> + <kbd>A</kbd></p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🔍</div>
|
||||
<h3>Semantic Search</h3>
|
||||
<p>Search the web using meaning, not just keywords.
|
||||
Find relevant content instantly.</p>
|
||||
<p style="margin-top: 1rem;"><kbd>Super</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Setup OpenRouter -->
|
||||
<h2 id="openrouter" style="margin-top: 4rem;">Setting Up OpenRouter</h2>
|
||||
<p style="color: var(--text-muted); margin-bottom: 1.5rem;">
|
||||
OpenRouter provides access to multiple AI models through a single API.
|
||||
You can use free models or paid ones depending on your needs.
|
||||
</p>
|
||||
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<div class="step-number">1</div>
|
||||
<div class="step-content">
|
||||
<h4>Get an API Key</h4>
|
||||
<p>Visit <a href="https://openrouter.ai/keys" target="_blank">https://openrouter.ai/keys</a>
|
||||
and create a free account to get your API key.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">2</div>
|
||||
<div class="step-content">
|
||||
<h4>Set the Environment Variable</h4>
|
||||
<p>Add to your shell profile (~/.bashrc, ~/.zshrc, etc.):</p>
|
||||
<div class="code-header">
|
||||
<span>~/.bashrc</span>
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
</div>
|
||||
<pre><code>export OPENROUTER_API_KEY="sk-or-v1-your-key-here"</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">3</div>
|
||||
<div class="step-content">
|
||||
<h4>Choose a Model (Optional)</h4>
|
||||
<p>Configure the AI model in your DWN config file:</p>
|
||||
<div class="code-header">
|
||||
<span>~/.config/dwn/config</span>
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
</div>
|
||||
<pre><code>[ai]
|
||||
model = google/gemini-2.0-flash-exp:free</code></pre>
|
||||
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: var(--text-muted);">
|
||||
Browse available models at <a href="https://openrouter.ai/models" target="_blank">openrouter.ai/models</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-top: 2rem;">
|
||||
<h3>Recommended Free Models</h3>
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Model ID</th>
|
||||
<th>Provider</th>
|
||||
<th>Best For</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>google/gemini-2.0-flash-exp:free</code></td>
|
||||
<td>Google</td>
|
||||
<td>Fast responses, good general use</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>meta-llama/llama-3.2-3b-instruct:free</code></td>
|
||||
<td>Meta</td>
|
||||
<td>Quick commands, lightweight</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>mistralai/mistral-7b-instruct:free</code></td>
|
||||
<td>Mistral</td>
|
||||
<td>Balanced performance</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI Command Palette -->
|
||||
<h2 id="command-palette" style="margin-top: 4rem;">AI Command Palette</h2>
|
||||
<p>
|
||||
Press <kbd>Super</kbd> + <kbd>Shift</kbd> + <kbd>A</kbd> to open the command palette.
|
||||
Type natural language commands and press Enter.
|
||||
</p>
|
||||
|
||||
<h3>Supported Commands</h3>
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Category</th>
|
||||
<th>Examples</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Launch Applications</strong></td>
|
||||
<td>
|
||||
"open firefox"<br>
|
||||
"run terminal"<br>
|
||||
"launch file manager"<br>
|
||||
"start chrome"
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>System Queries</strong></td>
|
||||
<td>
|
||||
"what time is it"<br>
|
||||
"how much memory is free"<br>
|
||||
"what's my IP address"<br>
|
||||
"show disk usage"
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>General Questions</strong></td>
|
||||
<td>
|
||||
"how do I resize the master area"<br>
|
||||
"what's the shortcut for fullscreen"<br>
|
||||
"explain tiling mode"
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-success" style="margin-top: 1.5rem;">
|
||||
<strong class="alert-title">Pro Tip</strong>
|
||||
<p style="margin: 0;">The AI understands context. You can say "open browser" instead of
|
||||
remembering the exact application name - it will figure out what you mean.</p>
|
||||
</div>
|
||||
|
||||
<!-- Context Analysis -->
|
||||
<h2 id="context" style="margin-top: 4rem;">Context Analysis</h2>
|
||||
<p>
|
||||
Press <kbd>Super</kbd> + <kbd>A</kbd> to see AI-powered analysis of your current workspace.
|
||||
</p>
|
||||
|
||||
<div class="card">
|
||||
<h3>What It Shows</h3>
|
||||
<ul style="padding-left: 1.25rem;">
|
||||
<li><strong>Task Type</strong> - Coding, browsing, communication, etc.</li>
|
||||
<li><strong>Focused Window</strong> - Currently active application</li>
|
||||
<li><strong>Suggestions</strong> - Relevant shortcuts or actions based on context</li>
|
||||
<li><strong>Workspace Summary</strong> - Overview of open applications</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Setup Exa -->
|
||||
<h2 id="exa" style="margin-top: 4rem;">Setting Up Exa Search</h2>
|
||||
<p style="color: var(--text-muted); margin-bottom: 1.5rem;">
|
||||
Exa provides semantic search - finding content based on meaning rather than exact keywords.
|
||||
</p>
|
||||
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<div class="step-number">1</div>
|
||||
<div class="step-content">
|
||||
<h4>Get an Exa API Key</h4>
|
||||
<p>Visit <a href="https://dashboard.exa.ai/api-keys" target="_blank">https://dashboard.exa.ai/api-keys</a>
|
||||
and create an account to get your API key.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">2</div>
|
||||
<div class="step-content">
|
||||
<h4>Set the Environment Variable</h4>
|
||||
<div class="code-header">
|
||||
<span>~/.bashrc</span>
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
</div>
|
||||
<pre><code>export EXA_API_KEY="your-exa-key-here"</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">3</div>
|
||||
<div class="step-content">
|
||||
<h4>Start Searching</h4>
|
||||
<p>Press <kbd>Super</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd> and type your query.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Semantic Search -->
|
||||
<h2 id="search" style="margin-top: 4rem;">Using Semantic Search</h2>
|
||||
<p>
|
||||
Unlike traditional search, Exa understands the meaning of your query.
|
||||
</p>
|
||||
|
||||
<div class="comparison" style="grid-template-columns: repeat(2, 1fr);">
|
||||
<div class="comparison-card">
|
||||
<h3>Traditional Search</h3>
|
||||
<p style="color: var(--text-muted);">Keyword matching</p>
|
||||
<ul>
|
||||
<li>Exact keyword matches</li>
|
||||
<li>Boolean operators needed</li>
|
||||
<li>Miss relevant results</li>
|
||||
</ul>
|
||||
<p style="margin-top: 1rem; font-style: italic; color: var(--text-muted);">
|
||||
"nginx reverse proxy setup tutorial"
|
||||
</p>
|
||||
</div>
|
||||
<div class="comparison-card featured">
|
||||
<h3>Semantic Search</h3>
|
||||
<p style="color: var(--text-muted);">Meaning-based</p>
|
||||
<ul>
|
||||
<li>Understands intent</li>
|
||||
<li>Natural language</li>
|
||||
<li>Finds related content</li>
|
||||
</ul>
|
||||
<p style="margin-top: 1rem; font-style: italic; color: var(--text-muted);">
|
||||
"how to configure nginx as a reverse proxy"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 style="margin-top: 2rem;">Search Tips</h3>
|
||||
<ul>
|
||||
<li>Use natural, conversational queries</li>
|
||||
<li>Be specific about what you're looking for</li>
|
||||
<li>Results appear in a dmenu/rofi list - select to open in browser</li>
|
||||
<li>Search includes articles, documentation, tutorials, and more</li>
|
||||
</ul>
|
||||
|
||||
<!-- Privacy -->
|
||||
<h2 id="privacy" style="margin-top: 4rem;">Privacy Considerations</h2>
|
||||
<div class="alert alert-warning">
|
||||
<strong class="alert-title">Data Sent to External Services</strong>
|
||||
<p style="margin: 0;">When using AI features, the following data is sent to external APIs:</p>
|
||||
</div>
|
||||
|
||||
<div class="table-wrapper" style="margin-top: 1rem;">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Feature</th>
|
||||
<th>Data Sent</th>
|
||||
<th>Service</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Command Palette</td>
|
||||
<td>Your typed command</td>
|
||||
<td>OpenRouter (then to model provider)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Context Analysis</td>
|
||||
<td>Window titles, app names</td>
|
||||
<td>OpenRouter (then to model provider)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Semantic Search</td>
|
||||
<td>Your search query</td>
|
||||
<td>Exa</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p style="margin-top: 1rem; color: var(--text-muted);">
|
||||
If you're concerned about privacy, you can:
|
||||
</p>
|
||||
<ul style="color: var(--text-muted);">
|
||||
<li>Not configure API keys (AI features simply won't work)</li>
|
||||
<li>Use OpenRouter with privacy-focused models</li>
|
||||
<li>Only use AI features when needed</li>
|
||||
</ul>
|
||||
|
||||
<!-- Troubleshooting -->
|
||||
<h2 id="troubleshooting" style="margin-top: 4rem;">Troubleshooting</h2>
|
||||
|
||||
<div class="faq-item">
|
||||
<button class="faq-question" onclick="toggleFaq(this)">
|
||||
AI commands don't work - "API key not configured"
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<div class="faq-answer-content">
|
||||
<p>Make sure your API key is properly set:</p>
|
||||
<ol style="padding-left: 1.25rem; margin-top: 0.5rem;">
|
||||
<li>Check the environment variable: <code>echo $OPENROUTER_API_KEY</code></li>
|
||||
<li>Ensure the variable is exported in your shell profile</li>
|
||||
<li>Log out and back in, or source your profile: <code>source ~/.bashrc</code></li>
|
||||
<li>Restart DWN</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<button class="faq-question" onclick="toggleFaq(this)">
|
||||
Slow responses from AI
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<div class="faq-answer-content">
|
||||
<p>Try using a faster model. Free models can sometimes be slow due to rate limiting.
|
||||
Gemini Flash is usually the fastest free option.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<button class="faq-question" onclick="toggleFaq(this)">
|
||||
Exa search returns no results
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<div class="faq-answer-content">
|
||||
<p>Check your Exa API key and ensure you have remaining credits.
|
||||
Visit the <a href="https://dashboard.exa.ai">Exa dashboard</a> to check your usage.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-section">
|
||||
<h4>DWN Window Manager</h4>
|
||||
<p style="color: var(--text-muted);">
|
||||
A modern, production-ready X11 window manager with XFCE-like
|
||||
functionality and optional AI integration.
|
||||
</p>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Documentation</h4>
|
||||
<ul>
|
||||
<li><a href="documentation.html">Getting Started</a></li>
|
||||
<li><a href="shortcuts.html">Keyboard Shortcuts</a></li>
|
||||
<li><a href="configuration.html">Configuration</a></li>
|
||||
<li><a href="architecture.html">Architecture</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Resources</h4>
|
||||
<ul>
|
||||
<li><a href="features.html">Features</a></li>
|
||||
<li><a href="installation.html">Installation</a></li>
|
||||
<li><a href="ai-features.html">AI Integration</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn">GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Community</h4>
|
||||
<ul>
|
||||
<li><a href="https://github.com/dwn/dwn/issues">Issue Tracker</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn/discussions">Discussions</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn/blob/main/CONTRIBUTING.md">Contributing</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn/blob/main/LICENSE">License (MIT)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>DWN Window Manager - Open Source under the MIT License</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,565 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Technical architecture documentation for DWN window manager - codebase structure, modules, and internals.">
|
||||
<title>Architecture - DWN Window Manager</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<a href="index.html" class="logo">
|
||||
<span class="logo-icon">D</span>
|
||||
<span>DWN</span>
|
||||
</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="features.html">Features</a></li>
|
||||
<li><a href="installation.html">Install</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="documentation.html" class="active">Docs</a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="documentation.html">Getting Started</a>
|
||||
<a href="shortcuts.html">Keyboard Shortcuts</a>
|
||||
<a href="configuration.html">Configuration</a>
|
||||
<a href="ai-features.html">AI Features</a>
|
||||
<a href="architecture.html">Architecture</a>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="https://github.com/dwn/dwn">GitHub</a></li>
|
||||
</ul>
|
||||
<div class="nav-toggle" onclick="toggleNav()">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero" style="padding: 8rem 0 4rem;">
|
||||
<div class="container hero-content">
|
||||
<h1>Architecture</h1>
|
||||
<p class="subtitle">
|
||||
Technical documentation for developers and contributors.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2>Overview</h2>
|
||||
<p>
|
||||
DWN is written in ANSI C (C99) and follows a modular single-responsibility architecture.
|
||||
A global <code>DWNState</code> singleton manages all state, and the main event loop
|
||||
dispatches X11 events to specialized modules.
|
||||
</p>
|
||||
|
||||
<div class="card" style="margin: 2rem 0;">
|
||||
<h3>Project Statistics</h3>
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; text-align: center;">
|
||||
<div>
|
||||
<div style="font-size: 2rem; font-weight: 700; color: var(--primary);">~10K</div>
|
||||
<div style="color: var(--text-muted);">Lines of Code</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size: 2rem; font-weight: 700; color: var(--primary);">12</div>
|
||||
<div style="color: var(--text-muted);">Core Modules</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size: 2rem; font-weight: 700; color: var(--primary);">C99</div>
|
||||
<div style="color: var(--text-muted);">Standard</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size: 2rem; font-weight: 700; color: var(--primary);">MIT</div>
|
||||
<div style="color: var(--text-muted);">License</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Directory Structure -->
|
||||
<h2 id="structure" style="margin-top: 3rem;">Directory Structure</h2>
|
||||
<div class="code-header">
|
||||
<span>Project Layout</span>
|
||||
</div>
|
||||
<pre><code>dwn/
|
||||
├── src/ # Source files (.c)
|
||||
│ ├── main.c # Entry point, event loop
|
||||
│ ├── client.c # Window management
|
||||
│ ├── workspace.c # Virtual desktops
|
||||
│ ├── layout.c # Tiling algorithms
|
||||
│ ├── decorations.c # Title bars, borders
|
||||
│ ├── panel.c # Top/bottom panels
|
||||
│ ├── systray.c # System tray widgets
|
||||
│ ├── notifications.c # D-Bus notifications
|
||||
│ ├── atoms.c # X11 atoms (EWMH/ICCCM)
|
||||
│ ├── keys.c # Keyboard handling
|
||||
│ ├── config.c # INI parser
|
||||
│ ├── ai.c # AI integration
|
||||
│ └── util.c # Utilities
|
||||
├── include/ # Header files (.h)
|
||||
├── site/ # Documentation website
|
||||
├── Makefile # Build system
|
||||
├── CLAUDE.md # AI assistant context
|
||||
└── README.md # Project readme</code></pre>
|
||||
|
||||
<!-- Core Modules -->
|
||||
<h2 id="modules" style="margin-top: 3rem;">Core Modules</h2>
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Module</th>
|
||||
<th>File</th>
|
||||
<th>Responsibility</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Main</strong></td>
|
||||
<td><code>main.c</code></td>
|
||||
<td>X11 initialization, event loop, signal handling, module orchestration</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Client</strong></td>
|
||||
<td><code>client.c</code></td>
|
||||
<td>Window lifecycle, focus management, frame creation, client list</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Workspace</strong></td>
|
||||
<td><code>workspace.c</code></td>
|
||||
<td>9 virtual desktops, per-workspace state, window assignment</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Layout</strong></td>
|
||||
<td><code>layout.c</code></td>
|
||||
<td>Tiling (master+stack), floating, monocle layout algorithms</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Decorations</strong></td>
|
||||
<td><code>decorations.c</code></td>
|
||||
<td>Window title bars, borders, decoration rendering</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Panel</strong></td>
|
||||
<td><code>panel.c</code></td>
|
||||
<td>Top panel (taskbar, workspace indicators), bottom panel (clock)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Systray</strong></td>
|
||||
<td><code>systray.c</code></td>
|
||||
<td>System tray with WiFi/audio/battery indicators, dropdowns</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Notifications</strong></td>
|
||||
<td><code>notifications.c</code></td>
|
||||
<td>D-Bus notification daemon (org.freedesktop.Notifications)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Atoms</strong></td>
|
||||
<td><code>atoms.c</code></td>
|
||||
<td>X11 EWMH/ICCCM atom management and property handling</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Keys</strong></td>
|
||||
<td><code>keys.c</code></td>
|
||||
<td>Keyboard shortcut capture, keybinding registry, callbacks</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Config</strong></td>
|
||||
<td><code>config.c</code></td>
|
||||
<td>INI-style config loading and parsing</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>AI</strong></td>
|
||||
<td><code>ai.c</code></td>
|
||||
<td>Async OpenRouter API integration, Exa semantic search</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Util</strong></td>
|
||||
<td><code>util.c</code></td>
|
||||
<td>Logging, memory allocation, string utilities, file helpers</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Module Dependencies -->
|
||||
<h2 id="dependencies" style="margin-top: 3rem;">Module Dependencies</h2>
|
||||
<div class="card">
|
||||
<pre style="margin: 0; background: transparent; border: none; padding: 0;"><code>main.c (orchestrator)
|
||||
├── client.c
|
||||
│ ├── decorations.c
|
||||
│ ├── config.c
|
||||
│ └── atoms.c
|
||||
├── workspace.c
|
||||
│ ├── client.c
|
||||
│ ├── layout.c
|
||||
│ └── atoms.c
|
||||
├── panel.c
|
||||
│ ├── client.c
|
||||
│ └── config.c
|
||||
├── systray.c
|
||||
│ └── config.c
|
||||
├── notifications.c (independent)
|
||||
├── ai.c (independent)
|
||||
└── keys.c
|
||||
└── config.c</code></pre>
|
||||
</div>
|
||||
|
||||
<!-- Global State -->
|
||||
<h2 id="state" style="margin-top: 3rem;">Global State (DWNState)</h2>
|
||||
<p>
|
||||
All window manager state is centralized in a single <code>DWNState</code> structure.
|
||||
This simplifies state management and makes the codebase easier to understand.
|
||||
</p>
|
||||
|
||||
<div class="code-header">
|
||||
<span>include/dwn.h (simplified)</span>
|
||||
</div>
|
||||
<pre><code>typedef struct {
|
||||
Display *display; // X11 connection
|
||||
Window root; // Root window
|
||||
int screen; // Default screen
|
||||
|
||||
Client *clients[MAX_CLIENTS]; // All managed windows
|
||||
int client_count;
|
||||
|
||||
Workspace workspaces[MAX_WORKSPACES]; // Virtual desktops
|
||||
int current_workspace;
|
||||
|
||||
Panel top_panel;
|
||||
Panel bottom_panel;
|
||||
|
||||
Config config; // User configuration
|
||||
KeyBinding keys[MAX_KEYBINDINGS];
|
||||
|
||||
// EWMH atoms
|
||||
Atom atoms[ATOM_COUNT];
|
||||
} DWNState;
|
||||
|
||||
extern DWNState *dwn; // Global singleton</code></pre>
|
||||
|
||||
<!-- Event Loop -->
|
||||
<h2 id="events" style="margin-top: 3rem;">Event Loop</h2>
|
||||
<p>
|
||||
DWN uses a traditional X11 event loop with XNextEvent. Events are dispatched
|
||||
to appropriate handlers based on type.
|
||||
</p>
|
||||
|
||||
<div class="code-header">
|
||||
<span>main.c (simplified)</span>
|
||||
</div>
|
||||
<pre><code>int main(int argc, char *argv[]) {
|
||||
dwn_init(); // Initialize X11, atoms, config
|
||||
setup_keybindings(); // Register keyboard shortcuts
|
||||
setup_panels(); // Create panel windows
|
||||
|
||||
XEvent event;
|
||||
while (running) {
|
||||
XNextEvent(dwn->display, &event);
|
||||
|
||||
switch (event.type) {
|
||||
case MapRequest:
|
||||
handle_map_request(&event.xmaprequest);
|
||||
break;
|
||||
case UnmapNotify:
|
||||
handle_unmap_notify(&event.xunmap);
|
||||
break;
|
||||
case KeyPress:
|
||||
handle_key_press(&event.xkey);
|
||||
break;
|
||||
case ButtonPress:
|
||||
handle_button_press(&event.xbutton);
|
||||
break;
|
||||
case ConfigureRequest:
|
||||
handle_configure_request(&event.xconfigurerequest);
|
||||
break;
|
||||
// ... more event types
|
||||
}
|
||||
}
|
||||
|
||||
dwn_cleanup();
|
||||
return 0;
|
||||
}</code></pre>
|
||||
|
||||
<!-- Key Constants -->
|
||||
<h2 id="constants" style="margin-top: 3rem;">Key Constants</h2>
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Constant</th>
|
||||
<th>Value</th>
|
||||
<th>Purpose</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>MAX_CLIENTS</code></td>
|
||||
<td>256</td>
|
||||
<td>Maximum managed windows</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>MAX_WORKSPACES</code></td>
|
||||
<td>9</td>
|
||||
<td>Number of virtual desktops</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>MAX_MONITORS</code></td>
|
||||
<td>8</td>
|
||||
<td>Multi-monitor support limit</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>MAX_NOTIFICATIONS</code></td>
|
||||
<td>32</td>
|
||||
<td>Concurrent notifications</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>MAX_KEYBINDINGS</code></td>
|
||||
<td>64</td>
|
||||
<td>Registered keyboard shortcuts</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Coding Conventions -->
|
||||
<h2 id="conventions" style="margin-top: 3rem;">Coding Conventions</h2>
|
||||
<div class="features-grid" style="grid-template-columns: repeat(2, 1fr);">
|
||||
<div class="card">
|
||||
<h3>Naming</h3>
|
||||
<ul style="padding-left: 1.25rem;">
|
||||
<li><code>snake_case</code> for functions and variables</li>
|
||||
<li><code>CamelCase</code> for types and structs</li>
|
||||
<li>Module prefix for functions (e.g., <code>client_focus()</code>)</li>
|
||||
<li>Constants in <code>UPPER_SNAKE_CASE</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Style</h3>
|
||||
<ul style="padding-left: 1.25rem;">
|
||||
<li>4-space indentation</li>
|
||||
<li>K&R brace style</li>
|
||||
<li>Max 100 characters per line</li>
|
||||
<li>clang-format for consistency</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-header" style="margin-top: 1.5rem;">
|
||||
<span>Example Function</span>
|
||||
</div>
|
||||
<pre><code>void client_focus(Client *c) {
|
||||
if (!c) return;
|
||||
|
||||
// Unfocus previous
|
||||
if (dwn->focused && dwn->focused != c) {
|
||||
client_unfocus(dwn->focused);
|
||||
}
|
||||
|
||||
dwn->focused = c;
|
||||
XSetInputFocus(dwn->display, c->window, RevertToPointerRoot, CurrentTime);
|
||||
XRaiseWindow(dwn->display, c->frame);
|
||||
|
||||
decorations_update(c);
|
||||
atoms_set_active_window(c->window);
|
||||
}</code></pre>
|
||||
|
||||
<!-- EWMH/ICCCM -->
|
||||
<h2 id="protocols" style="margin-top: 3rem;">EWMH/ICCCM Support</h2>
|
||||
<p>
|
||||
DWN implements key Extended Window Manager Hints and ICCCM protocols
|
||||
for compatibility with modern applications.
|
||||
</p>
|
||||
|
||||
<div class="features-grid" style="grid-template-columns: repeat(2, 1fr);">
|
||||
<div class="card">
|
||||
<h3>EWMH Atoms</h3>
|
||||
<ul style="padding-left: 1.25rem; font-family: var(--font-mono); font-size: 0.875rem;">
|
||||
<li>_NET_SUPPORTED</li>
|
||||
<li>_NET_CLIENT_LIST</li>
|
||||
<li>_NET_CLIENT_LIST_STACKING</li>
|
||||
<li>_NET_ACTIVE_WINDOW</li>
|
||||
<li>_NET_CURRENT_DESKTOP</li>
|
||||
<li>_NET_NUMBER_OF_DESKTOPS</li>
|
||||
<li>_NET_WM_STATE</li>
|
||||
<li>_NET_WM_STATE_FULLSCREEN</li>
|
||||
<li>_NET_WM_STATE_MAXIMIZED_*</li>
|
||||
<li>_NET_WM_WINDOW_TYPE</li>
|
||||
<li>_NET_WM_NAME</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>ICCCM Support</h3>
|
||||
<ul style="padding-left: 1.25rem; font-family: var(--font-mono); font-size: 0.875rem;">
|
||||
<li>WM_STATE</li>
|
||||
<li>WM_PROTOCOLS</li>
|
||||
<li>WM_DELETE_WINDOW</li>
|
||||
<li>WM_TAKE_FOCUS</li>
|
||||
<li>WM_NORMAL_HINTS</li>
|
||||
<li>WM_SIZE_HINTS</li>
|
||||
<li>WM_CLASS</li>
|
||||
<li>WM_NAME</li>
|
||||
<li>WM_TRANSIENT_FOR</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Build System -->
|
||||
<h2 id="build" style="margin-top: 3rem;">Build System</h2>
|
||||
<p>
|
||||
DWN uses a simple Makefile-based build system with pkg-config for dependency detection.
|
||||
</p>
|
||||
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Target</th>
|
||||
<th>Command</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Build (release)</td>
|
||||
<td><code>make</code></td>
|
||||
<td>Optimized build with -O2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Build (debug)</td>
|
||||
<td><code>make debug</code></td>
|
||||
<td>Debug symbols, -DDEBUG flag</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Install</td>
|
||||
<td><code>sudo make install</code></td>
|
||||
<td>Install to PREFIX (/usr/local)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clean</td>
|
||||
<td><code>make clean</code></td>
|
||||
<td>Remove build artifacts</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Format</td>
|
||||
<td><code>make format</code></td>
|
||||
<td>Run clang-format on sources</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Check</td>
|
||||
<td><code>make check</code></td>
|
||||
<td>Run cppcheck static analysis</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Test</td>
|
||||
<td><code>make run</code></td>
|
||||
<td>Run in Xephyr nested server</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dependencies</td>
|
||||
<td><code>make deps</code></td>
|
||||
<td>Auto-install for your distro</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Contributing -->
|
||||
<h2 id="contributing" style="margin-top: 3rem;">Contributing</h2>
|
||||
<p>
|
||||
Contributions are welcome! Here's how to get started:
|
||||
</p>
|
||||
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<div class="step-number">1</div>
|
||||
<div class="step-content">
|
||||
<h4>Fork & Clone</h4>
|
||||
<p>Fork the repository and clone your fork locally.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-number">2</div>
|
||||
<div class="step-content">
|
||||
<h4>Create a Branch</h4>
|
||||
<p>Create a feature branch: <code>git checkout -b feature/my-feature</code></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-number">3</div>
|
||||
<div class="step-content">
|
||||
<h4>Make Changes</h4>
|
||||
<p>Follow coding conventions. Run <code>make format</code> and <code>make check</code>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-number">4</div>
|
||||
<div class="step-content">
|
||||
<h4>Test</h4>
|
||||
<p>Test your changes with <code>make run</code> in a nested X server.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-number">5</div>
|
||||
<div class="step-content">
|
||||
<h4>Submit PR</h4>
|
||||
<p>Push your branch and open a pull request with a clear description.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-section">
|
||||
<h4>DWN Window Manager</h4>
|
||||
<p style="color: var(--text-muted);">
|
||||
A modern, production-ready X11 window manager with XFCE-like
|
||||
functionality and optional AI integration.
|
||||
</p>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Documentation</h4>
|
||||
<ul>
|
||||
<li><a href="documentation.html">Getting Started</a></li>
|
||||
<li><a href="shortcuts.html">Keyboard Shortcuts</a></li>
|
||||
<li><a href="configuration.html">Configuration</a></li>
|
||||
<li><a href="architecture.html">Architecture</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Resources</h4>
|
||||
<ul>
|
||||
<li><a href="features.html">Features</a></li>
|
||||
<li><a href="installation.html">Installation</a></li>
|
||||
<li><a href="ai-features.html">AI Integration</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn">GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Community</h4>
|
||||
<ul>
|
||||
<li><a href="https://github.com/dwn/dwn/issues">Issue Tracker</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn/discussions">Discussions</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn/blob/main/CONTRIBUTING.md">Contributing</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn/blob/main/LICENSE">License (MIT)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>DWN Window Manager - Open Source under the MIT License</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,520 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Complete configuration guide for DWN window manager - customize colors, behavior, and more.">
|
||||
<title>Configuration - DWN Window Manager</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<a href="index.html" class="logo">
|
||||
<span class="logo-icon">D</span>
|
||||
<span>DWN</span>
|
||||
</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="features.html">Features</a></li>
|
||||
<li><a href="installation.html">Install</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="documentation.html" class="active">Docs</a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="documentation.html">Getting Started</a>
|
||||
<a href="shortcuts.html">Keyboard Shortcuts</a>
|
||||
<a href="configuration.html">Configuration</a>
|
||||
<a href="ai-features.html">AI Features</a>
|
||||
<a href="architecture.html">Architecture</a>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="https://github.com/dwn/dwn">GitHub</a></li>
|
||||
</ul>
|
||||
<div class="nav-toggle" onclick="toggleNav()">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero" style="padding: 8rem 0 4rem;">
|
||||
<div class="container hero-content">
|
||||
<h1>Configuration Guide</h1>
|
||||
<p class="subtitle">
|
||||
Customize every aspect of DWN to match your workflow and style.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2>Configuration File</h2>
|
||||
<p>
|
||||
DWN reads its configuration from <code>~/.config/dwn/config</code> using an INI-style format.
|
||||
Changes take effect on restart (or you can reload in a future version).
|
||||
</p>
|
||||
|
||||
<div class="alert alert-info">
|
||||
<strong class="alert-title">First Run</strong>
|
||||
<p style="margin: 0;">DWN creates a default configuration file on first run if one doesn't exist.
|
||||
You can also copy the example config from the source repository.</p>
|
||||
</div>
|
||||
|
||||
<!-- General Section -->
|
||||
<h2 id="general" style="margin-top: 3rem;">[general] - Core Settings</h2>
|
||||
<p style="color: var(--text-muted); margin-bottom: 1.5rem;">
|
||||
Basic behavior settings for applications and focus handling.
|
||||
</p>
|
||||
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Option</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>terminal</code></td>
|
||||
<td><code>xfce4-terminal</code></td>
|
||||
<td>Terminal emulator launched with Ctrl+Alt+T</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>launcher</code></td>
|
||||
<td><code>dmenu_run</code></td>
|
||||
<td>Application launcher for Alt+F2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>file_manager</code></td>
|
||||
<td><code>thunar</code></td>
|
||||
<td>File manager for Super+E</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>focus_mode</code></td>
|
||||
<td><code>click</code></td>
|
||||
<td><code>click</code> or <code>follow</code> (sloppy focus)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>decorations</code></td>
|
||||
<td><code>true</code></td>
|
||||
<td>Show window title bars and borders</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="code-header">
|
||||
<span>Example</span>
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
</div>
|
||||
<pre><code>[general]
|
||||
terminal = alacritty
|
||||
launcher = rofi -show run
|
||||
file_manager = nautilus
|
||||
focus_mode = click
|
||||
decorations = true</code></pre>
|
||||
|
||||
<!-- Appearance Section -->
|
||||
<h2 id="appearance" style="margin-top: 3rem;">[appearance] - Visual Settings</h2>
|
||||
<p style="color: var(--text-muted); margin-bottom: 1.5rem;">
|
||||
Control the visual appearance of windows, panels, and gaps.
|
||||
</p>
|
||||
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Option</th>
|
||||
<th>Default</th>
|
||||
<th>Range</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>border_width</code></td>
|
||||
<td><code>2</code></td>
|
||||
<td>0-50</td>
|
||||
<td>Window border width in pixels</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>title_height</code></td>
|
||||
<td><code>24</code></td>
|
||||
<td>0-100</td>
|
||||
<td>Title bar height in pixels</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>panel_height</code></td>
|
||||
<td><code>28</code></td>
|
||||
<td>0-100</td>
|
||||
<td>Top/bottom panel height</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>gap</code></td>
|
||||
<td><code>4</code></td>
|
||||
<td>0-100</td>
|
||||
<td>Gap between tiled windows</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>font</code></td>
|
||||
<td><code>fixed</code></td>
|
||||
<td>-</td>
|
||||
<td>X11 font name for text</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="code-header">
|
||||
<span>Example</span>
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
</div>
|
||||
<pre><code>[appearance]
|
||||
border_width = 2
|
||||
title_height = 28
|
||||
panel_height = 32
|
||||
gap = 8
|
||||
font = DejaVu Sans-10</code></pre>
|
||||
|
||||
<!-- Layout Section -->
|
||||
<h2 id="layout" style="margin-top: 3rem;">[layout] - Layout Behavior</h2>
|
||||
<p style="color: var(--text-muted); margin-bottom: 1.5rem;">
|
||||
Configure the default layout mode and tiling parameters.
|
||||
</p>
|
||||
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Option</th>
|
||||
<th>Default</th>
|
||||
<th>Range</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>default</code></td>
|
||||
<td><code>tiling</code></td>
|
||||
<td>-</td>
|
||||
<td><code>tiling</code>, <code>floating</code>, or <code>monocle</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>master_ratio</code></td>
|
||||
<td><code>0.55</code></td>
|
||||
<td>0.1-0.9</td>
|
||||
<td>Portion of screen for master area</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>master_count</code></td>
|
||||
<td><code>1</code></td>
|
||||
<td>1-10</td>
|
||||
<td>Number of windows in master area</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="code-header">
|
||||
<span>Example</span>
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
</div>
|
||||
<pre><code>[layout]
|
||||
default = tiling
|
||||
master_ratio = 0.60
|
||||
master_count = 1</code></pre>
|
||||
|
||||
<!-- Panels Section -->
|
||||
<h2 id="panels" style="margin-top: 3rem;">[panels] - Panel Visibility</h2>
|
||||
<p style="color: var(--text-muted); margin-bottom: 1.5rem;">
|
||||
Control which panels are displayed.
|
||||
</p>
|
||||
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Option</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>top</code></td>
|
||||
<td><code>true</code></td>
|
||||
<td>Show top panel (workspaces, taskbar, systray)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>bottom</code></td>
|
||||
<td><code>true</code></td>
|
||||
<td>Show bottom panel (clock)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="code-header">
|
||||
<span>Example - Minimal Setup</span>
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
</div>
|
||||
<pre><code>[panels]
|
||||
top = true
|
||||
bottom = false</code></pre>
|
||||
|
||||
<!-- Colors Section -->
|
||||
<h2 id="colors" style="margin-top: 3rem;">[colors] - Color Scheme</h2>
|
||||
<p style="color: var(--text-muted); margin-bottom: 1.5rem;">
|
||||
Customize all colors using hex format (#RRGGBB).
|
||||
</p>
|
||||
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Option</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>panel_bg</code></td>
|
||||
<td><code>#1a1a2e</code></td>
|
||||
<td>Panel background color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>panel_fg</code></td>
|
||||
<td><code>#e0e0e0</code></td>
|
||||
<td>Panel text color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>workspace_active</code></td>
|
||||
<td><code>#4a90d9</code></td>
|
||||
<td>Active workspace indicator</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>workspace_inactive</code></td>
|
||||
<td><code>#3a3a4e</code></td>
|
||||
<td>Inactive workspace indicator</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>workspace_urgent</code></td>
|
||||
<td><code>#d94a4a</code></td>
|
||||
<td>Urgent workspace indicator</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>title_focused_bg</code></td>
|
||||
<td><code>#2d3a4a</code></td>
|
||||
<td>Focused window title background</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>title_focused_fg</code></td>
|
||||
<td><code>#ffffff</code></td>
|
||||
<td>Focused window title text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>title_unfocused_bg</code></td>
|
||||
<td><code>#1a1a1a</code></td>
|
||||
<td>Unfocused window title background</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>title_unfocused_fg</code></td>
|
||||
<td><code>#808080</code></td>
|
||||
<td>Unfocused window title text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>border_focused</code></td>
|
||||
<td><code>#4a90d9</code></td>
|
||||
<td>Focused window border</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>border_unfocused</code></td>
|
||||
<td><code>#333333</code></td>
|
||||
<td>Unfocused window border</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>notification_bg</code></td>
|
||||
<td><code>#2a2a3e</code></td>
|
||||
<td>Notification background</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>notification_fg</code></td>
|
||||
<td><code>#ffffff</code></td>
|
||||
<td>Notification text</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="code-header">
|
||||
<span>Example - Nord Theme</span>
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
</div>
|
||||
<pre><code>[colors]
|
||||
panel_bg = #2e3440
|
||||
panel_fg = #eceff4
|
||||
workspace_active = #88c0d0
|
||||
workspace_inactive = #4c566a
|
||||
workspace_urgent = #bf616a
|
||||
title_focused_bg = #3b4252
|
||||
title_focused_fg = #eceff4
|
||||
title_unfocused_bg = #2e3440
|
||||
title_unfocused_fg = #4c566a
|
||||
border_focused = #88c0d0
|
||||
border_unfocused = #3b4252
|
||||
notification_bg = #3b4252
|
||||
notification_fg = #eceff4</code></pre>
|
||||
|
||||
<!-- AI Section -->
|
||||
<h2 id="ai" style="margin-top: 3rem;">[ai] - AI Integration</h2>
|
||||
<p style="color: var(--text-muted); margin-bottom: 1.5rem;">
|
||||
Configure AI features. See <a href="ai-features.html">AI Features</a> for full setup instructions.
|
||||
</p>
|
||||
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Option</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>model</code></td>
|
||||
<td>OpenRouter model ID (e.g., <code>google/gemini-2.0-flash-exp:free</code>)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>openrouter_api_key</code></td>
|
||||
<td>Your OpenRouter API key (or use environment variable)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>exa_api_key</code></td>
|
||||
<td>Your Exa API key (or use environment variable)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="code-header">
|
||||
<span>Example</span>
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
</div>
|
||||
<pre><code>[ai]
|
||||
model = google/gemini-2.0-flash-exp:free
|
||||
openrouter_api_key = sk-or-v1-your-key-here
|
||||
exa_api_key = your-exa-key-here</code></pre>
|
||||
|
||||
<div class="alert alert-warning" style="margin-top: 1rem;">
|
||||
<strong class="alert-title">Security Note</strong>
|
||||
<p style="margin: 0;">For better security, use environment variables instead of storing API keys in the config file:
|
||||
<code>export OPENROUTER_API_KEY=sk-or-v1-...</code></p>
|
||||
</div>
|
||||
|
||||
<!-- Complete Example -->
|
||||
<h2 style="margin-top: 3rem;">Complete Configuration Example</h2>
|
||||
<div class="code-header">
|
||||
<span>~/.config/dwn/config</span>
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
</div>
|
||||
<pre><code># DWN Window Manager Configuration
|
||||
# https://dwn.github.io
|
||||
|
||||
[general]
|
||||
terminal = alacritty
|
||||
launcher = rofi -show drun
|
||||
file_manager = thunar
|
||||
focus_mode = click
|
||||
decorations = true
|
||||
|
||||
[appearance]
|
||||
border_width = 2
|
||||
title_height = 24
|
||||
panel_height = 28
|
||||
gap = 6
|
||||
font = DejaVu Sans-10
|
||||
|
||||
[layout]
|
||||
default = tiling
|
||||
master_ratio = 0.55
|
||||
master_count = 1
|
||||
|
||||
[panels]
|
||||
top = true
|
||||
bottom = true
|
||||
|
||||
[colors]
|
||||
panel_bg = #1a1a2e
|
||||
panel_fg = #e0e0e0
|
||||
workspace_active = #4a90d9
|
||||
workspace_inactive = #3a3a4e
|
||||
workspace_urgent = #d94a4a
|
||||
title_focused_bg = #2d3a4a
|
||||
title_focused_fg = #ffffff
|
||||
title_unfocused_bg = #1a1a1a
|
||||
title_unfocused_fg = #808080
|
||||
border_focused = #4a90d9
|
||||
border_unfocused = #333333
|
||||
notification_bg = #2a2a3e
|
||||
notification_fg = #ffffff
|
||||
|
||||
[ai]
|
||||
model = google/gemini-2.0-flash-exp:free
|
||||
# API keys via environment variables recommended</code></pre>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-section">
|
||||
<h4>DWN Window Manager</h4>
|
||||
<p style="color: var(--text-muted);">
|
||||
A modern, production-ready X11 window manager with XFCE-like
|
||||
functionality and optional AI integration.
|
||||
</p>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Documentation</h4>
|
||||
<ul>
|
||||
<li><a href="documentation.html">Getting Started</a></li>
|
||||
<li><a href="shortcuts.html">Keyboard Shortcuts</a></li>
|
||||
<li><a href="configuration.html">Configuration</a></li>
|
||||
<li><a href="architecture.html">Architecture</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Resources</h4>
|
||||
<ul>
|
||||
<li><a href="features.html">Features</a></li>
|
||||
<li><a href="installation.html">Installation</a></li>
|
||||
<li><a href="ai-features.html">AI Integration</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn">GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Community</h4>
|
||||
<ul>
|
||||
<li><a href="https://github.com/dwn/dwn/issues">Issue Tracker</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn/discussions">Discussions</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn/blob/main/CONTRIBUTING.md">Contributing</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn/blob/main/LICENSE">License (MIT)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>DWN Window Manager - Open Source under the MIT License</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+1085
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,423 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Getting started with DWN window manager - learn the basics and become productive quickly.">
|
||||
<title>Documentation - DWN Window Manager</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<a href="index.html" class="logo">
|
||||
<span class="logo-icon">D</span>
|
||||
<span>DWN</span>
|
||||
</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="features.html">Features</a></li>
|
||||
<li><a href="installation.html">Install</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="documentation.html" class="active">Docs</a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="documentation.html">Getting Started</a>
|
||||
<a href="shortcuts.html">Keyboard Shortcuts</a>
|
||||
<a href="configuration.html">Configuration</a>
|
||||
<a href="ai-features.html">AI Features</a>
|
||||
<a href="architecture.html">Architecture</a>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="https://github.com/dwn/dwn">GitHub</a></li>
|
||||
</ul>
|
||||
<div class="nav-toggle" onclick="toggleNav()">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="docs-layout container">
|
||||
<aside class="docs-sidebar">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="section-title">Getting Started</span>
|
||||
<ul>
|
||||
<li><a href="#introduction" class="active">Introduction</a></li>
|
||||
<li><a href="#first-steps">First Steps</a></li>
|
||||
<li><a href="#basic-concepts">Basic Concepts</a></li>
|
||||
<li><a href="#tutorial">Interactive Tutorial</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="section-title">Core Usage</span>
|
||||
<ul>
|
||||
<li><a href="#windows">Managing Windows</a></li>
|
||||
<li><a href="#workspaces">Using Workspaces</a></li>
|
||||
<li><a href="#layouts">Layout Modes</a></li>
|
||||
<li><a href="#panels">Panels & Systray</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="section-title">Reference</span>
|
||||
<ul>
|
||||
<li><a href="shortcuts.html">Keyboard Shortcuts</a></li>
|
||||
<li><a href="configuration.html">Configuration</a></li>
|
||||
<li><a href="ai-features.html">AI Features</a></li>
|
||||
<li><a href="architecture.html">Architecture</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
<main class="docs-content">
|
||||
<h1 id="introduction">Getting Started with DWN</h1>
|
||||
<p class="lead">
|
||||
Learn the fundamentals of DWN and become productive in minutes.
|
||||
</p>
|
||||
|
||||
<h2 id="first-steps">First Steps</h2>
|
||||
<p>
|
||||
After <a href="installation.html">installing DWN</a> and starting your session,
|
||||
you'll see a clean desktop with two panels: a top panel with workspace indicators,
|
||||
taskbar, and system tray, and a bottom panel showing the clock.
|
||||
</p>
|
||||
|
||||
<h3>Opening Your First Application</h3>
|
||||
<p>Start by launching a terminal and application launcher:</p>
|
||||
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Shortcut</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>T</kbd></td>
|
||||
<td>Open terminal</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Alt</kbd> + <kbd>F2</kbd></td>
|
||||
<td>Open application launcher (dmenu/rofi)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Super</kbd> + <kbd>E</kbd></td>
|
||||
<td>Open file manager</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Super</kbd> + <kbd>B</kbd></td>
|
||||
<td>Open web browser</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-info">
|
||||
<strong class="alert-title">Tip: Run the Tutorial</strong>
|
||||
<p style="margin: 0;">Press <kbd>Super</kbd> + <kbd>T</kbd> to start an interactive
|
||||
tutorial that will guide you through all essential shortcuts.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="basic-concepts">Basic Concepts</h2>
|
||||
|
||||
<h3>The Super Key</h3>
|
||||
<p>
|
||||
Most DWN shortcuts use the <kbd>Super</kbd> key (often the Windows key or Command key).
|
||||
This keeps shortcuts separate from application shortcuts that typically use
|
||||
<kbd>Ctrl</kbd> or <kbd>Alt</kbd>.
|
||||
</p>
|
||||
|
||||
<h3>Focus Model</h3>
|
||||
<p>
|
||||
By default, DWN uses "click to focus" - you click on a window to focus it.
|
||||
You can change this to "focus follows mouse" (sloppy focus) in the configuration.
|
||||
</p>
|
||||
|
||||
<h3>Window Decorations</h3>
|
||||
<p>
|
||||
Each window has a title bar showing its name. The title bar color indicates focus:
|
||||
</p>
|
||||
<ul>
|
||||
<li><strong>Blue title bar</strong> - Focused window</li>
|
||||
<li><strong>Gray title bar</strong> - Unfocused window</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="tutorial">Interactive Tutorial</h2>
|
||||
<p>
|
||||
DWN includes a built-in interactive tutorial that teaches you essential shortcuts
|
||||
step by step. The tutorial:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Shows instructions for each shortcut</li>
|
||||
<li>Waits for you to press the correct keys</li>
|
||||
<li>Automatically advances when you complete each step</li>
|
||||
<li>Covers all essential shortcuts from basic to advanced</li>
|
||||
</ul>
|
||||
|
||||
<div class="card">
|
||||
<h3>Start the Tutorial</h3>
|
||||
<p>Press <kbd>Super</kbd> + <kbd>T</kbd> at any time to start or resume the tutorial.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="windows">Managing Windows</h2>
|
||||
|
||||
<h3>Window Operations</h3>
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Shortcut</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><kbd>Alt</kbd> + <kbd>F4</kbd></td>
|
||||
<td>Close focused window</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Alt</kbd> + <kbd>Tab</kbd></td>
|
||||
<td>Cycle to next window</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>Tab</kbd></td>
|
||||
<td>Cycle to previous window</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Alt</kbd> + <kbd>F10</kbd></td>
|
||||
<td>Toggle maximize</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Alt</kbd> + <kbd>F11</kbd></td>
|
||||
<td>Toggle fullscreen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Super</kbd> + <kbd>F9</kbd></td>
|
||||
<td>Toggle floating for current window</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Moving and Resizing</h3>
|
||||
<p>In floating mode, you can move and resize windows with the mouse:</p>
|
||||
<ul>
|
||||
<li><strong>Move</strong> - Click and drag the title bar</li>
|
||||
<li><strong>Resize</strong> - Drag any window edge or corner</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="workspaces">Using Workspaces</h2>
|
||||
<p>
|
||||
DWN provides 9 virtual workspaces to organize your windows. You can see which
|
||||
workspaces are active in the top panel.
|
||||
</p>
|
||||
|
||||
<h3>Workspace Navigation</h3>
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Shortcut</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><kbd>F1</kbd> - <kbd>F9</kbd></td>
|
||||
<td>Switch to workspace 1-9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Shift</kbd> + <kbd>F1</kbd> - <kbd>F9</kbd></td>
|
||||
<td>Move window to workspace 1-9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Right</kbd></td>
|
||||
<td>Next workspace</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Left</kbd></td>
|
||||
<td>Previous workspace</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Workspace Organization Tips</h3>
|
||||
<ul>
|
||||
<li><strong>Workspace 1</strong> - Main work (editor, terminal)</li>
|
||||
<li><strong>Workspace 2</strong> - Web browser, documentation</li>
|
||||
<li><strong>Workspace 3</strong> - Communication (email, chat)</li>
|
||||
<li><strong>Workspace 4-9</strong> - Project-specific contexts</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="layouts">Layout Modes</h2>
|
||||
<p>
|
||||
DWN supports three layout modes. Press <kbd>Super</kbd> + <kbd>Space</kbd> to cycle
|
||||
through them.
|
||||
</p>
|
||||
|
||||
<div class="features-grid" style="grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0;">
|
||||
<div class="card" style="padding: 1.5rem;">
|
||||
<h4>Tiling</h4>
|
||||
<p style="color: var(--text-muted); font-size: 0.9rem;">
|
||||
Windows automatically arranged in master-stack layout.
|
||||
Perfect for development workflows.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card" style="padding: 1.5rem;">
|
||||
<h4>Floating</h4>
|
||||
<p style="color: var(--text-muted); font-size: 0.9rem;">
|
||||
Traditional overlapping windows.
|
||||
Move and resize freely.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card" style="padding: 1.5rem;">
|
||||
<h4>Monocle</h4>
|
||||
<p style="color: var(--text-muted); font-size: 0.9rem;">
|
||||
One fullscreen window at a time.
|
||||
Great for focused work.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Tiling Layout Controls</h3>
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Shortcut</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><kbd>Super</kbd> + <kbd>H</kbd></td>
|
||||
<td>Shrink master area</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Super</kbd> + <kbd>L</kbd></td>
|
||||
<td>Expand master area</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Super</kbd> + <kbd>I</kbd></td>
|
||||
<td>Increase master window count</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Super</kbd> + <kbd>D</kbd></td>
|
||||
<td>Decrease master window count</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h2 id="panels">Panels & System Tray</h2>
|
||||
|
||||
<h3>Top Panel</h3>
|
||||
<p>The top panel contains:</p>
|
||||
<ul>
|
||||
<li><strong>Workspace indicators</strong> - Click to switch, highlighted when occupied</li>
|
||||
<li><strong>Taskbar</strong> - Shows windows on current workspace</li>
|
||||
<li><strong>System tray</strong> - Battery, volume, WiFi (see below)</li>
|
||||
</ul>
|
||||
|
||||
<h3>System Tray</h3>
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Indicator</th>
|
||||
<th>Click</th>
|
||||
<th>Right-click</th>
|
||||
<th>Scroll</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Volume</td>
|
||||
<td>Show slider</td>
|
||||
<td>Toggle mute</td>
|
||||
<td>Adjust volume</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>WiFi</td>
|
||||
<td>Show networks</td>
|
||||
<td>Disconnect</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Battery</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Bottom Panel</h3>
|
||||
<p>
|
||||
The bottom panel shows the current time and date. Both panels can be hidden
|
||||
in the configuration if you prefer a minimal setup.
|
||||
</p>
|
||||
|
||||
<h2>Next Steps</h2>
|
||||
<p>Now that you know the basics, explore these topics:</p>
|
||||
<ul>
|
||||
<li><a href="shortcuts.html">Complete Keyboard Shortcuts Reference</a></li>
|
||||
<li><a href="configuration.html">Customizing DWN</a></li>
|
||||
<li><a href="ai-features.html">Using AI Features</a></li>
|
||||
</ul>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-section">
|
||||
<h4>DWN Window Manager</h4>
|
||||
<p style="color: var(--text-muted);">
|
||||
A modern, production-ready X11 window manager with XFCE-like
|
||||
functionality and optional AI integration.
|
||||
</p>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Documentation</h4>
|
||||
<ul>
|
||||
<li><a href="documentation.html">Getting Started</a></li>
|
||||
<li><a href="shortcuts.html">Keyboard Shortcuts</a></li>
|
||||
<li><a href="configuration.html">Configuration</a></li>
|
||||
<li><a href="architecture.html">Architecture</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Resources</h4>
|
||||
<ul>
|
||||
<li><a href="features.html">Features</a></li>
|
||||
<li><a href="installation.html">Installation</a></li>
|
||||
<li><a href="ai-features.html">AI Integration</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn">GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Community</h4>
|
||||
<ul>
|
||||
<li><a href="https://github.com/dwn/dwn/issues">Issue Tracker</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn/discussions">Discussions</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn/blob/main/CONTRIBUTING.md">Contributing</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn/blob/main/LICENSE">License (MIT)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>DWN Window Manager - Open Source under the MIT License</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,411 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Explore the powerful features of DWN window manager - tiling layouts, workspaces, AI integration, and more.">
|
||||
<title>Features - DWN Window Manager</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<a href="index.html" class="logo">
|
||||
<span class="logo-icon">D</span>
|
||||
<span>DWN</span>
|
||||
</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="features.html" class="active">Features</a></li>
|
||||
<li><a href="installation.html">Install</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="documentation.html">Docs</a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="documentation.html">Getting Started</a>
|
||||
<a href="shortcuts.html">Keyboard Shortcuts</a>
|
||||
<a href="configuration.html">Configuration</a>
|
||||
<a href="ai-features.html">AI Features</a>
|
||||
<a href="architecture.html">Architecture</a>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="https://github.com/dwn/dwn">GitHub</a></li>
|
||||
</ul>
|
||||
<div class="nav-toggle" onclick="toggleNav()">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero" style="padding: 8rem 0 4rem;">
|
||||
<div class="container hero-content">
|
||||
<h1>Powerful Features</h1>
|
||||
<p class="subtitle">
|
||||
Everything you need for a productive desktop experience, without the bloat.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Window Management -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2>Window Management</h2>
|
||||
<p style="color: var(--text-muted); max-width: 700px; margin-bottom: 2rem;">
|
||||
DWN provides flexible window management that adapts to your workflow, whether you prefer
|
||||
the precision of tiling or the freedom of floating windows.
|
||||
</p>
|
||||
|
||||
<div class="features-grid">
|
||||
<div class="card">
|
||||
<h3><span class="card-icon">☷</span> Tiling Layout</h3>
|
||||
<p>Master-stack tiling with configurable master area ratio. Windows automatically
|
||||
organize into a primary area and a stack, maximizing screen real estate.</p>
|
||||
<ul style="margin-top: 1rem; padding-left: 1.25rem; color: var(--text-muted);">
|
||||
<li>Adjustable master area ratio (0.1 - 0.9)</li>
|
||||
<li>Multiple windows in master area</li>
|
||||
<li>Smart stack arrangement</li>
|
||||
<li>Configurable gaps between windows</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3><span class="card-icon">❏</span> Floating Layout</h3>
|
||||
<p>Traditional floating window management with drag-and-drop positioning.
|
||||
Perfect for workflows that need overlapping windows or free-form arrangement.</p>
|
||||
<ul style="margin-top: 1rem; padding-left: 1.25rem; color: var(--text-muted);">
|
||||
<li>Click and drag to move windows</li>
|
||||
<li>Resize from any edge or corner</li>
|
||||
<li>Window snapping support</li>
|
||||
<li>Respect minimum size hints</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3><span class="card-icon">☐</span> Monocle Layout</h3>
|
||||
<p>Full-screen single window mode for focused work. Each window takes up
|
||||
the entire workspace, perfect for presentations or deep concentration.</p>
|
||||
<ul style="margin-top: 1rem; padding-left: 1.25rem; color: var(--text-muted);">
|
||||
<li>Maximize focused window</li>
|
||||
<li>Quick window cycling</li>
|
||||
<li>Ideal for single-task focus</li>
|
||||
<li>Works great on small screens</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-info" style="margin-top: 2rem;">
|
||||
<strong class="alert-title">Pro Tip</strong>
|
||||
<p style="margin: 0;">Switch layouts instantly with <kbd>Super</kbd> + <kbd>Space</kbd>.
|
||||
Your window arrangement is preserved when switching back.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Workspaces -->
|
||||
<section class="section section-alt">
|
||||
<div class="container">
|
||||
<h2>Virtual Workspaces</h2>
|
||||
<p style="color: var(--text-muted); max-width: 700px; margin-bottom: 2rem;">
|
||||
Nine virtual desktops give you unlimited room to organize your work.
|
||||
Each workspace maintains its own window state and layout preferences.
|
||||
</p>
|
||||
|
||||
<div class="features-grid" style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">1-9</div>
|
||||
<h3>9 Workspaces</h3>
|
||||
<p>Quick access via F1-F9 keys. Organize projects, contexts, or tasks across
|
||||
dedicated spaces.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">↔</div>
|
||||
<h3>Window Transfer</h3>
|
||||
<p>Move windows between workspaces with Shift+F1-F9. Quick and keyboard-driven.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">📈</div>
|
||||
<h3>Per-Workspace State</h3>
|
||||
<p>Each workspace remembers its layout mode, window positions, and focused window.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">👁</div>
|
||||
<h3>Visual Indicators</h3>
|
||||
<p>Panel shows active and occupied workspaces at a glance with color coding.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Panel & System Tray -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2>Panels & System Tray</h2>
|
||||
<p style="color: var(--text-muted); max-width: 700px; margin-bottom: 2rem;">
|
||||
Built-in panels provide essential information and quick access to common functions
|
||||
without needing external tools or status bars.
|
||||
</p>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
|
||||
<div class="card">
|
||||
<h3>Top Panel</h3>
|
||||
<p>The top panel contains your main controls and information:</p>
|
||||
<ul style="margin-top: 1rem; padding-left: 1.25rem; color: var(--text-muted);">
|
||||
<li><strong>Workspace Indicators</strong> - Click or use shortcuts to switch</li>
|
||||
<li><strong>Taskbar</strong> - Shows windows on current workspace</li>
|
||||
<li><strong>System Tray</strong> - Battery, volume, WiFi indicators</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Bottom Panel</h3>
|
||||
<p>Optional bottom panel for additional information:</p>
|
||||
<ul style="margin-top: 1rem; padding-left: 1.25rem; color: var(--text-muted);">
|
||||
<li><strong>Clock Display</strong> - Time and date</li>
|
||||
<li><strong>Status Messages</strong> - System notifications</li>
|
||||
<li><strong>Customizable</strong> - Can be hidden in config</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 style="margin-top: 3rem; margin-bottom: 1.5rem;">System Tray Features</h3>
|
||||
<div class="features-grid">
|
||||
<div class="card">
|
||||
<h3>🔋 Battery Monitor</h3>
|
||||
<p>Shows current battery percentage with color-coded status:</p>
|
||||
<ul style="margin-top: 1rem; padding-left: 1.25rem; color: var(--text-muted);">
|
||||
<li>Red when below 20%</li>
|
||||
<li>Blue when charging</li>
|
||||
<li>Auto-hides on desktops</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>🔊 Volume Control</h3>
|
||||
<p>Full audio control at your fingertips:</p>
|
||||
<ul style="margin-top: 1rem; padding-left: 1.25rem; color: var(--text-muted);">
|
||||
<li>Click for volume slider</li>
|
||||
<li>Scroll to adjust</li>
|
||||
<li>Right-click to mute</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>📶 WiFi Manager</h3>
|
||||
<p>Network management made simple:</p>
|
||||
<ul style="margin-top: 1rem; padding-left: 1.25rem; color: var(--text-muted);">
|
||||
<li>Click for network list</li>
|
||||
<li>Signal strength indicators</li>
|
||||
<li>Current SSID display</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Notifications -->
|
||||
<section class="section section-alt">
|
||||
<div class="container">
|
||||
<h2>Notification System</h2>
|
||||
<p style="color: var(--text-muted); max-width: 700px; margin-bottom: 2rem;">
|
||||
Built-in D-Bus notification daemon following freedesktop.org standards.
|
||||
No need for external notification tools like dunst or notify-osd.
|
||||
</p>
|
||||
|
||||
<div class="features-grid" style="grid-template-columns: repeat(2, 1fr);">
|
||||
<div class="card">
|
||||
<h3>Standards Compliant</h3>
|
||||
<p>Implements the org.freedesktop.Notifications D-Bus interface.
|
||||
Works seamlessly with any application that sends desktop notifications.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Customizable Appearance</h3>
|
||||
<p>Configure notification colors and positioning through the config file.
|
||||
Notifications match your overall color scheme automatically.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-success" style="margin-top: 2rem;">
|
||||
<strong class="alert-title">Capacity</strong>
|
||||
<p style="margin: 0;">DWN can display up to 32 notifications simultaneously,
|
||||
with automatic queuing and timeout management.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- AI Features Preview -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2>AI Integration</h2>
|
||||
<p style="color: var(--text-muted); max-width: 700px; margin-bottom: 2rem;">
|
||||
Optional AI features powered by OpenRouter API and Exa semantic search.
|
||||
Control your desktop with natural language and get intelligent assistance.
|
||||
</p>
|
||||
|
||||
<div class="features-grid">
|
||||
<div class="card">
|
||||
<h3>🤖 AI Command Palette</h3>
|
||||
<p>Press <kbd>Super</kbd> + <kbd>Shift</kbd> + <kbd>A</kbd> and type natural
|
||||
language commands like "open firefox" or "launch terminal".</p>
|
||||
<a href="ai-features.html" class="btn btn-sm btn-secondary" style="margin-top: 1rem;">Learn More</a>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>🔍 Semantic Web Search</h3>
|
||||
<p>Search the web semantically with Exa integration. Find relevant content based
|
||||
on meaning, not just keywords.</p>
|
||||
<a href="ai-features.html" class="btn btn-sm btn-secondary" style="margin-top: 1rem;">Learn More</a>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>🎓 Context Analysis</h3>
|
||||
<p>AI analyzes your current workspace to understand what you're working on
|
||||
and provides relevant suggestions.</p>
|
||||
<a href="ai-features.html" class="btn btn-sm btn-secondary" style="margin-top: 1rem;">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- EWMH/ICCCM -->
|
||||
<section class="section section-alt">
|
||||
<div class="container">
|
||||
<h2>Standards Compliance</h2>
|
||||
<p style="color: var(--text-muted); max-width: 700px; margin-bottom: 2rem;">
|
||||
DWN implements EWMH and ICCCM protocols for maximum compatibility with X11 applications.
|
||||
</p>
|
||||
|
||||
<div class="features-grid" style="grid-template-columns: repeat(2, 1fr);">
|
||||
<div class="card">
|
||||
<h3>EWMH Support</h3>
|
||||
<p>Extended Window Manager Hints for modern application features:</p>
|
||||
<ul style="margin-top: 1rem; padding-left: 1.25rem; color: var(--text-muted);">
|
||||
<li>_NET_WM_STATE (fullscreen, maximized, etc.)</li>
|
||||
<li>_NET_ACTIVE_WINDOW</li>
|
||||
<li>_NET_CLIENT_LIST and _NET_CLIENT_LIST_STACKING</li>
|
||||
<li>_NET_CURRENT_DESKTOP and _NET_NUMBER_OF_DESKTOPS</li>
|
||||
<li>_NET_WM_WINDOW_TYPE</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>ICCCM Compliance</h3>
|
||||
<p>Inter-Client Communication Conventions Manual support:</p>
|
||||
<ul style="margin-top: 1rem; padding-left: 1.25rem; color: var(--text-muted);">
|
||||
<li>WM_STATE management</li>
|
||||
<li>WM_PROTOCOLS (WM_DELETE_WINDOW, WM_TAKE_FOCUS)</li>
|
||||
<li>WM_NORMAL_HINTS (size hints)</li>
|
||||
<li>WM_CLASS for window matching</li>
|
||||
<li>WM_NAME and _NET_WM_NAME</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Technical Specs -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2>Technical Specifications</h2>
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Specification</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Language</td>
|
||||
<td>ANSI C (C99)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Maximum Clients</td>
|
||||
<td>256 windows</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Workspaces</td>
|
||||
<td>9 virtual desktops</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Monitor Support</td>
|
||||
<td>Up to 8 monitors (Xinerama/Xrandr)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Notifications</td>
|
||||
<td>32 concurrent</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Keybindings</td>
|
||||
<td>64 configurable shortcuts</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Memory Usage</td>
|
||||
<td>< 5MB typical</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Configuration</td>
|
||||
<td>INI-style (~/.config/dwn/config)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="section section-alt">
|
||||
<div class="container" style="text-align: center;">
|
||||
<h2>Ready to Try DWN?</h2>
|
||||
<p style="color: var(--text-muted); max-width: 500px; margin: 0 auto 2rem;">
|
||||
Get started in minutes with our simple installation process.
|
||||
</p>
|
||||
<div class="hero-buttons" style="justify-content: center;">
|
||||
<a href="installation.html" class="btn btn-primary btn-lg">Install Now</a>
|
||||
<a href="shortcuts.html" class="btn btn-secondary btn-lg">View Shortcuts</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-section">
|
||||
<h4>DWN Window Manager</h4>
|
||||
<p style="color: var(--text-muted);">
|
||||
A modern, production-ready X11 window manager with XFCE-like
|
||||
functionality and optional AI integration.
|
||||
</p>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Documentation</h4>
|
||||
<ul>
|
||||
<li><a href="documentation.html">Getting Started</a></li>
|
||||
<li><a href="shortcuts.html">Keyboard Shortcuts</a></li>
|
||||
<li><a href="configuration.html">Configuration</a></li>
|
||||
<li><a href="architecture.html">Architecture</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Resources</h4>
|
||||
<ul>
|
||||
<li><a href="features.html">Features</a></li>
|
||||
<li><a href="installation.html">Installation</a></li>
|
||||
<li><a href="ai-features.html">AI Integration</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn">GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Community</h4>
|
||||
<ul>
|
||||
<li><a href="https://github.com/dwn/dwn/issues">Issue Tracker</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn/discussions">Discussions</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn/blob/main/CONTRIBUTING.md">Contributing</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn/blob/main/LICENSE">License (MIT)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>DWN Window Manager - Open Source under the MIT License</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+352
@@ -0,0 +1,352 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="DWN - A modern, production-ready X11 window manager with XFCE-like functionality and optional AI integration.">
|
||||
<meta name="keywords" content="window manager, X11, Linux, tiling, floating, EWMH, AI, productivity">
|
||||
<title>DWN Window Manager - Modern X11 Window Management</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<a href="index.html" class="logo">
|
||||
<span class="logo-icon">D</span>
|
||||
<span>DWN</span>
|
||||
</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="index.html" class="active">Home</a></li>
|
||||
<li><a href="features.html">Features</a></li>
|
||||
<li><a href="installation.html">Install</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="documentation.html">Docs</a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="documentation.html">Getting Started</a>
|
||||
<a href="shortcuts.html">Keyboard Shortcuts</a>
|
||||
<a href="configuration.html">Configuration</a>
|
||||
<a href="ai-features.html">AI Features</a>
|
||||
<a href="architecture.html">Architecture</a>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="https://github.com/dwn/dwn">GitHub</a></li>
|
||||
</ul>
|
||||
<div class="nav-toggle" onclick="toggleNav()">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="hero">
|
||||
<div class="container hero-content">
|
||||
<h1>Modern Window Management for X11</h1>
|
||||
<p class="subtitle">
|
||||
DWN is a production-ready window manager written in ANSI C with XFCE-like functionality,
|
||||
powerful tiling layouts, and optional AI integration. Fast, flexible, and fully featured.
|
||||
</p>
|
||||
<div class="hero-buttons">
|
||||
<a href="installation.html" class="btn btn-primary btn-lg">Get Started</a>
|
||||
<a href="features.html" class="btn btn-secondary btn-lg">Explore Features</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Key Features Overview -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2 style="text-align: center; margin-bottom: 1rem;">Why Choose DWN?</h2>
|
||||
<p style="text-align: center; color: var(--text-muted); max-width: 600px; margin: 0 auto 3rem;">
|
||||
DWN combines the simplicity of traditional floating window managers with the productivity
|
||||
of tiling layouts, all wrapped in a modern, customizable package.
|
||||
</p>
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">☰</div>
|
||||
<h3>Multiple Layouts</h3>
|
||||
<p>Switch seamlessly between tiling, floating, and monocle layouts.
|
||||
Resize master areas and organize windows exactly how you work.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">⚙</div>
|
||||
<h3>9 Workspaces</h3>
|
||||
<p>Organize your workflow across 9 virtual desktops with per-workspace
|
||||
state. Move windows between workspaces with a single keystroke.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🎨</div>
|
||||
<h3>Fully Customizable</h3>
|
||||
<p>INI-style configuration with extensive theming options. Customize colors,
|
||||
fonts, borders, gaps, and behavior to match your style.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">💡</div>
|
||||
<h3>AI Integration</h3>
|
||||
<p>Optional AI command palette and semantic web search. Control your desktop
|
||||
with natural language and get intelligent suggestions.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🔔</div>
|
||||
<h3>Notification Daemon</h3>
|
||||
<p>Built-in D-Bus notification support following freedesktop.org standards.
|
||||
No need for external notification daemons.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">💻</div>
|
||||
<h3>System Tray</h3>
|
||||
<p>Integrated system tray with battery, volume, and WiFi indicators.
|
||||
Volume slider and network selection dropdowns included.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Stats -->
|
||||
<section class="section section-alt">
|
||||
<div class="container">
|
||||
<div class="stats">
|
||||
<div class="stat-item">
|
||||
<h3>~10K</h3>
|
||||
<p>Lines of Pure C</p>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<h3>0</h3>
|
||||
<p>Runtime Dependencies</p>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<h3><5MB</h3>
|
||||
<p>Memory Footprint</p>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<h3>64+</h3>
|
||||
<p>Keyboard Shortcuts</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick Start -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2 style="text-align: center;">Get Up and Running in Minutes</h2>
|
||||
<p style="text-align: center; color: var(--text-muted); max-width: 600px; margin: 0 auto 3rem;">
|
||||
DWN is designed for easy installation and immediate productivity.
|
||||
Build from source or use your distribution's package manager.
|
||||
</p>
|
||||
|
||||
<div class="card" style="max-width: 700px; margin: 0 auto;">
|
||||
<div class="code-header">
|
||||
<span>Terminal</span>
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
</div>
|
||||
<pre><code># Clone the repository
|
||||
git clone https://github.com/dwn/dwn.git
|
||||
cd dwn
|
||||
|
||||
# Install dependencies (auto-detects your distro)
|
||||
make deps
|
||||
|
||||
# Build and install
|
||||
make
|
||||
sudo make install
|
||||
|
||||
# Add to your .xinitrc
|
||||
echo "exec dwn" >> ~/.xinitrc</code></pre>
|
||||
</div>
|
||||
|
||||
<p style="text-align: center; margin-top: 2rem;">
|
||||
<a href="installation.html" class="btn btn-primary">Full Installation Guide</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Screenshots Preview -->
|
||||
<section class="section section-alt">
|
||||
<div class="container">
|
||||
<h2 style="text-align: center;">See DWN in Action</h2>
|
||||
<p style="text-align: center; color: var(--text-muted); max-width: 600px; margin: 0 auto 3rem;">
|
||||
A clean, modern interface that stays out of your way while providing everything you need.
|
||||
</p>
|
||||
<div class="screenshot-grid">
|
||||
<div class="screenshot">
|
||||
<div class="screenshot-placeholder">
|
||||
[Tiling Layout with Terminal and Editor]
|
||||
</div>
|
||||
<div class="screenshot-caption">Master-stack tiling layout perfect for development</div>
|
||||
</div>
|
||||
<div class="screenshot">
|
||||
<div class="screenshot-placeholder">
|
||||
[System Tray and Notifications]
|
||||
</div>
|
||||
<div class="screenshot-caption">Integrated system tray with volume and WiFi controls</div>
|
||||
</div>
|
||||
<div class="screenshot">
|
||||
<div class="screenshot-placeholder">
|
||||
[AI Command Palette]
|
||||
</div>
|
||||
<div class="screenshot-caption">AI-powered command palette for natural language control</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Comparison -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2 style="text-align: center;">How DWN Compares</h2>
|
||||
<p style="text-align: center; color: var(--text-muted); max-width: 600px; margin: 0 auto 3rem;">
|
||||
DWN bridges the gap between minimal tiling managers and full desktop environments.
|
||||
</p>
|
||||
<div class="comparison">
|
||||
<div class="comparison-card">
|
||||
<h3>Minimal Tiling WMs</h3>
|
||||
<p style="color: var(--text-muted);">dwm, i3, bspwm</p>
|
||||
<ul>
|
||||
<li>Lightweight and fast</li>
|
||||
<li>Keyboard-driven workflow</li>
|
||||
<li>Highly customizable</li>
|
||||
<li>Steep learning curve</li>
|
||||
<li>Requires additional tools</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="comparison-card featured">
|
||||
<h3>DWN</h3>
|
||||
<p style="color: var(--text-muted);">Best of both worlds</p>
|
||||
<ul>
|
||||
<li>Lightweight and fast</li>
|
||||
<li>Keyboard-driven workflow</li>
|
||||
<li>Highly customizable</li>
|
||||
<li>Interactive tutorial</li>
|
||||
<li>Built-in panels and systray</li>
|
||||
<li>AI integration optional</li>
|
||||
<li>Notification daemon included</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="comparison-card">
|
||||
<h3>Desktop Environments</h3>
|
||||
<p style="color: var(--text-muted);">XFCE, GNOME, KDE</p>
|
||||
<ul>
|
||||
<li>Feature complete</li>
|
||||
<li>User-friendly</li>
|
||||
<li>Heavy resource usage</li>
|
||||
<li>Less customizable</li>
|
||||
<li>Slower performance</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials -->
|
||||
<section class="section section-alt">
|
||||
<div class="container">
|
||||
<h2 style="text-align: center;">What Users Say</h2>
|
||||
<div class="testimonials">
|
||||
<div class="testimonial">
|
||||
<p class="testimonial-text">
|
||||
"Finally, a window manager that doesn't make me choose between
|
||||
productivity and usability. DWN just works."
|
||||
</p>
|
||||
<div class="testimonial-author">
|
||||
<div class="testimonial-avatar">JD</div>
|
||||
<div class="testimonial-info">
|
||||
<strong>John Developer</strong>
|
||||
<span>Senior Software Engineer</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="testimonial">
|
||||
<p class="testimonial-text">
|
||||
"The AI command palette changed how I interact with my desktop.
|
||||
It's like having an assistant for window management."
|
||||
</p>
|
||||
<div class="testimonial-author">
|
||||
<div class="testimonial-avatar">SA</div>
|
||||
<div class="testimonial-info">
|
||||
<strong>Sarah Admin</strong>
|
||||
<span>System Administrator</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="testimonial">
|
||||
<p class="testimonial-text">
|
||||
"Coming from i3, the learning curve was minimal. The built-in
|
||||
tutorial had me productive in under 10 minutes."
|
||||
</p>
|
||||
<div class="testimonial-author">
|
||||
<div class="testimonial-avatar">ML</div>
|
||||
<div class="testimonial-info">
|
||||
<strong>Mike Linux</strong>
|
||||
<span>DevOps Engineer</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="section">
|
||||
<div class="container" style="text-align: center;">
|
||||
<h2>Ready to Transform Your Desktop?</h2>
|
||||
<p style="color: var(--text-muted); max-width: 500px; margin: 0 auto 2rem;">
|
||||
Join thousands of developers and power users who have made DWN their window manager of choice.
|
||||
</p>
|
||||
<div class="hero-buttons" style="justify-content: center;">
|
||||
<a href="installation.html" class="btn btn-primary btn-lg">Install DWN</a>
|
||||
<a href="documentation.html" class="btn btn-secondary btn-lg">Read the Docs</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-section">
|
||||
<h4>DWN Window Manager</h4>
|
||||
<p style="color: var(--text-muted);">
|
||||
A modern, production-ready X11 window manager with XFCE-like
|
||||
functionality and optional AI integration.
|
||||
</p>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Documentation</h4>
|
||||
<ul>
|
||||
<li><a href="documentation.html">Getting Started</a></li>
|
||||
<li><a href="shortcuts.html">Keyboard Shortcuts</a></li>
|
||||
<li><a href="configuration.html">Configuration</a></li>
|
||||
<li><a href="architecture.html">Architecture</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Resources</h4>
|
||||
<ul>
|
||||
<li><a href="features.html">Features</a></li>
|
||||
<li><a href="installation.html">Installation</a></li>
|
||||
<li><a href="ai-features.html">AI Integration</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn">GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Community</h4>
|
||||
<ul>
|
||||
<li><a href="https://github.com/dwn/dwn/issues">Issue Tracker</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn/discussions">Discussions</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn/blob/main/CONTRIBUTING.md">Contributing</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn/blob/main/LICENSE">License (MIT)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>DWN Window Manager - Open Source under the MIT License</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,610 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Install DWN window manager - step by step guide for Debian, Ubuntu, Fedora, Arch Linux and more.">
|
||||
<title>Installation - DWN Window Manager</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<a href="index.html" class="logo">
|
||||
<span class="logo-icon">D</span>
|
||||
<span>DWN</span>
|
||||
</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="features.html">Features</a></li>
|
||||
<li><a href="installation.html" class="active">Install</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="documentation.html">Docs</a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="documentation.html">Getting Started</a>
|
||||
<a href="shortcuts.html">Keyboard Shortcuts</a>
|
||||
<a href="configuration.html">Configuration</a>
|
||||
<a href="ai-features.html">AI Features</a>
|
||||
<a href="architecture.html">Architecture</a>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="https://github.com/dwn/dwn">GitHub</a></li>
|
||||
</ul>
|
||||
<div class="nav-toggle" onclick="toggleNav()">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero" style="padding: 8rem 0 4rem;">
|
||||
<div class="container hero-content">
|
||||
<h1>Installation Guide</h1>
|
||||
<p class="subtitle">
|
||||
Get DWN running on your system in just a few minutes.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Requirements -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2>Requirements</h2>
|
||||
<p style="color: var(--text-muted); margin-bottom: 2rem;">
|
||||
DWN requires X11 and a few common libraries. Most Linux distributions include these by default.
|
||||
</p>
|
||||
|
||||
<div class="card">
|
||||
<h3>Required Dependencies</h3>
|
||||
<div class="table-wrapper" style="margin-top: 1rem;">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Library</th>
|
||||
<th>Purpose</th>
|
||||
<th>Package (Debian/Ubuntu)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>libX11</td>
|
||||
<td>X Window System client library</td>
|
||||
<td><code>libx11-dev</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>libXext</td>
|
||||
<td>X extensions library</td>
|
||||
<td><code>libxext-dev</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>libXinerama</td>
|
||||
<td>Multi-monitor support</td>
|
||||
<td><code>libxinerama-dev</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>libXrandr</td>
|
||||
<td>Display configuration</td>
|
||||
<td><code>libxrandr-dev</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>libXft</td>
|
||||
<td>Font rendering</td>
|
||||
<td><code>libxft-dev</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>fontconfig</td>
|
||||
<td>Font configuration</td>
|
||||
<td><code>libfontconfig1-dev</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>libdbus-1</td>
|
||||
<td>D-Bus for notifications</td>
|
||||
<td><code>libdbus-1-dev</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>libcurl</td>
|
||||
<td>AI features (optional)</td>
|
||||
<td><code>libcurl4-openssl-dev</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick Install -->
|
||||
<section class="section section-alt">
|
||||
<div class="container">
|
||||
<h2>Quick Installation</h2>
|
||||
<p style="color: var(--text-muted); margin-bottom: 2rem;">
|
||||
The fastest way to get started. Our build system auto-detects your distribution.
|
||||
</p>
|
||||
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<div class="step-number">1</div>
|
||||
<div class="step-content">
|
||||
<h4>Clone the Repository</h4>
|
||||
<p>Download the latest source code from GitHub.</p>
|
||||
<div class="code-header">
|
||||
<span>Terminal</span>
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
</div>
|
||||
<pre><code>git clone https://github.com/dwn/dwn.git
|
||||
cd dwn</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">2</div>
|
||||
<div class="step-content">
|
||||
<h4>Install Dependencies</h4>
|
||||
<p>Automatically install required packages for your distribution.</p>
|
||||
<div class="code-header">
|
||||
<span>Terminal</span>
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
</div>
|
||||
<pre><code>make deps</code></pre>
|
||||
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: var(--text-muted);">
|
||||
Supports Debian, Ubuntu, Fedora, Arch, openSUSE, and Void Linux.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">3</div>
|
||||
<div class="step-content">
|
||||
<h4>Build DWN</h4>
|
||||
<p>Compile the window manager with optimizations.</p>
|
||||
<div class="code-header">
|
||||
<span>Terminal</span>
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
</div>
|
||||
<pre><code>make</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">4</div>
|
||||
<div class="step-content">
|
||||
<h4>Install System-wide</h4>
|
||||
<p>Install the binary to your system PATH.</p>
|
||||
<div class="code-header">
|
||||
<span>Terminal</span>
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
</div>
|
||||
<pre><code>sudo make install</code></pre>
|
||||
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: var(--text-muted);">
|
||||
Default location: <code>/usr/local/bin/dwn</code>. Override with <code>PREFIX=/custom/path make install</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">5</div>
|
||||
<div class="step-content">
|
||||
<h4>Configure Your Session</h4>
|
||||
<p>Add DWN to your X session startup.</p>
|
||||
<div class="code-header">
|
||||
<span>~/.xinitrc</span>
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
</div>
|
||||
<pre><code>exec dwn</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Distribution-specific -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2>Distribution-Specific Instructions</h2>
|
||||
|
||||
<div class="tabs">
|
||||
<button class="tab active" onclick="showTab('debian')">Debian/Ubuntu</button>
|
||||
<button class="tab" onclick="showTab('fedora')">Fedora</button>
|
||||
<button class="tab" onclick="showTab('arch')">Arch Linux</button>
|
||||
<button class="tab" onclick="showTab('void')">Void Linux</button>
|
||||
</div>
|
||||
|
||||
<div id="debian" class="tab-content active">
|
||||
<h3>Debian / Ubuntu / Linux Mint</h3>
|
||||
<div class="code-header">
|
||||
<span>Terminal</span>
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
</div>
|
||||
<pre><code># Install dependencies
|
||||
sudo apt update
|
||||
sudo apt install -y \
|
||||
build-essential \
|
||||
libx11-dev \
|
||||
libxext-dev \
|
||||
libxinerama-dev \
|
||||
libxrandr-dev \
|
||||
libxft-dev \
|
||||
libfontconfig1-dev \
|
||||
libdbus-1-dev \
|
||||
libcurl4-openssl-dev \
|
||||
pkg-config
|
||||
|
||||
# Build and install
|
||||
git clone https://github.com/dwn/dwn.git
|
||||
cd dwn
|
||||
make
|
||||
sudo make install</code></pre>
|
||||
</div>
|
||||
|
||||
<div id="fedora" class="tab-content">
|
||||
<h3>Fedora / RHEL / CentOS</h3>
|
||||
<div class="code-header">
|
||||
<span>Terminal</span>
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
</div>
|
||||
<pre><code># Install dependencies
|
||||
sudo dnf install -y \
|
||||
gcc \
|
||||
make \
|
||||
libX11-devel \
|
||||
libXext-devel \
|
||||
libXinerama-devel \
|
||||
libXrandr-devel \
|
||||
libXft-devel \
|
||||
fontconfig-devel \
|
||||
dbus-devel \
|
||||
libcurl-devel \
|
||||
pkg-config
|
||||
|
||||
# Build and install
|
||||
git clone https://github.com/dwn/dwn.git
|
||||
cd dwn
|
||||
make
|
||||
sudo make install</code></pre>
|
||||
</div>
|
||||
|
||||
<div id="arch" class="tab-content">
|
||||
<h3>Arch Linux / Manjaro</h3>
|
||||
<div class="code-header">
|
||||
<span>Terminal</span>
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
</div>
|
||||
<pre><code># Install dependencies
|
||||
sudo pacman -S --needed \
|
||||
base-devel \
|
||||
libx11 \
|
||||
libxext \
|
||||
libxinerama \
|
||||
libxrandr \
|
||||
libxft \
|
||||
fontconfig \
|
||||
dbus \
|
||||
curl \
|
||||
pkg-config
|
||||
|
||||
# Build and install
|
||||
git clone https://github.com/dwn/dwn.git
|
||||
cd dwn
|
||||
make
|
||||
sudo make install</code></pre>
|
||||
<div class="alert alert-info" style="margin-top: 1rem;">
|
||||
<strong>AUR Package</strong>
|
||||
<p style="margin: 0;">An AUR package <code>dwn-git</code> may also be available:
|
||||
<code>yay -S dwn-git</code></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="void" class="tab-content">
|
||||
<h3>Void Linux</h3>
|
||||
<div class="code-header">
|
||||
<span>Terminal</span>
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
</div>
|
||||
<pre><code># Install dependencies
|
||||
sudo xbps-install -S \
|
||||
base-devel \
|
||||
libX11-devel \
|
||||
libXext-devel \
|
||||
libXinerama-devel \
|
||||
libXrandr-devel \
|
||||
libXft-devel \
|
||||
fontconfig-devel \
|
||||
dbus-devel \
|
||||
libcurl-devel \
|
||||
pkg-config
|
||||
|
||||
# Build and install
|
||||
git clone https://github.com/dwn/dwn.git
|
||||
cd dwn
|
||||
make
|
||||
sudo make install</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Session Setup -->
|
||||
<section class="section section-alt">
|
||||
<div class="container">
|
||||
<h2>Session Setup</h2>
|
||||
<p style="color: var(--text-muted); margin-bottom: 2rem;">
|
||||
Configure your display manager or xinit to start DWN.
|
||||
</p>
|
||||
|
||||
<div class="features-grid" style="grid-template-columns: repeat(2, 1fr);">
|
||||
<div class="card">
|
||||
<h3>Using xinit / startx</h3>
|
||||
<p>For minimal setups using startx:</p>
|
||||
<div class="code-header">
|
||||
<span>~/.xinitrc</span>
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
</div>
|
||||
<pre><code># Optional: set display settings
|
||||
xrandr --output DP-1 --mode 2560x1440
|
||||
|
||||
# Optional: set wallpaper
|
||||
feh --bg-fill ~/wallpaper.jpg
|
||||
|
||||
# Start DWN
|
||||
exec dwn</code></pre>
|
||||
<p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted);">
|
||||
Then run <code>startx</code> from a TTY.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Using a Display Manager</h3>
|
||||
<p>Create a desktop entry for GDM, LightDM, etc:</p>
|
||||
<div class="code-header">
|
||||
<span>/usr/share/xsessions/dwn.desktop</span>
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
</div>
|
||||
<pre><code>[Desktop Entry]
|
||||
Name=DWN
|
||||
Comment=DWN Window Manager
|
||||
Exec=dwn
|
||||
Type=Application
|
||||
DesktopNames=DWN</code></pre>
|
||||
<p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted);">
|
||||
DWN will appear in your display manager's session menu.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testing -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2>Testing in a Nested X Server</h2>
|
||||
<p style="color: var(--text-muted); margin-bottom: 2rem;">
|
||||
Test DWN without leaving your current session using Xephyr.
|
||||
</p>
|
||||
|
||||
<div class="card">
|
||||
<h3>Using make run</h3>
|
||||
<p>The easiest way to test DWN safely:</p>
|
||||
<div class="code-header">
|
||||
<span>Terminal</span>
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
</div>
|
||||
<pre><code># Make sure Xephyr is installed
|
||||
# Debian/Ubuntu: sudo apt install xserver-xephyr
|
||||
# Fedora: sudo dnf install xorg-x11-server-Xephyr
|
||||
# Arch: sudo pacman -S xorg-server-xephyr
|
||||
|
||||
# Run DWN in a nested window
|
||||
make run</code></pre>
|
||||
<p style="margin-top: 1rem; color: var(--text-muted);">
|
||||
This opens a 1280x720 window running DWN. Perfect for experimenting with configuration changes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-top: 1.5rem;">
|
||||
<h3>Manual Xephyr Setup</h3>
|
||||
<p>For more control over the test environment:</p>
|
||||
<div class="code-header">
|
||||
<span>Terminal</span>
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
</div>
|
||||
<pre><code># Start Xephyr on display :1
|
||||
Xephyr :1 -screen 1920x1080 &
|
||||
|
||||
# Run DWN on that display
|
||||
DISPLAY=:1 ./dwn
|
||||
|
||||
# Open a terminal in the test environment
|
||||
DISPLAY=:1 xterm &</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Post-install -->
|
||||
<section class="section section-alt">
|
||||
<div class="container">
|
||||
<h2>Post-Installation</h2>
|
||||
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<div class="step-number">1</div>
|
||||
<div class="step-content">
|
||||
<h4>Create Configuration Directory</h4>
|
||||
<p>DWN will create this automatically on first run, but you can set it up in advance:</p>
|
||||
<div class="code-header">
|
||||
<span>Terminal</span>
|
||||
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
||||
</div>
|
||||
<pre><code>mkdir -p ~/.config/dwn</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">2</div>
|
||||
<div class="step-content">
|
||||
<h4>Run the Interactive Tutorial</h4>
|
||||
<p>Once DWN is running, press <kbd>Super</kbd> + <kbd>T</kbd> to start the built-in tutorial
|
||||
that will teach you all the essential shortcuts.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">3</div>
|
||||
<div class="step-content">
|
||||
<h4>View All Shortcuts</h4>
|
||||
<p>Press <kbd>Super</kbd> + <kbd>S</kbd> to see a complete list of keyboard shortcuts.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-number">4</div>
|
||||
<div class="step-content">
|
||||
<h4>Customize Your Setup</h4>
|
||||
<p>See the <a href="configuration.html">Configuration Guide</a> to personalize DWN to your liking.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Troubleshooting -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2>Troubleshooting</h2>
|
||||
|
||||
<div class="faq-item">
|
||||
<button class="faq-question" onclick="toggleFaq(this)">
|
||||
DWN doesn't start - "cannot open display"
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<div class="faq-answer-content">
|
||||
<p>This error means DWN can't connect to an X server. Make sure:</p>
|
||||
<ul style="padding-left: 1.25rem; margin-top: 0.5rem;">
|
||||
<li>You're running from a TTY with <code>startx</code>, not from within another X session</li>
|
||||
<li>The DISPLAY environment variable is set correctly</li>
|
||||
<li>X server is installed and working (<code>Xorg -configure</code> to test)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<button class="faq-question" onclick="toggleFaq(this)">
|
||||
Build fails - "pkg-config: command not found"
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<div class="faq-answer-content">
|
||||
<p>Install pkg-config for your distribution:</p>
|
||||
<pre style="margin-top: 0.5rem;"><code>sudo apt install pkg-config # Debian/Ubuntu
|
||||
sudo dnf install pkg-config # Fedora
|
||||
sudo pacman -S pkg-config # Arch</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<button class="faq-question" onclick="toggleFaq(this)">
|
||||
Missing header files during build
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<div class="faq-answer-content">
|
||||
<p>Make sure you have the development packages installed, not just the runtime libraries.
|
||||
On Debian/Ubuntu, install packages ending with <code>-dev</code>.
|
||||
Run <code>make deps</code> to auto-install everything.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<button class="faq-question" onclick="toggleFaq(this)">
|
||||
Keyboard shortcuts don't work
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<div class="faq-answer-content">
|
||||
<p>Check for conflicts with other programs grabbing keys:</p>
|
||||
<ul style="padding-left: 1.25rem; margin-top: 0.5rem;">
|
||||
<li>Make sure no other window manager is running</li>
|
||||
<li>Check if compositor (like picom) is grabbing keys</li>
|
||||
<li>Verify keyboard layout is correct with <code>setxkbmap</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<button class="faq-question" onclick="toggleFaq(this)">
|
||||
Fonts look bad or missing
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<div class="faq-answer-content">
|
||||
<p>DWN uses Xft for font rendering. Install some good fonts:</p>
|
||||
<pre style="margin-top: 0.5rem;"><code>sudo apt install fonts-dejavu fonts-liberation # Debian/Ubuntu
|
||||
sudo dnf install dejavu-fonts-all liberation-fonts # Fedora</code></pre>
|
||||
<p style="margin-top: 0.5rem;">You can configure the font in <code>~/.config/dwn/config</code>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="section section-alt">
|
||||
<div class="container" style="text-align: center;">
|
||||
<h2>Installation Complete?</h2>
|
||||
<p style="color: var(--text-muted); max-width: 500px; margin: 0 auto 2rem;">
|
||||
Learn how to use DWN effectively with our documentation.
|
||||
</p>
|
||||
<div class="hero-buttons" style="justify-content: center;">
|
||||
<a href="documentation.html" class="btn btn-primary btn-lg">Getting Started Guide</a>
|
||||
<a href="shortcuts.html" class="btn btn-secondary btn-lg">Keyboard Shortcuts</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-section">
|
||||
<h4>DWN Window Manager</h4>
|
||||
<p style="color: var(--text-muted);">
|
||||
A modern, production-ready X11 window manager with XFCE-like
|
||||
functionality and optional AI integration.
|
||||
</p>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Documentation</h4>
|
||||
<ul>
|
||||
<li><a href="documentation.html">Getting Started</a></li>
|
||||
<li><a href="shortcuts.html">Keyboard Shortcuts</a></li>
|
||||
<li><a href="configuration.html">Configuration</a></li>
|
||||
<li><a href="architecture.html">Architecture</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Resources</h4>
|
||||
<ul>
|
||||
<li><a href="features.html">Features</a></li>
|
||||
<li><a href="installation.html">Installation</a></li>
|
||||
<li><a href="ai-features.html">AI Integration</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn">GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Community</h4>
|
||||
<ul>
|
||||
<li><a href="https://github.com/dwn/dwn/issues">Issue Tracker</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn/discussions">Discussions</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn/blob/main/CONTRIBUTING.md">Contributing</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn/blob/main/LICENSE">License (MIT)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>DWN Window Manager - Open Source under the MIT License</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+304
@@ -0,0 +1,304 @@
|
||||
/**
|
||||
* DWN Window Manager - Website JavaScript
|
||||
* Vanilla JS for interactivity
|
||||
*/
|
||||
|
||||
// Mobile Navigation Toggle
|
||||
function toggleNav() {
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
const toggle = document.querySelector('.nav-toggle');
|
||||
|
||||
navLinks.classList.toggle('active');
|
||||
toggle.classList.toggle('active');
|
||||
}
|
||||
|
||||
// Close mobile nav when clicking outside
|
||||
document.addEventListener('click', function(e) {
|
||||
const nav = document.querySelector('nav');
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
|
||||
if (navLinks && navLinks.classList.contains('active')) {
|
||||
if (!nav.contains(e.target)) {
|
||||
navLinks.classList.remove('active');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Close mobile nav when clicking a link
|
||||
document.querySelectorAll('.nav-links a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
if (navLinks) {
|
||||
navLinks.classList.remove('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Tab functionality
|
||||
function showTab(tabId) {
|
||||
// Hide all tab contents
|
||||
document.querySelectorAll('.tab-content').forEach(content => {
|
||||
content.classList.remove('active');
|
||||
});
|
||||
|
||||
// Deactivate all tabs
|
||||
document.querySelectorAll('.tab').forEach(tab => {
|
||||
tab.classList.remove('active');
|
||||
});
|
||||
|
||||
// Show selected tab content
|
||||
const selectedContent = document.getElementById(tabId);
|
||||
if (selectedContent) {
|
||||
selectedContent.classList.add('active');
|
||||
}
|
||||
|
||||
// Activate clicked tab
|
||||
event.target.classList.add('active');
|
||||
}
|
||||
|
||||
// FAQ Accordion
|
||||
function toggleFaq(button) {
|
||||
const faqItem = button.closest('.faq-item');
|
||||
const isActive = faqItem.classList.contains('active');
|
||||
|
||||
// Close all FAQ items
|
||||
document.querySelectorAll('.faq-item').forEach(item => {
|
||||
item.classList.remove('active');
|
||||
});
|
||||
|
||||
// Open clicked item if it wasn't already open
|
||||
if (!isActive) {
|
||||
faqItem.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
// Copy to clipboard functionality
|
||||
function copyCode(button) {
|
||||
const codeBlock = button.closest('.code-header').nextElementSibling;
|
||||
const code = codeBlock.querySelector('code');
|
||||
|
||||
if (code) {
|
||||
const text = code.textContent;
|
||||
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
// Show feedback
|
||||
const originalText = button.textContent;
|
||||
button.textContent = 'Copied!';
|
||||
button.style.background = 'var(--success)';
|
||||
|
||||
setTimeout(() => {
|
||||
button.textContent = originalText;
|
||||
button.style.background = '';
|
||||
}, 2000);
|
||||
}).catch(err => {
|
||||
console.error('Failed to copy:', err);
|
||||
button.textContent = 'Error';
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Shortcut search/filter functionality
|
||||
function filterShortcuts() {
|
||||
const searchInput = document.getElementById('shortcut-search');
|
||||
if (!searchInput) return;
|
||||
|
||||
const filter = searchInput.value.toLowerCase();
|
||||
const tables = document.querySelectorAll('.shortcuts-table');
|
||||
|
||||
tables.forEach(table => {
|
||||
const rows = table.querySelectorAll('tbody tr');
|
||||
let visibleCount = 0;
|
||||
|
||||
rows.forEach(row => {
|
||||
const text = row.textContent.toLowerCase();
|
||||
if (text.includes(filter)) {
|
||||
row.style.display = '';
|
||||
visibleCount++;
|
||||
} else {
|
||||
row.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Show/hide the entire table section if no matches
|
||||
const section = table.closest('.table-wrapper');
|
||||
const header = section ? section.previousElementSibling : null;
|
||||
|
||||
if (section && header && header.tagName === 'H2') {
|
||||
if (visibleCount === 0 && filter !== '') {
|
||||
section.style.display = 'none';
|
||||
header.style.display = 'none';
|
||||
} else {
|
||||
section.style.display = '';
|
||||
header.style.display = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Smooth scroll for anchor links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function(e) {
|
||||
const href = this.getAttribute('href');
|
||||
if (href === '#') return;
|
||||
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(href);
|
||||
|
||||
if (target) {
|
||||
const headerOffset = 80; // Account for fixed header
|
||||
const elementPosition = target.getBoundingClientRect().top;
|
||||
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
|
||||
|
||||
window.scrollTo({
|
||||
top: offsetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
|
||||
// Update URL without scrolling
|
||||
history.pushState(null, null, href);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Highlight active section in docs sidebar
|
||||
function updateActiveSection() {
|
||||
const sidebar = document.querySelector('.docs-sidebar');
|
||||
if (!sidebar) return;
|
||||
|
||||
const sections = document.querySelectorAll('h2[id], h3[id]');
|
||||
const links = sidebar.querySelectorAll('a[href^="#"]');
|
||||
|
||||
let currentSection = '';
|
||||
const scrollPos = window.scrollY + 100;
|
||||
|
||||
sections.forEach(section => {
|
||||
if (section.offsetTop <= scrollPos) {
|
||||
currentSection = section.id;
|
||||
}
|
||||
});
|
||||
|
||||
links.forEach(link => {
|
||||
link.classList.remove('active');
|
||||
if (link.getAttribute('href') === '#' + currentSection) {
|
||||
link.classList.add('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Throttle scroll events
|
||||
let scrollTimeout;
|
||||
window.addEventListener('scroll', () => {
|
||||
if (scrollTimeout) return;
|
||||
|
||||
scrollTimeout = setTimeout(() => {
|
||||
updateActiveSection();
|
||||
scrollTimeout = null;
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// Header background on scroll
|
||||
function updateHeaderBackground() {
|
||||
const header = document.querySelector('header');
|
||||
if (!header) return;
|
||||
|
||||
if (window.scrollY > 50) {
|
||||
header.style.background = 'rgba(26, 26, 46, 0.98)';
|
||||
} else {
|
||||
header.style.background = 'rgba(26, 26, 46, 0.95)';
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', updateHeaderBackground);
|
||||
|
||||
// Animate elements on scroll (intersection observer)
|
||||
function initScrollAnimations() {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('fade-in');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
});
|
||||
|
||||
// Observe feature cards and other elements
|
||||
document.querySelectorAll('.feature-card, .card, .comparison-card, .testimonial').forEach(el => {
|
||||
el.style.opacity = '0';
|
||||
observer.observe(el);
|
||||
});
|
||||
}
|
||||
|
||||
// Keyboard shortcut for search (/)
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === '/' && !['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName)) {
|
||||
const searchInput = document.getElementById('shortcut-search');
|
||||
if (searchInput) {
|
||||
e.preventDefault();
|
||||
searchInput.focus();
|
||||
}
|
||||
}
|
||||
|
||||
// Escape to close search/nav
|
||||
if (e.key === 'Escape') {
|
||||
const searchInput = document.getElementById('shortcut-search');
|
||||
if (searchInput && document.activeElement === searchInput) {
|
||||
searchInput.blur();
|
||||
searchInput.value = '';
|
||||
filterShortcuts();
|
||||
}
|
||||
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
if (navLinks) {
|
||||
navLinks.classList.remove('active');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// External link handling - open in new tab
|
||||
document.querySelectorAll('a[href^="http"]').forEach(link => {
|
||||
if (!link.hostname.includes(window.location.hostname)) {
|
||||
link.setAttribute('target', '_blank');
|
||||
link.setAttribute('rel', 'noopener noreferrer');
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize on DOM ready
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initScrollAnimations();
|
||||
updateActiveSection();
|
||||
updateHeaderBackground();
|
||||
|
||||
// Set current year in footer if needed
|
||||
const yearSpan = document.querySelector('.current-year');
|
||||
if (yearSpan) {
|
||||
yearSpan.textContent = new Date().getFullYear();
|
||||
}
|
||||
});
|
||||
|
||||
// Print-friendly handling
|
||||
window.addEventListener('beforeprint', () => {
|
||||
// Expand all FAQs for printing
|
||||
document.querySelectorAll('.faq-item').forEach(item => {
|
||||
item.classList.add('active');
|
||||
});
|
||||
|
||||
// Show all tab contents
|
||||
document.querySelectorAll('.tab-content').forEach(content => {
|
||||
content.style.display = 'block';
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('afterprint', () => {
|
||||
// Restore FAQ state
|
||||
document.querySelectorAll('.faq-item').forEach(item => {
|
||||
item.classList.remove('active');
|
||||
});
|
||||
|
||||
// Restore tab state
|
||||
document.querySelectorAll('.tab-content').forEach(content => {
|
||||
content.style.display = '';
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,413 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Complete keyboard shortcuts reference for DWN window manager.">
|
||||
<title>Keyboard Shortcuts - DWN Window Manager</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<a href="index.html" class="logo">
|
||||
<span class="logo-icon">D</span>
|
||||
<span>DWN</span>
|
||||
</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="features.html">Features</a></li>
|
||||
<li><a href="installation.html">Install</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="documentation.html" class="active">Docs</a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="documentation.html">Getting Started</a>
|
||||
<a href="shortcuts.html">Keyboard Shortcuts</a>
|
||||
<a href="configuration.html">Configuration</a>
|
||||
<a href="ai-features.html">AI Features</a>
|
||||
<a href="architecture.html">Architecture</a>
|
||||
</div>
|
||||
</li>
|
||||
<li><a href="https://github.com/dwn/dwn">GitHub</a></li>
|
||||
</ul>
|
||||
<div class="nav-toggle" onclick="toggleNav()">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero" style="padding: 8rem 0 4rem;">
|
||||
<div class="container hero-content">
|
||||
<h1>Keyboard Shortcuts</h1>
|
||||
<p class="subtitle">
|
||||
Complete reference for all DWN keyboard shortcuts.
|
||||
Press <kbd>Super</kbd> + <kbd>S</kbd> in DWN to view this list.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="search-box">
|
||||
<input type="text" id="shortcut-search" placeholder="Search shortcuts..." onkeyup="filterShortcuts()">
|
||||
</div>
|
||||
|
||||
<!-- Application Launchers -->
|
||||
<h2 id="launchers">Application Launchers</h2>
|
||||
<div class="table-wrapper">
|
||||
<table class="shortcuts-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 40%;">Shortcut</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>T</kbd></td>
|
||||
<td>Open terminal (configurable)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Alt</kbd> + <kbd>F2</kbd></td>
|
||||
<td>Open application launcher (dmenu/rofi)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Super</kbd> + <kbd>E</kbd></td>
|
||||
<td>Open file manager (configurable)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Super</kbd> + <kbd>B</kbd></td>
|
||||
<td>Open web browser</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Window Management -->
|
||||
<h2 id="windows">Window Management</h2>
|
||||
<div class="table-wrapper">
|
||||
<table class="shortcuts-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 40%;">Shortcut</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><kbd>Alt</kbd> + <kbd>F4</kbd></td>
|
||||
<td>Close focused window</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Alt</kbd> + <kbd>Tab</kbd></td>
|
||||
<td>Cycle to next window</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>Tab</kbd></td>
|
||||
<td>Cycle to previous window</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Alt</kbd> + <kbd>F10</kbd></td>
|
||||
<td>Toggle maximize</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Alt</kbd> + <kbd>F11</kbd></td>
|
||||
<td>Toggle fullscreen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Super</kbd> + <kbd>F9</kbd></td>
|
||||
<td>Toggle floating mode for focused window</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Workspace Navigation -->
|
||||
<h2 id="workspaces">Workspace Navigation</h2>
|
||||
<div class="table-wrapper">
|
||||
<table class="shortcuts-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 40%;">Shortcut</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><kbd>F1</kbd></td>
|
||||
<td>Switch to workspace 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>F2</kbd></td>
|
||||
<td>Switch to workspace 2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>F3</kbd></td>
|
||||
<td>Switch to workspace 3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>F4</kbd></td>
|
||||
<td>Switch to workspace 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>F5</kbd></td>
|
||||
<td>Switch to workspace 5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>F6</kbd></td>
|
||||
<td>Switch to workspace 6</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>F7</kbd></td>
|
||||
<td>Switch to workspace 7</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>F8</kbd></td>
|
||||
<td>Switch to workspace 8</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>F9</kbd></td>
|
||||
<td>Switch to workspace 9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Shift</kbd> + <kbd>F1</kbd></td>
|
||||
<td>Move focused window to workspace 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Shift</kbd> + <kbd>F2</kbd></td>
|
||||
<td>Move focused window to workspace 2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Shift</kbd> + <kbd>F3</kbd></td>
|
||||
<td>Move focused window to workspace 3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Shift</kbd> + <kbd>F4</kbd></td>
|
||||
<td>Move focused window to workspace 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Shift</kbd> + <kbd>F5</kbd></td>
|
||||
<td>Move focused window to workspace 5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Shift</kbd> + <kbd>F6</kbd></td>
|
||||
<td>Move focused window to workspace 6</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Shift</kbd> + <kbd>F7</kbd></td>
|
||||
<td>Move focused window to workspace 7</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Shift</kbd> + <kbd>F8</kbd></td>
|
||||
<td>Move focused window to workspace 8</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Shift</kbd> + <kbd>F9</kbd></td>
|
||||
<td>Move focused window to workspace 9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Right</kbd></td>
|
||||
<td>Switch to next workspace</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Left</kbd></td>
|
||||
<td>Switch to previous workspace</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Layout Control -->
|
||||
<h2 id="layouts">Layout Control</h2>
|
||||
<div class="table-wrapper">
|
||||
<table class="shortcuts-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 40%;">Shortcut</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><kbd>Super</kbd> + <kbd>Space</kbd></td>
|
||||
<td>Cycle layout mode (tiling → floating → monocle)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Super</kbd> + <kbd>H</kbd></td>
|
||||
<td>Shrink master area</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Super</kbd> + <kbd>L</kbd></td>
|
||||
<td>Expand master area</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Super</kbd> + <kbd>I</kbd></td>
|
||||
<td>Increase master window count</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Super</kbd> + <kbd>D</kbd></td>
|
||||
<td>Decrease master window count</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- AI Features -->
|
||||
<h2 id="ai">AI Features</h2>
|
||||
<p style="color: var(--text-muted); margin-bottom: 1rem;">
|
||||
These shortcuts require API keys to be configured. See <a href="ai-features.html">AI Features</a> for setup.
|
||||
</p>
|
||||
<div class="table-wrapper">
|
||||
<table class="shortcuts-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 40%;">Shortcut</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><kbd>Super</kbd> + <kbd>A</kbd></td>
|
||||
<td>Show AI context analysis</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Super</kbd> + <kbd>Shift</kbd> + <kbd>A</kbd></td>
|
||||
<td>Open AI command palette</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Super</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td>
|
||||
<td>Open Exa semantic web search</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Help & System -->
|
||||
<h2 id="system">Help & System</h2>
|
||||
<div class="table-wrapper">
|
||||
<table class="shortcuts-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 40%;">Shortcut</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><kbd>Super</kbd> + <kbd>S</kbd></td>
|
||||
<td>Show all keyboard shortcuts</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Super</kbd> + <kbd>T</kbd></td>
|
||||
<td>Start/continue interactive tutorial</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><kbd>Super</kbd> + <kbd>Backspace</kbd></td>
|
||||
<td>Quit DWN</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Printable Reference -->
|
||||
<div class="card" style="margin-top: 3rem;">
|
||||
<h3>Printable Quick Reference</h3>
|
||||
<p>Essential shortcuts to memorize when starting with DWN:</p>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 1.5rem;">
|
||||
<div>
|
||||
<h4 style="color: var(--primary); margin-bottom: 0.75rem;">Must Know</h4>
|
||||
<ul style="list-style: none; padding: 0;">
|
||||
<li style="padding: 0.5rem 0; border-bottom: 1px solid var(--border-color);">
|
||||
<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>T</kbd> Terminal
|
||||
</li>
|
||||
<li style="padding: 0.5rem 0; border-bottom: 1px solid var(--border-color);">
|
||||
<kbd>Alt</kbd>+<kbd>F2</kbd> Launcher
|
||||
</li>
|
||||
<li style="padding: 0.5rem 0; border-bottom: 1px solid var(--border-color);">
|
||||
<kbd>Alt</kbd>+<kbd>F4</kbd> Close window
|
||||
</li>
|
||||
<li style="padding: 0.5rem 0; border-bottom: 1px solid var(--border-color);">
|
||||
<kbd>Alt</kbd>+<kbd>Tab</kbd> Switch windows
|
||||
</li>
|
||||
<li style="padding: 0.5rem 0;">
|
||||
<kbd>F1</kbd>-<kbd>F9</kbd> Workspaces
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 style="color: var(--primary); margin-bottom: 0.75rem;">Power User</h4>
|
||||
<ul style="list-style: none; padding: 0;">
|
||||
<li style="padding: 0.5rem 0; border-bottom: 1px solid var(--border-color);">
|
||||
<kbd>Super</kbd>+<kbd>Space</kbd> Change layout
|
||||
</li>
|
||||
<li style="padding: 0.5rem 0; border-bottom: 1px solid var(--border-color);">
|
||||
<kbd>Super</kbd>+<kbd>H</kbd>/<kbd>L</kbd> Resize master
|
||||
</li>
|
||||
<li style="padding: 0.5rem 0; border-bottom: 1px solid var(--border-color);">
|
||||
<kbd>Shift</kbd>+<kbd>F1-9</kbd> Move to workspace
|
||||
</li>
|
||||
<li style="padding: 0.5rem 0; border-bottom: 1px solid var(--border-color);">
|
||||
<kbd>Super</kbd>+<kbd>Shift</kbd>+<kbd>A</kbd> AI command
|
||||
</li>
|
||||
<li style="padding: 0.5rem 0;">
|
||||
<kbd>Super</kbd>+<kbd>S</kbd> Show shortcuts
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-section">
|
||||
<h4>DWN Window Manager</h4>
|
||||
<p style="color: var(--text-muted);">
|
||||
A modern, production-ready X11 window manager with XFCE-like
|
||||
functionality and optional AI integration.
|
||||
</p>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Documentation</h4>
|
||||
<ul>
|
||||
<li><a href="documentation.html">Getting Started</a></li>
|
||||
<li><a href="shortcuts.html">Keyboard Shortcuts</a></li>
|
||||
<li><a href="configuration.html">Configuration</a></li>
|
||||
<li><a href="architecture.html">Architecture</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Resources</h4>
|
||||
<ul>
|
||||
<li><a href="features.html">Features</a></li>
|
||||
<li><a href="installation.html">Installation</a></li>
|
||||
<li><a href="ai-features.html">AI Integration</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn">GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Community</h4>
|
||||
<ul>
|
||||
<li><a href="https://github.com/dwn/dwn/issues">Issue Tracker</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn/discussions">Discussions</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn/blob/main/CONTRIBUTING.md">Contributing</a></li>
|
||||
<li><a href="https://github.com/dwn/dwn/blob/main/LICENSE">License (MIT)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>DWN Window Manager - Open Source under the MIT License</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user