diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5fc42c5 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +/publish \ No newline at end of file diff --git a/assets/hack-bold.woff2 b/assets/hack-bold.woff2 new file mode 100644 index 0000000..1155477 Binary files /dev/null and b/assets/hack-bold.woff2 differ diff --git a/assets/hack-bolditalic.woff2 b/assets/hack-bolditalic.woff2 new file mode 100644 index 0000000..46ff1c4 Binary files /dev/null and b/assets/hack-bolditalic.woff2 differ diff --git a/assets/hack-italic.woff2 b/assets/hack-italic.woff2 new file mode 100644 index 0000000..1e7630c Binary files /dev/null and b/assets/hack-italic.woff2 differ diff --git a/assets/hack-regular.woff2 b/assets/hack-regular.woff2 new file mode 100644 index 0000000..524465c Binary files /dev/null and b/assets/hack-regular.woff2 differ diff --git a/assets/hack.css b/assets/hack.css new file mode 100644 index 0000000..df17027 --- /dev/null +++ b/assets/hack.css @@ -0,0 +1,34 @@ +/*! + * Hack typeface https://github.com/source-foundry/Hack + * License: https://github.com/source-foundry/Hack/blob/master/LICENSE.md + */ +/* FONT PATHS + * -------------------------- */ +@font-face { + font-family: 'Hack'; + src: url('fonts/hack-regular.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-regular.woff?sha=3114f1256') format('woff'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'Hack'; + src: url('fonts/hack-bold.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-bold.woff?sha=3114f1256') format('woff'); + font-weight: 700; + font-style: normal; +} + +@font-face { + font-family: 'Hack'; + src: url('fonts/hack-italic.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-italic.woff?sha=3114f1256') format('woff'); + font-weight: 400; + font-style: italic; +} + +@font-face { + font-family: 'Hack'; + src: url('fonts/hack-bolditalic.woff2?sha=3114f1256') format('woff2'), url('fonts/hack-bolditalic.woff?sha=3114f1256') format('woff'); + font-weight: 700; + font-style: italic; +} + diff --git a/blog.html b/blog.html deleted file mode 100644 index a060176..0000000 --- a/blog.html +++ /dev/null @@ -1,47 +0,0 @@ - - - Blog - - - - - - - -
- Home - | - RSS Feed -
-

Blog

- -

How To Use Your Email Client For Physical Mail

Mon, 17 Feb 2020 11:55:42 +0100

Whether it's to re-read a conversation, find a plane ticket I ordered or check -when a meeting was planned, I often find myself looking up old emails. It's -usually easy to do so because email clients are designed for the task: Many of -them support full-text search and some even complement that with neat tagging -and categorization systems. To be honest I have become completely dependent on ... Continue reading

-
-

Creating a Simple Static Blog

Sat, 08 Feb 2020 12:14:16 +0100

I love personal websites. It's amazing that people can share content with the -entire world just by writing some text and throwing it behind a web server. I -wanted to know what that is like, so I set out to create a personal website of -my own. As you can see I succeeded in doing so, but getting here wasn't as -straight forward as I initially thought it would be. I thought that, being a ... Continue reading

-
-

Introduction

Sat, 08 Feb 2020 09:30:06 +0100

Hello, welcome to my blog! My name is Hugo. I am a 22 year old Software -Engineering student from the Netherlands. Software development is a huge part -of my life, I write a lot of (weird) programs to scratch my own itch and most -software I create is open_source by default. I also run a one-man company that -provides some IT services on the side. ... Continue reading

-
-
- diff --git a/feed.xml b/feed.xml deleted file mode 100644 index fd793b4..0000000 --- a/feed.xml +++ /dev/null @@ -1,161 +0,0 @@ - - - - Hugot Blog - https://hugot.nl/blog.html - Hugo's personal blog - en-us - Thu, 16 Apr 2020 08:36:12 +0200 - Thu, 16 Apr 2020 08:36:12 +0200 - http://blogs.law.harvard.edu/tech/rss - Hugo's Custom Bash Script - social@hugot.nl (Hugot) - infra@hugot.nl (Hugot Infra) - How To Use Your Email Client For Physical Mail https://hugot.nl/posts/use-your-mail-client-for-physical-mail/index.html <h1> - How To Use Your Email Client For Physical Mail - </h1> - <p> - Whether it&#39;s to re-read a conversation, find a plane ticket I ordered or - check when a meeting was planned, I often find myself looking up old - emails. It&#39;s usually easy to do so because email clients are designed for - the task: Many of them support full-text search and some even complement - that with neat tagging and categorization systems. To be honest I have - become completely dependent on those features for my day to day - life. Having full-text search and some sort of categorization for email - can be a huge time saver. When it comes to physical mail however, I still - have to browse through stacks of paper to (hopefully) find what I&#39;m - looking for. I figured that it&#39;d be nice to use my fancy email client to - deal with physical mail as well, so I found a way to do just that. Turns - out it&#39;s pretty simple! - </p> - <p> - The main objective here is to transform our physical mail into an email - that can be received, indexed and read by our email client of choice. Now, - one way to do that would be to type the contents of our mail into an email - by hand, but - <i> - ain&#39;t nobody got time for that! - </i> - . The (more appealing) - alternative is to use a document scanner. I have a single purpose scanner - unit from Canon that I hook up to my laptop for just this purpose. - </p> - <p> - It isn&#39;t as simple as just emailing a scanned document to ourselves - though: email clients are smart, but they can&#39;t understand a word of text - in our PDF or JPEG of a physical document. They need content to be in - plain text form in order to provide us with some of their best features - like full-text search. We&#39;ll have to somehow transform our scanned - documents into plain text that we can include in our email. To do this, we - can use tesseract. Tesseract is an optical character recognition (OCR) - engine, meaning that it can recognize text in images and extract it for - us. Installing it should be easy on Debian derivative distros like - Ubuntu. My laptop is running Debian unstable so I just ran - <code> - apt - install tesseract - </code> - and started using it. Using it is as easy as - upening up a terminal and typing - <code> - tesseract FILE.jpg - OUTPUT - </code> - . That command will save all the text that tesseract is able - to recognize in the image FILE.jpg to a file called OUTPUT.txt. - </p> - <aside> - <i> - Side note: I am Dutch, so most of my physical mail is in Dutch. To - make tesseract better understand my mail I installed the - tesseract-ocr-nld package using - <code> - apt install - tesseract-ocr-nld - </code> - . You can check what other language packs are - available by using - <code> - apt search tesseract-ocr - </code> - . - </i> - </aside> - <p> - All we have to do from there is copy-paste the contents of that file into - an email and send it to ourselves! Depending on the formatting of the - input document, the output may not always be pleasant to read. We can - account for this by including the original document as an attachment to - the email. That way we get the best of both worlds: we can use the search - functionality of our email client to find the document, and then read it - in its original form by opening the attachment. - </p> - <p> - This is all easy enough, but I&#39;m lazy. I didn&#39;t feel like opening up my - email client and doing manual copy-pasting, so I decided to automate the - process a little further. I have postfix setup on my system to relay to my - mail server, so I can simply use the - <code> - mail - </code> - command to send - emails without a GUI mail client. I combined that with tesseract in a - little bash script. The script iterates through all of its arguments and - interprets them as filenames of scanned documents. It calls tesseract to - extract text from them, concatenates the results, attaches the files to an - email and sends it to my personal email address. Now all I have to do is - run the script with filenames of some documents and my job is done. If - anyone is interested in an actual program that does the same thing and - doesn&#39;t require you to setup postfix, let me know! I might consider - authoring one if it&#39;s useful to more people than just myself. The script - I&#39;m currently using can be found - <a href="scan-to-mailpile.bash.html"> - here - (pretty) - </a> - and - <a href="scan-to-mailpile.bash"> - here (raw) - </a> - , but I - don&#39;t recommend using it if you don&#39;t fully understand its contents, it&#39;s - not a polished user experience 🤓. - </p>Mon, 17 Feb 2020 11:55:42 +0100 How To Use Your Email Client For Physical Mail NDc2MDg1MjYxIDQxODUK - - Creating a Simple Static Blog https://hugot.nl/posts/simple-static-blog/index.htmlSat, 08 Feb 2020 12:14:16 +0100 Creating a Simple Static Blog MjU5OTIyNDIwMyA2MTI5Cg== - - Introduction https://hugot.nl/posts/introduction/index.html <h1> - Introduction - </h1> - <p> - Hello, welcome to my blog! My name is Hugo. I am a 22 year old Software Engineering - student from the Netherlands. Software development is a huge part of my life, I write a - lot of (weird) programs to scratch my own itch and most software I create - is - <a href="https://github.com/hugot"> - open source - </a> - by default. I also run a one-man - company that provides some IT services on the side. - </p> - <p> - Between working on projects and studying I like to watch movies &amp; series, listen to music - &amp; podcasts, ride my road bike and take hikes. - </p> - <h2> - What kind of blog is this? - </h2> - <p> - Because I&#39;m quite new to this and I want to keep myself interested, I won&#39;t be - limiting myself to a single topic. You can expect me to post about a variety of topics - that may interest/annoy/excite me at any given moment. - </p> - <p> - May my posts be interesting and my posting schedule be consistent 🤓🖖 - </p> - <p> - I hope to see you around! - Hugo - </p>Sat, 08 Feb 2020 09:30:06 +0100 Introduction MzYzMzkyNDgwOCA5MDcK - - - diff --git a/generate-blog.bash b/generate-blog.bash index 3ae8704..7bfde25 100755 --- a/generate-blog.bash +++ b/generate-blog.bash @@ -17,7 +17,7 @@ here="$(dirname "$(readlink -f "${BASH_SOURCE[0]}")")" printf 'Changing directory: ' pushd "$here" || exit $? -posts_file="$here/posts.txt" +posts_file="$here/publish.txt" if ! [[ -f "$posts_file" ]]; then printf 'Posts file "%s" not found. Generation cancelled.\n' "$posts_file" >&2 @@ -54,9 +54,9 @@ print-blog-html-top() {
- Home - | - RSS Feed + Home + | + RSS Feed

Blog

' @@ -71,6 +71,41 @@ rfc-822-date-time() { LC_ALL=C date "$@" --rfc-email } +print-post-html-top() { + declare title="$1" + + cat < + + + ${title} + + + + +
+ Blog + | + RSS Feed +
+
+EOF +} + +print-post-html-bottom() { + declare publish_date="$1" last_edit_date="$2" + + cat < + First published: ${publish_date}
+ Last edited: ${last_edit_date} + +
+ + +EOF +} + # Note: pubDate and lastBuildDate are both set to the current time. print-blog-rss-top() { cat <" } +publish_dir="$here/publish" + site_url="https://hugot.nl" -blog_html="$here/blog.html" +blog_html="$publish_dir/blog.html" new_html="$blog_html.new" -blog_rss="$here/feed.xml" +blog_rss="$publish_dir/feed.xml" new_rss="$blog_rss.new" +mkdir -p "$publish_dir" || exit $? + print-blog-html-top > "$new_html" print-blog-rss-top > "$new_rss" @@ -132,20 +171,26 @@ while read -r post_html; do # The title should be on the 2nd line of text, right after the link to the # homepage. This is a bit inflexible but it will do for now. - title="$(tail -n +3 <<<"$text" | head -n 1 | tr -d '*')" || exit $? + title="$(head -n 1 <<<"$text" | tr -d '*')" || exit $? # Use the first 5 lines after the title as post excerpt. - excerpt="$(tail -n +4 <<<"$text" | head -n 5)" || exit $? + excerpt="$(tail -n +2 <<<"$text" | head -n 5)" || exit $? # Escape just the article element for use in the RSS feed article description. # This way the entire article can be read from an RSS reader. - article_html="$(pup article < "$post_html" | head -n -1 | tail -n +2 | escape-html)" + article_html="$({ head -n -1 | tail -n +2 | escape-html; } < "$post_html")" # Escape the post html file name to safely use it in the generated html. href="$(escape-html <<<"$post_html")" || exit $? post_dir="$(dirname "$post_html")" || exit $? + post_publish_dir="$publish_dir/posts/$(basename "$post_dir")" || exit $? pubdate_file="$post_dir/publish_date.txt" + checksum_file="$post_dir/last_checksum.txt" + last_edit_file="$post_dir/last_edit_date.txt" + + current_checksum="$(cksum < "$post_html")" + declare checksum='' # Determine a publishing date for the post if [[ -f "$pubdate_file" ]]; then @@ -155,8 +200,37 @@ while read -r post_html; do echo "$pubdate" > "$pubdate_file" fi + if [[ -f "$checksum_file" ]]; then + read -r checksum < "$checksum_file" + else + echo "$current_checksum" > "$checksum_file" + checksum="$current_checksum" + fi + + if [[ -f "$last_edit_file" ]]; then + read -r last_edit_date < "$last_edit_file" + fi + + if [[ "$checksum" != "$current_checksum" ]]; then + last_edit_date="$(date)" + + echo "$last_edit_date" > "$last_edit_file" + echo "$current_checksum" > "$checksum_file" + fi + # Convert publishing date to be conform RFC 822 pubdate="$(rfc-822-date-time --date="$pubdate")" + last_edit_date="$(rfc-822-date-time --date="$last_edit_date")" + + declare post_index_file="$post_publish_dir/index.html" + if [[ "$checksum" != "$current_checksum" ]] || ! [[ -f "$post_index_file" ]]; then + printf 'Publishing %s\n' "$post_html" >&2 + mkdir -p "$post_publish_dir" + + print-post-html-top "$title" > "$post_index_file" + cat "$post_html" >> "$post_index_file" + print-post-html-bottom "$pubdate" "$last_edit_date" >> "$post_index_file" + fi { el div @@ -181,7 +255,7 @@ while read -r post_html; do el-enclose description "$article_html" el-enclose pubDate "$pubdate" - echo "$title$(base64 <(cksum <<<"$text"))" + echo "$title$(base64 <<<"$checksum")" el-close item } >> "$new_rss" @@ -193,4 +267,9 @@ print-blog-rss-bottom >> "$new_rss" mv -v "$new_html" "$blog_html" || exit $? mv -v "$new_rss" "$blog_rss" || exit $? +cp -v "$here/style.css" "$publish_dir/style.css" +cp -v "$here/index.html" "$publish_dir/index.html" + +cp -rv "$here/assets" "$publish_dir/assets" + echo 'SUCCESS!' diff --git a/index.html b/index.html index a8ba354..bd025a0 100644 --- a/index.html +++ b/index.html @@ -10,8 +10,9 @@ Blog

Hugo's homepage

- Hello and welcome to my personal homepage! I'll add some info about myself to - this page soon. In the mean time, maybe take a look at my blog + Hello and welcome to my personal homepage! I'll add some info about my + projects to this page soon. In the mean time, maybe take a look at + my blog

diff --git a/posts/introduction/index.html b/posts/introduction/index.html index 1fa1c2a..eef6259 100644 --- a/posts/introduction/index.html +++ b/posts/introduction/index.html @@ -1,42 +1,28 @@ - - - - Introduction - - - +

Introduction

- - Home -
-

Introduction

+

+ Hello, welcome to my blog! My name is Hugo. I am a 22 year old Software Engineering + student from the Netherlands. Software development is a huge part of my life, I write a + lot of (weird) programs to scratch my own itch and most software I create + is open source by default. I also run a one-man + company that provides some IT services on the side. +

-

- Hello, welcome to my blog! My name is Hugo. I am a 22 year old Software Engineering - student from the Netherlands. Software development is a huge part of my life, I write a - lot of (weird) programs to scratch my own itch and most software I create - is open source by default. I also run a one-man - company that provides some IT services on the side. -

+

+ Between working on projects and studying I like to watch movies & series, listen to music + & podcasts, ride my road bike and take hikes. +

-

- Between working on projects and studying I like to watch movies & series, listen to music - & podcasts, ride my road bike and take hikes. -

+

What kind of blog is this?

+

+ Because I'm quite new to this and I want to keep myself interested, I won't be + limiting myself to a single topic. You can expect me to post about a variety of topics + that may interest/annoy/excite me at any given moment. +

-

What kind of blog is this?

-

- Because I'm quite new to this and I want to keep myself interested, I won't be - limiting myself to a single topic. You can expect me to post about a variety of topics - that may interest/annoy/excite me at any given moment. -

+

May my posts be interesting and my posting schedule be consistent 🤓🖖

-

May my posts be interesting and my posting schedule be consistent 🤓🖖

- -

I hope to see you around! - Hugo

-
- - +

I hope to see you around! - Hugo

diff --git a/posts/introduction/last_checksum.txt b/posts/introduction/last_checksum.txt new file mode 100644 index 0000000..823d5d3 --- /dev/null +++ b/posts/introduction/last_checksum.txt @@ -0,0 +1 @@ +1911746966 1043 diff --git a/posts/introduction/last_edit_date.txt b/posts/introduction/last_edit_date.txt new file mode 100644 index 0000000..84a707e --- /dev/null +++ b/posts/introduction/last_edit_date.txt @@ -0,0 +1 @@ +Fri May 20 11:15:16 PM CEST 2022 diff --git a/posts/simple-static-blog/index.html b/posts/simple-static-blog/index.html index 4249da2..93b7baf 100644 --- a/posts/simple-static-blog/index.html +++ b/posts/simple-static-blog/index.html @@ -1,183 +1,171 @@ - - - - Creating a Simple Static Blog - - - - - - Home -

Creating a Simple Static Blog

- -

- I love personal websites. It's amazing that people can share content with the - entire world just by writing some text and throwing it behind a web server. I - wanted to know what that is like, so I set out to create a personal website of - my own. As you can see I succeeded in doing so, but getting here wasn't as - straight forward as I initially thought it would be. I thought that, being a - programmer and knowing a thing or two about web servers, setting up my own - website was going to be easy: How complicated can it be to throw some text - behind a web server, right?! I was wrong. Throwing text behind a web server - can be very complicated (and wasteful). But it doesn't have to be! -

- -

The search for a CMS

-

- The first thought that popped into my head when I got started was: I need to - find myself a CMS. I had a few requirements: my site should be - self-hosted, be lightweight, have no JavaScript in it and it should look - pretty. I also wanted to be able to write blog posts in markdown using my - trusty text editor. The first CMSes that came to mind were WordPress, Ghost, - Jekyll and Hugo. I don't want to get into too much detail, so I'll summarize - my judgments here without any nuance: Wordpress is the devil, Ghost is great - but too bulky and both Jekyll and Hugo required me to learn about theming and - project structure which I deemed too much effort. I just wanted to write some - text and throw it behind a web server, but all solutions I saw were sophisticated - programs that were designed to "scale", support "modern - workflows" or be "easy to use with integrated WYSIWYG - editors". I didn't feel like exploring the idea further and gave up on - having a website for a while. -

- -

- Then, a few months back, I learned about writefreely. Writefreely is an open - source web application from write.as that lets users create blogs that - federate through the fediverse. I had just started to become acquainted with - the fediverse and it seemed like a cool idea to me at the time, so me and a - friend decided to set up our own instance. It wasn't too hard to set up and - once it was running I only needed a couple of hours to add some custom - style sheets. I finally had a fully functioning blog that satisfied all of my - needs! -

- -

- After that the holiday season came along and I turned my back on blogging for - a while. When I checked on our instance three or four weeks later I was - displeased to discover that spammers had created accounts on the instance and - were posting spammy garbage. Sure, we could just close registrations. But this - event reminded me that hosting any dynamic web application on the public - internet is a big responsibility that involves keeping software up to date, - monitoring and doing other configuration/maintenance work. Not to mention - having to do regular database backups. I didn't feel like having to do any of - that, I already have by hands full with self-hosting a bunch of other - services. Once again I had found a complicated solution for a simple problem: - I just wanted to throw some text behind a web server, remember? Why did I need to use a CMS - again? -

- -

- CMSes seem to offer solutions to a problem that I don't have: I don't mind - writing plain html and I most certainly don't need a WISYWIG editor. I also - don't need plugins, dynamic code for analytics, pretty yaml or toml - configuration files, templates, extensive theming, admin panels, markdown, - mailing lists, comment threads or any other common CMS features. I just want - to throw some text behind a web server, so why not just write some HTML and do - exactly that? -

- -

A CMS in ~200 lines

-

- It was decided: I was going to blog in plain HTML. Having figured out what I - actually wanted, I went to work. The first order of business was creating a - style sheet to make things look good. I made it my goal to use as little CSS - as possible and I managed to limit myself to just these 23 lines: -

- - - -
-
-    html {
+

Creating a Simple Static Blog

+ +

+ I love personal websites. It's amazing that people can share content with the + entire world just by writing some text and throwing it behind a web server. I + wanted to know what that is like, so I set out to create a personal website of + my own. As you can see I succeeded in doing so, but getting here wasn't as + straight forward as I initially thought it would be. I thought that, being a + programmer and knowing a thing or two about web servers, setting up my own + website was going to be easy: How complicated can it be to throw some text + behind a web server, right?! I was wrong. Throwing text behind a web server + can be very complicated (and wasteful). But it doesn't have to be! +

+ +

The search for a CMS

+

+ The first thought that popped into my head when I got started was: I need to + find myself a CMS. I had a few requirements: my site should be + self-hosted, be lightweight, have no JavaScript in it and it should look + pretty. I also wanted to be able to write blog posts in markdown using my + trusty text editor. The first CMSes that came to mind were WordPress, Ghost, + Jekyll and Hugo. I don't want to get into too much detail, so I'll summarize + my judgments here without any nuance: Wordpress is the devil, Ghost is great + but too bulky and both Jekyll and Hugo required me to learn about theming and + project structure which I deemed too much effort. I just wanted to write some + text and throw it behind a web server, but all solutions I saw were sophisticated + programs that were designed to "scale", support "modern + workflows" or be "easy to use with integrated WYSIWYG + editors". I didn't feel like exploring the idea further and gave up on + having a website for a while. +

+ +

+ Then, a few months back, I learned about writefreely. Writefreely is an open + source web application from write.as that lets users create blogs that + federate through the fediverse. I had just started to become acquainted with + the fediverse and it seemed like a cool idea to me at the time, so me and a + friend decided to set up our own instance. It wasn't too hard to set up and + once it was running I only needed a couple of hours to add some custom + style sheets. I finally had a fully functioning blog that satisfied all of my + needs! +

+ +

+ After that the holiday season came along and I turned my back on blogging for + a while. When I checked on our instance three or four weeks later I was + displeased to discover that spammers had created accounts on the instance and + were posting spammy garbage. Sure, we could just close registrations. But this + event reminded me that hosting any dynamic web application on the public + internet is a big responsibility that involves keeping software up to date, + monitoring and doing other configuration/maintenance work. Not to mention + having to do regular database backups. I didn't feel like having to do any of + that, I already have by hands full with self-hosting a bunch of other + services. Once again I had found a complicated solution for a simple problem: + I just wanted to throw some text behind a web server, remember? Why did I need to use a CMS + again? +

+ +

+ CMSes seem to offer solutions to a problem that I don't have: I don't mind + writing plain html and I most certainly don't need a WISYWIG editor. I also + don't need plugins, dynamic code for analytics, pretty yaml or toml + configuration files, templates, extensive theming, admin panels, markdown, + mailing lists, comment threads or any other common CMS features. I just want + to throw some text behind a web server, so why not just write some HTML and do + exactly that? +

+ +

A CMS in ~200 lines

+

+ It was decided: I was going to blog in plain HTML. Having figured out what I + actually wanted, I went to work. The first order of business was creating a + style sheet to make things look good. I made it my goal to use as little CSS + as possible and I managed to limit myself to just these 23 lines: +

+ + + +
+
+  html {
     font-family: Helvetica, Arial, sans-serif;
     color: #5b4636;
     background-color: #f4ecd8;
-    }
+  }
 
-    body {
+  body {
     padding: 1em;
     margin: auto;
-    }
+  }
 
-    @media only all and (pointer: coarse), (pointer: none) {
+  @media only all and (pointer: coarse), (pointer: none) {
     body {
-    font-size: 5.5vmin;
-    }
+      font-size: 5.5vmin;
     }
+  }
 
-    @media only all and (pointer: fine) {
+  @media only all and (pointer: fine) {
     body {
-    font-size: calc(16px + 0.6vmin);
-    min-width: 500px;
-    max-width: 50em;
-    }
+      font-size: calc(16px + 0.6vmin);
+      min-width: 500px;
+      max-width: 50em;
     }
-   
-
- -

- This is all the CSS I need to have a responsive website that looks pretty (I - stole the colors from firefox's reader mode btw). It's such a small amount - that I don't mind copy-pasting it at the top of all new HTML pages that I add - to my website. This might make it harder to change the styling later, but it - has the added benefit that each page is a standalone document. So for - example wget PAGE_URL will download a HTML page that looks - exactly the same locally as it does on the web without having to download any - extra assets. -

- -

- The next challenge was creating and maintaining the article listing page and - the RSS feed for the blog. I don't mind typing HTML pages, but typing out a - page and an RSS feed containing excerpts/titles from other files gets old soon - and I'd be bound to forget updating its content every once in a while. This - seemed like a perfect occasion to write a little bash script, so I did. You - can find the script here (raw) and - here (pretty). What it basically - does is read in a file called posts.txt that has html filenames in it, - separated by newlines. Using those filenames and the contents of the files it - then generates a HTML page (called blog.html) - and an RSS feed (called feed.xml). -

- -

- I keep all of this neatly stored under version control - here, so deploying a new version - is as easy as running git pull on my web server. I can honestly say that - this is the simplest, most user-friendly CMS that I have ever used, and it - only took me several months to figure out that this is exactly what I needed 🤓. -

- -

- So, to conclude this story: websites are just HTML. You don't need fancy - programs or WYSIWYG editors to create a website. Just a text editor, a web - server and some spare time. -

- - + } +
+
+ +

+ This is all the CSS I need to have a responsive website that looks pretty (I + stole the colors from firefox's reader mode btw). It's such a small amount + that I don't mind copy-pasting it at the top of all new HTML pages that I add + to my website. This might make it harder to change the styling later, but it + has the added benefit that each page is a standalone document. So for + example wget PAGE_URL will download a HTML page that looks + exactly the same locally as it does on the web without having to download any + extra assets. +

+ +

+ The next challenge was creating and maintaining the article listing page and + the RSS feed for the blog. I don't mind typing HTML pages, but typing out a + page and an RSS feed containing excerpts/titles from other files gets old soon + and I'd be bound to forget updating its content every once in a while. This + seemed like a perfect occasion to write a little bash script, so I did. You + can find the script here (raw) and + here (pretty). What it basically + does is read in a file called posts.txt that has html filenames in it, + separated by newlines. Using those filenames and the contents of the files it + then generates a HTML page (called blog.html) + and an RSS feed (called feed.xml). +

+ +

+ I keep all of this neatly stored under version control + here, so deploying a new version + is as easy as running git pull on my web server. I can honestly say that + this is the simplest, most user-friendly CMS that I have ever used, and it + only took me several months to figure out that this is exactly what I needed 🤓. +

+ +

+ So, to conclude this story: websites are just HTML. You don't need fancy + programs or WYSIWYG editors to create a website. Just a text editor, a web + server and some spare time. +

diff --git a/posts/simple-static-blog/last_checksum.txt b/posts/simple-static-blog/last_checksum.txt new file mode 100644 index 0000000..7a25150 --- /dev/null +++ b/posts/simple-static-blog/last_checksum.txt @@ -0,0 +1 @@ +699691065 7458 diff --git a/posts/simple-static-blog/last_edit_date.txt b/posts/simple-static-blog/last_edit_date.txt new file mode 100644 index 0000000..d4100c1 --- /dev/null +++ b/posts/simple-static-blog/last_edit_date.txt @@ -0,0 +1 @@ +Fri May 20 11:25:14 PM CEST 2022 diff --git a/posts/use-your-mail-client-for-physical-mail/index.html b/posts/use-your-mail-client-for-physical-mail/index.html index 46d39cf..aa0b1db 100644 --- a/posts/use-your-mail-client-for-physical-mail/index.html +++ b/posts/use-your-mail-client-for-physical-mail/index.html @@ -1,98 +1,84 @@ - - - - Use Your Email Client For Physical Mail - - - +

How To Use Your Email Client For Physical Mail

+

+ Whether it's to re-read a conversation, find a plane ticket I ordered or + check when a meeting was planned, I often find myself looking up old + emails. It's usually easy to do so because email clients are designed for + the task: Many of them support full-text search and some even complement + that with neat tagging and categorization systems. To be honest I have + become completely dependent on those features for my day to day + life. Having full-text search and some sort of categorization for email + can be a huge time saver. When it comes to physical mail however, I still + have to browse through stacks of paper to (hopefully) find what I'm + looking for. I figured that it'd be nice to use my fancy email client to + deal with physical mail as well, so I found a way to do just that. Turns + out it's pretty simple! +

- - Home -
-

How To Use Your Email Client For Physical Mail

-

- Whether it's to re-read a conversation, find a plane ticket I ordered or - check when a meeting was planned, I often find myself looking up old - emails. It's usually easy to do so because email clients are designed for - the task: Many of them support full-text search and some even complement - that with neat tagging and categorization systems. To be honest I have - become completely dependent on those features for my day to day - life. Having full-text search and some sort of categorization for email - can be a huge time saver. When it comes to physical mail however, I still - have to browse through stacks of paper to (hopefully) find what I'm - looking for. I figured that it'd be nice to use my fancy email client to - deal with physical mail as well, so I found a way to do just that. Turns - out it's pretty simple! -

+

+ The main objective here is to transform our physical mail into an email + that can be received, indexed and read by our email client of choice. Now, + one way to do that would be to type the contents of our mail into an email + by hand, but ain't nobody got time for that!. The (more appealing) + alternative is to use a document scanner. I have a single purpose scanner + unit from Canon that I hook up to my laptop for just this purpose. +

-

- The main objective here is to transform our physical mail into an email - that can be received, indexed and read by our email client of choice. Now, - one way to do that would be to type the contents of our mail into an email - by hand, but ain't nobody got time for that!. The (more appealing) - alternative is to use a document scanner. I have a single purpose scanner - unit from Canon that I hook up to my laptop for just this purpose. -

+

+ It isn't as simple as just emailing a scanned document to ourselves + though: email clients are smart, but they can't understand a word of text + in our PDF or JPEG of a physical document. They need content to be in + plain text form in order to provide us with some of their best features + like full-text search. We'll have to somehow transform our scanned + documents into plain text that we can include in our email. To do this, we + can use tesseract. Tesseract is an optical character recognition (OCR) + engine, meaning that it can recognize text in images and extract it for + us. Installing it should be easy on Debian derivative distros like + Ubuntu. My laptop is running Debian unstable so I just ran apt + install tesseract and started using it. Using it is as easy as + upening up a terminal and typing tesseract FILE.jpg + OUTPUT. That command will save all the text that tesseract is able + to recognize in the image FILE.jpg to a file called OUTPUT.txt. +

-

- It isn't as simple as just emailing a scanned document to ourselves - though: email clients are smart, but they can't understand a word of text - in our PDF or JPEG of a physical document. They need content to be in - plain text form in order to provide us with some of their best features - like full-text search. We'll have to somehow transform our scanned - documents into plain text that we can include in our email. To do this, we - can use tesseract. Tesseract is an optical character recognition (OCR) - engine, meaning that it can recognize text in images and extract it for - us. Installing it should be easy on Debian derivative distros like - Ubuntu. My laptop is running Debian unstable so I just ran apt - install tesseract and started using it. Using it is as easy as - upening up a terminal and typing tesseract FILE.jpg - OUTPUT. That command will save all the text that tesseract is able - to recognize in the image FILE.jpg to a file called OUTPUT.txt. -

+ - +

+ All we have to do from there is copy-paste the contents of that file into + an email and send it to ourselves! Depending on the formatting of the + input document, the output may not always be pleasant to read. We can + account for this by including the original document as an attachment to + the email. That way we get the best of both worlds: we can use the search + functionality of our email client to find the document, and then read it + in its original form by opening the attachment. +

-

- All we have to do from there is copy-paste the contents of that file into - an email and send it to ourselves! Depending on the formatting of the - input document, the output may not always be pleasant to read. We can - account for this by including the original document as an attachment to - the email. That way we get the best of both worlds: we can use the search - functionality of our email client to find the document, and then read it - in its original form by opening the attachment. -

- -

- This is all easy enough, but I'm lazy. I didn't feel like opening up my - email client and doing manual copy-pasting, so I decided to automate the - process a little further. I have postfix setup on my system to relay to my - mail server, so I can simply use the mail command to send - emails without a GUI mail client. I combined that with tesseract in a - little bash script. The script iterates through all of its arguments and - interprets them as filenames of scanned documents. It calls tesseract to - extract text from them, concatenates the results, attaches the files to an - email and sends it to my personal email address. Now all I have to do is - run the script with filenames of some documents and my job is done. If - anyone is interested in an actual program that does the same thing and - doesn't require you to setup postfix, let me know! I might consider - authoring one if it's useful to more people than just myself. The script - I'm currently using can be found here - (pretty) and here (raw), but I - don't recommend using it if you don't fully understand its contents, it's - not a polished user experience 🤓. -

-
- - +

+ This is all easy enough, but I'm lazy. I didn't feel like opening up my + email client and doing manual copy-pasting, so I decided to automate the + process a little further. I have postfix setup on my system to relay to my + mail server, so I can simply use the mail command to send + emails without a GUI mail client. I combined that with tesseract in a + little bash script. The script iterates through all of its arguments and + interprets them as filenames of scanned documents. It calls tesseract to + extract text from them, concatenates the results, attaches the files to an + email and sends it to my personal email address. Now all I have to do is + run the script with filenames of some documents and my job is done. If + anyone is interested in an actual program that does the same thing and + doesn't require you to setup postfix, let me know! I might consider + authoring one if it's useful to more people than just myself. The script + I'm currently using can be found here + (pretty) and here (raw), but I + don't recommend using it if you don't fully understand its contents, it's + not a polished user experience 🤓. +

diff --git a/posts/use-your-mail-client-for-physical-mail/last_checksum.txt b/posts/use-your-mail-client-for-physical-mail/last_checksum.txt new file mode 100644 index 0000000..68749be --- /dev/null +++ b/posts/use-your-mail-client-for-physical-mail/last_checksum.txt @@ -0,0 +1 @@ +3811067194 4500 diff --git a/posts/use-your-mail-client-for-physical-mail/last_edit_date.txt b/posts/use-your-mail-client-for-physical-mail/last_edit_date.txt new file mode 100644 index 0000000..84a707e --- /dev/null +++ b/posts/use-your-mail-client-for-physical-mail/last_edit_date.txt @@ -0,0 +1 @@ +Fri May 20 11:15:16 PM CEST 2022 diff --git a/posts.txt b/publish.txt similarity index 100% rename from posts.txt rename to publish.txt diff --git a/style.css b/style.css index f8b6fda..f9b3f85 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,5 @@ +@import "assets/hack.css"; + a:visited { color: #c2e; } @@ -17,36 +19,70 @@ body { margin: auto; } +pre { + white-space: pre-wrap; +} + +body { + font-size: 18px; +} + aside { - width: 30%; - min-width: 10em; - background-color: rgba(0,0,0, 0.1); - float: right; - padding: 1em; - margin: 1em; + width: inherit; } -pre { - white-space: pre-wrap; +.publish-date { + font-size: 14px; } -@media only all and (pointer: coarse), (pointer: none) { +code { + font-family: Hack, monospace; + background-color: rgba(0,0,0, 0.05); +} + +.nowrap { + white-space: nowrap; +} + +@media only all and (min-width: 640px) { body { - font-size: 5.5vmin; + line-height: 1.4; + font-size: 16px; + max-width: 80ch; } - aside { - width: inherit; + .publish-date { + font-size: 12px; + } -} -body { - line-height: 1.4; + aside { + width: 30%; + min-width: 10em; + background-color: rgba(0,0,0, 0.1); + float: right; + padding: 1em; + margin: 1em; + } } -@media only all and (pointer: fine) { +@media only all and (min-width: 1920px) { body { - font-size: calc(14px + 0.6vmin); + line-height: 1.4; + font-size: calc(14px + 0.2vmax); max-width: 80ch; } + + .publish-date { + font-size: calc(10px + 0.2vmax); + } + + aside { + width: 30%; + min-width: 10em; + background-color: rgba(0,0,0, 0.1); + float: right; + padding: 1em; + margin: 1em; + } }