# Demo of Baobab for Neocities

# Introduction

The actual free plan of Neocities gives for free 1 Go of memory.
This is more than enough for a typical personal website.

I started to invest myself in my website after ending my PhD thesis in march 2022.
The goal is not to get noticed as Influencers do, but to keep a "public diary" of what I build.
So, no images of my trips, of my family, of where I live, only stuff I made: tech projects, DIY projects, cooking (avoid having ten report cards), and books (because memories disappear).

Now my website is about `400 Mo`.
I made a small visualization script to mimic [`baobab` linux tool](http://www.marzocca.net/linux/baobab/).
This article detail how to use it.


# Demo

## Set-Up

There is no need to install software.
Nevertheless, you need to download the script:

`git clone git@github.com:Japoneris/Neo-CLI.git`

Then, move into the folder:

`cd Neo-CLI`

To get the image of your website, you need to get your API key.

- If you have it (can be found on the neocities website), then store it into `API_KEY.txt` file.
- If you don't have it yet, authenticate yourself with `./neocli.py auth`. You will need to enter your neocities credentials.

## Getting the File List

Next, you need to list the items there are on your website plus their size.
(The standard API of neocities returns the list of files and folder. We simply store its output).

`./neocli.py size --save`

This command will store into the `snapshots/` directory the files you have in your website.

It creates two files:

- `snapshots/T_<current_unix_time>.json`: For historical purposes;
- `snapshots/latest.json`: To get access quickly to the latest generated file.

## Generating the Map

Now we have the fingerprint of your website, we can move to the visualization part.

Go to the baobab folder:

`cd baobab`

Then, you just have to run the command:

`./bokeh_baobab ../snapshots/latest.json`

The script must open a webpage containing the result.
This page is stored into `baobab/html/` folder.


# Analyzing the Results

## Main View

For my website, I obtained:

{% include baobab_2022_09_25.html %}

What we can see is that the main memory consumer is the `images/` folder.
This is not surprising, because textual information cost almost nothing to store.


## Detailed View

`./bokeh_baobab ../snapshots/latest.json --sub_path=images`

To organize images, I create one folder per post.
When looking at the detailed view, we can see that there are a few large projects that eat all the space:

- `images/crypto_cat`, where I have many many `.png` files, storing cat configuration, for all possible colors. For this one, I need to find out how to load .svg in bokeh or to code directly in javascript to compute template on the fly.
- `images/PixTable`, where I did not remove over-sized images (10Mo per images ...)
- `images/Sac_a_main`, many photographs, cannot reduce that much.

These items contribute for a large part, so optimizing a little bit would free a lot of space.

<!--
Include doesn't work properly
{% include baobab_2022_09_25_images.html %}
-->


# Conclusion

This is a short demo of the tool.
It allows to clearly see what are the major point to tackle to reduce memory footprint.