232 lines
6.8 KiB
HTML
232 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; font-src 'self' data:; img-src 'self' data:; connect-src 'self'; base-uri 'self'; form-action 'self' https://defcon.social https://bsky.app;">
|
|
<meta http-equiv="X-Content-Type-Options" content="nosniff">
|
|
<link rel="stylesheet" href="../assets/css/style.css">
|
|
<link rel="icon" type="image/x-icon" href="../favicon.ico">
|
|
<script>
|
|
// Apply theme immediately to prevent flash
|
|
(function() {
|
|
const theme = localStorage.getItem('theme') ||
|
|
(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
})();
|
|
</script>
|
|
<title>waybar Cheatsheet - Cheatsheets - Launch Pad</title>
|
|
</head>
|
|
<body>
|
|
<button class="theme-toggle" id="themeToggle" aria-label="Toggle dark mode">
|
|
<svg class="theme-icon theme-icon-moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
|
<svg class="theme-icon theme-icon-sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: none;"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
|
|
</button>
|
|
<br/><br/>
|
|
<div class="name">
|
|
__ _______________________ _________._________________________
|
|
\_ _____/ \______ \ / _ \ / _____/ / _____/ | | \_ _____/
|
|
| __) | _/ / /_\ \ / \ ___ / \ ___ | | | __)_
|
|
| \ | | \ / | \ \ \_\ \ \ \_\ \ | |___ | \
|
|
\___ / |____|_ / \____|__ / \______ / \______ / |_______ \ /_______ /
|
|
\/ \/ \/ \/ \/ \/ \/
|
|
</div>
|
|
<div class="blog-page-header">
|
|
<div class="blog-header-content">
|
|
<a href="/cheatsheets" class="back-link" title="Back to Cheatsheets">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24" class="home-icon"><path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
|
|
</a>
|
|
<h1 class="blog-page-title">waybar Cheatsheet</h1>
|
|
</div>
|
|
</div>
|
|
<div class="blog-post-container">
|
|
<div class="blog-posts-container" style="max-width: 900px; margin: 0 auto;">
|
|
<div class="blog-post">
|
|
<div class="blog-post-content">
|
|
<p><a href="index.html">← Back to cheatsheets</a></p>
|
|
<p><a href="../index.html">← Home</a></p>
|
|
<hr>
|
|
<p>waybar is a highly customizable status bar for Wayland compositors. Displays system information, application status, and custom modules with JSON configuration and CSS styling.</p>
|
|
<hr>
|
|
<h2>Basic Usage</h2>
|
|
<ul>
|
|
<li>waybar - Start waybar</li>
|
|
</ul>
|
|
<ul>
|
|
<li>waybar -c config.json - Custom config</li>
|
|
</ul>
|
|
<ul>
|
|
<li>waybar -s style.css - Custom style</li>
|
|
</ul>
|
|
<ul>
|
|
<li>waybar -l verbose - Verbose logging</li>
|
|
</ul>
|
|
<hr>
|
|
<h2>Configuration</h2>
|
|
<ul>
|
|
<li>~/.config/waybar/config - Main config file</li>
|
|
</ul>
|
|
<ul>
|
|
<li>~/.config/waybar/style.css - CSS styling</li>
|
|
</ul>
|
|
<ul>
|
|
<li>JSON format for configuration</li>
|
|
</ul>
|
|
<ul>
|
|
<li>CSS for styling</li>
|
|
</ul>
|
|
<hr>
|
|
<h2>Common Modules</h2>
|
|
<ul>
|
|
<li>battery - Battery status</li>
|
|
</ul>
|
|
<ul>
|
|
<li>clock - Date and time</li>
|
|
</ul>
|
|
<ul>
|
|
<li>cpu - CPU usage</li>
|
|
</ul>
|
|
<ul>
|
|
<li>memory - Memory usage</li>
|
|
</ul>
|
|
<ul>
|
|
<li>network - Network status</li>
|
|
</ul>
|
|
<ul>
|
|
<li>pulseaudio - Audio control</li>
|
|
</ul>
|
|
<ul>
|
|
<li>tray - System tray</li>
|
|
</ul>
|
|
<ul>
|
|
<li>workspaces - Window workspaces</li>
|
|
</ul>
|
|
<ul>
|
|
<li>window - Active window</li>
|
|
</ul>
|
|
<ul>
|
|
<li>idle_inhibitor - Idle inhibitor</li>
|
|
</ul>
|
|
<ul>
|
|
<li>temperature - CPU temperature</li>
|
|
</ul>
|
|
<ul>
|
|
<li>backlight - Screen brightness</li>
|
|
</ul>
|
|
<ul>
|
|
<li>disk - Disk usage</li>
|
|
</ul>
|
|
<ul>
|
|
<li>custom/script - Custom scripts</li>
|
|
</ul>
|
|
<hr>
|
|
<h2>Module Options</h2>
|
|
<ul>
|
|
<li>format - Display format</li>
|
|
</ul>
|
|
<ul>
|
|
<li>format-alt - Alternative format</li>
|
|
</ul>
|
|
<ul>
|
|
<li>tooltip - Tooltip text</li>
|
|
</ul>
|
|
<ul>
|
|
<li>interval - Update interval (seconds)</li>
|
|
</ul>
|
|
<ul>
|
|
<li>max-length - Maximum text length</li>
|
|
</ul>
|
|
<ul>
|
|
<li>min-length - Minimum text length</li>
|
|
</ul>
|
|
<ul>
|
|
<li>on-click - Click action</li>
|
|
</ul>
|
|
<ul>
|
|
<li>on-click-middle - Middle click action</li>
|
|
</ul>
|
|
<ul>
|
|
<li>on-click-right - Right click action</li>
|
|
</ul>
|
|
<ul>
|
|
<li>on-scroll-up - Scroll up action</li>
|
|
</ul>
|
|
<ul>
|
|
<li>on-scroll-down - Scroll down action</li>
|
|
</ul>
|
|
<hr>
|
|
<h2>Common Examples</h2>
|
|
<h3>Basic Config</h3>
|
|
<pre><code>{
|
|
"layer": "top",
|
|
"position": "top",
|
|
"modules-left": ["hyprland/workspaces"],
|
|
"modules-center": ["clock"],
|
|
"modules-right": ["battery", "network", "pulseaudio", "tray"]
|
|
}</code></pre>
|
|
<p>Basic waybar configuration.</p>
|
|
<h3>Clock Module</h3>
|
|
<pre><code>"clock": {
|
|
"format": "{:%Y-%m-%d %H:%M}",
|
|
"tooltip-format": "{:%A %B %d %Y}"
|
|
}</code></pre>
|
|
<p>Custom clock format.</p>
|
|
<h3>Battery Module</h3>
|
|
<pre><code>"battery": {
|
|
"format": "{capacity}% {icon}",
|
|
"format-charging": "{capacity}% {icon}",
|
|
"states": {
|
|
"warning": 30,
|
|
"critical": 15
|
|
}
|
|
}</code></pre>
|
|
<p>Battery with warnings.</p>
|
|
<h3>Custom Script</h3>
|
|
<pre><code>"custom/script": {
|
|
"format": "{}",
|
|
"exec": "echo 'Custom'",
|
|
"interval": 5
|
|
}</code></pre>
|
|
<p>Custom script module.</p>
|
|
<h3>CPU Module</h3>
|
|
<pre><code>"cpu": {
|
|
"format": "CPU: {usage}%",
|
|
"interval": 2
|
|
}</code></pre>
|
|
<p>CPU usage display.</p>
|
|
<hr>
|
|
<h2>Tips</h2>
|
|
<ul>
|
|
<li>Configure in ~/.config/waybar/config</li>
|
|
</ul>
|
|
<ul>
|
|
<li>Style with CSS in ~/.config/waybar/style.css</li>
|
|
</ul>
|
|
<ul>
|
|
<li>Use custom/script for custom modules</li>
|
|
</ul>
|
|
<ul>
|
|
<li>Format strings support placeholders</li>
|
|
</ul>
|
|
<ul>
|
|
<li>Use on-click for interactive modules</li>
|
|
</ul>
|
|
<ul>
|
|
<li>Adjust interval for update frequency</li>
|
|
</ul>
|
|
<ul>
|
|
<li>Essential for Wayland status bars</li>
|
|
</ul>
|
|
<ul>
|
|
<li>Highly customizable and extensible</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script async type="text/javascript" src="../blog/analytics.js"></script>
|
|
<script src="../theme.js"></script>
|
|
</body>
|
|
</html>
|
|
|