<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title>dead airspace</title><link>https://dharmx.is-a.dev/</link><description>A repository of my ramblings, findings and projects. Hope you find these useful in some way.</description><generator>Hugo -- gohugo.io</generator><language>en</language><managingEditor>dharmx.dev@gmail.com (dharmx)</managingEditor><webMaster>dharmx.dev@gmail.com (dharmx)</webMaster><lastBuildDate>Wed, 06 Mar 2024 17:49:05 +0530</lastBuildDate><atom:link href="https://dharmx.is-a.dev/index.xml" rel="self" type="application/rss+xml"/><item><title>Neovim Pastebin</title><link>https://dharmx.is-a.dev/nvim-paste/</link><pubDate>Wed, 06 Mar 2024 17:49:05 +0530</pubDate><author><name>dharmx</name></author><guid>https://dharmx.is-a.dev/nvim-paste/</guid><description><![CDATA[<div class="featured-image">
                <img src="/nvim-paste/images/featured-image.png" referrerpolicy="no-referrer">
            </div><h1 id="introduction" class="headerLink">
    <a href="#introduction" class="header-mark"></a>Introduction</h1><p>Recently, I have been sharing a lot code snippets and other textual 😏 files over the
internet. So, currently I just run a <a href="https://curl.se/" target="_blank" rel="noopener noreferrer">curl</a> command and then upload
the file to <a href="https://0x0.st" target="_blank" rel="noopener noreferrer">https://0x0.st</a>.</p>
<p>The command looks like this: <code>curl -F'file=@/absolute/path/to/file' 0x0.st | xclip</code>.
We will be just transforming this command into a Neovim utility.</p>
<p><div class="details admonition info">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-info-circle fa-fw"></i>Other similar plugins.<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content"><!--{{{-->
<p>So, before writing this I did try several other plugins. I did not like any but, maybe
you will.</p>
<ul>
<li>There is <a href="https://github.com/rktjmp/paperplanes.nvim" target="_blank" rel="noopener noreferrer">paperplanes.nvim</a> but it is
a bit too feature-rich. It supports multiple backends and other fringe features that
I do not really need.</li>
<li>There is <a href="https://github.com/mattn/pastebin-vim" target="_blank" rel="noopener noreferrer">pastebin-vim</a> which is also cumbersome
to use as you&rsquo;d need to generate API keys first.</li>
<li>Then there&rsquo;s <a href="https://github.com/Sanix-Darker/snips.nvim" target="_blank" rel="noopener noreferrer">snips.nvim</a> which is the best
so far. But again I want something minimal.</li>
<li>Lastly, there is <a href="https://github.com/sefeng211/vim-pastebins/" target="_blank" rel="noopener noreferrer">vim-pastebins</a> which I have not tried.</li>
</ul>
</div>
        </div>
    </div><!--}}}--></p>
<h2 id="plenary" class="headerLink">
    <a href="#plenary" class="header-mark"></a>Plenary</h2><p>We will be using the well-known <a href="https://github.com/nvim-lua/plenary.nvim" target="_blank" rel="noopener noreferrer">plenary.nvim</a>
library plugin. The only utilities we need from this are the <code>Job</code> and <code>Path</code> class.
Which just basically <a href="https://neovim.io/doc/user/luvref.html#uv.spawn%28%29" target="_blank" rel="noopener noreferrer">spawns</a>
an async task in the background and calls an <code>on_exit</code> callback function when
the task is done. And, the other is just the Lua version of Python&rsquo;s
<a href="https://realpython.com/python-pathlib/" target="_blank" rel="noopener noreferrer">pathlib</a>.</p>
<p>The readme has examples of <code>Job</code> but here is an example anyway.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-0-1"><a class="lnlinks" href="#hl-0-1"> 1</a>
</span><span class="lnt" id="hl-0-2"><a class="lnlinks" href="#hl-0-2"> 2</a>
</span><span class="lnt" id="hl-0-3"><a class="lnlinks" href="#hl-0-3"> 3</a>
</span><span class="lnt" id="hl-0-4"><a class="lnlinks" href="#hl-0-4"> 4</a>
</span><span class="lnt" id="hl-0-5"><a class="lnlinks" href="#hl-0-5"> 5</a>
</span><span class="lnt" id="hl-0-6"><a class="lnlinks" href="#hl-0-6"> 6</a>
</span><span class="lnt" id="hl-0-7"><a class="lnlinks" href="#hl-0-7"> 7</a>
</span><span class="lnt" id="hl-0-8"><a class="lnlinks" href="#hl-0-8"> 8</a>
</span><span class="lnt" id="hl-0-9"><a class="lnlinks" href="#hl-0-9"> 9</a>
</span><span class="lnt" id="hl-0-10"><a class="lnlinks" href="#hl-0-10">10</a>
</span><span class="lnt" id="hl-0-11"><a class="lnlinks" href="#hl-0-11">11</a>
</span><span class="lnt" id="hl-0-12"><a class="lnlinks" href="#hl-0-12">12</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-lua" data-lang="lua"><span class="line"><span class="cl"><span class="kd">local</span> <span class="n">Job</span> <span class="o">=</span> <span class="n">require</span><span class="p">(</span><span class="s2">&#34;plenary.job&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="n">Job</span><span class="p">:</span><span class="n">new</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">  <span class="n">command</span> <span class="o">=</span> <span class="s2">&#34;ls&#34;</span>
</span></span><span class="line"><span class="cl">  <span class="n">args</span> <span class="o">=</span> <span class="p">{</span> <span class="s2">&#34;--recursive&#34;</span> <span class="p">},</span>
</span></span><span class="line"><span class="cl">  <span class="n">on_exit</span> <span class="o">=</span> <span class="n">vim.schedule_wrap</span><span class="p">(</span><span class="kr">function</span><span class="p">(</span><span class="n">self</span><span class="p">,</span> <span class="n">code</span><span class="p">,</span> <span class="n">_</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="kr">if</span> <span class="n">code</span> <span class="o">~=</span> <span class="mi">0</span> <span class="kr">then</span>
</span></span><span class="line"><span class="cl">      <span class="n">vim.notify</span><span class="p">(</span><span class="n">vim.inspect</span><span class="p">(</span><span class="n">self</span><span class="p">:</span><span class="n">stderr_result</span><span class="p">()))</span>
</span></span><span class="line"><span class="cl">      <span class="kr">return</span>
</span></span><span class="line"><span class="cl">    <span class="kr">end</span>
</span></span><span class="line"><span class="cl">    <span class="n">vim.notify</span><span class="p">(</span><span class="n">vim.inspect</span><span class="p">(</span><span class="n">self</span><span class="p">:</span><span class="n">result</span><span class="p">()))</span>
</span></span><span class="line"><span class="cl">  <span class="kr">end</span><span class="p">),</span>
</span></span><span class="line"><span class="cl"><span class="p">})</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p><div class="details admonition info">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-info-circle fa-fw"></i>Alternative APIs.<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content"><!--{{{-->
<p>Following are alternative APIs to plenary&rsquo;s <code>Job</code> 💀.</p>
<ul>
<li><a href="https://neovim.io/doc/user/lua.html#vim.system%28%29" target="_blank" rel="noopener noreferrer"><samp>:help vim.system()</samp></a></li>
<li><a href="https://neovim.io/doc/user/luvref.html#uv.spawn%28%29" target="_blank" rel="noopener noreferrer"><samp>:help uv.spawn()</samp></a></li>
<li><a href="https://neovim.io/doc/user/job_control.html" target="_blank" rel="noopener noreferrer"><samp>:help job-control</samp></a></li>
</ul>
<p>Following are alternative APIs to plenary&rsquo;s <code>Path</code> 😢.</p>
<ul>
<li><a href="https://vimhelp.org/builtin.txt.html#exists%28%29" target="_blank" rel="noopener noreferrer"><samp>:help exists()</samp></a></li>
<li><a href="https://vimhelp.org/builtin.txt.html#glob%28%29" target="_blank" rel="noopener noreferrer"><samp>:help :glob()</samp></a></li>
<li><a href="https://vimhelp.org/builtin.txt.html#readfile%28%29" target="_blank" rel="noopener noreferrer"><samp>:help readfile()</samp></a></li>
<li><a href="https://vimhelp.org/builtin.txt.html#writefile%28%29" target="_blank" rel="noopener noreferrer"><samp>:help writefile()</samp></a></li>
<li><a href="https://vimhelp.org/builtin.txt.html#delete%28%29" target="_blank" rel="noopener noreferrer"><samp>:help delete()</samp></a></li>
<li><a href="https://neovim.io/doc/user/luvref.html#uv.fs_unlink%28%29" target="_blank" rel="noopener noreferrer"><samp>:help uv.fs_unlink()</samp></a>: Delete file.</li>
<li><a href="https://neovim.io/doc/user/luvref.html#uv.fs_realpath%28%29" target="_blank" rel="noopener noreferrer"><samp>:help uv.fs_realpath()</samp></a>: Existence of a path.</li>
<li><a href="https://neovim.io/doc/user/luvref.html#uv.fs_read%28%29" target="_blank" rel="noopener noreferrer"><samp>:help uv.fs_read()</samp></a></li>
<li><a href="https://neovim.io/doc/user/luvref.html#uv.fs_write%28%29" target="_blank" rel="noopener noreferrer"><samp>:help uv.fs_write()</samp></a></li>
<li><a href="https://neovim.io/doc/user/luvref.html#uv.fs_open%28%29" target="_blank" rel="noopener noreferrer"><samp>:help uv.fs_open()</samp></a></li>
</ul>
<p>A nice little exercise would be to create your version of this script but by using
these alternative APIs instead.</p>
</div>
        </div>
    </div><!--}}}--></p>
<h2 id="procedure" class="headerLink">
    <a href="#procedure" class="header-mark"></a>Procedure</h2><p>Here&rsquo;s a list of features that I primarily want.</p>
<ul>
<li>Ability to upload a file.</li>
<li>Ability to upload specific lines from a file.</li>
<li>Ability to remove the uploaded item.</li>
<li>Ability to cache uploaded file into a JSON file.</li>
</ul>
<p>As for going about implementing the upload feature for selected text, we would need to copy
that selected text or, file and paste those contents into another temporary file and <em>then</em>
upload that file to the pastebin website.</p>
<h3 id="configuration" class="headerLink">
    <a href="#configuration" class="header-mark"></a>Configuration</h3><p>We just need defaults for paths beforehand. We would need the following paths.</p>
<ul>
<li><code>db_path</code>: Path where all previously upload request responses will be saved.</li>
<li><code>tmp_path</code>: This is only needed for selected text upload.</li>
<li><code>dump_path</code>: Path to where all of the response headers will be written to by CURL.</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-1-1"><a class="lnlinks" href="#hl-1-1">1</a>
</span><span class="lnt" id="hl-1-2"><a class="lnlinks" href="#hl-1-2">2</a>
</span><span class="lnt" id="hl-1-3"><a class="lnlinks" href="#hl-1-3">3</a>
</span><span class="lnt" id="hl-1-4"><a class="lnlinks" href="#hl-1-4">4</a>
</span><span class="lnt" id="hl-1-5"><a class="lnlinks" href="#hl-1-5">5</a>
</span><span class="lnt" id="hl-1-6"><a class="lnlinks" href="#hl-1-6">6</a>
</span><span class="lnt" id="hl-1-7"><a class="lnlinks" href="#hl-1-7">7</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-lua" data-lang="lua"><span class="line"><span class="cl"><span class="kd">local</span> <span class="n">M</span> <span class="o">=</span> <span class="p">{}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">M.config</span> <span class="o">=</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="n">db_path</span> <span class="o">=</span> <span class="n">vim.fn</span><span class="p">.</span><span class="n">stdpath</span><span class="p">(</span><span class="s2">&#34;state&#34;</span><span class="p">)</span> <span class="o">..</span> <span class="s2">&#34;/paste.db.json&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="n">tmp_path</span> <span class="o">=</span> <span class="s2">&#34;/tmp/paste&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="n">dump_path</span> <span class="o">=</span> <span class="s2">&#34;/tmp/dump&#34;</span><span class="p">,</span> <span class="c1">-- needs to match with the scripts dump path (explained later)</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>As, for the <code>setup</code> function we now need to extend the default configuration table with the
current one (the one i.e. passed in through the setup function). We do this because
if we ever decide to change the configuration on the fly, then this will be useful and
we won&rsquo;t need to reload Neovim again.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-2-1"><a class="lnlinks" href="#hl-2-1"> 1</a>
</span><span class="lnt" id="hl-2-2"><a class="lnlinks" href="#hl-2-2"> 2</a>
</span><span class="lnt" id="hl-2-3"><a class="lnlinks" href="#hl-2-3"> 3</a>
</span><span class="lnt" id="hl-2-4"><a class="lnlinks" href="#hl-2-4"> 4</a>
</span><span class="lnt" id="hl-2-5"><a class="lnlinks" href="#hl-2-5"> 5</a>
</span><span class="lnt" id="hl-2-6"><a class="lnlinks" href="#hl-2-6"> 6</a>
</span><span class="lnt" id="hl-2-7"><a class="lnlinks" href="#hl-2-7"> 7</a>
</span><span class="lnt" id="hl-2-8"><a class="lnlinks" href="#hl-2-8"> 8</a>
</span><span class="lnt" id="hl-2-9"><a class="lnlinks" href="#hl-2-9"> 9</a>
</span><span class="lnt" id="hl-2-10"><a class="lnlinks" href="#hl-2-10">10</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-lua" data-lang="lua"><span class="line"><span class="cl"><span class="kr">function</span> <span class="nc">M</span><span class="p">.</span><span class="nf">setup</span><span class="p">(</span><span class="n">options</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">  <span class="n">options</span> <span class="o">=</span> <span class="n">vim.F</span><span class="p">.</span><span class="n">if_nil</span><span class="p">(</span><span class="n">options</span><span class="p">,</span> <span class="p">{})</span>
</span></span><span class="line"><span class="cl">  <span class="n">M.config</span> <span class="o">=</span> <span class="n">vim.tbl_deep_extend</span><span class="p">(</span><span class="s2">&#34;keep&#34;</span><span class="p">,</span> <span class="n">options</span><span class="p">,</span> <span class="n">M.config</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">  <span class="n">M._db</span> <span class="o">=</span> <span class="n">Path</span><span class="p">:</span><span class="n">new</span><span class="p">(</span><span class="n">M.config</span><span class="p">.</span><span class="n">db_path</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">  <span class="n">M._dump</span> <span class="o">=</span> <span class="n">Path</span><span class="p">:</span><span class="n">new</span><span class="p">(</span><span class="n">M.config</span><span class="p">.</span><span class="n">dump_path</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">  <span class="n">M._path</span> <span class="o">=</span> <span class="n">Path</span><span class="p">:</span><span class="n">new</span><span class="p">(</span><span class="n">M.config</span><span class="p">.</span><span class="n">tmp_path</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">  <span class="n">M._responses</span> <span class="o">=</span> <span class="p">{}</span>
</span></span><span class="line"><span class="cl">  <span class="c1">-- load db entries (persist)</span>
</span></span><span class="line"><span class="cl">  <span class="kr">if</span> <span class="n">M._db</span><span class="p">:</span><span class="n">exists</span><span class="p">()</span> <span class="kr">then</span> <span class="n">M._responses</span> <span class="o">=</span> <span class="n">vim.json</span><span class="p">.</span><span class="n">decode</span><span class="p">(</span><span class="n">M._db</span><span class="p">:</span><span class="n">read</span><span class="p">())</span> <span class="kr">end</span>
</span></span><span class="line"><span class="cl"><span class="kr">end</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>After this, we initialize some private tables for several caching and file IO operations.</p>
<ul>
<li>
<p><code>M._response</code>: This table is used for storing responses. For instance a response from <a href="https://0x0.st" target="_blank" rel="noopener noreferrer">https://0x0.st</a>
might look like the following.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-3-1"><a class="lnlinks" href="#hl-3-1"> 1</a>
</span><span class="lnt" id="hl-3-2"><a class="lnlinks" href="#hl-3-2"> 2</a>
</span><span class="lnt" id="hl-3-3"><a class="lnlinks" href="#hl-3-3"> 3</a>
</span><span class="lnt" id="hl-3-4"><a class="lnlinks" href="#hl-3-4"> 4</a>
</span><span class="lnt" id="hl-3-5"><a class="lnlinks" href="#hl-3-5"> 5</a>
</span><span class="lnt" id="hl-3-6"><a class="lnlinks" href="#hl-3-6"> 6</a>
</span><span class="lnt" id="hl-3-7"><a class="lnlinks" href="#hl-3-7"> 7</a>
</span><span class="lnt" id="hl-3-8"><a class="lnlinks" href="#hl-3-8"> 8</a>
</span><span class="lnt" id="hl-3-9"><a class="lnlinks" href="#hl-3-9"> 9</a>
</span><span class="lnt" id="hl-3-10"><a class="lnlinks" href="#hl-3-10">10</a>
</span><span class="lnt" id="hl-3-11"><a class="lnlinks" href="#hl-3-11">11</a>
</span><span class="lnt" id="hl-3-12"><a class="lnlinks" href="#hl-3-12">12</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">HTTP/2 200 
</span></span><span class="line"><span class="cl">server: nginx
</span></span><span class="line"><span class="cl">date: Mon, 11 Mar 2024 16:06:07 GMT
</span></span><span class="line"><span class="cl">content-type: text/html; charset=utf-8
</span></span><span class="line"><span class="cl">content-length: 24
</span></span><span class="line"><span class="cl">x-expires: 1741668317786
</span></span><span class="line"><span class="cl">strict-transport-security: max-age=63072000; includeSubDomains; preload
</span></span><span class="line"><span class="cl">x-frame-options: sameorigin
</span></span><span class="line"><span class="cl">x-content-type-options: nosniff
</span></span><span class="line"><span class="cl">x-xss-protection: 1; mode=block
</span></span><span class="line"><span class="cl">referrer-policy: no-referrer, strict-origin-when-cross-origin
</span></span><span class="line"><span class="cl">...
</span></span></code></pre></td></tr></table>
</div>
</div><p>We would then parse this to a <samp>key: value</samp> pair value and then encode
these into a JSON format. See: <a href="#hl-5-1" title="Response prettying function" rel=""><samp>M.pretty()</samp></a>.</p>
</li>
<li>
<p><code>M._dump</code>: <code>Path</code> instance of <code>M.config.dump_path</code> where responses from CURL will
be written to (by CURL itself) before parsing into a <samp>key: value</samp>.
Again, we will be reading and writing to it a lot so, it&rsquo;s better to make it
a pair value.</p>
</li>
<li>
<p><code>M._db</code>: <code>Path</code> instance of <code>M.config.db_path</code>.</p>
</li>
<li>
<p><code>M.tmp_path</code>: The path where currently selected buffer contents will be copied to.</p>
</li>
</ul>
<h3 id="upload" class="headerLink">
    <a href="#upload" class="header-mark"></a>Upload</h3><p>So for this we just need to follow the following steps.</p>
<ul>
<li>Prepare the file <code>M._path</code> for upload by writing all the buffer contents to it.</li>
<li>Then upload the newly updated file to <a href="https://0x0.st" target="_blank" rel="noopener noreferrer">https://0x0.st</a> using a job API.</li>
<li>Save the returned link into the clipboard.</li>
<li>Save the response dumped into <code>M._dump</code> to the <code>M._responses</code> table.</li>
<li>Clean <code>M._path</code> and <code>M._dump</code>.</li>
<li>Save all recorded <code>M._responses</code> upto this point to <code>M._db</code> path.</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-4-1"><a class="lnlinks" href="#hl-4-1"> 1</a>
</span><span class="lnt" id="hl-4-2"><a class="lnlinks" href="#hl-4-2"> 2</a>
</span><span class="lnt" id="hl-4-3"><a class="lnlinks" href="#hl-4-3"> 3</a>
</span><span class="lnt" id="hl-4-4"><a class="lnlinks" href="#hl-4-4"> 4</a>
</span><span class="lnt" id="hl-4-5"><a class="lnlinks" href="#hl-4-5"> 5</a>
</span><span class="lnt" id="hl-4-6"><a class="lnlinks" href="#hl-4-6"> 6</a>
</span><span class="lnt" id="hl-4-7"><a class="lnlinks" href="#hl-4-7"> 7</a>
</span><span class="lnt" id="hl-4-8"><a class="lnlinks" href="#hl-4-8"> 8</a>
</span><span class="lnt" id="hl-4-9"><a class="lnlinks" href="#hl-4-9"> 9</a>
</span><span class="lnt" id="hl-4-10"><a class="lnlinks" href="#hl-4-10">10</a>
</span><span class="lnt" id="hl-4-11"><a class="lnlinks" href="#hl-4-11">11</a>
</span><span class="lnt" id="hl-4-12"><a class="lnlinks" href="#hl-4-12">12</a>
</span><span class="lnt" id="hl-4-13"><a class="lnlinks" href="#hl-4-13">13</a>
</span><span class="lnt" id="hl-4-14"><a class="lnlinks" href="#hl-4-14">14</a>
</span><span class="lnt" id="hl-4-15"><a class="lnlinks" href="#hl-4-15">15</a>
</span><span class="lnt" id="hl-4-16"><a class="lnlinks" href="#hl-4-16">16</a>
</span><span class="lnt" id="hl-4-17"><a class="lnlinks" href="#hl-4-17">17</a>
</span><span class="lnt" id="hl-4-18"><a class="lnlinks" href="#hl-4-18">18</a>
</span><span class="lnt" id="hl-4-19"><a class="lnlinks" href="#hl-4-19">19</a>
</span><span class="lnt" id="hl-4-20"><a class="lnlinks" href="#hl-4-20">20</a>
</span><span class="lnt" id="hl-4-21"><a class="lnlinks" href="#hl-4-21">21</a>
</span><span class="lnt" id="hl-4-22"><a class="lnlinks" href="#hl-4-22">22</a>
</span><span class="lnt" id="hl-4-23"><a class="lnlinks" href="#hl-4-23">23</a>
</span><span class="lnt" id="hl-4-24"><a class="lnlinks" href="#hl-4-24">24</a>
</span><span class="lnt" id="hl-4-25"><a class="lnlinks" href="#hl-4-25">25</a>
</span><span class="lnt" id="hl-4-26"><a class="lnlinks" href="#hl-4-26">26</a>
</span><span class="lnt" id="hl-4-27"><a class="lnlinks" href="#hl-4-27">27</a>
</span><span class="lnt" id="hl-4-28"><a class="lnlinks" href="#hl-4-28">28</a>
</span><span class="lnt" id="hl-4-29"><a class="lnlinks" href="#hl-4-29">29</a>
</span><span class="lnt" id="hl-4-30"><a class="lnlinks" href="#hl-4-30">30</a>
</span><span class="lnt" id="hl-4-31"><a class="lnlinks" href="#hl-4-31">31</a>
</span><span class="lnt" id="hl-4-32"><a class="lnlinks" href="#hl-4-32">32</a>
</span><span class="lnt" id="hl-4-33"><a class="lnlinks" href="#hl-4-33">33</a>
</span><span class="lnt" id="hl-4-34"><a class="lnlinks" href="#hl-4-34">34</a>
</span><span class="lnt" id="hl-4-35"><a class="lnlinks" href="#hl-4-35">35</a>
</span><span class="lnt" id="hl-4-36"><a class="lnlinks" href="#hl-4-36">36</a>
</span><span class="lnt" id="hl-4-37"><a class="lnlinks" href="#hl-4-37">37</a>
</span><span class="lnt" id="hl-4-38"><a class="lnlinks" href="#hl-4-38">38</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-lua" data-lang="lua"><span class="line"><span class="cl"><span class="kr">function</span> <span class="nc">M</span><span class="p">.</span><span class="nf">paste</span><span class="p">(</span><span class="n">contents</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">  <span class="n">M._path</span><span class="p">:</span><span class="n">write</span><span class="p">(</span><span class="n">table.concat</span><span class="p">(</span><span class="n">contents</span><span class="p">,</span> <span class="s2">&#34;</span><span class="se">\n</span><span class="s2">&#34;</span><span class="p">),</span> <span class="s2">&#34;w&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">  <span class="n">Job</span><span class="p">:</span><span class="n">new</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">    <span class="n">command</span> <span class="o">=</span> <span class="s2">&#34;curl&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="n">args</span> <span class="o">=</span> <span class="p">{</span> <span class="c1">-- read the manpage - I can&#39;t be fucked.</span>
</span></span><span class="line"><span class="cl">      <span class="s2">&#34;--silent&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">     <span class="s2">&#34;--show-error&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">     <span class="s2">&#34;--location&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">     <span class="s2">&#34;--dump-header&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">      <span class="n">M._dump</span><span class="p">.</span><span class="n">filename</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">     <span class="s2">&#34;--compressed&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">     <span class="s2">&#34;--request&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">     <span class="s2">&#34;POST&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">     <span class="s2">&#34;--form&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">      <span class="n">string.format</span><span class="p">(</span><span class="s2">&#34;file=@%s&#34;</span><span class="p">,</span> <span class="n">M._path</span><span class="p">.</span><span class="n">filename</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">     <span class="s2">&#34;https://0x0.st&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="p">},</span>
</span></span><span class="line"><span class="cl">    <span class="n">on_exit</span> <span class="o">=</span> <span class="n">vim.schedule_wrap</span><span class="p">(</span><span class="kr">function</span><span class="p">(</span><span class="n">self</span><span class="p">,</span> <span class="n">code</span><span class="p">,</span> <span class="n">_</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">      <span class="kr">if</span> <span class="n">code</span> <span class="o">~=</span> <span class="mi">0</span> <span class="kr">then</span> <span class="kr">return</span> <span class="kr">end</span>
</span></span><span class="line"><span class="cl">      <span class="kd">local</span> <span class="n">body</span> <span class="o">=</span> <span class="n">self</span><span class="p">:</span><span class="n">result</span><span class="p">()[</span><span class="mi">1</span><span class="p">]</span> <span class="c1">-- [1] because it only returns a link</span>
</span></span><span class="line"><span class="cl">      <span class="kd">local</span> <span class="n">pretty</span> <span class="o">=</span> <span class="n">M.pretty</span><span class="p">(</span><span class="n">M._dump</span><span class="p">:</span><span class="n">read</span><span class="p">())</span> <span class="c1">-- defined below</span>
</span></span><span class="line"><span class="cl">      <span class="n">M._responses</span><span class="p">[</span><span class="n">body</span><span class="p">]</span> <span class="o">=</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">        <span class="n">body</span> <span class="o">=</span> <span class="n">body</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">headers</span> <span class="o">=</span> <span class="n">pretty.headers</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">code</span> <span class="o">=</span> <span class="n">pretty.code</span>
</span></span><span class="line"><span class="cl">      <span class="p">}</span>
</span></span><span class="line"><span class="cl">      <span class="c1">-- clean used paths (optional)</span>
</span></span><span class="line"><span class="cl">      <span class="n">M._path</span><span class="p">:</span><span class="n">rm</span><span class="p">()</span>
</span></span><span class="line"><span class="cl">      <span class="n">M._dump</span><span class="p">:</span><span class="n">rm</span><span class="p">()</span>
</span></span><span class="line"><span class="cl">      <span class="n">vim.fn</span><span class="p">.</span><span class="n">setreg</span><span class="p">(</span><span class="s2">&#34;+&#34;</span><span class="p">,</span> <span class="n">body</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">      <span class="n">vim.api</span><span class="p">.</span><span class="n">nvim_notify</span><span class="p">(</span><span class="s2">&#34;+pastebin: &#34;</span> <span class="o">..</span> <span class="n">body</span><span class="p">,</span> <span class="n">vim.log</span><span class="p">.</span><span class="n">levels.INFO</span><span class="p">,</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">        <span class="n">title</span> <span class="o">=</span> <span class="s2">&#34;pastebin&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">icon</span> <span class="o">=</span> <span class="s2">&#34; &#34;</span>
</span></span><span class="line"><span class="cl">      <span class="p">})</span>
</span></span><span class="line"><span class="cl">      <span class="n">M._db</span><span class="p">:</span><span class="n">write</span><span class="p">(</span><span class="n">vim.json</span><span class="p">.</span><span class="n">encode</span><span class="p">(</span><span class="n">M._responses</span><span class="p">),</span> <span class="s2">&#34;w&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="kr">end</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">  <span class="p">}):</span><span class="n">start</span><span class="p">()</span>
</span></span><span class="line"><span class="cl"><span class="kr">end</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>CURL returns results in a <a href="#hl-3-1" title="See CURL response output" rel="">weird</a> format,
so next we will be writing a <code>M.pretty</code> function that will convert these values into a
Lua table. Which then can be encoded to a JSON format.</p>
<blockquote>
<p>You could define <code>M.pretty</code> as a local function if you want.</p>
</blockquote>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-5-1"><a class="lnlinks" href="#hl-5-1"> 1</a>
</span><span class="lnt" id="hl-5-2"><a class="lnlinks" href="#hl-5-2"> 2</a>
</span><span class="lnt" id="hl-5-3"><a class="lnlinks" href="#hl-5-3"> 3</a>
</span><span class="lnt" id="hl-5-4"><a class="lnlinks" href="#hl-5-4"> 4</a>
</span><span class="lnt" id="hl-5-5"><a class="lnlinks" href="#hl-5-5"> 5</a>
</span><span class="lnt" id="hl-5-6"><a class="lnlinks" href="#hl-5-6"> 6</a>
</span><span class="lnt" id="hl-5-7"><a class="lnlinks" href="#hl-5-7"> 7</a>
</span><span class="lnt" id="hl-5-8"><a class="lnlinks" href="#hl-5-8"> 8</a>
</span><span class="lnt" id="hl-5-9"><a class="lnlinks" href="#hl-5-9"> 9</a>
</span><span class="lnt" id="hl-5-10"><a class="lnlinks" href="#hl-5-10">10</a>
</span><span class="lnt" id="hl-5-11"><a class="lnlinks" href="#hl-5-11">11</a>
</span><span class="lnt" id="hl-5-12"><a class="lnlinks" href="#hl-5-12">12</a>
</span><span class="lnt" id="hl-5-13"><a class="lnlinks" href="#hl-5-13">13</a>
</span><span class="lnt" id="hl-5-14"><a class="lnlinks" href="#hl-5-14">14</a>
</span><span class="lnt" id="hl-5-15"><a class="lnlinks" href="#hl-5-15">15</a>
</span><span class="lnt" id="hl-5-16"><a class="lnlinks" href="#hl-5-16">16</a>
</span><span class="lnt" id="hl-5-17"><a class="lnlinks" href="#hl-5-17">17</a>
</span><span class="lnt" id="hl-5-18"><a class="lnlinks" href="#hl-5-18">18</a>
</span><span class="lnt" id="hl-5-19"><a class="lnlinks" href="#hl-5-19">19</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-lua" data-lang="lua"><span class="line"><span class="cl"><span class="kr">function</span> <span class="nc">M</span><span class="p">.</span><span class="nf">pretty</span><span class="p">(</span><span class="n">data</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">  <span class="kd">local</span> <span class="n">lines</span> <span class="o">=</span> <span class="n">vim.split</span><span class="p">(</span><span class="n">data</span><span class="p">,</span> <span class="s2">&#34;</span><span class="se">\r\n</span><span class="s2">&#34;</span><span class="p">,</span> <span class="p">{</span> <span class="n">plain</span> <span class="o">=</span> <span class="kc">true</span> <span class="p">})</span>
</span></span><span class="line"><span class="cl">  <span class="kd">local</span> <span class="n">headers</span> <span class="o">=</span> <span class="p">{}</span>
</span></span><span class="line"><span class="cl">  <span class="kd">local</span> <span class="n">heading</span> <span class="o">=</span> <span class="n">vim.split</span><span class="p">(</span><span class="n">lines</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span> <span class="s2">&#34; &#34;</span><span class="p">,</span> <span class="p">{</span> <span class="n">plain</span> <span class="o">=</span> <span class="kc">true</span> <span class="p">})</span>
</span></span><span class="line"><span class="cl">  <span class="kd">local</span> <span class="n">code</span> <span class="o">=</span> <span class="n">heading</span><span class="p">[</span><span class="mi">2</span><span class="p">]</span>
</span></span><span class="line"><span class="cl">  <span class="n">table.remove</span><span class="p">(</span><span class="n">lines</span><span class="p">,</span> <span class="mi">1</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">  <span class="kr">for</span> <span class="n">_</span><span class="p">,</span> <span class="n">line</span> <span class="kr">in</span> <span class="n">ipairs</span><span class="p">(</span><span class="n">lines</span><span class="p">)</span> <span class="kr">do</span>
</span></span><span class="line"><span class="cl">    <span class="kd">local</span> <span class="n">_line</span> <span class="o">=</span> <span class="n">vim.split</span><span class="p">(</span><span class="n">line</span><span class="p">,</span> <span class="s2">&#34;: &#34;</span><span class="p">,</span> <span class="p">{</span> <span class="n">plain</span> <span class="o">=</span> <span class="kc">true</span> <span class="p">})</span>
</span></span><span class="line"><span class="cl">    <span class="kr">if</span> <span class="o">#</span><span class="n">_line</span> <span class="o">&gt;</span> <span class="mi">1</span> <span class="kr">then</span>
</span></span><span class="line"><span class="cl">      <span class="kd">local</span> <span class="n">_colon_items</span> <span class="o">=</span> <span class="n">vim.split</span><span class="p">(</span><span class="n">_line</span><span class="p">[</span><span class="mi">2</span><span class="p">],</span> <span class="s2">&#34;; &#34;</span><span class="p">,</span> <span class="p">{</span> <span class="n">plain</span> <span class="o">=</span> <span class="kc">true</span> <span class="p">})</span>
</span></span><span class="line"><span class="cl">      <span class="kr">if</span> <span class="o">#</span><span class="n">_colon_items</span> <span class="o">==</span> <span class="mi">1</span> <span class="kr">then</span>
</span></span><span class="line"><span class="cl">        <span class="n">headers</span><span class="p">[</span><span class="n">_line</span><span class="p">[</span><span class="mi">1</span><span class="p">]]</span> <span class="o">=</span> <span class="n">_colon_items</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span>
</span></span><span class="line"><span class="cl">      <span class="kr">elseif</span> <span class="o">#</span><span class="n">_colon_items</span> <span class="o">&gt;</span> <span class="mi">1</span> <span class="kr">then</span>
</span></span><span class="line"><span class="cl">        <span class="n">headers</span><span class="p">[</span><span class="n">_line</span><span class="p">[</span><span class="mi">1</span><span class="p">]]</span> <span class="o">=</span> <span class="n">_colon_items</span>
</span></span><span class="line"><span class="cl">      <span class="kr">end</span>
</span></span><span class="line"><span class="cl">    <span class="kr">end</span>
</span></span><span class="line"><span class="cl">  <span class="kr">end</span>
</span></span><span class="line"><span class="cl">  <span class="kr">return</span> <span class="p">{</span> <span class="n">code</span> <span class="o">=</span> <span class="n">code</span><span class="p">,</span> <span class="n">headers</span> <span class="o">=</span> <span class="n">headers</span> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="kr">end</span>
</span></span></code></pre></td></tr></table>
</div>
</div><h3 id="delete" class="headerLink">
    <a href="#delete" class="header-mark"></a>Delete</h3><p>For deleting a link form <a href="https://0x0.st" target="_blank" rel="noopener noreferrer">https://0x0.st</a>, we just need to send the link, that we want
to delete and its token that was given to us when we uploaded the file.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-6-1"><a class="lnlinks" href="#hl-6-1"> 1</a>
</span><span class="lnt" id="hl-6-2"><a class="lnlinks" href="#hl-6-2"> 2</a>
</span><span class="lnt" id="hl-6-3"><a class="lnlinks" href="#hl-6-3"> 3</a>
</span><span class="lnt" id="hl-6-4"><a class="lnlinks" href="#hl-6-4"> 4</a>
</span><span class="lnt" id="hl-6-5"><a class="lnlinks" href="#hl-6-5"> 5</a>
</span><span class="lnt" id="hl-6-6"><a class="lnlinks" href="#hl-6-6"> 6</a>
</span><span class="lnt" id="hl-6-7"><a class="lnlinks" href="#hl-6-7"> 7</a>
</span><span class="lnt" id="hl-6-8"><a class="lnlinks" href="#hl-6-8"> 8</a>
</span><span class="lnt" id="hl-6-9"><a class="lnlinks" href="#hl-6-9"> 9</a>
</span><span class="lnt" id="hl-6-10"><a class="lnlinks" href="#hl-6-10">10</a>
</span><span class="lnt" id="hl-6-11"><a class="lnlinks" href="#hl-6-11">11</a>
</span><span class="lnt" id="hl-6-12"><a class="lnlinks" href="#hl-6-12">12</a>
</span><span class="lnt" id="hl-6-13"><a class="lnlinks" href="#hl-6-13">13</a>
</span><span class="lnt" id="hl-6-14"><a class="lnlinks" href="#hl-6-14">14</a>
</span><span class="lnt" id="hl-6-15"><a class="lnlinks" href="#hl-6-15">15</a>
</span><span class="lnt" id="hl-6-16"><a class="lnlinks" href="#hl-6-16">16</a>
</span><span class="lnt" id="hl-6-17"><a class="lnlinks" href="#hl-6-17">17</a>
</span><span class="lnt" id="hl-6-18"><a class="lnlinks" href="#hl-6-18">18</a>
</span><span class="lnt" id="hl-6-19"><a class="lnlinks" href="#hl-6-19">19</a>
</span><span class="lnt" id="hl-6-20"><a class="lnlinks" href="#hl-6-20">20</a>
</span><span class="lnt" id="hl-6-21"><a class="lnlinks" href="#hl-6-21">21</a>
</span><span class="lnt" id="hl-6-22"><a class="lnlinks" href="#hl-6-22">22</a>
</span><span class="lnt" id="hl-6-23"><a class="lnlinks" href="#hl-6-23">23</a>
</span><span class="lnt" id="hl-6-24"><a class="lnlinks" href="#hl-6-24">24</a>
</span><span class="lnt" id="hl-6-25"><a class="lnlinks" href="#hl-6-25">25</a>
</span><span class="lnt" id="hl-6-26"><a class="lnlinks" href="#hl-6-26">26</a>
</span><span class="lnt" id="hl-6-27"><a class="lnlinks" href="#hl-6-27">27</a>
</span><span class="lnt" id="hl-6-28"><a class="lnlinks" href="#hl-6-28">28</a>
</span><span class="lnt" id="hl-6-29"><a class="lnlinks" href="#hl-6-29">29</a>
</span><span class="lnt" id="hl-6-30"><a class="lnlinks" href="#hl-6-30">30</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-lua" data-lang="lua"><span class="line"><span class="cl"><span class="kr">function</span> <span class="nc">M</span><span class="p">.</span><span class="nf">delete</span><span class="p">(</span><span class="n">response</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">  <span class="kr">if</span> <span class="ow">not</span> <span class="n">response</span> <span class="kr">then</span> <span class="kr">return</span> <span class="kr">end</span>
</span></span><span class="line"><span class="cl">  <span class="c1">-- 0x0 will not allow deletion if we are unable to supply the token</span>
</span></span><span class="line"><span class="cl">  <span class="kr">if</span> <span class="ow">not</span> <span class="n">response.headers</span><span class="p">[</span><span class="s2">&#34;x-token&#34;</span><span class="p">]</span> <span class="kr">then</span>
</span></span><span class="line"><span class="cl">    <span class="n">M._responses</span><span class="p">[</span><span class="n">response.body</span><span class="p">]</span> <span class="o">=</span> <span class="kc">nil</span> <span class="c1">-- rm from cache? This depends on your preference.</span>
</span></span><span class="line"><span class="cl">    <span class="n">M._db</span><span class="p">:</span><span class="n">write</span><span class="p">(</span><span class="n">vim.json</span><span class="p">.</span><span class="n">encode</span><span class="p">(</span><span class="n">M._responses</span><span class="p">),</span> <span class="s2">&#34;w&#34;</span><span class="p">)</span> <span class="c1">-- useless if you chose to rm previous line</span>
</span></span><span class="line"><span class="cl">    <span class="kr">return</span>
</span></span><span class="line"><span class="cl">  <span class="kr">end</span>
</span></span><span class="line"><span class="cl">  <span class="n">Job</span><span class="p">:</span><span class="n">new</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">    <span class="n">command</span> <span class="o">=</span> <span class="s2">&#34;curl&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="n">args</span> <span class="o">=</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">      <span class="s2">&#34;--form&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">      <span class="n">string.format</span><span class="p">(</span><span class="s2">&#34;token=%s&#34;</span><span class="p">,</span> <span class="n">response.headers</span><span class="p">[</span><span class="s2">&#34;x-token&#34;</span><span class="p">]),</span>
</span></span><span class="line"><span class="cl">      <span class="s2">&#34;--form&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">      <span class="s2">&#34;delete=&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">      <span class="n">response.body</span><span class="p">,</span> <span class="c1">-- file link to delete example: https://0x0.st/HkmZ.lua</span>
</span></span><span class="line"><span class="cl">    <span class="p">},</span>
</span></span><span class="line"><span class="cl">    <span class="n">on_exit</span> <span class="o">=</span> <span class="n">vim.schedule_wrap</span><span class="p">(</span><span class="kr">function</span><span class="p">(</span><span class="n">self</span><span class="p">,</span> <span class="n">code</span><span class="p">,</span> <span class="n">_</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">      <span class="kr">if</span> <span class="n">code</span> <span class="o">~=</span> <span class="mi">0</span> <span class="kr">then</span> <span class="kr">return</span> <span class="kr">end</span>
</span></span><span class="line"><span class="cl">      <span class="c1">-- I use https://github.com/rcarriga/nvim-notify</span>
</span></span><span class="line"><span class="cl">      <span class="c1">-- if you don&#39;t then just use print(&#34;Deleted&#34; .. response.body)</span>
</span></span><span class="line"><span class="cl">      <span class="n">vim.api</span><span class="p">.</span><span class="n">nvim_notify</span><span class="p">(</span><span class="s2">&#34;Deleted &#34;</span> <span class="o">..</span> <span class="n">response.body</span><span class="p">,</span> <span class="n">vim.log</span><span class="p">.</span><span class="n">levels.INFO</span><span class="p">,</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">        <span class="n">title</span> <span class="o">=</span> <span class="s2">&#34;pastebin&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">icon</span> <span class="o">=</span> <span class="s2">&#34; &#34;</span>
</span></span><span class="line"><span class="cl">      <span class="p">})</span>
</span></span><span class="line"><span class="cl">      <span class="n">M._responses</span><span class="p">[</span><span class="n">response.body</span><span class="p">]</span> <span class="o">=</span> <span class="kc">nil</span>
</span></span><span class="line"><span class="cl">      <span class="n">M._db</span><span class="p">:</span><span class="n">write</span><span class="p">(</span><span class="n">vim.json</span><span class="p">.</span><span class="n">encode</span><span class="p">(</span><span class="n">M._responses</span><span class="p">),</span> <span class="s2">&#34;w&#34;</span><span class="p">)</span> <span class="c1">-- save cache (persist)</span>
</span></span><span class="line"><span class="cl">    <span class="kr">end</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">  <span class="p">}):</span><span class="n">start</span><span class="p">()</span>
</span></span><span class="line"><span class="cl"><span class="kr">end</span>
</span></span></code></pre></td></tr></table>
</div>
</div><h2 id="debloat-rewrite" class="headerLink">
    <a href="#debloat-rewrite" class="header-mark"></a>Debloat. Rewrite.</h2><p>Why though?</p>
<ul>
<li>Will you only ever upload code files?</li>
<li>Won&rsquo;t you want to upload a file without opening Neovim?</li>
<li>Wouldn&rsquo;t it be better if there were a nice shell utility that can be used everywhere?</li>
<li>Minimalism.</li>
</ul>
<p>So, we write a shell script that does just that. (Maybe we&rsquo;ll write completions for it as well!)</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-7-1"><a class="lnlinks" href="#hl-7-1"> 1</a>
</span><span class="lnt" id="hl-7-2"><a class="lnlinks" href="#hl-7-2"> 2</a>
</span><span class="lnt" id="hl-7-3"><a class="lnlinks" href="#hl-7-3"> 3</a>
</span><span class="lnt" id="hl-7-4"><a class="lnlinks" href="#hl-7-4"> 4</a>
</span><span class="lnt" id="hl-7-5"><a class="lnlinks" href="#hl-7-5"> 5</a>
</span><span class="lnt" id="hl-7-6"><a class="lnlinks" href="#hl-7-6"> 6</a>
</span><span class="lnt" id="hl-7-7"><a class="lnlinks" href="#hl-7-7"> 7</a>
</span><span class="lnt" id="hl-7-8"><a class="lnlinks" href="#hl-7-8"> 8</a>
</span><span class="lnt" id="hl-7-9"><a class="lnlinks" href="#hl-7-9"> 9</a>
</span><span class="lnt" id="hl-7-10"><a class="lnlinks" href="#hl-7-10">10</a>
</span><span class="lnt" id="hl-7-11"><a class="lnlinks" href="#hl-7-11">11</a>
</span><span class="lnt" id="hl-7-12"><a class="lnlinks" href="#hl-7-12">12</a>
</span><span class="lnt" id="hl-7-13"><a class="lnlinks" href="#hl-7-13">13</a>
</span><span class="lnt" id="hl-7-14"><a class="lnlinks" href="#hl-7-14">14</a>
</span><span class="lnt" id="hl-7-15"><a class="lnlinks" href="#hl-7-15">15</a>
</span><span class="lnt" id="hl-7-16"><a class="lnlinks" href="#hl-7-16">16</a>
</span><span class="lnt" id="hl-7-17"><a class="lnlinks" href="#hl-7-17">17</a>
</span><span class="lnt" id="hl-7-18"><a class="lnlinks" href="#hl-7-18">18</a>
</span><span class="lnt" id="hl-7-19"><a class="lnlinks" href="#hl-7-19">19</a>
</span><span class="lnt" id="hl-7-20"><a class="lnlinks" href="#hl-7-20">20</a>
</span><span class="lnt" id="hl-7-21"><a class="lnlinks" href="#hl-7-21">21</a>
</span><span class="lnt" id="hl-7-22"><a class="lnlinks" href="#hl-7-22">22</a>
</span><span class="lnt" id="hl-7-23"><a class="lnlinks" href="#hl-7-23">23</a>
</span><span class="lnt" id="hl-7-24"><a class="lnlinks" href="#hl-7-24">24</a>
</span><span class="lnt" id="hl-7-25"><a class="lnlinks" href="#hl-7-25">25</a>
</span><span class="lnt" id="hl-7-26"><a class="lnlinks" href="#hl-7-26">26</a>
</span><span class="lnt" id="hl-7-27"><a class="lnlinks" href="#hl-7-27">27</a>
</span><span class="lnt" id="hl-7-28"><a class="lnlinks" href="#hl-7-28">28</a>
</span><span class="lnt" id="hl-7-29"><a class="lnlinks" href="#hl-7-29">29</a>
</span><span class="lnt" id="hl-7-30"><a class="lnlinks" href="#hl-7-30">30</a>
</span><span class="lnt" id="hl-7-31"><a class="lnlinks" href="#hl-7-31">31</a>
</span><span class="lnt" id="hl-7-32"><a class="lnlinks" href="#hl-7-32">32</a>
</span><span class="lnt" id="hl-7-33"><a class="lnlinks" href="#hl-7-33">33</a>
</span><span class="lnt" id="hl-7-34"><a class="lnlinks" href="#hl-7-34">34</a>
</span><span class="lnt" id="hl-7-35"><a class="lnlinks" href="#hl-7-35">35</a>
</span><span class="lnt" id="hl-7-36"><a class="lnlinks" href="#hl-7-36">36</a>
</span><span class="lnt" id="hl-7-37"><a class="lnlinks" href="#hl-7-37">37</a>
</span><span class="lnt" id="hl-7-38"><a class="lnlinks" href="#hl-7-38">38</a>
</span><span class="lnt" id="hl-7-39"><a class="lnlinks" href="#hl-7-39">39</a>
</span><span class="lnt" id="hl-7-40"><a class="lnlinks" href="#hl-7-40">40</a>
</span><span class="lnt" id="hl-7-41"><a class="lnlinks" href="#hl-7-41">41</a>
</span><span class="lnt" id="hl-7-42"><a class="lnlinks" href="#hl-7-42">42</a>
</span><span class="lnt" id="hl-7-43"><a class="lnlinks" href="#hl-7-43">43</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl"><span class="cp">#!/usr/bin/env bash
</span></span></span><span class="line"><span class="cl"><span class="cp"></span>
</span></span><span class="line"><span class="cl"><span class="nv">dump</span><span class="o">=</span><span class="s2">&#34;/tmp/dump&#34;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="k">function</span> help_message<span class="o">()</span> <span class="o">{</span>
</span></span><span class="line"><span class="cl">  <span class="nb">echo</span> <span class="s1">&#39;usage: paste [[--upload|-u]|[--delete|-d]|[--clean|-c]|[--help|-h]]&#39;</span>
</span></span><span class="line"><span class="cl">  <span class="nb">echo</span>
</span></span><span class="line"><span class="cl">  <span class="nb">echo</span> <span class="s1">&#39;script to upload files to a pastebin website&#39;</span>
</span></span><span class="line"><span class="cl">  <span class="nb">echo</span>
</span></span><span class="line"><span class="cl">  <span class="nb">echo</span> <span class="s1">&#39;options:&#39;</span>
</span></span><span class="line"><span class="cl">  <span class="nb">echo</span> <span class="s1">&#39;  -h, --help                                    show this help message and exit&#39;</span>
</span></span><span class="line"><span class="cl">  <span class="nb">echo</span> <span class="s1">&#39;  -c, --clean                                   remove db&#39;</span>
</span></span><span class="line"><span class="cl">  <span class="nb">echo</span> <span class="s1">&#39;  -u &lt;FILE&gt;, --upload &lt;FILE&gt;                    upload a file to 0x0.st&#39;</span>
</span></span><span class="line"><span class="cl">  <span class="nb">echo</span> <span class="s1">&#39;  -d &lt;TOKEN&gt; &lt;LINK&gt;, --delete &lt;TOKEN&gt; &lt;LINK&gt;    delete an uploaded file&#39;</span>
</span></span><span class="line"><span class="cl">  <span class="nb">echo</span> 
</span></span><span class="line"><span class="cl">  <span class="nb">echo</span> <span class="s1">&#39;Source: https://github.com/dharmx&#39;</span>
</span></span><span class="line"><span class="cl"><span class="o">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="k">function</span> _upload<span class="o">()</span> <span class="o">{</span>
</span></span><span class="line"><span class="cl">  <span class="o">[[</span> <span class="s2">&#34;</span><span class="nv">$1</span><span class="s2">&#34;</span> <span class="o">==</span> <span class="s2">&#34;&#34;</span> <span class="o">]]</span> <span class="o">&amp;&amp;</span> <span class="nb">echo</span> Needs <span class="s1">&#39;&lt;FILE&gt;&#39;</span> <span class="o">&amp;&amp;</span> help_message <span class="o">&amp;&amp;</span> <span class="k">return</span> <span class="m">1</span>
</span></span><span class="line"><span class="cl">  curl                      <span class="se">\
</span></span></span><span class="line"><span class="cl"><span class="se"></span>    --silent                <span class="se">\
</span></span></span><span class="line"><span class="cl"><span class="se"></span>    --show-error            <span class="se">\
</span></span></span><span class="line"><span class="cl"><span class="se"></span>    --location              <span class="se">\
</span></span></span><span class="line"><span class="cl"><span class="se"></span>    --dump-header <span class="s2">&#34;</span><span class="nv">$dump</span><span class="s2">&#34;</span>   <span class="se">\
</span></span></span><span class="line"><span class="cl"><span class="se"></span>    --compressed            <span class="se">\
</span></span></span><span class="line"><span class="cl"><span class="se"></span>    --request POST          <span class="se">\
</span></span></span><span class="line"><span class="cl"><span class="se"></span>    --form <span class="nv">file</span><span class="o">=</span>@<span class="s2">&#34;</span><span class="nv">$1</span><span class="s2">&#34;</span>       <span class="se">\
</span></span></span><span class="line"><span class="cl"><span class="se"></span>      https://0x0.st
</span></span><span class="line"><span class="cl"><span class="o">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="k">function</span> _delete<span class="o">()</span> <span class="o">{</span>
</span></span><span class="line"><span class="cl">  <span class="o">[[</span> <span class="s2">&#34;</span><span class="nv">$1</span><span class="s2">&#34;</span> <span class="o">==</span> <span class="s2">&#34;&#34;</span> <span class="o">||</span> <span class="s2">&#34;</span><span class="nv">$2</span><span class="s2">&#34;</span> <span class="o">==</span> <span class="s2">&#34;&#34;</span> <span class="o">]]</span> <span class="o">&amp;&amp;</span> <span class="nb">echo</span> Needs <span class="s1">&#39;&lt;TOKEN&gt; &lt;LINK&gt;&#39;</span> <span class="o">&amp;&amp;</span> help_message <span class="o">&amp;&amp;</span> <span class="k">return</span> <span class="m">1</span>
</span></span><span class="line"><span class="cl">  curl --form <span class="nv">token</span><span class="o">=</span><span class="s2">&#34;</span><span class="nv">$1</span><span class="s2">&#34;</span> --form <span class="nv">delete</span><span class="o">=</span> <span class="s2">&#34;</span><span class="nv">$2</span><span class="s2">&#34;</span>
</span></span><span class="line"><span class="cl"><span class="o">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="k">case</span> <span class="s2">&#34;</span><span class="nv">$1</span><span class="s2">&#34;</span> in
</span></span><span class="line"><span class="cl">  --upload<span class="p">|</span>-u<span class="o">)</span> _upload <span class="s2">&#34;</span><span class="nv">$2</span><span class="s2">&#34;</span> <span class="p">;;</span>
</span></span><span class="line"><span class="cl">  --delete<span class="p">|</span>-d<span class="o">)</span> _delete <span class="s2">&#34;</span><span class="nv">$2</span><span class="s2">&#34;</span> <span class="s2">&#34;</span><span class="nv">$3</span><span class="s2">&#34;</span> <span class="p">;;</span>
</span></span><span class="line"><span class="cl">  --clean<span class="p">|</span>-c<span class="o">)</span> rm -rf <span class="s2">&#34;</span><span class="nv">$dump</span><span class="s2">&#34;</span> <span class="p">;;</span>
</span></span><span class="line"><span class="cl">  --help<span class="p">|</span>-h<span class="o">)</span> help_message <span class="p">;;</span>
</span></span><span class="line"><span class="cl">  *<span class="o">)</span> <span class="nb">echo</span> -e Needs arguments! <span class="s2">&#34;\n&#34;</span> <span class="o">&amp;&amp;</span> help_message <span class="o">&amp;&amp;</span> <span class="nb">exit</span> <span class="m">1</span> <span class="p">;;</span>
</span></span><span class="line"><span class="cl"><span class="k">esac</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>We then place this into <code>$PATH</code>. I recommend <code>~/.local/bin</code>. Now, you can use <code>0x0 -u file</code>.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-8-1"><a class="lnlinks" href="#hl-8-1"> 1</a>
</span><span class="lnt" id="hl-8-2"><a class="lnlinks" href="#hl-8-2"> 2</a>
</span><span class="lnt" id="hl-8-3"><a class="lnlinks" href="#hl-8-3"> 3</a>
</span><span class="lnt" id="hl-8-4"><a class="lnlinks" href="#hl-8-4"> 4</a>
</span><span class="lnt" id="hl-8-5"><a class="lnlinks" href="#hl-8-5"> 5</a>
</span><span class="lnt" id="hl-8-6"><a class="lnlinks" href="#hl-8-6"> 6</a>
</span><span class="lnt" id="hl-8-7"><a class="lnlinks" href="#hl-8-7"> 7</a>
</span><span class="lnt" id="hl-8-8"><a class="lnlinks" href="#hl-8-8"> 8</a>
</span><span class="lnt" id="hl-8-9"><a class="lnlinks" href="#hl-8-9"> 9</a>
</span><span class="lnt" id="hl-8-10"><a class="lnlinks" href="#hl-8-10">10</a>
</span><span class="lnt" id="hl-8-11"><a class="lnlinks" href="#hl-8-11">11</a>
</span><span class="lnt" id="hl-8-12"><a class="lnlinks" href="#hl-8-12">12</a>
</span><span class="lnt" id="hl-8-13"><a class="lnlinks" href="#hl-8-13">13</a>
</span><span class="lnt" id="hl-8-14"><a class="lnlinks" href="#hl-8-14">14</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl"><span class="c1">#compdef 0x0</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1"># Sing with me. WE 👏. LOVE 👏. COMPLETIONS 👏!</span>
</span></span><span class="line"><span class="cl"><span class="k">function</span> _0x0<span class="o">()</span> <span class="o">{</span>
</span></span><span class="line"><span class="cl">  _arguments                                                    <span class="se">\
</span></span></span><span class="line"><span class="cl"><span class="se"></span>    <span class="s1">&#39;-h[show this help message and exit]&#39;</span>                       <span class="se">\
</span></span></span><span class="line"><span class="cl"><span class="se"></span>    <span class="s1">&#39;--help[show this help message and exit]&#39;</span>                   <span class="se">\
</span></span></span><span class="line"><span class="cl"><span class="se"></span>    <span class="s1">&#39;-c[remove db]&#39;</span>                                             <span class="se">\
</span></span></span><span class="line"><span class="cl"><span class="se"></span>    <span class="s1">&#39;--clean[remove db]&#39;</span>                                        <span class="se">\
</span></span></span><span class="line"><span class="cl"><span class="se"></span>    <span class="s1">&#39;-u[upload a file to 0x0.st]:upload:_files&#39;</span>                 <span class="se">\
</span></span></span><span class="line"><span class="cl"><span class="se"></span>    <span class="s1">&#39;--upload[upload a file to 0x0.st]:upload:_files&#39;</span>           <span class="se">\
</span></span></span><span class="line"><span class="cl"><span class="se"></span>    <span class="s1">&#39;-d[delete an uploaded file]&#39;</span>                               <span class="se">\
</span></span></span><span class="line"><span class="cl"><span class="se"></span>    <span class="s1">&#39;--delete[delete an uploaded file]&#39;</span>
</span></span><span class="line"><span class="cl"><span class="o">}</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>We then place this into <code>$FPATH</code>. I recommend <code>~/.local/share/zsh/completions</code>.
Name the file <code>0x0</code> or, something 🤷.</p>
<h3 id="rewritten" class="headerLink">
    <a href="#rewritten" class="header-mark"></a>Rewritten</h3><p>Only the <code>M.paste</code> and <code>M.delete</code> functions need to be re-written with new arguments. See
below.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-9-1"><a class="lnlinks" href="#hl-9-1"> 1</a>
</span><span class="lnt" id="hl-9-2"><a class="lnlinks" href="#hl-9-2"> 2</a>
</span><span class="lnt" id="hl-9-3"><a class="lnlinks" href="#hl-9-3"> 3</a>
</span><span class="lnt" id="hl-9-4"><a class="lnlinks" href="#hl-9-4"> 4</a>
</span><span class="lnt" id="hl-9-5"><a class="lnlinks" href="#hl-9-5"> 5</a>
</span><span class="lnt" id="hl-9-6"><a class="lnlinks" href="#hl-9-6"> 6</a>
</span><span class="lnt" id="hl-9-7"><a class="lnlinks" href="#hl-9-7"> 7</a>
</span><span class="lnt" id="hl-9-8"><a class="lnlinks" href="#hl-9-8"> 8</a>
</span><span class="lnt" id="hl-9-9"><a class="lnlinks" href="#hl-9-9"> 9</a>
</span><span class="lnt" id="hl-9-10"><a class="lnlinks" href="#hl-9-10">10</a>
</span><span class="lnt" id="hl-9-11"><a class="lnlinks" href="#hl-9-11">11</a>
</span><span class="lnt" id="hl-9-12"><a class="lnlinks" href="#hl-9-12">12</a>
</span><span class="lnt" id="hl-9-13"><a class="lnlinks" href="#hl-9-13">13</a>
</span><span class="lnt" id="hl-9-14"><a class="lnlinks" href="#hl-9-14">14</a>
</span><span class="lnt" id="hl-9-15"><a class="lnlinks" href="#hl-9-15">15</a>
</span><span class="lnt" id="hl-9-16"><a class="lnlinks" href="#hl-9-16">16</a>
</span><span class="lnt" id="hl-9-17"><a class="lnlinks" href="#hl-9-17">17</a>
</span><span class="lnt" id="hl-9-18"><a class="lnlinks" href="#hl-9-18">18</a>
</span><span class="lnt" id="hl-9-19"><a class="lnlinks" href="#hl-9-19">19</a>
</span><span class="lnt" id="hl-9-20"><a class="lnlinks" href="#hl-9-20">20</a>
</span><span class="lnt" id="hl-9-21"><a class="lnlinks" href="#hl-9-21">21</a>
</span><span class="lnt" id="hl-9-22"><a class="lnlinks" href="#hl-9-22">22</a>
</span><span class="lnt" id="hl-9-23"><a class="lnlinks" href="#hl-9-23">23</a>
</span><span class="lnt" id="hl-9-24"><a class="lnlinks" href="#hl-9-24">24</a>
</span><span class="lnt" id="hl-9-25"><a class="lnlinks" href="#hl-9-25">25</a>
</span><span class="lnt" id="hl-9-26"><a class="lnlinks" href="#hl-9-26">26</a>
</span><span class="lnt" id="hl-9-27"><a class="lnlinks" href="#hl-9-27">27</a>
</span><span class="lnt" id="hl-9-28"><a class="lnlinks" href="#hl-9-28">28</a>
</span><span class="lnt" id="hl-9-29"><a class="lnlinks" href="#hl-9-29">29</a>
</span><span class="lnt" id="hl-9-30"><a class="lnlinks" href="#hl-9-30">30</a>
</span><span class="lnt" id="hl-9-31"><a class="lnlinks" href="#hl-9-31">31</a>
</span><span class="lnt" id="hl-9-32"><a class="lnlinks" href="#hl-9-32">32</a>
</span><span class="lnt" id="hl-9-33"><a class="lnlinks" href="#hl-9-33">33</a>
</span><span class="lnt" id="hl-9-34"><a class="lnlinks" href="#hl-9-34">34</a>
</span><span class="lnt" id="hl-9-35"><a class="lnlinks" href="#hl-9-35">35</a>
</span><span class="lnt" id="hl-9-36"><a class="lnlinks" href="#hl-9-36">36</a>
</span><span class="lnt" id="hl-9-37"><a class="lnlinks" href="#hl-9-37">37</a>
</span><span class="lnt" id="hl-9-38"><a class="lnlinks" href="#hl-9-38">38</a>
</span><span class="lnt" id="hl-9-39"><a class="lnlinks" href="#hl-9-39">39</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-lua" data-lang="lua"><span class="line"><span class="cl"><span class="c1">-- ...</span>
</span></span><span class="line"><span class="cl"><span class="kr">function</span> <span class="nc">M</span><span class="p">.</span><span class="nf">paste</span><span class="p">(</span><span class="n">contents</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">  <span class="n">M._path</span><span class="p">:</span><span class="n">write</span><span class="p">(</span><span class="n">table.concat</span><span class="p">(</span><span class="n">contents</span><span class="p">,</span> <span class="s2">&#34;</span><span class="se">\n</span><span class="s2">&#34;</span><span class="p">),</span> <span class="s2">&#34;w&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">  <span class="n">Job</span><span class="p">:</span><span class="n">new</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">    <span class="n">command</span> <span class="o">=</span> <span class="s2">&#34;0x0&#34;</span><span class="p">,</span> <span class="c1">-- the script&#39;s name</span>
</span></span><span class="line"><span class="cl">    <span class="n">args</span> <span class="o">=</span> <span class="p">{</span> <span class="s2">&#34;--upload&#34;</span><span class="p">,</span> <span class="n">M._path</span><span class="p">.</span><span class="n">filename</span> <span class="p">},</span>
</span></span><span class="line"><span class="cl">    <span class="n">on_exit</span> <span class="o">=</span> <span class="n">vim.schedule_wrap</span><span class="p">(</span><span class="kr">function</span><span class="p">(</span><span class="n">self</span><span class="p">,</span> <span class="n">code</span><span class="p">,</span> <span class="n">_</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">      <span class="kr">if</span> <span class="n">code</span> <span class="o">~=</span> <span class="mi">0</span> <span class="kr">then</span> <span class="kr">return</span> <span class="kr">end</span>
</span></span><span class="line"><span class="cl">      <span class="kd">local</span> <span class="n">body</span> <span class="o">=</span> <span class="n">self</span><span class="p">:</span><span class="n">result</span><span class="p">()[</span><span class="mi">1</span><span class="p">]</span>
</span></span><span class="line"><span class="cl">      <span class="kd">local</span> <span class="n">pretty</span> <span class="o">=</span> <span class="n">M.pretty</span><span class="p">(</span><span class="n">M._dump</span><span class="p">:</span><span class="n">read</span><span class="p">())</span>
</span></span><span class="line"><span class="cl">      <span class="n">M._responses</span><span class="p">[</span><span class="n">body</span><span class="p">]</span> <span class="o">=</span> <span class="p">{</span> <span class="n">body</span> <span class="o">=</span> <span class="n">body</span><span class="p">,</span> <span class="n">headers</span> <span class="o">=</span> <span class="n">pretty.headers</span><span class="p">,</span> <span class="n">code</span> <span class="o">=</span> <span class="n">pretty.code</span> <span class="p">}</span>
</span></span><span class="line"><span class="cl">      <span class="n">M._path</span><span class="p">:</span><span class="n">rm</span><span class="p">()</span>
</span></span><span class="line"><span class="cl">      <span class="n">M._dump</span><span class="p">:</span><span class="n">rm</span><span class="p">()</span>
</span></span><span class="line"><span class="cl">      <span class="n">vim.fn</span><span class="p">.</span><span class="n">setreg</span><span class="p">(</span><span class="s2">&#34;+&#34;</span><span class="p">,</span> <span class="n">body</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">      <span class="n">vim.api</span><span class="p">.</span><span class="n">nvim_notify</span><span class="p">(</span><span class="n">body</span><span class="p">,</span> <span class="n">vim.log</span><span class="p">.</span><span class="n">levels.INFO</span><span class="p">,</span> <span class="p">{</span> <span class="n">title</span> <span class="o">=</span> <span class="s2">&#34;0x0&#34;</span><span class="p">,</span> <span class="n">icon</span> <span class="o">=</span> <span class="s2">&#34; &#34;</span> <span class="p">})</span>
</span></span><span class="line"><span class="cl">      <span class="n">M._db</span><span class="p">:</span><span class="n">write</span><span class="p">(</span><span class="n">vim.json</span><span class="p">.</span><span class="n">encode</span><span class="p">(</span><span class="n">M._responses</span><span class="p">),</span> <span class="s2">&#34;w&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="kr">end</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">  <span class="p">}):</span><span class="n">start</span><span class="p">()</span>
</span></span><span class="line"><span class="cl"><span class="kr">end</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="kr">function</span> <span class="nc">M</span><span class="p">.</span><span class="nf">delete</span><span class="p">(</span><span class="n">response</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">  <span class="kr">if</span> <span class="ow">not</span> <span class="n">response</span> <span class="kr">then</span> <span class="kr">return</span> <span class="kr">end</span>
</span></span><span class="line"><span class="cl">  <span class="kr">if</span> <span class="ow">not</span> <span class="n">response.headers</span><span class="p">[</span><span class="s2">&#34;x-token&#34;</span><span class="p">]</span> <span class="kr">then</span>
</span></span><span class="line"><span class="cl">    <span class="n">M._responses</span><span class="p">[</span><span class="n">response.body</span><span class="p">]</span> <span class="o">=</span> <span class="kc">nil</span>
</span></span><span class="line"><span class="cl">    <span class="n">M._db</span><span class="p">:</span><span class="n">write</span><span class="p">(</span><span class="n">vim.json</span><span class="p">.</span><span class="n">encode</span><span class="p">(</span><span class="n">M._responses</span><span class="p">),</span> <span class="s2">&#34;w&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="kr">return</span>
</span></span><span class="line"><span class="cl">  <span class="kr">end</span>
</span></span><span class="line"><span class="cl">  <span class="n">Job</span><span class="p">:</span><span class="n">new</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">    <span class="n">command</span> <span class="o">=</span> <span class="s2">&#34;0x0&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="n">args</span> <span class="o">=</span> <span class="p">{</span> <span class="s2">&#34;--delete&#34;</span><span class="p">,</span> <span class="n">response.headers</span><span class="p">[</span><span class="s2">&#34;x-token&#34;</span><span class="p">],</span> <span class="n">response.body</span> <span class="p">},</span>
</span></span><span class="line"><span class="cl">    <span class="n">on_exit</span> <span class="o">=</span> <span class="n">vim.schedule_wrap</span><span class="p">(</span><span class="kr">function</span><span class="p">(</span><span class="n">self</span><span class="p">,</span> <span class="n">code</span><span class="p">,</span> <span class="n">_</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">      <span class="kr">if</span> <span class="n">code</span> <span class="o">~=</span> <span class="mi">0</span> <span class="kr">then</span> <span class="kr">return</span> <span class="kr">end</span>
</span></span><span class="line"><span class="cl">      <span class="n">vim.api</span><span class="p">.</span><span class="n">nvim_notify</span><span class="p">(</span><span class="n">vim.inspect</span><span class="p">(</span><span class="n">self</span><span class="p">:</span><span class="n">result</span><span class="p">()),</span> <span class="n">vim.log</span><span class="p">.</span><span class="n">levels.INFO</span><span class="p">,</span> <span class="p">{</span> <span class="n">title</span> <span class="o">=</span> <span class="s2">&#34;0x0&#34;</span><span class="p">,</span> <span class="n">icon</span> <span class="o">=</span> <span class="s2">&#34; &#34;</span> <span class="p">})</span>
</span></span><span class="line"><span class="cl">      <span class="n">M._responses</span><span class="p">[</span><span class="n">response.body</span><span class="p">]</span> <span class="o">=</span> <span class="kc">nil</span>
</span></span><span class="line"><span class="cl">      <span class="n">M._db</span><span class="p">:</span><span class="n">write</span><span class="p">(</span><span class="n">vim.json</span><span class="p">.</span><span class="n">encode</span><span class="p">(</span><span class="n">M._responses</span><span class="p">),</span> <span class="s2">&#34;w&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="kr">end</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">  <span class="p">}):</span><span class="n">start</span><span class="p">()</span>
</span></span><span class="line"><span class="cl"><span class="kr">end</span>
</span></span><span class="line"><span class="cl"><span class="c1">-- ...</span>
</span></span></code></pre></td></tr></table>
</div>
</div><h2 id="command" class="headerLink">
    <a href="#command" class="header-mark"></a>Command</h2><p>There are a few rules we&rsquo;ll follow.</p>
<ul>
<li><code>&lt;bang&gt;</code> should not allow an file path arguments.</li>
<li>Without <code>&lt;bang&gt;</code> allow file path arguments.</li>
<li>If no <code>&lt;bang&gt;</code> or, any arguments are supplied, then use current buffer.
And, only allow ranges in this case.</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-10-1"><a class="lnlinks" href="#hl-10-1"> 1</a>
</span><span class="lnt" id="hl-10-2"><a class="lnlinks" href="#hl-10-2"> 2</a>
</span><span class="lnt" id="hl-10-3"><a class="lnlinks" href="#hl-10-3"> 3</a>
</span><span class="lnt" id="hl-10-4"><a class="lnlinks" href="#hl-10-4"> 4</a>
</span><span class="lnt" id="hl-10-5"><a class="lnlinks" href="#hl-10-5"> 5</a>
</span><span class="lnt" id="hl-10-6"><a class="lnlinks" href="#hl-10-6"> 6</a>
</span><span class="lnt" id="hl-10-7"><a class="lnlinks" href="#hl-10-7"> 7</a>
</span><span class="lnt" id="hl-10-8"><a class="lnlinks" href="#hl-10-8"> 8</a>
</span><span class="lnt" id="hl-10-9"><a class="lnlinks" href="#hl-10-9"> 9</a>
</span><span class="lnt" id="hl-10-10"><a class="lnlinks" href="#hl-10-10">10</a>
</span><span class="lnt" id="hl-10-11"><a class="lnlinks" href="#hl-10-11">11</a>
</span><span class="lnt" id="hl-10-12"><a class="lnlinks" href="#hl-10-12">12</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-lua" data-lang="lua"><span class="line"><span class="cl"><span class="c1">-- at the very end of your paste.lua</span>
</span></span><span class="line"><span class="cl"><span class="kr">function</span> <span class="nc">M</span><span class="p">.</span><span class="nf">command</span><span class="p">(</span><span class="n">args</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">  <span class="kr">if</span> <span class="n">args.bang</span> <span class="ow">and</span> <span class="n">args.fargs</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="kr">then</span>
</span></span><span class="line"><span class="cl">    <span class="n">M.delete</span><span class="p">(</span><span class="n">M._responses</span><span class="p">[</span><span class="n">args.fargs</span><span class="p">[</span><span class="mi">1</span><span class="p">]])</span>
</span></span><span class="line"><span class="cl">  <span class="kr">elseif</span> <span class="n">args.fargs</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="kr">then</span>
</span></span><span class="line"><span class="cl">    <span class="n">M.paste</span><span class="p">(</span><span class="n">vim.fn</span><span class="p">.</span><span class="n">readfile</span><span class="p">(</span><span class="n">file</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">  <span class="kr">else</span>
</span></span><span class="line"><span class="cl">    <span class="n">args.line1</span> <span class="o">=</span> <span class="p">(</span><span class="n">args.range</span> <span class="o">==</span> <span class="mi">2</span> <span class="ow">and</span> <span class="n">args.line1</span> <span class="ow">or</span> <span class="mi">1</span><span class="p">)</span> <span class="o">-</span> <span class="mi">1</span>
</span></span><span class="line"><span class="cl">    <span class="n">args.line2</span> <span class="o">=</span> <span class="n">args.range</span> <span class="o">==</span> <span class="mi">2</span> <span class="ow">and</span> <span class="n">args.line2</span> <span class="ow">or</span> <span class="o">-</span><span class="mi">1</span>
</span></span><span class="line"><span class="cl">    <span class="n">M.paste</span><span class="p">(</span><span class="n">vim.api</span><span class="p">.</span><span class="n">nvim_buf_get_lines</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="n">args.line1</span><span class="p">,</span> <span class="n">args.line2</span><span class="p">,</span> <span class="kc">false</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">  <span class="kr">end</span>
</span></span><span class="line"><span class="cl"><span class="kr">end</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>Now, you&rsquo;d just import the <code>paste</code> module and call the <code>command</code> function and
pass in the <code>args</code> parameter.</p>
<p>See: <a href="https://neovim.io/doc/user/api.html#nvim_buf_create_user_command%28%29" target="_blank" rel="noopener noreferrer"><samp>:help nvim_create_user_command</samp></a></p>
<blockquote>
<p>I have it in <code>~/.config/nvim/lua/scratch/paste.lua</code> so, I&rsquo;d need to call <code>require(&quot;scratch.paste&quot;)</code>.
If you have it in say, <code>~/.config/nvim/lua/paste.lua</code> then you&rsquo;d just need to do <code>require(&quot;paste&quot;)</code>.</p>
</blockquote>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-11-1"><a class="lnlinks" href="#hl-11-1"> 1</a>
</span><span class="lnt" id="hl-11-2"><a class="lnlinks" href="#hl-11-2"> 2</a>
</span><span class="lnt" id="hl-11-3"><a class="lnlinks" href="#hl-11-3"> 3</a>
</span><span class="lnt" id="hl-11-4"><a class="lnlinks" href="#hl-11-4"> 4</a>
</span><span class="lnt" id="hl-11-5"><a class="lnlinks" href="#hl-11-5"> 5</a>
</span><span class="lnt" id="hl-11-6"><a class="lnlinks" href="#hl-11-6"> 6</a>
</span><span class="lnt" id="hl-11-7"><a class="lnlinks" href="#hl-11-7"> 7</a>
</span><span class="lnt" id="hl-11-8"><a class="lnlinks" href="#hl-11-8"> 8</a>
</span><span class="lnt" id="hl-11-9"><a class="lnlinks" href="#hl-11-9"> 9</a>
</span><span class="lnt" id="hl-11-10"><a class="lnlinks" href="#hl-11-10">10</a>
</span><span class="lnt" id="hl-11-11"><a class="lnlinks" href="#hl-11-11">11</a>
</span><span class="lnt" id="hl-11-12"><a class="lnlinks" href="#hl-11-12">12</a>
</span><span class="lnt" id="hl-11-13"><a class="lnlinks" href="#hl-11-13">13</a>
</span><span class="lnt" id="hl-11-14"><a class="lnlinks" href="#hl-11-14">14</a>
</span><span class="lnt" id="hl-11-15"><a class="lnlinks" href="#hl-11-15">15</a>
</span><span class="lnt" id="hl-11-16"><a class="lnlinks" href="#hl-11-16">16</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-lua" data-lang="lua"><span class="line"><span class="cl"><span class="c1">-- in your init.lua</span>
</span></span><span class="line"><span class="cl"><span class="n">vim.api</span><span class="p">.</span><span class="n">nvim_create_user_command</span><span class="p">(</span><span class="s2">&#34;Paste&#34;</span><span class="p">,</span> <span class="kr">function</span><span class="p">(</span><span class="n">args</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">  <span class="n">require</span><span class="p">(</span><span class="s2">&#34;scratch.paste&#34;</span><span class="p">).</span><span class="n">command</span><span class="p">(</span><span class="n">args</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="kr">end</span><span class="p">,</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="n">desc</span> <span class="o">=</span> <span class="s2">&#34;Upload/delete files/snippets to a pastebin site.&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="n">range</span> <span class="o">=</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="n">bang</span> <span class="o">=</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="n">nargs</span> <span class="o">=</span> <span class="s2">&#34;?&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="n">complete</span> <span class="o">=</span> <span class="kr">function</span><span class="p">(</span><span class="n">arg</span><span class="p">,</span> <span class="n">name</span><span class="p">,</span> <span class="n">_</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="kr">if</span> <span class="n">name</span><span class="p">:</span><span class="n">match</span><span class="p">(</span><span class="s2">&#34;^&#39;&lt;,&#39;&gt;Paste&#34;</span><span class="p">)</span> <span class="kr">then</span> <span class="kr">return</span> <span class="p">{}</span> <span class="kr">end</span>
</span></span><span class="line"><span class="cl">    <span class="kr">if</span> <span class="n">name</span><span class="p">:</span><span class="n">match</span><span class="p">(</span><span class="s2">&#34;^Paste!&#34;</span><span class="p">)</span> <span class="kr">then</span>
</span></span><span class="line"><span class="cl">      <span class="kr">return</span> <span class="n">vim.tbl_keys</span><span class="p">(</span><span class="n">require</span><span class="p">(</span><span class="s2">&#34;scratch.paste&#34;</span><span class="p">).</span><span class="n">_responses</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="kr">end</span>
</span></span><span class="line"><span class="cl">    <span class="kr">return</span> <span class="n">vim.fn</span><span class="p">.</span><span class="n">getcompletion</span><span class="p">(</span><span class="n">arg</span><span class="p">,</span> <span class="s2">&#34;file&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">  <span class="kr">end</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"><span class="p">})</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>The custom command completion function is not complicated at all. We just check</p>
<ul>
<li>If the dumbass is using ranges. If yes then do not supply any completions.</li>
<li>If the <em>restarted</em> individual is using <code>&lt;bang&gt;</code> i.e. <code>:Paste!</code>. If they are, then supply
all response bodies list, which the user would want to delete.</li>
<li>Else supply with file paths.</li>
</ul>
<h2 id="conclusion" class="headerLink">
    <a href="#conclusion" class="header-mark"></a>Conclusion</h2><p><div class="details admonition warning open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-exclamation-triangle fa-fw"></i>Please read TOS<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content"><!--{{{-->
<p>Also, please do not forget to read the <a href="https://0x0.st/" target="_blank" rel="noopener noreferrer">TOS</a>. Like the maximum file
size you&rsquo;re allowed to upload. Try not to upload furry
porn to it. You can use <a href="https://mega.io/" target="_blank" rel="noopener noreferrer">mega.io</a> for that. And, please no gore or,
propaganda videos.</p>
<p>Just go and <a href="https://0x0.st/" target="_blank" rel="noopener noreferrer">read</a> it before you do anything stupid.</p>
</div>
        </div>
    </div><!--}}}--></p>
<p>I hope you enjoyed reading this meme 💀. If you did then comment &ldquo;Sex&rdquo; for 25 Robux.</p>
]]></description></item><item><title>Bspwm Basics</title><link>https://dharmx.is-a.dev/bspwm-basics/</link><pubDate>Wed, 24 Aug 2022 17:29:27 +0530</pubDate><author><name>dharmx</name></author><guid>https://dharmx.is-a.dev/bspwm-basics/</guid><description><![CDATA[<div class="featured-image">
                <img src="/bspwm-basics/images/featured-image.png" referrerpolicy="no-referrer">
            </div><h1 id="introduction" class="headerLink">
    <a href="#introduction" class="header-mark"></a>Introduction</h1><p>BSPWM is a neat window manager with some neat features. In this article
we will be briefly looking at how BSPWM functions and what some of its features
are.</p>
<p>Maybe analyze a bit of its source code, IPC commands and some other possible
extensions.</p>
<h2 id="before-we-begin" class="headerLink">
    <a href="#before-we-begin" class="header-mark"></a>Before We Begin</h2><p>This is a fairly intermediate article which may seem easy to follow at first but,
will get relatively difficult to follow as it progresses further. You would need
to have the following things to progress smoothly.</p>
<ul>
<li>Maybe a tiny amount of BST data structure.</li>
<li>Experience with window managers and X11.</li>
<li>Programming experience is preferred.</li>
</ul>
<p>All right! Let us begin.</p>
<h2 id="about-bspwm" class="headerLink">
    <a href="#about-bspwm" class="header-mark"></a>About BSPWM</h2><p>BSPWM is a tiling window manager that represents windows as the leaves of a <strong>full</strong>
binary tree. It uses an IPC application that invokes X events and changes BSPWM'
internal states.</p>
<p>Unlike most other window managers it does not have a dedicated configuration file.
You use the IPC client (bspc) for everything. Be it setting window gaps, border
colors, layouts, monitors, etc. For BSPWM a configuration file is just a shell
script that needs to be stored in <code>$HOME/.config/bspwm/bspwmrc</code>. It is a shell
script that should have commands that starts a keyboard daemon, notification daemon,
monitor configurations, border, gaps and other stuff as <code>bspc</code> calls. You may also
have commands that will start some startup applications like discord, bars, etc.</p>
<p>This is preferred because when BSPWM is first launched, it does not have any
state at all. You need to execute some <code>bspc</code> commands which will set an initial
state then you would be able to spawn windows and whatnot.</p>
<h3 id="display-structure" class="headerLink">
    <a href="#display-structure" class="header-mark"></a>Display Structure</h3><p>It should be noted that BSPWM is a window manager, which means it manages
windows. And it does so by representing the window tree as leaves of a
full BST.</p>
<p>For application windows to be able to spawn, BSPWM first needs to define a
root window. Which in WM lingo is called a workspace. And, after said
workspace(s) are defined, one can now finally open an application window
which will be managed by BSPWM.</p>
<p>Add on top of this information it is to be noted that BSPWM was originally
designed for a computer with only one monitor. If you are curious then
yes, the author has already added multi-monitor support. Monitors are also
treated the same as roots i.e. a list.</p>
<p>If you are still confused then the following illustration will help ease
that.</p>
<figure><a class="lightgallery" href="./svgs/bspwm-mon-ws.svg" title="BSPWM monitor-workspace relation" data-thumbnail="./svgs/bspwm-mon-ws.svg" data-sub-html="<h2>How BSPWM defines the relation between monitors and workspaces.</h2><p>BSPWM monitor-workspace relation</p>">
        <img
            
            loading="lazy"
            src="./svgs/bspwm-mon-ws.svg"
            srcset="./svgs/bspwm-mon-ws.svg, ./svgs/bspwm-mon-ws.svg 1.5x, ./svgs/bspwm-mon-ws.svg 2x"
            sizes="auto"
            alt="BSPWM monitor-workspace relation">
    </a><figcaption class="image-caption">How BSPWM defines the relation between monitors and workspaces.</figcaption>
    </figure>
<p>In this construct, the monitors stay at the topmost level. These monitors are the parents of workspaces.</p>
<h2 id="monitors" class="headerLink">
    <a href="#monitors" class="header-mark"></a>Monitors</h2><p>If we analyze the source then we will see that monitors are not represented
as a multi-branched tree rather, as a single-branched one i.e. a linked list.
Where the current monitor has links to the previous and next monitors.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-c" data-lang="c"><span class="line"><span class="ln" id="288"><a class="lnlinks" href="#288">288</a></span><span class="cl"><span class="k">typedef</span> <span class="k">struct</span> <span class="kt">monitor_t</span> <span class="kt">monitor_t</span><span class="p">;</span>
</span></span><span class="line"><span class="ln" id="289"><a class="lnlinks" href="#289">289</a></span><span class="cl"><span class="k">struct</span> <span class="kt">monitor_t</span> <span class="p">{</span>
</span></span><span class="line"><span class="ln" id="290"><a class="lnlinks" href="#290">290</a></span><span class="cl">    <span class="kt">char</span> <span class="n">name</span><span class="p">[</span><span class="n">SMALEN</span><span class="p">];</span>
</span></span><span class="line"><span class="ln" id="291"><a class="lnlinks" href="#291">291</a></span><span class="cl">    <span class="kt">uint32_t</span> <span class="n">id</span><span class="p">;</span>
</span></span><span class="line"><span class="ln" id="292"><a class="lnlinks" href="#292">292</a></span><span class="cl">    <span class="kt">xcb_randr_output_t</span> <span class="n">randr_id</span><span class="p">;</span>
</span></span><span class="line"><span class="ln" id="293"><a class="lnlinks" href="#293">293</a></span><span class="cl">    <span class="kt">xcb_window_t</span> <span class="n">root</span><span class="p">;</span>
</span></span><span class="line"><span class="ln" id="294"><a class="lnlinks" href="#294">294</a></span><span class="cl">    <span class="kt">bool</span> <span class="n">wired</span><span class="p">;</span>
</span></span><span class="line"><span class="ln" id="295"><a class="lnlinks" href="#295">295</a></span><span class="cl">    <span class="kt">padding_t</span> <span class="n">padding</span><span class="p">;</span>
</span></span><span class="line"><span class="ln" id="296"><a class="lnlinks" href="#296">296</a></span><span class="cl">    <span class="kt">unsigned</span> <span class="kt">int</span> <span class="n">sticky_count</span><span class="p">;</span>
</span></span><span class="line"><span class="ln" id="297"><a class="lnlinks" href="#297">297</a></span><span class="cl">    <span class="kt">int</span> <span class="n">window_gap</span><span class="p">;</span>
</span></span><span class="line"><span class="ln" id="298"><a class="lnlinks" href="#298">298</a></span><span class="cl">    <span class="kt">unsigned</span> <span class="kt">int</span> <span class="n">border_width</span><span class="p">;</span>
</span></span><span class="line"><span class="ln" id="299"><a class="lnlinks" href="#299">299</a></span><span class="cl">    <span class="kt">xcb_rectangle_t</span> <span class="n">rectangle</span><span class="p">;</span>
</span></span><span class="line"><span class="ln" id="300"><a class="lnlinks" href="#300">300</a></span><span class="cl">    <span class="kt">desktop_t</span> <span class="o">*</span><span class="n">desk</span><span class="p">;</span>
</span></span><span class="line"><span class="ln" id="301"><a class="lnlinks" href="#301">301</a></span><span class="cl">    <span class="kt">desktop_t</span> <span class="o">*</span><span class="n">desk_head</span><span class="p">;</span>
</span></span><span class="line"><span class="ln" id="302"><a class="lnlinks" href="#302">302</a></span><span class="cl">    <span class="kt">desktop_t</span> <span class="o">*</span><span class="n">desk_tail</span><span class="p">;</span>
</span></span><span class="line hl"><span class="ln" id="303"><a class="lnlinks" href="#303">303</a></span><span class="cl">    <span class="kt">monitor_t</span> <span class="o">*</span><span class="n">prev</span><span class="p">;</span>
</span></span><span class="line hl"><span class="ln" id="304"><a class="lnlinks" href="#304">304</a></span><span class="cl">    <span class="kt">monitor_t</span> <span class="o">*</span><span class="n">next</span><span class="p">;</span>
</span></span><span class="line"><span class="ln" id="305"><a class="lnlinks" href="#305">305</a></span><span class="cl"><span class="p">};</span></span></span></code></pre></div>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-0-1"><a class="lnlinks" href="#hl-0-1">1</a>
</span><span class="lnt" id="hl-0-2"><a class="lnlinks" href="#hl-0-2">2</a>
</span><span class="lnt" id="hl-0-3"><a class="lnlinks" href="#hl-0-3">3</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-c" data-lang="c"><span class="line"><span class="cl"><span class="c1">// code representation.
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="k">const</span> <span class="kt">int</span> <span class="n">MON_LEN</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="kt">monitor_t</span> <span class="n">monitors</span><span class="p">[</span><span class="n">MON_LEN</span><span class="p">];</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>See those <code>prev</code> and <code>next</code> variables? Here the <code>prev</code> variable points
to the previous <code>monitor_t</code> structure and <code>next</code>, next. And, if either of those
pointer variables has <code>NULL</code> then it is to be assumed that the <code>focused</code>
monitor is either at the end or at the beginning of the monitor list.</p>
<h2 id="workspaces" class="headerLink">
    <a href="#workspaces" class="header-mark"></a>Workspaces</h2><p>For desktops, the structure is pretty much the same as monitors.
That is, both desktops and monitors are represented as doubly linked lists
with links to previous and next desktops.</p>
<blockquote>
<p>Workspaces are called desktops in BSPWM. They are used interchangeably.
You will see both of them appear in this article.</p>
</blockquote>
<p>See the following code snippet.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-c" data-lang="c"><span class="line"><span class="ln" id="273"><a class="lnlinks" href="#273">273</a></span><span class="cl"><span class="k">typedef</span> <span class="k">struct</span> <span class="kt">desktop_t</span> <span class="kt">desktop_t</span><span class="p">;</span>
</span></span><span class="line"><span class="ln" id="274"><a class="lnlinks" href="#274">274</a></span><span class="cl"><span class="k">struct</span> <span class="kt">desktop_t</span> <span class="p">{</span>
</span></span><span class="line"><span class="ln" id="275"><a class="lnlinks" href="#275">275</a></span><span class="cl">    <span class="kt">char</span> <span class="n">name</span><span class="p">[</span><span class="n">SMALEN</span><span class="p">];</span>
</span></span><span class="line"><span class="ln" id="276"><a class="lnlinks" href="#276">276</a></span><span class="cl">    <span class="kt">uint32_t</span> <span class="n">id</span><span class="p">;</span>
</span></span><span class="line"><span class="ln" id="277"><a class="lnlinks" href="#277">277</a></span><span class="cl">    <span class="kt">layout_t</span> <span class="n">layout</span><span class="p">;</span>
</span></span><span class="line"><span class="ln" id="278"><a class="lnlinks" href="#278">278</a></span><span class="cl">    <span class="kt">layout_t</span> <span class="n">user_layout</span><span class="p">;</span>
</span></span><span class="line"><span class="ln" id="279"><a class="lnlinks" href="#279">279</a></span><span class="cl">    <span class="kt">node_t</span> <span class="o">*</span><span class="n">root</span><span class="p">;</span>
</span></span><span class="line"><span class="ln" id="280"><a class="lnlinks" href="#280">280</a></span><span class="cl">    <span class="kt">node_t</span> <span class="o">*</span><span class="n">focus</span><span class="p">;</span>
</span></span><span class="line hl"><span class="ln" id="281"><a class="lnlinks" href="#281">281</a></span><span class="cl">    <span class="kt">desktop_t</span> <span class="o">*</span><span class="n">prev</span><span class="p">;</span>
</span></span><span class="line hl"><span class="ln" id="282"><a class="lnlinks" href="#282">282</a></span><span class="cl">    <span class="kt">desktop_t</span> <span class="o">*</span><span class="n">next</span><span class="p">;</span>
</span></span><span class="line"><span class="ln" id="283"><a class="lnlinks" href="#283">283</a></span><span class="cl">    <span class="kt">padding_t</span> <span class="n">padding</span><span class="p">;</span>
</span></span><span class="line"><span class="ln" id="284"><a class="lnlinks" href="#284">284</a></span><span class="cl">    <span class="kt">int</span> <span class="n">window_gap</span><span class="p">;</span>
</span></span><span class="line"><span class="ln" id="285"><a class="lnlinks" href="#285">285</a></span><span class="cl">    <span class="kt">unsigned</span> <span class="kt">int</span> <span class="n">border_width</span><span class="p">;</span>
</span></span><span class="line"><span class="ln" id="286"><a class="lnlinks" href="#286">286</a></span><span class="cl"><span class="p">};</span></span></span></code></pre></div>
<h3 id="monitor-workspace-relation" class="headerLink">
    <a href="#monitor-workspace-relation" class="header-mark"></a>Monitor-Workspace Relation</h3><p>The following figure attempts to briefly define the monitor-workspace
relation in BSPWM that takes the above <code>monitor_t</code> and <code>desktop_t</code>
definitions into account.</p>
<figure><a class="lightgallery" href="./svgs/linked-list-bspwm.svg" title="BSPWM Monitor-Workspace Relation" data-thumbnail="./svgs/linked-list-bspwm.svg" data-sub-html="<h2>Representing monitor-workspace in the form of linked lists.</h2><p>BSPWM Monitor-Workspace Relation</p>">
        <img
            
            loading="lazy"
            src="./svgs/linked-list-bspwm.svg"
            srcset="./svgs/linked-list-bspwm.svg, ./svgs/linked-list-bspwm.svg 1.5x, ./svgs/linked-list-bspwm.svg 2x"
            sizes="auto"
            alt="BSPWM Monitor-Workspace Relation">
    </a><figcaption class="image-caption">Representing monitor-workspace in the form of linked lists.</figcaption>
    </figure>
<p>The first monitor (marked in green) has three desktops where the label
of the first desktop is identified by <code>(+)</code>, second by <code>(-)</code> and lastly
third by <code>(=)</code>.</p>
<p>It should be worth noting that having duplicate labels are possible
because the window manager does not identify workspaces from labels
rather they use the ID of that desktop/workspace. You can check what
the current IDs with a simple query to BSPWM via the <code>bspc</code> IPC client.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-1-1"><a class="lnlinks" href="#hl-1-1"> 1</a>
</span><span class="lnt" id="hl-1-2"><a class="lnlinks" href="#hl-1-2"> 2</a>
</span><span class="lnt" id="hl-1-3"><a class="lnlinks" href="#hl-1-3"> 3</a>
</span><span class="lnt" id="hl-1-4"><a class="lnlinks" href="#hl-1-4"> 4</a>
</span><span class="lnt" id="hl-1-5"><a class="lnlinks" href="#hl-1-5"> 5</a>
</span><span class="lnt" id="hl-1-6"><a class="lnlinks" href="#hl-1-6"> 6</a>
</span><span class="lnt" id="hl-1-7"><a class="lnlinks" href="#hl-1-7"> 7</a>
</span><span class="lnt" id="hl-1-8"><a class="lnlinks" href="#hl-1-8"> 8</a>
</span><span class="lnt" id="hl-1-9"><a class="lnlinks" href="#hl-1-9"> 9</a>
</span><span class="lnt" id="hl-1-10"><a class="lnlinks" href="#hl-1-10">10</a>
</span><span class="lnt" id="hl-1-11"><a class="lnlinks" href="#hl-1-11">11</a>
</span><span class="lnt" id="hl-1-12"><a class="lnlinks" href="#hl-1-12">12</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">$ bspc query --desktops <span class="c1"># IDs</span>
</span></span><span class="line"><span class="cl">0x00400004
</span></span><span class="line"><span class="cl">0x00400005
</span></span><span class="line"><span class="cl">0x00400006
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">$ bspc query --names --desktops <span class="c1"># Labels</span>
</span></span><span class="line"><span class="cl"><span class="o">(</span>+<span class="o">)</span>
</span></span><span class="line"><span class="cl"><span class="o">(</span>-<span class="o">)</span>
</span></span><span class="line"><span class="cl"><span class="o">(=)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1"># change primary monitor number of desktops and labels</span>
</span></span><span class="line"><span class="cl">$ bspc monitor primary --reset-desktops <span class="m">1</span> <span class="m">2</span> <span class="m">3</span>
</span></span></code></pre></td></tr></table>
</div>
</div><h2 id="the-bst-data-structure" class="headerLink">
    <a href="#the-bst-data-structure" class="header-mark"></a>The BST data structure</h2><p>The Binary Tree data structure is a way of representing data in the form of a
tree. A BST is a special case of a tree that only has two children.
As with all trees (both natural and pragmatic), this one also has leaves and branches.
The leaves are called nodes which is the term we will use from now on.</p>
<figure><a class="lightgallery" href="./svgs/bst.svg" title="A Binary Tree" data-thumbnail="./svgs/bst.svg" data-sub-html="<h2>A brief descriptive illustration of a binary tree.</h2><p>A Binary Tree</p>">
        <img
            
            loading="lazy"
            src="./svgs/bst.svg"
            srcset="./svgs/bst.svg, ./svgs/bst.svg 1.5x, ./svgs/bst.svg 2x"
            sizes="auto"
            alt="A Binary Tree">
    </a><figcaption class="image-caption">A brief descriptive illustration of a binary tree.</figcaption>
    </figure>
<p>You may also notice that the nodes are colored differently.
The colors signify levels. For instance, the root level node is colored
with 

  <mark class="bspwm-basics-mark-index-green">green</mark>

. The second
level nodes are colored with 

  <mark class="bspwm-basics-mark-index-blue">blue</mark>


and lastly the third level nodes are colored with


  <mark class="bspwm-basics-mark-index-red">red</mark>

.</p>
<p>A BST node would look like the following in C.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-2-1"><a class="lnlinks" href="#hl-2-1">1</a>
</span><span class="lnt" id="hl-2-2"><a class="lnlinks" href="#hl-2-2">2</a>
</span><span class="lnt" id="hl-2-3"><a class="lnlinks" href="#hl-2-3">3</a>
</span><span class="lnt" id="hl-2-4"><a class="lnlinks" href="#hl-2-4">4</a>
</span><span class="lnt" id="hl-2-5"><a class="lnlinks" href="#hl-2-5">5</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-c" data-lang="c"><span class="line"><span class="cl"><span class="k">struct</span> <span class="n">node</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="kt">int</span> <span class="n">some_data</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kt">node_t</span> <span class="o">*</span><span class="n">left_child</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kt">node_t</span> <span class="o">*</span><span class="n">right_child</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">};</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>This node will contain a pointer to the left child and another to the right child.
Left and right child are siblings as illustrated in the diagram. And,
<code>some_data</code> which is the data that the node will be carrying.
Now, consider the following code to get a clearer visualization of how the node
is being initialized and how some basic components work.</p>


<p>
  <details >
  <summary markdown="span">Minimal BST implementation in C</summary>
  <div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-0-1"><a class="lnlinks" href="#hl-0-1"> 1</a>
</span><span class="lnt" id="hl-0-2"><a class="lnlinks" href="#hl-0-2"> 2</a>
</span><span class="lnt" id="hl-0-3"><a class="lnlinks" href="#hl-0-3"> 3</a>
</span><span class="lnt" id="hl-0-4"><a class="lnlinks" href="#hl-0-4"> 4</a>
</span><span class="lnt" id="hl-0-5"><a class="lnlinks" href="#hl-0-5"> 5</a>
</span><span class="lnt" id="hl-0-6"><a class="lnlinks" href="#hl-0-6"> 6</a>
</span><span class="lnt" id="hl-0-7"><a class="lnlinks" href="#hl-0-7"> 7</a>
</span><span class="lnt" id="hl-0-8"><a class="lnlinks" href="#hl-0-8"> 8</a>
</span><span class="lnt" id="hl-0-9"><a class="lnlinks" href="#hl-0-9"> 9</a>
</span><span class="lnt" id="hl-0-10"><a class="lnlinks" href="#hl-0-10">10</a>
</span><span class="lnt" id="hl-0-11"><a class="lnlinks" href="#hl-0-11">11</a>
</span><span class="lnt" id="hl-0-12"><a class="lnlinks" href="#hl-0-12">12</a>
</span><span class="lnt" id="hl-0-13"><a class="lnlinks" href="#hl-0-13">13</a>
</span><span class="lnt" id="hl-0-14"><a class="lnlinks" href="#hl-0-14">14</a>
</span><span class="lnt" id="hl-0-15"><a class="lnlinks" href="#hl-0-15">15</a>
</span><span class="lnt" id="hl-0-16"><a class="lnlinks" href="#hl-0-16">16</a>
</span><span class="lnt" id="hl-0-17"><a class="lnlinks" href="#hl-0-17">17</a>
</span><span class="lnt" id="hl-0-18"><a class="lnlinks" href="#hl-0-18">18</a>
</span><span class="lnt" id="hl-0-19"><a class="lnlinks" href="#hl-0-19">19</a>
</span><span class="lnt" id="hl-0-20"><a class="lnlinks" href="#hl-0-20">20</a>
</span><span class="lnt" id="hl-0-21"><a class="lnlinks" href="#hl-0-21">21</a>
</span><span class="lnt" id="hl-0-22"><a class="lnlinks" href="#hl-0-22">22</a>
</span><span class="lnt" id="hl-0-23"><a class="lnlinks" href="#hl-0-23">23</a>
</span><span class="lnt" id="hl-0-24"><a class="lnlinks" href="#hl-0-24">24</a>
</span><span class="lnt" id="hl-0-25"><a class="lnlinks" href="#hl-0-25">25</a>
</span><span class="lnt" id="hl-0-26"><a class="lnlinks" href="#hl-0-26">26</a>
</span><span class="lnt" id="hl-0-27"><a class="lnlinks" href="#hl-0-27">27</a>
</span><span class="lnt" id="hl-0-28"><a class="lnlinks" href="#hl-0-28">28</a>
</span><span class="lnt" id="hl-0-29"><a class="lnlinks" href="#hl-0-29">29</a>
</span><span class="lnt" id="hl-0-30"><a class="lnlinks" href="#hl-0-30">30</a>
</span><span class="lnt" id="hl-0-31"><a class="lnlinks" href="#hl-0-31">31</a>
</span><span class="lnt" id="hl-0-32"><a class="lnlinks" href="#hl-0-32">32</a>
</span><span class="lnt" id="hl-0-33"><a class="lnlinks" href="#hl-0-33">33</a>
</span><span class="lnt" id="hl-0-34"><a class="lnlinks" href="#hl-0-34">34</a>
</span><span class="lnt" id="hl-0-35"><a class="lnlinks" href="#hl-0-35">35</a>
</span><span class="lnt" id="hl-0-36"><a class="lnlinks" href="#hl-0-36">36</a>
</span><span class="lnt" id="hl-0-37"><a class="lnlinks" href="#hl-0-37">37</a>
</span><span class="lnt" id="hl-0-38"><a class="lnlinks" href="#hl-0-38">38</a>
</span><span class="lnt" id="hl-0-39"><a class="lnlinks" href="#hl-0-39">39</a>
</span><span class="lnt" id="hl-0-40"><a class="lnlinks" href="#hl-0-40">40</a>
</span><span class="lnt" id="hl-0-41"><a class="lnlinks" href="#hl-0-41">41</a>
</span><span class="lnt" id="hl-0-42"><a class="lnlinks" href="#hl-0-42">42</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-c" data-lang="c"><span class="line"><span class="cl"><span class="k">typedef</span> <span class="k">struct</span> <span class="kt">node_t</span> <span class="kt">node_t</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="k">struct</span> <span class="kt">node_t</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="kt">int</span> <span class="n">data</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kt">node_t</span><span class="o">*</span> <span class="n">left</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kt">node_t</span><span class="o">*</span> <span class="n">right</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">};</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="kt">int</span>
</span></span><span class="line"><span class="cl"><span class="nf">main</span><span class="p">(</span><span class="kt">void</span><span class="p">)</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="kt">node_t</span> <span class="n">root</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kt">node_t</span> <span class="n">left</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kt">node_t</span> <span class="n">left_left</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kt">node_t</span> <span class="n">left_right</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kt">node_t</span> <span class="n">right</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">    <span class="n">root</span><span class="p">.</span><span class="n">data</span>       <span class="o">=</span> <span class="mi">10</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="n">left</span><span class="p">.</span><span class="n">data</span>       <span class="o">=</span> <span class="mi">11</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="n">left_left</span><span class="p">.</span><span class="n">data</span>  <span class="o">=</span> <span class="mi">124</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="n">left_right</span><span class="p">.</span><span class="n">data</span> <span class="o">=</span> <span class="mi">89</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="n">right</span><span class="p">.</span><span class="n">data</span>      <span class="o">=</span> <span class="mi">19</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">    <span class="n">root</span><span class="p">.</span><span class="n">right</span> <span class="o">=</span> <span class="o">&amp;</span><span class="n">right</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="n">root</span><span class="p">.</span><span class="n">left</span>  <span class="o">=</span> <span class="o">&amp;</span><span class="n">left</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="n">left</span><span class="p">.</span><span class="n">left</span>  <span class="o">=</span> <span class="o">&amp;</span><span class="n">left_left</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="n">left</span><span class="p">.</span><span class="n">right</span> <span class="o">=</span> <span class="o">&amp;</span><span class="n">left_right</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">    <span class="nf">printf</span><span class="p">(</span><span class="s">&#34;   %d</span><span class="se">\n</span><span class="s">&#34;</span>
</span></span><span class="line"><span class="cl">           <span class="s">&#34;    |</span><span class="se">\n</span><span class="s">&#34;</span>
</span></span><span class="line"><span class="cl">           <span class="s">&#34;   / </span><span class="se">\\\n</span><span class="s">&#34;</span>
</span></span><span class="line"><span class="cl">           <span class="s">&#34;  %d  %d</span><span class="se">\n</span><span class="s">&#34;</span>
</span></span><span class="line"><span class="cl">           <span class="s">&#34;   |</span><span class="se">\n</span><span class="s">&#34;</span>
</span></span><span class="line"><span class="cl">           <span class="s">&#34;  / </span><span class="se">\\\n</span><span class="s">&#34;</span>
</span></span><span class="line"><span class="cl">           <span class="s">&#34;%d  %d</span><span class="se">\n</span><span class="s">&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">           <span class="n">root</span><span class="p">.</span><span class="n">data</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">           <span class="n">root</span><span class="p">.</span><span class="n">left</span><span class="o">-&gt;</span><span class="n">data</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">           <span class="n">root</span><span class="p">.</span><span class="n">right</span><span class="o">-&gt;</span><span class="n">data</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">           <span class="n">root</span><span class="p">.</span><span class="n">left</span><span class="o">-&gt;</span><span class="n">left</span><span class="o">-&gt;</span><span class="n">data</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">           <span class="n">root</span><span class="p">.</span><span class="n">left</span><span class="o">-&gt;</span><span class="n">right</span><span class="o">-&gt;</span><span class="n">data</span><span class="p">);</span>
</span></span><span class="line"><span class="cl">    <span class="k">return</span> <span class="mi">0</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1">// vim:filetype=c
</span></span></span></code></pre></td></tr></table>
</div>
</div><div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-1-1"><a class="lnlinks" href="#hl-1-1">1</a>
</span><span class="lnt" id="hl-1-2"><a class="lnlinks" href="#hl-1-2">2</a>
</span><span class="lnt" id="hl-1-3"><a class="lnlinks" href="#hl-1-3">3</a>
</span><span class="lnt" id="hl-1-4"><a class="lnlinks" href="#hl-1-4">4</a>
</span><span class="lnt" id="hl-1-5"><a class="lnlinks" href="#hl-1-5">5</a>
</span><span class="lnt" id="hl-1-6"><a class="lnlinks" href="#hl-1-6">6</a>
</span><span class="lnt" id="hl-1-7"><a class="lnlinks" href="#hl-1-7">7</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-txt" data-lang="txt"><span class="line"><span class="cl">   10
</span></span><span class="line"><span class="cl">    |
</span></span><span class="line"><span class="cl">   / \
</span></span><span class="line"><span class="cl">  11  19
</span></span><span class="line"><span class="cl">   |
</span></span><span class="line"><span class="cl">  / \
</span></span><span class="line"><span class="cl">124  89
</span></span></code></pre></td></tr></table>
</div>
</div>
  </details>
</p>

<p>The above code is a recreation of the binary tree diagram that you came
across in the beginning. Play with it to get a feel for BSTs.</p>
<p>Similarly, BSPWM interprets a window as a node and then maps them into a tree.
Now, following is a part of BSPWM source code that defines a tree node.
Seems quite intuitive and easy to understand right?</p>
<div class="details admonition note open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-pencil-alt fa-fw"></i>Note<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">Do not try to understand what each variable does. Just take a note
of the similarities between the two node definitions.</div>
        </div>
    </div>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-3-1"><a class="lnlinks" href="#hl-3-1"> 1</a>
</span><span class="lnt" id="hl-3-2"><a class="lnlinks" href="#hl-3-2"> 2</a>
</span><span class="lnt" id="hl-3-3"><a class="lnlinks" href="#hl-3-3"> 3</a>
</span><span class="lnt" id="hl-3-4"><a class="lnlinks" href="#hl-3-4"> 4</a>
</span><span class="lnt" id="hl-3-5"><a class="lnlinks" href="#hl-3-5"> 5</a>
</span><span class="lnt" id="hl-3-6"><a class="lnlinks" href="#hl-3-6"> 6</a>
</span><span class="lnt" id="hl-3-7"><a class="lnlinks" href="#hl-3-7"> 7</a>
</span><span class="lnt" id="hl-3-8"><a class="lnlinks" href="#hl-3-8"> 8</a>
</span><span class="lnt" id="hl-3-9"><a class="lnlinks" href="#hl-3-9"> 9</a>
</span><span class="lnt" id="hl-3-10"><a class="lnlinks" href="#hl-3-10">10</a>
</span><span class="lnt" id="hl-3-11"><a class="lnlinks" href="#hl-3-11">11</a>
</span><span class="lnt" id="hl-3-12"><a class="lnlinks" href="#hl-3-12">12</a>
</span><span class="lnt" id="hl-3-13"><a class="lnlinks" href="#hl-3-13">13</a>
</span><span class="lnt" id="hl-3-14"><a class="lnlinks" href="#hl-3-14">14</a>
</span><span class="lnt" id="hl-3-15"><a class="lnlinks" href="#hl-3-15">15</a>
</span><span class="lnt" id="hl-3-16"><a class="lnlinks" href="#hl-3-16">16</a>
</span><span class="lnt" id="hl-3-17"><a class="lnlinks" href="#hl-3-17">17</a>
</span><span class="lnt" id="hl-3-18"><a class="lnlinks" href="#hl-3-18">18</a>
</span><span class="lnt" id="hl-3-19"><a class="lnlinks" href="#hl-3-19">19</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-c" data-lang="c"><span class="line"><span class="cl"><span class="k">typedef</span> <span class="k">struct</span> <span class="kt">node_t</span> <span class="kt">node_t</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="k">struct</span> <span class="kt">node_t</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="kt">uint32_t</span> <span class="n">id</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kt">split_type_t</span> <span class="n">split_type</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kt">double</span> <span class="n">split_ratio</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kt">presel_t</span> <span class="o">*</span><span class="n">presel</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kt">xcb_rectangle_t</span> <span class="n">rectangle</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kt">constraints_t</span> <span class="n">constraints</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kt">bool</span> <span class="n">vacant</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kt">bool</span> <span class="n">hidden</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kt">bool</span> <span class="n">sticky</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kt">bool</span> <span class="n">private</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kt">bool</span> <span class="n">locked</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kt">bool</span> <span class="n">marked</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kt">node_t</span> <span class="o">*</span><span class="n">first_child</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kt">node_t</span> <span class="o">*</span><span class="n">second_child</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kt">node_t</span> <span class="o">*</span><span class="n">parent</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kt">client_t</span> <span class="o">*</span><span class="n">client</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">};</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>This is just a guess but the reason the author calls <code>left_child</code> and
<code>right_child</code>, <code>first_child</code> and <code>second_child</code> is due to how the windows
(nodes) are spawned. That is, the <strong>first</strong> window is spawned which
is by name, the firstborn of the current parent and the <strong>second</strong>
child is the second-born of the parent. It is done to guide intuition
when reading the code.</p>
<h2 id="automatic-mode" class="headerLink">
    <a href="#automatic-mode" class="header-mark"></a>Automatic Mode</h2><p>This is a bit tricky to explain. So, we must tread carefully in order
to avoid making things confusing.</p>
<p>Previously, we saw that BSPWM represents monitors and desktops as
a doubly linked list. Windows are represented as leaves of a full binary
tree. Opening a new window in BSPWM is called an &ldquo;insertion&rdquo; where the
window is a node that is to be inserted to a point on a binary tree
as a child of a parent.</p>
<p>Now, insertion has two modes in BSPWM, automatic and manual. The
automatic mode consists of several types or, rather the ways, patterns
of how a node/window should be tiled.
Such ways are called schemes and there are three such schemes.</p>
<ul>
<li>Alternate scheme</li>
<li>Longest-side scheme</li>
<li>Spiral scheme</li>
</ul>
<p>You can change the automatic scheme by issuing a <code>bspc</code> call as the
following.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-4-1"><a class="lnlinks" href="#hl-4-1">1</a>
</span><span class="lnt" id="hl-4-2"><a class="lnlinks" href="#hl-4-2">2</a>
</span><span class="lnt" id="hl-4-3"><a class="lnlinks" href="#hl-4-3">3</a>
</span><span class="lnt" id="hl-4-4"><a class="lnlinks" href="#hl-4-4">4</a>
</span><span class="lnt" id="hl-4-5"><a class="lnlinks" href="#hl-4-5">5</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">$ bspc config automatic_scheme <span class="c1"># prints the current value</span>
</span></span><span class="line"><span class="cl">&gt; alternate
</span></span><span class="line"><span class="cl">$ bspc config automatic_scheme longest_side
</span></span><span class="line"><span class="cl">$ bspc config automatic_scheme alternate
</span></span><span class="line"><span class="cl">$ bspc config automatic_scheme spiral
</span></span></code></pre></td></tr></table>
</div>
</div><p>Now, in my opinion understanding the alternate (default) scheme would be the
quickest way for a confused beginner to grasp the general workings of BSPWM.
So, I will attempt to explain that first.</p>
<h3 id="alternate-scheme" class="headerLink">
    <a href="#alternate-scheme" class="header-mark"></a>Alternate Scheme</h3><p>I will be explaining this with an example where new windows will be
opened step by step and in those steps it will be explained how BSPWM
arranges those windows. I will be aliasing these steps by zero, initial, first,
second, &hellip; and last.</p>
<h4 id="null-state" class="headerLink">
    <a href="#null-state" class="header-mark"></a>Null State</h4><figure><a class="lightgallery" href="./images/alternate-0.png" title="Null state desktop." data-thumbnail="./images/alternate-0.png" data-sub-html="<h2>The null state of the alternate scheme.</h2><p>Null state desktop.</p>">
        <img
            
            loading="lazy"
            src="./images/alternate-0.png"
            srcset="./images/alternate-0.png, ./images/alternate-0.png 1.5x, ./images/alternate-0.png 2x"
            sizes="auto"
            alt="Null state desktop.">
    </a><figcaption class="image-caption">The null state of the alternate scheme.</figcaption>
    </figure>
<p>Well, that is just my wallpaper 😢. Anyway, this is a state where windows
are yet to be spawned. It is just an empty desktop at the moment.</p>
<h4 id="initial-state" class="headerLink">
    <a href="#initial-state" class="header-mark"></a>Initial State</h4><figure><a class="lightgallery" href="./svgs/alternate-1.svg" title="Initial state diagram." data-thumbnail="./svgs/alternate-1.svg" data-sub-html="<h2>The initial state diagram of the alternate scheme (diagram).</h2><p>Initial state diagram.</p>">
        <img
            
            loading="lazy"
            src="./svgs/alternate-1.svg"
            srcset="./svgs/alternate-1.svg, ./svgs/alternate-1.svg 1.5x, ./svgs/alternate-1.svg 2x"
            sizes="auto"
            alt="Initial state diagram.">
    </a><figcaption class="image-caption">The initial state diagram of the alternate scheme (diagram).</figcaption>
    </figure>
<figure><a class="lightgallery" href="./images/alternate-1.png" title="Initial state desktop." data-thumbnail="./images/alternate-1.png" data-sub-html="<h2>The initial desktop state of the alternate scheme.</h2><p>Initial state desktop.</p>">
        <img
            
            loading="lazy"
            src="./images/alternate-1.png"
            srcset="./images/alternate-1.png, ./images/alternate-1.png 1.5x, ./images/alternate-1.png 2x"
            sizes="auto"
            alt="Initial state desktop.">
    </a><figcaption class="image-caption">The initial desktop state of the alternate scheme.</figcaption>
    </figure>
<p>Here, we have just spawned a terminal window. Now, the desktop is at
an initial state. Where a new window/node has been <em>inserted</em>.</p>
<div class="details admonition quote open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-quote-right fa-fw"></i>From the BSPWM Readme.<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">By default the insertion point is the focused window and its insertion
mode is automatic.</div>
        </div>
    </div>
<h4 id="second-state" class="headerLink">
    <a href="#second-state" class="header-mark"></a>Second State</h4><figure><a class="lightgallery" href="./svgs/alternate-2.svg" title="Second state diagram." data-thumbnail="./svgs/alternate-2.svg" data-sub-html="<h2>The second state diagram of the alternate scheme (diagram).</h2><p>Second state diagram.</p>">
        <img
            
            loading="lazy"
            src="./svgs/alternate-2.svg"
            srcset="./svgs/alternate-2.svg, ./svgs/alternate-2.svg 1.5x, ./svgs/alternate-2.svg 2x"
            sizes="auto"
            alt="Second state diagram.">
    </a><figcaption class="image-caption">The second state diagram of the alternate scheme (diagram).</figcaption>
    </figure>
<figure><a class="lightgallery" href="./images/alternate-2.png" title="Second state desktop." data-thumbnail="./images/alternate-2.png" data-sub-html="<h2>The second desktop state of the alternate scheme.</h2><p>Second state desktop.</p>">
        <img
            
            loading="lazy"
            src="./images/alternate-2.png"
            srcset="./images/alternate-2.png, ./images/alternate-2.png 1.5x, ./images/alternate-2.png 2x"
            sizes="auto"
            alt="Second state desktop.">
    </a><figcaption class="image-caption">The second desktop state of the alternate scheme.</figcaption>
    </figure>
<p>Following is a simplified code snippet of the second state.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-5-1"><a class="lnlinks" href="#hl-5-1">1</a>
</span><span class="lnt" id="hl-5-2"><a class="lnlinks" href="#hl-5-2">2</a>
</span><span class="lnt" id="hl-5-3"><a class="lnlinks" href="#hl-5-3">3</a>
</span><span class="lnt" id="hl-5-4"><a class="lnlinks" href="#hl-5-4">4</a>
</span><span class="lnt" id="hl-5-5"><a class="lnlinks" href="#hl-5-5">5</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-c" data-lang="c"><span class="line"><span class="cl"><span class="cp"># assert new_node != first_child
</span></span></span><span class="line"><span class="cl"><span class="cp"></span><span class="k">if</span> <span class="p">(</span><span class="nf">is_first_child</span><span class="p">(</span><span class="n">new_node</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">  <span class="n">node</span><span class="o">-&gt;</span><span class="n">second_child</span> <span class="o">=</span> <span class="n">new_node</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="k">else</span>
</span></span><span class="line"><span class="cl">  <span class="n">node</span><span class="o">-&gt;</span><span class="n">first_child</span> <span class="o">=</span> <span class="n">new_node</span><span class="p">;</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>The above snippet checks if the <code>new_node</code> that is to be inserted is
the first child of the parent node or, not and if it is then the
second node attribute of the parent node will be pointing to the
<code>new_node</code>.</p>
<p>Now, the <code>first_child</code> has a sibling i.e. the <code>second_child</code>. They are
brothers. By using <code>bspc</code> you can verify if they are truly brothers
or, not. Try issuing the following command. You can be focused
in either the left or, the right window.</p>
<p>For verification, you first need to obtain the window IDs of
those two windows. Let&rsquo;s say right one is <code>0x3000006</code> and
left <code>0x2600006</code> in my case. You can see the above picture with
two windows open as a reference.</p>
<p>Anyway, I&rsquo;ll focus on the window with ID <code>0x3000006</code> (right) and
type the following command. We will be now check if typing
that results in the opposite window&rsquo;s ID (left).</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-6-1"><a class="lnlinks" href="#hl-6-1">1</a>
</span><span class="lnt" id="hl-6-2"><a class="lnlinks" href="#hl-6-2">2</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">$ bspc query --nodes --node @brother
</span></span><span class="line"><span class="cl">&gt; 0x3000006
</span></span></code></pre></td></tr></table>
</div>
</div><p>As, you can see it gives out the window ID of the window on the left.
Additionally, close the window on the left and type that same command
into the terminal. You will see <code>STDERR</code> is being returned instead as
now the <code>first_child</code> has been assigned the <code>NULL</code> pointer.
Type the following command for verification. It will catch that
<code>STDERR</code> and convert it to a falseish value or, trueish if not <code>STDERR</code>.
The command will print <code>NO</code> if the <code>bspc</code> call results in <code>STDERR</code>,
<code>YES</code> otherwise.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-7-1"><a class="lnlinks" href="#hl-7-1">1</a>
</span><span class="lnt" id="hl-7-2"><a class="lnlinks" href="#hl-7-2">2</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">$ bspc query --nodes --node @brother <span class="o">&amp;&amp;</span> <span class="nb">echo</span> YES <span class="o">||</span> <span class="nb">echo</span> NO
</span></span><span class="line"><span class="cl">&gt; NO
</span></span></code></pre></td></tr></table>
</div>
</div><h4 id="third-state" class="headerLink">
    <a href="#third-state" class="header-mark"></a>Third State</h4><figure><a class="lightgallery" href="./svgs/alternate-3.svg" title="Third state diagram." data-thumbnail="./svgs/alternate-3.svg" data-sub-html="<h2>The third state diagram of the alternate scheme (diagram).</h2><p>Third state diagram.</p>">
        <img
            
            loading="lazy"
            src="./svgs/alternate-3.svg"
            srcset="./svgs/alternate-3.svg, ./svgs/alternate-3.svg 1.5x, ./svgs/alternate-3.svg 2x"
            sizes="auto"
            alt="Third state diagram.">
    </a><figcaption class="image-caption">The third state diagram of the alternate scheme (diagram).</figcaption>
    </figure>
<figure><a class="lightgallery" href="./images/alternate-3.png" title="Third state desktop." data-thumbnail="./images/alternate-3.png" data-sub-html="<h2>The third desktop state of the alternate scheme.</h2><p>Third state desktop.</p>">
        <img
            
            loading="lazy"
            src="./images/alternate-3.png"
            srcset="./images/alternate-3.png, ./images/alternate-3.png 1.5x, ./images/alternate-3.png 2x"
            sizes="auto"
            alt="Third state desktop.">
    </a><figcaption class="image-caption">The third desktop state of the alternate scheme.</figcaption>
    </figure>
<p>This is probably a good time to mention what nodes <code>A</code> and <code>B</code>
mean. Currently, node <code>A</code> is the parent of nodes <code>B</code> and <code>1</code> and node <code>B</code>
is the parent of nodes <code>2</code> and <code>3</code>.</p>
<p>They are called parent nodes or, as BSPWM defines it, internal nodes.
They will only appear when a <code>second_child</code> is about to be born. So,
for example going back to the <a href="#second-state" rel="">second state</a>
we need to understand that parent <code>A</code> will not appear until it is time
for a second child <code>2</code> to be born. So, in this case, <em>before</em> the second
child is born the first child is shifted to the left of a new node and
the second child is attached to the right of that new node. And, that new
node now becomes the parent of those two nodes. Additionally, keep in
mind that internal nodes are not visible. When a node gets divided
in two an internal node gets created and stays below the <code>first_child</code>
and <code>second_child</code>.</p>
<div class="details admonition note open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-pencil-alt fa-fw"></i>Why does the second child get assigned to the right side of the parent?<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content"><p>In automatic modes the direction in which the windows will be fragmented
is called the initial polarity. And, by default, that polarity is set
to the <code>second_child</code> (here <code>second_child</code> means the right side of the parent).
That is why you see <code>1</code> shifted to the left and <code>2</code> to the right.
And, similarly, <code>2</code> gets assigned to the left and <code>3</code> to the right.</p>
<p>This initial polarity can be changed by issuing the following command.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-0-1"><a class="lnlinks" href="#hl-0-1">1</a>
</span><span class="lnt" id="hl-0-2"><a class="lnlinks" href="#hl-0-2">2</a>
</span><span class="lnt" id="hl-0-3"><a class="lnlinks" href="#hl-0-3">3</a>
</span><span class="lnt" id="hl-0-4"><a class="lnlinks" href="#hl-0-4">4</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">$ bspc config initial_polarity <span class="c1"># prints the current value</span>
</span></span><span class="line"><span class="cl">&gt; second_child
</span></span><span class="line"><span class="cl">$ bspc config initial_polarity first_child
</span></span><span class="line"><span class="cl">$ bspc config initial_polarity second_child <span class="c1"># restore</span>
</span></span></code></pre></td></tr></table>
</div>
</div></div>
        </div>
    </div>
<p>Moving forward, we now need to confirm a few things to make things a bit clearer.
For starters move to an empty desktop/workspace and open a window and see if the window has any parents or, not.
Do this by issuing the following command.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-8-1"><a class="lnlinks" href="#hl-8-1">1</a>
</span><span class="lnt" id="hl-8-2"><a class="lnlinks" href="#hl-8-2">2</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">$ bspc query --nodes --node @parent <span class="o">&amp;&amp;</span> <span class="nb">echo</span> NO <span class="o">||</span> <span class="nb">echo</span> YES
</span></span><span class="line"><span class="cl">&gt; YES
</span></span></code></pre></td></tr></table>
</div>
</div><p>Printing <code>YES</code> means that the command returns <code>STDERR</code> which means
that the terminal window that you are typing in has no parent.
Similarly, open another window and you will see that the command
now returning <code>NO</code> which means that the first terminal window
and the second one now have a common parent and that they are
brothers.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-9-1"><a class="lnlinks" href="#hl-9-1">1</a>
</span><span class="lnt" id="hl-9-2"><a class="lnlinks" href="#hl-9-2">2</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">$ bspc query --nodes --node @parent <span class="c1"># bspc query -N -n @parent also works</span>
</span></span><span class="line"><span class="cl">&gt; 0x004000AB
</span></span></code></pre></td></tr></table>
</div>
</div><p>In the above command <code>0x004000AB</code> is the window ID of the parent.
Now, close everything in that desktop and open two new terminal windows.
Obtain their window IDs using <a href="https://github.com/freedesktop/xorg-xwininfo" target="_blank" rel="noopener noreferrer">xwininfo</a>.</p>
<figure><a class="lightgallery" href="./images/xwininfo.png" title="Two new terminal windows" data-thumbnail="./images/xwininfo.png" data-sub-html="<h2>xorg-xwininfo in action.</h2><p>Two new terminal windows</p>">
        <img
            
            loading="lazy"
            src="./images/xwininfo.png"
            srcset="./images/xwininfo.png, ./images/xwininfo.png 1.5x, ./images/xwininfo.png 2x"
            sizes="auto"
            alt="Two new terminal windows">
    </a><figcaption class="image-caption">xorg-xwininfo in action.</figcaption>
    </figure>
<p>As the above image suggests, <code>0x3400006</code> and <code>0x2C00006</code> are the window IDs
of the left and right nodes. Now, we need to confirm if they both have
the same parent. Consider typing <code>bspc query -N -n @parent</code> in both of
the windows and see if they match. And, they will 😄.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-10-1"><a class="lnlinks" href="#hl-10-1"> 1</a>
</span><span class="lnt" id="hl-10-2"><a class="lnlinks" href="#hl-10-2"> 2</a>
</span><span class="lnt" id="hl-10-3"><a class="lnlinks" href="#hl-10-3"> 3</a>
</span><span class="lnt" id="hl-10-4"><a class="lnlinks" href="#hl-10-4"> 4</a>
</span><span class="lnt" id="hl-10-5"><a class="lnlinks" href="#hl-10-5"> 5</a>
</span><span class="lnt" id="hl-10-6"><a class="lnlinks" href="#hl-10-6"> 6</a>
</span><span class="lnt" id="hl-10-7"><a class="lnlinks" href="#hl-10-7"> 7</a>
</span><span class="lnt" id="hl-10-8"><a class="lnlinks" href="#hl-10-8"> 8</a>
</span><span class="lnt" id="hl-10-9"><a class="lnlinks" href="#hl-10-9"> 9</a>
</span><span class="lnt" id="hl-10-10"><a class="lnlinks" href="#hl-10-10">10</a>
</span><span class="lnt" id="hl-10-11"><a class="lnlinks" href="#hl-10-11">11</a>
</span><span class="lnt" id="hl-10-12"><a class="lnlinks" href="#hl-10-12">12</a>
</span><span class="lnt" id="hl-10-13"><a class="lnlinks" href="#hl-10-13">13</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="c1"># node navigation</span>
</span></span><span class="line"><span class="cl">$ bspc query -N -n @parent/first/parent/
</span></span><span class="line"><span class="cl">&gt; 0x004000CA
</span></span><span class="line"><span class="cl">$ bspc query -N -n @parent/second/parent/
</span></span><span class="line"><span class="cl">&gt; 0x004000CA
</span></span><span class="line"><span class="cl"><span class="c1"># alternatives</span>
</span></span><span class="line"><span class="cl">$ bspc query -N -n @parent/1/parent/
</span></span><span class="line"><span class="cl">&gt; 0x004000CA
</span></span><span class="line"><span class="cl">$ bspc query -N -n @parent/2/parent/
</span></span><span class="line"><span class="cl">&gt; 0x004000CA
</span></span><span class="line"><span class="cl"><span class="c1"># shortcut for getting the top level parent</span>
</span></span><span class="line"><span class="cl">$ bspc query -N -n @/
</span></span><span class="line"><span class="cl">&gt; 0x004000CA
</span></span></code></pre></td></tr></table>
</div>
</div><p>Opening another window with ID <code>0x3A00006</code>, we will check if <code>0x2C00006</code>
and the new window has different parents or not. Again type the
following commands.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-11-1"><a class="lnlinks" href="#hl-11-1">1</a>
</span><span class="lnt" id="hl-11-2"><a class="lnlinks" href="#hl-11-2">2</a>
</span><span class="lnt" id="hl-11-3"><a class="lnlinks" href="#hl-11-3">3</a>
</span><span class="lnt" id="hl-11-4"><a class="lnlinks" href="#hl-11-4">4</a>
</span><span class="lnt" id="hl-11-5"><a class="lnlinks" href="#hl-11-5">5</a>
</span><span class="lnt" id="hl-11-6"><a class="lnlinks" href="#hl-11-6">6</a>
</span><span class="lnt" id="hl-11-7"><a class="lnlinks" href="#hl-11-7">7</a>
</span><span class="lnt" id="hl-11-8"><a class="lnlinks" href="#hl-11-8">8</a>
</span><span class="lnt" id="hl-11-9"><a class="lnlinks" href="#hl-11-9">9</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="c1">## on window 0x3A00006</span>
</span></span><span class="line"><span class="cl">$ bspc query -N -n @parent/
</span></span><span class="line"><span class="cl">&gt; 0x004000CC <span class="c1"># call this B</span>
</span></span><span class="line"><span class="cl"><span class="c1">## on window 0x2C00006</span>
</span></span><span class="line"><span class="cl">$ bspc query -N -n @parent/
</span></span><span class="line"><span class="cl">&gt; 0x004000CA <span class="c1"># call this A</span>
</span></span><span class="line"><span class="cl"><span class="c1"># using @/ here is a misnormer as we need</span>
</span></span><span class="line"><span class="cl"><span class="c1"># to get the immediate parent and not the</span>
</span></span><span class="line"><span class="cl"><span class="c1"># top-level parent.</span>
</span></span></code></pre></td></tr></table>
</div>
</div><blockquote>
<p>Keep the third state diagram in mind.</p>
</blockquote>
<p>Great! They are different. Now, we will navigate toward <code>A</code> through <code>B</code>.
For achieving this type the following.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-12-1"><a class="lnlinks" href="#hl-12-1">1</a>
</span><span class="lnt" id="hl-12-2"><a class="lnlinks" href="#hl-12-2">2</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">$ bspc query -N -n @parent/parent/
</span></span><span class="line"><span class="cl">&gt; 0x004000CA
</span></span></code></pre></td></tr></table>
</div>
</div><p>Nice. <code>B</code> and <code>1</code> have the same parent. We have confirmed this.</p>
<figure><a class="lightgallery" href="./gifs/alternate.gif" title="Alternate Scheme" data-thumbnail="./gifs/alternate.gif" data-sub-html="<h2>Alternate Scheme in action!</h2><p>Alternate Scheme</p>">
        <img
            
            loading="lazy"
            src="./gifs/alternate.gif"
            srcset="./gifs/alternate.gif, ./gifs/alternate.gif 1.5x, ./gifs/alternate.gif 2x"
            sizes="auto"
            alt="Alternate Scheme">
    </a><figcaption class="image-caption">Alternate Scheme in action!</figcaption>
    </figure>
<h3 id="longest-side-scheme" class="headerLink">
    <a href="#longest-side-scheme" class="header-mark"></a>Longest Side Scheme</h3><p>This scheme is almost similar to that of alternate. The only difference
is that it decides the fragmentation based off of the window geometry
of the focused node.</p>
<p>The state diagram will be completely the same. However, the way that the
window nodes are displayed will be different. As, the name implies, the
node will be divided with respect to the side that is the largest.
That might be its width or its height.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-13-1"><a class="lnlinks" href="#hl-13-1">1</a>
</span><span class="lnt" id="hl-13-2"><a class="lnlinks" href="#hl-13-2">2</a>
</span><span class="lnt" id="hl-13-3"><a class="lnlinks" href="#hl-13-3">3</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-c" data-lang="c"><span class="line"><span class="cl"><span class="k">if</span> <span class="p">(</span><span class="n">focused</span><span class="p">.</span><span class="n">rectangle</span><span class="o">-&gt;</span><span class="n">width</span> <span class="o">&gt;</span> <span class="n">focused</span><span class="p">.</span><span class="n">rectangle</span><span class="o">-&gt;</span><span class="n">height</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="n">focused</span><span class="p">.</span><span class="n">rectangle</span><span class="o">-&gt;</span><span class="n">width</span> <span class="o">/=</span> <span class="mi">2</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="k">else</span> <span class="n">focused</span><span class="p">.</span><span class="n">rectangle</span><span class="o">-&gt;</span><span class="n">height</span> <span class="o">/=</span> <span class="mi">2</span><span class="p">;</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div class="details admonition note open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-pencil-alt fa-fw"></i>Why half though?<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content"><p>This is because BSPWM uses the split ratio to determine what the size
of the newly created window will be. So, by calculation if the split ratio
is <code>0.5</code>, the first two windows will be of the exact same size i.e. 50%
of the desktop.</p>
<p>You can change this behavior by overriding the current split ratio value
with the following command.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-0-1"><a class="lnlinks" href="#hl-0-1">1</a>
</span><span class="lnt" id="hl-0-2"><a class="lnlinks" href="#hl-0-2">2</a>
</span><span class="lnt" id="hl-0-3"><a class="lnlinks" href="#hl-0-3">3</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">$ bspc config split_ratio 0.35
</span></span><span class="line"><span class="cl">$ bspc config split_ratio
</span></span><span class="line"><span class="cl">&gt; 0.35
</span></span></code></pre></td></tr></table>
</div>
</div><p>Now, the ratio is <code>0.35</code>. Therefore, the size of left child will be
<code>0.35</code> and right <code>1.00 - 0.35 = 0.65</code>.</p>
</div>
        </div>
    </div>
<p>Yet again we will follow state diagrams. But, this time it will be
somewhat different i.e. this time we will be using actual windows
instead of nodes. This must be done because largest scheme is
dependent on window geometries. So, it is better to illustrate
using windows rather than using something abstract as nodes.</p>
<h4 id="initial-state-1" class="headerLink">
    <a href="#initial-state-1" class="header-mark"></a>Initial State</h4><figure><a class="lightgallery" href="./svgs/largest-1.svg" title="Initial State" data-thumbnail="./svgs/largest-1.svg" data-sub-html="<h2>Initial state diagram.</h2><p>Initial State</p>">
        <img
            
            loading="lazy"
            src="./svgs/largest-1.svg"
            srcset="./svgs/largest-1.svg, ./svgs/largest-1.svg 1.5x, ./svgs/largest-1.svg 2x"
            sizes="auto"
            alt="Initial State">
    </a><figcaption class="image-caption">Initial state diagram.</figcaption>
    </figure>
<p>The 

  <mark class="bspwm-basics-mark-index-blue">blue</mark>


area is a newly spawned window which has been given focus. So, now when
we try to spawn another BSPWM will compare the width and height of the
current window i.e. <code>width=1904</code> and <code>height=1064</code>. Comparing these
we see that the width is greater than the height.</p>
<h4 id="second-state-1" class="headerLink">
    <a href="#second-state-1" class="header-mark"></a>Second State</h4><figure><a class="lightgallery" href="./svgs/largest-2.svg" title="Second State" data-thumbnail="./svgs/largest-2.svg" data-sub-html="<h2>Second state diagram.</h2><p>Second State</p>">
        <img
            
            loading="lazy"
            src="./svgs/largest-2.svg"
            srcset="./svgs/largest-2.svg, ./svgs/largest-2.svg 1.5x, ./svgs/largest-2.svg 2x"
            sizes="auto"
            alt="Second State">
    </a><figcaption class="image-caption">Second state diagram.</figcaption>
    </figure>
<p>Evidently, BSPWM decides to split the width by a <code>0.35</code> ratio. Let us
look at the newly spawned window (light blue) geometry. We can get the current
window geometry by using <code>xwininfo</code> and <code>grep</code> or, a use more compact
utility called <code>slop</code>. Following code has shows the <code>xwininfo</code> way,
<code>slop</code> way and lastly the <code>bspc</code> with <code>jq</code> way.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-14-1"><a class="lnlinks" href="#hl-14-1">1</a>
</span><span class="lnt" id="hl-14-2"><a class="lnlinks" href="#hl-14-2">2</a>
</span><span class="lnt" id="hl-14-3"><a class="lnlinks" href="#hl-14-3">3</a>
</span><span class="lnt" id="hl-14-4"><a class="lnlinks" href="#hl-14-4">4</a>
</span><span class="lnt" id="hl-14-5"><a class="lnlinks" href="#hl-14-5">5</a>
</span><span class="lnt" id="hl-14-6"><a class="lnlinks" href="#hl-14-6">6</a>
</span><span class="lnt" id="hl-14-7"><a class="lnlinks" href="#hl-14-7">7</a>
</span><span class="lnt" id="hl-14-8"><a class="lnlinks" href="#hl-14-8">8</a>
</span><span class="lnt" id="hl-14-9"><a class="lnlinks" href="#hl-14-9">9</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="c1"># for xwininfo and slop you will need to point and click</span>
</span></span><span class="line"><span class="cl"><span class="c1"># to the window surface that you want to get the geometry of</span>
</span></span><span class="line"><span class="cl">$ xwininfo <span class="p">|</span> grep -E Width<span class="se">\|</span>Height
</span></span><span class="line"><span class="cl">&gt;  Width: <span class="m">1227</span>
</span></span><span class="line"><span class="cl">   Height: <span class="m">1056</span>
</span></span><span class="line"><span class="cl">$ slop
</span></span><span class="line"><span class="cl">&gt; 1235x1064+677+8
</span></span><span class="line"><span class="cl">$ bspc query -T -n <span class="p">|</span> jq -c .client.tiledRectangle
</span></span><span class="line"><span class="cl">&gt; <span class="o">{</span><span class="s2">&#34;x&#34;</span>:677,<span class="s2">&#34;y&#34;</span>:8,<span class="s2">&#34;width&#34;</span>:1227,<span class="s2">&#34;height&#34;</span>:1056<span class="o">}</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>Pay no mind to the small changes in the sizes, they are there because
of padding, borders and gaps. Moving forward, we see that the bigger
(from the <a href="#initial-state-1" rel="">previous</a> state) window has
been reduced by 65% and now sits at 35% and the new window&rsquo;s size is
now 65% and has been given focus. Again, comparing the dimensions we
see that yet again <code>width=1235</code> is greater than <code>height=1056</code>.</p>
<h4 id="third-state-1" class="headerLink">
    <a href="#third-state-1" class="header-mark"></a>Third State</h4><figure><a class="lightgallery" href="./svgs/largest-3.svg" title="Third State" data-thumbnail="./svgs/largest-3.svg" data-sub-html="<h2>Third state diagram.</h2><p>Third State</p>">
        <img
            
            loading="lazy"
            src="./svgs/largest-3.svg"
            srcset="./svgs/largest-3.svg, ./svgs/largest-3.svg 1.5x, ./svgs/largest-3.svg 2x"
            sizes="auto"
            alt="Third State">
    </a><figcaption class="image-caption">Third state diagram.</figcaption>
    </figure>
<p>Comparing again <code>width=800</code> and <code>height=1064</code> we see that this time
it is the height that is greater than the width.</p>
<h4 id="fourth-state" class="headerLink">
    <a href="#fourth-state" class="header-mark"></a>Fourth State</h4><figure><a class="lightgallery" href="./svgs/largest-4.svg" title="Fourth State" data-thumbnail="./svgs/largest-4.svg" data-sub-html="<h2>Fourth state diagram.</h2><p>Fourth State</p>">
        <img
            
            loading="lazy"
            src="./svgs/largest-4.svg"
            srcset="./svgs/largest-4.svg, ./svgs/largest-4.svg 1.5x, ./svgs/largest-4.svg 2x"
            sizes="auto"
            alt="Fourth State">
    </a><figcaption class="image-caption">Fourth state diagram.</figcaption>
    </figure>
<p>Lastly, we see that the focused window from the
<a href="#third-state-1" rel="">previous</a> state has been divided its
height into two parts. Now, we can move further and show more steps
but, that would be quite repetitive, and we won&rsquo;t see any new changes.
So, it is your task to predict what the next two steps will be by
drawing its diagram and then match that diagram by opening that amount
of windows.</p>
<figure><a class="lightgallery" href="./gifs/longest_side.gif" title="Longest Side Scheme" data-thumbnail="./gifs/longest_side.gif" data-sub-html="<h2>Longest Side Scheme in action!</h2><p>Longest Side Scheme</p>">
        <img
            
            loading="lazy"
            src="./gifs/longest_side.gif"
            srcset="./gifs/longest_side.gif, ./gifs/longest_side.gif 1.5x, ./gifs/longest_side.gif 2x"
            sizes="auto"
            alt="Longest Side Scheme">
    </a><figcaption class="image-caption">Longest Side Scheme in action!</figcaption>
    </figure>
<p>Always, keep the following properties in mind.</p>
<ul>
<li>Split ratio</li>
<li>Initial polarity</li>
</ul>
<p>Lastly, you&rsquo;d need to verify if the initial state window and the third
state window have different parents then we need to verify if the
grandparent of the third state and the parent of the first state are
the same or, not. This check is same as the one in the
<a href="#third-state" rel="">alternate scheme</a>.</p>
<h3 id="spiral-scheme" class="headerLink">
    <a href="#spiral-scheme" class="header-mark"></a>Spiral Scheme</h3><p>In this scheme the new window will be inserted at the current focused
window&rsquo;s insertion point. Effectively, it means that as long as the
focus stays at the same position, the newly inserted window and the
size of that window will stay the same.</p>
<p>For illustration, we will use tree-state diagrams this time as, this
scheme is both dependent on how the windows are arranged visually and
how the nodes are arranged internally. Also, we will be starting from
the second state as, the null and initial state is the same across all
schemes. Note that <code>split_ratio</code> will be set to <code>0.5</code> this time.</p>
<h4 id="second-state-2" class="headerLink">
    <a href="#second-state-2" class="header-mark"></a>Second State</h4><figure><a class="lightgallery" href="./svgs/spiral-2.svg" title="Second state diagram." data-thumbnail="./svgs/spiral-2.svg" data-sub-html="<h2>The second state diagram of the spiral scheme (diagram).</h2><p>Second state diagram.</p>">
        <img
            
            loading="lazy"
            src="./svgs/spiral-2.svg"
            srcset="./svgs/spiral-2.svg, ./svgs/spiral-2.svg 1.5x, ./svgs/spiral-2.svg 2x"
            sizes="auto"
            alt="Second state diagram.">
    </a><figcaption class="image-caption">The second state diagram of the spiral scheme (diagram).</figcaption>
    </figure>
<figure><a class="lightgallery" href="./images/spiral-2.png" title="Second state desktop." data-thumbnail="./images/spiral-2.png" data-sub-html="<h2>The second desktop state of the spiral scheme.</h2><p>Second state desktop.</p>">
        <img
            
            loading="lazy"
            src="./images/spiral-2.png"
            srcset="./images/spiral-2.png, ./images/spiral-2.png 1.5x, ./images/spiral-2.png 2x"
            sizes="auto"
            alt="Second state desktop.">
    </a><figcaption class="image-caption">The second desktop state of the spiral scheme.</figcaption>
    </figure>
<p>This is the second state of the spiral scheme. This step wasn&rsquo;t really
necessary but, paints a clearer picture of what comes after. Therefore,
we shall predict what the next step will be.
According to the <a href="#spiral-scheme" rel="">introduction</a> the newer node
that will be spawned on the next state, will take the place of the focused
node. Which the arrows point towards in the diagram.</p>
<h4 id="third-state-2" class="headerLink">
    <a href="#third-state-2" class="header-mark"></a>Third State</h4><figure><a class="lightgallery" href="./svgs/spiral-3.svg" title="Third state diagram." data-thumbnail="./svgs/spiral-3.svg" data-sub-html="<h2>The third state diagram of the spiral scheme (diagram).</h2><p>Third state diagram.</p>">
        <img
            
            loading="lazy"
            src="./svgs/spiral-3.svg"
            srcset="./svgs/spiral-3.svg, ./svgs/spiral-3.svg 1.5x, ./svgs/spiral-3.svg 2x"
            sizes="auto"
            alt="Third state diagram.">
    </a><figcaption class="image-caption">The third state diagram of the spiral scheme (diagram).</figcaption>
    </figure>
<figure><a class="lightgallery" href="./images/spiral-3.png" title="Third state desktop." data-thumbnail="./images/spiral-3.png" data-sub-html="<h2>The third desktop state of the spiral scheme.</h2><p>Third state desktop.</p>">
        <img
            
            loading="lazy"
            src="./images/spiral-3.png"
            srcset="./images/spiral-3.png, ./images/spiral-3.png 1.5x, ./images/spiral-3.png 2x"
            sizes="auto"
            alt="Third state desktop.">
    </a><figcaption class="image-caption">The third desktop state of the spiral scheme.</figcaption>
    </figure>
<p>So, currently we&rsquo;re focused on the fourth node. And, now <code>B</code> is created at
<code>1</code>&rsquo;s position (see <a href="#second-state-2" rel="">previous</a> state diagram)
and <code>1</code> has been moved to the <code>second_child</code> position of <code>B</code> and <code>2</code> has
been moved to the <code>first_child</code> position. Now, we need to verify this.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-15-1"><a class="lnlinks" href="#hl-15-1">1</a>
</span><span class="lnt" id="hl-15-2"><a class="lnlinks" href="#hl-15-2">2</a>
</span><span class="lnt" id="hl-15-3"><a class="lnlinks" href="#hl-15-3">3</a>
</span><span class="lnt" id="hl-15-4"><a class="lnlinks" href="#hl-15-4">4</a>
</span><span class="lnt" id="hl-15-5"><a class="lnlinks" href="#hl-15-5">5</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="c1"># match the values with xwininfo | awk &#39;{if($3==&#34;id:&#34;)print$4}&#39;</span>
</span></span><span class="line"><span class="cl"><span class="c1"># 4 -&gt; A -&gt; B -&gt; 1</span>
</span></span><span class="line"><span class="cl">bspc query -N -n @/1/1/
</span></span><span class="line"><span class="cl"><span class="c1"># 4 -&gt; A -&gt; B -&gt; 2</span>
</span></span><span class="line"><span class="cl">bspc query -N -n @/1/2/
</span></span></code></pre></td></tr></table>
</div>
</div><p>A way to get good at this is by following the state diagram as a map
and as time passes this will become natural. Although, I doubt
there is much use for this scheme.</p>
<h4 id="fourth-state-1" class="headerLink">
    <a href="#fourth-state-1" class="header-mark"></a>Fourth State</h4><figure><a class="lightgallery" href="./svgs/spiral-4.svg" title="Fourth state diagram." data-thumbnail="./svgs/spiral-4.svg" data-sub-html="<h2>The fourth state diagram of the spiral scheme (diagram).</h2><p>Fourth state diagram.</p>">
        <img
            
            loading="lazy"
            src="./svgs/spiral-4.svg"
            srcset="./svgs/spiral-4.svg, ./svgs/spiral-4.svg 1.5x, ./svgs/spiral-4.svg 2x"
            sizes="auto"
            alt="Fourth state diagram.">
    </a><figcaption class="image-caption">The fourth state diagram of the spiral scheme (diagram).</figcaption>
    </figure>
<figure><a class="lightgallery" href="./images/spiral-4.png" title="Fourth state desktop." data-thumbnail="./images/spiral-4.png" data-sub-html="<h2>The fourth desktop state of the spiral scheme.</h2><p>Fourth state desktop.</p>">
        <img
            
            loading="lazy"
            src="./images/spiral-4.png"
            srcset="./images/spiral-4.png, ./images/spiral-4.png 1.5x, ./images/spiral-4.png 2x"
            sizes="auto"
            alt="Fourth state desktop.">
    </a><figcaption class="image-caption">The fourth desktop state of the spiral scheme.</figcaption>
    </figure>
<!-- TODO: Revise. -->
<p>You might notice a pattern in the tree structure i.e. it gets
attached to the right side (<code>second_child</code>) after the first level.
And, overall theory is that, the new node takes place of the current
focused node and then the focused node takes place of <code>Nth</code> node,
then <code>Nth</code> node takes place of <code>(N-1)th</code> node and when it reaches
the end a new parent node will be created say <code>Z</code> and node <code>2</code> and <code>1</code>
will get attached to it.</p>
<p>An analogy for this would be a spiral staircase where the deeper
you look down, the more illegible it gets and eventually fades into
darkness.</p>
<figure><a class="lightgallery" href="./gifs/spiral.gif" title="Spiral Scheme" data-thumbnail="./gifs/spiral.gif" data-sub-html="<h2>Spiral Scheme in action!</h2><p>Spiral Scheme</p>">
        <img
            
            loading="lazy"
            src="./gifs/spiral.gif"
            srcset="./gifs/spiral.gif, ./gifs/spiral.gif 1.5x, ./gifs/spiral.gif 2x"
            sizes="auto"
            alt="Spiral Scheme">
    </a><figcaption class="image-caption">Spiral Scheme in action!</figcaption>
    </figure>
<h2 id="manual-mode" class="headerLink">
    <a href="#manual-mode" class="header-mark"></a>Manual Mode</h2><p>BSPWM also supports positioning and spawning a window at a custom direction.
For that the user needs to specify a region in the insertion point where the
next new window should appear by sending a <code>node -p|--presel-dir DIRECTION</code> message
to BSPWM. The <code>DIR</code> argument allows specifying how the insertion point should be
split (horizontally or, vertically) and if the new window should be the first or,
the second child of the new internal node (the insertion point will become its <code>brother</code>).
After doing so the insertion point goes into <code>manual</code> mode.</p>
<p>For starters, let&rsquo;s configure preselect feedback visibility and the color of the
preselect window.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-16-1"><a class="lnlinks" href="#hl-16-1">1</a>
</span><span class="lnt" id="hl-16-2"><a class="lnlinks" href="#hl-16-2">2</a>
</span><span class="lnt" id="hl-16-3"><a class="lnlinks" href="#hl-16-3">3</a>
</span><span class="lnt" id="hl-16-4"><a class="lnlinks" href="#hl-16-4">4</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">$ bspc config presel_feedback
</span></span><span class="line"><span class="cl">&gt; <span class="nb">false</span>
</span></span><span class="line"><span class="cl">$ bspc config presel_feedback <span class="nb">true</span>
</span></span><span class="line"><span class="cl">$ bspc config presel_feedback_color <span class="s1">&#39;#7AB0DF&#39;</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>In the following snippet, we will attempt to preselect a window at <code>westward</code>
direction and then adjust the preselect ratio and then open a
<code>ranger file manager</code> window on that preselected area.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-17-1"><a class="lnlinks" href="#hl-17-1">1</a>
</span><span class="lnt" id="hl-17-2"><a class="lnlinks" href="#hl-17-2">2</a>
</span><span class="lnt" id="hl-17-3"><a class="lnlinks" href="#hl-17-3">3</a>
</span><span class="lnt" id="hl-17-4"><a class="lnlinks" href="#hl-17-4">4</a>
</span><span class="lnt" id="hl-17-5"><a class="lnlinks" href="#hl-17-5">5</a>
</span><span class="lnt" id="hl-17-6"><a class="lnlinks" href="#hl-17-6">6</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">bspc node --presel-dir south
</span></span><span class="line"><span class="cl">bspc node --presel-ratio 0.6
</span></span><span class="line"><span class="cl">bspc node --presel-ratio 0.3
</span></span><span class="line"><span class="cl">bspc node --presel-ratio 0.6
</span></span><span class="line"><span class="cl">bspc node --presel-ratio 0.7
</span></span><span class="line"><span class="cl"><span class="nv">$TERMINAL</span> -e <span class="s1">&#39;ranger&#39;</span> <span class="p">&amp;</span> <span class="nb">disown</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>The exact process may not match as I am using a keyboard daemon to launch
applications like <code>ranger</code>. So, if you see a file manager popping out of nowhere,
chances are it is a shortcut. If you want recommendations for keyboard
daemons then <code>sxhkd</code> and <code>xbindkeys + xbindkeys_config-gtk2</code> are the best out there.</p>
<figure><a class="lightgallery" href="./gifs/preselect.gif" title="Preselect Node" data-thumbnail="./gifs/preselect.gif" data-sub-html="<h2>Preselection in action!</h2><p>Preselect Node</p>">
        <img
            
            loading="lazy"
            src="./gifs/preselect.gif"
            srcset="./gifs/preselect.gif, ./gifs/preselect.gif 1.5x, ./gifs/preselect.gif 2x"
            sizes="auto"
            alt="Preselect Node">
    </a><figcaption class="image-caption">Preselection in action!</figcaption>
    </figure>
<h2 id="states-flags-and-layouts" class="headerLink">
    <a href="#states-flags-and-layouts" class="header-mark"></a>States, Flags And Layouts</h2><p>BSPWM has implemented all the optional flags as mentioned in the <a href="https://x.org/releases/X11R7.6/doc/xorg-docs/specs/ICCCM/icccm.html" target="_blank" rel="noopener noreferrer">ICCCM</a>
As, for the states there are four of them which can be customized and
extended by using rules and event-subscribed shell scripts. Note that
both states and flags are node specific i.e. they change how a node
will behave. Layouts however, are desktop specific i.e. they change
the way nodes are spawned in an entire desktop. States and flags can
co-exist with layouts. BSPWM only has two layouts but, we will see
further down the <a href="#bspc" rel="">BSPC</a> section how one can convert
a node state into a desktop state by using event subscriptions.
And, a way to create your own custom layouts.</p>
<h3 id="states" class="headerLink">
    <a href="#states" class="header-mark"></a>States</h3><p>In BSPWM a node can only have one state at a time. A node can only
have any one of these states <code>floating</code>, <code>fullscreen</code>, <code>pseudo_tiled</code> and <code>tiled</code>.
The <code>tiled</code> state is the default state when a node is spawned (which makes
sense why). Although, that can be overridden by events and rules. You may
use the following commands when setting a node state.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-18-1"><a class="lnlinks" href="#hl-18-1"> 1</a>
</span><span class="lnt" id="hl-18-2"><a class="lnlinks" href="#hl-18-2"> 2</a>
</span><span class="lnt" id="hl-18-3"><a class="lnlinks" href="#hl-18-3"> 3</a>
</span><span class="lnt" id="hl-18-4"><a class="lnlinks" href="#hl-18-4"> 4</a>
</span><span class="lnt" id="hl-18-5"><a class="lnlinks" href="#hl-18-5"> 5</a>
</span><span class="lnt" id="hl-18-6"><a class="lnlinks" href="#hl-18-6"> 6</a>
</span><span class="lnt" id="hl-18-7"><a class="lnlinks" href="#hl-18-7"> 7</a>
</span><span class="lnt" id="hl-18-8"><a class="lnlinks" href="#hl-18-8"> 8</a>
</span><span class="lnt" id="hl-18-9"><a class="lnlinks" href="#hl-18-9"> 9</a>
</span><span class="lnt" id="hl-18-10"><a class="lnlinks" href="#hl-18-10">10</a>
</span><span class="lnt" id="hl-18-11"><a class="lnlinks" href="#hl-18-11">11</a>
</span><span class="lnt" id="hl-18-12"><a class="lnlinks" href="#hl-18-12">12</a>
</span><span class="lnt" id="hl-18-13"><a class="lnlinks" href="#hl-18-13">13</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">$ bspc node --state tiled
</span></span><span class="line"><span class="cl">$ bspc node --state pseudo_tiled
</span></span><span class="line"><span class="cl">$ bspc node --state floating
</span></span><span class="line"><span class="cl">$ bspc node --state fullscreen
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">$ bspc node @brother -t floating
</span></span><span class="line"><span class="cl"><span class="c1"># target and change the node to pseudo_tiled</span>
</span></span><span class="line"><span class="cl">$ bspc node 0x02000006 -t pseudo_tiled
</span></span><span class="line"><span class="cl"><span class="c1"># if the node is tiled then change state</span>
</span></span><span class="line"><span class="cl">$ bspc node 0x01A00006.tiled -t fullscreen
</span></span><span class="line"><span class="cl"><span class="c1"># change the node state of the window west</span>
</span></span><span class="line"><span class="cl"><span class="c1"># W.R.T the focused on to floating</span>
</span></span><span class="line"><span class="cl">$ bspc node west -t floating
</span></span></code></pre></td></tr></table>
</div>
</div><h4 id="what-do-these-states-mean" class="headerLink">
    <a href="#what-do-these-states-mean" class="header-mark"></a>What do these states mean?</h4><p>Window state definitions and behaviors.</p>
<ul>
<li><code>tiled</code>: Its size and position are determined by the window tree.</li>
<li><code>pseudo_tiled</code>: A tiled window that automatically shrinks but doesn’t stretch
beyond its floating size.</li>
<li><code>floating</code>: Can be moved/resized freely. Although it doesn’t use any tiling
space, it is still part of the window tree.</li>
<li><code>fullscreen</code>: Fills its monitor rectangle and has no borders.</li>
</ul>
<p>Following is a demonstration of a terminal window that undergoes several state changes.</p>
<figure><a class="lightgallery" href="./gifs/state.gif" title="Node States" data-thumbnail="./gifs/state.gif" data-sub-html="<h2>Demonstrating various node states!</h2><p>Node States</p>">
        <img
            
            loading="lazy"
            src="./gifs/state.gif"
            srcset="./gifs/state.gif, ./gifs/state.gif 1.5x, ./gifs/state.gif 2x"
            sizes="auto"
            alt="Node States">
    </a><figcaption class="image-caption">Demonstrating various node states!</figcaption>
    </figure>
<p>You can create way more complex functionalities using a script and combining
the <code>STDLIB</code> of that scripting language or, a shell script with <code>bspc</code>
expressions, commands, etc.</p>
<h3 id="flags" class="headerLink">
    <a href="#flags" class="header-mark"></a>Flags</h3><p>As, opposed to node states, a node can have multiple flags at a time. As,
proposed in the <a href="https://specifications.freedesktop.org/wm-spec/wm-spec-latest.html" target="_blank" rel="noopener noreferrer">EWMH</a>, BSPWM defines all of such hints such as
<code>_NET_WM_STATE_HIDDEN</code>, <code>_NET_WM_STATE_STICKY</code> and others. And, on top of
those it also implements some extra flags as well. Anyway, BSPWM has six flags
namely, <code>urgent</code>, <code>sticky</code>, <code>hidden</code>, <code>marked</code>, <code>private</code> and <code>locked</code>.</p>
<p>These did not need to exist as we can re-create these ourselves. It is not
specific to this WM. But, having a native way of integrating them certainly
is nice. Moving on, the following commands are to be used when setting certain flag(s).</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-19-1"><a class="lnlinks" href="#hl-19-1"> 1</a>
</span><span class="lnt" id="hl-19-2"><a class="lnlinks" href="#hl-19-2"> 2</a>
</span><span class="lnt" id="hl-19-3"><a class="lnlinks" href="#hl-19-3"> 3</a>
</span><span class="lnt" id="hl-19-4"><a class="lnlinks" href="#hl-19-4"> 4</a>
</span><span class="lnt" id="hl-19-5"><a class="lnlinks" href="#hl-19-5"> 5</a>
</span><span class="lnt" id="hl-19-6"><a class="lnlinks" href="#hl-19-6"> 6</a>
</span><span class="lnt" id="hl-19-7"><a class="lnlinks" href="#hl-19-7"> 7</a>
</span><span class="lnt" id="hl-19-8"><a class="lnlinks" href="#hl-19-8"> 8</a>
</span><span class="lnt" id="hl-19-9"><a class="lnlinks" href="#hl-19-9"> 9</a>
</span><span class="lnt" id="hl-19-10"><a class="lnlinks" href="#hl-19-10">10</a>
</span><span class="lnt" id="hl-19-11"><a class="lnlinks" href="#hl-19-11">11</a>
</span><span class="lnt" id="hl-19-12"><a class="lnlinks" href="#hl-19-12">12</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">$ bspc node --flag <span class="nv">marked</span><span class="o">=</span>on --flag <span class="nv">private</span><span class="o">=</span>on
</span></span><span class="line"><span class="cl">$ bspc query -T -n <span class="p">|</span> jq .marked,.private,.sticky
</span></span><span class="line"><span class="cl">&gt; <span class="nb">true</span>
</span></span><span class="line"><span class="cl">&gt; <span class="nb">true</span>
</span></span><span class="line"><span class="cl">&gt; <span class="nb">false</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">$ bspc node --flag hidden <span class="c1"># toggle on</span>
</span></span><span class="line"><span class="cl">$ bspc query -T -n <span class="p">|</span> jq .hidden
</span></span><span class="line"><span class="cl">&gt; <span class="nb">true</span>
</span></span><span class="line"><span class="cl">$ bspc node --flag hidden <span class="c1"># toggle off</span>
</span></span><span class="line"><span class="cl">$ bspc query -T -n <span class="p">|</span> jq .hidden
</span></span><span class="line"><span class="cl">&gt; <span class="nb">false</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div class="details admonition quote open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-quote-right fa-fw"></i>What do these flags mean?<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content"><p>Window flags and definitions.</p>
<ul>
<li><code>hidden</code>: Is hidden and doesn’t occupy any tiling space.</li>
<li><code>sticky</code>: Stays in the focused desktop of its monitor.</li>
<li><code>private</code>: Tries to keep the same tiling position/size.</li>
<li><code>locked</code>: Ignores the <code>bspc node --close</code> message.</li>
<li><code>marked</code>: Is marked (useful for deferred actions).
A marked node becomes unmarked after being sent on a preselected node.multiple</li>
<li><code>urgent</code>: Has its urgency hint set. This flag is set externally.</li>
</ul>
</div>
        </div>
    </div>
<div class="details admonition info">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-info-circle fa-fw"></i>Why aren&#39;t there any screenshots?<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">I have decided to do this because there are quite a lot of flags and
a 30 seconds GIF won&rsquo;t cut it. Each flag would need their own video.
Unlike node state, a node flag has a bit more functionality.
Writing about them would not consume many sentences but, showing them
without audio would be challenging.</div>
        </div>
    </div>
<h3 id="layouts" class="headerLink">
    <a href="#layouts" class="header-mark"></a>Layouts</h3><p>BSPWM has only two layouts by default. They are called <code>tiled</code> and <code>monocle</code>.
Obviously, there are ways to add more layouts by scripting them and by
creating <a href="#receptacles" rel="">receptacles</a>. For starters, you can
change layouts by issuing the following commands.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-20-1"><a class="lnlinks" href="#hl-20-1">1</a>
</span><span class="lnt" id="hl-20-2"><a class="lnlinks" href="#hl-20-2">2</a>
</span><span class="lnt" id="hl-20-3"><a class="lnlinks" href="#hl-20-3">3</a>
</span><span class="lnt" id="hl-20-4"><a class="lnlinks" href="#hl-20-4">4</a>
</span><span class="lnt" id="hl-20-5"><a class="lnlinks" href="#hl-20-5">5</a>
</span><span class="lnt" id="hl-20-6"><a class="lnlinks" href="#hl-20-6">6</a>
</span><span class="lnt" id="hl-20-7"><a class="lnlinks" href="#hl-20-7">7</a>
</span><span class="lnt" id="hl-20-8"><a class="lnlinks" href="#hl-20-8">8</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">$ bspc desktop --layout monocle
</span></span><span class="line"><span class="cl">$ bspc query -T -d <span class="p">|</span> jq -r .layout
</span></span><span class="line"><span class="cl">&gt; monocle
</span></span><span class="line"><span class="cl">$ bspc desktop --layout next
</span></span><span class="line"><span class="cl">$ bspc query -T -d <span class="p">|</span> jq -r .layout
</span></span><span class="line"><span class="cl">&gt; tiled
</span></span><span class="line"><span class="cl">$ bspc desktop --layout prev
</span></span><span class="line"><span class="cl">$ bspc desktop --layout tiled
</span></span></code></pre></td></tr></table>
</div>
</div><p>You can get additional layout like <code>master</code>, <code>rtall</code>, <code>grid</code>, etc. From <a href="https://github.com/phenax/bsp-layout" target="_blank" rel="noopener noreferrer">bsp-layout</a>
by <a href="https://github.com/phenax" target="_blank" rel="noopener noreferrer">phenax</a>. You can also try creating one yourself,
it&rsquo;ll help you get a better understanding of BSPWM and perhaps BSTs in general
as well.</p>
<p>Following is a demonstration of <code>monocle</code>, <code>tiled</code> and <code>bsp-layout</code> layouts.</p>
<ul>
<li><code>monocle</code>: The default monocle layout provided by BSPWM.</li>
<li><code>tall</code>: A master-stack layout with nodes stacked vertically to the right of master.</li>
<li><code>wide</code>: A master-stack layout with nodes stacked horizontally below master.</li>
<li><code>rtall</code>: (Reverse tall) A master-stack layout with nodes stacked vertically to
the left of master.</li>
<li><code>rwide</code>: (Reverse wide) A master-stack layout with nodes stacked horizontally
above master.</li>
<li><code>grid</code>: A 2 row grid pattern (horizontal).</li>
<li><code>rgrid</code>: (Reverse grid) A 2 column grid pattern (vertical).</li>
<li><code>even</code>: Distributes all node areas in a desktop evenly.</li>
<li><code>tiled</code>: The default tiled layout provided by BSPWM.</li>
</ul>
<figure><a class="lightgallery" href="./gifs/layouts.gif" title="Desktop Layouts" data-thumbnail="./gifs/layouts.gif" data-sub-html="<h2>Demonstrating various layouts!</h2><p>Desktop Layouts</p>">
        <img
            
            loading="lazy"
            src="./gifs/layouts.gif"
            srcset="./gifs/layouts.gif, ./gifs/layouts.gif 1.5x, ./gifs/layouts.gif 2x"
            sizes="auto"
            alt="Desktop Layouts">
    </a><figcaption class="image-caption">Demonstrating various layouts!</figcaption>
    </figure>
<p>Additionally, if you liked <code>bsp-layout</code> you might also like <a href="https://github.com/albertored11/bsptab" target="_blank" rel="noopener noreferrer">bsptab</a> as well. It is
the BSPWM version of the DWM <a href="https://dwm.suckless.org/patches/tab" target="_blank" rel="noopener noreferrer">tab</a> patch and the <a href="https://tools.suckless.org/tabbed" target="_blank" rel="noopener noreferrer">tabbed</a> patch.</p>
<h2 id="bspc" class="headerLink">
    <a href="#bspc" class="header-mark"></a>BSPC</h2><p>As BSPWM defines it, <code>bspc</code> is an IPC client that controls the state of
BSPWM. It does so by sending messages through a UNIX socket and BSPWM
receiving them and acting on them accordingly. BSPC&rsquo;s first flags serves
as a marker for what <strong>type</strong> of message it needs to send to BSPWM. They
are classified as follows.</p>
<ul>
<li><code>config</code>: Get or, set the value of a global setting.</li>
<li><code>desktop</code>: Get or, set the value of a desktop specific setting.</li>
<li><code>monitor</code>: Get or, set the value of a monitor specific setting.</li>
<li><code>node</code>: Get or, set the value of a window specific setting.</li>
<li><code>query</code>: Get metadata for an element state in BSPWM. Narrow down searches,
get chunk of data, etc.</li>
<li><code>quit</code>: Safely exit BSPWM.</li>
<li><code>rule</code>: Adds predefined constraints to a window. Such constraints will change
the way that particular window should be launched.</li>
<li><code>subscribe</code>: Subscribe to a BSPWM event. Examples could be <code>desktop_change</code>
event, <code>node_focus</code> event, <code>monitor_add</code> event, etc.</li>
<li><code>wm</code>: World state related settings.</li>
</ul>
<h3 id="selectors-and-symbols" class="headerLink">
    <a href="#selectors-and-symbols" class="header-mark"></a>Selectors And Symbols</h3><p>Selectors are symbols that are used for narrowing down node, desktop and monitor
selections. They consist of an optional reference, a descriptor and any
number of non-conflicting modifiers <code>[REFERENCE#]DESCRIPTOR(.MODIFIER)*</code>. They
are used in conjunction with <code>bspc</code> calls for querying information about a
specific node or, multiple group of nodes. And, additionally they are also
used for changing behaviors of such targeted node(s) as well.</p>
<p>For example, to get all node IDs of all nodes that are <code>hidden</code> we need to
select all the nodes in all desktops and then out of that node group we need
to select only the nodes that have the <code>hidden</code> flag set.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-21-1"><a class="lnlinks" href="#hl-21-1">1</a>
</span><span class="lnt" id="hl-21-2"><a class="lnlinks" href="#hl-21-2">2</a>
</span><span class="lnt" id="hl-21-3"><a class="lnlinks" href="#hl-21-3">3</a>
</span><span class="lnt" id="hl-21-4"><a class="lnlinks" href="#hl-21-4">4</a>
</span><span class="lnt" id="hl-21-5"><a class="lnlinks" href="#hl-21-5">5</a>
</span><span class="lnt" id="hl-21-6"><a class="lnlinks" href="#hl-21-6">6</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">$ bspc query -N -n .leaf.hidden.window
</span></span><span class="line"><span class="cl">&gt; 0x02000006
</span></span><span class="line"><span class="cl">&gt; 0x0260002C
</span></span><span class="line"><span class="cl">$ bspc query --nodes --node .leaf.hidden.window
</span></span><span class="line"><span class="cl">&gt; 0x02000006
</span></span><span class="line"><span class="cl">&gt; 0x0260002C
</span></span></code></pre></td></tr></table>
</div>
</div><p>The <code>.</code> is used to select a group or, a category. Similarly, the meaning would be
reversed if we decided to prepend a <code>!</code> after the <code>.</code>.</p>
<blockquote>
<p>Depending on what shell you use or, what shell configuration you have, you might
need to escape the exclamation mark <code>\!</code>. In the ZShell <code>!</code> means a literal
<code>STDERR</code>.</p>
</blockquote>
<p>So, continuing further, the previous statement: &ldquo;Get all node IDs of all nodes that
are <code>hidden</code>&rdquo;, the reverse form would be: &ldquo;Get all node IDs of all nodes that are
<strong>not</strong> <code>hidden</code>&rdquo;.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-22-1"><a class="lnlinks" href="#hl-22-1">1</a>
</span><span class="lnt" id="hl-22-2"><a class="lnlinks" href="#hl-22-2">2</a>
</span><span class="lnt" id="hl-22-3"><a class="lnlinks" href="#hl-22-3">3</a>
</span><span class="lnt" id="hl-22-4"><a class="lnlinks" href="#hl-22-4">4</a>
</span><span class="lnt" id="hl-22-5"><a class="lnlinks" href="#hl-22-5">5</a>
</span><span class="lnt" id="hl-22-6"><a class="lnlinks" href="#hl-22-6">6</a>
</span><span class="lnt" id="hl-22-7"><a class="lnlinks" href="#hl-22-7">7</a>
</span><span class="lnt" id="hl-22-8"><a class="lnlinks" href="#hl-22-8">8</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">$ bspc query -N -n .leaf.<span class="se">\!</span>hidden.window
</span></span><span class="line"><span class="cl">&gt; 0x01A00006
</span></span><span class="line"><span class="cl">&gt; 0x02000006
</span></span><span class="line"><span class="cl">&gt; 0x0260002C
</span></span><span class="line"><span class="cl">$ bspc query -N -n .leaf.<span class="se">\!</span>hidden <span class="c1"># include receptacles</span>
</span></span><span class="line"><span class="cl">&gt; 0x01A00006
</span></span><span class="line"><span class="cl">&gt; 0x02000006
</span></span><span class="line"><span class="cl">&gt; 0x0260002C
</span></span></code></pre></td></tr></table>
</div>
</div><p>Note that, the <code>!</code> symbol cannot be used in canceling pre-selections. They use
the tilde <code>~</code> instead. So, effectively, after you have triggered the preselection
you can then cancel it by either passing the <code>cancel</code> argument explicitly or,
by prepending <code>~</code> before the same direction to cancel it.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-23-1"><a class="lnlinks" href="#hl-23-1"> 1</a>
</span><span class="lnt" id="hl-23-2"><a class="lnlinks" href="#hl-23-2"> 2</a>
</span><span class="lnt" id="hl-23-3"><a class="lnlinks" href="#hl-23-3"> 3</a>
</span><span class="lnt" id="hl-23-4"><a class="lnlinks" href="#hl-23-4"> 4</a>
</span><span class="lnt" id="hl-23-5"><a class="lnlinks" href="#hl-23-5"> 5</a>
</span><span class="lnt" id="hl-23-6"><a class="lnlinks" href="#hl-23-6"> 6</a>
</span><span class="lnt" id="hl-23-7"><a class="lnlinks" href="#hl-23-7"> 7</a>
</span><span class="lnt" id="hl-23-8"><a class="lnlinks" href="#hl-23-8"> 8</a>
</span><span class="lnt" id="hl-23-9"><a class="lnlinks" href="#hl-23-9"> 9</a>
</span><span class="lnt" id="hl-23-10"><a class="lnlinks" href="#hl-23-10">10</a>
</span><span class="lnt" id="hl-23-11"><a class="lnlinks" href="#hl-23-11">11</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="c1"># start preselection sequence</span>
</span></span><span class="line"><span class="cl">$ bspc node -p north
</span></span><span class="line"><span class="cl"><span class="c1"># cancel preselection sequence</span>
</span></span><span class="line"><span class="cl">$ bspc node -p ~north
</span></span><span class="line"><span class="cl">$ bspc node -p west
</span></span><span class="line"><span class="cl"><span class="c1"># cancel preselection sequence explicitly</span>
</span></span><span class="line"><span class="cl">$ bspc node -p cancel
</span></span><span class="line"><span class="cl"><span class="c1"># toggle preselection on</span>
</span></span><span class="line"><span class="cl">$ bspc node -p ~east
</span></span><span class="line"><span class="cl"><span class="c1"># toggle preselection off</span>
</span></span><span class="line"><span class="cl">$ bspc node -p ~east
</span></span></code></pre></td></tr></table>
</div>
</div><p>Moving forward. People often gloss over the fact that you can use increment <code>+</code> and
decrement <code>-</code> operators over node geometry commands to increase and decrease from
the current dimensions.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-24-1"><a class="lnlinks" href="#hl-24-1"> 1</a>
</span><span class="lnt" id="hl-24-2"><a class="lnlinks" href="#hl-24-2"> 2</a>
</span><span class="lnt" id="hl-24-3"><a class="lnlinks" href="#hl-24-3"> 3</a>
</span><span class="lnt" id="hl-24-4"><a class="lnlinks" href="#hl-24-4"> 4</a>
</span><span class="lnt" id="hl-24-5"><a class="lnlinks" href="#hl-24-5"> 5</a>
</span><span class="lnt" id="hl-24-6"><a class="lnlinks" href="#hl-24-6"> 6</a>
</span><span class="lnt" id="hl-24-7"><a class="lnlinks" href="#hl-24-7"> 7</a>
</span><span class="lnt" id="hl-24-8"><a class="lnlinks" href="#hl-24-8"> 8</a>
</span><span class="lnt" id="hl-24-9"><a class="lnlinks" href="#hl-24-9"> 9</a>
</span><span class="lnt" id="hl-24-10"><a class="lnlinks" href="#hl-24-10">10</a>
</span><span class="lnt" id="hl-24-11"><a class="lnlinks" href="#hl-24-11">11</a>
</span><span class="lnt" id="hl-24-12"><a class="lnlinks" href="#hl-24-12">12</a>
</span><span class="lnt" id="hl-24-13"><a class="lnlinks" href="#hl-24-13">13</a>
</span><span class="lnt" id="hl-24-14"><a class="lnlinks" href="#hl-24-14">14</a>
</span><span class="lnt" id="hl-24-15"><a class="lnlinks" href="#hl-24-15">15</a>
</span><span class="lnt" id="hl-24-16"><a class="lnlinks" href="#hl-24-16">16</a>
</span><span class="lnt" id="hl-24-17"><a class="lnlinks" href="#hl-24-17">17</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="c1"># rotate toplevel internal node by 90deg</span>
</span></span><span class="line"><span class="cl">$ bspc node @/ -R <span class="m">90</span>
</span></span><span class="line"><span class="cl"><span class="c1"># rotate 3 more times to get back to</span>
</span></span><span class="line"><span class="cl"><span class="c1"># where it was</span>
</span></span><span class="line"><span class="cl">$ bspc node @/ -R <span class="m">90</span>
</span></span><span class="line"><span class="cl">$ bspc node @/ -R <span class="m">90</span>
</span></span><span class="line"><span class="cl"><span class="c1"># same effect if + is used</span>
</span></span><span class="line"><span class="cl">$ bspc node @/ -R +90
</span></span><span class="line"><span class="cl"><span class="c1"># rather than rotating 3 more times use -90</span>
</span></span><span class="line"><span class="cl">$ bspc node @/ --rotate -90
</span></span><span class="line"><span class="cl"><span class="c1"># move also allows + and -</span>
</span></span><span class="line"><span class="cl">$ bspc node --move +5 +5
</span></span><span class="line"><span class="cl">$ bspc node --move -15 +5
</span></span><span class="line"><span class="cl">$ bspc node -v -15 +5
</span></span><span class="line"><span class="cl"><span class="c1"># splitting ratio also allows them</span>
</span></span><span class="line"><span class="cl">$ bspc node --ratio +0.15
</span></span><span class="line"><span class="cl">$ bspc node --ratio -150
</span></span></code></pre></td></tr></table>
</div>
</div><p>You may also notice the usage of <code>/</code> and <code>@</code> from the previous examples. They are
basically, node path selectors that are mainly used for navigating through the
node tree. Think of them as when you navigate through file trees using <code>cd</code> and
shell completions by using <code>&lt;TAB&gt;</code> and <code>&lt;SPACE&gt;</code> keys. In short, the <code>@</code> denotes
the start of path navigation and <code>/</code> is used to get inside the nodes.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-25-1"><a class="lnlinks" href="#hl-25-1">1</a>
</span><span class="lnt" id="hl-25-2"><a class="lnlinks" href="#hl-25-2">2</a>
</span><span class="lnt" id="hl-25-3"><a class="lnlinks" href="#hl-25-3">3</a>
</span><span class="lnt" id="hl-25-4"><a class="lnlinks" href="#hl-25-4">4</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="c1"># . can be seen as @ and / can be seen as getting</span>
</span></span><span class="line"><span class="cl"><span class="c1"># inside of a file tree node.</span>
</span></span><span class="line"><span class="cl"><span class="nb">cd</span> ./Downloads/Torrents/Books/Springer
</span></span><span class="line"><span class="cl">bspc node @parent/brother/parent/second --rotate <span class="m">270</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>Next we have <code>*</code>, <code>:</code> and <code>^</code> symbols. You will see these being used
mostly in setting or, removing rules. The <code>*</code> symbol is used to select a
group of instance names, applying and removing rules on them.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-26-1"><a class="lnlinks" href="#hl-26-1">1</a>
</span><span class="lnt" id="hl-26-2"><a class="lnlinks" href="#hl-26-2">2</a>
</span><span class="lnt" id="hl-26-3"><a class="lnlinks" href="#hl-26-3">3</a>
</span><span class="lnt" id="hl-26-4"><a class="lnlinks" href="#hl-26-4">4</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="c1"># let there be no borders 🌅</span>
</span></span><span class="line"><span class="cl">bspc rule --add <span class="se">\*</span>:<span class="se">\*</span> <span class="nv">border</span><span class="o">=</span>off
</span></span><span class="line"><span class="cl"><span class="c1"># remove all rule related to St (simple terminal) instances</span>
</span></span><span class="line"><span class="cl">bspc rule --remove St:<span class="se">\*</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p><code>:</code> is used to select a subset of a class name which are called
instance names. For example, Firefox allows us to set instance-specific
rules at a window with the instance name <code>Places</code>.
Although, these are also used for path selections as well.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-27-1"><a class="lnlinks" href="#hl-27-1">1</a>
</span><span class="lnt" id="hl-27-2"><a class="lnlinks" href="#hl-27-2">2</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">bspc rule --add firefox:Places <span class="nv">state</span><span class="o">=</span>floating <span class="nv">center</span><span class="o">=</span>on
</span></span><span class="line"><span class="cl">bspc rule --add firefox:Navigator <span class="nv">state</span><span class="o">=</span>floating <span class="nv">center</span><span class="o">=</span>on <span class="nv">border</span><span class="o">=</span>off
</span></span></code></pre></td></tr></table>
</div>
</div><p><code>^</code> is used for selecting the <code>Nth</code> node, desktop and monitor. It acts as a serial
number. So, if desktop names consist of weird glyphs or, emojis then these
serials will keep us safe from ambiguity.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-28-1"><a class="lnlinks" href="#hl-28-1">1</a>
</span><span class="lnt" id="hl-28-2"><a class="lnlinks" href="#hl-28-2">2</a>
</span><span class="lnt" id="hl-28-3"><a class="lnlinks" href="#hl-28-3">3</a>
</span><span class="lnt" id="hl-28-4"><a class="lnlinks" href="#hl-28-4">4</a>
</span><span class="lnt" id="hl-28-5"><a class="lnlinks" href="#hl-28-5">5</a>
</span><span class="lnt" id="hl-28-6"><a class="lnlinks" href="#hl-28-6">6</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">$ bspc monitor primary --reset-desktops <span class="m">1</span> <span class="m">2</span> <span class="nv">3</span> <span class="o">=</span>+<span class="o">=</span>
</span></span><span class="line"><span class="cl">$ bspc query -D -d <span class="se">\^</span><span class="m">4</span>
</span></span><span class="line"><span class="cl">&gt; 0x00400004
</span></span><span class="line"><span class="cl"><span class="c1"># select the third desktop and go to its next desktop</span>
</span></span><span class="line"><span class="cl">$ bspc query -D -d <span class="se">\^</span>3#next
</span></span><span class="line"><span class="cl">&gt; 0x0040021C
</span></span></code></pre></td></tr></table>
</div>
</div><p><code>#</code> has little to no use at all. It is a descriptor symbol.
It needs to exist after you have selected a reference that
consists of monitors, desktops and of course, nodes.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-29-1"><a class="lnlinks" href="#hl-29-1">1</a>
</span><span class="lnt" id="hl-29-2"><a class="lnlinks" href="#hl-29-2">2</a>
</span><span class="lnt" id="hl-29-3"><a class="lnlinks" href="#hl-29-3">3</a>
</span><span class="lnt" id="hl-29-4"><a class="lnlinks" href="#hl-29-4">4</a>
</span><span class="lnt" id="hl-29-5"><a class="lnlinks" href="#hl-29-5">5</a>
</span><span class="lnt" id="hl-29-6"><a class="lnlinks" href="#hl-29-6">6</a>
</span><span class="lnt" id="hl-29-7"><a class="lnlinks" href="#hl-29-7">7</a>
</span><span class="lnt" id="hl-29-8"><a class="lnlinks" href="#hl-29-8">8</a>
</span><span class="lnt" id="hl-29-9"><a class="lnlinks" href="#hl-29-9">9</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">$ bspc query -D -d <span class="se">\^</span>2#older
</span></span><span class="line"><span class="cl">&gt; 0x00400004
</span></span><span class="line"><span class="cl"><span class="c1"># use # to join same types i.e. smallest and east</span>
</span></span><span class="line"><span class="cl"><span class="c1"># are the same type of descriptors but combining</span>
</span></span><span class="line"><span class="cl"><span class="c1"># them changes the meaning.</span>
</span></span><span class="line"><span class="cl">$ bspc query -N -n smallest#east
</span></span><span class="line"><span class="cl">&gt; 0x02000006
</span></span><span class="line"><span class="cl">$ bspc query -D -d next#next#next#next#next
</span></span><span class="line"><span class="cl">&gt; 0x00400006
</span></span></code></pre></td></tr></table>
</div>
</div><h3 id="rules" class="headerLink">
    <a href="#rules" class="header-mark"></a>Rules</h3><p>BSPWM allows custom settings for individual nodes. BSPWM calls it to window rules.
Besides the common stuff like adding, removing or, listing window rules we&rsquo;re instead
going to discuss the <code>--one-shot</code> flag. Essentially, it allows a rule to take effect
only once. For example, there is a neat way of spawning terminal windows of a certain
geometry by selecting an area in the screen by holding down the mouse.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-30-1"><a class="lnlinks" href="#hl-30-1">1</a>
</span><span class="lnt" id="hl-30-2"><a class="lnlinks" href="#hl-30-2">2</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="c1"># this requires slop</span>
</span></span><span class="line"><span class="cl">&gt; bspc rule -a St -o <span class="nv">state</span><span class="o">=</span>floating <span class="nv">rectangle</span><span class="o">=</span><span class="k">$(</span>slop<span class="k">)</span> <span class="o">&amp;&amp;</span> st
</span></span></code></pre></td></tr></table>
</div>
</div><figure><a class="lightgallery" href="./gifs/rules.gif" title="BSPWM Rules" data-thumbnail="./gifs/rules.gif" data-sub-html="<h2>Oneshot rules in BSPWM.</h2><p>BSPWM Rules</p>">
        <img
            
            loading="lazy"
            src="./gifs/rules.gif"
            srcset="./gifs/rules.gif, ./gifs/rules.gif 1.5x, ./gifs/rules.gif 2x"
            sizes="auto"
            alt="BSPWM Rules">
    </a><figcaption class="image-caption">Oneshot rules in BSPWM.</figcaption>
    </figure>
<p>Other ways of setting rules.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-31-1"><a class="lnlinks" href="#hl-31-1">1</a>
</span><span class="lnt" id="hl-31-2"><a class="lnlinks" href="#hl-31-2">2</a>
</span><span class="lnt" id="hl-31-3"><a class="lnlinks" href="#hl-31-3">3</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">bspc rule --add firefox:Navigator --one-shot <span class="nv">node</span><span class="o">=</span>@^1:^2:/first
</span></span><span class="line"><span class="cl">bspc rule -a St:st -o <span class="nv">node</span><span class="o">=</span>@^1:^2:/2/1
</span></span><span class="line"><span class="cl">bspc rule -a St:st -o <span class="nv">node</span><span class="o">=</span>@^1:^2:/2/2
</span></span></code></pre></td></tr></table>
</div>
</div><h3 id="event-subscriptions" class="headerLink">
    <a href="#event-subscriptions" class="header-mark"></a>Event Subscriptions</h3><p>BSPWM allows the user to listen to BSPWM events continuously and provides
metadata related to those events. The user may continuously read those data
or, use the event type itself to operate on that event release.
BSPWM categorizes events into six types <code>all</code>, <code>monitor</code>, <code>desktop</code>, <code>node</code>, <code>report</code>
and <code>pointer_action</code>. Additionally, it allows a <code>FIFO</code> flags that you can
utilize as well.</p>
<p>For example, we can create a desktop where all nodes are floating.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="ln" id="1"><a class="lnlinks" href="#1">1</a></span><span class="cl"><span class="cp">#!/usr/bin/env bash
</span></span></span><span class="line"><span class="ln" id="2"><a class="lnlinks" href="#2">2</a></span><span class="cl"><span class="cp"></span>
</span></span><span class="line"><span class="ln" id="3"><a class="lnlinks" href="#3">3</a></span><span class="cl"><span class="nv">DESKTOP</span><span class="o">=</span><span class="s2">&#34;</span><span class="k">$(</span>bspc query -D -d <span class="se">\^</span><span class="nv">$1</span><span class="k">)</span><span class="s2">&#34;</span>
</span></span><span class="line"><span class="ln" id="4"><a class="lnlinks" href="#4">4</a></span><span class="cl">bspc subscribe node_add <span class="p">|</span> <span class="k">while</span> <span class="nb">read</span> -r _ _ desktop _ node<span class="p">;</span> <span class="k">do</span>
</span></span><span class="line"><span class="ln" id="5"><a class="lnlinks" href="#5">5</a></span><span class="cl">  <span class="c1"># when a node spawns, change its state to floating </span>
</span></span><span class="line"><span class="ln" id="6"><a class="lnlinks" href="#6">6</a></span><span class="cl">  <span class="o">[</span> <span class="nv">$desktop</span> <span class="o">=</span> <span class="nv">$DESKTOP</span> <span class="o">]</span> <span class="o">&amp;&amp;</span> bspc node <span class="nv">$node</span> --state floating
</span></span><span class="line"><span class="ln" id="7"><a class="lnlinks" href="#7">7</a></span><span class="cl"><span class="k">done</span></span></span></code></pre></div>
<p>This is a pretty ordinary way of using event subscriptions. You can also script
<code>on_[monitor|node|desktop]_[add|remove]</code> functionalities, callback <code>on_geometry_change</code>
can also be scripted, etc. For getting a feel for what event subscriptions are
capable of, we will be making a new layout in <code>BSPWM</code> called <code>tall</code>.</p>
<p><code>tall</code> is the default <code>master-stack</code> layout where on one side, there is one
large window, called the <strong>master</strong> window and on another side, there are a stack
of windows called the slave windows. Hence, consider the following code.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="ln" id="1"><a class="lnlinks" href="#1"> 1</a></span><span class="cl"><span class="cp">#!/usr/bin/env bash
</span></span></span><span class="line"><span class="ln" id="2"><a class="lnlinks" href="#2"> 2</a></span><span class="cl"><span class="cp"></span>
</span></span><span class="line"><span class="ln" id="3"><a class="lnlinks" href="#3"> 3</a></span><span class="cl"><span class="c1"># INFO: This is a bare-bones implementation of tall.</span>
</span></span><span class="line"><span class="ln" id="4"><a class="lnlinks" href="#4"> 4</a></span><span class="cl"><span class="c1"># WARN: Bugs are to be expected.</span>
</span></span><span class="line"><span class="ln" id="5"><a class="lnlinks" href="#5"> 5</a></span><span class="cl"><span class="nv">N</span><span class="o">=(</span>bspc query -N @/2 -n<span class="o">)</span>
</span></span><span class="line"><span class="ln" id="6"><a class="lnlinks" href="#6"> 6</a></span><span class="cl">
</span></span><span class="line"><span class="ln" id="7"><a class="lnlinks" href="#7"> 7</a></span><span class="cl"><span class="k">function</span> calibrate<span class="o">()</span> <span class="o">{</span>
</span></span><span class="line"><span class="ln" id="8"><a class="lnlinks" href="#8"> 8</a></span><span class="cl">  bspc node <span class="s2">&#34;</span><span class="k">$(</span><span class="s2">&#34;</span><span class="si">${</span><span class="nv">N</span><span class="p">[@]</span><span class="si">}</span><span class="s2">&#34;</span> .descendant_of.!window <span class="p">|</span> tail -n1<span class="k">)</span><span class="s2">&#34;</span> -y horizontal
</span></span><span class="line"><span class="ln" id="9"><a class="lnlinks" href="#9"> 9</a></span><span class="cl">  bspc node @/2 -B
</span></span><span class="line"><span class="ln" id="10"><a class="lnlinks" href="#10">10</a></span><span class="cl"><span class="o">}</span>
</span></span><span class="line"><span class="ln" id="11"><a class="lnlinks" href="#11">11</a></span><span class="cl">
</span></span><span class="line"><span class="ln" id="12"><a class="lnlinks" href="#12">12</a></span><span class="cl"><span class="k">while</span> read<span class="p">;</span> <span class="k">do</span>
</span></span><span class="line"><span class="ln" id="13"><a class="lnlinks" href="#13">13</a></span><span class="cl">  <span class="o">[</span> <span class="s2">&#34;</span><span class="k">$(</span><span class="s2">&#34;</span><span class="si">${</span><span class="nv">N</span><span class="p">[@]</span><span class="si">}</span><span class="s2">&#34;</span> .descendant_of.window <span class="p">|</span> wc -l<span class="k">)</span><span class="s2">&#34;</span> -gt <span class="m">1</span> <span class="o">]</span> <span class="o">&amp;&amp;</span> calibrate
</span></span><span class="line"><span class="ln" id="14"><a class="lnlinks" href="#14">14</a></span><span class="cl"><span class="k">done</span> &lt; &lt;<span class="o">(</span>bspc subscribe node_add node_remove<span class="o">)</span></span></span></code></pre></div>
<p>From the above code, we will be first subscribing to <code>node_add</code> and <code>node_remove</code>
BSPWM events. This is because, we need to resize all the slave nodes and make
them have the same heights when a new window is added AND when a window is removed
from the slave stack or, the master. The resizing is done by first turning the
orientation type of the newly spawned slave&rsquo;s parent internal node to <code>horizontal</code>
as mentioned in <a href="#hl-33-8" rel="">line 6</a>. And, then the unification is
performed on the slave stack itself as mentioned in <a href="#hl-33-9" rel="">line 7</a>.</p>
<p>See the following demonstration for a better understanding.</p>
<figure><a class="lightgallery" href="./gifs/tall.gif" title="The `tall` layout" data-thumbnail="./gifs/tall.gif" data-sub-html="<h2>Custom master-slave layout also known as tall.</h2><p>The `tall` layout</p>">
        <img
            
            loading="lazy"
            src="./gifs/tall.gif"
            srcset="./gifs/tall.gif, ./gifs/tall.gif 1.5x, ./gifs/tall.gif 2x"
            sizes="auto"
            alt="The `tall` layout">
    </a><figcaption class="image-caption">Custom master-slave layout also known as <code>tall</code>.</figcaption>
    </figure>
<h3 id="receptacles" class="headerLink">
    <a href="#receptacles" class="header-mark"></a>Receptacles</h3><p>A leaf node that doesn’t hold any window is called a receptacle. When a node is inserted
into a receptacle in automatic mode, it will replace the receptacle. A
receptacle can be inserted on a node, preselected and killed. Receptacles can
therefore be used to build a tree whose leaves are receptacles. Using the
appropriate rules, one can then send windows on the leaves of this tree.
In BSPWM one can insert a receptacle by issuing the following command.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-32-1"><a class="lnlinks" href="#hl-32-1">1</a>
</span><span class="lnt" id="hl-32-2"><a class="lnlinks" href="#hl-32-2">2</a>
</span><span class="lnt" id="hl-32-3"><a class="lnlinks" href="#hl-32-3">3</a>
</span><span class="lnt" id="hl-32-4"><a class="lnlinks" href="#hl-32-4">4</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">bspc node <span class="s1">&#39;@parent&#39;</span> --insert-receptacle
</span></span><span class="line"><span class="cl">bspc query --nodes <span class="s1">&#39;@/second&#39;</span> --node <span class="s1">&#39;.descendant_of.!window&#39;</span>   <span class="se">\
</span></span></span><span class="line"><span class="cl"><span class="se"></span>  <span class="p">|</span> tail --lines<span class="o">=</span><span class="m">1</span>                                              <span class="se">\
</span></span></span><span class="line"><span class="cl"><span class="se"></span>  <span class="p">|</span> xargs --replace<span class="o">=</span><span class="s1">&#39;++&#39;</span> bspc node ++ --kill
</span></span></code></pre></td></tr></table>
</div>
</div><p>To transplant (replace) a window node into a receptacle, you would issue
the following commands.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-33-1"><a class="lnlinks" href="#hl-33-1">1</a>
</span><span class="lnt" id="hl-33-2"><a class="lnlinks" href="#hl-33-2">2</a>
</span><span class="lnt" id="hl-33-3"><a class="lnlinks" href="#hl-33-3">3</a>
</span><span class="lnt" id="hl-33-4"><a class="lnlinks" href="#hl-33-4">4</a>
</span><span class="lnt" id="hl-33-5"><a class="lnlinks" href="#hl-33-5">5</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="c1"># spawn a window with ID 0x02E00006 (say)</span>
</span></span><span class="line"><span class="cl">bspc node 0x02E00006 --insert-receptacle
</span></span><span class="line"><span class="cl"><span class="c1"># spawn another window node</span>
</span></span><span class="line"><span class="cl"><span class="c1"># @/second is the ID of the receptacle node</span>
</span></span><span class="line"><span class="cl">bspc node 0x02E00006 --to-node <span class="s2">&#34;</span><span class="k">$(</span>bspc query --nodes --node <span class="s1">&#39;@/second&#39;</span><span class="k">)</span><span class="s2">&#34;</span>
</span></span></code></pre></td></tr></table>
</div>
</div><h3 id="world-state" class="headerLink">
    <a href="#world-state" class="header-mark"></a>World State</h3><p>In BSPWM, a world state is the combined state of all BSPWM components
such as monitor info, desktop info and node info all represented in the
form of a JSON structure. It can be used to add logic and functionalities to that data.
It can also be treated as a debugging mechanism.</p>
<div class="details admonition note open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-pencil-alt fa-fw"></i>Why is dump state filled with unnecessary data?<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content"><p>You can narrow down the information you want by piping <code>bspc wm -d</code> through
<code>jq</code> and additionally, you may also use the following commands to narrow
down the info from the get-go.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-0-1"><a class="lnlinks" href="#hl-0-1">1</a>
</span><span class="lnt" id="hl-0-2"><a class="lnlinks" href="#hl-0-2">2</a>
</span><span class="lnt" id="hl-0-3"><a class="lnlinks" href="#hl-0-3">3</a>
</span><span class="lnt" id="hl-0-4"><a class="lnlinks" href="#hl-0-4">4</a>
</span><span class="lnt" id="hl-0-5"><a class="lnlinks" href="#hl-0-5">5</a>
</span><span class="lnt" id="hl-0-6"><a class="lnlinks" href="#hl-0-6">6</a>
</span><span class="lnt" id="hl-0-7"><a class="lnlinks" href="#hl-0-7">7</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">bspc query --tree --monitor
</span></span><span class="line"><span class="cl">bspc query -T -m newest.occupied
</span></span><span class="line"><span class="cl">bspc query --tree --desktop
</span></span><span class="line"><span class="cl">bspc query -T -d <span class="p">|</span> jq -r .root.secondChild.client.lastLayer
</span></span><span class="line"><span class="cl">bspc query --tree --node
</span></span><span class="line"><span class="cl">bspc query -T -n @/1
</span></span><span class="line"><span class="cl">bspc query -T -n @/first -n biggest
</span></span></code></pre></td></tr></table>
</div>
</div></div>
        </div>
    </div>
<p>But, on the user side, it is mostly used for saving and loading a WM state
as a layout. Essentially, one saves a state to a file, then writes scripts to
replace specific parts related to window nodes with receptacles. And, then
formulate one-shot rules that will redirect a node to a particular parent when
spawned.</p>
<p>In the following example, we will be using the <code>tall.sh</code> layout script from the
<a href="#event-subscriptions" rel="">Event Subscriptions</a> section and open
five windows and then record the state and save the <code>STDOUT</code> into <code>state.json</code>.
Then we will be using the <code>extract_canvas</code> Python script (included in the
<a href="https://github.com/baskerville/bspwm/tree/master/examples/receptacles" target="_blank" rel="noopener noreferrer">examples</a>
directory of the BSPWM repository) to replace the window nodes with
receptacles and then saving the <code>STDOUT</code> as a JSON file called <code>load.json</code>. Then
we will be using another script called <code>induce_rules</code> to create some rules out
of the nodes. Finally, we will be re-launching five windows again after loading
the <code>state.json</code> file.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-34-1"><a class="lnlinks" href="#hl-34-1"> 1</a>
</span><span class="lnt" id="hl-34-2"><a class="lnlinks" href="#hl-34-2"> 2</a>
</span><span class="lnt" id="hl-34-3"><a class="lnlinks" href="#hl-34-3"> 3</a>
</span><span class="lnt" id="hl-34-4"><a class="lnlinks" href="#hl-34-4"> 4</a>
</span><span class="lnt" id="hl-34-5"><a class="lnlinks" href="#hl-34-5"> 5</a>
</span><span class="lnt" id="hl-34-6"><a class="lnlinks" href="#hl-34-6"> 6</a>
</span><span class="lnt" id="hl-34-7"><a class="lnlinks" href="#hl-34-7"> 7</a>
</span><span class="lnt" id="hl-34-8"><a class="lnlinks" href="#hl-34-8"> 8</a>
</span><span class="lnt" id="hl-34-9"><a class="lnlinks" href="#hl-34-9"> 9</a>
</span><span class="lnt" id="hl-34-10"><a class="lnlinks" href="#hl-34-10">10</a>
</span><span class="lnt" id="hl-34-11"><a class="lnlinks" href="#hl-34-11">11</a>
</span><span class="lnt" id="hl-34-12"><a class="lnlinks" href="#hl-34-12">12</a>
</span><span class="lnt" id="hl-34-13"><a class="lnlinks" href="#hl-34-13">13</a>
</span><span class="lnt" id="hl-34-14"><a class="lnlinks" href="#hl-34-14">14</a>
</span><span class="lnt" id="hl-34-15"><a class="lnlinks" href="#hl-34-15">15</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">$ tall
</span></span><span class="line"><span class="cl">&gt; ^C
</span></span><span class="line"><span class="cl">$ bspc wm --dump-state &gt; state.json
</span></span><span class="line"><span class="cl">$ extract_canvas state.json &gt; load.json
</span></span><span class="line"><span class="cl">$ induce_rules state.json &gt; rules.sh
</span></span><span class="line"><span class="cl">$ cat rules.sh
</span></span><span class="line"><span class="cl">&gt; bspc rule -a St:st -o <span class="nv">node</span><span class="o">=</span>@^1:^3:/1
</span></span><span class="line"><span class="cl">&gt; bspc rule -a St:st -o <span class="nv">node</span><span class="o">=</span>@^1:^3:/2/1
</span></span><span class="line"><span class="cl">&gt; bspc rule -a St:st -o <span class="nv">node</span><span class="o">=</span>@^1:^3:/2/2/1
</span></span><span class="line"><span class="cl">&gt; bspc rule -a St:st -o <span class="nv">node</span><span class="o">=</span>@^1:^3:/2/2/2/1
</span></span><span class="line"><span class="cl">&gt; bspc rule -a St:st -o <span class="nv">node</span><span class="o">=</span>@^1:^3:/2/2/2/2/1
</span></span><span class="line"><span class="cl">$ chmod +x rules.sh
</span></span><span class="line"><span class="cl">$ ./rules.sh
</span></span><span class="line"><span class="cl">$ bspc wm --load-state <span class="s2">&#34;</span><span class="k">$(</span>readlink --canonicalize-existing load.json<span class="k">)</span><span class="s2">&#34;</span>
</span></span><span class="line"><span class="cl">$ <span class="k">while</span> read<span class="p">;</span> <span class="k">do</span> st <span class="p">&amp;;</span> <span class="k">done</span> &lt; &lt;<span class="o">(</span>cat ./rules.sh <span class="p">|</span> wc --lines<span class="o">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><blockquote>
<p>You can try swapping <code>St:st</code> targets with <code>*:*</code> and see the outcome.</p>
</blockquote>
<p>If all goes well then, those <code>st</code> windows will open in <code>tall</code> layout without
that <code>tall.sh</code> script or, whatever.</p>
<h2 id="references" class="headerLink">
    <a href="#references" class="header-mark"></a>References</h2><ul>
<li><a href="https://en.wikipedia.org/wiki/Binary_search_tree" target="_blank" rel="noopener noreferrer">https://en.wikipedia.org/wiki/Binary_search_tree</a></li>
<li><a href="https://en.wikipedia.org/wiki/Linked_list" target="_blank" rel="noopener noreferrer">https://en.wikipedia.org/wiki/Linked_list</a></li>
<li><a href="https://man.archlinux.org/man/bspwm.1" target="_blank" rel="noopener noreferrer">https://man.archlinux.org/man/bspwm.1</a></li>
<li><a href="https://github.com/baskerville/bspwm" target="_blank" rel="noopener noreferrer">https://github.com/baskerville/bspwm</a></li>
</ul>
<h2 id="tools" class="headerLink">
    <a href="#tools" class="header-mark"></a>Tools</h2><ul>
<li><a href="https://www.draw.io/index.html" target="_blank" rel="noopener noreferrer">draw.io</a></li>
<li><a href="https://inkscape.org/" target="_blank" rel="noopener noreferrer">Inkscape</a></li>
<li><a href="https://www.gimp.org/" target="_blank" rel="noopener noreferrer">GIMP</a></li>
<li><a href="https://www.shotcut.org/" target="_blank" rel="noopener noreferrer">Shotcut</a></li>
<li><a href="https://github.com/kohler/gifsicle" target="_blank" rel="noopener noreferrer">gifsicle</a></li>
<li><a href="https://ffmpeg.org/" target="_blank" rel="noopener noreferrer">ffmpeg</a></li>
<li><a href="https://github.com/MaartenBaert/ssr" target="_blank" rel="noopener noreferrer">simplescreenrecorder</a></li>
<li><a href="https://github.com/phw/peek" target="_blank" rel="noopener noreferrer">Peek</a></li>
<li><a href="https://imagemagick.org/" target="_blank" rel="noopener noreferrer">ImageMagick</a></li>
<li><a href="https://compressjpeg.com/" target="_blank" rel="noopener noreferrer">compressjpeg</a></li>
<li><a href="https://compresspng.com/" target="_blank" rel="noopener noreferrer">compresspng</a></li>
</ul>
<h2 id="ending-note" class="headerLink">
    <a href="#ending-note" class="header-mark"></a>Ending Note</h2><p>Phew! That was a lot. I did NOT know what I was getting into when I
started writing this 😅. Although, hopefully this,
won&rsquo;t end here and next I might write another article on how to extend
and customize BSPWM (that is still light years away). Additionally, Some
sections did not make into this article as it was getting a bit too long like <strong>Motions</strong>,
<strong>Extensions</strong> and <strong>History</strong>.</p>
<p>Lastly, I hope you have learned something new. Cheers 🍻.</p>
]]></description></item><item><title>EWW Powermenu</title><link>https://dharmx.is-a.dev/eww-powermenu/</link><pubDate>Thu, 18 Aug 2022 18:08:53 +0530</pubDate><author><name>dharmx</name></author><guid>https://dharmx.is-a.dev/eww-powermenu/</guid><description><![CDATA[<div class="featured-image">
                <img src="/eww-powermenu/images/featured-image.png" referrerpolicy="no-referrer">
            </div><h1 id="introduction" class="headerLink">
    <a href="#introduction" class="header-mark"></a>Introduction</h1><p>Hello there. Hope you are doing well. Lately, I have been playing with a neat
piece of software called <a href="https://elkowar.github.io/eww" target="_blank" rel="noopener noreferrer">EWW</a>. Making some
aesthetic UI, widgets and whatnot.</p>
<p>Note that, this has a very steep learning curve. This is because tutorials,
demo and examples about this are quite scarce. And the examples are either
too complex or, very poorly documented and not to mention most of them are
not even documented.</p>
<h2 id="prerequisites" class="headerLink">
    <a href="#prerequisites" class="header-mark"></a>Prerequisites</h2><p>Some requirements about what you&rsquo;d need to get started like what OS will this
work on, what languages you&rsquo;d need to know, etc.</p>
<ul>
<li>
<p>Familiarity with Linux is required. This is for Linux users only.</p>
</li>
<li>
<p>I will be using <a href="https://archlinux.org" target="_blank" rel="noopener noreferrer">Archlinux</a> for this. <a href="https://www.debian.org" target="_blank" rel="noopener noreferrer">Debian</a>
users may
need to translate some commands. But, for the most part equivalent commands
will be provided.</p>
</li>
<li>
<p>A bit of programming experience will be preferred.</p>
</li>
<li>
<p>A <a href="https://www.x.org" target="_blank" rel="noopener noreferrer">xorg</a> based
<a href="https://wiki.archlinux.org/title/Window_manager" target="_blank" rel="noopener noreferrer">window manager</a>.
Like <a href="https://github.com/baskerville/bspwm" target="_blank" rel="noopener noreferrer">bspwm</a>, <a href="http://www.qtile.org/" target="_blank" rel="noopener noreferrer">qtile</a>,
<a href="https://xmonad.org/" target="_blank" rel="noopener noreferrer">xmonad</a>, etc. A <a href="https://itsfoss.com/what-is-desktop-environment" target="_blank" rel="noopener noreferrer">display environment</a>
will work as well.</p>
<div class="details admonition note open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-pencil-alt fa-fw"></i>Does EWW work on Wayland?<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">This tutorial is designed for running EWW on a xorg-based
window manager, but minimal changes should be able to make it run on wayland.
See <a href="https://elkowar.github.io/eww/#building" target="_blank" rel="noopener noreferrer">build flags</a> and <a href="https://elkowar.github.io/eww/configuration.html#wayland" target="_blank" rel="noopener noreferrer">widget definitions</a>.</div>
        </div>
    </div>
</li>
</ul>
<h2 id="dependencies" class="headerLink">
    <a href="#dependencies" class="header-mark"></a>Dependencies</h2><p>Packages that are needed for this to work correctly.</p>
<div class="details admonition tip open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-lightbulb fa-fw"></i>Efficiently look for packages for any distro.<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">You may use <a href="https://command-not-found.com" target="_blank" rel="noopener noreferrer">command-not-found</a> if
you do not know what a package is called for your distro (Arch&rsquo;s and
Debian&rsquo;s package naming conventions are quite different).</div>
        </div>
    </div>
<ul>
<li>First and foremost you will need <a href="https://elkowar.github.io/eww" target="_blank" rel="noopener noreferrer">EWW</a>. Head
over to their <a href="https://elkowar.github.io/eww/eww.html#how-to-install-eww" target="_blank" rel="noopener noreferrer">website</a>
and follow their instructions.</li>
<li>And you would also need <code>sudo</code> which you already might have installed.</li>
<li>Fonts used in this widget are
<a href="https://fonts.google.com/specimen/Poiret&#43;One" target="_blank" rel="noopener noreferrer">Poiret One</a>,
<a href="https://fonts.google.com/specimen/Koulen" target="_blank" rel="noopener noreferrer">Koulen</a> and <a href="https://github.com/phosphor-icons/web/tree/master/src/regular" target="_blank" rel="noopener noreferrer">Phosphor</a>.</li>
<li><code>nmcli</code> tool that comes with Network Manager which you already might have installed.</li>
</ul>


<p>
  <details >
  <summary markdown="span">Copy and Paste</summary>
  <div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-0-1"><a class="lnlinks" href="#hl-0-1"> 1</a>
</span><span class="lnt" id="hl-0-2"><a class="lnlinks" href="#hl-0-2"> 2</a>
</span><span class="lnt" id="hl-0-3"><a class="lnlinks" href="#hl-0-3"> 3</a>
</span><span class="lnt" id="hl-0-4"><a class="lnlinks" href="#hl-0-4"> 4</a>
</span><span class="lnt" id="hl-0-5"><a class="lnlinks" href="#hl-0-5"> 5</a>
</span><span class="lnt" id="hl-0-6"><a class="lnlinks" href="#hl-0-6"> 6</a>
</span><span class="lnt" id="hl-0-7"><a class="lnlinks" href="#hl-0-7"> 7</a>
</span><span class="lnt" id="hl-0-8"><a class="lnlinks" href="#hl-0-8"> 8</a>
</span><span class="lnt" id="hl-0-9"><a class="lnlinks" href="#hl-0-9"> 9</a>
</span><span class="lnt" id="hl-0-10"><a class="lnlinks" href="#hl-0-10">10</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl"><span class="c1">## Debian</span>
</span></span><span class="line"><span class="cl">curl --proto <span class="s1">&#39;=https&#39;</span> --tlsv1.2 -sSf https://sh.rustup.rs <span class="p">|</span> sh
</span></span><span class="line"><span class="cl">git clone --depth <span class="m">1</span> https://github.com/elkowar/eww.git
</span></span><span class="line"><span class="cl"><span class="nb">cd</span> eww
</span></span><span class="line"><span class="cl"><span class="c1"># then install the *-devel variants of your distro</span>
</span></span><span class="line"><span class="cl"><span class="c1"># SEE: https://elkowar.github.io/eww/#prerequisites</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1">## Archlinux: Using an AUR helper like yay is advised.</span>
</span></span><span class="line"><span class="cl"><span class="c1">## SEE: https://wiki.archlinux.org/title/AUR_helpers.</span>
</span></span><span class="line"><span class="cl">yay --sync eww-git <span class="c1"># yay -S networkmanager --needed</span>
</span></span></code></pre></td></tr></table>
</div>
</div>
  </details>
</p>

<p>That is all really.</p>
<h2 id="setup" class="headerLink">
    <a href="#setup" class="header-mark"></a>Setup</h2><p>Getting things ready before we begin.</p>
<ul>
<li>For starters, you will need to create a folder at <code>~/.config/eww</code>.</li>
<li>Then a few files at <code>~/.config/eww/eww.scss</code> and <code>~/.config/eww/eww.yuck</code>.</li>
<li>A wallpaper. I&rsquo;ll be use <a href="https://wallhaven.cc/w/dgzmxj" target="_blank" rel="noopener noreferrer">this</a> one from <a href="https://wallhaven.cc" target="_blank" rel="noopener noreferrer">wallhaven</a>
which was converted to OneDark using <a href="https://ign.schrodinger-hat.it/color-schemes" target="_blank" rel="noopener noreferrer">ign</a>.
Rename the file as <code>wallpaper</code> (yes, remove the extension as well) and then
put it in <code>~/.config/eww</code>.</li>
</ul>


<p>
  <details >
  <summary markdown="span">Copy and Paste</summary>
  <div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-0-1"><a class="lnlinks" href="#hl-0-1">1</a>
</span><span class="lnt" id="hl-0-2"><a class="lnlinks" href="#hl-0-2">2</a>
</span><span class="lnt" id="hl-0-3"><a class="lnlinks" href="#hl-0-3">3</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">mkdir ~/.config/eww
</span></span><span class="line"><span class="cl"><span class="nb">cd</span> ~/.config/eww
</span></span><span class="line"><span class="cl">touch eww.yuck eww.scss
</span></span></code></pre></td></tr></table>
</div>
</div>
  </details>
</p>

<p>All preparations are now complete. Now, we can start (Finally! 😃).</p>
<h2 id="syntax" class="headerLink">
    <a href="#syntax" class="header-mark"></a>Syntax</h2><p>Introduction to yuck syntax, SCSS syntax and some handy shell commands.</p>
<h3 id="yuck-syntax" class="headerLink">
    <a href="#yuck-syntax" class="header-mark"></a>Yuck Syntax</h3><p>The above heading may be confusing for new users, but it is legitimate.
The configuration file is literally called <code>eww.yuck</code> (pun intended).</p>
<blockquote>
<p>&ldquo;EWW&rdquo; is configured using its own language called yuck. Using yuck, you declare
the structure and content of your widgets, the geometry, position, and behavior
of any windows, as well as any state and data that will be used in your
widgets. &ldquo;Yuck&rdquo; is based around S-expressions, which you may know from lisp-like
languages.</p>
</blockquote>
<p>Yuck is a lisp-based language (which is <em>based</em>) that uses parentheses quite
excessively as you will see in the subsequent sections. It can be hard to read
at first. But as most things you will adapt.</p>
<div class="details admonition tip">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-lightbulb fa-fw"></i>Install a syntax highlighting plugin.<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content"><ol>
<li>
<p>It is recommended to install <a href="https://en.wikipedia.org/wiki/Domain-specific_language" target="_blank" rel="noopener noreferrer">DSL</a>
plugins like <a href="https://github.com/elkowar/yuck.vim" target="_blank" rel="noopener noreferrer">yuck.vim</a> for Vim users or,
<a href="https://github.com/owenrumney/yuck-vscode" target="_blank" rel="noopener noreferrer">yuck-vscode</a> if you use VSCode for
syntax highlighting.</p>
</li>
<li>
<p>For Vim users you might want to use <a href="https://github.com/bhurlow/vim-parinfer" target="_blank" rel="noopener noreferrer">vim-parinfer</a>
for auto-indentation. Note that, the author of <a href="https://github.com/elkowar/yuck.vim" target="_blank" rel="noopener noreferrer">yuck.vim</a>
has already implemented auto-indentation to a specific degree.</p>
</li>
<li>
<p>Lastly, since I am a <a href="https://neovim.io" target="_blank" rel="noopener noreferrer">Neovim</a> user therefore, I am
obligated to say this; You might want to use <a href="https://github.com/gpanders/nvim-parinfer" target="_blank" rel="noopener noreferrer">nvim-parinfer</a>
by <a href="https://github.com/gpanders" target="_blank" rel="noopener noreferrer">gpanders</a> instead of the Vim version as this
one is written in pure Lua and is generally faster than VimL, albeit a bit
underdeveloped.</p>
</li>
</ol>
</div>
        </div>
    </div>
<h4 id="defining-a-window" class="headerLink">
    <a href="#defining-a-window" class="header-mark"></a>Defining A Window</h4><p>A window is a box that stores things. In this case the &ldquo;things&rdquo; are known as
widgets (and no, windows are not widgets). EWW states that a window can only
house one widget. Now, a said widget may be a <code>box</code> which has the ability to
house multiple widgets, e.g. a <code>label</code> which will display a text as later
explained in the <a href="#widgets-that-we-will-need" rel="">Widgets That We Will Need</a>
section.</p>
<p>For now, take a look at the following yuck snippet.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-0-1"><a class="lnlinks" href="#hl-0-1">1</a>
</span><span class="lnt" id="hl-0-2"><a class="lnlinks" href="#hl-0-2">2</a>
</span><span class="lnt" id="hl-0-3"><a class="lnlinks" href="#hl-0-3">3</a>
</span><span class="lnt" id="hl-0-4"><a class="lnlinks" href="#hl-0-4">4</a>
</span><span class="lnt" id="hl-0-5"><a class="lnlinks" href="#hl-0-5">5</a>
</span><span class="lnt" id="hl-0-6"><a class="lnlinks" href="#hl-0-6">6</a>
</span><span class="lnt" id="hl-0-7"><a class="lnlinks" href="#hl-0-7">7</a>
</span><span class="lnt" id="hl-0-8"><a class="lnlinks" href="#hl-0-8">8</a>
</span><span class="lnt" id="hl-0-9"><a class="lnlinks" href="#hl-0-9">9</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-fennel" data-lang="fennel"><span class="line"><span class="cl"><span class="p">(</span><span class="nf">defwindow</span><span class="w"> </span><span class="nv">powermenu</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="ss">:monitor</span><span class="w"> </span><span class="mi">0</span><span class="w"> </span><span class="c1">;; Optional for X11</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="ss">:stacking</span><span class="w"> </span><span class="s">&#34;fg&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="ss">:windowtype</span><span class="w"> </span><span class="s">&#34;normal&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="ss">:wm-ignore</span><span class="w"> </span><span class="nv">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="ss">:geometry</span><span class="w"> </span><span class="p">(</span><span class="nf">geometry</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">              </span><span class="ss">:width</span><span class="w"> </span><span class="s">&#34;100%&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">              </span><span class="ss">:height</span><span class="w"> </span><span class="s">&#34;100%&#34;</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="p">(</span><span class="nf">powermenu_layout</span><span class="p">))</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><p>This is a window definition in yuck syntax. Take a guess of what each of the
properties mean and crosscheck them from the following table.</p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>width</td>
<td>Width of the window. Values may be provided in px or %.</td>
</tr>
<tr>
<td>height</td>
<td>Height of the window. Values may be provided in px or %.</td>
</tr>
<tr>
<td>stacking</td>
<td>Where the window should appear in the stack. Possible values: fg, bg.</td>
</tr>
<tr>
<td>wm-ignore</td>
<td>Whether the window manager should ignore this window. This is useful for dashboard-style widgets that don&rsquo;t need to interact with other windows at all. Note that this makes some of the other properties not have any effect. Either true or false.</td>
</tr>
<tr>
<td>windowtype</td>
<td>Specify what type of window this is. This will be used by your window manager to determine how it should handle your window. Possible values: normal, dock, toolbar, dialog, desktop. Default: dock if reserve is specified, normal otherwise.</td>
</tr>
</tbody>
</table>
<div class="details admonition note open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-pencil-alt fa-fw"></i>DO NOT hardcode dimensions!<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">Always use <code>%</code> for widths and heights.</div>
        </div>
    </div>
<p>Learn more about properties from the <a href="https://elkowar.github.io/eww/configuration.html#defwindow-properties" target="_blank" rel="noopener noreferrer">docs</a>.</p>
<p>The <code>powermenu_layout</code> part is a custom widget.</p>
<h4 id="defining-a-widget" class="headerLink">
    <a href="#defining-a-widget" class="header-mark"></a>Defining A Widget</h4><p>Take a look at the following snippet.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-1-1"><a class="lnlinks" href="#hl-1-1">1</a>
</span><span class="lnt" id="hl-1-2"><a class="lnlinks" href="#hl-1-2">2</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-fennel" data-lang="fennel"><span class="line"><span class="cl"><span class="p">(</span><span class="nf">defwidget</span><span class="w"> </span><span class="nv">powermenu_layout</span><span class="w"> </span><span class="p">[]</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="p">(</span><span class="nf">label</span><span class="w"> </span><span class="ss">:text</span><span class="w"> </span><span class="s">&#34;Hello, World!&#34;</span><span class="p">))</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><p>This is a widget that will display the string &ldquo;Hello, World!&rdquo; once it has been
hooked into a window as you have seen above.</p>
<p>Additionally, you can also specify widget properties in a window definition.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-2-1"><a class="lnlinks" href="#hl-2-1"> 1</a>
</span><span class="lnt" id="hl-2-2"><a class="lnlinks" href="#hl-2-2"> 2</a>
</span><span class="lnt" id="hl-2-3"><a class="lnlinks" href="#hl-2-3"> 3</a>
</span><span class="lnt" id="hl-2-4"><a class="lnlinks" href="#hl-2-4"> 4</a>
</span><span class="lnt" id="hl-2-5"><a class="lnlinks" href="#hl-2-5"> 5</a>
</span><span class="lnt" id="hl-2-6"><a class="lnlinks" href="#hl-2-6"> 6</a>
</span><span class="lnt" id="hl-2-7"><a class="lnlinks" href="#hl-2-7"> 7</a>
</span><span class="lnt" id="hl-2-8"><a class="lnlinks" href="#hl-2-8"> 8</a>
</span><span class="lnt" id="hl-2-9"><a class="lnlinks" href="#hl-2-9"> 9</a>
</span><span class="lnt" id="hl-2-10"><a class="lnlinks" href="#hl-2-10">10</a>
</span><span class="lnt" id="hl-2-11"><a class="lnlinks" href="#hl-2-11">11</a>
</span><span class="lnt" id="hl-2-12"><a class="lnlinks" href="#hl-2-12">12</a>
</span><span class="lnt" id="hl-2-13"><a class="lnlinks" href="#hl-2-13">13</a>
</span><span class="lnt" id="hl-2-14"><a class="lnlinks" href="#hl-2-14">14</a>
</span><span class="lnt" id="hl-2-15"><a class="lnlinks" href="#hl-2-15">15</a>
</span><span class="lnt" id="hl-2-16"><a class="lnlinks" href="#hl-2-16">16</a>
</span><span class="lnt" id="hl-2-17"><a class="lnlinks" href="#hl-2-17">17</a>
</span><span class="lnt" id="hl-2-18"><a class="lnlinks" href="#hl-2-18">18</a>
</span><span class="lnt" id="hl-2-19"><a class="lnlinks" href="#hl-2-19">19</a>
</span><span class="lnt" id="hl-2-20"><a class="lnlinks" href="#hl-2-20">20</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-fennel" data-lang="fennel"><span class="line"><span class="cl"><span class="p">(</span><span class="nf">defwindow</span><span class="w"> </span><span class="nv">powermenu</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="ss">:stacking</span><span class="w"> </span><span class="s">&#34;fg&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="ss">:windowtype</span><span class="w"> </span><span class="s">&#34;normal&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="ss">:wm-ignore</span><span class="w"> </span><span class="nv">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="ss">:geometry</span><span class="w"> </span><span class="p">(</span><span class="nf">geometry</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">              </span><span class="ss">:width</span><span class="w"> </span><span class="s">&#34;100%&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">              </span><span class="ss">:height</span><span class="w"> </span><span class="s">&#34;100%&#34;</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="p">(</span><span class="nf">label</span><span class="w"> </span><span class="ss">:text</span><span class="w"> </span><span class="s">&#34;Hello, World!&#34;</span><span class="p">))</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="c1">;; Alternatively</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="p">(</span><span class="nf">defwindow</span><span class="w"> </span><span class="nv">powermenu</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="ss">:stacking</span><span class="w"> </span><span class="s">&#34;fg&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="ss">:windowtype</span><span class="w"> </span><span class="s">&#34;normal&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="ss">:wm-ignore</span><span class="w"> </span><span class="nv">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="ss">:geometry</span><span class="w"> </span><span class="p">(</span><span class="nf">geometry</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">              </span><span class="ss">:width</span><span class="w"> </span><span class="s">&#34;100%&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">              </span><span class="ss">:height</span><span class="w"> </span><span class="s">&#34;100%&#34;</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="p">(</span><span class="nf">box</span><span class="w"> </span><span class="ss">:orientation</span><span class="w"> </span><span class="s">&#34;vertical&#34;</span><span class="w"> </span><span class="ss">:class</span><span class="w"> </span><span class="s">&#34;bx&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="p">(</span><span class="nf">button</span><span class="w"> </span><span class="ss">:onclick</span><span class="w"> </span><span class="s">&#34;notify-send Hello&#34;</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="p">(</span><span class="nf">label</span><span class="w"> </span><span class="ss">:text</span><span class="w"> </span><span class="s">&#34;Hello, World!&#34;</span><span class="p">)))</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><p>However, I would advise you against that since it would look congested and illegible.</p>
<h4 id="widgets-that-we-will-need" class="headerLink">
    <a href="#widgets-that-we-will-need" class="header-mark"></a>Widgets That We Will Need</h4><p>EWW has a plethora of built-in widgets that you can use for your own custom widget.
Out of those we will only need a few for this project, which are pretty basic.</p>
<ul>
<li>
<p>The <a href="https://elkowar.github.io/eww/widgets.html#label" target="_blank" rel="noopener noreferrer"><code>label</code></a> widget. It has
the ability to print non-interactive text on the screen. But, it shines the
most when used in conjunction with buttons, boxes, eventboxes (i.e. when
nested within other widgets).</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-3-1"><a class="lnlinks" href="#hl-3-1">1</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-fennel" data-lang="fennel"><span class="line"><span class="cl"><span class="p">(</span><span class="nf">label</span><span class="w"> </span><span class="ss">:text</span><span class="w"> </span><span class="s">&#34;Hello&#34;</span><span class="p">)</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><p>Labels can also be implicitly defined.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-4-1"><a class="lnlinks" href="#hl-4-1">1</a>
</span><span class="lnt" id="hl-4-2"><a class="lnlinks" href="#hl-4-2">2</a>
</span><span class="lnt" id="hl-4-3"><a class="lnlinks" href="#hl-4-3">3</a>
</span><span class="lnt" id="hl-4-4"><a class="lnlinks" href="#hl-4-4">4</a>
</span><span class="lnt" id="hl-4-5"><a class="lnlinks" href="#hl-4-5">5</a>
</span><span class="lnt" id="hl-4-6"><a class="lnlinks" href="#hl-4-6">6</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-fennel" data-lang="fennel"><span class="line"><span class="cl"><span class="p">(</span><span class="nf">defwindow</span><span class="w"> </span><span class="nv">dummy</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="ss">:windowtype</span><span class="w"> </span><span class="s">&#34;normal&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="ss">:geometry</span><span class="w"> </span><span class="p">(</span><span class="nf">geometry</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">              </span><span class="ss">:width</span><span class="w"> </span><span class="s">&#34;100%&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">              </span><span class="ss">:height</span><span class="w"> </span><span class="s">&#34;100%&#34;</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="s">&#34;Hello, World!&#34;</span><span class="p">)</span><span class="w"> </span><span class="c1">;; this is also a label</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>The <a href="https://elkowar.github.io/eww/widgets.html#button" target="_blank" rel="noopener noreferrer"><code>button</code></a> widget.
It just executes a command on left, right and middle clicks.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-5-1"><a class="lnlinks" href="#hl-5-1">1</a>
</span><span class="lnt" id="hl-5-2"><a class="lnlinks" href="#hl-5-2">2</a>
</span><span class="lnt" id="hl-5-3"><a class="lnlinks" href="#hl-5-3">3</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-fennel" data-lang="fennel"><span class="line"><span class="cl"><span class="p">(</span><span class="nf">button</span><span class="w"> </span><span class="ss">:onclick</span><span class="w"> </span><span class="s">&#34;notify-send Left&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="ss">:onrightclick</span><span class="w"> </span><span class="s">&#34;notify-send Right&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="s">&#34;Click Me!&#34;</span><span class="p">)</span><span class="w"> </span><span class="c1">;; this is a label nested within a button</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>The <a href="https://elkowar.github.io/eww/widgets.html#box" target="_blank" rel="noopener noreferrer"><code>box</code></a> widget. It allows
nesting widgets.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-6-1"><a class="lnlinks" href="#hl-6-1"> 1</a>
</span><span class="lnt" id="hl-6-2"><a class="lnlinks" href="#hl-6-2"> 2</a>
</span><span class="lnt" id="hl-6-3"><a class="lnlinks" href="#hl-6-3"> 3</a>
</span><span class="lnt" id="hl-6-4"><a class="lnlinks" href="#hl-6-4"> 4</a>
</span><span class="lnt" id="hl-6-5"><a class="lnlinks" href="#hl-6-5"> 5</a>
</span><span class="lnt" id="hl-6-6"><a class="lnlinks" href="#hl-6-6"> 6</a>
</span><span class="lnt" id="hl-6-7"><a class="lnlinks" href="#hl-6-7"> 7</a>
</span><span class="lnt" id="hl-6-8"><a class="lnlinks" href="#hl-6-8"> 8</a>
</span><span class="lnt" id="hl-6-9"><a class="lnlinks" href="#hl-6-9"> 9</a>
</span><span class="lnt" id="hl-6-10"><a class="lnlinks" href="#hl-6-10">10</a>
</span><span class="lnt" id="hl-6-11"><a class="lnlinks" href="#hl-6-11">11</a>
</span><span class="lnt" id="hl-6-12"><a class="lnlinks" href="#hl-6-12">12</a>
</span><span class="lnt" id="hl-6-13"><a class="lnlinks" href="#hl-6-13">13</a>
</span><span class="lnt" id="hl-6-14"><a class="lnlinks" href="#hl-6-14">14</a>
</span><span class="lnt" id="hl-6-15"><a class="lnlinks" href="#hl-6-15">15</a>
</span><span class="lnt" id="hl-6-16"><a class="lnlinks" href="#hl-6-16">16</a>
</span><span class="lnt" id="hl-6-17"><a class="lnlinks" href="#hl-6-17">17</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-fennel" data-lang="fennel"><span class="line"><span class="cl"><span class="c1">;; :orientation &#34;v&#34; means the same</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="p">(</span><span class="nf">box</span><span class="w"> </span><span class="ss">:orientation</span><span class="w"> </span><span class="s">&#34;vertical&#34;</span><span class="w"> </span><span class="ss">:class</span><span class="w"> </span><span class="s">&#34;bx&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="p">(</span><span class="nf">label</span><span class="w"> </span><span class="ss">:text</span><span class="w"> </span><span class="s">&#34;This is a label.&#34;</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="p">(</span><span class="nf">button</span><span class="w"> </span><span class="ss">:class</span><span class="w"> </span><span class="s">&#34;btn&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="p">(</span><span class="nf">label</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="ss">:text</span><span class="w"> </span><span class="s">&#34;This is a label nested inside of a button.&#34;</span><span class="p">))</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="s">&#34;This is also a label.&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="c1">;; no orientation means horizontal</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="p">(</span><span class="nf">box</span><span class="w"> </span><span class="ss">:class</span><span class="w"> </span><span class="s">&#34;nst-bx&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="c1">;; NOTE: You have to write more when you use an explicit label.</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="c1">;;       So, in this case, I would follow a discipline to only</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="c1">;;       use it when I need to apply another option to it like,</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="c1">;;       limit-width.</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="p">(</span><span class="nf">label</span><span class="w"> </span><span class="ss">:text</span><span class="w"> </span><span class="s">&#34;Hello&#34;</span><span class="w"> </span><span class="ss">:limit-width</span><span class="w"> </span><span class="mi">4</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="p">(</span><span class="nf">button</span><span class="w"> </span><span class="ss">:onclick</span><span class="w"> </span><span class="s">&#34;notify-send Left&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="ss">:onmiddleclick</span><span class="w"> </span><span class="s">&#34;notify-send Middle&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="s">&#34;Hello&#34;</span><span class="p">)))</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><p>Note, <strong>vertical</strong> orientation will place the widgets in a top to bottom flow and
<strong>horizontal</strong>, left to right.</p>
</li>
</ul>
<blockquote>
<p><strong>Exercise</strong>: Try to build a widget that will show &ldquo;Hi there.&rdquo; and will
consume the left half of the screen.</p>
</blockquote>
<p>Learn more about other widgets and their properties from the
<a href="https://elkowar.github.io/eww/widgets.html#widgets" target="_blank" rel="noopener noreferrer">docs</a>.</p>
<h4 id="defining-variables-and-dynamic-data" class="headerLink">
    <a href="#defining-variables-and-dynamic-data" class="header-mark"></a>Defining Variables And Dynamic Data</h4><p>Take a look at <a href="#showcase" rel="">Showcase</a> section. Notice that
there are Network, Time and Battery information. Those are not interactive
widgets but they are dynamic. Rather, they display dynamic data. Like,
let&rsquo;s take the Time label in the bottom-left corner. This label will display
the new time value whenever the time changes.</p>
<p>So, if the time becomes <code>12:00</code> to <code>12:01</code>, the label will reflect that.
This is NOT automatic. You need to configure this behavior by using a poll
variable, that will run the <code>date</code> command at a specific interval and capture
the <code>STDOUT</code>.</p>
<p>Hence, consider the following.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-7-1"><a class="lnlinks" href="#hl-7-1">1</a>
</span><span class="lnt" id="hl-7-2"><a class="lnlinks" href="#hl-7-2">2</a>
</span><span class="lnt" id="hl-7-3"><a class="lnlinks" href="#hl-7-3">3</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-fennel" data-lang="fennel"><span class="line"><span class="cl"><span class="c1">;; `` are just regular quotes</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="p">(</span><span class="nf">defpoll</span><span class="w"> </span><span class="nv">time</span><span class="w"> </span><span class="ss">:interval</span><span class="w"> </span><span class="s">&#34;5s&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="o">`</span><span class="nv">date</span><span class="w"> </span><span class="nv">+</span><span class="o">&#39;</span><span class="p">{</span><span class="s">&#34;hour&#34;</span><span class="err">:</span><span class="s">&#34;%H&#34;</span><span class="err">,</span><span class="s">&#34;min&#34;</span><span class="err">:</span><span class="s">&#34;%M&#34;</span><span class="p">}</span><span class="o">&#39;`</span><span class="p">)</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><p>Here, the command <code>date +'{&quot;hour&quot;:&quot;%H&quot;,&quot;min&quot;:&quot;%M&quot;}'</code> will be executed with
an interval of 5 seconds which will return <code>{&quot;hour&quot;:&quot;11&quot;,&quot;min&quot;:&quot;30&quot;}</code> for example.</p>
<div class="details admonition note">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-pencil-alt fa-fw"></i>EWW can parse JSON.<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">The weird format string in the <code>date</code> call is known as <a href="https://www.json.org" target="_blank" rel="noopener noreferrer">JSON</a>.
<code>date +'%H:%M'</code> could be used instead but, know that a JSON string can also be used.</div>
        </div>
    </div>
<p>Now, you just need to <em>bind</em> this to a widget label.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-8-1"><a class="lnlinks" href="#hl-8-1">1</a>
</span><span class="lnt" id="hl-8-2"><a class="lnlinks" href="#hl-8-2">2</a>
</span><span class="lnt" id="hl-8-3"><a class="lnlinks" href="#hl-8-3">3</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-fennel" data-lang="fennel"><span class="line"><span class="cl"><span class="p">(</span><span class="nf">label</span><span class="w"> </span><span class="ss">:text</span><span class="w"> </span><span class="nv">time</span><span class="p">)</span><span class="w"> </span><span class="c1">;; will display {&#34;hour&#34;:&#34;11&#34;,&#34;min&#34;:&#34;30&#34;} as is</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="p">(</span><span class="nf">label</span><span class="w"> </span><span class="ss">:text</span><span class="w"> </span><span class="p">{</span><span class="nv">time.min</span><span class="p">})</span><span class="w"> </span><span class="c1">;; will display 30 - i.e. useful for JSON</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="p">(</span><span class="nf">label</span><span class="w"> </span><span class="ss">:text</span><span class="w"> </span><span class="s">&#34;${time.hour} :: ${time.min}&#34;</span><span class="p">)</span><span class="w"> </span><span class="c1">;; will display 11 :: 30</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><p>There are other kinds of variables as well which you can learn about from the
<a href="https://elkowar.github.io/eww/configuration.html#adding-dynamic-content" target="_blank" rel="noopener noreferrer">docs</a>.</p>
<h4 id="magic-variables" class="headerLink">
    <a href="#magic-variables" class="header-mark"></a>Magic Variables</h4><p>Convenient built-in variables that are added so that you do not have to do it yourself.
We&rsquo;ll only need <a href="https://elkowar.github.io/eww/magic-vars.html#magic-variables" target="_blank" rel="noopener noreferrer"><code>EWW_BATTERY</code></a>
for this one.</p>
<p>There are numerous magic variables which you will find in the
<a href="https://elkowar.github.io/eww/magic-vars.html#eww_battery" target="_blank" rel="noopener noreferrer">docs</a>.</p>
<h3 id="scss-syntax" class="headerLink">
    <a href="#scss-syntax" class="header-mark"></a>SCSS Syntax</h3><p>EWW widgets are styled using <a href="https://sass-lang.com" target="_blank" rel="noopener noreferrer">SCSS</a> which compiles to CSS.
Since it is a well known language I won&rsquo;t be teaching you SCSS/CSS; quite
frankly, there are numerous sites and videos that will explain this better.</p>
<p>Here are a few links. Keep in mind that you just need to learn CSS and then
gloss over them to get the differences between CSS and SCSS.</p>
<ul>
<li><a href="https://sass-lang.com/documentation/syntax" target="_blank" rel="noopener noreferrer">Official Documentation — sass-lang.com</a></li>
<li><a href="https://www.code-boost.com/beginners-guide-to-scss" target="_blank" rel="noopener noreferrer">Beginner&rsquo;s Guide to Using SCSS — code-boost.com</a></li>
<li><a href="https://blog.logrocket.com/the-definitive-guide-to-scss" target="_blank" rel="noopener noreferrer">The definitive guide to SCSS — logrocket.com</a></li>
</ul>
<p>You may want to learn CSS first if you do not know it.
<a href="https://youtu.be/1PnVor36_40" target="_blank" rel="noopener noreferrer">Learn CSS in 20 Minutes</a> video by
<a href="https://www.youtube.com/c/WebDevSimplified" target="_blank" rel="noopener noreferrer">Web Dev Simplified</a>
seems like a great place to start.</p>
<p>
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe src="https://www.youtube-nocookie.com/embed/1PnVor36_40" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen title="YouTube Video"></iframe>
</div>

<br/></p>
<ul>
<li>This is also nice to have <a href="https://docs.gtk.org/gtk3/css-overview.html" target="_blank" rel="noopener noreferrer">GTK3 CSS Overview</a>.</li>
</ul>
<p>I hate to do this to you but, most of the things that SCSS provides
(like the <a href="https://sass-lang.com/documentation/at-rules/use#configuration" target="_blank" rel="noopener noreferrer"><code>use</code></a>
keyword) aren&rsquo;t supported in the EWW SCSS.</p>
<p>This may seem overwhelming&hellip; because you might be thinking of digesting all the
above links. This is wrong. Just get a general idea of CSS and use the links as mere
references. Use them as <a href="https://youtu.be/avCWDDox1nE" target="_blank" rel="noopener noreferrer">Google</a>. Refer to
the documentation, tutorials and videos <em>only</em> if you are stuck or, want to
implement something new. Do not treat them as textbooks.</p>
<h2 id="writing-the-powermenu" class="headerLink">
    <a href="#writing-the-powermenu" class="header-mark"></a>Writing The Powermenu</h2><p>Finally, we can actually write the Powermenu. Moving on&hellip;
This section will be divided into five subsections. Namely:</p>
<ul>
<li>Window Definition</li>
<li>Variable Definitions</li>
<li>Module Definitions</li>
<li>Layouts and Positioning</li>
<li>Styling with SCSS</li>
</ul>
<p>Let&rsquo;s begin.</p>
<h3 id="window-definition" class="headerLink">
    <a href="#window-definition" class="header-mark"></a>Window Definition</h3><p>We will define a window that will fill up the entire screen. Hence, the <code>width</code>
and <code>height</code> options in the window definition needs to be <code>100%</code>.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-9-1"><a class="lnlinks" href="#hl-9-1">1</a>
</span><span class="lnt" id="hl-9-2"><a class="lnlinks" href="#hl-9-2">2</a>
</span><span class="lnt" id="hl-9-3"><a class="lnlinks" href="#hl-9-3">3</a>
</span><span class="lnt" id="hl-9-4"><a class="lnlinks" href="#hl-9-4">4</a>
</span><span class="lnt" id="hl-9-5"><a class="lnlinks" href="#hl-9-5">5</a>
</span><span class="lnt" id="hl-9-6"><a class="lnlinks" href="#hl-9-6">6</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-fennel" data-lang="fennel"><span class="line"><span class="cl"><span class="p">(</span><span class="nf">defwindow</span><span class="w"> </span><span class="nv">powermenu</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="ss">:stacking</span><span class="w"> </span><span class="s">&#34;fg&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="ss">:windowtype</span><span class="w"> </span><span class="s">&#34;normal&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="ss">:wm-ignore</span><span class="w"> </span><span class="nv">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="ss">:geometry</span><span class="w"> </span><span class="p">(</span><span class="nf">geometry</span><span class="w"> </span><span class="ss">:width</span><span class="w"> </span><span class="s">&#34;100%&#34;</span><span class="w"> </span><span class="ss">:height</span><span class="w"> </span><span class="s">&#34;100%&#34;</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="p">(</span><span class="nf">powermenu_layout</span><span class="p">))</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><p>See the <a href="#running-the-powermenu" title="running the powermenu" rel="">running</a>
section to view the EWW window.</p>
<div class="details admonition note open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-pencil-alt fa-fw"></i>Note<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">You need to replace <code>(powermenu_layout)</code> with &ldquo;Testing&hellip;&rdquo;
or, whatever to run this without any errors.</div>
        </div>
    </div>
<h3 id="variable-definitions" class="headerLink">
    <a href="#variable-definitions" class="header-mark"></a>Variable Definitions</h3><p>As mentioned before, we need:</p>
<ul>
<li>
<p>Battery capacity value which can be fetched using the <code>EWW_BATTERY</code> variable.
Find out the key value of your battery interface which can be found from
<code>ls /sys/class/power_supply</code> prefixed with <code>BAT</code>. Now, take a note of
<code>EWW_BATTERY.BAT0.capacity</code> and <code>EWW_BATTERY.BAT0.status</code>
(this is for me. Yours might be <code>BAT1</code>, <code>BAT2</code>, etc.). We will need these later.</p>
</li>
<li>
<p>For the network connectivity and strength, we can just use the following.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-10-1"><a class="lnlinks" href="#hl-10-1">1</a>
</span><span class="lnt" id="hl-10-2"><a class="lnlinks" href="#hl-10-2">2</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">nmcli -terse -fields SIGNAL,ACTIVE device wifi <span class="se">\
</span></span></span><span class="line"><span class="cl"><span class="se"></span>  <span class="p">|</span> awk --field-separator <span class="s1">&#39;:&#39;</span> <span class="s1">&#39;{if($2==&#34;yes&#34;)print$1}&#39;</span>
</span></span></code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>For getting the current time we will use this <code>date +'{&quot;hour&quot;:&quot;%H&quot;,&quot;min&quot;:&quot;%M&quot;}'</code>.</p>
</li>
</ul>
<p>Now, incorporate these into yuck-variables.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-11-1"><a class="lnlinks" href="#hl-11-1">1</a>
</span><span class="lnt" id="hl-11-2"><a class="lnlinks" href="#hl-11-2">2</a>
</span><span class="lnt" id="hl-11-3"><a class="lnlinks" href="#hl-11-3">3</a>
</span><span class="lnt" id="hl-11-4"><a class="lnlinks" href="#hl-11-4">4</a>
</span><span class="lnt" id="hl-11-5"><a class="lnlinks" href="#hl-11-5">5</a>
</span><span class="lnt" id="hl-11-6"><a class="lnlinks" href="#hl-11-6">6</a>
</span><span class="lnt" id="hl-11-7"><a class="lnlinks" href="#hl-11-7">7</a>
</span><span class="lnt" id="hl-11-8"><a class="lnlinks" href="#hl-11-8">8</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-fennel" data-lang="fennel"><span class="line"><span class="cl"><span class="p">(</span><span class="nf">defpoll</span><span class="w"> </span><span class="nv">time</span><span class="w"> </span><span class="ss">:interval</span><span class="w"> </span><span class="s">&#34;5s&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="ss">:initial</span><span class="w"> </span><span class="o">`</span><span class="nv">date</span><span class="w"> </span><span class="nv">+</span><span class="o">&#39;</span><span class="p">{</span><span class="s">&#34;hour&#34;</span><span class="err">:</span><span class="s">&#34;%H&#34;</span><span class="err">,</span><span class="s">&#34;min&#34;</span><span class="err">:</span><span class="s">&#34;%M&#34;</span><span class="p">}</span><span class="o">&#39;`</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="o">`</span><span class="nv">date</span><span class="w"> </span><span class="nv">+</span><span class="o">&#39;</span><span class="p">{</span><span class="s">&#34;hour&#34;</span><span class="err">:</span><span class="s">&#34;%H&#34;</span><span class="err">,</span><span class="s">&#34;min&#34;</span><span class="err">:</span><span class="s">&#34;%M&#34;</span><span class="p">}</span><span class="o">&#39;`</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="p">(</span><span class="nf">defpoll</span><span class="w"> </span><span class="nv">net</span><span class="w"> </span><span class="ss">:interval</span><span class="w"> </span><span class="s">&#34;100s&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="ss">:initial</span><span class="w"> </span><span class="o">`</span><span class="nv">N/A</span><span class="o">`</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="o">`</span><span class="nv">nmcli</span><span class="w"> </span><span class="nv">-t</span><span class="w"> </span><span class="nv">-f</span><span class="w"> </span><span class="nv">SIGNAL</span><span class="err">,</span><span class="nv">ACTIVE</span><span class="w"> </span><span class="nv">device</span><span class="w"> </span><span class="nv">wifi</span><span class="w"> </span><span class="err">\</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="err">|</span><span class="w"> </span><span class="nv">awk</span><span class="w"> </span><span class="nv">-F</span><span class="o">&#39;</span><span class="err">:</span><span class="o">&#39;</span><span class="w"> </span><span class="o">&#39;</span><span class="p">{</span><span class="nv">if</span><span class="p">(</span><span class="nf">$2==</span><span class="s">&#34;yes&#34;</span><span class="p">)</span><span class="nv">print$1</span><span class="p">}</span><span class="o">&#39;`</span><span class="p">)</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><h3 id="module-definitions" class="headerLink">
    <a href="#module-definitions" class="header-mark"></a>Module Definitions</h3><p>Dividing complex layouting into modules is not important at all. But, it will
be useful if something
decides to break or, if you want to add/remove widget(s).</p>
<p>This section is divided into five specific sub-sections.</p>
<ul>
<li>General Widget Options</li>
<li>Buttons Module</li>
<li>Battery Module</li>
<li>Network Module</li>
<li>Sundial Module</li>
</ul>
<h4 id="general-widget-options" class="headerLink">
    <a href="#general-widget-options" class="header-mark"></a>General Widget Options</h4><p>These options or, properties can be applied to built-in widgets only. Like
<code>box</code>, <code>transform</code>, <code>scroll</code>, <code>label</code>, etc.</p>
<ul>
<li><strong><code>class</code></strong>: <code>string</code> CSS class name.</li>
<li><strong><code>valign</code></strong>: <code>string</code> how to align this vertically. Possible values:
<code>&quot;fill&quot;</code>, <code>&quot;baseline&quot;</code>, <code>&quot;center&quot;</code>, <code>&quot;start&quot;</code>, <code>&quot;end&quot;</code>.</li>
<li><strong><code>halign</code></strong>: <code>string</code> how to align this horizontally. Possible values:
<code>&quot;fill&quot;</code>, <code>&quot;baseline&quot;</code>, <code>&quot;center&quot;</code>, <code>&quot;start&quot;</code>, <code>&quot;end&quot;</code>.</li>
<li><strong><code>vexpand</code></strong>: <code>bool</code> should this container expand vertically. Default: <code>false</code>.</li>
<li><strong><code>hexpand</code></strong>: <code>bool</code> should this widget expand horizontally. Default: <code>false</code>.</li>
<li><strong><code>width</code></strong>: <code>int</code> width of this element. Note that this can not restrict the
size if the contents stretch it.</li>
<li><strong><code>height</code></strong>: <code>int</code> height of this element. Note that this can not restrict
the size if the contents stretch it.</li>
<li><strong><code>active</code></strong>: <code>bool</code> If this widget can be interacted with.</li>
<li><strong><code>tooltip</code></strong>: <code>string</code> tooltip text (on hover).</li>
<li><strong><code>visible</code></strong>: <code>bool</code> visibility of the widget.</li>
<li><strong><code>style</code></strong>: <code>string</code> inline CSS style applied to the widget.</li>
</ul>
<h3 id="how-do-these-work" class="headerLink">
    <a href="#how-do-these-work" class="header-mark"></a>How Do These Work?</h3><p>Brief descriptions on how these options will affect your widgets.
Only <code>valign</code>, <code>vexpand</code>, <code>halign</code> and <code>hexpand</code> will be explained.
Rest are pretty intuitive.</p>
<p>Parse the following diagrams.</p>
<figure><img src="./svgs/halign.svg"
         alt="Setting the value of halign to end will result in the children widgets being pushed to the left, which in this case is the label."/><figcaption>
            <h4>When halign=end and hexpand=true</h4><p>Setting the value of halign to end will result in the children widgets being pushed to the left, which in this case is the label.</p>
        </figcaption>
</figure>

<hr>
<figure><img src="./svgs/hexpand.svg"
         alt="Setting this to false will result in the box being the same size as that of the label. Additionally, it will stretch out with increasing content."/><figcaption>
            <h4>When hexpand=false</h4><p>Setting this to false will result in the box being the same size as that of the label. Additionally, it will stretch out with increasing content.</p>
        </figcaption>
</figure>

<hr>
<figure><img src="./svgs/50hexpand.svg"
         alt="Evidently, the result will be a tug o&amp;rsquo; war between the labels and then one with the larger content length will win! Same length will result in a stalemate."/><figcaption>
            <h4>When both widgets have hexpand=true</h4><p>Evidently, the result will be a tug o&rsquo; war between the labels and then one with the larger content length will win! Same length will result in a stalemate.</p>
        </figcaption>
</figure>

<hr>
<h4 id="buttons" class="headerLink">
    <a href="#buttons" class="header-mark"></a>Buttons</h4><p>This module will display the interactive control buttons at the bottom of
the window. Like a shutdown button, a reboot button, etc.</p>
<p><figure><a class="lightgallery" href="./images/buttons.png" title="buttons" data-thumbnail="./images/buttons.png">
        <img
            
            loading="lazy"
            src="./images/buttons.png"
            srcset="./images/buttons.png, ./images/buttons.png 1.5x, ./images/buttons.png 2x"
            sizes="auto"
            alt="buttons">
    </a></figure></p>
<p>Now, consider the following yuck-snippet for this module. Treat the properties <code>shutdown</code>,
<code>shutdown_icon</code>, <code>logout_icon</code> as functional parameters.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-12-1"><a class="lnlinks" href="#hl-12-1">1</a>
</span><span class="lnt" id="hl-12-2"><a class="lnlinks" href="#hl-12-2">2</a>
</span><span class="lnt" id="hl-12-3"><a class="lnlinks" href="#hl-12-3">3</a>
</span><span class="lnt" id="hl-12-4"><a class="lnlinks" href="#hl-12-4">4</a>
</span><span class="lnt" id="hl-12-5"><a class="lnlinks" href="#hl-12-5">5</a>
</span><span class="lnt" id="hl-12-6"><a class="lnlinks" href="#hl-12-6">6</a>
</span><span class="lnt" id="hl-12-7"><a class="lnlinks" href="#hl-12-7">7</a>
</span><span class="lnt" id="hl-12-8"><a class="lnlinks" href="#hl-12-8">8</a>
</span><span class="lnt" id="hl-12-9"><a class="lnlinks" href="#hl-12-9">9</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-fennel" data-lang="fennel"><span class="line"><span class="cl"><span class="p">(</span><span class="nf">defwidget</span><span class="w"> </span><span class="nv">_buttons</span><span class="w"> </span><span class="p">[</span><span class="nv">shutdown</span><span class="w"> </span><span class="nv">shutdown_icon</span><span class="w"> </span><span class="nv">reboot</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                    </span><span class="nv">reboot_icon</span><span class="w"> </span><span class="nv">logout</span><span class="w"> </span><span class="nv">logout_icon</span><span class="p">]</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="p">(</span><span class="nf">box</span><span class="w"> </span><span class="ss">:class</span><span class="w"> </span><span class="s">&#34;btns-box&#34;</span><span class="w"> </span><span class="ss">:spacing</span><span class="w"> </span><span class="mi">5</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">       </span><span class="ss">:vexpand</span><span class="w"> </span><span class="nv">true</span><span class="w"> </span><span class="ss">:hexpand</span><span class="w"> </span><span class="nv">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">       </span><span class="ss">:valign</span><span class="w"> </span><span class="s">&#34;end&#34;</span><span class="w"> </span><span class="ss">:halign</span><span class="w"> </span><span class="s">&#34;end&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">       </span><span class="ss">:space-evenly</span><span class="w"> </span><span class="nv">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="p">(</span><span class="nf">button</span><span class="w"> </span><span class="ss">:onclick</span><span class="w"> </span><span class="nv">shutdown</span><span class="w"> </span><span class="nv">shutdown_icon</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="p">(</span><span class="nf">button</span><span class="w"> </span><span class="ss">:onclick</span><span class="w"> </span><span class="nv">reboot</span><span class="w"> </span><span class="nv">reboot_icon</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="p">(</span><span class="nf">button</span><span class="w"> </span><span class="ss">:onclick</span><span class="w"> </span><span class="nv">logout</span><span class="w"> </span><span class="nv">logout_icon</span><span class="p">)))</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><h4 id="network" class="headerLink">
    <a href="#network" class="header-mark"></a>Network</h4><p>We will classify network strength into four levels — excellent, good,
okay, slow and offline. This will be done using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator" target="_blank" rel="noopener noreferrer">ternary</a>
operators. To illustrate this better following is a comparison between
ternary operators and normal conditionals in C.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-13-1"><a class="lnlinks" href="#hl-13-1">1</a>
</span><span class="lnt" id="hl-13-2"><a class="lnlinks" href="#hl-13-2">2</a>
</span><span class="lnt" id="hl-13-3"><a class="lnlinks" href="#hl-13-3">3</a>
</span><span class="lnt" id="hl-13-4"><a class="lnlinks" href="#hl-13-4">4</a>
</span><span class="lnt" id="hl-13-5"><a class="lnlinks" href="#hl-13-5">5</a>
</span><span class="lnt" id="hl-13-6"><a class="lnlinks" href="#hl-13-6">6</a>
</span><span class="lnt" id="hl-13-7"><a class="lnlinks" href="#hl-13-7">7</a>
</span><span class="lnt" id="hl-13-8"><a class="lnlinks" href="#hl-13-8">8</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-c" data-lang="c"><span class="line"><span class="cl"><span class="c1">// if-else
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kt">int</span> <span class="n">size</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="n">size</span><span class="p">)</span> <span class="n">size</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="k">else</span> <span class="n">size</span> <span class="o">=</span> <span class="mi">15</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1">// ternary
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kt">int</span> <span class="n">size</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="n">size</span> <span class="o">=</span> <span class="o">!</span><span class="n">size</span> <span class="o">?</span> <span class="mi">10</span> <span class="o">:</span> <span class="mi">15</span><span class="p">;</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p><figure><a class="lightgallery" href="./images/network.png" title="network" data-thumbnail="./images/network.png">
        <img
            
            loading="lazy"
            src="./images/network.png"
            srcset="./images/network.png, ./images/network.png 1.5x, ./images/network.png 2x"
            sizes="auto"
            alt="network">
    </a></figure></p>
<p>Finally, consider the following snippet.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-14-1"><a class="lnlinks" href="#hl-14-1">1</a>
</span><span class="lnt" id="hl-14-2"><a class="lnlinks" href="#hl-14-2">2</a>
</span><span class="lnt" id="hl-14-3"><a class="lnlinks" href="#hl-14-3">3</a>
</span><span class="lnt" id="hl-14-4"><a class="lnlinks" href="#hl-14-4">4</a>
</span><span class="lnt" id="hl-14-5"><a class="lnlinks" href="#hl-14-5">5</a>
</span><span class="lnt" id="hl-14-6"><a class="lnlinks" href="#hl-14-6">6</a>
</span><span class="lnt" id="hl-14-7"><a class="lnlinks" href="#hl-14-7">7</a>
</span><span class="lnt" id="hl-14-8"><a class="lnlinks" href="#hl-14-8">8</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-fennel" data-lang="fennel"><span class="line"><span class="cl"><span class="p">(</span><span class="nf">defwidget</span><span class="w"> </span><span class="nv">_network</span><span class="w"> </span><span class="p">[</span><span class="nv">strength</span><span class="w"> </span><span class="nv">offline</span><span class="w"> </span><span class="nv">excellent</span><span class="w"> </span><span class="nv">good</span><span class="w"> </span><span class="nv">okay</span><span class="w"> </span><span class="nv">slow</span><span class="p">]</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="p">(</span><span class="nf">box</span><span class="w"> </span><span class="ss">:class</span><span class="w"> </span><span class="s">&#34;net-box&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">       </span><span class="ss">:space-evenly</span><span class="w"> </span><span class="nv">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">       </span><span class="ss">:spacing</span><span class="w"> </span><span class="mi">8</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="p">(</span><span class="nf">label</span><span class="w"> </span><span class="ss">:text</span><span class="w"> </span><span class="p">{</span><span class="nv">strength</span><span class="w"> </span><span class="nv">==</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="nv">offline</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="nv">strength</span><span class="w"> </span><span class="k">&lt; </span><span class="mi">26</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="nv">slow</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">        </span><span class="nv">strength</span><span class="w"> </span><span class="k">&lt; </span><span class="mi">51</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="nv">okay</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">          </span><span class="nv">strength</span><span class="w"> </span><span class="k">&lt; </span><span class="mi">76</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="nv">good</span><span class="w"> </span><span class="k">: </span><span class="nv">excellent</span><span class="p">})))</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><h4 id="battery" class="headerLink">
    <a href="#battery" class="header-mark"></a>Battery</h4><p>Battery current capacity is classified into eight levels. Namely, <code>one</code>,
<code>two</code>, <code>three</code>, <code>four</code>, <code>five</code>, <code>six</code>, <code>seven</code> and <code>charge</code>.</p>
<p><figure><a class="lightgallery" href="./images/battery.png" title="battery" data-thumbnail="./images/battery.png">
        <img
            
            loading="lazy"
            src="./images/battery.png"
            srcset="./images/battery.png, ./images/battery.png 1.5x, ./images/battery.png 2x"
            sizes="auto"
            alt="battery">
    </a></figure></p>
<p>Hence, take a look at the following code snippet.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-15-1"><a class="lnlinks" href="#hl-15-1"> 1</a>
</span><span class="lnt" id="hl-15-2"><a class="lnlinks" href="#hl-15-2"> 2</a>
</span><span class="lnt" id="hl-15-3"><a class="lnlinks" href="#hl-15-3"> 3</a>
</span><span class="lnt" id="hl-15-4"><a class="lnlinks" href="#hl-15-4"> 4</a>
</span><span class="lnt" id="hl-15-5"><a class="lnlinks" href="#hl-15-5"> 5</a>
</span><span class="lnt" id="hl-15-6"><a class="lnlinks" href="#hl-15-6"> 6</a>
</span><span class="lnt" id="hl-15-7"><a class="lnlinks" href="#hl-15-7"> 7</a>
</span><span class="lnt" id="hl-15-8"><a class="lnlinks" href="#hl-15-8"> 8</a>
</span><span class="lnt" id="hl-15-9"><a class="lnlinks" href="#hl-15-9"> 9</a>
</span><span class="lnt" id="hl-15-10"><a class="lnlinks" href="#hl-15-10">10</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-fennel" data-lang="fennel"><span class="line"><span class="cl"><span class="p">(</span><span class="nf">defwidget</span><span class="w"> </span><span class="nv">_battery</span><span class="w"> </span><span class="p">[</span><span class="nv">battery</span><span class="w"> </span><span class="nv">status</span><span class="w"> </span><span class="nv">one</span><span class="w"> </span><span class="nv">two</span><span class="w"> </span><span class="nv">three</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                    </span><span class="nv">four</span><span class="w"> </span><span class="nv">five</span><span class="w"> </span><span class="nv">six</span><span class="w"> </span><span class="nv">seven</span><span class="w"> </span><span class="nv">charge</span><span class="p">]</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="p">(</span><span class="nf">box</span><span class="w"> </span><span class="ss">:class</span><span class="w"> </span><span class="s">&#34;bat-box&#34;</span><span class="w"> </span><span class="ss">:space-evenly</span><span class="w"> </span><span class="nv">false</span><span class="w"> </span><span class="ss">:spacing</span><span class="w"> </span><span class="mi">8</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="p">(</span><span class="nf">label</span><span class="w"> </span><span class="ss">:text</span><span class="w"> </span><span class="p">{</span><span class="nv">status</span><span class="w"> </span><span class="nv">==</span><span class="w"> </span><span class="ss">&#39;Charging</span><span class="o">&#39;</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="nv">charge</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="nv">battery</span><span class="w"> </span><span class="k">&lt; </span><span class="mi">15</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="nv">seven</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">        </span><span class="nv">battery</span><span class="w"> </span><span class="k">&lt; </span><span class="mi">30</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="nv">six</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">          </span><span class="nv">battery</span><span class="w"> </span><span class="k">&lt; </span><span class="mi">45</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="nv">five</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">            </span><span class="nv">battery</span><span class="w"> </span><span class="k">&lt; </span><span class="mi">60</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="nv">four</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">              </span><span class="nv">battery</span><span class="w"> </span><span class="k">&lt; </span><span class="mi">75</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="nv">three</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                </span><span class="nv">battery</span><span class="w"> </span><span class="k">&lt; </span><span class="mi">95</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="nv">two</span><span class="w"> </span><span class="k">: </span><span class="nv">one</span><span class="p">})))</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><h4 id="sundial" class="headerLink">
    <a href="#sundial" class="header-mark"></a>Sundial</h4><p>This should be the easiest of them all 💀. Jokes aside, this part
needs to be refactored. But, you should get the general idea regardless.
This module just displays the current <strong>time-of-the-day</strong> value. For
instance, the time between <strong>17:00 and 17:59</strong> (incl.) will be deemed as
&ldquo;Late Afternoon&rdquo;.</p>
<p><figure><a class="lightgallery" href="./images/sundial.png" title="sundial" data-thumbnail="./images/sundial.png">
        <img
            
            loading="lazy"
            src="./images/sundial.png"
            srcset="./images/sundial.png, ./images/sundial.png 1.5x, ./images/sundial.png 2x"
            sizes="auto"
            alt="sundial">
    </a></figure></p>
<p>Finally, consider the following snippet (no matter how bad it is). Just
get an idea of what it does 💀.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-16-1"><a class="lnlinks" href="#hl-16-1"> 1</a>
</span><span class="lnt" id="hl-16-2"><a class="lnlinks" href="#hl-16-2"> 2</a>
</span><span class="lnt" id="hl-16-3"><a class="lnlinks" href="#hl-16-3"> 3</a>
</span><span class="lnt" id="hl-16-4"><a class="lnlinks" href="#hl-16-4"> 4</a>
</span><span class="lnt" id="hl-16-5"><a class="lnlinks" href="#hl-16-5"> 5</a>
</span><span class="lnt" id="hl-16-6"><a class="lnlinks" href="#hl-16-6"> 6</a>
</span><span class="lnt" id="hl-16-7"><a class="lnlinks" href="#hl-16-7"> 7</a>
</span><span class="lnt" id="hl-16-8"><a class="lnlinks" href="#hl-16-8"> 8</a>
</span><span class="lnt" id="hl-16-9"><a class="lnlinks" href="#hl-16-9"> 9</a>
</span><span class="lnt" id="hl-16-10"><a class="lnlinks" href="#hl-16-10">10</a>
</span><span class="lnt" id="hl-16-11"><a class="lnlinks" href="#hl-16-11">11</a>
</span><span class="lnt" id="hl-16-12"><a class="lnlinks" href="#hl-16-12">12</a>
</span><span class="lnt" id="hl-16-13"><a class="lnlinks" href="#hl-16-13">13</a>
</span><span class="lnt" id="hl-16-14"><a class="lnlinks" href="#hl-16-14">14</a>
</span><span class="lnt" id="hl-16-15"><a class="lnlinks" href="#hl-16-15">15</a>
</span><span class="lnt" id="hl-16-16"><a class="lnlinks" href="#hl-16-16">16</a>
</span><span class="lnt" id="hl-16-17"><a class="lnlinks" href="#hl-16-17">17</a>
</span><span class="lnt" id="hl-16-18"><a class="lnlinks" href="#hl-16-18">18</a>
</span><span class="lnt" id="hl-16-19"><a class="lnlinks" href="#hl-16-19">19</a>
</span><span class="lnt" id="hl-16-20"><a class="lnlinks" href="#hl-16-20">20</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-fennel" data-lang="fennel"><span class="line"><span class="cl"><span class="p">(</span><span class="nf">defwidget</span><span class="w"> </span><span class="nv">_sundial</span><span class="w"> </span><span class="p">[]</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="p">(</span><span class="nf">label</span><span class="w"> </span><span class="ss">:class</span><span class="w"> </span><span class="s">&#34;sundial-lbl&#34;</span><span class="w"> </span><span class="ss">:halign</span><span class="w"> </span><span class="s">&#34;end&#34;</span><span class="w"> </span><span class="ss">:hexpand</span><span class="w"> </span><span class="nv">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">         </span><span class="ss">:text</span><span class="w"> </span><span class="p">{</span><span class="nv">time.hour</span><span class="w"> </span><span class="k">&gt;= </span><span class="mi">2</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nv">time.hour</span><span class="w"> </span><span class="k">&lt;= </span><span class="mi">4</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="s">&#34;Early Morning&#34;</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">               </span><span class="nv">time.hour</span><span class="w"> </span><span class="k">&lt;= </span><span class="mi">5</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="s">&#34;Dawn&#34;</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">               </span><span class="nv">time.hour</span><span class="w"> </span><span class="k">&gt;= </span><span class="mi">6</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                </span><span class="p">(</span><span class="nf">time.hour</span><span class="w"> </span><span class="k">&lt;= </span><span class="mi">8</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                  </span><span class="nv">time.min</span><span class="w"> </span><span class="k">&lt;= </span><span class="mi">59</span><span class="p">)</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="s">&#34;Morning&#34;</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">               </span><span class="nv">time.hour</span><span class="w"> </span><span class="k">&gt;= </span><span class="mi">9</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                </span><span class="p">(</span><span class="nf">time.hour</span><span class="w"> </span><span class="k">&lt;= </span><span class="mi">11</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nv">time.min</span><span class="w"> </span><span class="k">&lt;= </span><span class="mi">59</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                </span><span class="nv">?</span><span class="w"> </span><span class="s">&#34;Late Morning&#34;</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">               </span><span class="nv">time.hour</span><span class="w"> </span><span class="nv">==</span><span class="w"> </span><span class="mi">12</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nv">time.min</span><span class="w"> </span><span class="k">&lt;= </span><span class="mi">29</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="s">&#34;Midday&#34;</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">               </span><span class="nv">time.hour</span><span class="w"> </span><span class="k">&gt;= </span><span class="mi">12</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nv">time.hour</span><span class="w"> </span><span class="k">&lt;= </span><span class="mi">16</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="s">&#34;Afternoon&#34;</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">               </span><span class="nv">time.hour</span><span class="w"> </span><span class="k">&gt; </span><span class="mi">16</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nv">time.hour</span><span class="w"> </span><span class="k">&lt;= </span><span class="mi">17</span><span class="w"> </span><span class="nv">?</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                </span><span class="s">&#34;Late Afternoon&#34;</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">               </span><span class="p">(</span><span class="nf">time.hour</span><span class="w"> </span><span class="k">&gt;= </span><span class="mi">17</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nv">time.min</span><span class="w"> </span><span class="k">&lt;= </span><span class="mi">1</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                </span><span class="err">||</span><span class="w"> </span><span class="p">(</span><span class="nf">time.hour</span><span class="w"> </span><span class="k">&lt;= </span><span class="mi">18</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nv">time.min</span><span class="w"> </span><span class="k">&lt;= </span><span class="mi">20</span><span class="p">)</span><span class="w"> </span><span class="nv">?</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                  </span><span class="s">&#34;Early Evening&#34;</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">               </span><span class="nv">time.hour</span><span class="w"> </span><span class="k">&gt;= </span><span class="mi">18</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nv">time.hour</span><span class="w"> </span><span class="k">&lt;= </span><span class="mi">19</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="s">&#34;Dusk&#34;</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">               </span><span class="nv">time.hour</span><span class="w"> </span><span class="k">&gt; </span><span class="mi">19</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nv">time.hour</span><span class="w"> </span><span class="k">&lt;= </span><span class="mi">21</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="s">&#34;Late Evening&#34;</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">               </span><span class="nv">time.hour</span><span class="w"> </span><span class="k">&gt; </span><span class="mi">21</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="s">&#34;Night&#34;</span><span class="w"> </span><span class="k">: </span><span class="s">&#34;Midnight&#34;</span><span class="p">}))</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><h3 id="layouts-and-positioning" class="headerLink">
    <a href="#layouts-and-positioning" class="header-mark"></a>Layouts and Positioning</h3><p>Now, we will glue all the modules and bare widgets into a single widget
called <code>powermenu_layout</code>.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-17-1"><a class="lnlinks" href="#hl-17-1"> 1</a>
</span><span class="lnt" id="hl-17-2"><a class="lnlinks" href="#hl-17-2"> 2</a>
</span><span class="lnt" id="hl-17-3"><a class="lnlinks" href="#hl-17-3"> 3</a>
</span><span class="lnt" id="hl-17-4"><a class="lnlinks" href="#hl-17-4"> 4</a>
</span><span class="lnt" id="hl-17-5"><a class="lnlinks" href="#hl-17-5"> 5</a>
</span><span class="lnt" id="hl-17-6"><a class="lnlinks" href="#hl-17-6"> 6</a>
</span><span class="lnt" id="hl-17-7"><a class="lnlinks" href="#hl-17-7"> 7</a>
</span><span class="lnt" id="hl-17-8"><a class="lnlinks" href="#hl-17-8"> 8</a>
</span><span class="lnt" id="hl-17-9"><a class="lnlinks" href="#hl-17-9"> 9</a>
</span><span class="lnt" id="hl-17-10"><a class="lnlinks" href="#hl-17-10">10</a>
</span><span class="lnt" id="hl-17-11"><a class="lnlinks" href="#hl-17-11">11</a>
</span><span class="lnt" id="hl-17-12"><a class="lnlinks" href="#hl-17-12">12</a>
</span><span class="lnt" id="hl-17-13"><a class="lnlinks" href="#hl-17-13">13</a>
</span><span class="lnt" id="hl-17-14"><a class="lnlinks" href="#hl-17-14">14</a>
</span><span class="lnt" id="hl-17-15"><a class="lnlinks" href="#hl-17-15">15</a>
</span><span class="lnt" id="hl-17-16"><a class="lnlinks" href="#hl-17-16">16</a>
</span><span class="lnt" id="hl-17-17"><a class="lnlinks" href="#hl-17-17">17</a>
</span><span class="lnt" id="hl-17-18"><a class="lnlinks" href="#hl-17-18">18</a>
</span><span class="lnt" id="hl-17-19"><a class="lnlinks" href="#hl-17-19">19</a>
</span><span class="lnt" id="hl-17-20"><a class="lnlinks" href="#hl-17-20">20</a>
</span><span class="lnt" id="hl-17-21"><a class="lnlinks" href="#hl-17-21">21</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-fennel" data-lang="fennel"><span class="line"><span class="cl"><span class="p">(</span><span class="nf">defwidget</span><span class="w"> </span><span class="nv">powermenu_layout</span><span class="w"> </span><span class="p">[]</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="p">(</span><span class="nf">box</span><span class="w"> </span><span class="ss">:class</span><span class="w"> </span><span class="s">&#34;layout-box&#34;</span><span class="w"> </span><span class="ss">:space-evenly</span><span class="w"> </span><span class="nv">false</span><span class="w"> </span><span class="ss">:orientation</span><span class="w"> </span><span class="s">&#34;vertical&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">       </span><span class="ss">:style</span><span class="w"> </span><span class="s">&#34;background-image: url(&#39;./wallpaper&#39;)&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="p">(</span><span class="nf">box</span><span class="w"> </span><span class="ss">:valign</span><span class="w"> </span><span class="s">&#34;start&#34;</span><span class="w"> </span><span class="ss">:space-evenly</span><span class="w"> </span><span class="nv">false</span><span class="w"> </span><span class="ss">:spacing</span><span class="w"> </span><span class="mi">25</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="p">(</span><span class="nf">_sundial</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="p">(</span><span class="nf">_battery</span><span class="w"> </span><span class="ss">:status</span><span class="w"> </span><span class="p">{</span><span class="nv">EWW_BATTERY.BAT0.status</span><span class="p">}</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                </span><span class="ss">:battery</span><span class="w"> </span><span class="p">{</span><span class="nv">EWW_BATTERY.BAT0.capacity</span><span class="p">}</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                </span><span class="ss">:charge</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="w"> </span><span class="ss">:one</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="w"> </span><span class="ss">:two</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="w"> </span><span class="ss">:three</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="w"> </span><span class="ss">:four</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                </span><span class="ss">:five</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="w"> </span><span class="ss">:six</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="w"> </span><span class="ss">:seven</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="p">(</span><span class="nf">_network</span><span class="w"> </span><span class="ss">:strength</span><span class="w"> </span><span class="nv">net</span><span class="w"> </span><span class="ss">:offline</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="w"> </span><span class="ss">:excellent</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="w"> </span><span class="ss">:good</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                </span><span class="ss">:okay</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="w"> </span><span class="ss">:slow</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="p">(</span><span class="nf">label</span><span class="w"> </span><span class="ss">:text</span><span class="w"> </span><span class="s">&#34;|&#34;</span><span class="w"> </span><span class="ss">:class</span><span class="w"> </span><span class="s">&#34;sep&#34;</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="p">(</span><span class="nf">button</span><span class="w"> </span><span class="ss">:onclick</span><span class="w"> </span><span class="s">&#34;eww close powermenu&#34;</span><span class="w"> </span><span class="ss">:class</span><span class="w"> </span><span class="s">&#34;close-btn&#34;</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="p">))</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="p">(</span><span class="nf">box</span><span class="w"> </span><span class="ss">:space-evenly</span><span class="w"> </span><span class="nv">false</span><span class="w"> </span><span class="ss">:hexpand</span><span class="w"> </span><span class="nv">true</span><span class="w"> </span><span class="ss">:vexpand</span><span class="w"> </span><span class="nv">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="p">(</span><span class="nf">box</span><span class="w"> </span><span class="ss">:spacing</span><span class="w"> </span><span class="mi">15</span><span class="w"> </span><span class="ss">:class</span><span class="w"> </span><span class="s">&#34;tm-box&#34;</span><span class="w"> </span><span class="ss">:space-evenly</span><span class="w"> </span><span class="nv">false</span><span class="w"> </span><span class="ss">:valign</span><span class="w"> </span><span class="s">&#34;end&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">           </span><span class="ss">:halign</span><span class="w"> </span><span class="s">&#34;start&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">        </span><span class="p">(</span><span class="nf">label</span><span class="w"> </span><span class="ss">:text</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">        </span><span class="p">(</span><span class="nf">label</span><span class="w"> </span><span class="ss">:text</span><span class="w"> </span><span class="s">&#34;${time.hour}  ${time.min}&#34;</span><span class="p">))</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="p">(</span><span class="nf">_buttons</span><span class="w"> </span><span class="ss">:shutdown</span><span class="w"> </span><span class="s">&#34;poweroff&#34;</span><span class="w"> </span><span class="ss">:reboot</span><span class="w"> </span><span class="s">&#34;reboot&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                </span><span class="ss">:logout</span><span class="w"> </span><span class="s">&#34;loginctl kill-session self&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                </span><span class="ss">:shutdown_icon</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="w"> </span><span class="ss">:reboot_icon</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="w"> </span><span class="ss">:logout_icon</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="p">)))</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><div class="details admonition note open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-pencil-alt fa-fw"></i>Why aren&#39;t my glyphs visible?<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">The glyphs may or, may not be visible as, you might not have the
font installed. You may need to install <a href="https://www.nerdfonts.com/font-downloads" target="_blank" rel="noopener noreferrer">nerd font</a>
and <a href="https://github.com/phosphor-icons/web/tree/master/src/regular" target="_blank" rel="noopener noreferrer">Phosphor Icons</a>.</div>
        </div>
    </div>
<h3 id="styling-with-scss" class="headerLink">
    <a href="#styling-with-scss" class="header-mark"></a>Styling with SCSS</h3><p>I won&rsquo;t be explaining this. Just refer to the Sass docs.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-18-1"><a class="lnlinks" href="#hl-18-1"> 1</a>
</span><span class="lnt" id="hl-18-2"><a class="lnlinks" href="#hl-18-2"> 2</a>
</span><span class="lnt" id="hl-18-3"><a class="lnlinks" href="#hl-18-3"> 3</a>
</span><span class="lnt" id="hl-18-4"><a class="lnlinks" href="#hl-18-4"> 4</a>
</span><span class="lnt" id="hl-18-5"><a class="lnlinks" href="#hl-18-5"> 5</a>
</span><span class="lnt" id="hl-18-6"><a class="lnlinks" href="#hl-18-6"> 6</a>
</span><span class="lnt" id="hl-18-7"><a class="lnlinks" href="#hl-18-7"> 7</a>
</span><span class="lnt" id="hl-18-8"><a class="lnlinks" href="#hl-18-8"> 8</a>
</span><span class="lnt" id="hl-18-9"><a class="lnlinks" href="#hl-18-9"> 9</a>
</span><span class="lnt" id="hl-18-10"><a class="lnlinks" href="#hl-18-10">10</a>
</span><span class="lnt" id="hl-18-11"><a class="lnlinks" href="#hl-18-11">11</a>
</span><span class="lnt" id="hl-18-12"><a class="lnlinks" href="#hl-18-12">12</a>
</span><span class="lnt" id="hl-18-13"><a class="lnlinks" href="#hl-18-13">13</a>
</span><span class="lnt" id="hl-18-14"><a class="lnlinks" href="#hl-18-14">14</a>
</span><span class="lnt" id="hl-18-15"><a class="lnlinks" href="#hl-18-15">15</a>
</span><span class="lnt" id="hl-18-16"><a class="lnlinks" href="#hl-18-16">16</a>
</span><span class="lnt" id="hl-18-17"><a class="lnlinks" href="#hl-18-17">17</a>
</span><span class="lnt" id="hl-18-18"><a class="lnlinks" href="#hl-18-18">18</a>
</span><span class="lnt" id="hl-18-19"><a class="lnlinks" href="#hl-18-19">19</a>
</span><span class="lnt" id="hl-18-20"><a class="lnlinks" href="#hl-18-20">20</a>
</span><span class="lnt" id="hl-18-21"><a class="lnlinks" href="#hl-18-21">21</a>
</span><span class="lnt" id="hl-18-22"><a class="lnlinks" href="#hl-18-22">22</a>
</span><span class="lnt" id="hl-18-23"><a class="lnlinks" href="#hl-18-23">23</a>
</span><span class="lnt" id="hl-18-24"><a class="lnlinks" href="#hl-18-24">24</a>
</span><span class="lnt" id="hl-18-25"><a class="lnlinks" href="#hl-18-25">25</a>
</span><span class="lnt" id="hl-18-26"><a class="lnlinks" href="#hl-18-26">26</a>
</span><span class="lnt" id="hl-18-27"><a class="lnlinks" href="#hl-18-27">27</a>
</span><span class="lnt" id="hl-18-28"><a class="lnlinks" href="#hl-18-28">28</a>
</span><span class="lnt" id="hl-18-29"><a class="lnlinks" href="#hl-18-29">29</a>
</span><span class="lnt" id="hl-18-30"><a class="lnlinks" href="#hl-18-30">30</a>
</span><span class="lnt" id="hl-18-31"><a class="lnlinks" href="#hl-18-31">31</a>
</span><span class="lnt" id="hl-18-32"><a class="lnlinks" href="#hl-18-32">32</a>
</span><span class="lnt" id="hl-18-33"><a class="lnlinks" href="#hl-18-33">33</a>
</span><span class="lnt" id="hl-18-34"><a class="lnlinks" href="#hl-18-34">34</a>
</span><span class="lnt" id="hl-18-35"><a class="lnlinks" href="#hl-18-35">35</a>
</span><span class="lnt" id="hl-18-36"><a class="lnlinks" href="#hl-18-36">36</a>
</span><span class="lnt" id="hl-18-37"><a class="lnlinks" href="#hl-18-37">37</a>
</span><span class="lnt" id="hl-18-38"><a class="lnlinks" href="#hl-18-38">38</a>
</span><span class="lnt" id="hl-18-39"><a class="lnlinks" href="#hl-18-39">39</a>
</span><span class="lnt" id="hl-18-40"><a class="lnlinks" href="#hl-18-40">40</a>
</span><span class="lnt" id="hl-18-41"><a class="lnlinks" href="#hl-18-41">41</a>
</span><span class="lnt" id="hl-18-42"><a class="lnlinks" href="#hl-18-42">42</a>
</span><span class="lnt" id="hl-18-43"><a class="lnlinks" href="#hl-18-43">43</a>
</span><span class="lnt" id="hl-18-44"><a class="lnlinks" href="#hl-18-44">44</a>
</span><span class="lnt" id="hl-18-45"><a class="lnlinks" href="#hl-18-45">45</a>
</span><span class="lnt" id="hl-18-46"><a class="lnlinks" href="#hl-18-46">46</a>
</span><span class="lnt" id="hl-18-47"><a class="lnlinks" href="#hl-18-47">47</a>
</span><span class="lnt" id="hl-18-48"><a class="lnlinks" href="#hl-18-48">48</a>
</span><span class="lnt" id="hl-18-49"><a class="lnlinks" href="#hl-18-49">49</a>
</span><span class="lnt" id="hl-18-50"><a class="lnlinks" href="#hl-18-50">50</a>
</span><span class="lnt" id="hl-18-51"><a class="lnlinks" href="#hl-18-51">51</a>
</span><span class="lnt" id="hl-18-52"><a class="lnlinks" href="#hl-18-52">52</a>
</span><span class="lnt" id="hl-18-53"><a class="lnlinks" href="#hl-18-53">53</a>
</span><span class="lnt" id="hl-18-54"><a class="lnlinks" href="#hl-18-54">54</a>
</span><span class="lnt" id="hl-18-55"><a class="lnlinks" href="#hl-18-55">55</a>
</span><span class="lnt" id="hl-18-56"><a class="lnlinks" href="#hl-18-56">56</a>
</span><span class="lnt" id="hl-18-57"><a class="lnlinks" href="#hl-18-57">57</a>
</span><span class="lnt" id="hl-18-58"><a class="lnlinks" href="#hl-18-58">58</a>
</span><span class="lnt" id="hl-18-59"><a class="lnlinks" href="#hl-18-59">59</a>
</span><span class="lnt" id="hl-18-60"><a class="lnlinks" href="#hl-18-60">60</a>
</span><span class="lnt" id="hl-18-61"><a class="lnlinks" href="#hl-18-61">61</a>
</span><span class="lnt" id="hl-18-62"><a class="lnlinks" href="#hl-18-62">62</a>
</span><span class="lnt" id="hl-18-63"><a class="lnlinks" href="#hl-18-63">63</a>
</span><span class="lnt" id="hl-18-64"><a class="lnlinks" href="#hl-18-64">64</a>
</span><span class="lnt" id="hl-18-65"><a class="lnlinks" href="#hl-18-65">65</a>
</span><span class="lnt" id="hl-18-66"><a class="lnlinks" href="#hl-18-66">66</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$surface-darkgrey</span><span class="o">:</span> <span class="mh">#20252b</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="nv">$surface-fg</span><span class="o">:</span> <span class="mh">#949494</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="nv">$surface-lightgrey</span><span class="o">:</span> <span class="mh">#3d464e</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="nv">$surface-grey</span><span class="o">:</span> <span class="mh">#2b3238</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="nv">$surface-red</span><span class="o">:</span> <span class="mh">#f87070</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="o">*</span> <span class="p">{</span> <span class="na">all</span><span class="o">:</span> <span class="ni">unset</span><span class="p">;</span> <span class="p">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nc">.layout-box</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="na">font-family</span><span class="o">:</span> <span class="n">Phosphor</span><span class="o">,</span> <span class="n">Koulen</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="na">background-repeat</span><span class="o">:</span> <span class="ni">no-repeat</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="na">background-size</span><span class="o">:</span> <span class="ni">contain</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="na">padding</span><span class="o">:</span> <span class="mi">5</span><span class="kt">em</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="na">color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$surface-fg</span><span class="o">,</span> <span class="mi">0</span><span class="mf">.8</span><span class="p">);</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nc">.net-box</span><span class="o">,</span>
</span></span><span class="line"><span class="cl"><span class="nc">.bat-box</span><span class="o">,</span>
</span></span><span class="line"><span class="cl"><span class="nc">.tm-box</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="nt">label</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="na">font-size</span><span class="o">:</span> <span class="mi">2</span><span class="kt">em</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nc">.close-btn</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="na">font-size</span><span class="o">:</span> <span class="mi">2</span><span class="kt">em</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="k">&amp;</span><span class="nd">:hover</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="na">color</span><span class="o">:</span> <span class="nv">$surface-red</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nc">.btns-box</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="na">font-size</span><span class="o">:</span> <span class="mi">2</span><span class="mf">.5</span><span class="kt">em</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">  <span class="nt">button</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="na">padding</span><span class="o">:</span> <span class="mi">0</span><span class="mf">.4</span><span class="kt">em</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="na">border-radius</span><span class="o">:</span> <span class="mi">0</span><span class="mf">.1</span><span class="kt">em</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="na">background-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$surface-darkgrey</span><span class="o">,</span> <span class="mi">0</span><span class="mf">.3</span><span class="p">);</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">    <span class="k">&amp;</span><span class="nd">:hover</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">      <span class="na">transition</span><span class="o">:</span> <span class="mi">200</span><span class="kt">ms</span> <span class="ni">linear</span> <span class="n">background-color</span><span class="o">,</span> <span class="n">border-radius</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">      <span class="na">background-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$surface-lightgrey</span><span class="o">,</span> <span class="mi">0</span><span class="mf">.6</span><span class="p">);</span>
</span></span><span class="line"><span class="cl">    <span class="p">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">    <span class="k">&amp;</span><span class="nd">:first-child</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">      <span class="na">color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$surface-red</span><span class="o">,</span> <span class="mi">0</span><span class="mf">.8</span><span class="p">);</span>
</span></span><span class="line"><span class="cl">    <span class="p">}</span>
</span></span><span class="line"><span class="cl">  <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nc">.sep</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="na">font-size</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.5</span><span class="kt">em</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="na">padding-top</span><span class="o">:</span> <span class="mi">0</span><span class="mf">.15</span><span class="kt">em</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="na">padding-left</span><span class="o">:</span> <span class="mi">0</span><span class="mf">.2</span><span class="kt">em</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="na">padding-right</span><span class="o">:</span> <span class="mi">0</span><span class="mf">.2</span><span class="kt">em</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="na">color</span><span class="o">:</span> <span class="nv">$surface-lightgrey</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nc">.sundial-lbl</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="na">font-size</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.5</span><span class="kt">em</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="na">font-weight</span><span class="o">:</span> <span class="ni">bold</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="na">border-radius</span><span class="o">:</span> <span class="mi">0</span><span class="mf">.2</span><span class="kt">em</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="na">padding</span><span class="o">:</span> <span class="mi">0</span><span class="mf">.4</span><span class="kt">em</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="na">padding-bottom</span><span class="o">:</span> <span class="mi">0</span><span class="mf">.5</span><span class="kt">em</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="na">font-family</span><span class="o">:</span> <span class="s2">&#34;Poiret One&#34;</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div class="details admonition note open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-pencil-alt fa-fw"></i>Note<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content"><code>:class &quot;name&quot;</code> will correspond to <code>.name { color: pink; }</code> in SCSS.</div>
        </div>
    </div>
<h2 id="full-code" class="headerLink">
    <a href="#full-code" class="header-mark"></a>Full Code</h2><p>Here is the full code.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-19-1"><a class="lnlinks" href="#hl-19-1">1</a>
</span><span class="lnt" id="hl-19-2"><a class="lnlinks" href="#hl-19-2">2</a>
</span><span class="lnt" id="hl-19-3"><a class="lnlinks" href="#hl-19-3">3</a>
</span><span class="lnt" id="hl-19-4"><a class="lnlinks" href="#hl-19-4">4</a>
</span><span class="lnt" id="hl-19-5"><a class="lnlinks" href="#hl-19-5">5</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-txt" data-lang="txt"><span class="line"><span class="cl">.
</span></span><span class="line"><span class="cl">└── eww-powermenu
</span></span><span class="line"><span class="cl">    ├── eww.scss
</span></span><span class="line"><span class="cl">    ├── eww.yuck
</span></span><span class="line"><span class="cl">    └── wallpaper
</span></span></code></pre></td></tr></table>
</div>
</div><div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-20-1"><a class="lnlinks" href="#hl-20-1"> 1</a>
</span><span class="lnt" id="hl-20-2"><a class="lnlinks" href="#hl-20-2"> 2</a>
</span><span class="lnt" id="hl-20-3"><a class="lnlinks" href="#hl-20-3"> 3</a>
</span><span class="lnt" id="hl-20-4"><a class="lnlinks" href="#hl-20-4"> 4</a>
</span><span class="lnt" id="hl-20-5"><a class="lnlinks" href="#hl-20-5"> 5</a>
</span><span class="lnt" id="hl-20-6"><a class="lnlinks" href="#hl-20-6"> 6</a>
</span><span class="lnt" id="hl-20-7"><a class="lnlinks" href="#hl-20-7"> 7</a>
</span><span class="lnt" id="hl-20-8"><a class="lnlinks" href="#hl-20-8"> 8</a>
</span><span class="lnt" id="hl-20-9"><a class="lnlinks" href="#hl-20-9"> 9</a>
</span><span class="lnt" id="hl-20-10"><a class="lnlinks" href="#hl-20-10">10</a>
</span><span class="lnt" id="hl-20-11"><a class="lnlinks" href="#hl-20-11">11</a>
</span><span class="lnt" id="hl-20-12"><a class="lnlinks" href="#hl-20-12">12</a>
</span><span class="lnt" id="hl-20-13"><a class="lnlinks" href="#hl-20-13">13</a>
</span><span class="lnt" id="hl-20-14"><a class="lnlinks" href="#hl-20-14">14</a>
</span><span class="lnt" id="hl-20-15"><a class="lnlinks" href="#hl-20-15">15</a>
</span><span class="lnt" id="hl-20-16"><a class="lnlinks" href="#hl-20-16">16</a>
</span><span class="lnt" id="hl-20-17"><a class="lnlinks" href="#hl-20-17">17</a>
</span><span class="lnt" id="hl-20-18"><a class="lnlinks" href="#hl-20-18">18</a>
</span><span class="lnt" id="hl-20-19"><a class="lnlinks" href="#hl-20-19">19</a>
</span><span class="lnt" id="hl-20-20"><a class="lnlinks" href="#hl-20-20">20</a>
</span><span class="lnt" id="hl-20-21"><a class="lnlinks" href="#hl-20-21">21</a>
</span><span class="lnt" id="hl-20-22"><a class="lnlinks" href="#hl-20-22">22</a>
</span><span class="lnt" id="hl-20-23"><a class="lnlinks" href="#hl-20-23">23</a>
</span><span class="lnt" id="hl-20-24"><a class="lnlinks" href="#hl-20-24">24</a>
</span><span class="lnt" id="hl-20-25"><a class="lnlinks" href="#hl-20-25">25</a>
</span><span class="lnt" id="hl-20-26"><a class="lnlinks" href="#hl-20-26">26</a>
</span><span class="lnt" id="hl-20-27"><a class="lnlinks" href="#hl-20-27">27</a>
</span><span class="lnt" id="hl-20-28"><a class="lnlinks" href="#hl-20-28">28</a>
</span><span class="lnt" id="hl-20-29"><a class="lnlinks" href="#hl-20-29">29</a>
</span><span class="lnt" id="hl-20-30"><a class="lnlinks" href="#hl-20-30">30</a>
</span><span class="lnt" id="hl-20-31"><a class="lnlinks" href="#hl-20-31">31</a>
</span><span class="lnt" id="hl-20-32"><a class="lnlinks" href="#hl-20-32">32</a>
</span><span class="lnt" id="hl-20-33"><a class="lnlinks" href="#hl-20-33">33</a>
</span><span class="lnt" id="hl-20-34"><a class="lnlinks" href="#hl-20-34">34</a>
</span><span class="lnt" id="hl-20-35"><a class="lnlinks" href="#hl-20-35">35</a>
</span><span class="lnt" id="hl-20-36"><a class="lnlinks" href="#hl-20-36">36</a>
</span><span class="lnt" id="hl-20-37"><a class="lnlinks" href="#hl-20-37">37</a>
</span><span class="lnt" id="hl-20-38"><a class="lnlinks" href="#hl-20-38">38</a>
</span><span class="lnt" id="hl-20-39"><a class="lnlinks" href="#hl-20-39">39</a>
</span><span class="lnt" id="hl-20-40"><a class="lnlinks" href="#hl-20-40">40</a>
</span><span class="lnt" id="hl-20-41"><a class="lnlinks" href="#hl-20-41">41</a>
</span><span class="lnt" id="hl-20-42"><a class="lnlinks" href="#hl-20-42">42</a>
</span><span class="lnt" id="hl-20-43"><a class="lnlinks" href="#hl-20-43">43</a>
</span><span class="lnt" id="hl-20-44"><a class="lnlinks" href="#hl-20-44">44</a>
</span><span class="lnt" id="hl-20-45"><a class="lnlinks" href="#hl-20-45">45</a>
</span><span class="lnt" id="hl-20-46"><a class="lnlinks" href="#hl-20-46">46</a>
</span><span class="lnt" id="hl-20-47"><a class="lnlinks" href="#hl-20-47">47</a>
</span><span class="lnt" id="hl-20-48"><a class="lnlinks" href="#hl-20-48">48</a>
</span><span class="lnt" id="hl-20-49"><a class="lnlinks" href="#hl-20-49">49</a>
</span><span class="lnt" id="hl-20-50"><a class="lnlinks" href="#hl-20-50">50</a>
</span><span class="lnt" id="hl-20-51"><a class="lnlinks" href="#hl-20-51">51</a>
</span><span class="lnt" id="hl-20-52"><a class="lnlinks" href="#hl-20-52">52</a>
</span><span class="lnt" id="hl-20-53"><a class="lnlinks" href="#hl-20-53">53</a>
</span><span class="lnt" id="hl-20-54"><a class="lnlinks" href="#hl-20-54">54</a>
</span><span class="lnt" id="hl-20-55"><a class="lnlinks" href="#hl-20-55">55</a>
</span><span class="lnt" id="hl-20-56"><a class="lnlinks" href="#hl-20-56">56</a>
</span><span class="lnt" id="hl-20-57"><a class="lnlinks" href="#hl-20-57">57</a>
</span><span class="lnt" id="hl-20-58"><a class="lnlinks" href="#hl-20-58">58</a>
</span><span class="lnt" id="hl-20-59"><a class="lnlinks" href="#hl-20-59">59</a>
</span><span class="lnt" id="hl-20-60"><a class="lnlinks" href="#hl-20-60">60</a>
</span><span class="lnt" id="hl-20-61"><a class="lnlinks" href="#hl-20-61">61</a>
</span><span class="lnt" id="hl-20-62"><a class="lnlinks" href="#hl-20-62">62</a>
</span><span class="lnt" id="hl-20-63"><a class="lnlinks" href="#hl-20-63">63</a>
</span><span class="lnt" id="hl-20-64"><a class="lnlinks" href="#hl-20-64">64</a>
</span><span class="lnt" id="hl-20-65"><a class="lnlinks" href="#hl-20-65">65</a>
</span><span class="lnt" id="hl-20-66"><a class="lnlinks" href="#hl-20-66">66</a>
</span><span class="lnt" id="hl-20-67"><a class="lnlinks" href="#hl-20-67">67</a>
</span><span class="lnt" id="hl-20-68"><a class="lnlinks" href="#hl-20-68">68</a>
</span><span class="lnt" id="hl-20-69"><a class="lnlinks" href="#hl-20-69">69</a>
</span><span class="lnt" id="hl-20-70"><a class="lnlinks" href="#hl-20-70">70</a>
</span><span class="lnt" id="hl-20-71"><a class="lnlinks" href="#hl-20-71">71</a>
</span><span class="lnt" id="hl-20-72"><a class="lnlinks" href="#hl-20-72">72</a>
</span><span class="lnt" id="hl-20-73"><a class="lnlinks" href="#hl-20-73">73</a>
</span><span class="lnt" id="hl-20-74"><a class="lnlinks" href="#hl-20-74">74</a>
</span><span class="lnt" id="hl-20-75"><a class="lnlinks" href="#hl-20-75">75</a>
</span><span class="lnt" id="hl-20-76"><a class="lnlinks" href="#hl-20-76">76</a>
</span><span class="lnt" id="hl-20-77"><a class="lnlinks" href="#hl-20-77">77</a>
</span><span class="lnt" id="hl-20-78"><a class="lnlinks" href="#hl-20-78">78</a>
</span><span class="lnt" id="hl-20-79"><a class="lnlinks" href="#hl-20-79">79</a>
</span><span class="lnt" id="hl-20-80"><a class="lnlinks" href="#hl-20-80">80</a>
</span><span class="lnt" id="hl-20-81"><a class="lnlinks" href="#hl-20-81">81</a>
</span><span class="lnt" id="hl-20-82"><a class="lnlinks" href="#hl-20-82">82</a>
</span><span class="lnt" id="hl-20-83"><a class="lnlinks" href="#hl-20-83">83</a>
</span><span class="lnt" id="hl-20-84"><a class="lnlinks" href="#hl-20-84">84</a>
</span><span class="lnt" id="hl-20-85"><a class="lnlinks" href="#hl-20-85">85</a>
</span><span class="lnt" id="hl-20-86"><a class="lnlinks" href="#hl-20-86">86</a>
</span><span class="lnt" id="hl-20-87"><a class="lnlinks" href="#hl-20-87">87</a>
</span><span class="lnt" id="hl-20-88"><a class="lnlinks" href="#hl-20-88">88</a>
</span><span class="lnt" id="hl-20-89"><a class="lnlinks" href="#hl-20-89">89</a>
</span><span class="lnt" id="hl-20-90"><a class="lnlinks" href="#hl-20-90">90</a>
</span><span class="lnt" id="hl-20-91"><a class="lnlinks" href="#hl-20-91">91</a>
</span><span class="lnt" id="hl-20-92"><a class="lnlinks" href="#hl-20-92">92</a>
</span><span class="lnt" id="hl-20-93"><a class="lnlinks" href="#hl-20-93">93</a>
</span><span class="lnt" id="hl-20-94"><a class="lnlinks" href="#hl-20-94">94</a>
</span><span class="lnt" id="hl-20-95"><a class="lnlinks" href="#hl-20-95">95</a>
</span><span class="lnt" id="hl-20-96"><a class="lnlinks" href="#hl-20-96">96</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-fennel" data-lang="fennel"><span class="line"><span class="cl"><span class="p">(</span><span class="nf">defwindow</span><span class="w"> </span><span class="nv">powermenu</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="c1">;; monitor 0 ;; wayland users may need this</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="ss">:stacking</span><span class="w"> </span><span class="s">&#34;fg&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="ss">:windowtype</span><span class="w"> </span><span class="s">&#34;normal&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="ss">:wm-ignore</span><span class="w"> </span><span class="nv">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="ss">:geometry</span><span class="w"> </span><span class="p">(</span><span class="nf">geometry</span><span class="w"> </span><span class="ss">:width</span><span class="w"> </span><span class="s">&#34;100%&#34;</span><span class="w"> </span><span class="ss">:height</span><span class="w"> </span><span class="s">&#34;100%&#34;</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="p">(</span><span class="nf">powermenu_layout</span><span class="p">))</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="p">(</span><span class="nf">defpoll</span><span class="w"> </span><span class="nv">time</span><span class="w"> </span><span class="ss">:interval</span><span class="w"> </span><span class="s">&#34;5s&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="ss">:initial</span><span class="w"> </span><span class="o">`</span><span class="nv">date</span><span class="w"> </span><span class="nv">+</span><span class="o">&#39;</span><span class="p">{</span><span class="s">&#34;hour&#34;</span><span class="err">:</span><span class="s">&#34;%H&#34;</span><span class="err">,</span><span class="s">&#34;min&#34;</span><span class="err">:</span><span class="s">&#34;%M&#34;</span><span class="p">}</span><span class="o">&#39;`</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="o">`</span><span class="nv">date</span><span class="w"> </span><span class="nv">+</span><span class="o">&#39;</span><span class="p">{</span><span class="s">&#34;hour&#34;</span><span class="err">:</span><span class="s">&#34;%H&#34;</span><span class="err">,</span><span class="s">&#34;min&#34;</span><span class="err">:</span><span class="s">&#34;%M&#34;</span><span class="p">}</span><span class="o">&#39;`</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="p">(</span><span class="nf">defpoll</span><span class="w"> </span><span class="nv">net</span><span class="w"> </span><span class="ss">:interval</span><span class="w"> </span><span class="s">&#34;100s&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="ss">:initial</span><span class="w"> </span><span class="o">`</span><span class="nv">N/A</span><span class="o">`</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="o">`</span><span class="nv">nmcli</span><span class="w"> </span><span class="nv">-t</span><span class="w"> </span><span class="nv">-f</span><span class="w"> </span><span class="nv">SIGNAL</span><span class="err">,</span><span class="nv">ACTIVE</span><span class="w"> </span><span class="nv">device</span><span class="w"> </span><span class="nv">wifi</span><span class="w"> </span><span class="err">\</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="err">|</span><span class="w"> </span><span class="nv">awk</span><span class="w"> </span><span class="nv">-F</span><span class="o">&#39;</span><span class="err">:</span><span class="o">&#39;</span><span class="w"> </span><span class="o">&#39;</span><span class="p">{</span><span class="nv">if</span><span class="p">(</span><span class="nf">$2==</span><span class="s">&#34;yes&#34;</span><span class="p">)</span><span class="nv">print$1</span><span class="p">}</span><span class="o">&#39;`</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="p">(</span><span class="nf">defwidget</span><span class="w"> </span><span class="nv">powermenu_layout</span><span class="w"> </span><span class="p">[]</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="p">(</span><span class="nf">box</span><span class="w"> </span><span class="ss">:class</span><span class="w"> </span><span class="s">&#34;layout-box&#34;</span><span class="w"> </span><span class="ss">:space-evenly</span><span class="w"> </span><span class="nv">false</span><span class="w"> </span><span class="ss">:orientation</span><span class="w"> </span><span class="s">&#34;vertical&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">       </span><span class="ss">:style</span><span class="w"> </span><span class="s">&#34;background-image: url(&#39;./wallpaper&#39;)&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="p">(</span><span class="nf">box</span><span class="w"> </span><span class="ss">:valign</span><span class="w"> </span><span class="s">&#34;start&#34;</span><span class="w"> </span><span class="ss">:space-evenly</span><span class="w"> </span><span class="nv">false</span><span class="w"> </span><span class="ss">:spacing</span><span class="w"> </span><span class="mi">25</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="p">(</span><span class="nf">_sundial</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="p">(</span><span class="nf">_battery</span><span class="w"> </span><span class="ss">:status</span><span class="w"> </span><span class="p">{</span><span class="nv">EWW_BATTERY.BAT0.status</span><span class="p">}</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                </span><span class="ss">:battery</span><span class="w"> </span><span class="p">{</span><span class="nv">EWW_BATTERY.BAT0.capacity</span><span class="p">}</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                </span><span class="ss">:charge</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="w"> </span><span class="ss">:one</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="w"> </span><span class="ss">:two</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="w"> </span><span class="ss">:three</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="w"> </span><span class="ss">:four</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                </span><span class="ss">:five</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="w"> </span><span class="ss">:six</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="w"> </span><span class="ss">:seven</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="p">(</span><span class="nf">_network</span><span class="w"> </span><span class="ss">:strength</span><span class="w"> </span><span class="nv">net</span><span class="w"> </span><span class="ss">:offline</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="w"> </span><span class="ss">:excellent</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="w"> </span><span class="ss">:good</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                </span><span class="ss">:okay</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="w"> </span><span class="ss">:slow</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="p">(</span><span class="nf">label</span><span class="w"> </span><span class="ss">:text</span><span class="w"> </span><span class="s">&#34;|&#34;</span><span class="w"> </span><span class="ss">:class</span><span class="w"> </span><span class="s">&#34;sep&#34;</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="p">(</span><span class="nf">button</span><span class="w"> </span><span class="ss">:onclick</span><span class="w"> </span><span class="s">&#34;eww close powermenu&#34;</span><span class="w"> </span><span class="ss">:class</span><span class="w"> </span><span class="s">&#34;close-btn&#34;</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="p">))</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="p">(</span><span class="nf">box</span><span class="w"> </span><span class="ss">:space-evenly</span><span class="w"> </span><span class="nv">false</span><span class="w"> </span><span class="ss">:hexpand</span><span class="w"> </span><span class="nv">true</span><span class="w"> </span><span class="ss">:vexpand</span><span class="w"> </span><span class="nv">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="p">(</span><span class="nf">box</span><span class="w"> </span><span class="ss">:spacing</span><span class="w"> </span><span class="mi">15</span><span class="w"> </span><span class="ss">:class</span><span class="w"> </span><span class="s">&#34;tm-box&#34;</span><span class="w"> </span><span class="ss">:space-evenly</span><span class="w"> </span><span class="nv">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">            </span><span class="ss">:valign</span><span class="w"> </span><span class="s">&#34;end&#34;</span><span class="w"> </span><span class="ss">:halign</span><span class="w"> </span><span class="s">&#34;start&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">        </span><span class="p">(</span><span class="nf">label</span><span class="w"> </span><span class="ss">:text</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">        </span><span class="p">(</span><span class="nf">label</span><span class="w"> </span><span class="ss">:text</span><span class="w"> </span><span class="s">&#34;${time.hour}  ${time.min}&#34;</span><span class="p">))</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="p">(</span><span class="nf">_buttons</span><span class="w"> </span><span class="ss">:shutdown</span><span class="w"> </span><span class="s">&#34;poweroff&#34;</span><span class="w"> </span><span class="ss">:reboot</span><span class="w"> </span><span class="s">&#34;reboot&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                </span><span class="ss">:logout</span><span class="w"> </span><span class="s">&#34;loginctl kill-session self&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                </span><span class="ss">:shutdown_icon</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="w"> </span><span class="ss">:reboot_icon</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                </span><span class="ss">:logout_icon</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="p">))))</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="p">(</span><span class="nf">defwidget</span><span class="w"> </span><span class="nv">_battery</span><span class="w"> </span><span class="p">[</span><span class="nv">battery</span><span class="w"> </span><span class="nv">status</span><span class="w"> </span><span class="nv">one</span><span class="w"> </span><span class="nv">two</span><span class="w"> </span><span class="nv">three</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                    </span><span class="nv">four</span><span class="w"> </span><span class="nv">five</span><span class="w"> </span><span class="nv">six</span><span class="w"> </span><span class="nv">seven</span><span class="w"> </span><span class="nv">charge</span><span class="p">]</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="p">(</span><span class="nf">box</span><span class="w"> </span><span class="ss">:class</span><span class="w"> </span><span class="s">&#34;bat-box&#34;</span><span class="w"> </span><span class="ss">:space-evenly</span><span class="w"> </span><span class="nv">false</span><span class="w"> </span><span class="ss">:spacing</span><span class="w"> </span><span class="mi">8</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="p">(</span><span class="nf">label</span><span class="w"> </span><span class="ss">:text</span><span class="w"> </span><span class="p">{</span><span class="nv">status</span><span class="w"> </span><span class="nv">==</span><span class="w"> </span><span class="ss">&#39;Charging</span><span class="o">&#39;</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="nv">charge</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="nv">battery</span><span class="w"> </span><span class="k">&lt; </span><span class="mi">15</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="nv">seven</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">        </span><span class="nv">battery</span><span class="w"> </span><span class="k">&lt; </span><span class="mi">30</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="nv">six</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">          </span><span class="nv">battery</span><span class="w"> </span><span class="k">&lt; </span><span class="mi">45</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="nv">five</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">            </span><span class="nv">battery</span><span class="w"> </span><span class="k">&lt; </span><span class="mi">60</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="nv">four</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">              </span><span class="nv">battery</span><span class="w"> </span><span class="k">&lt; </span><span class="mi">75</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="nv">three</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                </span><span class="nv">battery</span><span class="w"> </span><span class="k">&lt; </span><span class="mi">95</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="nv">two</span><span class="w"> </span><span class="k">: </span><span class="nv">one</span><span class="p">})))</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="p">(</span><span class="nf">defwidget</span><span class="w"> </span><span class="nv">_network</span><span class="w"> </span><span class="p">[</span><span class="nv">strength</span><span class="w"> </span><span class="nv">offline</span><span class="w"> </span><span class="nv">excellent</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                    </span><span class="nv">good</span><span class="w"> </span><span class="nv">okay</span><span class="w"> </span><span class="nv">slow</span><span class="p">]</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="p">(</span><span class="nf">box</span><span class="w"> </span><span class="ss">:class</span><span class="w"> </span><span class="s">&#34;net-box&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">       </span><span class="ss">:space-evenly</span><span class="w"> </span><span class="nv">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">       </span><span class="ss">:spacing</span><span class="w"> </span><span class="mi">8</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="p">(</span><span class="nf">label</span><span class="w"> </span><span class="ss">:text</span><span class="w"> </span><span class="p">{</span><span class="nv">strength</span><span class="w"> </span><span class="nv">==</span><span class="w"> </span><span class="s">&#34;&#34;</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="nv">offline</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span><span class="nv">strength</span><span class="w"> </span><span class="k">&lt; </span><span class="mi">26</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="nv">slow</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">        </span><span class="nv">strength</span><span class="w"> </span><span class="k">&lt; </span><span class="mi">51</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="nv">okay</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">          </span><span class="nv">strength</span><span class="w"> </span><span class="k">&lt; </span><span class="mi">76</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="nv">good</span><span class="w"> </span><span class="k">: </span><span class="nv">excellent</span><span class="p">})))</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="p">(</span><span class="nf">defwidget</span><span class="w"> </span><span class="nv">_buttons</span><span class="w"> </span><span class="p">[</span><span class="nv">shutdown</span><span class="w"> </span><span class="nv">shutdown_icon</span><span class="w"> </span><span class="nv">reboot</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                    </span><span class="nv">reboot_icon</span><span class="w"> </span><span class="nv">logout</span><span class="w"> </span><span class="nv">logout_icon</span><span class="p">]</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="p">(</span><span class="nf">box</span><span class="w"> </span><span class="ss">:class</span><span class="w"> </span><span class="s">&#34;btns-box&#34;</span><span class="w"> </span><span class="ss">:spacing</span><span class="w"> </span><span class="mi">5</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">       </span><span class="ss">:vexpand</span><span class="w"> </span><span class="nv">true</span><span class="w"> </span><span class="ss">:hexpand</span><span class="w"> </span><span class="nv">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">       </span><span class="ss">:valign</span><span class="w"> </span><span class="s">&#34;end&#34;</span><span class="w"> </span><span class="ss">:halign</span><span class="w"> </span><span class="s">&#34;end&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">       </span><span class="ss">:space-evenly</span><span class="w"> </span><span class="nv">false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="p">(</span><span class="nf">button</span><span class="w"> </span><span class="ss">:onclick</span><span class="w"> </span><span class="nv">shutdown</span><span class="w"> </span><span class="nv">shutdown_icon</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="p">(</span><span class="nf">button</span><span class="w"> </span><span class="ss">:onclick</span><span class="w"> </span><span class="nv">reboot</span><span class="w"> </span><span class="nv">reboot_icon</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="p">(</span><span class="nf">button</span><span class="w"> </span><span class="ss">:onclick</span><span class="w"> </span><span class="nv">logout</span><span class="w"> </span><span class="nv">logout_icon</span><span class="p">)))</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="p">(</span><span class="nf">defwidget</span><span class="w"> </span><span class="nv">_sundial</span><span class="w"> </span><span class="p">[]</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="p">(</span><span class="nf">label</span><span class="w"> </span><span class="ss">:class</span><span class="w"> </span><span class="s">&#34;sundial-lbl&#34;</span><span class="w"> </span><span class="ss">:halign</span><span class="w"> </span><span class="s">&#34;end&#34;</span><span class="w"> </span><span class="ss">:hexpand</span><span class="w"> </span><span class="nv">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">         </span><span class="ss">:text</span><span class="w"> </span><span class="p">{</span><span class="nv">time.hour</span><span class="w"> </span><span class="k">&gt;= </span><span class="mi">2</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nv">time.hour</span><span class="w"> </span><span class="k">&lt;= </span><span class="mi">4</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="s">&#34;Early Morning&#34;</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">               </span><span class="nv">time.hour</span><span class="w"> </span><span class="k">&lt;= </span><span class="mi">5</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="s">&#34;Dawn&#34;</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">               </span><span class="nv">time.hour</span><span class="w"> </span><span class="k">&gt;= </span><span class="mi">6</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="p">(</span><span class="nf">time.hour</span><span class="w"> </span><span class="k">&lt;= </span><span class="mi">8</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nv">time.min</span><span class="w"> </span><span class="k">&lt;= </span><span class="mi">59</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                  </span><span class="nv">?</span><span class="w"> </span><span class="s">&#34;Morning&#34;</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">               </span><span class="nv">time.hour</span><span class="w"> </span><span class="k">&gt;= </span><span class="mi">9</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                 </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="p">(</span><span class="nf">time.hour</span><span class="w"> </span><span class="k">&lt;= </span><span class="mi">11</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nv">time.min</span><span class="w"> </span><span class="k">&lt;= </span><span class="mi">59</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                   </span><span class="nv">?</span><span class="w"> </span><span class="s">&#34;Late Morning&#34;</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">               </span><span class="nv">time.hour</span><span class="w"> </span><span class="nv">==</span><span class="w"> </span><span class="mi">12</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nv">time.min</span><span class="w"> </span><span class="k">&lt;= </span><span class="mi">29</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                 </span><span class="nv">?</span><span class="w"> </span><span class="s">&#34;Midday&#34;</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">               </span><span class="nv">time.hour</span><span class="w"> </span><span class="k">&gt;= </span><span class="mi">12</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nv">time.hour</span><span class="w"> </span><span class="k">&lt;= </span><span class="mi">16</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                 </span><span class="nv">?</span><span class="w"> </span><span class="s">&#34;Afternoon&#34;</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">               </span><span class="nv">time.hour</span><span class="w"> </span><span class="k">&gt; </span><span class="mi">16</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nv">time.hour</span><span class="w"> </span><span class="k">&lt;= </span><span class="mi">17</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                 </span><span class="nv">?</span><span class="w"> </span><span class="s">&#34;Late Afternoon&#34;</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">               </span><span class="p">(</span><span class="nf">time.hour</span><span class="w"> </span><span class="k">&gt;= </span><span class="mi">17</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nv">time.min</span><span class="w"> </span><span class="k">&lt;= </span><span class="mi">1</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                 </span><span class="err">||</span><span class="w"> </span><span class="p">(</span><span class="nf">time.hour</span><span class="w"> </span><span class="k">&lt;= </span><span class="mi">18</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nv">time.min</span><span class="w"> </span><span class="k">&lt;= </span><span class="mi">20</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                   </span><span class="nv">?</span><span class="w"> </span><span class="s">&#34;Early Evening&#34;</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">               </span><span class="nv">time.hour</span><span class="w"> </span><span class="k">&gt;= </span><span class="mi">18</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nv">time.hour</span><span class="w"> </span><span class="k">&lt;= </span><span class="mi">19</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                 </span><span class="nv">?</span><span class="w"> </span><span class="s">&#34;Dusk&#34;</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">               </span><span class="nv">time.hour</span><span class="w"> </span><span class="k">&gt; </span><span class="mi">19</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nv">time.hour</span><span class="w"> </span><span class="k">&lt;= </span><span class="mi">21</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">                 </span><span class="nv">?</span><span class="w"> </span><span class="s">&#34;Late Evening&#34;</span><span class="w"> </span><span class="err">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">               </span><span class="nv">time.hour</span><span class="w"> </span><span class="k">&gt; </span><span class="mi">21</span><span class="w"> </span><span class="nv">?</span><span class="w"> </span><span class="s">&#34;Night&#34;</span><span class="w"> </span><span class="k">: </span><span class="s">&#34;Midnight&#34;</span><span class="p">}))</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="c1">;; vim:ft=yuck</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-21-1"><a class="lnlinks" href="#hl-21-1"> 1</a>
</span><span class="lnt" id="hl-21-2"><a class="lnlinks" href="#hl-21-2"> 2</a>
</span><span class="lnt" id="hl-21-3"><a class="lnlinks" href="#hl-21-3"> 3</a>
</span><span class="lnt" id="hl-21-4"><a class="lnlinks" href="#hl-21-4"> 4</a>
</span><span class="lnt" id="hl-21-5"><a class="lnlinks" href="#hl-21-5"> 5</a>
</span><span class="lnt" id="hl-21-6"><a class="lnlinks" href="#hl-21-6"> 6</a>
</span><span class="lnt" id="hl-21-7"><a class="lnlinks" href="#hl-21-7"> 7</a>
</span><span class="lnt" id="hl-21-8"><a class="lnlinks" href="#hl-21-8"> 8</a>
</span><span class="lnt" id="hl-21-9"><a class="lnlinks" href="#hl-21-9"> 9</a>
</span><span class="lnt" id="hl-21-10"><a class="lnlinks" href="#hl-21-10">10</a>
</span><span class="lnt" id="hl-21-11"><a class="lnlinks" href="#hl-21-11">11</a>
</span><span class="lnt" id="hl-21-12"><a class="lnlinks" href="#hl-21-12">12</a>
</span><span class="lnt" id="hl-21-13"><a class="lnlinks" href="#hl-21-13">13</a>
</span><span class="lnt" id="hl-21-14"><a class="lnlinks" href="#hl-21-14">14</a>
</span><span class="lnt" id="hl-21-15"><a class="lnlinks" href="#hl-21-15">15</a>
</span><span class="lnt" id="hl-21-16"><a class="lnlinks" href="#hl-21-16">16</a>
</span><span class="lnt" id="hl-21-17"><a class="lnlinks" href="#hl-21-17">17</a>
</span><span class="lnt" id="hl-21-18"><a class="lnlinks" href="#hl-21-18">18</a>
</span><span class="lnt" id="hl-21-19"><a class="lnlinks" href="#hl-21-19">19</a>
</span><span class="lnt" id="hl-21-20"><a class="lnlinks" href="#hl-21-20">20</a>
</span><span class="lnt" id="hl-21-21"><a class="lnlinks" href="#hl-21-21">21</a>
</span><span class="lnt" id="hl-21-22"><a class="lnlinks" href="#hl-21-22">22</a>
</span><span class="lnt" id="hl-21-23"><a class="lnlinks" href="#hl-21-23">23</a>
</span><span class="lnt" id="hl-21-24"><a class="lnlinks" href="#hl-21-24">24</a>
</span><span class="lnt" id="hl-21-25"><a class="lnlinks" href="#hl-21-25">25</a>
</span><span class="lnt" id="hl-21-26"><a class="lnlinks" href="#hl-21-26">26</a>
</span><span class="lnt" id="hl-21-27"><a class="lnlinks" href="#hl-21-27">27</a>
</span><span class="lnt" id="hl-21-28"><a class="lnlinks" href="#hl-21-28">28</a>
</span><span class="lnt" id="hl-21-29"><a class="lnlinks" href="#hl-21-29">29</a>
</span><span class="lnt" id="hl-21-30"><a class="lnlinks" href="#hl-21-30">30</a>
</span><span class="lnt" id="hl-21-31"><a class="lnlinks" href="#hl-21-31">31</a>
</span><span class="lnt" id="hl-21-32"><a class="lnlinks" href="#hl-21-32">32</a>
</span><span class="lnt" id="hl-21-33"><a class="lnlinks" href="#hl-21-33">33</a>
</span><span class="lnt" id="hl-21-34"><a class="lnlinks" href="#hl-21-34">34</a>
</span><span class="lnt" id="hl-21-35"><a class="lnlinks" href="#hl-21-35">35</a>
</span><span class="lnt" id="hl-21-36"><a class="lnlinks" href="#hl-21-36">36</a>
</span><span class="lnt" id="hl-21-37"><a class="lnlinks" href="#hl-21-37">37</a>
</span><span class="lnt" id="hl-21-38"><a class="lnlinks" href="#hl-21-38">38</a>
</span><span class="lnt" id="hl-21-39"><a class="lnlinks" href="#hl-21-39">39</a>
</span><span class="lnt" id="hl-21-40"><a class="lnlinks" href="#hl-21-40">40</a>
</span><span class="lnt" id="hl-21-41"><a class="lnlinks" href="#hl-21-41">41</a>
</span><span class="lnt" id="hl-21-42"><a class="lnlinks" href="#hl-21-42">42</a>
</span><span class="lnt" id="hl-21-43"><a class="lnlinks" href="#hl-21-43">43</a>
</span><span class="lnt" id="hl-21-44"><a class="lnlinks" href="#hl-21-44">44</a>
</span><span class="lnt" id="hl-21-45"><a class="lnlinks" href="#hl-21-45">45</a>
</span><span class="lnt" id="hl-21-46"><a class="lnlinks" href="#hl-21-46">46</a>
</span><span class="lnt" id="hl-21-47"><a class="lnlinks" href="#hl-21-47">47</a>
</span><span class="lnt" id="hl-21-48"><a class="lnlinks" href="#hl-21-48">48</a>
</span><span class="lnt" id="hl-21-49"><a class="lnlinks" href="#hl-21-49">49</a>
</span><span class="lnt" id="hl-21-50"><a class="lnlinks" href="#hl-21-50">50</a>
</span><span class="lnt" id="hl-21-51"><a class="lnlinks" href="#hl-21-51">51</a>
</span><span class="lnt" id="hl-21-52"><a class="lnlinks" href="#hl-21-52">52</a>
</span><span class="lnt" id="hl-21-53"><a class="lnlinks" href="#hl-21-53">53</a>
</span><span class="lnt" id="hl-21-54"><a class="lnlinks" href="#hl-21-54">54</a>
</span><span class="lnt" id="hl-21-55"><a class="lnlinks" href="#hl-21-55">55</a>
</span><span class="lnt" id="hl-21-56"><a class="lnlinks" href="#hl-21-56">56</a>
</span><span class="lnt" id="hl-21-57"><a class="lnlinks" href="#hl-21-57">57</a>
</span><span class="lnt" id="hl-21-58"><a class="lnlinks" href="#hl-21-58">58</a>
</span><span class="lnt" id="hl-21-59"><a class="lnlinks" href="#hl-21-59">59</a>
</span><span class="lnt" id="hl-21-60"><a class="lnlinks" href="#hl-21-60">60</a>
</span><span class="lnt" id="hl-21-61"><a class="lnlinks" href="#hl-21-61">61</a>
</span><span class="lnt" id="hl-21-62"><a class="lnlinks" href="#hl-21-62">62</a>
</span><span class="lnt" id="hl-21-63"><a class="lnlinks" href="#hl-21-63">63</a>
</span><span class="lnt" id="hl-21-64"><a class="lnlinks" href="#hl-21-64">64</a>
</span><span class="lnt" id="hl-21-65"><a class="lnlinks" href="#hl-21-65">65</a>
</span><span class="lnt" id="hl-21-66"><a class="lnlinks" href="#hl-21-66">66</a>
</span><span class="lnt" id="hl-21-67"><a class="lnlinks" href="#hl-21-67">67</a>
</span><span class="lnt" id="hl-21-68"><a class="lnlinks" href="#hl-21-68">68</a>
</span><span class="lnt" id="hl-21-69"><a class="lnlinks" href="#hl-21-69">69</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$surface-darkgrey</span><span class="o">:</span> <span class="mh">#20252b</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="nv">$surface-fg</span><span class="o">:</span> <span class="mh">#949494</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="nv">$surface-lightgrey</span><span class="o">:</span> <span class="mh">#3d464e</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="nv">$surface-grey</span><span class="o">:</span> <span class="mh">#2b3238</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="nv">$surface-red</span><span class="o">:</span> <span class="mh">#f87070</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="o">*</span> <span class="p">{</span> <span class="na">all</span><span class="o">:</span> <span class="ni">unset</span><span class="p">;</span> <span class="p">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nc">.layout-box</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="na">font-family</span><span class="o">:</span> <span class="n">Phosphor</span><span class="o">,</span> <span class="n">Koulen</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="na">background-repeat</span><span class="o">:</span> <span class="ni">no-repeat</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="na">background-size</span><span class="o">:</span> <span class="ni">contain</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="na">padding</span><span class="o">:</span> <span class="mi">5</span><span class="kt">em</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="na">color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$surface-fg</span><span class="o">,</span> <span class="mi">0</span><span class="mf">.8</span><span class="p">);</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nc">.net-box</span><span class="o">,</span>
</span></span><span class="line"><span class="cl"><span class="nc">.bat-box</span><span class="o">,</span>
</span></span><span class="line"><span class="cl"><span class="nc">.tm-box</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="nt">label</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="na">font-size</span><span class="o">:</span> <span class="mi">2</span><span class="kt">em</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nc">.close-btn</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="na">font-size</span><span class="o">:</span> <span class="mi">2</span><span class="kt">em</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="k">&amp;</span><span class="nd">:hover</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="na">color</span><span class="o">:</span> <span class="nv">$surface-red</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nc">.btns-box</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="na">font-size</span><span class="o">:</span> <span class="mi">2</span><span class="mf">.5</span><span class="kt">em</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">  <span class="nt">button</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="na">padding</span><span class="o">:</span> <span class="mi">0</span><span class="mf">.4</span><span class="kt">em</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="na">border-radius</span><span class="o">:</span> <span class="mi">0</span><span class="mf">.1</span><span class="kt">em</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="na">background-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$surface-darkgrey</span><span class="o">,</span> <span class="mi">0</span><span class="mf">.3</span><span class="p">);</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">    <span class="k">&amp;</span><span class="nd">:hover</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">      <span class="na">transition</span><span class="o">:</span> <span class="mi">200</span><span class="kt">ms</span> <span class="ni">linear</span> <span class="n">background-color</span><span class="o">,</span> <span class="n">border-radius</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">      <span class="na">background-color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$surface-lightgrey</span><span class="o">,</span> <span class="mi">0</span><span class="mf">.6</span><span class="p">);</span>
</span></span><span class="line"><span class="cl">    <span class="p">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">    <span class="k">&amp;</span><span class="nd">:first-child</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">      <span class="na">color</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$surface-red</span><span class="o">,</span> <span class="mi">0</span><span class="mf">.8</span><span class="p">);</span>
</span></span><span class="line"><span class="cl">    <span class="p">}</span>
</span></span><span class="line"><span class="cl">  <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nc">.sep</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="na">font-size</span><span class="o">:</span> <span class="mi">1</span><span class="kt">em</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="na">padding-top</span><span class="o">:</span> <span class="mi">0</span><span class="mf">.15</span><span class="kt">em</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="na">padding-left</span><span class="o">:</span> <span class="mi">0</span><span class="mf">.2</span><span class="kt">em</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="na">padding-right</span><span class="o">:</span> <span class="mi">0</span><span class="mf">.2</span><span class="kt">em</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="na">font-family</span><span class="o">:</span> <span class="n">Iosevka</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="na">font-weight</span><span class="o">:</span> <span class="mi">400</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nc">.sundial-lbl</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="na">font-size</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.5</span><span class="kt">em</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="na">font-weight</span><span class="o">:</span> <span class="ni">bold</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="na">border-radius</span><span class="o">:</span> <span class="mi">0</span><span class="mf">.2</span><span class="kt">em</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="na">padding</span><span class="o">:</span> <span class="mi">0</span><span class="mf">.4</span><span class="kt">em</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="na">padding-bottom</span><span class="o">:</span> <span class="mi">0</span><span class="mf">.5</span><span class="kt">em</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">  <span class="na">font-family</span><span class="o">:</span> <span class="s2">&#34;Poiret One&#34;</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1">// vim:ft=scss
</span></span></span></code></pre></td></tr></table>
</div>
</div><h2 id="running-the-powermenu" class="headerLink">
    <a href="#running-the-powermenu" class="header-mark"></a>Running The Powermenu</h2><p>Moment of truth. Run the widget by executing the following command.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-22-1"><a class="lnlinks" href="#hl-22-1">1</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">EWW open powermenu
</span></span></code></pre></td></tr></table>
</div>
</div><p>And that is all really. If the widget looks like the following image
then congratulations, you have made it.</p>
<p><figure><a class="lightgallery" href="./images/showcase.png" title="blog powermenu showcase" data-thumbnail="./images/showcase.png">
        <img
            
            loading="lazy"
            src="./images/showcase.png"
            srcset="./images/showcase.png, ./images/showcase.png 1.5x, ./images/showcase.png 2x"
            sizes="auto"
            alt="blog powermenu showcase">
    </a></figure></p>
<p>There are many neat <code>eww</code> flags that might interest you. Try <code>eww --help</code>
for starters. If anything &lsquo;does not work&rsquo; then try looking at the
<a href="#debugging" title="debugging" rel="">debugging</a> section. The
<a href="#debugging" title="debugging" rel="">debugging</a> section might also help you
in solving general problems related to EWW.</p>
<h2 id="debugging" class="headerLink">
    <a href="#debugging" class="header-mark"></a>Debugging</h2><p>Following are some of the things that you <em>should</em> do before anything else if
the widget seems buggy or, not reflecting the changes that you&rsquo;ve made.</p>
<ul>
<li>
<p>Always check the logs <code>eww logs</code>. Try the updating + saving combo i.e.,
change a part of code then write those changes, and you will see real-time
updates in the logs.</p>
</li>
<li>
<p>You can check the state of what variables are active in currently or, if
a variable is even yielding any results or not by using <code>eww state</code>.
For the Powermenu the output might look like the following.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-23-1"><a class="lnlinks" href="#hl-23-1">1</a>
</span><span class="lnt" id="hl-23-2"><a class="lnlinks" href="#hl-23-2">2</a>
</span><span class="lnt" id="hl-23-3"><a class="lnlinks" href="#hl-23-3">3</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">EWW_BATTERY: <span class="o">{</span><span class="s2">&#34;BAT0&#34;</span>: <span class="o">{</span> <span class="s2">&#34;status&#34;</span>: <span class="s2">&#34;Full&#34;</span>, <span class="s2">&#34;capacity&#34;</span>: <span class="m">100</span> <span class="o">}</span>, <span class="s2">&#34;total_avg&#34;</span>: 100.0<span class="o">}</span>
</span></span><span class="line"><span class="cl">net: <span class="m">96</span>
</span></span><span class="line"><span class="cl">time: <span class="o">{</span><span class="s2">&#34;hour&#34;</span>:<span class="s2">&#34;12&#34;</span>,<span class="s2">&#34;min&#34;</span>:<span class="s2">&#34;14&#34;</span><span class="o">}</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>This will work only if widgets i.e. if Powermenu is open. If any widgets are open
then it will show the state of the variables being used by that.</p>
</li>
<li>
<p>You can also use <code>eww get &lt;variable_name&gt;</code> like <code>eww get time</code> for selectively
verifying the value of a variable and if it yields correct output or, not.
This also will print values only if the widget window is open.</p>
</li>
<li>
<p>A hot reload is always a good option. Trigger it by using <code>eww reload</code>.</p>
</li>
<li>
<p>See if the EWW daemon is running by using <code>eww ping</code> and if the output is <code>pong</code>
then it is responsive.</p>
</li>
<li>
<p>List of windows available and opened can be seen by using <code>eww windows</code>.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-24-1"><a class="lnlinks" href="#hl-24-1">1</a>
</span><span class="lnt" id="hl-24-2"><a class="lnlinks" href="#hl-24-2">2</a>
</span><span class="lnt" id="hl-24-3"><a class="lnlinks" href="#hl-24-3">3</a>
</span><span class="lnt" id="hl-24-4"><a class="lnlinks" href="#hl-24-4">4</a>
</span><span class="lnt" id="hl-24-5"><a class="lnlinks" href="#hl-24-5">5</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">*disclose
</span></span><span class="line"><span class="cl">lumin
</span></span><span class="line"><span class="cl">vertigo
</span></span><span class="line"><span class="cl">origin
</span></span><span class="line"><span class="cl">ocular
</span></span></code></pre></td></tr></table>
</div>
</div><p>Where <code>disclose</code> is opened and rest are closed.</p>
</li>
<li>
<p>If you notice that there are predefined colors, paddings, margins,
etc. Then adding this <code>* { all: unset }</code> at the top of your SCSS file
will disable that. This should be done to disable the theming configurations that
come with your existing GTK theme.</p>
</li>
<li>
<p>GTK Inspector is probably the most useful tool for debugging not just EWW widgets
but, GTK widgets in general. If you are stuck or, do not know what component
you want to style then open the inspector by <code>eww inspector</code> and then select the
component by clicking on pointer button then drop the pointer arrow onto any
part the EWW widget window.</p>
<p><figure><a class="lightgallery" href="./images/inspector.png" title="eww inspector" data-thumbnail="./images/inspector.png">
        <img
            
            loading="lazy"
            src="./images/inspector.png"
            srcset="./images/inspector.png, ./images/inspector.png 1.5x, ./images/inspector.png 2x"
            sizes="auto"
            alt="eww inspector">
    </a></figure></p>
</li>
<li>
<p>If these still did not solve your problem then make an
<a href="https://github.com/elkowar/eww/issues" target="_blank" rel="noopener noreferrer">issue</a>
regarding it or, ask in the <a href="https://github.com/elkowar/eww/discussions" target="_blank" rel="noopener noreferrer">discussions</a> tab.</p>
</li>
</ul>
<h2 id="tips" class="headerLink">
    <a href="#tips" class="header-mark"></a>Tips</h2><ul>
<li>
<p>If you are having difficulties implementing your own widget(s) then it might be a
great idea to look at how other people implement that and adapt + incorporate
that into your configuration. A great place to look for those would be
<a href="https://github.com/druskus20/eugh" target="_blank" rel="noopener noreferrer">eugh</a>, <a href="https://github.com/elkowar/eww/tree/master/examples/eww-bar" target="_blank" rel="noopener noreferrer">eww-bar</a>
and <a href="https://gist.github.com/dharmx" target="_blank" rel="noopener noreferrer">my gists</a>.</p>
</li>
<li>
<p>Commenting your code is always a good idea as, it will serve as a guide if you
have forgotten what a specific part of code does.</p>
</li>
<li>
<p>I initially planned to do this but, decided not to as it would be too
much. Anyhow, the idea is to separate and segregate specific part of
your yuck and SCSS code into separate files. Like putting <code>powermenu_layout</code> and
all the modules in different files. Or, just put every module in separate files.
You may use <code>(include &quot;./path/to/file.yuck&quot;)</code> for importing yuck files and
<code>@import &quot;./path/to/file.scss&quot;</code> for importing SCSS files.</p>
</li>
<li>
<p>It is also a good idea to separate <code>*.yuck</code>, <code>*.scss</code> and script files into
separate folders (Ahem! Directories. Pardon my French).</p>
</li>
<li>
<p>Additionally there are sub-options in <code>eww</code> as well. Note that, this is not
specified explicitly in the docs.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt" id="hl-25-1"><a class="lnlinks" href="#hl-25-1">1</a>
</span><span class="lnt" id="hl-25-2"><a class="lnlinks" href="#hl-25-2">2</a>
</span><span class="lnt" id="hl-25-3"><a class="lnlinks" href="#hl-25-3">3</a>
</span><span class="lnt" id="hl-25-4"><a class="lnlinks" href="#hl-25-4">4</a>
</span><span class="lnt" id="hl-25-5"><a class="lnlinks" href="#hl-25-5">5</a>
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">eww open --toggle window
</span></span><span class="line"><span class="cl">eww open --help
</span></span><span class="line"><span class="cl">eww state --help
</span></span><span class="line"><span class="cl">eww --config ~/path/to/eww2 open window
</span></span><span class="line"><span class="cl">eww --config ~/path/to/eww2 open --toggle window
</span></span></code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h2 id="showcase" class="headerLink">
    <a href="#showcase" class="header-mark"></a>Showcase</h2><p>Behold! Feast your eyes! 🤩</p>
<p><figure><a class="lightgallery" href="./images/light.png" title="showcase light" data-thumbnail="./images/light.png">
        <img
            
            loading="lazy"
            src="./images/light.png"
            srcset="./images/light.png, ./images/light.png 1.5x, ./images/light.png 2x"
            sizes="auto"
            alt="showcase light">
    </a></figure></p>
<p><figure><a class="lightgallery" href="./images/featured-image.png" title="showcase dark" data-thumbnail="./images/featured-image.png">
        <img
            
            loading="lazy"
            src="./images/featured-image.png"
            srcset="./images/featured-image.png, ./images/featured-image.png 1.5x, ./images/featured-image.png 2x"
            sizes="auto"
            alt="showcase dark">
    </a></figure></p>
<h2 id="projects-that-use-eww" class="headerLink">
    <a href="#projects-that-use-eww" class="header-mark"></a>Projects That Use EWW</h2><ul>
<li><a href="https://github.com/Saimoomedits/eww-widgets" target="_blank" rel="noopener noreferrer">eww-widgets</a> by <span class="h-card person-mention"><a href="https://github.com/Saimoomedits" class="u-url url"><i class="far fa-user-circle" aria-hidden="true"></i>&#8201;<span class="p-name fn">Saimoomedits</span></a></span>
</li>
<li><a href="https://github.com/Battlesquid/dotfiles" target="_blank" rel="noopener noreferrer">dotfiles</a> by <span class="h-card person-mention"><a href="https://github.com/Battlesquid" class="u-url url"><i class="far fa-user-circle" aria-hidden="true"></i>&#8201;<span class="p-name fn">Battlesquid</span></a></span>
</li>
<li><a href="https://github.com/elkowar/eww/tree/master/examples" target="_blank" rel="noopener noreferrer">eww-bar</a> by <span class="h-card person-mention"><a href="https://github.com/elkowar" class="u-url url"><i class="far fa-user-circle" aria-hidden="true"></i>&#8201;<span class="p-name fn">elkowar</span></a></span>
</li>
<li><a href="https://github.com/iSparsh/gross" target="_blank" rel="noopener noreferrer">gross</a> by <span class="h-card person-mention"><a href="https://github.com/iSparsh" class="u-url url"><i class="far fa-user-circle" aria-hidden="true"></i>&#8201;<span class="p-name fn">iSparsh</span></a></span>
</li>
<li><a href="https://github.com/Syndrizzle/hotfiles" target="_blank" rel="noopener noreferrer">hotfiles</a> by <span class="h-card person-mention"><a href="https://github.com/Syndrizzle" class="u-url url"><i class="far fa-user-circle" aria-hidden="true"></i>&#8201;<span class="p-name fn">Syndrizzle</span></a></span>
</li>
<li><a href="https://github.com/janleigh/dotfiles" target="_blank" rel="noopener noreferrer">dotfiles</a> by <span class="h-card person-mention"><a href="https://github.com/janleigh" class="u-url url"><i class="far fa-user-circle" aria-hidden="true"></i>&#8201;<span class="p-name fn">janleigh</span></a></span>
</li>
<li><a href="https://github.com/dharmx/vile" target="_blank" rel="noopener noreferrer">vile</a> by <span class="h-card person-mention"><a href="https://github.com/dharmx" class="u-url url"><i class="far fa-user-circle" aria-hidden="true"></i>&#8201;<span class="p-name fn">dharmx</span></a></span>
</li>
<li><a href="https://github.com/AlphaTechnolog/dotfiles-v2" target="_blank" rel="noopener noreferrer">dotfiles-v2</a> by <span class="h-card person-mention"><a href="https://github.com/AlphaTechnolog" class="u-url url"><i class="far fa-user-circle" aria-hidden="true"></i>&#8201;<span class="p-name fn">AlphaTechnolog</span></a></span>
</li>
<li><a href="https://github.com/siduck/dotfiles" target="_blank" rel="noopener noreferrer">dotfiles</a> by <span class="h-card person-mention"><a href="https://github.com/siduck" class="u-url url"><i class="far fa-user-circle" aria-hidden="true"></i>&#8201;<span class="p-name fn">siduck</span></a></span>
</li>
<li><a href="https://github.com/rxyhn/bspdots" target="_blank" rel="noopener noreferrer">bspdots</a> by <span class="h-card person-mention"><a href="https://github.com/rxyhn" class="u-url url"><i class="far fa-user-circle" aria-hidden="true"></i>&#8201;<span class="p-name fn">rxyhn</span></a></span>
</li>
<li><a href="https://github.com/adi1090x/widgets" target="_blank" rel="noopener noreferrer">widgets</a> by <span class="h-card person-mention"><a href="https://github.com/adi1090x" class="u-url url"><i class="far fa-user-circle" aria-hidden="true"></i>&#8201;<span class="p-name fn">adi1090x</span></a></span>
</li>
</ul>
<h2 id="resouces" class="headerLink">
    <a href="#resouces" class="header-mark"></a>Resouces</h2><ul>
<li><a href="https://elkowar.github.io/eww" target="_blank" rel="noopener noreferrer">The EWW documentation website.</a></li>
<li><a href="https://github.com/dharmx/vile" target="_blank" rel="noopener noreferrer">My fairly large collection of EWW widgets.</a> by <span class="h-card person-mention"><a href="https://github.com/dharmx" class="u-url url"><i class="far fa-user-circle" aria-hidden="true"></i>&#8201;<span class="p-name fn">dharmx</span></a></span>
</li>
<li><a href="https://github.com/druskus20/eugh" target="_blank" rel="noopener noreferrer">Simple examples of various builtin widgets</a> by <span class="h-card person-mention"><a href="https://github.com/druskus20" class="u-url url"><i class="far fa-user-circle" aria-hidden="true"></i>&#8201;<span class="p-name fn">druskus20</span></a></span>
</li>
<li><a href="https://github.com/elkowar/eww/tree/master/examples" target="_blank" rel="noopener noreferrer">Example</a> by <span class="h-card person-mention"><a href="https://github.com/elkowar" class="u-url url"><i class="far fa-user-circle" aria-hidden="true"></i>&#8201;<span class="p-name fn">elkowar</span></a></span>
</li>
<li><a href="https://github.com/iSparsh/gross" target="_blank" rel="noopener noreferrer">Examples of some EWW widgets in action <strong>(Old)</strong></a> by <span class="h-card person-mention"><a href="https://github.com/iSparsh" class="u-url url"><i class="far fa-user-circle" aria-hidden="true"></i>&#8201;<span class="p-name fn">iSparsh</span></a></span>
</li>
<li><a href="https://github.com/Vermoot/dotfiles" target="_blank" rel="noopener noreferrer">Neat, clever and original EWW widgets</a> by <span class="h-card person-mention"><a href="https://github.com/Vermoot" class="u-url url"><i class="far fa-user-circle" aria-hidden="true"></i>&#8201;<span class="p-name fn">Vermoot</span></a></span>
</li>
</ul>
<h2 id="references" class="headerLink">
    <a href="#references" class="header-mark"></a>References</h2><ul>
<li><a href="https://elkowar.github.io/eww" target="_blank" rel="noopener noreferrer">https://elkowar.github.io/eww</a></li>
<li><a href="https://github.com/elkowar/eww" target="_blank" rel="noopener noreferrer">https://github.com/elkowar/eww</a></li>
<li><a href="https://github.com/dharmx/vile/tree/main/src/yuck/power" target="_blank" rel="noopener noreferrer">https://github.com/dharmx/vile/tree/main/src/yuck/power</a></li>
<li><a href="https://github.com/dharmx/vile/tree/main/src/scss/power" target="_blank" rel="noopener noreferrer">https://github.com/dharmx/vile/tree/main/src/scss/power</a></li>
<li><a href="https://github.com/Vermoot/dotfiles" target="_blank" rel="noopener noreferrer">https://github.com/Vermoot/dotfiles</a></li>
</ul>
<h2 id="ending-note" class="headerLink">
    <a href="#ending-note" class="header-mark"></a>Ending Note</h2><p>Let me know if you have any article requests involving EWW.
And, I hope you enjoyed building this. Cheers 🍻.</p>
]]></description></item></channel></rss>