Smallblog, update 1.3!

This is a quick technical overview, I will create a separated blog post for more details.

To create the theme I first chose a color palette using different services to get inspiration (pinterest, colors from adobe, coolors.com and realtime colors).

Once the color palette chosen, I had to edit the CSS file. It was a messy process because I hadn't well organized the theme before, colors were everywhere in the CSS rules. So, I listed everything, tried to make logical groups and then created variables to have everything well organized. If you don't know, you can define CSS variables like so: --color-table-header: #ffb13e and use them this way: background-color: var(--color-table-header). This enables you to set all your colors in the same place and if a color is used many times, you can easily edit one line to change everything.

The third step was defining the light theme in CSS. For that, I use the following CSS selector: [data-color-mode="light"]. Then in this selector I edited the colors of the CSS variables. I also added the following CSS selector [data-color-mode="dark"] to set the colors of the dark theme.

Finally, I added a button to switch between the themes, which triggers a JS function to switch the data-color-mode property of the body. This code also set the default value of the data-color-mode property to the theme used by your browser. If you manually change the settings, the chosen theme is stored in the local storage of your browser, so changing page doesn't reset your preference.

I use Hono to route requests, before the change for file-based routing, I had 4 main ways to handle requests:

1. The special resources (/robots.txt, sitemap.xml, favicon.ico, ...)
2. The root (/), where you can see the list of posts
3. The posts (/posts/...)
4. The other pages or static files (/...)

The file-based routing enables me to handle the last two types of requests the same way. This is :

server.get("/:filename{.+$}", (c) => {
  // Extracting the resource name from the route
  const filename = c.req.param("filename");

  if (!filename) {
    // This is the root, this shouldn't be handle here
    // Returns a 404 error but should never be reached
    return serveError(404);
  }
  if (path.extname(filename)) {
    // The articles doesn't have extensions
    // Returns the corresponding file (often images)
    return serveStaticFile(filename);
  }

  // Splitting the resource name between the folder and the file
  const basename = path.basename(filename);
  const dirname = path.dirname(filename);

  // Serving the page (the posts are handled differently than the other
  // pages by the function, this is why we extracted the dirname before)
  return servePage(
    dirname,
    basename,
    // Other parameters...
  );
});

The route parameter /:filename{.+$} can be difficult to understand. It simply means: "extract a filename variable from the route (:filename), it should contain any characters (.+) after / until the end $".

The issue was the content of the article, the entire HTML content was included in the summary, so most clients displayed the posts as raw HTML. To fix that, I only extracted the description of the post in the summary and I moved all the HTML content inside the property content:encoded.

Some elements were also not rendered correctly in some readers, so I had to make other changes:

1. No more SVG are used in the RSS feed (there were SVG next to each titles, and in the alerts)
2. The YouTube videos are not displayed as iframe but as a link to the video. The iframe was not rendered at all on some clients I tested which was not a great experience.
3. The mermaid diagrams are just displayed as code, as they do if no JS is enabled on the client. This is because JS injection is not possible in most RSS readers (hopefully in most cases)