diff options
| author | keni7385 <andrea@andreacorsini.xyz> | 2022-06-04 00:09:16 +0300 |
|---|---|---|
| committer | keni7385 <andrea@andreacorsini.xyz> | 2022-06-04 00:09:16 +0300 |
| commit | aa547f522941c9ba3c60dd0083305c59f717cedd (patch) | |
| tree | e8ba86747892a89162288ec9be4eed738311190d /_pages | |
Initial commit
Diffstat (limited to '_pages')
| -rwxr-xr-x | _pages/computing.html | 98 | ||||
| -rwxr-xr-x | _pages/email.html | 10 | ||||
| -rw-r--r-- | _pages/index.html | 21 | ||||
| -rw-r--r-- | _pages/notes/a-simple-static-website-generator.html | 307 | ||||
| -rwxr-xr-x | _pages/notes/index.html | 14 | ||||
| -rw-r--r-- | _pages/privacy-policy.html | 18 | ||||
| -rwxr-xr-x | _pages/travels/index.html | 65 | ||||
| -rwxr-xr-x | _pages/travels/pictures/index.html | 27 |
8 files changed, 560 insertions, 0 deletions
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." +--- +<h2>My Computing</h2> +<p>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.</p> + +<p>Although I do nothing fancy and complicated, I do have some + requirements. The main concerns are about <b>control</b> + and <b>lightweightness</b>. 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 <a href="https://www.fsf.org/">Free Software Foundation + (FSF)</a> and the <a href="">GNU project</a> is advocating.</p> + +<p>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 <em>Terminal User Interfaces (TUI)</em> over GUI when is + convinient to do so.</p> + +<dl> + <dt>Operative System</dt> + <dd>I normally run + <a href="https://www.archlinux.org">Arch</a>-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 <a href="">Parabola GNU/Linux-libre</a>, an FSF-approved + 100% free (<a href="https://www.gnu.org/philosophy/free-sw">as + in: freedom</a>) operating system. Not any computer can run a + 100% free distribution, due to nonfree firmware blobs (more + about it in the <a href="#hardware">hardware section</a> + below). So in other secondary laptops that cannot run + Parabola, my fallback is plain Arch Linux.</dd> + <dt>Window Manager/Desktop Environment</dt> + <dd>I don't have a desktop environment, except for the + collection of scripts, softwares and configurations that I have + put together. I run + the <a href="https://suckless.org/">Suckless</a> window + manager + called <a href="https://dwm.suckless.org/">dwm</a> with + several patches applied on it. Apart from the keybings for + main + programs, <a href="https://tools.suckless.org/dmenu/">dmenu</a> + 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.</dd> + <dt>Shell and Terminal</dt> + <dd>I use Zsh as interactive shell. I normally run the shell + interpreter within <a href="https://st.suckless.org/">st - simple + terminal</a>. I applied some reasonable patches from + the <a href="https://st.suckless.org/patches/">Suckless + collection</a>, 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.</dd> + <dt>Email</dt> + <dd>I read my emails within emacs throught mu4e, an email client + based on + <a href="https://www.djcbsoftware.nl/code/mu/">mu</a>. 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.</dd> + <dt>Editor</dt> + <dd><a href="https://www.gnu.org/software/emacs/">GNU Emacs</a> + 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 </dd> + <dt>Writings</dt> + <dd>LaTeX, Libre Office with others</dd> + <dt>Browser</dt> + <dd>IceCat or Firefox based. I like surf but is so slow</dd> + <dt>Passwords</dt> + <dd>The standard Unix pass</dd> + <dt>RSS reader</dt> + <dd>emacs ...</dd> + <dt>PDF reader</dt> + <dd>zathura, which benefits?</dd> + <dt>Screen eye protection</dt> + <dd>redshift</dd> +</dl> + +<h2 id="hardware">Hardware</h2> +<p>TP T60, libreboot, open WiFi card.</p> 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" +--- +<h2>Email</h2> +<p>You can reach me by email:</p> +<ul> + <li><b>andrea</b> <code>at</code> <b>andreacorsini</b> <code>period</code> <b>xyz</b></li> + <li>My GPG key: <a href="andreacorsini-pubkey.txt"><code>F6E3 24C4 BB4E 8C87 9DBE + 463A D998 38F5 E246 2789</code></a></li> +</ul> 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" +--- +<h2>Welcome to my website</h2> + +<img src="/images/me.jpg" width="100%"> + +<p>Hi, I am Andrea, Italian graduate student, passionate for Linux technologies, + rollerskating and, recently, baking.</p> + +<p>Currently, I am exploring color image + quantization errors, and deep learning methods for signal inverse + problems.</p> + +<p>This website gathers <a href="/notes">my notes</a>, + <a href="/travels/pictures">photos</a>, and personal self-hosted services, + such as email, <a href="https://git.andreacorsini.xyz">git server</a>, + <a href="https://meet.andreacorsini.xyz">Jitsi</a> instance, calendar, Matrix + and others to come.</p> + +<p>Browse it <i>freely</i>!</p> 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." +--- +<article> + <header> + <h2>A simple static website generator (sswg)</h2> + <time>June 3, 2022</time> + </header> + <nav class="toc"> + TOC + </nav> + + <p>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.</p> + + + <p>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.</p> + + <p>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 <a href="https://git.andreacorsini.xyz/sswg">git + repository</a>.</p> + + <h3>Features</h3> + <p>At the time of writing, I am a simple person. I just want to: + <ul> + <li>Invoke the content generation with a simple command, such as <code>./sswg.sh</code>.</li> + <li>The generation should be <i>idempotent</i>.</li> + <li>Copy the header and footer templates in every page.</li> + <li>Support some simple macro substitution, to allow different title and description for each page.</li> + <li>Support the insertion of verbatim source code.</li> + </ul> + </p> + + <p>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).</p> + + <h3>Folder structure</h3> + <p>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</p> + + <samp> + <b>├── _assets</b><br> + │ ├── style.css<br> + │ ├── favicon.ico<br> + │ ├── images<br> + │ │ └── picture.png<br> + │ └── rss.xml<br> + <b>├── _footer.t.html</b><br> + <b>├── _header.t.html</b><br> + <b>├── _pages</b><br> + │ ├── email.html<br> + │ ├── index.html<br> + │ ├── my-notes.html<br> + │ ├── notes<br> + │ │ └── a-simple-static-website-generator.html<br> + │ └── privacy-policy.html<br> + <b>└── sswg.sh</b> + </samp> + + <p>Only the elements in <b>bold</b> are mandatory. The other files and folders + are there to showcase. Once the script is invoked with <code>./sswg.sh</code>, + sswg will regenerate the website to the output folder, named <code>_static</code>. + Any content of the direcorty <code>_asset</code> will be copied to the root + of <code>_static</code>. The content of template + files <code>_header.t.html</code> and <code>_footer.t.html</code> are preposed + and appended to each HTML page, respectively. The sswg will copy to the output + folder all the HTML files contained in <code>_page</code>, as well as + sub-directories and images.</p> + + <p>The output folder <code>_static</code> for this example will result in</p> + + <samp> + ├── style.css<br> + ├── favicon.ico<br> + ├── images<br> + │ └── picture.png<br> + ├── rss.xml<br> + ├── email.html<br> + ├── index.html<br> + ├── my-notes.html<br> + ├── notes<br> + │ └── a-simple-static-website-generator.html<br> + └── privacy-policy.html<br> + </samp> + + + <h3>Add a webpage</h3> + <p>Each HTML page in the directory <code>_page</code> only contains the main + content, while header and footer are shared in every page. Thus we don't need + to copy them every time.</p> + + <p>So, adding a page is very easy. Save every new page within the + folder <code>_page</code>, 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 "<code>---</code>". + For example:</p> + + |<pre> + |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> + |</pre> + +# Test comment. + <p>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.</p> + + <h3>Header and Footer templates</h3> + <p>Inside <code>_header.t.html</code> write the page content from the DOCTYPE + tag, to the navigation of your page, until the beginning of your main content. + Use the macros <code>TI‍TLE</code> and <code>D‍ESCRIPTION</code> 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:</p> + + |<pre> + |<!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> + |</pre> + + <p>Similarly to the header, <code>_footer.t.html</code> 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:</p> + + |<pre> + | </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> + |</pre> + + <h3>Inserting verbatim source code</h3> + <p>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.</p> + + <p>Indeed, any sort of white-spaces indentation added to the content of the + code block tags (<code><pre>...</pre></code>) 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.</p> + + <p>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</p> + + |<pre> + | |<pre> + | |cd + | |ls -la + | |</pre> + |</pre> + + <p>will be transformed into the HTML source code</p> + + |<pre> + |<pre> + |cd + |ls -la + |</pre> + |</pre> + + <h3>Code step by step</h3> + <p>By the time you will read this article, the code might have changed. So you + will find the current version in the + repository <a href="https://git.andreacorsini.xyz/sswg">git.andreacorsini.xyz/sswg</a>.</p> + + <p>For what concern the early static website generator script, it starts by + setting constants for folders and template elements:</p> + + |<pre> + |#!/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" + |</pre> + + <p>Second, the output folder <code>_static</code> is cleaned:</p> + + |<pre> + |rm -rf "$SSWG_OUTPUT_DIR" + |mkdir "$SSWG_OUTPUT_DIR" + |</pre> + + <p>So, be careful if you copied something inside it. It is wiser to copy + external files into <code>_assets</code>, as they will be automatically copied + back into <code>_static</code>:</p> + + |<pre> + |cp -r "$SSWG_ASSETS_DIR"/* "$SSWG_OUTPUT_DIR"/. + |</pre> + + <p>Then, we can finally generate each HTML page:</p> + |<pre> + |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 + |</pre> + + <p>Prepose the header template:</p> + |<pre> + | cat "$SSWG_HEADER_TEMPLATE" >> "$filename" + |</pre> + + <p>Indentation in the page content to match the header level:</p> + |<pre> + | cat "$page" | awk ' + | BEGIN {print ""} + | FNR>3 {print " " $0} + | END {print ""}' >> "$filename" + |</pre> + + <p>Append the footer template:</p> + |<pre> + | cat "$SSWG_FOOTER_TEMPLATE" >> "$filename" + |</pre> + + <p>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.</p> + |<pre> + | eval `cat "$page" | awk 'FNR<3'` + | sed -i'' "s@TI‍TLE@$TIT‍LE@g" "$filename" + | sed -i'' "s@DES‍CRIPTION@$DES‍CRIPTION@g" "$filename" + |</pre> + + <p>We can now remove comments and pipe + white-spaces:</p> + |<pre> + | sed -i'' "/^[ \t]*#/d" "$filename" + | sed -i'' "s/^[ \t]*|//g" "$filename" + |</pre> + + <p>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 <code>_static</code>:</p> + + |<pre> + | else + | cp $page $filename + | fi; + |done; + |</pre> + + <hr> + <h3>Conclusion</h3> + <p>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.</p> + + <p>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.</p> + + <p>I hope you found this post useful and interesting. Don't hesitate to + contact me for any questions or comments.</p> + +</article> 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" +--- +<h2>My Notes</h2> +<p> + <time datetime="2022-06-03">June 3, 2022</time> + <br> + <a href="/notes/a-simple-static-website-generator.html">A simple static website generator (sswg)</a> +</p> + +# <ul> +# <li>Why <em>“I have nothing to hide”</em> is not a reasonable excuse for personal digital freedom</li> +# <li>On the importance of donations to Libre and Open Source software.</li> +# </ul> 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." +--- +<h2>Privacy policy</h2> +<p>This website is proud to be free from <q>BloatScripts</q>, 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.</p> + +<p>If you use my <a href="/email.html">email</a> to contact me, you + implicitely agree to be contacted back in order to receive an answer.</p> + +<p>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 <var>fail2ban</var>. Your IP + might be automatically recorded in the <i>deny list</i> for longer time or + permanently, in case you are conducting malicious activity towards my server + instances.</p> 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" +--- +<h2>Travels</h2> +<p><a href="/travels/pictures"><img src="/images/camera-2-icon.png" /></a> Browse + my photos in the <a href="/travels/pictures">travel pictures</a> folder. + Although I'm not an expert photographer, I like to share some pictures from my + trips.</p> +<br/> +<p>How I like to travel:</p> +<ul> + <li>Prefer journeys over vacations, backpacks over suitcases, active over + comfy.</li> + <li>Look for something different, seek the unexpected. Don't try to replace what you have elsewhere.</li> + <li>Experience characteristic coucines and trust the locals.</li> + <li>Come back home with your spirit enriched (probably not the wallet).</li> +</ul> + +<h2>Journeys</h2> + +<p>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.</p> + +<p>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.</p> + +<h3>Journey to the East</h3> +<p>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.</p> + +<h3>Balkan flavours</h3> +<p>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.</p> +<p>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.</p> + +<h3>Europe Rediscovery</h3> +<p>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.</p> +<p>Because of this and many other reasons, during my master's degree, I enrolled + in the <a href="https://masterschool.eitdigital.eu">EIT Digital master + school</a>. 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 <i>kick-off</i> 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 <i>plus</i>, which enriched the overall + experience. Unfortunately, near the end of my programme, a world-wide pandemic + stroke all over the globe.</p> 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" +--- +<h2>Listing of Picture Thumbnails</h2> +<p> +<!-- Generated by thumbnail_page.pl by jcv http://www.netpurgatory.com/ --> +<a href="../">Go back</a><br /><br /> +<a href="./index2.html">./</a> +<br /> +<a href="./china/index.html">china</a> +<br /> +<a href="./estonia/index.html">estonia</a> +<br /> +<a href="./estonia/tallin/index.html">estonia/tallin</a> +<br /> +<a href="./finland/index.html">finland</a> +<br /> +<a href="./finland/porvo/index.html">finland/porvo</a> +<br /> +<a href="./finland/tampere/index.html">finland/tampere</a> +<br /> +<a href="./taiwan/index.html">taiwan</a> +<br /> +<a href="./taiwan/jiufeng/index.html">taiwan/jiufeng</a> +<br /> +<a href="./taiwan/taipei/index.html">taiwan/taipei</a> +<br /> |