kloeckner.com.ar

a backup of my entire webpage
Index Commits Files Refs README LICENSE
commit 801a7f8fe9ec44ace426e5be716017f8cef0cbb3
parent 2ff44700615731cd62e24562121a866d36dfe100
Author: mjkloeckner <martin.cachari@gmail.com>
Date:   Mon, 10 Oct 2022 19:50:31 -0300

Updated generating scripts, README.md, font preload and more

New generating scripts introduced, build.sh and build_page.sh; build.sh
depends on build_page.sh since build.sh executes build_page.sh
on every md file located on md folder and generating an html page on
dest folder given as an argument

Added template.html which build_page.sh *depends on*
*TODO*: remote id=top from template.html since they are no longer
needed

README.md updated

Now only the woff2 format of fonts is preloaded since is the one that
newer browser use, plus is a better forma

Diffstat:
MREADME.md | 14+++++++++++++-
Mabout.html | 7+++++--
Mblog.html | 7+++++--
Mblog/dwm-config/dwm-config.html | 7+++++--
Mblog/nerdearla-2022/nerdearla-2019.jpeg | 0
Mblog/nerdearla-2022/nerdearla-2022.html | 63+++++++++++++++++++++++++++++++++++----------------------------
Mblog/sav/sav.gif | 0
Mblog/sav/sav.html | 59++++++++++++++++++++++++++---------------------------------
Mblog/vim-config/vim-config.html | 7+++++--
Abuild.sh | 13+++++++++++++
Abuild_page.sh | 96+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Mcommon/header.shtml | 2+-
Mcss/style.css | 37++++++++++++++++++++++++-------------
Acv.pdf | 0
Mfonts/fonts.css | 9+++++++++
Mindex.html | 10+++++++---
Amd/nerdearla-2022/nerdearla-2019.jpeg | 0
Amd/nerdearla-2022/nerdearla-2019.png | 0
Amd/nerdearla-2022/nerdearla-2022.md | 33+++++++++++++++++++++++++++++++++
Amd/sav/sav.gif | 0
Amd/sav/sav.md | 25+++++++++++++++++++++++++
Dresume.pdf | 0
Mrss.xml | 21++++++++++++++++++---
Msync.sh | 24+++++++++++++-----------
Atemplate.html | 31+++++++++++++++++++++++++++++++
25 files changed, 364 insertions(+), 101 deletions(-)
diff --git a/README.md b/README.md
@@ -1,3 +1,15 @@
 # kloeckner.com.ar
 
-This is a backup of my entire webpage
+This is a backup of my webpage
+
+## Fonts used
+
+- Logo: [Futura Medium](https://www.futurafree.com/fonts/futura-medium-font-free-download/)
+- Dates: [Ubuntu Mono Regular](https://fonts.google.com/specimen/Ubuntu+Mono)
+- Misc. icons: [Font Awesome](https://fontawesome.com/)
+
+## License
+
+Webpage generating scripts are licensed under [MIT]().
+
+The content of the webpage is licensed under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/)
diff --git a/about.html b/about.html
@@ -4,9 +4,12 @@
     <head>
         <title>About | 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.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="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='stylesheet' type='text/css' href="/css/about_style.css">
diff --git a/blog.html b/blog.html
@@ -4,9 +4,12 @@
     <head>
         <title>Blog | 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.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="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">
diff --git a/blog/dwm-config/dwm-config.html b/blog/dwm-config/dwm-config.html
@@ -7,9 +7,12 @@
 
         <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.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="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">
diff --git a/blog/nerdearla-2022/nerdearla-2019.jpeg b/blog/nerdearla-2022/nerdearla-2019.jpeg
Binary files differ.
diff --git a/blog/nerdearla-2022/nerdearla-2022.html b/blog/nerdearla-2022/nerdearla-2022.html
@@ -1,49 +1,56 @@
 <!DOCTYPE html>
-<html  lang="en" >
-    <head>
+<html lang="en">
+    <head id=top>
         <meta charset="utf-8">
-        <meta name="generator" content="pandoc">
+        <meta name="generator" content="Shell script">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-                        <meta name="article-date" content="23-Sep-2022">
-                        <meta name="article-title" content="I'm going to Nerdearla 2022">
-
-        <title>I'm going to Nerdearla 2022 | Martin'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">
+        <meta name="article-author" content="$article-author$">
+        <meta name="article-date" content="23-Sep-2022">
+        <meta name="article-title" content="I'm going to Nerdearla 2022">
 
+        <title>I'm going to Nerdearla 2022 | Martin Klöckner's Webpage</title>
         <link rel='stylesheet' type='text/css' href="/css/style.css">
         <link rel="icon" href="/favicon.png">
-        <style type="text/css">code{white-space: pre;}</style>
     </head>
 
-    <body>
+    <body id=top>
         <!--#include virtual="/common/header.shtml" -->
 
         <article>
             <link rel='stylesheet' type='text/css' href="/css/article_style.css">
 
-            <h1 id=article-title>I’m going to Nerdearla 2022</h1><p class="article-date">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="/blog/nerdearla-2022/nerdearla-2019.png"><img src="nerdearla-2019.jpeg" title="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>
+<h1 id=article-title>I&#8217;m going to Nerdearla 2022</h1><p class="article-date">23-Sep-2022</p>
+
+<p>As the title says I&#8217;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&#8217;ve been there for the first time in 2019. I remember that <a href="https://en.wikipedia.org/wiki/Jon_Hall_(programmer)">John &#8216;Maddog&#8217; Hall</a> was making a presentation called &#8220;50 years of UNIX and the landing on the Moon&#8221;, 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&#8217;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
+</code></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>$ sed -e "s&#47;\$article-title\\$&#47;$title&#47;" -e "s&#47;\$article-date\\$&#47;$date&#47;" \
+    -e "s&#47;\$pagetitle\\$&#47;$pagetitle&#47;" -e &#39;&#47;\$body\$&#47;r.&#47;body.html&#39; \
+    -e &#39;&#47;\$body\$&#47;d&#39; $template &#62; $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>$ .&#47;build.sh nerdearla-2022.md
+</code></pre>
 
             <script type="text/javascript" src="/js/article-date.js"></script>
             <!--#include virtual="/common/end_of_article.shtml" -->
         </article>
+
         <!--#include virtual="/common/footer.shtml" -->
     </body>
 </html>
diff --git a/blog/sav/sav.gif b/blog/sav/sav.gif
Binary files differ.
diff --git a/blog/sav/sav.html b/blog/sav/sav.html
@@ -1,60 +1,53 @@
 <!DOCTYPE html>
-<html  lang="en" >
-    <meta charset="utf-8">
-    <meta name="generator" content="pandoc">
-    <meta name="author" content="Martin J. Kloeckner">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+    <head id=top>
+        <meta charset="utf-8">
+        <meta name="generator" content="Shell script">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <head>
+        <meta name="article-author" content="$article-author$">
         <meta name="article-date" content="18-Sep-2022">
         <meta name="article-title" content="SAV - Sorting Algorithms Visualized">
 
         <title>SAV - Sorting Algorithms Visualized | 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='stylesheet' type='text/css' href="/css/style.css">
         <link rel="icon" href="/favicon.png">
-
-        <style type="text/css">code{white-space: pre;}</style>
     </head>
 
-    <body>
+    <body id=top>
         <!--#include virtual="/common/header.shtml" -->
 
         <article>
             <link rel='stylesheet' type='text/css' href="/css/article_style.css">
 
-            <h1 id="article-title">SAV - Sorting Algorithms Visualized</h1>
+<h1 id=article-title>SAV - Sorting Algorithms Visualized</h1><p class="article-date">18-Sep-2022</p>
 
-            <p class="article-date">18-Sep-2022</p>
+<p>18-09-22</p>
 
-            <script type="text/javascript" src="/js/article-date.js"></script>
+<p>This is a desktop app that shows how an array is being sorted using different algorithms.</p>
 
-            <p>This is a desktop app that shows how an array is being sorted using different sorting algorithms.</p>
-            <div id="article-screenshot">
-                <a href="sav.gif"><img src="sav.gif" title="Gif showing SAV working"/></a>
-            </div>
+<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>I made it using pure C and SDL2 for graphics, you can take a look at it&#8217;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>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&#8217;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>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>
+<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>
+
+            <script type="text/javascript" src="/js/article-date.js"></script>
             <!--#include virtual="/common/end_of_article.shtml" -->
         </article>
+
         <!--#include virtual="/common/footer.shtml" -->
     </body>
 </html>
diff --git a/blog/vim-config/vim-config.html b/blog/vim-config/vim-config.html
@@ -8,9 +8,12 @@
 
         <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.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="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">
diff --git a/build.sh b/build.sh
@@ -0,0 +1,13 @@
+#!/bin/sh
+
+# Builds a page for all the folders contained in md.
+# Copies entire folder to html 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;
+done
diff --git a/build_page.sh b/build_page.sh
@@ -0,0 +1,96 @@
+#!/bin/sh
+
+# Author: Martin Kloeckner - https://kloeckner.com.ar
+# Dependencies: sed, grep, lowdown.
+
+# Template: the converted html text is placed on a copy of the template
+# containing $body$ on it, $body$ then gets deleted.
+# Also the template should contain an $article-title$, $article-date$ and
+# $pagetitle$
+
+# The article title is considered to be the first h1 header found
+# in the markdown file
+
+# TODO: ...
+apply_syntax_highlight() {
+    commands=("make" "cat" "grep" "sed")
+    ul_commands=("sudo")
+
+    # Requires GNU grep
+    grep -zoP '<code.*>(.|\n)*?<\/code>' $1
+    for i in ${commands[@]}; do
+        echo $i
+    done
+    for i in ${ul_commands[@]}; do
+        echo $i
+    done
+}
+
+usage() {
+    echo "usage: $0 -i <input_file> -t <template_file>"
+}
+
+missing_operand() {
+    echo "$0: missing operands"
+    usage
+}
+
+check_opt() {
+    local opt OPTIND
+    while getopts ":i:t:d:" opt; do
+        case $opt in
+            i) input="$OPTARG";;
+            t) templ="$OPTARG";;
+            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="."
+}
+
+check_opt $@
+
+title=$(cat $input | head -n 3 | grep -oP '(?<=% title: \")(.*?)(?=\")')
+date=$(cat $input | head -n 3 | grep -oP '(?<=% date: \")(.*?)(?=\")')
+pagetitle="Martin Klöckner's Webpage"
+lang="en"
+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"
+
+# generate body (skips lines starting with `%`, they're considered metadata)
+sed '/^% /d' $input | lowdown --html-no-head-ids > 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' \
+    -e "s/<\/h1>/<\/h1><p class=\"article-date\">"$date"<\/p>/" body.html
+
+# indent: sed + `-e 's/^/\t\t\t/'`
+# (applying indent makes final html more pleasant to view, but causes code
+#     block to not be displayed properly)
+
+sed -e "s/\$article-title\\$/$title/" -e "s/\$article-date\\$/$date/" \
+    -e "s/\$pagetitle\\$/$pagetitle/" -e '/\$body\$/r./body.html' \
+    -e "s/\$lang\\$/$lang/" -e "s/\$generator\\$/$generator/" \
+    -e '/\$body\$/d' $template > "$dest_dir"/"$filename".html
+
+echo "==> "$dest_dir"/"$filename".html generated succesfully"
+echo ""
+
+rm body.html &> /dev/null
+
+# apply_syntax_highlight "$filename.html"
diff --git a/common/header.shtml b/common/header.shtml
@@ -7,7 +7,7 @@
          <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="/about" style="text-decoration: none;">about</a></li>
-             <li class="header_button"><a href="/resume.pdf" style="text-decoration: none;" target="_blank">cv<i class="icon-download">&#xe800;</i></a></li>
+             <li class="header_button"><a href="/cv.pdf" style="text-decoration: none;" target="_blank">cv<i class="icon-download">&#xe800;</i></a></li>
         </ul>
     </div>
 </header>
diff --git a/css/style.css b/css/style.css
@@ -10,17 +10,27 @@
          url('/fonts/Futura/FuturaBT-Medium.ttf'); /* IE9 Compat Modes */
 }
 
+/* @font-face { */
+/*     font-family: 'Ubuntu Mono'; */
+/*     src: local('Ubuntu Mono'), */
+/*          local('UbuntuMono-Regular'), */
+/*          local('UbuntuMono'), */
+/*          url('/fonts/UbuntuMono/UbuntuMono-Regular.woff2') format('woff2'), /1* Modern Browsers *1/ */
+/*          url('/fonts/UbuntuMono/UbuntuMono-Regular.woff') format('woff'), /1* Modern Browsers *1/ */
+/*          url('/fonts/UbuntuMono/UbuntuMono-Regular.ttf') format('truetype'), /1* Safari, Android, iOS *1/ */
+/*          url('/fonts/UbuntuMono/UbuntuMono-Regular.svg#svgUbuntuMono') format('svg'), /1* Legacy iOS *1/ */
+/*          url('/fonts/UbuntuMono/UbuntuMono-Regular.eot?#iefix') format('embedded-opentype'), /1* IE6-IE8 *1/ */
+/*          url('/fonts/UbuntuMono/UbuntuMono-Regular.ttf'); /1* IE9 Compat Modes *1/ */
+/* } */
+
+/* latin only */
 @font-face {
     font-family: 'Ubuntu Mono';
-    src: local('Ubuntu Mono'),
-         local('UbuntuMono-Regular'),
-         local('UbuntuMono'),
-         url('/fonts/UbuntuMono/UbuntuMono-Regular.woff2') format('woff2'), /* Modern Browsers */
-         url('/fonts/UbuntuMono/UbuntuMono-Regular.woff') format('woff'), /* Modern Browsers */
-         url('/fonts/UbuntuMono/UbuntuMono-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
-         url('/fonts/UbuntuMono/UbuntuMono-Regular.svg#svgUbuntuMono') format('svg'), /* Legacy iOS */
-         url('/fonts/UbuntuMono/UbuntuMono-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-         url('/fonts/UbuntuMono/UbuntuMono-Regular.ttf'); /* IE9 Compat Modes */
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/ubuntumono/v15/KFOjCneDtsqEr0keqCMhbCc6CsQ.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 @font-face {
@@ -352,8 +362,8 @@ code {
 
     margin-left: auto;
     margin-right: auto;
-    margin-top: .75em;
-    margin-bottom: .75em;
+    margin-top: .25em;
+    margin-bottom: 1.25em;
 
     /* max-width: 23em; */
     border-width: thin;
@@ -364,7 +374,8 @@ code {
 
     overflow: auto;
 
-    font-size: .9em;
+    font-size: 1em;
+    font-family: "Ubuntu Mono", monospace;
 }
 
 #command {
@@ -421,7 +432,7 @@ hr {
 }
 
 time {
-    font-family: "Ubuntu Mono";
+    font-family: "Ubuntu Mono", monospace;
     /* font-family: "IBMPlexMono"; */
 }
 
diff --git a/cv.pdf b/cv.pdf
Binary files differ.
diff --git a/fonts/fonts.css b/fonts/fonts.css
@@ -25,3 +25,12 @@
          url('/fonts/UbuntuMono/UbuntuMono-Regular.ttf'); /* IE9 Compat Modes */
 }
 
+/* latin only */
+@font-face {
+    font-family: 'Ubuntu Mono';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/ubuntumono/v15/KFOjCneDtsqEr0keqCMhbCc6CsQ.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/index.html b/index.html
@@ -6,11 +6,15 @@
     <head>
         <title>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.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="preload" href="/fonts/Futura/FuturaBT-Medium.ttf" as="font" type="font/ttf" crossorigin="anonymous"> -->
 
-        <link rel='stylesheet' type='text/css' href="css/style.css">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <!-- <link href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap" rel="stylesheet"> -->
+
+        <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>
diff --git a/md/nerdearla-2022/nerdearla-2019.jpeg b/md/nerdearla-2022/nerdearla-2019.jpeg
Binary files differ.
diff --git a/md/nerdearla-2022/nerdearla-2019.png b/md/nerdearla-2022/nerdearla-2019.png
Binary files differ.
diff --git a/md/nerdearla-2022/nerdearla-2022.md b/md/nerdearla-2022/nerdearla-2022.md
@@ -0,0 +1,33 @@
+% title: "I'm going to Nerdearla 2022"
+% date: "23-Sep-2022"
+
+# I'm going to Nerdearla 2022
+
+As the title says I'm going to be present at [Nerdearla](https://nerdear.la/).
+
+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 [John 'Maddog' Hall](https://en.wikipedia.org/wiki/Jon_Hall_(programmer)) was making a presentation called "50 years of UNIX and the landing on the Moon", you can find a record of the presentation [here](https://www.youtube.com/watch?v=9O_FnKZI6_M).
+
+[![Nerdearla 2019](nerdearla-2019.jpeg)](nerdearla-2019.png "Nerdearla 2019")
+
+It was my first talk ever and I loved it, sadly becouse of the pandemic I couldn't go in the past two years.
+
+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.
+
+```console
+$ 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
+
+```
+$ 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
+```
+
+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
+
+
+```
+$ ./build.sh nerdearla-2022.md
+```
diff --git a/md/sav/sav.gif b/md/sav/sav.gif
Binary files differ.
diff --git a/md/sav/sav.md b/md/sav/sav.md
@@ -0,0 +1,25 @@
+% title: "SAV - Sorting Algorithms Visualized"
+% date: "18-Sep-2022"
+
+# SAV - Sorting Algorithms Visualized
+
+18-09-22
+
+This is a desktop app that shows how an array is being sorted using different algorithms.
+
+![](sav.gif "Gif showing SAV working")
+
+I made it using pure C and SDL2 for graphics, you can take a look at it's source code on [Github](https://github.com/mjkloeckner/sav).
+
+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.
+
+
+Currently it supports the following algorithms:
+
+* bubble sort improved
+* insertion sort
+* merge sort wrapper
+* quick sort wrapper
+* shell sort
+* selection sort
+* heap sort
diff --git a/resume.pdf b/resume.pdf
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>Wed Sep 28 12:17:44 AM -03 2022</lastBuildDate>
+<lastBuildDate>Mon Oct 10 03:32:55 PM -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,12 +21,27 @@ Hall</a> was making a
 presentation called &quot;50 years of UNIX and the landing on the Moon&quot;, 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="/blog/nerdearla-2022/nerdearla-2019.png"><img src="nerdearla-2019.jpeg" alt="" title="Nerdearla 2019"></a></p>
+<p><img src="nerdearla-2019.jpeg" alt="" title="Nerdearla 2019"></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></html>]]>
+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>$ sed -e &quot;s/\$article-title\\$/$title/&quot; -e &quot;s/\$article-date\\$/$date/&quot; \
+    -e &quot;s/\$pagetitle\\$/$pagetitle/&quot; -e '/\$body\$/r./body.html' \
+    -e '/\$body\$/d' $template &gt; $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>$ ./build.sh nerdearla-2022.md
+</pre></html>]]>
                 </htmlData>
             </description>
 <pubDate>23-Sep-2022</pubDate>
diff --git a/sync.sh b/sync.sh
@@ -21,7 +21,7 @@ generate_blog_index() {
 }
 
 generate_latest_uploads() {
-    rm $root_folder/$latest_uploads_file 2> /dev/null
+    rm $root_folder/$latest_uploads_file &> /dev/null
 
     tail -n 5 $root_folder/$blog_index_file > $root_folder/$latest_uploads_file
 }
@@ -80,23 +80,25 @@ check_rss_feed_last_build() {
     done
 }
 
-echo "==> root_folder: $root_folder"
-echo "==> blog_folder: $blog_folder"
-echo "==> blog_index_file: $blog_index_file"
-echo "==> latest_uploads_file: $latest_uploads_file"
-echo "==> rss_feed_file: $rss_feed_file"
-
-set -xe
-
+echo "* root_folder: $root_folder"
+echo "* blog_folder: $blog_folder"
+echo "* blog_index_file: $blog_index_file"
+echo "* latest_uploads_file: $latest_uploads_file"
+echo "* rss_feed_file: $rss_feed_file"
+echo ""
+echo "+ generate_blog_index"
 generate_blog_index
 
+echo "+ generate_latest_uploads"
 generate_latest_uploads
 
 case "$1" in
-    --force-rss) generate_rss_feed;;
-    *) check_rss_feed_last_build;;
+    --force-rss) echo "+ generate_rss_feed"; generate_rss_feed;;
+    *) echo "==> Checking if rss feed needs to be rebuild"; check_rss_feed_last_build;;
 esac
 
+set -xe
+
 chown mk:mk $root_folder/$latest_uploads_file
 
 rm -rf /var/www/html 2>/dev/null
diff --git a/template.html b/template.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="$lang$">
+    <head id=top>
+        <meta charset="utf-8">
+        <meta name="generator" content="$generator$">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <meta name="article-author" content="$article-author$">
+        <meta name="article-date" content="$article-date$">
+        <meta name="article-title" content="$article-title$">
+
+        <title>$article-title$ | $pagetitle$</title>
+        <link rel='stylesheet' type='text/css' href="/css/style.css">
+        <link rel="icon" href="/favicon.png">
+    </head>
+
+    <body id=top>
+        <!--#include virtual="/common/header.shtml" -->
+
+        <article>
+            <link rel='stylesheet' type='text/css' href="/css/article_style.css">
+
+            $body$
+
+            <script type="text/javascript" src="/js/article-date.js"></script>
+            <!--#include virtual="/common/end_of_article.shtml" -->
+        </article>
+
+        <!--#include virtual="/common/footer.shtml" -->
+    </body>
+</html>