From aa547f522941c9ba3c60dd0083305c59f717cedd Mon Sep 17 00:00:00 2001 From: keni7385 Date: Sat, 4 Jun 2022 00:09:16 +0300 Subject: Initial commit --- README.md | 12 + _assets/andreacorsini-pubkey.txt | 52 ++++ _assets/css/style.css | 87 ++++++ _assets/favicon.ico | Bin 0 -> 15406 bytes _assets/images/camera-2-icon.png | Bin 0 -> 2756 bytes _assets/images/email.svg | 121 ++++++++ _assets/images/feed.svg | 137 +++++++++ _assets/images/me.jpg | Bin 0 -> 71380 bytes _assets/images/profile-cut.jpg | Bin 0 -> 15943 bytes _assets/images/under_construction.gif | Bin 0 -> 7298 bytes _assets/rss.xml | 15 + _footer.t.html | 9 + _header.t.html | 42 +++ _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 ++ sswg.sh | 50 ++++ 22 files changed, 1085 insertions(+) create mode 100755 README.md create mode 100755 _assets/andreacorsini-pubkey.txt create mode 100755 _assets/css/style.css create mode 100755 _assets/favicon.ico create mode 100755 _assets/images/camera-2-icon.png create mode 100644 _assets/images/email.svg create mode 100755 _assets/images/feed.svg create mode 100755 _assets/images/me.jpg create mode 100755 _assets/images/profile-cut.jpg create mode 100755 _assets/images/under_construction.gif create mode 100755 _assets/rss.xml create mode 100755 _footer.t.html create mode 100644 _header.t.html 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 create mode 100755 sswg.sh diff --git a/README.md b/README.md new file mode 100755 index 0000000..634efbb --- /dev/null +++ b/README.md @@ -0,0 +1,12 @@ +# Website + +## Generate static content +``` sh +./sswg.sh +``` + +## Run locally +``` sh +cd _static +python -m http.server +``` diff --git a/_assets/andreacorsini-pubkey.txt b/_assets/andreacorsini-pubkey.txt new file mode 100755 index 0000000..f6b0858 --- /dev/null +++ b/_assets/andreacorsini-pubkey.txt @@ -0,0 +1,52 @@ +-----BEGIN PGP PUBLIC KEY BLOCK----- + +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 +P9Y/V1CBCw== +=iuKW +-----END PGP PUBLIC KEY BLOCK----- diff --git a/_assets/css/style.css b/_assets/css/style.css new file mode 100755 index 0000000..d5ca676 --- /dev/null +++ b/_assets/css/style.css @@ -0,0 +1,87 @@ +body { + margin: 2em auto; + max-width: 650px; + line-height: 1.6; + font-size: 18px; + color: #f0efd1; + background-color: rgba(10,10,10); + padding: 0 10px; +} + +h1, h2, h3, a, dt { + color: #cfba58; +} + +h1, h2, h3 { + line-height: 1.2; +} + +dt { + line-height: 2; +} + + +h1 { + text-align: center; +} + +a { + text-decoration: underline; + font-style: italic; +} + +a:hover, a:active { + color: #f2e091; +} + +a:active { + text-decoration: none; +} + +small { + font-size: 13px; +} + +header { + text-align: center; +} + +header nav { + text-align: center; +} + +img#profile { + float: left; +} + +main { + margin-top: 5px; + background-color: rgba(20,20,20); + padding: 0.5em 1em; + border-radius: 5px 5px 0px 0px; + border: 1px solid rgb(40, 40, 40); +} + +footer { + border: 1px solid rgb(40, 40, 40); + border-top: 1px solid #cfba58; + font-size: 13px; + padding: 0.5em 1em; + background-color: rgba(15, 15, 15); +} + +pre, samp { + padding: 0.25rem 1rem; + max-width: 100%; + overflow-x: auto; + font-family: monospace; + font-size: 14px; +} + +pre { + background-color: rgb(40, 40, 40); +} +samp { + display: block; + line-height: 115%; +} diff --git a/_assets/favicon.ico b/_assets/favicon.ico new file mode 100755 index 0000000..90afb7f Binary files /dev/null and b/_assets/favicon.ico differ diff --git a/_assets/images/camera-2-icon.png b/_assets/images/camera-2-icon.png new file mode 100755 index 0000000..f88cabd Binary files /dev/null and b/_assets/images/camera-2-icon.png differ diff --git a/_assets/images/email.svg b/_assets/images/email.svg new file mode 100644 index 0000000..41e5c93 --- /dev/null +++ b/_assets/images/email.svg @@ -0,0 +1,121 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_assets/images/feed.svg b/_assets/images/feed.svg new file mode 100755 index 0000000..9caf37f --- /dev/null +++ b/_assets/images/feed.svg @@ -0,0 +1,137 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_assets/images/me.jpg b/_assets/images/me.jpg new file mode 100755 index 0000000..44a766c Binary files /dev/null and b/_assets/images/me.jpg differ diff --git a/_assets/images/profile-cut.jpg b/_assets/images/profile-cut.jpg new file mode 100755 index 0000000..0e13e88 Binary files /dev/null and b/_assets/images/profile-cut.jpg differ diff --git a/_assets/images/under_construction.gif b/_assets/images/under_construction.gif new file mode 100755 index 0000000..09bf635 Binary files /dev/null and b/_assets/images/under_construction.gif differ diff --git a/_assets/rss.xml b/_assets/rss.xml new file mode 100755 index 0000000..d092b9b --- /dev/null +++ b/_assets/rss.xml @@ -0,0 +1,15 @@ + + + + Updates from Andrea + Latest changes from Andrea Corsini's website. + https://andreacorsini.xyz + en-uk + + Updates from Andrea + https://andreacorsini.xyz + https://andreacorsini.xyz/images/profile-cut.jpg + + + + diff --git a/_footer.t.html b/_footer.t.html new file mode 100755 index 0000000..7a6f0d6 --- /dev/null +++ b/_footer.t.html @@ -0,0 +1,9 @@ + + + + diff --git a/_header.t.html b/_header.t.html new file mode 100644 index 0000000..1b4d3bf --- /dev/null +++ b/_header.t.html @@ -0,0 +1,42 @@ + + + + + + TITLE + + + + + + + +
+ +

Andrea Corsini https://andreacorsini.xyz

+ +
+ + +
+ +#
+#
+#

WIP - Under Coding

+# +#

Hey visitor! The whole website is still +# under construction coding. Check out the +# RSS feed for updates. Currently, I am +# finishing to upload some photos from my +# past travels. +#

+#
+#
+
+
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: +

    +
  • Invoke the content generation with a simple command, such as ./sswg.sh.
    • +
  • The generation should be idempotent.
    • +
  • Copy the header and footer templates in every page.
    • +
  • Support some simple macro substitution, to allow different title and description for each page.
    • +
  • Support the insertion of verbatim source code.
    • +
+

+ +

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 +
diff --git a/sswg.sh b/sswg.sh new file mode 100755 index 0000000..6e7b42d --- /dev/null +++ b/sswg.sh @@ -0,0 +1,50 @@ +# SSWG - Simple Static Website Generator +#!/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" + +rm -rf "$SSWG_OUTPUT_DIR" +mkdir "$SSWG_OUTPUT_DIR" + +# Copy static assets +cp -r "$SSWG_ASSETS_DIR"/* "$SSWG_OUTPUT_DIR"/. + +# Generate HTML pages +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 header + cat "$SSWG_HEADER_TEMPLATE" >> "$filename" + + # Fix indentation in the generated source + cat "$page" | awk ' + BEGIN {print ""} + FNR>3 {print " " $0} + END {print ""}' >> "$filename" + + # append footer + cat "$SSWG_FOOTER_TEMPLATE" >> "$filename" + + # macro substitution + eval `cat "$page" | awk 'FNR<3'` + sed -i'' "s@TITLE@$TITLE@g" "$filename" + sed -i'' "s@DESCRIPTION@$DESCRIPTION@g" "$filename" + + # remove comments + sed -i'' "/^[ \t]*#/d" "$filename" + + # remove indentation before whitespaces+pipe + # useful e.g. with 

 tags
+        sed -i'' "s/^[ \t]*|//g" "$filename"  # remove
+    else
+        cp $page $filename
+    fi;
+done;
-- 
cgit v1.2.3-70-g09d2