Well, this two days, I am really not productive and also doesn’t producing money. I just only read maou gakuen no hangyakusha again. It happen because many ideas come to my mind when I want to develop my blog.

Modal Carousel 

For this one, I am already giveup. It happens if only I know about javascript. Most of this feature is implemented by using javascript. If just using CSS, it also really hard to do. Only someone with expert in CSS is can doing some amazing feature like that.

Table Of Content 

First time I am wondering if this feature is impossible to be achieved. I am just give up and reading light novel again. Next day morning, I found amazing theme. It can show awesome table of content. More importantly there is also this juice. It really perfect guide how to make table of content. After troubling with some of them, finally there is a big light for me to make table of content. Maybe just adding some style in CSS like collapsible sidebar, text indent.

List of Figure and Table 

First time wondering, maybe this only can be achieved using javascript. I spend many time reading on tera and zola documentation, and also reading on forum. There is awesome website that using translate feature in zola.

First time, I want to use shortcode. Learning many syntax in Tera. From assignment for aray with concat. Somehow the first example of zola is really doesn’t work at all. This my result of learning, I am sorry if it really messy.

{# This really doesn't work at all #}
{% set alt1 = "Figure 1 Minion is ricing her buff" %}
{% set fig1 = [alt1, alt1 | slugify] %}
{% set alt2 = "Figure 1 Minion is ricing her buff" %}
{% set fig2 = [alt2, alt2 | slugify] %}
{% set figlist | concat(with=fig1) %}
{% set figlist | concat(with=fig2) %}

{% for figur in figlist %}
  {% for title, slug in figur %}
    {{ title }}
    {{ slug }}
  {% endfor%}
{% endfor%}
{# This really doesn't work at all #}

{# Up is failed, see below #}

{% set alt1 = "Figure 1 Minion is ricing her buff" %}
{% set fig1 = [alt1, alt1 | slugify] %}
{% set figlist = figlist | concat(with=fig1) %}
{% set alt2 = "Figure 1 Minion is ricing her buff" %}
{% set fig2 = [alt2, alt2 | slugify] %}
{% set figlist = figlist | concat(with=fig2) %}

{% for figur in figlist %}
  {{ loop.index }} {{ figur }}<br />
{% endfor %}

{{ figlist[3] }} <br />

{% set figlistle = figlist | length / 2 %}
{{ figlistle }}
{% for num in range (end = 7) %}
  {{ num }}
{% endfor %}

{% set json_test = '{"mel": "jon", "kur": "bow"}' %}
{% set jsont = json_test | json_encode() | safe %}
{{ jsont }}

{% set alt3 = "Figure 1 Minion is ricing her buff" %}

{{ __tera_context }}

You know that range is cann’t be input with variable. So, from there I am give up with this approach. More importantly, tera also doesn’t support nested array. Make me More hard to do.

Finally, there is something that is really more reliable. I am just thinked that I will use h4 or ####. On the first I want to use h5 for figure and h6 for table. After thinking again and found good filter (as_str) that used for loop.index. I also found good test starting with. Finally, I am able to make some approach for this job :

1. Make custom id with #### <title without Figure or Table on the start> {#<id with figure or table>-to-differentiate}. When I try with same id, two of link pointed to same section. Maybe this approach is really flexible for link, but I will think again about this.
2. Make title with square bracket. This is the safest approach, because zola have nice algorithm to prevent to make same id. The example is #### <span>[Figure] or [Table]</span> <figure-title>. This also very convenient, because I mustn’t write same title and then id for same purpose it will take more time, and more importantly I can styling the span inside for make the caption is more noticable. For the sidebar show, maybe I will use replace filter in tera. This filter is’t like range, it can use variable and also string for the parameter.

This two approach make me use h1-h3 for only title heading, and then h4 for list of figure and title. Well in the future, I also want to add equation if katex-rs is merged to zola repository. I don’t want to use javascript as minimum as possible. The katex feature right now is using javascript, so for temporary I will not add it in my blog.

Coloring text 

The most simple way to add this feature is by using <r>text</r> r {color: red}. Maybe I will add 4 color, because it is very simple but bring convenient experience when blogging using markdown.

Styling table and footnote 

I just wonder why my footnote in my example test doesn’t work. After bothering some of theme example. I just found good example and I can styling it using CSS, the class is auto generated with pulldown cmark. Maybe I will take another time for it. This is very good reference for writing other element in markdown.

Yeah, maybe just thats it for today. The big next plan for me is I don’t want to use hover and change it with focus. I also want to change the color scheme. Hope my blog soon will be finished, and I can learn latex.