xplosionmind / tommi.space

The virtual representation of the mess inside Tommi’s mind [MIRROR]

⚠️ Tommi’s mind 🤯

This repository contains the virtual representation of the mess inside Tommi’s mind.

👾 Source code

The main repository is hosted on Codeberg and mirrored on GitHub, where issues are being tracked.

📟 Software

This website is proudly built with Eleventy.

🏠 Hosting

This website is self-hosted on Nebuchadnezzar, Tommi’s server.

ℹ️ Info

Go to the website development page.

tommi.space's Issues

Improve “Around the world” page

• The embedded map starts with a too magnified scale
• Distinguish “around the world” from “places to go visit”
• Instead of a list, display a boxes grid
• Places dataset pagination
  • how to handle pages that have already some content in Markdown?
  • how to handle places I do not want to create a page for and redirect straight to the original website, instead?

Insert non-critical SCSS partials at the bottom of the main SCSS file

How to insert non-critical SCSS partials at the bottom of the main SCSS file?

Fix language filters

Language filters are not working and need to be fixed

Improve sitemap

Currently using eleventy-plugin-sitemap to generate the website sitemap.

• Multilingual sitemap
• Support images - quasibit/eleventy-plugin-sitemap#52
• quasibit/eleventy-plugin-sitemap#53

Sticky TOC overlaps with footer

Example from Xplosion Server page:

Self-hosting instead of Netlify + Storj

From Hosting > Website log

Since the beginning, Netlify has been where tommi.space is hosted. It has to be noted, though, that Netlify is no champion of openness, free software, or sustainable infrastructure, hence not a service whose values I completely share. Nevertheless, it is awesome, since at the same time it both has more than what I need, and it is fairly simple. It hurts to say it, but I love it and I am sticking with it, since it really makes much of the work easier.

All of the relatively big files on the website (such as images and podcast audios) are hosted on Storj, and through a couple of tricks they are seamlessly served through Netlify. Storj too has its red flags, since it is based on the blockchain and I am still quite skeptical concerning all of this stuff. But, again, it wonderfully does the work, at least until Cubbit won’t get around static hosting, as Stefano, its CEO, anticipated to me someday it will.

• Decide whether Storj is a sustainable and ethical option: no
• Figure out a way to handle assets in /, but not present in the repository (hence stored somewhere else). Renaming with a subdomain or with a sub-folder?
  assets folder is used as pass-through copy
• Write emails to all sustainable VPS providers asking to get the service for free to start a partnership.

Printing more contextual page metadata

To be printed somewhere in the page “extra” information:

• todo: development to-dos
• related: URLs of related resources that have not been directly linked in the text
• more: URLs of alternate pages by other people

Improve “scroll to” button

• a vanilla JavaScript main version
  • create the HTML with JS
  • Add sound effect (Elevator.js?) (#58)
  • optimize the current code: the button should be turned when the page is open, not only at first scroll.
• a noscript alternate version

Resources

• https://www.w3schools.com/howto/howto_js_scroll_to_top.asp
• https://stackoverflow.com/questions/67610648/how-can-%C4%B1-make-scroll-button
• https://w3collective.com/responsive-step-progress-bar
• https://css-tricks.com/need-to-scroll-to-the-top-of-the-page

Embed Mastodon thread/hashtag/profile stream

In particular in the Erasmus page, it would be awesome to embed all of the posts with the #PanErasmus hashtag.

Checking URLs

Use lychee to check all URLs validity with a script that runs in a Cron Job and sends results via email.

Switch from Commento to Isso for comments

tommi.space uses a self-hosted Commento instance to enable comments on the website. While Commento is wonderful and it works very nicely, Isso appears to be lighter, simpler and easier to adapt to tommi.space’s look.

Unfortunately, so far it is out of question to migrate to Isso because it has no YunoHost package.

Full-text search

A powerful, useful and effective full-text search has to be implemented.
Required features:

• fast
• no server processing
• no-JavaScript fallback (DuckDuckGo search)
• reliable and future-proof
• ideally, also
  • capable of ranking results
  • tolerating typos

Resources

• Adding Search to your Eleventy Static Site with Lunr, a tutorial by @cfjedimaster

Examples

• @jameslittle230’s personal website, using Stork

Webmentions implementation

Implement Webmentions

Why not?

• Why I retired my Webmention server

Resources

• Using Webmentions in Eleventy, a tutorial by @maxboeck
• An In-Depth Tutorial of Webmentions + Eleventy, by @siakaramalegos
• IndieWebify.Me to check whether webmentions work
• Webmention Rocks, yet another Webmentions tester
• Webmentions for developers
• IndieWeb Request, by @WesleyAC
• Webmention Setup for Eleventy, by @chrisburnell
• W3C Recommendation
• https://aperture.p3k.io
• https://indieauth.com

Reference implementations

• mxb.dev
• maxboeck/eleventy-webmentions
• https://github.com/siakaramalegos/sia.codes-eleventy
• https://robbinespu.gitlab.io/indieweb/

Best practices

• Best Practices and Coding Guidelines
  • document metadata
  • favicon-cheat-sheet

Jam Graph

Automatically generate a graph displaying all linked pages, both in The Jam and in the whole website.

Examples

• Obsidian Graph View

Resources

• https://github.com/oleeskild/digitalgarden

external pages iframe embedding does not work

From iframe contents cant appear in Firefox, on Stack Overflow:

  <iframe src="http://www.w3schools.com" width="100%" height="300px" scrolling="yes">
    Your browser does not support iframe.
  </iframe>     

Contents of iframe works well in chrome but not in Firefox. I've disabled add-ons but my iframe is still empty. Can anyone please help me?

Resources

• <iframe> on MDN
• Embedding Security concerns

Improved movies logging

• Integrate with Stremio
• Fetch movies cover
• start building Moviewyrm

Resources

• https://github.com/higby/www/blob/main/src/data/movies.js

Blog posts pagination

Paginate blog posts in Zibaldone

Fix EB Garamond loading in italic only

When the font EB Garamond is used, only the italic version works.

Example pages:

• https://tommi.space/clotilde
• https://tommi.space/pasticci

Tor .onion address

Generate a .onion address and deploy the website through it.

Resources

• mkp224o: vanity address generator for tor onion v3 (ed25519) hidden services

Improve data management

Currently, all of the data I have is stored in the data folder of this repository. Therefore, updating data quickly and easily becomes very hard. The solution I found to be best is to implement Baserow as a backend and as the main data management solution, so that Eleventy only needs to fetch the data and parse it into the website at buildtime. I have to:

• learn how to use JavaScript to fetch data - draw inspiration from gatsby-source-baserow
• figure out how Baserow API works

Resources

• 11ty/eleventy#2430, a thread on Eleventy discussions
• Eleventy and Baserow, a thread on the Baserow Community

Redirection page language detection

The redirect.njk page is in English by default. It should instead fetch the target page language and automatically apply it to itself.

Automatically generating changelog from git commits

• Listing on the homepage the pages whose content has been updated more recently (by using updated). Needs fixing
• Using git info to go through latest code changes and commit messages. See 11ty/eleventy#2324

Self-hosted analytics

From my Website Log > Analytics

The sole aspect I am interested in is knowing how many people visit my website, specifically which pages.

Being Google Analytics definitely out of consideration, finding a simple, free, light (and hosted) analytics service is not simple.

• counter.dev is the most clever, the lightest, and among the most beautiful analytics software I have ever seen. Unfortunately, it has some big problems that make its numbers not remotely corresponding to reality, and its developers do not plan to fix them anytime soon.
• Matomo is the go-to Google Analytics alternative, but, as such, it has many features that I do not need and that make it quite heavy.
• Plausible is the analytics service I have been using in the last two years, even though it does not feel 100% right, even if it nicely does the work I require. Probably, it is because it costs me a little more than 30€ a year, and I would like to avoid such expense.

Of course, I prefer to self-host analytics, but as of right now Matomo is the only analytics platform packaged for YunoHost (the OS I am using on Xplosion Server). As soon as any light analytics software will get packaged for YunoHost, I will switch to it.

package.json review and clean up

Not unlikely that my package.json is full of trash.

1. better understanding of what package.json is and how it works
2. tiding up: removing useless crap

Avoid using multiple line breaks

From Line Breaks : MGA

Historically, multiple <br /> tags were often used to insert extra blank lines in order to increase vertical spacing between lines of text or between other content appearing on the page. This practice is no longer preferred under HTML 5, and should be replaced with style sheets where necessary.

“Stop title animation” button

tommi.space should represent me, hence my Tomminess completely. Nevertheless, the “annoying" aspect should not be (too) detrimental in terms of user experience. Therefore, I should implement a way to stop the TOMMI SPACE title animation on top of every page.

The final solution should:

• place a play/pause in the toolbar
• save the chosen option in localStorage
• automatically disable the animation if the user disabled JavaScript, hence the chosen option cannot be saved

JSON-LD Implementation

Improve the current very basic JSON-LD implementation.

Resources

• eleventy-plugin-schema, an Eleventy plugin to generate JSON-LD structured data.
• datasette

Generating previews for internal linked pages

#15 is a very bare-bones feature.

To make it more useful, generate a preview both for notes linked in the text and for the ones in the backlinks list.

The preview should:

• pop-up on hover
• display the title
• display the tags
• display the description/excerpt
• possibly, also a thumbnail of the previewed note’s image, if it has one

Resources

• Check the function fetching information in eleventy-garden

Creative ideas

• Generative Art
  • always-changing colors, see Zander Martineau’s website
  • css-doodle: CSS-only generative art
  • https://heydonworks.com/artifacts
• Flash animation of exploding head emojis while a button is active and/or hover
• Use typographic animations
  • AxisPraxis’ Zycon
  • Anicons
• Font weight animations, as in set.studio
• dwitter.net
• more.graphics
• add more animations upon opening
• 2023.01.27 Great TOC animation in https://kld.dev
• 2023.05.20 Pure CSS glitch animation, from https://dustri.org

Improve Stuff and Tutto

• Make elements filterable by current, one-time, year, etc.
  • https://linusbohman.se is a great reference
  • Filter, sort and search arrays with JavaScript
• Start and end dates instead of a boolean, to state whether the thing is ongoing or not
• Consider merging in one unique page
• List all related/belonging events or things (using tag)
• Evaluate relationship and integration with the Now page

CV automation and handling

My plan is to have CV generation within a broader automated integration within the website:

• Refactor and rewrite the resume using JSON Resume schema
• Integrate the resume with
  • Tutto
  • Now
  • Europass
• Handle the CV both in the English and Italian versions
• Use GitHub Actions to generate
  • PDF CV (with LaTeX?)
  • HTML version

Accessibility improvements

Misregarding accessibility is a very bad tendency I do not want to favor. Still, it makes development a bit harder. I am neither a pro or very proficient in programming, so a11y requires a greater effort from me. Nevertheless, this needs to be done and kept in mind.

Where to start

• #115
• Making my website accessible, by Silvia Maggi
• Use evaluatory
• Use ssc

Move things into single pages

• Create different pages for each thing tagged things
• loop them in Compagni di viaggio

Jova Tommi uguale audio does not work

https://tommi.space/Tomminess

redirect_to

As I configured the redirect_from page, I should be configuring a redirect_to, thanks to which, after visiting to a link on tommi.space, you automatically get redirected to an external page.

Redirections

• /issues should redirect to site.issues
• /changelog should redirect to site.changelog
• /cv should redirect to site.author.cv.it
• /resume should redirect to site.author.cv.en

Using a different font for headings

So far, tommi.space has been using three fonts:

• EB Garamond as serif font for quotes and more peculiar writings
• Ubuntu Mono for code
• Inter for everything else

Most websites often use another font for headings. I might consider this for tommi.space, too.

Add Backlinks

Backlinks of a specific page are all the links to pages to which contain a link to that very page.

Resources

• backlinks include in eleventy-garden

Images lazy loading

Better OGP handling

Improve how page images and previews are handled

• automatic generation of OGP images
  • https://github.com/5t3ph/eleventy-plugin-social-images
• not only one general fallback image, but rather one image for each category/tag: idea, geek, etc.

Switch to Eleventy plugin for metadata generation

Use eleventy-plugin-metagen to generate metadata.

Automatic podcast audio transcriptions

Automatically generate transcripts from Sconnesso episodes.

YouTube lite button remains in the middle of the video while playing

This error cannot be reproduced locally, it only appears on the deployed website.

Full-width images in articles

Find a way to use full-width class in order to display specific images in full-width.

Setting universal Markdown link shortcodes

There are links such as https://stream.tommi.space/@tommi that I find myself writing and re-writing over and over. It would be useful to take advantage of Markdown shortcodes to set e.g. [@[email protected]] to always correspond to the url above.

Checklist

In order to make this feature actually usable, it is necessary that it works both in my development environment and in production.

• 11ty/eleventy#2315
• Obsidian implementation

Manipulate issues from pages’ front matters and vice-versa

Create a script that picks to-dos in pages’ front matter and manipulates issues accordingly, and vice versa.

Resources

• https://github.com/evanp/github-todotxt

Optimize CLS

Optimize CLS

Possible solutions:

• Eleventy Image Plugin
• Mapping the width and height attributes of media container elements to their aspect-ratio

ActivityPub support

Implementing ActivityPub, hence making tommi.space part of the Fediverse, is placed within the broader plan of making the website interoperable and connected with as many protocols and platforms as possible.

Resources

• Eleventy ActivityPub plugin
• ActivityPub Express, modular ActivityPub implementation as Express JS middleware to easily add decentralization and federation to Node apps
• RSS to ActivityPub, too complex for now, but waiting for either dariusk/rss-to-activitypub#64 or dariusk/rss-to-activitypub#65 to be implemented
• Nautilus: turn your website into an ActivityPub profile
• Bridgy and Bridgy Fed, to bridge activities among social media platforms

Improve Wikilinks implementation

As of right now, the use of wikilinks is strictly limited to and by the markdown-it-wikilinks feature set.

Missing features I intend to use:

• jsepia/markdown-it-wikilinks#7
• jsepia/markdown-it-wikilinks#8
• jsepia/markdown-it-wikilinks#9
• jsepia/markdown-it-wikilinks#10

“tried to use templateContent too early”

11ty/eleventy#1615 (comment)

The issue is blocking:

• Full-text search