commit f46e3f1768c7b595033ebfacc6e3ead726ee063d
parent 45eb084b422ece18e50885a110bcaa372d796ffb
Author: mjkloeckner <martin.cachari@gmail.com>
Date: Sun, 16 Oct 2022 02:38:42 -0300
Update on build_page.sh and added syntax-highlight on dwm-config.html
Diffstat:
9 files changed, 53 insertions(+), 124 deletions(-)
diff --git a/blog/dwm-config/dwm-config.html b/blog/dwm-config/dwm-config.html
@@ -1,31 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="utf-8">
- <meta name="generator" content="Shell script">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <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">
+ <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='stylesheet' type='text/css' href="/css/style.css">
- <link rel="icon" href="/favicon.png">
+ <title>dwm - A tiling window manager configuration | Martin Klöckner's Webpage</title>
+ <link rel="stylesheet" type="text/css" href="/css/style.css"/>
+ <link rel="icon" href="/favicon.png"/>
</head>
<body>
<!--#include virtual="/common/header.shtml" -->
<article>
- <link rel='stylesheet' type='text/css' href="/css/article_style.css">
+ <link rel="stylesheet" type="text/css" href="/css/article_style.css"/>
-<h1 id=article-title>dwm - A tiling window manager configuration</h1><p class="article-date">23-Oct-2021</p>
+<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,
+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,
@@ -42,7 +42,7 @@ 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>
+<p><a href="screenshot.png" title="Screenshot of my dwm build"><img src="screenshot.jpeg" alt="Screenshot"/></a></p>
<h2>Installing dwm</h2>
@@ -57,7 +57,7 @@ you need to assign it a keybinding or use an application launcher like
</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
+distros, unfortunally dwm is not available for Windows users but I’m
sure there is an alternative.</p>
<h3>Installation</h3>
@@ -69,7 +69,7 @@ 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
+<pre><code class="language-console"><span class="pun">$</span> <span class="pln">sudo</span> <span class="kwd">make</span> <span class="pln">install</span>
</code></pre>
<p>after that you can log out of you user account, if you use a display
@@ -79,8 +79,8 @@ 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
+<pre><code class="language-console"><span class="pun">$</span> <span class="pln">cat</span> <span class="pun">$</span><span class="typ">HOME</span><span class="pun">/</span><span class="pun">.</span><span class="pln">xinitrc</span>
+<span class="kwd">exec</span> <span class="pln">dwm</span>
</code></pre>
<p>Then you can start the X server by executing `startx` on a tty and it
@@ -92,7 +92,7 @@ should open dwm without any problems.</p>
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”
+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
@@ -100,12 +100,12 @@ 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
+<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)
+<pre><code class="language-console"><span class="pun">$</span> <span class="pln">xsetroot</span> <span class="pun">-</span><span class="pln">iname</span> <span class="pun">$</span><span class="pun">(</span><span class="pln">date</span><span class="pun">)</span>
</code></pre>
<p>and all the output of the command `date` would be printed on the status bar, this
@@ -120,19 +120,19 @@ 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
+<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®
+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
+<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>
+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><code class="language-c"><span class="kwd">static</span> <span class="kwd">const</span> <span class="kwd">char</span> <span class="pun">*</span><span class="pln">fonts</span><span class="pun">[</span><span class="pun">]</span> <span class="pun">=</span> <span class="pun">{</span> <span class="str">"Source Code Pro:style=Regular:size=9"</span><span class="pun">,</span>
+ <span class="str">"JoyPixels:style=Regular:size=8"</span><span class="pun">,</span>
+ <span class="str">"DejaVu Sans"</span> <span class="pun">}</span><span class="pun">;</span>
</code></pre>
<p>After you setup the font you need to remove or comment a chunk of code
@@ -147,15 +147,15 @@ 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
+<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
+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 < <file.diff>
+<pre><code class="language-console"><span class="pun">$</span> <span class="pln">patch</span> <span class="pun">-</span><span class="pln">p1</span> <span class="pun"><</span> <span class="pun"><</span><span class="pln">file</span><span class="pun">.</span><span class="pln">diff</span><span class="pun">></span>
</code></pre>
<p>If you never patched dwm before then probably no errors would be
@@ -167,8 +167,8 @@ 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
+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>
diff --git a/blog/vim-config/vim-config.html b/blog/vim-config/vim-config.html
@@ -24,7 +24,7 @@
<div id="article-title-with-icon"> <div id="article-icon"> <img src="vim_logo.png" title="Vim logo" alt="Vim logo"> </div> <h1 id="article-title">The keyboard driven text editor</h1></div><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
+core of every program is 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
diff --git a/common/blog_index.shtml b/common/blog_index.shtml
@@ -1,4 +1,4 @@
-<li><time>23-Sep-2022</time> <a href="/blog/nerdearla-2022/nerdearla-2022.html">I'm going to Nerdearla 2022</a></li>
-<li><time>18-Sep-2022</time> <a href="/blog/sav/sav.html">SAV - Sorting Algorithms Visualized</a></li>
-<li><time>23-Oct-2021</time> <a href="/blog/dwm-config/dwm-config.html">dwm - A tiling window manager configuration</a></li>
-<li><time>04-Mar-2021</time> <a href="/blog/vim-config/vim-config.html">vim - The keyboard driven text editor</a></li>
+<li><time>23-Sep-2022</time> <a href="/blog/nerdearla-2022/nerdearla-2022">I'm going to Nerdearla 2022</a></li>
+<li><time>18-Sep-2022</time> <a href="/blog/sav/sav">SAV - Sorting Algorithms Visualized</a></li>
+<li><time>23-Oct-2021</time> <a href="/blog/dwm-config/dwm-config">dwm - A tiling window manager configuration</a></li>
+<li><time>04-Mar-2021</time> <a href="/blog/vim-config/vim-config">vim - The keyboard driven text editor</a></li>
diff --git a/common/latest_uploads.shtml b/common/latest_uploads.shtml
@@ -1,4 +1,4 @@
-<li><time>23-Sep-2022</time> <a href="/blog/nerdearla-2022/nerdearla-2022.html">I'm going to Nerdearla 2022</a></li>
-<li><time>18-Sep-2022</time> <a href="/blog/sav/sav.html">SAV - Sorting Algorithms Visualized</a></li>
-<li><time>23-Oct-2021</time> <a href="/blog/dwm-config/dwm-config.html">dwm - A tiling window manager configuration</a></li>
-<li><time>04-Mar-2021</time> <a href="/blog/vim-config/vim-config.html">vim - The keyboard driven text editor</a></li>
+<li><time>23-Sep-2022</time> <a href="/blog/nerdearla-2022/nerdearla-2022">I'm going to Nerdearla 2022</a></li>
+<li><time>18-Sep-2022</time> <a href="/blog/sav/sav">SAV - Sorting Algorithms Visualized</a></li>
+<li><time>23-Oct-2021</time> <a href="/blog/dwm-config/dwm-config">dwm - A tiling window manager configuration</a></li>
+<li><time>04-Mar-2021</time> <a href="/blog/vim-config/vim-config">vim - The keyboard driven text editor</a></li>
diff --git a/css/article_style.css b/css/article_style.css
@@ -29,7 +29,8 @@ img {
/* max-width: 5em; */
/* flex-basis: 40% */
width: 3em;
- padding-right: .5em;
+ min-width: 2em;
+ padding-right: .75em;
}
#article-title-with-icon {
diff --git a/md/vim-config/vim-config.html b/md/vim-config/vim-config.html
@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <head>
- <meta charset="utf-8"/>
- <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>
-
- <link rel='stylesheet' type='text/css' href="/css/style.css">
- <link rel="icon" href="/favicon.png">
- </head>
-
- <body>
- <!--#include virtual="/common/header.shtml" -->
-
- <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 class="article-date">04-Mar-2021</p>
- <script type="text/javascript" src="/js/article-date.js"></script>
-
- <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>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>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>
-
- <br>
- <!--#include virtual="/common/end_of_article.shtml" -->
-
- </article>
-
- <!--#include virtual="/common/footer.shtml" -->
- </body>
-</html>
diff --git a/md/vim-config/vim-config.md b/md/vim-config/vim-config.md
@@ -6,7 +6,7 @@
# 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
+core of every program is 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
diff --git a/scripts/build_page.sh b/scripts/build_page.sh
@@ -28,17 +28,6 @@ apply_syntax_highlight() {
}
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>
logo_src=$(echo $1 | grep -zoP '(?<=src=\")(.*?)(?=\")' | tr -d '\0')
logo_alt=$(echo $1 | grep -zoP '(?<=alt=\")(.*?)(?=\")' | tr -d '\0')
logo_title=$(echo $1 | grep -zoP '(?<=title=\")(.*?)(?=\")' | tr -d '\0')
@@ -83,12 +72,12 @@ generator="Shell script"
template="$templ"
filename="$(basename $input | sed 's/\.[^.]*$//')"
-echo "file: $input"
-echo "filename: $filename"
-echo "title: $title"
-echo "date: $date"
-echo "dest dir: $dest_dir"
-echo "template: $template"
+# echo "file: $input"
+# echo "filename: $filename"
+# echo "title: $title"
+# echo "date: $date"
+# 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 --html-no-escapehtml --html-no-owasp > body.html
@@ -113,9 +102,6 @@ insert_div_article_title_w_logo() {
logo_line="$1"
title_line="$2"
- echo "logo_line: $logo_line"
- echo "title_line: $title_line"
-
div_article_title_w_logo "$logo_line" "$title_line"
sed -i -e "s^$title_line^<div id=\"article-title-with-icon\">\
@@ -134,7 +120,6 @@ rm body.html &> /dev/null
# cp -rf sh.html "$dest_dir"/"$filename".html
-echo "==> "$dest_dir"/"$filename".html generated succesfully"
-echo ""
+echo "==> "$filename".html generated succesfully"
# apply_syntax_highlight "$filename.html"
diff --git a/scripts/sync.sh b/scripts/sync.sh
@@ -19,7 +19,7 @@ generate_blog_index() {
article_title=$(cat $i | grep -oP '(?<=<meta name="article-title" content=")(.*?)(?=")')
file_name=$(echo "$i" | grep -oE '[^/]*$' | cut -d '.' -f 1)
- printf "<li><time>%s</time> <a href=\"/$blog_folder/$file_name/$file_name.html\">%s</a></li>\n" \
+ printf "<li><time>%s</time> <a href=\"/$blog_folder/$file_name/$file_name\">%s</a></li>\n" \
"${article_date}" "${article_title}" >> $root_folder/$blog_index_file
done
}
