Wrap blog templates with an ablog CSS selector

[choldgraf]

Describe the feature

Currently, this extension has no way of knowing whether an inserted template is related to ABlog. For example:

from https://github.com/sunpy/ablog/blob/main/ablog/templates/authors.html :

{% if ablog.author %}
<h3><a href="{{ pathto(ablog.author.path) }}">{{ gettext('Authors') }}</a></h3>
<ul>
  {% for coll in ablog.author %} {% if coll %}
  <li>
    <a href="{{ pathto(coll.docname) }}">{{ coll }} ({{ coll|length }})</a>
  </li>
  {% endif %} {% endfor %}
</ul>
{% endif %}

This makes it harder to create CSS rules that make ABlog behave in certain ways (e.g. as a part of themes)

Proposed solution

An easy path forward would be to wrap all of those ablog templates with a CSS selector that was unique to the template. For example:

{% if ablog.author %}
<div class="ablog-sidebar-item ablog__authors">
<h3><a href="{{ pathto(ablog.author.path) }}">{{ gettext('Authors') }}</a></h3>
<ul>
  {% for coll in ablog.author %} {% if coll %}
  <li>
    <a href="{{ pathto(coll.docname) }}">{{ coll }} ({{ coll|length }})</a>
  </li>
  {% endif %} {% endfor %}
</ul>
</div>
{% endif %}

References

I think this is related to:

• #108

[nabobalis]

I would just need to add a custom div like that for each html file in https://github.com/sunpy/ablog/tree/main/ablog/templates ?

[choldgraf]

Yeah I think so - you could just do a pattern like:

<div class="ablog-item ablog__{{ TEMPLATE-FILENAME }}">
{{ whatever is in there now }}
</div>

cc @pradyunsg in case he has any thoughts there

[choldgraf]

Similarly, for the HTML elements that at put onto a page, like the previous and next post buttons, it would be helpful if there were a wrapper that was unique to ablog. So for example:

<div class="section">
  <span style="float: left">
     Previous:
    
    <a href="post2.html">
       Post 2
    </a>
    
  </span>
  <span>&nbsp;</span>
  <span style="float: right">
    
  </span>
</div>

could instead be:

<div class="section ablog__prev-next">
  <span style="float: left">
     Previous:
    
    <a href="post2.html">
       Post 2
    </a>
    
  </span>
  <span>&nbsp;</span>
  <span style="float: right">
    
  </span>
</div>

[nabobalis]

Thanks, I will see about getting this in ablog within this week.