search

Neoteroi / mkdocs-plugins

Plugins for MkDocs.
MIT License
116 stars 9 forks source link

[Timeline] Maybe use template html file? #46

Open Andre601 opened 10 months ago

Andre601 commented 10 months ago

It would be really cool if the extension would utilize a template file to generate the timeline with its entry, granted that this is doable for an extension to begin with and not just limited to themes and plugins for MkDocs...

The reason would be much easier customization. Instead of having to fork this entire project, make the adjustments you want and then use your fork (Which could cause conflicts for projects that use the original project and not the fork and both use the same name) could you just enable theme extension and override the HTML file used by the extension in the right folder.

Again, this depends on if extensions can provide and use own template files AND also insert their own variables to use... Or there being an alternative for this.

Assuming extensions can do the above, is here a possible example file to use. In this example would timeline be the ::timeline:: object with options being the config options (class, alignment, headings, etc) and items being the different entries.

timeline.html

{% set positioning = "nt-timeline vertical " ~ timeline.options.align.value %}
{% if timeline.options.alternate %}
  {% set positioning = positioning ~ " " ~ timeline.options.alternate %}
{% endif %}
{% if timeline.options.class_name %}
  {% set positioning = positioning ~ " " ~ timeline.options.class_name %}
{% endif %}

<div class="{{ positioning }}">
  <div class="nt-timeline-before"></div>
  <div class="nt-timeline-items">
    {% for item in timeline.items %}
      <div class="nt-timeline {{ key | default('') }}">
        {% if timeline.options.headings %}
          <h3 class="nt-timeline-title">{{ item.title }}</h3>
        {% else %}
          <p class="nt-timeline-title">{{ item.title }}</h3>
        {% endif %}
        <span class="nt-timeline-sub-title">{{ item.sub_title }}</span>
        <p class="nt-timeline-content">{{ item.content }}</p>
        {% set dot_class = "nt-timeline-dot" %}
        {% if item.key %}
          {% set dot_class = dot_class ~ " " ~ item.key %}
        {% endif %}
        {% if item.icon %}
          {% set dot_class = dot_class ~ " bigger" %}
        {% endif %}
        <div class="{{ dot_class }}">
          {% if item.icon %}
            {% if "/" in item.icon %}
              <img class="icon" src="{{ item.icon }}" alt="step icon">
            {% elif "fa-" in item.icon %}
              <i class="{{ item.icon }} icon"></i>
            {% else %}
              <span class="icon">{{ item.icon }}</span>
            {% endif %}
          {% endif %}
        </div>
      </div>
    {% endfor %}
  </div>
  <div class="nt-timeline-after"></div>
</div>