commit 0f397a25bc842dfca9d19e798ef110a825c28257
parent 07b995650286b9883a6ccc82b86116436c5e1079
Author: mjkloeckner <martin.cachari@gmail.com>
Date: Sat, 15 Oct 2022 19:40:40 -0300
Updated build_page.sh to support article-icons in title
Now build_page.sh can generate html files from md files, and include
icons on the title see: [http://kloeckner.com.ar/blog/vim-config/vim-config.html](http://kloeckner.com.ar/blog/vim-config/vim-config.html).
Format to include an icon on the title:
- The icon must be specified like a regular image but with an {.article-icon} appended at the end.
e.g.: `{.article-icon}`
- The title can be specified like any other title
`# The keyboard driven text editor`
when running build_page.sh on that file the title on the html would be
wrapped around a div and a certain style would be applied
Diffstat:
9 files changed, 23 insertions(+), 293 deletions(-)
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,4 @@ deploy.sh
rss.xml
blog
syntax-highlight
+rss.xml
diff --git a/blog/dwm-config/dwm-config.html b/blog/dwm-config/dwm-config.html
@@ -155,7 +155,7 @@ 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>
+<pre><code class="language-console">$ patch -p1 < <file.diff>
</code></pre>
<p>If you never patched dwm before then probably no errors would be
diff --git a/blog/sav/sav.html b/blog/sav/sav.html
@@ -22,8 +22,6 @@
<h1 id=article-title>SAV - Sorting Algorithms Visualized</h1><p class="article-date">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 algorithms.</p>
<p><img src="sav.gif" alt="" title="Gif showing SAV working" /></p>
diff --git a/blog/vim-config/vim-config.html b/blog/vim-config/vim-config.html
@@ -20,9 +20,8 @@
<article>
<link rel='stylesheet' type='text/css' href="/css/article_style.css">
-<p><img src="vim_logo.png" alt="Vim logo" class="article-icon" title="Vim logo" /></p>
-<h1 id=article-title>The keyboard driven text editor</h1><p class="article-date">04-Mar-2021</p>
+<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>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
diff --git a/build_page.sh b/build_page.sh
@@ -39,21 +39,10 @@ div_article_title_w_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" />
- echo "arg 1 is :$1"
- echo "arg 2 is :$2"
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')
h1_title=$(echo $2 | grep -zoP '(?<=<h1 id=article-title>)(.*?)(?=</h1>)' | tr -d '\0')
-
- echo "logo src: $logo_src"
- echo "logo alt: $logo_alt"
- echo "logo title: $logo_title"
- echo "h1_title: $h1_title"
}
usage() {
@@ -119,15 +108,24 @@ sed -e "s/\$article-title\\$/$title/" -e "s/\$article-date\\$/$date/" \
logo_line=$(grep -zoP '<img.*?("article-icon").*?>' "$dest_dir"/"$filename".html | tr -d '\0')
title_line=$(grep -P '<h1.*?(article-title).*?>' "$dest_dir"/"$filename".html | tr -d '\0')
-echo "logo_line: $logo_line"
-echo "title_line: $title_line"
-[ "$?" -eq "0" ] && div_article_title_w_logo "$logo_line" "$title_line"
-sed -i -e "s^$title_line^<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\">$h1_title<\/h1> <\/div>^" "$dest_dir"/"$filename".html
+insert_div_article_title_w_logo() {
+ logo_line="$1"
+ title_line="$2"
+
+ echo "logo_line: $logo_line"
+ echo "title_line: $title_line"
-# awk "!/$logo_line/" "$dest_dir"/"$filename".html
+ div_article_title_w_logo "$logo_line" "$title_line"
+
+ sed -i -e "s^$title_line^<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\">$h1_title<\/h1> <\/div>^" "$dest_dir"/"$filename".html
+
+ sed -i -E '/(^<p>).*?(article-icon).*?<\/p>/d' "$dest_dir"/"$filename".html
+}
-sed -i "\#$logo_line#d" "$dest_dir"/"$filename".html
+[ ! -z "$logo_line" ] && insert_div_article_title_w_logo "$logo_line" "$title_line"
rm body.html &> /dev/null
diff --git a/md/dwm-config/dwm-config.md b/md/dwm-config/dwm-config.md
@@ -139,7 +139,7 @@ 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>
+$ patch -p1 < <file.diff>
```
If you never patched dwm before then probably no errors would be
diff --git a/md/sav/sav.md b/md/sav/sav.md
@@ -3,8 +3,6 @@
# SAV - Sorting Algorithms Visualized
-18-09-22
-
This is a desktop app that shows how an array is being sorted using different algorithms.
diff --git a/rss.xml b/rss.xml
@@ -1,265 +0,0 @@
-<rss version="2.0">
- <channel>
- <title>Martin Klöckner's webpage</title>
- <link>https://kloeckner.com.ar</link>
- <description>Latest uploads on Martin Klöckner's Webpage</description>
- <generator>Shell script</generator>
- <language>en-us</language>
-<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>
-<description>
- <htmlData>
- <![CDATA[<html><h1>I'm going to Nerdearla 2022 </h1>
-<p>23-Sep-2022</p>
-<p>As the title says I'm going to be present at
-<a href="https://nerdear.la/">Nerdearla</a>.</p>
-<p>This will be my second time that I attend to this event since I've been
-there for the first time in 2019. I remember that <a href="https://en.wikipedia.org/wiki/Jon_Hall_(programmer)">John 'Maddog'
-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><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
-takes place at Centro cultural Konex on Once, Buenos Aires on Oct 19 to
-Oct 22, last three days.</p>
-<pre><code class="language-console">$ sudo make clean install
-</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><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>
-<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 class="language-console">$ ./build.sh nerdearla-2022.md
-</pre></html>]]>
- </htmlData>
- </description>
-<pubDate>23-Sep-2022</pubDate>
-</item>
-
-<item>
-<title>SAV - Sorting Algorithms Visualized</title>
-<link>https://kloeckner.com.ar/blog/sav/sav.html</link>
-<description>
- <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 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
-gained in C as well with algorithms, and it was like a challenge since
-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 improved</li>
-<li>insertion sort</li>
-<li>merge sort wrapper</li>
-<li>quick sort wrapper</li>
-<li>shell sort</li>
-<li>selection sort</li>
-<li>heap sort</li>
-</ul></html>]]>
- </htmlData>
- </description>
-<pubDate>18-Sep-2022</pubDate>
-</item>
-
-<item>
-<title>dwm - A tiling window manager configuration</title>
-<link>https://kloeckner.com.ar/blog/dwm-config/dwm-config.html</link>
-<description>
- <htmlData>
- <![CDATA[<html><h1>dwm - A tiling window manager configuration </h1>
-<p>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
-</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
-</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)
-</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" };
-</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>
-</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></html>]]>
- </htmlData>
- </description>
-<pubDate>23-Oct-2021</pubDate>
-</item>
-
-<item>
-<title>vim - The keyboard driven text editor</title>
-<link>https://kloeckner.com.ar/blog/vim-config/vim-config.html</link>
-<description>
- <htmlData>
- <![CDATA[<html><p><img src="vim_logo.png" alt="Vim logo" title="Vim logo"></p>
-<h1>The keyboard driven text editor </h1>
-<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>
-<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 .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></html>]]>
- </htmlData>
- </description>
-<pubDate>04-Mar-2021</pubDate>
-</item>
-
-
-</channel>
-</rss>
diff --git a/sync.sh b/sync.sh
@@ -1,6 +1,6 @@
#!/bin/sh
-root_folder="/home/mk/soydev/kloeckner.com.ar"
+root_folder="/home/mk/soydev/webp/kloeckner.com.ar"
blog_folder="blog"
blog_index_file="blog_index.shtml"
latest_uploads_file="latest_uploads.shtml"
@@ -37,8 +37,7 @@ generate_rss_feed() {
article_title=$(cat $i | grep -oP '(?<=<meta name="article-title" content=")(.*?)(?=")')
file_name=$(echo "$i" | grep -oE '[^/]*$' | cut -d '.' -f 1)
- pandoc $root_folder/$blog_folder/$file_name/$file_name.html -o $root_folder/$blog_folder/$file_name/$file_name.md
- article_description="$(md2html $root_folder/$blog_folder/$file_name/$file_name.md | sed -E -e 's/ \(last\ update//g' -e 's/\{[^\}]*\}//g' -e 's/<code>|<\/code>//g' -e 's/<em>|<\/em>//g')"
+ article_description="$(md2html $root_folder/md/$file_name/$file_name.md | sed -E -e 's/ \(last\ update//g' -e 's/\{[^\}]*\}//g' -e 's/<code>|<\/code>//g' -e 's/<em>|<\/em>//g')"
rm $root_folder/$blog_folder/$file_name/$file_name.md
# Create RSS feed item
@@ -80,6 +79,8 @@ check_rss_feed_last_build() {
done
}
+[ ! -d $root_folder ] && echo "error: root_folder: $root_folder not found" && exit 1
+
echo "* root_folder: $root_folder"
echo "* blog_folder: $blog_folder"
echo "* blog_index_file: $blog_index_file"
