commit 814043d051ba6f8b42f4d91246032a8f0f4801c6
parent 801a7f8fe9ec44ace426e5be716017f8cef0cbb3
Author: Martin J. Klöckner <64109770+mjkloeckner@users.noreply.github.com>
Date: Fri, 14 Oct 2022 01:10:33 -0300
Merge pull request #1 from mjkloeckner/syntax-highlight
syntax-highlight script (binary), md folder, webp exclude
Diffstat:
23 files changed, 753 insertions(+), 218 deletions(-)
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@ logos
fonts/Futura
deploy.sh
rss.xml
+blog
diff --git a/article-title-with-icon.html b/article-title-with-icon.html
@@ -0,0 +1,6 @@
+<div id="article-title-with-icon">
+ <div id="article-icon">
+ <img src="$logo-src$" title="$logo-title$" alt="$logo-alt$">
+ </div>
+ <h1 id="article-title">$article-title$</h1>
+</div>
diff --git a/blog/dwm-config/dwm-config.html b/blog/dwm-config/dwm-config.html
@@ -1,22 +1,17 @@
<!DOCTYPE html>
<html lang="en">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
+ <meta charset="utf-8">
+ <meta name="generator" content="Shell script">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <meta name="article-author" content="$article-author$">
<meta name="article-date" content="23-Oct-2021">
<meta name="article-title" content="dwm - A tiling window manager configuration">
<title>dwm - A tiling window manager configuration | Martin Klöckner's Webpage</title>
-
- <!-- <link rel="preload" href="/fonts/Futura/FuturaBT-Medium.woff" as="font" type="font/woff" crossorigin="anonymous"> -->
- <link rel="preload" href="/fonts/Futura/FuturaBT-Medium.woff2" as="font" type="font/woff2" crossorigin="anonymous">
- <!-- <link rel="preload" href="/fonts/Futura/FuturaBT-Medium.ttf" as="font" type="font/ttf" crossorigin="anonymous"> -->
-
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-
<link rel='stylesheet' type='text/css' href="/css/style.css">
<link rel="icon" href="/favicon.png">
- <meta charset="utf-8"/>
</head>
<body>
@@ -25,95 +20,171 @@
<article>
<link rel='stylesheet' type='text/css' href="/css/article_style.css">
- <h1 id="article-title">dwm - A tiling window manager configuration</h1>
+<h1 id=article-title>dwm - A tiling window manager configuration</h1><p class="article-date">23-Oct-2021</p>
+
+<p>A window manager is a software that can manage the layout and appearance
+of every window spawned in your desktop, most people confuse them with
+desktop enviroments, which isn’t the same since a desktop enviroment is
+more of an ecosystem, they come with a more ‘complete’ set of tools,
+like a basic web browser, a terminal emulator or calculator, an example
+of desktop enviroment would be gnome, xfce or kde plasma; instead a
+window manager is only the program that manages the windows spawned,
+although there are window managers that come with a little more, like
+docks or taskbars (openbox for example).</p>
+
+<p>In my case I use dwm, which is a window manager written in C developed
+by suckless software. The most relevant thing of this window manager is
+that out of the box it comes with the most basic functionallity, and if
+you want to extend it you need to patch it.</p>
+
+<p>By default dwm comes with 9 workspaces, in which you can open as many
+windows as you please; to spawn a new window for example a web browser
+you need to assign it a keybinding or use an application launcher like
+<a href="https://tools.suckless.org/dmenu/">dmenu</a></p>
+
+<p><a href="screenshot.png" title="Screenshot of my dwm build"><img src="screenshot.jpeg" alt="Screenshot" /></a></p>
+
+<h2>Installing dwm</h2>
+
+<h3>Requisites</h3>
+
+<ul>
+<li> GNU/Linux or BSD based operating system</li>
+<li> A C library and a C compiler</li>
+<li> make utility installed</li>
+<li> X server installed</li>
+<li> dwm source code, you can clone the repository or download as a tar file at the web</li>
+</ul>
+
+<p>As you can see above you can only install dwm on GNU/Linux or BSD based
+distros, unfortunally dwm is not available for Windows users but I’m
+sure there is an alternative.</p>
+
+<h3>Installation</h3>
+
+<p>In order to install dwm you can visit the web of the creators at
+<a href="https://dwm.suckless.org/">suckless.org/dwm</a>, where you can download
+the source code as a tar file, or clone the repository.</p>
+
+<p>After you obtain the source code you need to navigate to the root folder
+of the source code and execute the following command</p>
+
+<pre><code class="language-console">$ sudo make install
+</code></pre>
+
+<p>after that you can log out of you user account, if you use a display
+manager you can select dwm as window manager and log back in, if you
+dont use a display manager you need to edit your .xinitrc file located
+at you home folder so that when you start X dwm gets launched too, you
+do this by adding `exec dwm` to the end of the .xinitrc
+file, its important that you add it to the end of the file.</p>
+
+<pre><code class="language-console">$ cat $HOME/.xinitrc
+exec dwm
+</code></pre>
+
+<p>Then you can start the X server by executing `startx` on a tty and it
+should open dwm without any problems.</p>
+
+<h2>How do you configure dwm?</h2>
+
+<p>Basically you configure it by editing its source code, inside the root
+folder of the project there is a C header file named
+<a href="https://github.com/klewer-martin/dotfiles/blob/master/.config/dwm/config.def.h">config.def.h</a>
+which if you open with a text editor you can see that there is some C
+code that you can edit, for example the line “static const int topbar”
+defines a variable named topbar which you can set to 1 or 0, to select
+if the status bar should spawn in the top or the bottom of the screen.
+After every change you make to the source code you need to copy
+config.def.h to config.h and then recompile dwm</p>
+
+<h3>Show information on the status bar</h3>
+
+<p>dwm by default won’t show any information on the status bar, this is
+done by using the xsetroot utility, which sets the WM_NAME enviroment
+variable that dwm uses, lets assume you want to set the clock and date
+on the status bar, well you could execute the following command</p>
+
+<pre><code class="language-console">$ xsetroot -iname $(date)
+</code></pre>
+
+<p>and all the output of the command `date` would be printed on the status bar, this
+makes dwm status bar highly scriptable, in fact there are a ton of status
+bar implementations, the one that I use is called
+<a href="https://github.com/torrinfail/dwmblocks">dwmblocks</a> and its also
+written in C and the configuration its pretty much the same as dwm, in
+order to get information you need to have scripts that prints the
+desired data to stdout, then you can include it on the config.h of
+dwmblocks by having them on a folder which is included in the $PATH
+variable of your user.</p>
+
+<h3>Getting emoji support on dwm</h3>
+
+<p>dwm by default doesn’t come with emoji support, if you want to render
+an emoji in the status bar its going to either show it as a box or in
+the worst case crash, so in order to get emoji support first you need to
+get a font with emojis, I’m using <a href="https://www.joypixels.com/">JoyPixels®
+font</a> you can also use
+<a href="https://fonts.google.com/noto">Google’s noto font</a>, or any other font
+that comes with emoji support. Then open dwm configuration file and
+append to the fonts array the name of the font you want,
+in my case it’s JoyPixels®.</p>
+
+<pre><code class="language-c">static const char *fonts[] = { "Source Code Pro:style=Regular:size=9",
+ "JoyPixels:style=Regular:size=8",
+ "DejaVu Sans" };
+</code></pre>
+
+<p>After you setup the font you need to remove or comment a chunk of code
+from drw.c, a file located in the root of the folder where dwm source
+code resides, between lines 136-150 there is a function named IsCol, you
+need to remove it or comment it.</p>
+
+<p>Finally you can recompile dwm and you will get emoji support. Sometimes
+even though you made all this procedure you still get boxes insted of
+the proper emoji, I solved this by adding another font name in the
+fonts array, like a fallback font.</p>
+
+<h3>Patches in dwm</h3>
+
+<p>Since dwm is a simple program than doesn’t include much features, if
+you want to extend it, for example by adding a
+<a href="https://dwm.suckless.org/patches/systray/">systray</a> to the status bar,
+you need to patch dwm. To do this first you need to download the patch
+from <a href="https://dwm.suckless.org/patches/">suckless.org/patches</a>, then
+make sure you got it ‘patch’ installed, although I think it comes with
+most linux distributions by default nowdays.</p>
+
+<pre><code class="language-console">$ patch -p1 < <name of the file>
+</code></pre>
+
+<p>If you never patched dwm before then probably no errors would be
+reportjd, but if you already have applied a ton of patches then probably
+you would get a HUNK ## FAILED, in this case you need to get your hands
+dirty, and manually patch all the files that failed, you do this by
+opening the files with .rej extension (short for rejected), and the
+corresponding file to be patched, for example dwm.c and dwm.c.rej, and
+then you add all the chunks of code from the rejected file into the
+corresponding place in the non rejected file, you know where you should
+put the chunks of code because in the rej file you can see at the start
+of every chunk there is a ‘@@’ followed by a number of line; also
+lines starting with plus means add, and minus means delete, if I’m not
+clear you should google how to use diff and patch to modify a file.</p>
+
+<h2>Useful links</h2>
+
+<ul>
+<li><a href="https://en.wikipedia.org/wiki/Window_manager">What is a window manager?</a></li>
+<li>Make sure to check the <a href="https://suckless.org/">suckless webiste</a></li>
+<li><a href="https://dwm.suckless.org/">suckless dwm website</a></li>
+<li><a href="https://www.x.org/releases/X11R7.7/doc/man/man1/Xserver.1.xhtml">X server man page</a></li>
+<li><a href="https://man7.org/linux/man-pages/man1/patch.1.html">patch man page</a></li>
+</ul>
- <p class="article-date">23-Oct-2021</p>
<script type="text/javascript" src="/js/article-date.js"></script>
-
- <p>A window manager is a software that can manage the layout and appearance of every window spawned in your desktop, most people confuse them with desktop enviroments, which isn't the same since a desktop enviroment is more of an ecosystem, they come with a more 'complete' set of tools, like a basic web browser, a terminal emulator or calculator, an example of desktop enviroment would be gnome, xfce or kde plasma; instead a window manager is only the program that manages the windows spawned, although there are window managers that come with a little more, like docks or taskbars (openbox for example).</p>
-
- <p> In my case I use dwm, which is a window manager written in C developed by suckless software. The most relevant thing of this window manager is that out of the box it comes with the most basic functionallity, and if you want to extend it you need to patch it.</p>
-
- <p>By default dwm comes with 9 workspaces, in which you can open as many windows as you please; to spawn a new window for example a web browser you need to assign it a keybinding or use an application launcher like <a href="https://tools.suckless.org/dmenu/">dmenu</a></p>
-
- <!-- <p>but you can add as much as you want, for example I added a 10th workspace and mapped to the '0' key, which by default turn on a mode that shows all the opened windows in the current workspace, a feature that I never used.</p> -->
-
- <div id="article-screenshot">
- <a href="/blog/dwm-config/screenshot.png"><img style="padding: 0em; width: 100%;" class="screenshot" max-width="40em" src="screenshot.jpeg" title="Screenshot of my dwm build" alt="Screenshot"></a>
- <!-- <img style="padding: 0em; width: 100%;" class="screenshot" max-width=40em src="scrot.png" title="Screenshot of my dwm build" alt="Screenshot"> -->
- </div>
-
- <h2>Installing dwm</h2>
-
- <h3>Requisites</h3>
- <ul>
- <li>GNU/Linux or BSD based operating system</li>
- <li>A C library and a C compiler</li>
- <li>make utility installed</li>
- <li>X server installed</li>
- <li>dwm source code, you can clone the repository or download as a tar file at the web</li>
- </ul>
-
- <p>As you can see above you can only install dwm on GNU/Linux or BSD based distros, unfortunally dwm is not available for Windows users but I'm sure there is an alternative.</p>
-
- <h3>Installation</h3>
- <p>In order to install dwm you can visit the web of the creators at <a href="https://dwm.suckless.org/">suckless.org/dwm</a>, where you can download the source code as a tar file, or clone the repository.</p>
- <p>After you obtain the source code you need to navigate to the root folder of the source code and execute the following command</p>
-
- <pre><code>$ <em id=command><u>sudo</u> make</em> install</code></pre>
-
- <p>after that you can log out of you user account, if you use a display manager you can select dwm as window manager and log back in, if you dont use a display manager you need to edit your .xinitrc file located at you home folder so that when you start X dwm gets launched too, you do this by adding `exec dwm` to <u>the end</u> of the .xinitrc file, its important that you add it to the end of the file.</p>
-
- <pre><code>$ <em id=command>cat</em> $HOME/.xinitrc
-...
-exec dwm </code></pre>
-
- <p>Then you can start the X server by executing `startx` on a tty and it should open dwm without any problems.</p>
-
- <h2>How do you configure dwm?</h2>
-
- <p>Basically you configure it by editing its source code, inside the root folder of the project there is a C header file named <a href="https://github.com/klewer-martin/dotfiles/blob/master/.config/dwm/config.def.h">config.def.h</a> which if you open with a text editor you can see that there is some C code that you can edit, for example the line "static const int topbar" defines a variable named topbar which you can set to 1 or 0, to select if the status bar should spawn in the top or the bottom of the screen. After every change you make to the source code you need to copy config.def.h to config.h and then <u>recompile dwm</u></p>
-
- <h3>Show information on the status bar</h3>
-
- <p>dwm by default won't show any information on the status bar, this is done by using the xsetroot utility, which sets the WM_NAME enviroment variable that dwm uses, lets assume you want to set the clock and date on the status bar, well you could execute the following command</p>
-
- <pre><code>$ <em id=command>xsetroot</em> -iname <em id=command_sym>$(</em><em id=command>date</em><em id=command_sym>)</em></code></pre>
-
- <p>and all the output of 'date' would be printed on the status bar, this makes dwm status bar highly scriptable, in fact the are a ton of status bar implementation, the one that I use is called <a href="https://github.com/torrinfail/dwmblocks">dwmblocks</a> and its also written in C and the configuration its pretty much the same as dwm, in order to get information you need to have scripts that prints the desired data to stdout, then you can include it on the config.h of dwmblocks by having them on a folder which is included in the $PATH variable of your user.</p>
-
- <h3>Getting emoji support on dwm</h3>
-
- <p>dwm by default doesn't come with emoji support, if you want to render an emoji in the status bar its going to either show it as a box or in the worst case crash, so in order to get emoji support first you need to get a font with <u>emojis</u>, I'm using <a href="https://www.joypixels.com/"JoyPixel>JoyPixels® font</a> you can also use <a href="https://fonts.google.com/noto">Google's noto font</a>, or any other font that comes with emoji support. Then open dwm configuration file and append to the <u>fonts</u> array the name of the font you want, in my case it's JoyPixels®.</p>
-
- <pre><code>$ <em id=command>cat</em> config.def.h
-...
-static const char *fonts[] = { "Source Code Pro:style=Regular:size=9", "JoyPixels:style=Regular:size=8:antialias=true:autohint=true", "DejaVu Sans" };
-...</code></pre>
-
- <p>After you setup the font you need to remove or comment a chunk of code from drw.c, a file located in the root of the folder where dwm source code resides, between lines 136-150 there is a function named IsCol, you need to remove it or comment it.</p>
-
-
- <p>Finally you can recompile dwm and you will get emoji support. Sometimes even though you made all this procedure you still get boxes insted of the proper emoji, I solved this by adding another font name in the <u>fonts</u> array, like a fallback font.</p>
- <h3><u>Patches in dwm</u></h3>
-
- <p>Since dwm is a simple program than doesn't include much features, if you want to extend it, for example by adding a <a href="https://dwm.suckless.org/patches/systray/">systray</a> to the status bar, you need to patch dwm. To do this first you need to download the patch from <a href="https://dwm.suckless.org/patches/">suckless.org/patches</a>, then make sure you got it 'patch' installed, although I think it comes with most linux distributions by default nowdays.</p>
-
- <pre><code>$ <em id=command>patch</em> -p1 <em id=command_red><</em> <u><name of the file></u></code></pre>
-
- <p>If you never patched dwm before then probably no errors would be reportjd, but if you already have applied a ton of patches then probably you would get a HUNK ## FAILED, in this case you need to get your hands dirty, and manually patch all the files that failed, you do this by opening the files with .rej extension (short for rejected), and the corresponding file to be patched, for example dwm.c and dwm.c.rej, and then you add all the chunks of code from the rejected file into the corresponding place in the non rejected file, you know where you should put the chunks of code because in the rej file you can see at the start of every chunk there is a '@@' followed by a number of line; also lines starting with plus means add, and minus means delete, if i'm not clear you should google how to use diff and patch to modify a file.</p>
-
- <h2>Useful links</h2>
- <ul>
- <li><a href="https://en.wikipedia.org/wiki/Window_manager">What is a window manager?</a></li>
- <li>Make sure to check the <a href="https://suckless.org/">suckless webiste</a></li>
- <li><a target="_blank" href="https://dwm.suckless.org/">suckless dwm website</a></li>
- <li><a target="_blank" href="https://www.x.org/releases/X11R7.7/doc/man/man1/Xserver.1.xhtml">X server man page</a></li>
- <li><a target="_blank" href="https://man7.org/linux/man-pages/man1/patch.1.html">patch man page</a></li>
- </ul>
-
<!--#include virtual="/common/end_of_article.shtml" -->
</article>
+
<!--#include virtual="/common/footer.shtml" -->
</body>
</html>
diff --git a/blog/nerdearla-2022/nerdearla-2022.html b/blog/nerdearla-2022/nerdearla-2022.html
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en">
- <head id=top>
+ <head>
<meta charset="utf-8">
<meta name="generator" content="Shell script">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -14,7 +14,7 @@
<link rel="icon" href="/favicon.png">
</head>
- <body id=top>
+ <body>
<!--#include virtual="/common/header.shtml" -->
<article>
@@ -37,14 +37,14 @@
<p>This is how I replace the variables in the template with the data aquired from the metadata contained in the files written in markdown</p>
-<pre><code>$ sed -e "s/\$article-title\\$/$title/" -e "s/\$article-date\\$/$date/" \
- -e "s/\$pagetitle\\$/$pagetitle/" -e '/\$body\$/r./body.html' \
- -e '/\$body\$/d' $template > $filename.html
+<pre><code class="language-console">$ sed -e "s/\$article-title\\$/$title/" -e "s/\$article-date\\$/$date/" \
+ -e "s/\$pagetitle\\$/$pagetitle/" -e '/\$body\$/r./body.html' \
+ -e '/\$body\$/d' $template > $filename.html
</code></pre>
<p>This is how I generate this webpage, converting it from its markdown file into html, this is a custom scripts that I made that only depends on lowdown, grep, and sed. Previously I had another script similar, which depended on pandoc, which is an alternative of lowdown but much more bloated, it depends on a ton of libraries wirtten in haskell</p>
-<pre><code>$ ./build.sh nerdearla-2022.md
+<pre><code class="language-console">$ ./build.sh nerdearla-2022.md
</code></pre>
<script type="text/javascript" src="/js/article-date.js"></script>
diff --git a/blog/sav/sav.html b/blog/sav/sav.html
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en">
- <head id=top>
+ <head>
<meta charset="utf-8">
<meta name="generator" content="Shell script">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -14,7 +14,7 @@
<link rel="icon" href="/favicon.png">
</head>
- <body id=top>
+ <body>
<!--#include virtual="/common/header.shtml" -->
<article>
diff --git a/blog/vim-config/vim-config.html b/blog/vim-config/vim-config.html
@@ -1,20 +1,15 @@
<!DOCTYPE html>
<html lang="en">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
- <meta charset="utf-8"/>
+ <meta charset="utf-8">
+ <meta name="generator" content="Shell script">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <meta name="article-author" content="$article-author$">
<meta name="article-date" content="04-Mar-2021">
<meta name="article-title" content="vim - The keyboard driven text editor">
- <title>The keyboard driven text editor | Martin Klöckner's Webpage</title>
-
- <!-- <link rel="preload" href="/fonts/Futura/FuturaBT-Medium.woff" as="font" type="font/woff" crossorigin="anonymous"> -->
- <link rel="preload" href="/fonts/Futura/FuturaBT-Medium.woff2" as="font" type="font/woff2" crossorigin="anonymous">
- <!-- <link rel="preload" href="/fonts/Futura/FuturaBT-Medium.ttf" as="font" type="font/ttf" crossorigin="anonymous"> -->
-
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-
+ <title>vim - The keyboard driven text editor | Martin Klöckner's Webpage</title>
<link rel='stylesheet' type='text/css' href="/css/style.css">
<link rel="icon" href="/favicon.png">
</head>
@@ -25,31 +20,45 @@
<article>
<link rel='stylesheet' type='text/css' href="/css/article_style.css">
- <div id="article-title-with-icon">
- <div id="article-icon">
- <img src="/blog/vim-config/vim_logo.png" title="Vim logo" alt="Vim logo">
- </div>
- <h1 id="article-title">The keyboard driven text editor</h1>
- </div>
+<p><img src="vim_logo.png" alt="Vim logo" class="article-icon" title="Vim logo" /></p>
- <p class="article-date">04-Mar-2021</p>
- <script type="text/javascript" src="/js/article-date.js"></script>
+<h1 id=article-title>The keyboard driven text editor</h1><p class="article-date">04-Mar-2021</p>
- <p>If we think for a moment about software we are going to realize that the core of every program it's just plain text, literally just words in a file that someone wrote, this webpage it's just text interpreted by your web-browser, whose also just plain text implemented by another program, some software has more complexity than others, for example the linux kernel it's estimated that has around 27.8 million lines of code, which is also just plain text</p>
+<p>If we think for a moment about software we are going to realize that the
+core of every program it’s just plain text, literally just words in a
+file that someone wrote, this webpage it’s just text interpreted by
+your web-browser, whose also just plain text implemented by another
+program, some software has more complexity than others, for example the
+linux kernel it’s estimated that has around 27.8 million lines of code,
+which is also just plain text</p>
- <p>The way we tell computers what to do it's with text, so in order to write that text we just need a text editor and this is were Vim it's known for. Vim it's just a text editor. The term Vim stands for Vi IMproved, Vim it's a rewrite and improved version of Vi, a text editor that dates from 1978.</p>
+<p>The way we tell computers what to do it’s with text, so in order to
+write that text we just need a text editor and this is were Vim it’s
+known for. Vim it’s just a text editor. The term Vim stands for Vi
+IMproved, Vim it’s a rewrite and improved version of Vi, a text editor
+that dates from 1978.</p>
- <p>In this article I want to show how this text editor became my best frient (?), I learned to love about Vim keybindings and now I even have and extension on my browser to use vim like keybindings.</p>
+<p>In this article I want to show how this text editor became my best
+frient (?), I learned to love about Vim keybindings and now I even have
+and extension on my browser to use vim like keybindings.</p>
- <p>Vim is a console text editor (altough you can find distributions like gvim, which comes with a gui), a benefit of this its that It's very lightweign in terms of system resources. Vim it's also highly configurable, you can do this by editing the <u>.vimrc</u> text file, which should be in you home directory in Linux or BSD bases OSs, if not you can <u>create</u> a new blank one and start from zero</p>
+<p>Vim is a console text editor (altough you can find distributions like
+gvim, which comes with a gui), a benefit of this its that It’s very
+lightweign in terms of system resources. Vim it’s also highly
+configurable, you can do this by editing the <em>.vimrc</em> text
+file, which should be in you home directory in Linux or BSD bases OSs,
+if not you can <em>create</em> a new blank one and start from zero</p>
- <p>If you installed Vim and you don't know how to move around or insert text, first you need to understand the basics, Vim has 3 main "modes" </p>
+<p>If you installed Vim and you don’t know how to move around or insert
+text, first you need to understand the basics, Vim has 3 main “modes”</p>
- <p>By default Vim comes with a lot of features disabled, for example a key binding to comment a line or auto close brackets, parenthesis, etc, this features you can enable them by installing <u>plugins</u> which I will cover leter.</p>
+<p>By default Vim comes with a lot of features disabled, for example a key
+binding to comment a line or auto close brackets, parenthesis, etc, this
+features you can enable them by installing <em>plugins</em> which I
+will cover leter.</p>
- <br>
+ <script type="text/javascript" src="/js/article-date.js"></script>
<!--#include virtual="/common/end_of_article.shtml" -->
-
</article>
<!--#include virtual="/common/footer.shtml" -->
diff --git a/build.sh b/build.sh
@@ -1,13 +1,13 @@
#!/bin/sh
# Builds a page for all the folders contained in md.
-# Copies entire folder to html folder, generates an html file
+# Copies entire folder to blog folder, generates an html file
# converting the markdown file *named the same as the subfolder*,
# then removes the md file conbtained in the dest folder.
# TODO: leave markdown file to generate a description for the rss feed
for i in $(ls md); do
- cp -r md/$i ./html &> /dev/null;
- ./build_page.sh -i md/$i/$i.md -t template.html -d ./html/$i;
- rm -r ./html/$i/$i.md;
+ cp -r md/$i ./blog &> /dev/null;
+ ./build_page.sh -i md/$i/$i.md -t template.html -d ./blog/$i;
+ # rm -r ./blog/$i/$i.md;
done
diff --git a/build_page.sh b/build_page.sh
@@ -1,6 +1,7 @@
#!/bin/sh
-# Author: Martin Kloeckner - https://kloeckner.com.ar
+# The most bloated, non-mantainable, non-readable static site generator
+# by: Martin Kloeckner - https://kloeckner.com.ar
# Dependencies: sed, grep, lowdown.
# Template: the converted html text is placed on a copy of the template
@@ -26,6 +27,32 @@ apply_syntax_highlight() {
done
}
+div_article_title_w_logo() {
+ # convert:
+ # <p><img src="vim_logo.png" alt="Vim logo" class="article-icon" title="Vim logo" /></p>
+ # <h1>The keyboard driven text editor</h1>
+
+ # into:
+ # <div id="article-title-with-icon">
+ # <div id="article-icon">
+ # <img src="/blog/vim-config/vim_logo.png" title="Vim logo" alt="Vim logo">
+ # </div>
+ # <h1 id="article-title">The keyboard driven text editor</h1>
+ # </div>
+
+ # if found a `class="article-icon"` then put a div around it including
+ # title with logo, for styling purposes
+ # <img src="vim_logo.png" alt="Vim logo" class="article-icon" title="Vim logo" />
+ logo_src=$(echo $1 | grep -zoP '(?<=src=\")(.*?)(?=\")')
+ logo_alt=$(echo $1 | grep -zoP '(?<=alt=\")(.*?)(?=\")')
+ logo_title=$(echo $1 | grep -zoP '(?<=title=\")(.*?)(?=\")')
+ h1_title=
+
+ echo "logo src: $logo_src"
+ echo "logo alt: $logo_alt"
+ echo "logo title: $logo_title"
+}
+
usage() {
echo "usage: $0 -i <input_file> -t <template_file>"
}
@@ -40,19 +67,18 @@ check_opt() {
while getopts ":i:t:d:" opt; do
case $opt in
i) input="$OPTARG";;
- t) templ="$OPTARG";;
+ t) templ="$OPTARG"; echo "template: $templ";;
d) dest_dir="$OPTARG";;
\?) printf "%s\n\n" "error: flag not found" && usage && exit 1;;
esac
done
[ $OPTIND -eq 1 ] && missing_operand && exit 2
-
shift "$((OPTIND-1))"
- [ -z "$input" ] && echo "error: no input file" && exit 1
- [ -z "$templ" ] && echo "error: no template file" && exit 1
- [ -z "$dest_dir" ] echo "no dest dir specified" && echo "==> assuming current dir"; dest_dir="."
+ [ -z "$input" ] || [ ! -e "$input" ] && echo "error: no input file" && exit 1
+ [ -z "$templ" ] || [ ! -e "$templ" ] && echo "error: no template file" && exit 1
+ [ -z "$dest_dir" ] && dest_dir="."
}
check_opt $@
@@ -73,7 +99,7 @@ echo "dest dir: $dest_dir"
echo "template: $template"
# generate body (skips lines starting with `%`, they're considered metadata)
-sed '/^% /d' $input | lowdown --html-no-head-ids > body.html
+sed '/^% /d' $input | lowdown --html-no-head-ids --html-no-escapehtml --html-no-owasp > body.html
# puts ids to <h1> tag and adds paragraph next to it with the article-date
sed -i -e 's/<h1>/<h1 id=article-title>/g' \
@@ -88,9 +114,16 @@ sed -e "s/\$article-title\\$/$title/" -e "s/\$article-date\\$/$date/" \
-e "s/\$lang\\$/$lang/" -e "s/\$generator\\$/$generator/" \
-e '/\$body\$/d' $template > "$dest_dir"/"$filename".html
-echo "==> "$dest_dir"/"$filename".html generated succesfully"
-echo ""
+# logo_line=$(grep -zoP '<img.*?("article-icon").*?>')
+# [ "$?" -eq "0" ] && div_article_title_w_logo logo_line $(grep -zoP )
rm body.html &> /dev/null
+# ./syntax-highlight "$dest_dir"/"$filename".html > sh.html
+
+# cp -rf sh.html "$dest_dir"/"$filename".html
+
+echo "==> "$dest_dir"/"$filename".html generated succesfully"
+echo ""
+
# apply_syntax_highlight "$filename.html"
diff --git a/common/header.shtml b/common/header.shtml
@@ -1,11 +1,10 @@
<header>
- <link rel="canonical" href="https://kloeckner.com.ar/" />
<div class="header_flex_div">
<h1 id="header_title">
<a href="/" id="header_link">Martin Klöckner</a>
</h1>
<ul style="list-style-type: none; padding-bottom: .5em" class="header_buttons">
- <li class="header_button" style="padding-right: 10px"><a href="/blog" style="text-decoration: none; mergin-left: 1em;">blog</a></li>
+ <li class="header_button" style="padding-right: 10px"><a href="/blog" style="text-decoration: none;">blog</a></li>
<li class="header_button" style="padding-right: 10px"><a href="/about" style="text-decoration: none;">about</a></li>
<li class="header_button"><a href="/cv.pdf" style="text-decoration: none;" target="_blank">cv<i class="icon-download"></i></a></li>
</ul>
diff --git a/css/article_style.css b/css/article_style.css
@@ -84,3 +84,223 @@ ul {
}
}
+
+/* Code blocks syntax highlight - Google code prettify syntax style */
+.prettyprint {
+ background: #282828;
+ /* font-family: Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace; */
+ font-family: "Ubuntu Mono", monospace;
+ border: 0 !important;
+}
+
+.pln {
+ color: #ebdbb2;
+}
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+ margin-top: 0;
+ margin-bottom: 0;
+ color: #666666;
+}
+
+li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {
+ padding-left: 1em;
+ background-color: #000;
+ list-style-type: decimal;
+}
+
+@media screen {
+ /* string content */
+ .str {
+ color: #98971a;
+ }
+
+ /* keyword */
+ .kwd {
+ color: #f60;
+ }
+
+ /* comment */
+ .com {
+ color: #928374;
+ }
+
+ /* type name */
+ .typ {
+ color: #458588;
+ }
+
+ /* literal value */
+ .lit {
+ color: #458;
+ }
+
+ /* punctuation */
+ .pun {
+ color: #ebdbb2;
+ }
+
+ /* lisp open bracket */
+ .opn {
+ color: #ebdbb2;
+ }
+
+ /* lisp close bracket */
+ .clo {
+ color: #ebdbb2;
+ }
+
+ /* markup tag name */
+ .tag {
+ color: #ebdbb2;
+ }
+
+ /* markup attribute name */
+ .atn {
+ color: #9c9;
+ }
+
+ /* markup attribute value */
+ .atv {
+ color: #6f0;
+ }
+
+ /* declaration */
+ .dec {
+ color: #ebdbb2;
+ }
+
+ /* variable name */
+ .var {
+ color: #ebdbb2;
+ }
+
+ /* function name */
+ .fun {
+ color: #458588;
+ }
+}
+
+@media (prefers-color-scheme: light) {
+/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
+.prettyprint {
+ background: #fff;
+ font-family: Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
+ border: 0 !important;
+}
+
+.pln {
+ color: #333;
+}
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+ margin-top: 0;
+ margin-bottom: 0;
+ color: #cccccc;
+}
+
+li.L0,
+li.L1,
+li.L2,
+li.L3,
+li.L4,
+li.L5,
+li.L6,
+li.L7,
+li.L8,
+li.L9 {
+ padding-left: 1em;
+ background-color: #fff;
+ list-style-type: decimal;
+}
+
+@media screen {
+
+ /* string content */
+
+ .str {
+ color: #d14;
+ }
+
+ /* keyword */
+
+ .kwd {
+ color: #333;
+ }
+
+ /* comment */
+
+ .com {
+ color: #998;
+ }
+
+ /* type name */
+
+ .typ {
+ color: #458;
+ }
+
+ /* literal value */
+
+ .lit {
+ color: #458;
+ }
+
+ /* punctuation */
+
+ .pun {
+ color: #333;
+ }
+
+ /* lisp open bracket */
+
+ .opn {
+ color: #333;
+ }
+
+ /* lisp close bracket */
+
+ .clo {
+ color: #333;
+ }
+
+ /* markup tag name */
+
+ .tag {
+ color: #000080;
+ }
+
+ /* markup attribute name */
+
+ .atn {
+ color: #008080;
+ }
+
+ /* markup attribute value */
+
+ .atv {
+ color: #d14;
+ }
+
+ /* declaration */
+
+ .dec {
+ color: #333;
+ }
+
+ /* variable name */
+
+ .var {
+ color: #008080;
+ }
+
+ /* function name */
+
+ .fun {
+ color: #900;
+ }
+}
+
+}
diff --git a/favicon.png b/favicon.png
Binary files differ.
diff --git a/index.html b/index.html
@@ -1,9 +1,15 @@
<!DOCTYPE html>
<html lang="en">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="title" content="Martin Klöckner's Webpage">
- <meta name="description" content="This is the personal webpage of Martin Klöckner, you will find contact information, a cv, and a blog, where he posts about random stuff, mostly tech related.">
<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <meta name="keywords" content="Martin Klockner's Webpage, Martin Kloeckner's Webpage, Martin Klöckner's Webpage">
+ <meta name="author" content="Martin Klockner, Martin Kloeckner, Martin Klöckner">
+
+ <meta name="title" content="Martin Klöckner's Webpage">
+ <meta name="description" content="This is my personal webpage, in here you will find contact information, a cv, and my blog, where I post about random stuff, mostly tech related.">
+
<title>Martin Klöckner's Webpage</title>
<!-- <link rel="preload" href="/fonts/Futura/FuturaBT-Medium.woff" as="font" type="font/woff" crossorigin="anonymous"> -->
@@ -16,7 +22,6 @@
<link rel='stylesheet' type='text/css' href="/css/style.css">
<link rel="icon" type="image/x-icon" href="favicon.png">
- <meta charset="utf-8"/>
</head>
<body>
diff --git a/md/dwm-config/dwm-config.md b/md/dwm-config/dwm-config.md
@@ -0,0 +1,164 @@
+% title: "dwm - A tiling window manager configuration"
+% date: "23-Oct-2021"
+
+# dwm - A tiling window manager configuration
+
+A window manager is a software that can manage the layout and appearance
+of every window spawned in your desktop, most people confuse them with
+desktop enviroments, which isn't the same since a desktop enviroment is
+more of an ecosystem, they come with a more 'complete' set of tools,
+like a basic web browser, a terminal emulator or calculator, an example
+of desktop enviroment would be gnome, xfce or kde plasma; instead a
+window manager is only the program that manages the windows spawned,
+although there are window managers that come with a little more, like
+docks or taskbars (openbox for example).
+
+In my case I use dwm, which is a window manager written in C developed
+by suckless software. The most relevant thing of this window manager is
+that out of the box it comes with the most basic functionallity, and if
+you want to extend it you need to patch it.
+
+By default dwm comes with 9 workspaces, in which you can open as many
+windows as you please; to spawn a new window for example a web browser
+you need to assign it a keybinding or use an application launcher like
+[dmenu](https://tools.suckless.org/dmenu/)
+
+[](screenshot.png "Screenshot of my dwm build")
+
+## Installing dwm
+
+### Requisites
+
+- GNU/Linux or BSD based operating system
+- A C library and a C compiler
+- make utility installed
+- X server installed
+- dwm source code, you can clone the repository or download as a tar file at the web
+
+As you can see above you can only install dwm on GNU/Linux or BSD based
+distros, unfortunally dwm is not available for Windows users but I'm
+sure there is an alternative.
+
+### Installation
+
+In order to install dwm you can visit the web of the creators at
+[suckless.org/dwm](https://dwm.suckless.org/), where you can download
+the source code as a tar file, or clone the repository.
+
+After you obtain the source code you need to navigate to the root folder
+of the source code and execute the following command
+
+```console
+$ sudo make install
+```
+
+after that you can log out of you user account, if you use a display
+manager you can select dwm as window manager and log back in, if you
+dont use a display manager you need to edit your .xinitrc file located
+at you home folder so that when you start X dwm gets launched too, you
+do this by adding \`exec dwm\` to the end of the .xinitrc
+file, its important that you add it to the end of the file.
+
+```console
+$ cat $HOME/.xinitrc
+exec dwm
+```
+
+Then you can start the X server by executing \`startx\` on a tty and it
+should open dwm without any problems.
+
+## How do you configure dwm?
+
+Basically you configure it by editing its source code, inside the root
+folder of the project there is a C header file named
+[config.def.h](https://github.com/klewer-martin/dotfiles/blob/master/.config/dwm/config.def.h)
+which if you open with a text editor you can see that there is some C
+code that you can edit, for example the line \"static const int topbar\"
+defines a variable named topbar which you can set to 1 or 0, to select
+if the status bar should spawn in the top or the bottom of the screen.
+After every change you make to the source code you need to copy
+config.def.h to config.h and then recompile dwm
+
+### Show information on the status bar
+
+dwm by default won't show any information on the status bar, this is
+done by using the xsetroot utility, which sets the WM\_NAME enviroment
+variable that dwm uses, lets assume you want to set the clock and date
+on the status bar, well you could execute the following command
+
+```console
+$ xsetroot -iname $(date)
+```
+
+and all the output of the command \`date\` would be printed on the status bar, this
+makes dwm status bar highly scriptable, in fact there are a ton of status
+bar implementations, the one that I use is called
+[dwmblocks](https://github.com/torrinfail/dwmblocks) and its also
+written in C and the configuration its pretty much the same as dwm, in
+order to get information you need to have scripts that prints the
+desired data to stdout, then you can include it on the config.h of
+dwmblocks by having them on a folder which is included in the \$PATH
+variable of your user.
+
+### Getting emoji support on dwm
+
+dwm by default doesn't come with emoji support, if you want to render
+an emoji in the status bar its going to either show it as a box or in
+the worst case crash, so in order to get emoji support first you need to
+get a font with emojis, I'm using [JoyPixels®
+font](https://www.joypixels.com/) you can also use
+[Google's noto font](https://fonts.google.com/noto), or any other font
+that comes with emoji support. Then open dwm configuration file and
+append to the fonts array the name of the font you want,
+in my case it's JoyPixels®.
+
+```c
+static const char *fonts[] = { "Source Code Pro:style=Regular:size=9",
+ "JoyPixels:style=Regular:size=8",
+ "DejaVu Sans" };
+```
+
+After you setup the font you need to remove or comment a chunk of code
+from drw.c, a file located in the root of the folder where dwm source
+code resides, between lines 136-150 there is a function named IsCol, you
+need to remove it or comment it.
+
+Finally you can recompile dwm and you will get emoji support. Sometimes
+even though you made all this procedure you still get boxes insted of
+the proper emoji, I solved this by adding another font name in the
+fonts array, like a fallback font.
+
+### Patches in dwm
+
+Since dwm is a simple program than doesn't include much features, if
+you want to extend it, for example by adding a
+[systray](https://dwm.suckless.org/patches/systray/) to the status bar,
+you need to patch dwm. To do this first you need to download the patch
+from [suckless.org/patches](https://dwm.suckless.org/patches/), then
+make sure you got it 'patch' installed, although I think it comes with
+most linux distributions by default nowdays.
+
+```console
+$ patch -p1 < <name of the file>
+```
+
+If you never patched dwm before then probably no errors would be
+reportjd, but if you already have applied a ton of patches then probably
+you would get a HUNK \## FAILED, in this case you need to get your hands
+dirty, and manually patch all the files that failed, you do this by
+opening the files with .rej extension (short for rejected), and the
+corresponding file to be patched, for example dwm.c and dwm.c.rej, and
+then you add all the chunks of code from the rejected file into the
+corresponding place in the non rejected file, you know where you should
+put the chunks of code because in the rej file you can see at the start
+of every chunk there is a '@@' followed by a number of line; also
+lines starting with plus means add, and minus means delete, if I'm not
+clear you should google how to use diff and patch to modify a file.
+
+## Useful links
+
+- [What is a window manager?](https://en.wikipedia.org/wiki/Window_manager)
+- Make sure to check the [suckless webiste](https://suckless.org/)
+- [suckless dwm website](https://dwm.suckless.org/)
+- [X server man page](https://www.x.org/releases/X11R7.7/doc/man/man1/Xserver.1.xhtml)
+- [patch man page](https://man7.org/linux/man-pages/man1/patch.1.html)
diff --git a/md/dwm-config/screenshot.jpeg b/md/dwm-config/screenshot.jpeg
Binary files differ.
diff --git a/md/dwm-config/screenshot.png b/md/dwm-config/screenshot.png
Binary files differ.
diff --git a/md/nerdearla-2022/nerdearla-2022.md b/md/nerdearla-2022/nerdearla-2022.md
@@ -19,7 +19,7 @@ $ sudo make clean install
This is how I replace the variables in the template with the data aquired from the metadata contained in the files written in markdown
-```
+```console
$ sed -e "s/\$article-title\\$/$title/" -e "s/\$article-date\\$/$date/" \
-e "s/\$pagetitle\\$/$pagetitle/" -e '/\$body\$/r./body.html' \
-e '/\$body\$/d' $template > $filename.html
@@ -28,6 +28,6 @@ $ sed -e "s/\$article-title\\$/$title/" -e "s/\$article-date\\$/$date/" \
This is how I generate this webpage, converting it from its markdown file into html, this is a custom scripts that I made that only depends on lowdown, grep, and sed. Previously I had another script similar, which depended on pandoc, which is an alternative of lowdown but much more bloated, it depends on a ton of libraries wirtten in haskell
-```
+```console
$ ./build.sh nerdearla-2022.md
```
diff --git a/blog/vim-config/vim-config.html b/md/vim-config/vim-config.html
diff --git a/md/vim-config/vim-config.md b/md/vim-config/vim-config.md
@@ -0,0 +1,39 @@
+% title: "vim - The keyboard driven text editor"
+% date: "04-Mar-2021"
+
+{.article-icon}
+
+# The keyboard driven text editor
+
+If we think for a moment about software we are going to realize that the
+core of every program it's just plain text, literally just words in a
+file that someone wrote, this webpage it's just text interpreted by
+your web-browser, whose also just plain text implemented by another
+program, some software has more complexity than others, for example the
+linux kernel it's estimated that has around 27.8 million lines of code,
+which is also just plain text
+
+The way we tell computers what to do it's with text, so in order to
+write that text we just need a text editor and this is were Vim it's
+known for. Vim it's just a text editor. The term Vim stands for Vi
+IMproved, Vim it's a rewrite and improved version of Vi, a text editor
+that dates from 1978.
+
+In this article I want to show how this text editor became my best
+frient (?), I learned to love about Vim keybindings and now I even have
+and extension on my browser to use vim like keybindings.
+
+Vim is a console text editor (altough you can find distributions like
+gvim, which comes with a gui), a benefit of this its that It's very
+lightweign in terms of system resources. Vim it's also highly
+configurable, you can do this by editing the *.vimrc* text
+file, which should be in you home directory in Linux or BSD bases OSs,
+if not you can *create* a new blank one and start from zero
+
+If you installed Vim and you don't know how to move around or insert
+text, first you need to understand the basics, Vim has 3 main "modes"
+
+By default Vim comes with a lot of features disabled, for example a key
+binding to comment a line or auto close brackets, parenthesis, etc, this
+features you can enable them by installing *plugins* which I
+will cover leter.
diff --git a/md/vim-config/vim_logo.png b/md/vim-config/vim_logo.png
Binary files differ.
diff --git a/rss.xml b/rss.xml
@@ -5,7 +5,7 @@
<description>Latest uploads on Martin Klöckner's Webpage</description>
<generator>Shell script</generator>
<language>en-us</language>
-<lastBuildDate>Mon Oct 10 03:32:55 PM -03 2022</lastBuildDate>
+<lastBuildDate>Fri Oct 14 12:39:18 AM -03 2022</lastBuildDate>
<item>
<title>I'm going to Nerdearla 2022</title>
<link>https://kloeckner.com.ar/blog/nerdearla-2022/nerdearla-2022.html</link>
@@ -21,7 +21,7 @@ Hall</a> was making a
presentation called "50 years of UNIX and the landing on the Moon", you
can find a record of the presentation
<a href="https://www.youtube.com/watch?v=9O_FnKZI6_M">here</a>.</p>
-<p><img src="nerdearla-2019.jpeg" alt="" title="Nerdearla 2019"></p>
+<p><a href="nerdearla-2019.png" title="Nerdearla 2019"><img src="nerdearla-2019.jpeg" alt="Nerdearla 2019"></a></p>
<p>It was my first talk ever and I loved it, sadly becouse of the pandemic
I couldn't go in the past two years.</p>
<p>The event is half remote half presential and the entrance is free. It
@@ -31,7 +31,7 @@ Oct 22, last three days.</p>
</pre>
<p>This is how I replace the variables in the template with the data
aquired from the metadata contained in the files written in markdown</p>
-<pre>$ sed -e "s/\$article-title\\$/$title/" -e "s/\$article-date\\$/$date/" \
+<pre><code class="language-console">$ sed -e "s/\$article-title\\$/$title/" -e "s/\$article-date\\$/$date/" \
-e "s/\$pagetitle\\$/$pagetitle/" -e '/\$body\$/r./body.html' \
-e '/\$body\$/d' $template > $filename.html
</pre>
@@ -40,7 +40,7 @@ file into html, this is a custom scripts that I made that only depends
on lowdown, grep, and sed. Previously I had another script similar,
which depended on pandoc, which is an alternative of lowdown but much
more bloated, it depends on a ton of libraries wirtten in haskell</p>
-<pre>$ ./build.sh nerdearla-2022.md
+<pre><code class="language-console">$ ./build.sh nerdearla-2022.md
</pre></html>]]>
</htmlData>
</description>
@@ -54,11 +54,10 @@ more bloated, it depends on a ton of libraries wirtten in haskell</p>
<htmlData>
<![CDATA[<html><h1>SAV - Sorting Algorithms Visualized </h1>
<p>18-Sep-2022</p>
+<p>18-09-22</p>
<p>This is a desktop app that shows how an array is being sorted using
-different sorting algorithms.</p>
-<p>:::
-<a href="sav.gif"><img src="sav.gif" alt="" title="Gif showing SAV working"></a>
-:::</p>
+different algorithms.</p>
+<p><img src="sav.gif" alt="" title="Gif showing SAV working"></p>
<p>I made it using pure C and SDL2 for graphics, you can take a look at
it's source code on <a href="https://github.com/mjkloeckner/sav">Github</a>.</p>
<p>The main purpose of this app was to put in practice the knowledge I
@@ -67,7 +66,7 @@ I'd never used SDL2 graphics before. In the end was a very enjoyable
project since SDL2 per se is a very simple and easy to use library.</p>
<p>Currently it supports the following algorithms:</p>
<ul>
-<li>bubble sort</li>
+<li>bubble sort improved</li>
<li>insertion sort</li>
<li>merge sort wrapper</li>
<li>quick sort wrapper</li>
@@ -104,11 +103,7 @@ you want to extend it you need to patch it.</p>
windows as you please; to spawn a new window for example a web browser
you need to assign it a keybinding or use an application launcher like
<a href="https://tools.suckless.org/dmenu/">dmenu</a></p>
-<p>:::
-<a href="/blog/dwm-config/screenshot.png"><img src="screenshot.jpeg" alt="Screenshot" title="Screenshot of my dwm build">{.screenshot
-style="padding: 0em; width: 100%;"
-max-width="40em"}</a>
-:::</p>
+<p><a href="screenshot.png" title="Screenshot of my dwm build"><img src="screenshot.jpeg" alt="Screenshot"></a></p>
<h2>Installing dwm</h2>
<h3>Requisites</h3>
<ul>
@@ -128,17 +123,16 @@ sure there is an alternative.</p>
the source code as a tar file, or clone the repository.</p>
<p>After you obtain the source code you need to navigate to the root folder
of the source code and execute the following command</p>
-<pre>$ sudo make install
+<pre><code class="language-console">$ sudo make install
</pre>
<p>after that you can log out of you user account, if you use a display
manager you can select dwm as window manager and log back in, if you
dont use a display manager you need to edit your .xinitrc file located
at you home folder so that when you start X dwm gets launched too, you
-do this by adding `exec dwm` to [the end] of the .xinitrc
-file, its important that you add it to the end of the file.</p>
-<pre>$ cat $HOME/.xinitrc
-...
-exec dwm
+do this by adding `exec dwm` to the end of the .xinitrc file, its
+important that you add it to the end of the file.</p>
+<pre><code class="language-console">$ cat $HOME/.xinitrc
+exec dwm
</pre>
<p>Then you can start the X server by executing `startx` on a tty and it
should open dwm without any problems.</p>
@@ -151,17 +145,17 @@ code that you can edit, for example the line "static const int topbar"
defines a variable named topbar which you can set to 1 or 0, to select
if the status bar should spawn in the top or the bottom of the screen.
After every change you make to the source code you need to copy
-config.def.h to config.h and then [recompile dwm]</p>
+config.def.h to config.h and then recompile dwm</p>
<h3>Show information on the status bar</h3>
<p>dwm by default won't show any information on the status bar, this is
done by using the xsetroot utility, which sets the WM_NAME enviroment
variable that dwm uses, lets assume you want to set the clock and date
on the status bar, well you could execute the following command</p>
-<pre>$ xsetroot -iname $(date)
+<pre><code class="language-console">$ xsetroot -iname $(date)
</pre>
-<p>and all the output of 'date' would be printed on the status bar, this
-makes dwm status bar highly scriptable, in fact the are a ton of status
-bar implementation, the one that I use is called
+<p>and all the output of the command `date` would be printed on the
+status bar, this makes dwm status bar highly scriptable, in fact there
+are a ton of status bar implementations, the one that I use is called
<a href="https://github.com/torrinfail/dwmblocks">dwmblocks</a> and its also
written in C and the configuration its pretty much the same as dwm, in
order to get information you need to have scripts that prints the
@@ -169,19 +163,17 @@ desired data to stdout, then you can include it on the config.h of
dwmblocks by having them on a folder which is included in the $PATH
variable of your user.</p>
<h3>Getting emoji support on dwm</h3>
-<p>dwm by default doesn't come with emoji support, if you want to render
-an emoji in the status bar its going to either show it as a box or in
-the worst case crash, so in order to get emoji support first you need to
-get a font with [emojis], I'm using <a href="https://www.joypixels.com/">JoyPixels®
-font</a> you can also use
-<a href="https://fonts.google.com/noto">Google's noto font</a>, or any other font
-that comes with emoji support. Then open dwm configuration file and
-append to the [fonts] array the name of the font you want,
-in my case it's JoyPixels®.</p>
-<pre>$ cat config.def.h
-...
-static const char *fonts[] = ;
-...
+<p>dwm by default doesn't come with emoji support, if you want to render an
+emoji in the status bar its going to either show it as a box or in the
+worst case crash, so in order to get emoji support first you need to get
+a font with emojis, I'm using <a href="https://www.joypixels.com/">JoyPixels®
+font</a> you can also use <a href="https://fonts.google.com/noto">Google's noto
+font</a>, or any other font that comes with
+emoji support. Then open dwm configuration file and append to the fonts
+array the name of the font you want, in my case it's JoyPixels®.</p>
+<pre><code class="language-c">static const char *fonts[] = { "Source Code Pro:style=Regular:size=9",
+ "JoyPixels:style=Regular:size=8",
+ "DejaVu Sans" };
</pre>
<p>After you setup the font you need to remove or comment a chunk of code
from drw.c, a file located in the root of the folder where dwm source
@@ -189,17 +181,17 @@ code resides, between lines 136-150 there is a function named IsCol, you
need to remove it or comment it.</p>
<p>Finally you can recompile dwm and you will get emoji support. Sometimes
even though you made all this procedure you still get boxes insted of
-the proper emoji, I solved this by adding another font name in the
-[fonts] array, like a fallback font.</p>
-<h3>[Patches in dwm]</h3>
-<p>Since dwm is a simple program than doesn't include much features, if
-you want to extend it, for example by adding a
+the proper emoji, I solved this by adding another font name in the fonts
+array, like a fallback font.</p>
+<h3>Patches in dwm</h3>
+<p>Since dwm is a simple program than doesn't include much features, if you
+want to extend it, for example by adding a
<a href="https://dwm.suckless.org/patches/systray/">systray</a> to the status bar,
you need to patch dwm. To do this first you need to download the patch
from <a href="https://dwm.suckless.org/patches/">suckless.org/patches</a>, then
make sure you got it 'patch' installed, although I think it comes with
most linux distributions by default nowdays.</p>
-<pre>$ patch -p1 < <name of the file>
+<pre><code class="language-console">$ patch -p1 < <name of the file>
</pre>
<p>If you never patched dwm before then probably no errors would be
reportjd, but if you already have applied a ton of patches then probably
@@ -210,9 +202,9 @@ corresponding file to be patched, for example dwm.c and dwm.c.rej, and
then you add all the chunks of code from the rejected file into the
corresponding place in the non rejected file, you know where you should
put the chunks of code because in the rej file you can see at the start
-of every chunk there is a '@@' followed by a number of line; also
-lines starting with plus means add, and minus means delete, if i'm not
-clear you should google how to use diff and patch to modify a file.</p>
+of every chunk there is a '@@' followed by a number of line; also lines
+starting with plus means add, and minus means delete, if I'm not clear
+you should google how to use diff and patch to modify a file.</p>
<h2>Useful links</h2>
<ul>
<li><a href="https://en.wikipedia.org/wiki/Window_manager">What is a window
@@ -221,8 +213,7 @@ manager?</a></li>
<li><a href="https://dwm.suckless.org/">suckless dwm website</a></li>
<li><a href="https://www.x.org/releases/X11R7.7/doc/man/man1/Xserver.1.xhtml">X server man
page</a></li>
-<li><a href="https://man7.org/linux/man-pages/man1/patch.1.html">patch man
-page</a></li>
+<li><a href="https://man7.org/linux/man-pages/man1/patch.1.html">patch man page</a></li>
</ul></html>]]>
</htmlData>
</description>
@@ -234,20 +225,16 @@ page</a></li>
<link>https://kloeckner.com.ar/blog/vim-config/vim-config.html</link>
<description>
<htmlData>
- <![CDATA[<html><p>:::
-:::
-<img src="/blog/vim-config/vim_logo.png" alt="Vim logo" title="Vim logo">
-:::</p>
+ <![CDATA[<html><p><img src="vim_logo.png" alt="Vim logo" title="Vim logo"></p>
<h1>The keyboard driven text editor </h1>
-<p>:::</p>
<p>04-Mar-2021</p>
<p>If we think for a moment about software we are going to realize that the
core of every program it's just plain text, literally just words in a
-file that someone wrote, this webpage it's just text interpreted by
-your web-browser, whose also just plain text implemented by another
-program, some software has more complexity than others, for example the
-linux kernel it's estimated that has around 27.8 million lines of code,
-which is also just plain text</p>
+file that someone wrote, this webpage it's just text interpreted by your
+web-browser, whose also just plain text implemented by another program,
+some software has more complexity than others, for example the linux
+kernel it's estimated that has around 27.8 million lines of code, which
+is also just plain text</p>
<p>The way we tell computers what to do it's with text, so in order to
write that text we just need a text editor and this is were Vim it's
known for. Vim it's just a text editor. The term Vim stands for Vi
@@ -259,16 +246,15 @@ and extension on my browser to use vim like keybindings.</p>
<p>Vim is a console text editor (altough you can find distributions like
gvim, which comes with a gui), a benefit of this its that It's very
lightweign in terms of system resources. Vim it's also highly
-configurable, you can do this by editing the [.vimrc] text
-file, which should be in you home directory in Linux or BSD bases OSs,
-if not you can [create] a new blank one and start from zero</p>
+configurable, you can do this by editing the .vimrc text file, which
+should be in you home directory in Linux or BSD bases OSs, if not you
+can create a new blank one and start from zero</p>
<p>If you installed Vim and you don't know how to move around or insert
text, first you need to understand the basics, Vim has 3 main "modes"</p>
<p>By default Vim comes with a lot of features disabled, for example a key
binding to comment a line or auto close brackets, parenthesis, etc, this
-features you can enable them by installing [plugins] which I
-will cover leter.</p>
-<p>\</p></html>]]>
+features you can enable them by installing plugins which I will cover
+leter.</p></html>]]>
</htmlData>
</description>
<pubDate>04-Mar-2021</pubDate>
diff --git a/syntax-highlight b/syntax-highlight
Binary files differ.
diff --git a/template.html b/template.html
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="$lang$">
- <head id=top>
+ <head>
<meta charset="utf-8">
<meta name="generator" content="$generator$">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -14,7 +14,7 @@
<link rel="icon" href="/favicon.png">
</head>
- <body id=top>
+ <body>
<!--#include virtual="/common/header.shtml" -->
<article>
diff --git a/webp_exclude b/webp_exclude
@@ -0,0 +1,2 @@
+deploy.sh
+hjol
