Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Timeline] Maybe use template html file? #46

Open
Andre601 opened this issue Sep 1, 2023 · 0 comments
Open

[Timeline] Maybe use template html file? #46

Andre601 opened this issue Sep 1, 2023 · 0 comments

Comments

@Andre601
Copy link

Andre601 commented Sep 1, 2023

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant