The Terminal Yard - vim

Custom Desktop Web Apps with Hyprland

2026-02-17T00:00:00+00:00

The reason I use Linux is because I like to configure my system to be exactly how I want it.

This is why I went with Arch Linux</a> (btw). Arch may not be for everyone but when you are picky like me when it comes to what software goes on your machine, it's simply the perfect choice.

On top of that, I use Hyprland</a> as my tiling window manager</a> (it's an hybrid window manager to be more accurate, but you get the idea).

While I recognize the mouse to be a truly magnificent invention</a>, the less I have to use it, the better I feel. I am a keyboard maximalist, I don't want my hands to ever leave the keyboard so a tiling window manager fits my workflow the best.

Predefined Workspaces

FreeTube</a></li>
Web browsers (Librewolf</a> / Chromium</a>, qutebrowser</a>)</li>
Terminal (kitty</a> / ghostty</a>)</li>
Email client</li>
Chat apps (Discord, Signal, Teams, etc.)</li>
Office (OnlyOffice</a> / LibreOffice</a>)</li>
Video games & graphics (Gimp</a>)</li>
Remote desktop (Remmina</a>) & Virtual Machines</li>
Misc & Tools (qBittorent</a>, Spotify, etc.)</li>
Random stuff (I usually bind it to my second monitor)</li> </ol>
The great thing about this is that I don't have to think about where my windows are. Switching to a specific application is built into my muscle memory. If I want to search on the web, I press `SUPER+2</kbd>. Need to read an email? SUPER+4</kbd>, etc. It's fast, there is no mental overhead, I love it.`
When you spend 8+ hours a day on a computer, the mental fatigue of having to `Alt+Tab</kbd> and manually search through your windows really builds up.`
The Workspace config is available on GitHub</a>.
Creating custom Desktop Web apps #</a> </h1>
OK, now you have a basic idea of what my workflow looks like. So why do I need desktop web apps? And by that, I mean: Web apps that I can launch like any other application.
Well, as you know, I like to bind applications to workspaces. But sometimes, I have to use applications or services that are not available on desktop. I could simply stick to using them in my web browser, and, that's what I do for some of them. But, when I find myself using a web app a lot, I want to have it available on my desktop directly.
To create the desktop web app, we need three things:

a desktop entry</li>
an executable script</li>
some Hyprland rules</li> </ul>
In this article, I will walk you through the process of creating a desktop web app for Outlook.
Desktop entry
First, we need to create a custom desktop entry</a> (`*.desktop</code> files):`
1[Desktop Entry] 2Version=1.0 3Name=Outlook 4Comment=Read your emails 5GenericName=Work Email Client 6Keywords=Work;Email;Outlook 7Exec=/home/coko/.config/local/bin-sh/work/chromium-outlook.sh 8Icon=outlook 9Terminal=false 10Type=Application 11StartupNotify=true 12Categories=Network;Email;</code></pre> The above snippet is a desktop file that I placed in my ~/.config/local/share/applications/</code> directory.
`When I press SUPER+R</kbd>, it starts my` `application launcher</a> which automatically picks up this entry and makes it available to me. I use rofi</a> as my application launcher but if you use a different one, it should behave similarly.`
`You can specify a lot of things in a desktop entry, but what we want to focus on is the following:`
Exec=/home/coko/.config/local/bin-sh/work/chromium-outlook.sh</code></pre> The Exec</code> value is the action that will be triggered when you launch the application. In this case, it is a custom bash script named chromium-outlook.sh</code>. Never heard of bash? Learn it in Y minutes!</a> Executable script#</a> </h2> Now, let's look into the bash script from the desktop entry: 1#!/usr/bin/env bash 2 3DATA_DIR="$XDG_CONFIG_HOME/chromium-work-outlook" 4chromium-nerd-app.sh "https://outlook.office.com" "$DATA_DIR"</code></pre> It's tiny, only two lines without the Shebang</a>. First, I define the data directory for Chromium</a>, which is the web browser I use for my custom desktop web apps. This is mostly for isolation purposes, the actual line we want to have a look at is line 4: chromium-nerd-app.sh "https://outlook.office.com" "$DATA_DIR"</code></pre> It calls another script (chromium-nerd-app.sh</code></a>) with two arguments (a URL and the data dir we defined). Let's checkout this new bash script: 1#!/usr/bin/env bash 2 3APP_URL="$1" 4[[ -z "$APP_URL" ]] && echo "APP_NAME required!" && exit 1 5 6DATA_DIR="$2" 7[[ -z "$DATA_DIR" ]] && echo "DATA_DIR required!" && exit 1 8 9VIMIUM_EXT_ID='dbepggeogbaibhgnhhndojpepiihcmeb' 10VIMIUM_VERSION='2.3.1_0' 11CHROMIUM_EXT_PATH="$XDG_CONFIG_HOME/chromium/Default/Extensions" 12VIMIUM_EXT_PATH="$CHROMIUM_EXT_PATH/$VIMIUM_EXT_ID/$VIMIUM_VERSION" 13 14/usr/bin/chromium \ 15 --app="$APP_URL" \ 16 --disable-features=WaylandWpColorManagerV1 \ 17 --user-data-dir="$DATA_DIR" \ 18 --load-extension="$VIMIUM_EXT_PATH"</code></pre> Okay, this one looks a little more daunting, but it's not that complicated actually. The first few lines simply ensure that the script is called with two arguments (the app URL and the data directory). Let's skip ahead to lines 9-12: VIMIUM_EXT_ID='dbepggeogbaibhgnhhndojpepiihcmeb' VIMIUM_VERSION='2.3.1_0' CHROMIUM_EXT_PATH="$XDG_CONFIG_HOME/chromium/Default/Extensions" VIMIUM_EXT_PATH="$CHROMIUM_EXT_PATH/$VIMIUM_EXT_ID/$VIMIUM_VERSION"</code></pre> This part is optional but it's my favorite part. If you are familiar with Vimium</a>, you already know what's coming. But, basically: Vimium is a browser extension that brings vim keybindings in your web browser. Some think it's overkill, I cannot live without it. These four lines define the path to the Vimium extension on my system. The same could have been achieved with a single line but this is more readable. Then, finally, the heart of the script (where the magic happens ✨): 1/usr/bin/chromium \ 2 --app="$APP_URL" \ 3 --disable-features=WaylandWpColorManagerV1 \ 4 --user-data-dir="$DATA_DIR" \ 5 --load-extension="$VIMIUM_EXT_PATH"</code></pre> Let's break it down line by line: Launch the Chromium binary: /usr/bin/chromium</code></li> --app=<URL></code> tells Chromium to start in a application mode, it will hide menu bars, disable extensions, etc.</li> --disable-features=WaylandWpColorManagerV1</code> is for fixing some color issues on Wayland (to be honest, I don't remember why it's there but there must be a reason)</li> --user-data-dir="$DATA_DIR"</code> tells Chromium to use the data directory passed as second argument $2</code></li> --load-extension="$VIMIUM_EXT_PATH"</code> instructs Chromium to specifically load the Vimium extension</li> </ol> And that's it! With this, whenever I launch Outlook from my app launcher, it will open a custom instance of Chromium with Outlook opened. It looks and feels like a desktop app but it is actually a disguised Chromium browser. We are almost done, but there is still one important thing left: binding the app to a Hyprland workspace. Hyprland rules#</a> </h2> If you remember my workspace setup, I want my email client to open on workspace 4. To do this, I need to define some window rules</a>. Since my config is quite big, I have decided to split it into multiple files and I keep workspace-related window rules in window_rules_workspace.conf</code></a>: 1windowrule = workspace 4, match:class ^(chrome-outlook.office.com-Default)$ 2windowrule = match:class ^(chrome-outlook.office.com-Default)$, tile on</code></pre> Hyprland configuration is rather easy to understand even if it's your first time seeing it: Assign Outlook to workspace 4</li> Force the Outlook window to be tiled instead of floating</li> </ol> In this case, the ^(chrome-outlook.office.com-Default)$</code> regex</a> matches the Outlook window. Okay, sure... But where did I find weird-looking class name? That's Hyprland's strongest suite in my opinion, it comes with a bunch of tools that expose metadata about desktop objects (windows, monitors, devices, etc.). Here, the command I use to get the class name for Outlook is the following: hyprctl clients -j | jq '.[].class'</code></pre> More nonsense commands 😡 !!?? Calm down, I will explain everything: hyprctl clients -j</code>: hyprctl</code> is the main Hyprland command line tool to query desktop objects</li> clients</code> is a subcommand of hyprctl</code> that uses the Hyprland API to find the list of clients (opened windows/applications)</li> -j</code> tells Hyprland to format the output as JSON</a> (that's why I love Hyprland)</li> </ul> </li> jq '.[].class'</code> relies on jq</a> to process the JSON output from Hyprland and format it to only show individual class names.</li> </ul> When I run this on my system, this is what I get: 1$ hyprctl clients -j | jq '.[].class' 2"librewolf" 3"chrome-outlook.office.com-Default" 4"kitty"</code></pre> Spot anything familiar? I don't know about you but the second class chrome-outlook.office.com__-Default</code> sure sounds like it could be our Outlook window. And that's it! Now when I launch Outlook, it will always be opened on workspace 4. Easy enough, right? Conclusion#</a> </h1> It may seem like I have to do a lot of work to turn a simple website into a desktop application. But, in reality, all I have to do is create the desktop entry and the Hyprland rule. And creating these takes one or two minutes. Most of the heavy lifting is performed by the chromium-nerd-app.sh</code> script. I hope you liked this article and learned some neat things. I had a lot of fun writing it! All the configuration and scripts shown here can be found on my GitHub</a>: Hyprland files</a></li> chromium-nerd-app.sh script</a></li> </ul> If you have any question or feedback, feel free to email me at contact@coko7.fr</a>. Please consider sharing this around if you found it helpful (or even if it was not helpful). Alright, I am done with my rambling. Bye bye 👋 :wqa</code>

Vim Keymap For Markdown Links 2026-02-05T00:00:00+00:00 I work with Markdown</a> a lot. I use it for note-taking, documenting projects, creating personal wikis (and a world-building wiki!), etc. And most recently, I have started this blog so I use it even more than before. Whenever I edit text in Markdown, I often find myself adding links here and there. Since I also use Neovim</a> as my primary text/code editor, I can easily add links to text elements using minimal vim motions. It works well and it literally takes less than a second to do that. But when I have to add dozens of links, it starts feeling a bit repetitive. The great thing about Vim/Neovim: You can configure your editor to do EXACTLY what you want. So, I thought: "why not create a custom keymap for that?" What I wanted: Copy some URL to my system clipboard</li> Select some text in Neovim</li> Type <leader>l</kbd></li> Have Neovim convert the selection to a markdown link [text](link)</code>, where: text</code> is the selected text</li> link</code> is the URL I copied to my system clipboard (+</code> register</a> in Vim)</li> </ul> </li> </ol> The keymap#</a> </h1> Here's the keymap I have added to my Neovim config: 1vim.keymap.set( 2 "x", 3 "<leader>l", 4 "<Esc>`<i[<Esc>`>la](<C-r>+)<Esc>", 5 { desc = "Apply markdown [L]ink on current selection" } 6)</code></pre> To define a new keymap, we call vim.keymap.set(...)</code> and give it some arguments: The first argument "x"</code> tells Neovim to only enable the keymap in Visual mode</a></li> The second argument "<leader>l"</code> is the actual keybinding. In this case, <leader></code> corresponds to the Leader</a> key which I set to Space</kbd> in my config. So, when I type Space+l</kbd> it will trigger this keymap</li> The third argument is the sequence of motions to execute when the keymap is invoked</li> Finally, we define a description for the keymap</li> </ul> The thing we want to have a look at is the sequence of motions: <Esc>`<i[<Esc>`>la](<C-r>+)<Esc></code></pre> So, let's break it down: First, we use <Esc></code> to switch to Normal mode</a></li> Then, we move the cursor to the start of the previous visual selection with `<</code></li> After that, i[<Esc></code> lets us switch to Insert mode</a>, put an opening square bracket '[', before going back to Normal mode once again with Escape</kbd></li> Then, this time, we go to the end of the last visual selection with `></code></li> We use l</code> to move the cursor one unit to the right This is needed because the opening square bracket we inserted earlier has shifted the last visual selection. If we did not do that, we would be one character off</li> </ul> </li> We proceed to append the ']' and '(' characters with a](</code></li> While still in Insert mode, we use <C-r>+</code> to paste the content of the +</code> register, which is the system clipboard (where our URL is stored) :help c_<C-R></code></a> to learn more</li> </ul> </li> Finally, we insert the closing parenthesis and go back to Normal mode with )<Esc></code></li> </ul> That was not so bad, was it? Complementary keymap for Normal mode#</a> </h1> The previous keymap works great for any visual selection. It allows you to select some text and apply a markdown link to it. But what if you only want to add a link to a single word? Do we really want to bother with a visual selection for that? I don't think so. Time to create a second keymap: 1vim.keymap.set( 2 "n", 3 "<leader>l", 4 '"9ciw[]<Esc>"9Pf]a(<C-r>+)<Esc>', 5 { desc = "Apply markdown [L]ink on current word" } 6)</code></pre> It looks very similar to our first keymap with a few tweaks here and there. The first difference we notice is the first argument "n"</code> which tells Neovim to enable this keymap in Normal mode only. The key binding has not changed, we still want to use <leader>l</code>. This means both keymaps use the same key binding, the only difference is the Vim mode you are in. This is what determines which keymap to call. Okay, let's go over the motions now: "9ciw[]<Esc>"9Pf]a(<C-r>+)<Esc></code></pre> If you pay a closer look to the last part, you will notice that it is the same as before: a](<C-r>+)<Esc></code></pre> So the only motions that differ are the ones prior to inserting the closing square bracket ']': "9ciw[]<Esc>"9Pf]</code></pre> New motions to break down. Exciting! Let's start with "9ciw</code>: "9</code> tells Neovim we want to operate against the 9</code> register. There is no reason for using this specific register, you may use another one if you prefer. I picked this one arbitrarily. Just make sure not to pick register +</code> because our URL is stored in there</li> Then, ciw</code> will replace inside the current word and store the deleted text to register 9</code></li> </ul> </li> The previous motion put us in Insert mode, we can now insert square brackets []</code> and go back to Normal mode with Escape</kbd></li> The awaited return of register 9</code>! We use "9P</code> to paste our deleted word to the left of the cursor Had we use p</code> instead of P</code>, and the text would have been pasted outside of the square brackets (which is not we want!)</li> </ul> </li> Finally, we move the cursor on the next closing square bracket with f]</code></li> Then, it's just the last part which is exactly the same as before: a](<C-r>+)<Esc></code></li> </ul> So now, if we move the cursor on any word in Normal mode and hit <leader>l</code>, it will automatically format it as a Markdown link. Pretty cool! Conclusion#</a> </h1> Okay, this might seem like a lot just to save a few milliseconds here and there. Was it really worth it? YES! (I have used <leader>l</code> a lot to write this article already) Maybe it will take a lot of time before this keybind actually pays off. But overall, I am having so much fun just trying to solve these kind of problems in Neovim. This is what makes using Neovim so enjoyable to me. I think having fun is the best remedy to avoid burnouts. For me, I get my fun from using Neovim and the terminal, customizing my environment to be exactly how I want it. It's probably different for you but I hope you get your fun from somewhere else at least. I hope I made you learn some neat Vim tricks! If you liked this article, please consider sharing it around to any other vim addicts. If you want to take a peek at my Neovim config, I keep it on GitHub: coko7/neovim-config</a> Feel free to check out my other articles too! Until next time 👋 :wqa</code>