From aa547f522941c9ba3c60dd0083305c59f717cedd Mon Sep 17 00:00:00 2001 From: keni7385 Date: Sat, 4 Jun 2022 00:09:16 +0300 Subject: Initial commit --- _pages/computing.html | 98 +++++++ _pages/email.html | 10 + _pages/index.html | 21 ++ .../notes/a-simple-static-website-generator.html | 307 +++++++++++++++++++++ _pages/notes/index.html | 14 + _pages/privacy-policy.html | 18 ++ _pages/travels/index.html | 65 +++++ _pages/travels/pictures/index.html | 27 ++ 8 files changed, 560 insertions(+) create mode 100755 _pages/computing.html create mode 100755 _pages/email.html create mode 100644 _pages/index.html create mode 100644 _pages/notes/a-simple-static-website-generator.html create mode 100755 _pages/notes/index.html create mode 100644 _pages/privacy-policy.html create mode 100755 _pages/travels/index.html create mode 100755 _pages/travels/pictures/index.html (limited to '_pages') diff --git a/_pages/computing.html b/_pages/computing.html new file mode 100755 index 0000000..4ed6960 --- /dev/null +++ b/_pages/computing.html @@ -0,0 +1,98 @@ +TITLE="Andrea Corsini's computing" +DESCRIPTION="List and comments about my daily personal computing, softwares and hardware I use." +--- +

My Computing

+

You can find a short list of the main softwares I use daily on + my personal drives. My personal daily computing regards browsing + the internet, checking my emails, occasional coding and + writing.

+ +

Although I do nothing fancy and complicated, I do have some + requirements. The main concerns are about control + and lightweightness. I want to be in charge of the + computations that happen on my machine, what is running and what + is not. I want to control which software is using bandwidth. I + want to be able to check the behaviour of any of my software, + and potentially change it to confomr it to my needs. I want to + be the user, not to be used. These thoughts are pretty much what + the Free Software Foundation + (FSF) and the GNU project is advocating.

+ +

Not as important as the freedom on computing, I wish, whenever + possible, that the softwares I use are unbloated. I prefer + lightweight over fancy. That is why I don't mind to + use Terminal User Interfaces (TUI) over GUI when is + convinient to do so.

+ +
+
Operative System
+
I normally run + Arch-based + distributions, because once installed, they contains only + essential softwares to get started, no unwanted bloat and I + can build my personal desktop directly. In particular I + run Parabola GNU/Linux-libre, an FSF-approved + 100% free (as + in: freedom) operating system. Not any computer can run a + 100% free distribution, due to nonfree firmware blobs (more + about it in the hardware section + below). So in other secondary laptops that cannot run + Parabola, my fallback is plain Arch Linux.
+
Window Manager/Desktop Environment
+
I don't have a desktop environment, except for the + collection of scripts, softwares and configurations that I have + put together. I run + the Suckless window + manager + called dwm with + several patches applied on it. Apart from the keybings for + main + programs, dmenu + helps me to execute the other software installed. dmenu is + very dynamic and easy to be integrated with other scripts and + utility. For instance, I use it to select wireless + connections, device mounts, integration with the password + manager and so forth.
+
Shell and Terminal
+
I use Zsh as interactive shell. I normally run the shell + interpreter within st - simple + terminal. I applied some reasonable patches from + the Suckless + collection, such as scrolling, transparency, background color + change on focus, solarized dark theme, boxdraw and so forth. If + emacs is already running, I will probably use the integrated + terminal, instead of st.
+
Email
+
I read my emails within emacs throught mu4e, an email client + based on + mu. Its message + filter is super powerful, it helps me to find any message really + quickly. The account configurations took me time to get it right, + but the effort was worth.
+
Editor
+
GNU Emacs + for any task that goes further than 1 minute. Some features that + changed my life are org-mode (org-agenda, org-...), magit, dired, + tramp. I found the out-of-the-box experience really inconvinient, + the configuration tooks me really a lot of time, but now is tailored + to any task I need. For the sake of learning, I still configured + emacs personally, I could have gone with an Emacs distribution + instead? Now I am trying Emacs Doom for curiosity. For small changes + I go for vim. I keep my vim as simple and unpolished as possible, + so I can have a similar experience when I occasionally
+
Writings
+
LaTeX, Libre Office with others
+
Browser
+
IceCat or Firefox based. I like surf but is so slow
+
Passwords
+
The standard Unix pass
+
RSS reader
+
emacs ...
+
PDF reader
+
zathura, which benefits?
+
Screen eye protection
+
redshift
+
+ +

Hardware

+

TP T60, libreboot, open WiFi card.

diff --git a/_pages/email.html b/_pages/email.html new file mode 100755 index 0000000..6b31665 --- /dev/null +++ b/_pages/email.html @@ -0,0 +1,10 @@ +TITLE="Andrea Corsini's email contacts" +DESCRIPTION="Andrea Corsini's email contacts" +--- +

Email

+

You can reach me by email:

+ diff --git a/_pages/index.html b/_pages/index.html new file mode 100644 index 0000000..62ea2dd --- /dev/null +++ b/_pages/index.html @@ -0,0 +1,21 @@ +TITLE="Andrea Corsini's Personal Site" +DESCRIPTION="Andrea Corsini's personal website" +--- +

Welcome to my website

+ + + +

Hi, I am Andrea, Italian graduate student, passionate for Linux technologies, + rollerskating and, recently, baking.

+ +

Currently, I am exploring color image + quantization errors, and deep learning methods for signal inverse + problems.

+ +

This website gathers my notes, + photos, and personal self-hosted services, + such as email, git server, + Jitsi instance, calendar, Matrix + and others to come.

+ +

Browse it freely!

diff --git a/_pages/notes/a-simple-static-website-generator.html b/_pages/notes/a-simple-static-website-generator.html new file mode 100644 index 0000000..e5399a8 --- /dev/null +++ b/_pages/notes/a-simple-static-website-generator.html @@ -0,0 +1,307 @@ +TITLE="Andrea Corsini's Notes - A simple static website generator" +DESCRIPTION="I share and explain my simple static website generator, written in SHell scriptng from scratch." +--- +
+
+

A simple static website generator (sswg)

+ +
+ + +

Why bother creating another static website generator? There are so many + awesome projects out in the open source community, such as Jekyll, Hugo, + just to name few of them. Well, I wanted to have something dead simple, but + also flexible enough to be easily customized. So I wrote my own simple + static website generator (sswg) using SHell scripting.

+ + +

This is possible because I don't need many features yet. In the future, I + could end up in switching to a proper generator. Anyway, for the time being I + can just use mine and share it here. Hopefully, it could be useful for other + folks that want to practice shell scripting, and/or want to implement their + website generator.

+ +

Here, you will find the original version and its rationale. Most likely, + the generator will change to cope with my website needs. You can find the + current version in my git + repository.

+ +

Features

+

At the time of writing, I am a simple person. I just want to: +

+

+ +

Anything more than that is not necessary at the moment. For example, I + don't need Markdown or other languages to write pages, plain HTML is good + enough. In the future, it would be nice to have some extra features, like + automatic generation of RSS and Table of Content (TOC).

+ +

Folder structure

+

My sswg is just a tiny shell script to include in the website root. In this + way, it can be versioned along all the other website code. The script expect + to find a folder tree similar to

+ + + ├── _assets
+ │    ├── style.css
+ │    ├── favicon.ico
+ │    ├── images
+ │    │     └── picture.png
+ │    └── rss.xml
+ ├── _footer.t.html
+ ├── _header.t.html
+ ├── _pages
+ │     ├── email.html
+ │     ├── index.html
+ │     ├── my-notes.html
+ │     ├── notes
+ │     │     └── a-simple-static-website-generator.html
+ │     └── privacy-policy.html
+ └── sswg.sh + + +

Only the elements in bold are mandatory. The other files and folders + are there to showcase. Once the script is invoked with ./sswg.sh, + sswg will regenerate the website to the output folder, named _static. + Any content of the direcorty _asset will be copied to the root + of _static. The content of template + files _header.t.html and _footer.t.html are preposed + and appended to each HTML page, respectively. The sswg will copy to the output + folder all the HTML files contained in _page, as well as + sub-directories and images.

+ +

The output folder _static for this example will result in

+ + + ├── style.css
+ ├── favicon.ico
+ ├── images
+ │     └── picture.png
+ ├── rss.xml
+ ├── email.html
+ ├── index.html
+ ├── my-notes.html
+ ├── notes
+ │     └── a-simple-static-website-generator.html
+ └── privacy-policy.html
+ + + +

Add a webpage

+

Each HTML page in the directory _page only contains the main + content, while header and footer are shared in every page. Thus we don't need + to copy them every time.

+ +

So, adding a page is very easy. Save every new page within the + folder _page, or in one of its subfolders. Start with the first + two lines by defining the title and description for this page, by using the + macro T‍ITLE and D‍ESCRIPTION from sswg custom syntax. Then + separate the macro from the rest of the page with 3 dashes "---". + For example:

+ + |
+  |T‍ITLE="My new web page"
+  |D‍ESCRIPTION="This page contains information about..."
+  |---
+  |<h2>TI‍TLE</h2>
+  |# This is a sswg comment.
+  |<p>A page can contain whatever valid HTML code.</p>
+  |
+ +# Test comment. +

The example also shows comments syntaxt. Every line which starts with a + hash mark # is considered as a source comment. Hence, it won't be copied in + the final static HTML page.

+ +

Header and Footer templates

+

Inside _header.t.html write the page content from the DOCTYPE + tag, to the navigation of your page, until the beginning of your main content. + Use the macros TI‍TLE and D‍ESCRIPTION for HTML title + and meta description. The generator will overwrite them with the value specified + within the HTML page. Here an example of header templete:

+ + |
+  |<!DOCTYPE html>
+  |<html>
+  |  <head>
+  |    <title>TI‍TLE</title>
+  |    <meta name="description" content="DE‍SCRIPTION">
+  |    <link rel="stylesheet" type="text/css" href="/css/style.css" media="screen">
+  |    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
+  |  </head>
+  |
+  |  <body>
+  |    <header>
+  |      <h1>Generic website title</h1>
+  |      <div>
+  |        <aside>I believe in personal digital freedom</aside>
+  |        <nav>
+  |          <a href="/index.html">Home</a> |
+  |          <a href="/my-notes.html">My notes</a> |
+  |          <a href="/email.html">Email</a>
+  |        </nav>
+  |      </div>
+  |    </header>
+  |    <main>
+  |
+ +

Similarly to the header, _footer.t.html contains all the rest + of the website to be inserted at the end of each page. No macro substitution + is needed in this file. Here an example:

+ + |
+  |    </main>
+  |    <footer>
+  |      <p><a href="/rss.xml"><img src="/images/feed.svg">Feed RSS</a>.
+  |      <p>Copyright &copy; 2020-2021 Acme -
+  |      <a href="/privacy-policy.html">Privacy policy</a></p>
+  |    </footer>
+  |  </body>
+  |</html>
+  |
+ +

Inserting verbatim source code

+

I would like the HTML code assembled by sswg to maintain a proper + indentation. Therefore, the script takes care about indenting the page + contents between the header and footer templates. However, this is an issue + for the verbatim source code.

+ +

Indeed, any sort of white-spaces indentation added to the content of the + code block tags (<pre>...</pre>) is interpreted by + browsers as white-space characters of the verbatim code. Therefore, the + white-space characters will appear in the code blocks, resulting in unwanted + spaces.

+ +

To solve this issue, I decided to prepose every code block with a pipe + character |. The sswg script will take care in removing the pipe and + white-space characters. For example, the code

+ + |
+  |    |<pre>
+  |    |cd
+  |    |ls -la
+  |    |</pre>
+  |
+ +

will be transformed into the HTML source code

+ + |
+  |<pre>
+  |cd
+  |ls -la
+  |</pre>
+  |
+ +

Code step by step

+

By the time you will read this article, the code might have changed. So you + will find the current version in the + repository git.andreacorsini.xyz/sswg.

+ +

For what concern the early static website generator script, it starts by + setting constants for folders and template elements:

+ + |
+  |#!/bin/sh
+  |
+  |SSWG_OUTPUT_DIR="_static"
+  |SSWG_ASSETS_DIR="_assets"
+  |SSWG_PAGES_DIR="_pages"
+  |SSWG_HEADER_TEMPLATE="_header.t.html"
+  |SSWG_FOOTER_TEMPLATE="_footer.t.html"
+  |
+ +

Second, the output folder _static is cleaned:

+ + |
+  |rm -rf "$SSWG_OUTPUT_DIR"
+  |mkdir "$SSWG_OUTPUT_DIR"
+  |
+ +

So, be careful if you copied something inside it. It is wiser to copy + external files into _assets, as they will be automatically copied + back into _static:

+ + |
+  |cp -r "$SSWG_ASSETS_DIR"/* "$SSWG_OUTPUT_DIR"/.
+  |
+ +

Then, we can finally generate each HTML page:

+ |
+  |for page in $(find "$SSWG_PAGES_DIR" -iname '*.html' -o \
+  |                   -iname '*.jpg' -o -iname '*.jpeg' -o -iname '*.png');
+  |do
+  |    filename="$SSWG_OUTPUT_DIR/${page##$SSWG_PAGES_DIR/}"
+  |    mkdir -p "`dirname $filename`"
+  |
+  |    if [ "${filename##*.}" = "html" ]; then
+  |
+ +

Prepose the header template:

+ |
+  |        cat "$SSWG_HEADER_TEMPLATE" >> "$filename"
+  |
+ +

Indentation in the page content to match the header level:

+ |
+  |        cat "$page" | awk '
+  |        BEGIN {print ""}
+  |        FNR>3 {print "      " $0}
+  |        END {print ""}' >> "$filename"
+  |
+ +

Append the footer template:

+ |
+  |        cat "$SSWG_FOOTER_TEMPLATE" >> "$filename"
+  |
+ +

To perform the macro substitution, firstly shell-evaluate the first two + lines of the page. They are supposed to contain a shell-like declaration of the + variables TI‍TLE and DES‍CRIPTION. Secondly, each macro can be + substituted in the whole document.

+ |
+  |        eval `cat "$page" | awk 'FNR<3'`
+  |        sed -i'' "s@TI‍TLE@$TIT‍LE@g" "$filename"
+  |        sed -i'' "s@DES‍CRIPTION@$DES‍CRIPTION@g" "$filename"
+  |
+ +

We can now remove comments and pipe + white-spaces:

+ |
+  |        sed -i'' "/^[ \t]*#/d" "$filename"
+  |        sed -i'' "s/^[ \t]*|//g" "$filename"
+  |
+ +

Continue with the rest of the script. If we are not reading an HTML file, + it could be either an image or a folder. Just copy it to its destination + in _static:

+ + |
+  |    else
+  |        cp $page $filename
+  |    fi;
+  |done;
+  |
+ +
+

Conclusion

+

Static website generators are valid lightweight alternatives to more + complicate and larger content management systems (CMS), such as Wordpress. + They are normally simple to use, requires no databases, neither complicated + install procedures. Users are in control throught text files.

+ +

This post showed how to write a simple static website generator (sswg) to get our + web pages started. So far, the generator script has only bare-bones + functionalities, but it is simple enough to be extended with additional + features.

+ +

I hope you found this post useful and interesting. Don't hesitate to + contact me for any questions or comments.

+ +
diff --git a/_pages/notes/index.html b/_pages/notes/index.html new file mode 100755 index 0000000..dca7b9f --- /dev/null +++ b/_pages/notes/index.html @@ -0,0 +1,14 @@ +TITLE="Andrea Corsini's Personal Notes" +DESCRIPTION="Posts about anything I want to share, such as ideas, thoughts, learning" +--- +

My Notes

+

+ +
+ A simple static website generator (sswg) +

+ +# diff --git a/_pages/privacy-policy.html b/_pages/privacy-policy.html new file mode 100644 index 0000000..2264187 --- /dev/null +++ b/_pages/privacy-policy.html @@ -0,0 +1,18 @@ +TITLE="Privacy policy in andreacorsini.xyz" +DESCRIPTION="A very easy privacy policy: no data is collected in this website." +--- +

Privacy policy

+

This website is proud to be free from BloatScripts, advertising, + cookies, tracking/telemtry systems and other nasty non-free garbage that we are + sadly used to experience nowadays on the web. Hence, no data is collected + directly.

+ +

If you use my email to contact me, you + implicitely agree to be contacted back in order to receive an answer.

+ +

Currently, your IP and requests are recorded in the logs of my webserver + for security reasons. Logs are cleared every 5 days. The records are processed only + by free and open source security tools, such as fail2ban. Your IP + might be automatically recorded in the deny list for longer time or + permanently, in case you are conducting malicious activity towards my server + instances.

diff --git a/_pages/travels/index.html b/_pages/travels/index.html new file mode 100755 index 0000000..8755893 --- /dev/null +++ b/_pages/travels/index.html @@ -0,0 +1,65 @@ +TITLE="Andrea Corsini's travels" +DESCRIPTION="Andrea Corsini's travels and photos" +--- +

Travels

+

Browse + my photos in the travel pictures folder. + Although I'm not an expert photographer, I like to share some pictures from my + trips.

+
+

How I like to travel:

+ + +

Journeys

+ +

I have recognised the importance of travelling only during my + undergraduate and graduate studies. I was lucky to have the possibility to + combine studies and new cultural experiences.

+ +

Beside the usual good time spent in vacations with my family, I had + experienced three very intense long journeys. I will share more about each of + them in a separate blog post. So far, I summarise them here.

+ +

Journey to the East

+

This chapter of my life started with my exchange in the mainland China. + Between 2015 and 2016, I have spent the second grade of my bachelor's in + Shanghai. For a young western in his 20s, that was quite a shock initially, + but it slowly transitioned to a melting pot of fantastic memories and people. + During the various national holidays, I had the chance to travel around China + and south-east Asia. In 2017/2018, I came back to Shanghai, to experience the + working-life in the metropolis.

+ +

Balkan flavours

+

Two weeks in the middle of 2018's summer. I started this trip by visiting + Hungary and Slovenia in the Central Europe. Then the trip proceeded down to + the Southeastern Europe, passing through Croatia and finally reaching + Sarajevo. The culture in Bosnia and Herzegovina was fascinating, a real + authentic bridge between western and middle-east traditions. I want to explore + more this corner of Europe, since this was just a taste.

+

Before this trip, I was ignoring most of the countries in this region. Of + course we learnt about them in our education, but you know, names and + geographical position easily fade away when you only experience them in few + hours during classes.

+ +

Europe Rediscovery

+

The long time spent in Asia amazed me, but also made me re-appreciate what we + have here in Europe. For example, it's easy to travel around with a simple ID + card, by trains, ferries and cheap flights.

+

Because of this and many other reasons, during my master's degree, I enrolled + in the EIT Digital master + school. This programme fosters the entrepreneurial spirit of ICT students, + beside their technical major courses. It also lets us studying in two + different University around Europe, to experience different environments. In + my case, I chose Milano (Italy) and Helsinki (Finland). What's more, the + master school organises other side events, such as the + programme kick-off in Paris and a summer school in Stockholm (Sweden). + Thanks to this project, I could join an exciting network of like-minded + students. This is definitely a plus, which enriched the overall + experience. Unfortunately, near the end of my programme, a world-wide pandemic + stroke all over the globe.

diff --git a/_pages/travels/pictures/index.html b/_pages/travels/pictures/index.html new file mode 100755 index 0000000..e1cfdc6 --- /dev/null +++ b/_pages/travels/pictures/index.html @@ -0,0 +1,27 @@ +TITLE="Listing of Pictures" +DESCRIPTION="Listing of Pictures" +--- +

Listing of Picture Thumbnails

+

+ +Go back

+./ +
+china +
+estonia +
+estonia/tallin +
+finland +
+finland/porvo +
+finland/tampere +
+taiwan +
+taiwan/jiufeng +
+taiwan/taipei +
-- cgit v1.2.3-70-g09d2