Galleria

Minimalist Blog With Photos, Stories, Maps

Website

Yet Another Content Management System?

Because:

• I like seeing and sharing content ads-free, with no subscription or paywall or trackers,
• I want a minimalist / fully-featured / privacy-friendly / user-friendly website,
• I want both the interface and the content lightweight by design, fast to load, and secure,
• I want it translated,
• I want it bug-free,
• I like receiving feedback without pushing you to sign in a specific social platform.

I could not find anything cheap complying to the above requirements, and I was interested in learning great web development tools. Therefore, I designed a Single Page Application using the Mithril framework, the TypeScript language, and some awesome libraries. To sum up the features:

• Interactive 3D maps,
• Interactive charts,
• Home-made track format including elevation profile,
• Fully translated in English, Finnish, and French,
• Privacy by design,
• Humane by design,
• Ethical by design,
• No cookie, no Local Storage, no IndexedDB,
• Photo viewer with dynamic image optimization,
• Mobile-friendly,
• Lazy-loading heavy scripts (with dynamic import expressions).

This is not a template or a flexible CMS.

Usage

Install Dependencies

Clone this repo, install Node.js 24, and run npm i. For dev, run make install.

Add Content

Tracks and photos are transformed with command line tools written in Python 3.11 and Rust 2021. The list of stories and photo metadata fetched by the website are statically generated at build time thanks to a custom Webpack plugin and utilities. The app will automatically refresh on file update.

Running

Run the development server locally

npm start

You can view the development server at localhost:8080.

Testing

Unit testing

Run make js-test and make py-test.

End-to-end testing

The test uses Robot Framework with the SeleniumLibrary. Run npm start in one shell and make e2e-test on another one inside the Python virtual environment (because Robot Framework is installed via Poetry). The tests do not use fake fixtures but the actual website content. The most recent photo should have a story, otherwise some tests may fail. An HTML report should have been generated.

Analysing

Bundle size analysis

Run npm bundle-analysis to generate the prod bundle and start a local server with a page displaying the bundle analysis, you can check that no extra libraries are bundled.

Updating

The dependencies

Run make update.

Also update the lazy-loaded scripts listed in the configuration file.

The logo

From a new SVG file:

• Generate PNG files of different sizes and generate the .ico with Gimp: File > Open as Layers, File > Export As...,
• Generate an apple-touch-icon file (PNG, 192x192, without alpha channel).

The font

The main SASS file should point to the font file.

For editing the font, adding glyphs, ligatures, exotic characters, etc. Have a look at this README file.

The map styles

For better compatibility, only use standard styles, do not use classic styles.

Real Deployment

The frontend can be deployed on any server, just install dependencies with npm ci. Some third party connections require an account. The good news is that most third parties are cost- and maintenance-free, so that you can focus on what really matters: photos, stories, adventures!

Thanks

Thanks to the visitors who shared feedback.

License

This project is licensed under the Hippocratic License 3.0. Please read the license (md/pdf) carefully since this is not open according to the Open Source Initiative, and not free according to the Free Software Foundation.

You may not use, process, copy, modify, distribute, or otherwise exploit this project for text, image, and data mining, including but not limited to training, fine-tuning, or evaluating artificial intelligence or machine learning models.