commit 829dd1f1ec9ec6da50fd2c8e24dd7e99f9bfd264
parent d890b5f57e5c844bec76e082f2b180b94f65cd6f
Author: mjkloeckner <martin.cachari@gmail.com>
Date: Fri, 21 Oct 2022 17:36:01 -0300
Added Makefile, Updated blog, article_style and build scripts
A new Makefile to manage the webpage is included, now we can deploy
without entering password via ssh-keys
The blog posts content gets updated as well as the article_style which
was not showing padding in the bottom of the h4 headers
scripts/sort_blog_index.py gets updated since it was using html files to
order date, now it's using the markdown files. Something similar happend
with scripts/build_page.sh which was comparing build dates from the html
file to update the rss feed file, causing to update the rss feed always
since the html files are generated everytime that the build_page.sh
script gets executed
Diffstat:
20 files changed, 259 insertions(+), 58 deletions(-)
diff --git a/.gitignore b/.gitignore
@@ -7,3 +7,4 @@ blog
syntax-highlight
webp_exclude
blog/**
+common/latest_uploads.shtml
diff --git a/Makefile b/Makefile
@@ -0,0 +1,11 @@
+build:
+ ./scripts/build.sh
+ ./scripts/sync.sh
+
+sync: build
+ sudo ./scripts/deploy_local.sh
+
+deploy:
+ rsync -e "ssh -i ~/.ssh/key-mini" -uorahvP --delete ./** root@mini:/var/www/html/
+
+.PHONY: build sync deploy
diff --git a/common/blog_index.shtml b/common/blog_index.shtml
@@ -1,4 +1,5 @@
-<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>
+<li><time></time> <a href="/md/testing-syntax-highlight/testing-syntax-highlight"></a></li>
+<li><time></time> <a href="/md/nerdearla-2022/nerdearla-2022"></a></li>
+<li><time></time> <a href="/md/sav/sav"></a></li>
+<li><time></time> <a href="/md/dwm-config/dwm-config"></a></li>
+<li><time></time> <a href="/md/vim-config/vim-config"></a></li>
diff --git a/common/latest_uploads.shtml b/common/latest_uploads.shtml
@@ -1,4 +1,5 @@
-<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>
+<li><time></time> <a href="/md/testing-syntax-highlight/testing-syntax-highlight"></a></li>
+<li><time></time> <a href="/md/nerdearla-2022/nerdearla-2022"></a></li>
+<li><time></time> <a href="/md/sav/sav"></a></li>
+<li><time></time> <a href="/md/dwm-config/dwm-config"></a></li>
+<li><time></time> <a href="/md/vim-config/vim-config"></a></li>
diff --git a/css/article_style.css b/css/article_style.css
@@ -38,10 +38,26 @@ img {
align-items: center;
}
+h2 {
+ padding-bottom: 1em;
+}
+
+h3 {
+ font-size: 1.15em;
+}
+
+h4 {
+ padding-bottom: .5em;
+}
+
p {
padding-bottom: 1em;
}
+em {
+ font-weight: bold;
+}
+
ul {
margin-left: 1.5em;
padding-bottom: 1em;
diff --git a/md/dwm-config/debugging.jpeg b/md/dwm-config/debugging.jpeg
Binary files differ.
diff --git a/md/dwm-config/debugging.png b/md/dwm-config/debugging.png
Binary files differ.
diff --git a/md/dwm-config/dwm-config.md b/md/dwm-config/dwm-config.md
@@ -60,26 +60,65 @@ 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
dwm should start without any problems.
+This is what vanilla dwm looks like:
+
+[](vanilla.png "Vanilla dwm")
+
## Customizing dwm
-Basically you configure dwm 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/mjkoeckner/dotfiles/blob/master/.config/dwm/config.def.h)
-which if you open with a text editor you can see that is a C
-file that you can edit, for example the line \"static const int topbar\"
+### Setting a wallpaper
+
+Before getting into dwm configuration, let's add a wallpaper to make things look
+a little bit nicer. You can set a wallpaper from different ways, the simpler for
+me is installing feh and the executing the following command
+
+```console
+$ feh --bg-fill <image>
+```
+
+you can also avoid setting --bg-fill and chossing other feh options to set the wallpaper
+(read man feh).
+
+Then add \`.fehbg &\` to your .xinitrc so the wallpaper gets loaded when Xorg starts, it is important
+that you add it before dwm gets executed, otherwise it will never be ran
+
+```console
+$HOME/.fehbg &
+
+exec dwm
+```
+
+A graphical way of setting a wallpaper is with nitrogen, just install nitrogen open it
+with dmenu (MOD+p by default), include the folder where you have your wallpaper, select the
+image you want and the apply. To make changes persistent on every startup
+add this to you .xinirc file
+
+```console
+nitrogen --restore
+
+exec dwm
+```
+### dwm configuration
+
+Basically you configure dwm by editing its source code, there is a C header file, named
+[config.h](https://github.com/mjkoeckner/dotfiles/blob/master/.config/dwm/config.def.h)
+in the root folder of dwm, if you open it with a text editor you can see a
+lot of variables, for example the line \`static const int topbar = 0\`
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 respectively.
-After every change you make to the source code you need to copy
-config.def.h to config.h and then recompile dwm
+if the status bar should spawn in the top or bottom of the screen respectively.
+You can also change the MOD key (by default its left alt), I like to remap
+mine to left Super (windows key).
+
+After every change you make to the source code you need to *recompile dwm*.
-### Show information on the status bar
+
+#### 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 value of WM\_NAME enviroment
@@ -102,7 +141,7 @@ desired data to stdout, then you can include them on the config.h of
dwmblocks. It is important that the scripts are on your user's PATH, otherwise
it won't work.
-### Getting emoji support on dwm
+#### 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, it's going to either show it as a box or in
@@ -126,13 +165,27 @@ I've also added \`DejaVu Sans\` to the fonts array because, sometimes, the emoji
with a little box or square next to them, this was a quick solution.
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, since this causes dwm to crash sometimes.
+from drw.c, between lines 136-150 there is a function named \`iscol\`, you
+need to remove it or comment it, since this causes dwm to crash.
+
+```c
+/* Do not allow using color fonts. This is a workaround for a BadLength
+ * error from Xft with color glyphs. Modelled on the Xterm workaround. See
+ * https://bugzilla.redhat.com/show_bug.cgi?id=1498269
+ * https://lists.suckless.org/dev/1701/30932.html
+ * https://bugs.debian.org/cgi-bin/bugreport.cgi?bug=916349
+ * and lots more all over the internet.
+ */
+FcBool iscol;
+if(FcPatternGetBool(xfont->pattern, FC_COLOR, 0, &iscol) == FcResultMatch && iscol) {
+ XftFontClose(drw->dpy, xfont);
+ return NULL;
+}
+```
Finally you can recompile dwm and, if everything went fine, you will get emoji support.
-### Patches in dwm
+#### Patching dwm
Since dwm is a simple program than doesn't include much features, if
you want to extend it, for example by adding a
@@ -143,9 +196,11 @@ make sure you got it 'patch' installed, although I think it comes with
most linux distributions by default nowdays.
To apply a patch navigate to dwm's root folder and execute this command
+
```console
$ patch -p1 < <file.diff>
```
+
being \`file.diff\` the patch file downloaded previoulsy of course.
If you never patched dwm before then probably no errors would be
@@ -161,6 +216,18 @@ 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.
+## More screenshots
+
+#### Debugging [6502 emulator](https://github.com/mjkloeckner/6502) with dwm, vim and tmux
+
+[](debugging.png "Debugging 6502 emulator")
+
+
+
+#### Floating window manager?
+
+[](floating.png "Floating show while raining")
+
## Useful links
- [What is a window manager?](https://en.wikipedia.org/wiki/Window_manager)
diff --git a/md/dwm-config/floating.jpeg b/md/dwm-config/floating.jpeg
Binary files differ.
diff --git a/md/dwm-config/floating.png b/md/dwm-config/floating.png
Binary files differ.
diff --git a/md/dwm-config/vanilla.jpeg b/md/dwm-config/vanilla.jpeg
Binary files differ.
diff --git a/md/dwm-config/vanilla.png b/md/dwm-config/vanilla.png
Binary files differ.
diff --git a/md/nerdearla-2022/nerdearla-2022.md b/md/nerdearla-2022/nerdearla-2022.md
@@ -9,6 +9,6 @@ This will be my second time that I attend to this event since I've been there fo
[](nerdearla-2019.png "Nerdearla 2019")
-It was my first talk ever and I loved it, sadly, because of the pandemic the event could only be remote the past two years.
+That time was my first talk ever, and I loved it, sadly, because of the pandemic, the event could only be remote the past two years.
-The event is half remote half presential and the entrance is free, you can get your free tickets at [registro.nerdear.la](https://registro.nerdear.la/). It takes place at Centro cultural Konex at Once, Buenos Aires, on Oct 19 to Oct 22.
+This time the event is hibrid, meaning half remote half presential, as always the entrance is free, you can get your free tickets at [registro.nerdear.la](https://registro.nerdear.la/). The presential part takes place at Centro cultural Konex at Once, Buenos Aires, on Oct 19 to Oct 22 of 2022.
diff --git a/md/sav/sav.md b/md/sav/sav.md
@@ -1,7 +1,7 @@
-% title: "Sorting Algorithms Visualized in SDL2"
+% title: "Sorting Algorithms Visualized with SDL2"
% date: "18-Sep-2022"
-# Sorting Algorithms Visualized in SDL2
+# Sorting Algorithms Visualized with SDL2
SAV, short for Sorting Algorithms Visualized, is a desktop app that shows how an array is being sorted using different algorithms.
diff --git a/md/testing-syntax-highlight/testing-syntax-highlight.md b/md/testing-syntax-highlight/testing-syntax-highlight.md
@@ -0,0 +1,78 @@
+% title: "Testing code syntax highlight"
+% date: "21-Oct-2022"
+
+# Testing code syntax highlight
+
+This is a testing page for a script that I'm using to highlight
+code blocks within an html file.
+
+The script is a heavily modified version of [markdown-code-highlight-go](https://github.com/zupzup/markdown-code-highlight-go)
+that accepts an html file name as command line argument, and prints
+to stdout the html content but with all text inside code tags surrounded
+by css selectors.
+
+For example, this is some C code:
+
+```c
+#include <stdio.h>
+
+int main(void) {
+ char *hw = "Hello, world!\n";
+
+ printf("%s\n", hw);
+ return 0;
+}
+```
+
+This is part of the shell script that I use to build the html blog pages
+from markdown files
+
+```console
+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
+```
+
+This is an old JavaScript script that I was using to add the last modified date to a blog
+post:
+
+```js
+// https://stackoverflow.com/questions/3552461/how-do-i-format-a-date-in-javascript
+function join(t, a, s) {
+ function format(m) {
+ let f = new Intl.DateTimeFormat('en', m);
+ return f.format(t);
+ }
+ return a.map(format).join(s);
+}
+
+var dt = new Date(document.lastModified);
+
+let format = [{day: 'numeric'}, {month: 'short'}, {year: 'numeric'}];
+let dts = join(dt, format, '-');
+
+document.querySelector('.article-date').innerHTML += " (last updated " + dts + ")";
+```
+I removed it from the webpage because it was not working properly, the \`document.lastModified\`
+was always returning the current date. In stead, I added a new part to the shell script that
+builds the pages, the new content parses the output of \`stat\` command and appends it to the article date.
+
+This code is part of the script that I'm using for highlighting code blocks. It's written in
+golang, a language that I didn't knew until I needed to modify [markdown-code-highlight-go](https://github.com/zupzup/markdown-code-highlight-go) to make it work on my use case.
+
+```go
+rp := strings.NewReplacer("<code class=\"language-", "", "\">", "", "</code>", "")
+
+style := styles.Get("monokai")
+if style == nil {
+ style = styles.Fallback
+}
+
+formatter := formatters.Get("html")
+if formatter == nil {
+ formatter = formatters.Fallback
+}
+```
+
+This part is using the [chroma](https://github.com/alecthomas/chroma) syntax highlighter, at the moment I couldn't make it work, but I would like to, since it's much richer in languages support and themes than the previous method.
diff --git a/md/vim-config/vim-config.md b/md/vim-config/vim-config.md
@@ -25,10 +25,7 @@ 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 is that, It's very
-lightweign in terms of system resources. Vim is 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.
+lightweign in terms of system resources.
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"
@@ -42,9 +39,52 @@ how to use vim in an interactive way.
## Vim configuration
+Vim is also highly configurable, you can do configure vim by editing the *.vimrc*
+text file, which should be in you home directory in Linux or BSD based OSs,
+if not, you can *create* a new blank one and start from zero.
+
+You can search for vim settings or copy from other's config files, you can also check
+out my [vim config file](https://github.com/mjkloeckner/dotfiles/blob/master/.vimrc)
+and take out the parts that would fit your needs. The basic settings are almost present
+in every config file like:
+
+```vim
+set syntax=on
+set encoding=utf-8
+set tabstop=4
+set shiftwidth=4
+set number
+set mouse+=a
+```
+
## Vim plugins
By default Vim comes with a lot of features missing, 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.
+features you can enable them by installing *plugins*. Vim pluggins are
+like strips of other's config files that you can include in yours.
+
+The simpler way of managing pluggins is with a pluggin manager, I use
+[vim-plug](https://github.com/junegunn/vim-plug).
+
+### Installing a pluggin
+
+First install vim-plug or any other vim plugging manager, for vim-plug enter
+the link I left you above, and follow the instructions. For any other plugging manger
+I think would be similar.
+
+After you got a pluggin manager installed simply call the plugins that you want from
+you .vimrc file, for example I'm using vim-plug and the section
+where I call the pluggins in my .vimrc file looks like this:
+
+```vim
+Plug 'christoomey/vim-tmux-navigator'
+Plug 'justinmk/vim-syntax-extra'
+Plug 'tpope/vim-commentary'
+Plug 'tpope/vim-surround'
+Plug 'jiangmiao/auto-pairs'
+Plug 'preservim/nerdtree'
+Plug 'morhetz/gruvbox'
+Plug 'alvan/vim-closetag'
+Plug 'hankchiutw/nerdtree-ranger.vim'
+```
diff --git a/scripts/build_page.sh b/scripts/build_page.sh
@@ -12,21 +12,6 @@
# 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
-}
-
div_article_title_w_logo() {
logo_src=$(echo $1 | grep -zoP '(?<=src=\")(.*?)(?=\")' | tr -d '\0')
logo_alt=$(echo $1 | grep -zoP '(?<=alt=\")(.*?)(?=\")' | tr -d '\0')
@@ -121,6 +106,4 @@ rm body.html &> /dev/null
mv tmp.html "$dest_dir"/"$filename".html
-# cp -rf sh.html "$dest_dir"/"$filename".html
-
echo "==> "$filename".html generated succesfully"
diff --git a/scripts/deploy_local.sh b/scripts/deploy_local.sh
@@ -4,10 +4,10 @@ root_folder="/home/mk/soydev/webp/kloeckner.com.ar"
set -xe
-rm -rf /var/www/html &>/dev/null
+rm -rf /var/www/html &>/dev/null ||:
cp -rf "$root_folder" /var/www/html
-rm /var/www/html/{rss_feed_top.xml,README.md} &> /dev/null
+rm /var/www/html/README.md &> /dev/null
systemctl restart nginx
diff --git a/scripts/sort_blog_index.py b/scripts/sort_blog_index.py
@@ -30,8 +30,9 @@ import datetime
import sys
date_delimiter = "-"
-regex = re.compile('(?<=<meta name="article-date" content=")(.*?)(?=")')
-suffix = '.html'
+# regex = re.compile('(?<=<meta name="article-date" content=")(.*?)(?=")')
+regex = re.compile('(?<=% date: \")(.*?)(?=\")')
+suffix = '.md'
paths = []
if len(sys.argv) == 1:
diff --git a/scripts/sync.sh b/scripts/sync.sh
@@ -1,7 +1,7 @@
#!/bin/sh
root_folder="/home/mk/soydev/webp/kloeckner.com.ar"
-blog_folder="blog"
+blog_folder="md"
blog_index_file="common/blog_index.shtml"
latest_uploads_file="common/latest_uploads.shtml"
rss_feed_file=$root_folder/"rss.xml" # RSS feed file
@@ -68,21 +68,23 @@ generate_rss_feed() {
check_rss_feed_last_build() {
[ ! -e $rss_feed_file ] && echo "+ Regenerating rss feed" && generate_rss_feed && return
+ updated=false
for i in $(ls $root_folder/$blog_folder); do
# if exists and it's a directory
if [ -d $root_folder/$blog_folder/$i ]; then
- last_modified=$(stat $root_folder/$blog_folder/$i/$i.html --format "%Y")
+ last_modified=$(stat $root_folder/$blog_folder/$i/$i.md --format "%Y")
rss_file_date=$(stat $rss_feed_file --format "%Y")
if [ $last_modified -gt $rss_file_date ]
then
- echo "==> $i.html is newer than $rss_feed_file"
+ echo " └─ $i.html is newer than $rss_feed_file"
echo "+ Regenerating rss feed"
- generate_rss_feed
+ generate_rss_feed && updated=true
break
fi
fi
done
+ $updated || echo " └─ Rss feed file up to date"
}
[ ! -d $root_folder ] && echo "error: root_folder: $root_folder not found" && exit 1
