commit 432372caa4de762663835d2b2228e8bdffc591f6
parent a8044dd721a178896dc8b4825ce71a20d9bae93a
Author: Martin Kloeckner <mjkloeckner@gmail.com>
Date: Sun, 3 Nov 2024 01:20:21 -0300
list blog entries in html table
next step: make a similar layout to the one already done in the git
section where the data is the rows is presented vertically stacked, so
it is better for mobile devices
Diffstat:
8 files changed, 186 insertions(+), 52 deletions(-)
diff --git a/blog.html b/blog.html
@@ -9,11 +9,12 @@
<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.css">
+ <link rel='stylesheet' type='text/css' href="/css/blog.css">
<h1 id="blog-title">Blog</h1>
- <ul id=blog_entries>
+ <div id="blog_entries">
<!--#include virtual="/common/blog_index.shtml" -->
- </ul>
+ </div>
<div style="margin-top: 1em; padding-bottom: .75em; text-align: center; text-decoration: none;">
<a href="/rss.xml" id="rss"><img style="width: 1.5em; padding: 0;" src="/common/rss_logo.png" alt="rss logo"></a>
</div>
diff --git a/common/blog_index.shtml b/common/blog_index.shtml
@@ -1,8 +1,38 @@
-<li><b-time>02-Nov-2024</b-time> <a href="/blog/grub-linux-version-fix/grub-linux-version-fix.html">GRUB: Incorrect Linux version `booting Linux linux ...`</a></li>
-<li><b-time>14-Oct-2023</b-time> <a href="/blog/spending-money-on-thinkpads/spending-money-on-thinkpads.html">Spending money on thinkpads</a></li>
-<li><b-time>26-Oct-2022</b-time> <a href="/blog/bought-a-thinkpad/bought-a-thinkpad.html">I bought a ThinkPad x200 for $27</a></li>
-<li><b-time>21-Oct-2022</b-time> <a href="/blog/testing-syntax-highlight/testing-syntax-highlight.html">Testing code syntax highlight</a></li>
-<li><b-time>23-Sep-2022</b-time> <a href="/blog/nerdearla-2022/nerdearla-2022.html">I'm going to Nerdearla 2022</a></li>
-<li><b-time>18-Sep-2022</b-time> <a href="/blog/sav/sav.html">Sorting Algorithms Visualized</a></li>
-<li><b-time>23-Oct-2021</b-time> <a href="/blog/dwm-config/dwm-config.html">dwm: The dynamic window manager</a></li>
-<li><b-time>04-Mar-2021</b-time> <a href="/blog/vim-config/vim-config.html">vim: The keyboard driven text editor</a></li>
+ <table id="blog-index-table">
+ <thead id="blog-index-thead">
+ </thead>
+ <tbody id="blog-index-tbody">
+ <tr id="entry" onclick="window.location='/blog/grub-linux-version-fix/grub-linux-version-fix.html';">
+ <td id="date"><a href="/blog/grub-linux-version-fix/grub-linux-version-fix.html">02-Nov-2024</a></td>
+ <td id="title"><a href="/blog/grub-linux-version-fix/grub-linux-version-fix.html">GRUB: Incorrect Linux version `booting Linux linux ...`</a></td>
+ </tr>
+ <tr id="entry" onclick="window.location='/blog/spending-money-on-thinkpads/spending-money-on-thinkpads.html';">
+ <td id="date"><a href="/blog/spending-money-on-thinkpads/spending-money-on-thinkpads.html">14-Oct-2023</a></td>
+ <td id="title"><a href="/blog/spending-money-on-thinkpads/spending-money-on-thinkpads.html">Spending money on thinkpads</a></td>
+ </tr>
+ <tr id="entry" onclick="window.location='/blog/bought-a-thinkpad/bought-a-thinkpad.html';">
+ <td id="date"><a href="/blog/bought-a-thinkpad/bought-a-thinkpad.html">26-Oct-2022</a></td>
+ <td id="title"><a href="/blog/bought-a-thinkpad/bought-a-thinkpad.html">I bought a ThinkPad x200 for $27</a></td>
+ </tr>
+ <tr id="entry" onclick="window.location='/blog/testing-syntax-highlight/testing-syntax-highlight.html';">
+ <td id="date"><a href="/blog/testing-syntax-highlight/testing-syntax-highlight.html">21-Oct-2022</a></td>
+ <td id="title"><a href="/blog/testing-syntax-highlight/testing-syntax-highlight.html">Testing code syntax highlight</a></td>
+ </tr>
+ <tr id="entry" onclick="window.location='/blog/nerdearla-2022/nerdearla-2022.html';">
+ <td id="date"><a href="/blog/nerdearla-2022/nerdearla-2022.html">23-Sep-2022</a></td>
+ <td id="title"><a href="/blog/nerdearla-2022/nerdearla-2022.html">I'm going to Nerdearla 2022</a></td>
+ </tr>
+ <tr id="entry" onclick="window.location='/blog/sav/sav.html';">
+ <td id="date"><a href="/blog/sav/sav.html">18-Sep-2022</a></td>
+ <td id="title"><a href="/blog/sav/sav.html">Sorting Algorithms Visualized</a></td>
+ </tr>
+ <tr id="entry" onclick="window.location='/blog/dwm-config/dwm-config.html';">
+ <td id="date"><a href="/blog/dwm-config/dwm-config.html">23-Oct-2021</a></td>
+ <td id="title"><a href="/blog/dwm-config/dwm-config.html">dwm: The dynamic window manager</a></td>
+ </tr>
+ <tr id="entry" onclick="window.location='/blog/vim-config/vim-config.html';">
+ <td id="date"><a href="/blog/vim-config/vim-config.html">04-Mar-2021</a></td>
+ <td id="title"><a href="/blog/vim-config/vim-config.html">vim: The keyboard driven text editor</a></td>
+ </tr>
+ </tbody>
+</table>
diff --git a/common/latest_uploads.shtml b/common/latest_uploads.shtml
@@ -1,6 +1,30 @@
-<li><b-time>02-Nov-2024</b-time> <a href="/blog/grub-linux-version-fix/grub-linux-version-fix.html">GRUB: Incorrect Linux version `booting Linux linux ...`</a></li>
-<li><b-time>14-Oct-2023</b-time> <a href="/blog/spending-money-on-thinkpads/spending-money-on-thinkpads.html">Spending money on thinkpads</a></li>
-<li><b-time>26-Oct-2022</b-time> <a href="/blog/bought-a-thinkpad/bought-a-thinkpad.html">I bought a ThinkPad x200 for $27</a></li>
-<li><b-time>21-Oct-2022</b-time> <a href="/blog/testing-syntax-highlight/testing-syntax-highlight.html">Testing code syntax highlight</a></li>
-<li><b-time>23-Sep-2022</b-time> <a href="/blog/nerdearla-2022/nerdearla-2022.html">I'm going to Nerdearla 2022</a></li>
-<li><b-time>18-Sep-2022</b-time> <a href="/blog/sav/sav.html">Sorting Algorithms Visualized</a></li>
+ <table id="blog-index-table">
+ <thead id="blog-index-thead">
+ </thead>
+ <tbody id="blog-index-tbody">
+ <tr id="entry" onclick="window.location='/blog/grub-linux-version-fix/grub-linux-version-fix.html';">
+ <td id="date"><a href="/blog/grub-linux-version-fix/grub-linux-version-fix.html">02-Nov-2024</a></td>
+ <td id="title"><a href="/blog/grub-linux-version-fix/grub-linux-version-fix.html">GRUB: Incorrect Linux version `booting Linux linux ...`</a></td>
+ </tr>
+ <tr id="entry" onclick="window.location='/blog/spending-money-on-thinkpads/spending-money-on-thinkpads.html';">
+ <td id="date"><a href="/blog/spending-money-on-thinkpads/spending-money-on-thinkpads.html">14-Oct-2023</a></td>
+ <td id="title"><a href="/blog/spending-money-on-thinkpads/spending-money-on-thinkpads.html">Spending money on thinkpads</a></td>
+ </tr>
+ <tr id="entry" onclick="window.location='/blog/bought-a-thinkpad/bought-a-thinkpad.html';">
+ <td id="date"><a href="/blog/bought-a-thinkpad/bought-a-thinkpad.html">26-Oct-2022</a></td>
+ <td id="title"><a href="/blog/bought-a-thinkpad/bought-a-thinkpad.html">I bought a ThinkPad x200 for $27</a></td>
+ </tr>
+ <tr id="entry" onclick="window.location='/blog/testing-syntax-highlight/testing-syntax-highlight.html';">
+ <td id="date"><a href="/blog/testing-syntax-highlight/testing-syntax-highlight.html">21-Oct-2022</a></td>
+ <td id="title"><a href="/blog/testing-syntax-highlight/testing-syntax-highlight.html">Testing code syntax highlight</a></td>
+ </tr>
+ <tr id="entry" onclick="window.location='/blog/nerdearla-2022/nerdearla-2022.html';">
+ <td id="date"><a href="/blog/nerdearla-2022/nerdearla-2022.html">23-Sep-2022</a></td>
+ <td id="title"><a href="/blog/nerdearla-2022/nerdearla-2022.html">I'm going to Nerdearla 2022</a></td>
+ </tr>
+ <tr id="entry" onclick="window.location='/blog/sav/sav.html';">
+ <td id="date"><a href="/blog/sav/sav.html">18-Sep-2022</a></td>
+ <td id="title"><a href="/blog/sav/sav.html">Sorting Algorithms Visualized</a></td>
+ </tr>
+ </tbody>
+</table>
diff --git a/css/blog.css b/css/blog.css
@@ -0,0 +1,10 @@
+#blog-index-tbody #date a {
+ color: antiquewhite;
+ text-decoration: none;
+ padding-right: 5px;
+}
+
+#blog-index-tbody #date {
+ text-wrap: nowrap;
+ vertical-align: top;
+}
diff --git a/css/style.css b/css/style.css
@@ -312,11 +312,25 @@ hr {
color: crimson;
}
+/* list-style-type: none; /1* Remove bullets *1/ */
+/* padding: 0; */
+/* padding-bottom: .5em; */
+/* text-align: left; */
+
+#blog_entries #date a {
+ color: antiquewhite;
+ text-decoration: none;
+ padding-right: 5px;
+}
+
+#blog_entries #date {
+ text-wrap: nowrap;
+ vertical-align: top;
+}
+
#blog_entries {
- list-style-type: none; /* Remove bullets */
padding: 0;
- padding-bottom: .5em;
- text-align: left;
+ padding-bottom: 10px;
}
#latest-uploads {
diff --git a/index.html b/index.html
@@ -32,9 +32,9 @@
</div>
</div>
- <ul id=blog_entries>
+ <div id=blog_entries>
<!--#include virtual="/common/latest_uploads.shtml" -->
- </ul>
+ </div>
<p id=blog-entries>See all <a href="/blog">blog entries</a></p>
diff --git a/scripts/js/count-blog-posts.js b/scripts/js/count-blog-posts.js
@@ -2,8 +2,10 @@ var file;
fetch('/common/blog_index.shtml')
.then(response => response.text())
.then((data) => {
- var match = data.match(/\r?\n/g);
+ // var match = data.match(/\r?\n/g);
// alert(match.length);
var content = document.getElementById('blog-entries');
- content.innerHTML += " (" + match.length + ")";
+ var count = document.getElementById("blog-index-table").rows.length;
+ content.innerHTML += " (" + count + ")";
})
+
diff --git a/scripts/sync.sh b/scripts/sync.sh
@@ -8,33 +8,53 @@ latest_uploads_file="common/latest_uploads.shtml"
rss_feed_file=$root_folder/"rss.xml" # RSS feed file
blog_folders=$("$root_folder"/scripts/sort_blog_index.py "$blog_folder")
index_latest_uploads_count=6
+blog_index_need_regen=false
-generate_blog_index() {
- update=false
+check_if_blog_index_needs_regen() {
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.md --format "%Y")
- blog_index_file_date=$(stat $blog_index_file --format "%Y")
+ last_modified=$(stat "$root_folder/$blog_folder/$i/$i.md" --format "%Y")
+ blog_index_file_date=$(stat "$blog_index_file" --format "%Y")
- if [ $last_modified -gt $blog_index_file_date ]
+ if [ "$last_modified" -gt "$blog_index_file_date" ]
then
echo " └─ $i.html is newer than $blog_index_file"
- echo "+ Regenerating blog index file"
- update=true
+ echo "+ Blog index file needs to be regenerated"
+ blog_index_need_regen=true
break
fi
fi
done
+}
+
+# $destination_file, $entries_count=all (optional)
+generate_blog_index() {
+ [ "$blog_index_need_regen" = "false" ] && \
+ echo \" └─ Blog index file up to date\" && return 1
- [ ! -z "$1" ] && update=true;
- [ "$update" = "false" ] && echo \" └─ Blog index file up to date\" && return 1
echo " └─ Updating blog index"
+ generate_blog_index_table
+}
+
+# $destination_file, $entries_count=all (optional)
+generate_blog_index_table() {
+ [ ! -z "$1" ] && destination_file="$1" || destination_file="$root_folder/$blog_index_file"
+ [ ! -z "$2" ] && count="$2" || count=
+
+ rm -rfv "$destination_file" ||:
+ touch "$destination_file"
- rm -rf $root_folder/$blog_index_file ||:
- touch $root_folder/$blog_index_file
+ cat << EOF > "$destination_file"
+ <table id="blog-index-table">
+ <thead id="blog-index-thead">
+ </thead>
+ <tbody id="blog-index-tbody">
+EOF
+ curr_count=1
for i in ${blog_folders[@]}; do
+ [ ! -z "$count" ] && [ "$curr_count" -gt "$count" ] && break
+
# deprecated format
# article_date=$(cat $i | grep -oP '(?<=% date: \")(.*?)(?=\")')
# article_title=$(cat $i | grep -oP '(?<=% title: \")(.*?)(?=\")')
@@ -44,17 +64,41 @@ generate_blog_index() {
file_name=$(echo "$i" | grep -oE '[^/]*$' | cut -d '.' -f 1)
- printf "<li><b-time>%s</b-time> <a href=\"/$blog_folder/$file_name/$file_name.html\">%s</a></li>\n" \
- "${article_date}" "${article_title}" >> $root_folder/$blog_index_file
+ # printf "<li><b-time>%s</b-time> <a href=\"/$blog_folder/$file_name/$file_name.html\">%s</a></li>\n" \
+ # "${article_date}" "${article_title}" >> $root_folder/$blog_index_file
+
+ # printf "<li><b-time>%s</b-time> <a href=\"/$blog_folder/$file_name/$file_name.html\">%s</a></li>\n" \
+ # "${article_date}" "${article_title}" >> $root_folder/$blog_index_file
+
+ cat << EOF >> "$destination_file"
+ <tr id="entry" onclick="window.location='/$blog_folder/$file_name/$file_name.html';">
+ <td id="date"><a href="/$blog_folder/$file_name/$file_name.html">$article_date</a></td>
+ <td id="title"><a href="/$blog_folder/$file_name/$file_name.html">$article_title</a></td>
+ </tr>
+EOF
+
+ curr_count=$((curr_count + 1))
done
+
+ cat << EOF >> "$destination_file"
+ </tbody>
+</table>
+EOF
}
generate_latest_uploads() {
- rm -rf $root_folder/$latest_uploads_file ||:
+ [ "$blog_index_need_regen" = "false" ] && \
+ echo \" └─ Latest uploads up to date\" && return 1
+
+ echo " └─ Updating latest uploads file"
- head -n $index_latest_uploads_count $root_folder/$blog_index_file > $root_folder/$latest_uploads_file
+ rm -rf "$root_folder/$latest_uploads_file" ||:
+
+ # head -n "$index_latest_uploads_count" "$root_folder/$blog_index_file" > "$root_folder/$latest_uploads_file"
+ generate_blog_index_table "$root_folder/$latest_uploads_file" "$index_latest_uploads_count"
}
+
generate_rss_feed() {
rm $rss_feed_file &> /dev/null
@@ -128,20 +172,29 @@ 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 "+ generate_blog_index"
-generate_blog_index
-
-if [ $? -eq 1 ]; then
- echo "+ generate_latest_uploads"
- generate_latest_uploads
-else
- echo "+ generate_latest_uploads"
- echo " └─ Index file up to date"
-fi
+check_if_blog_index_needs_regen
case "$1" in
--force-update)
- echo "+ generate_rss_feed"; generate_rss_feed;
- echo "+ generate_blog_index"; generate_blog_index "force-update";;
+ echo "+ [FORCED] generate_rss_feed"; generate_rss_feed;
+ echo "+ [FORCED] blog_index_need_regen=true"; blog_index_need_regen=true;
+ break;;
*) echo "+ check_rss_feed_last_build"; check_rss_feed_last_build;;
esac
+
+echo "+ generate_blog_index"
+generate_blog_index
+
+echo "+ generate_latest_uploads"
+generate_latest_uploads
+
+# <table>
+# <thead id="blog-index-thead">
+# </thead>
+# <tbody id="blog-index-tbody">
+# <tr id="entry">
+# <td id="date"></td>
+# <td id="title"></td>
+# </tr>
+# </tbody>
+# </table>
