Docs: slugify HTML IDs so they're restricted to alphanumerics and dashes

This is a precaution to avoid JS breaking if some routes would
contain something that doesn't fit well into CSS `#some-id` selectors,
e.g. semicolons or parens.
This commit is contained in:
Aleksey Zhukov 2017-05-23 18:27:18 +03:00
parent f0e65d2637
commit 699a5eec68
No known key found for this signature in database
GPG Key ID: E1C3A2857EFC7C66
3 changed files with 8 additions and 8 deletions

View File

@ -1,9 +1,9 @@
{% load rest_framework %}
{% for section_key, section in items %}
{% if section_key %}
<h{{level}} id="{{ path|list_add:section_key|join:'-' }}" class="coredocs-section-title">
<h{{level}} id="{{ path|list_add:section_key|join:'-'|slugify }}" class="coredocs-section-title">
{{ section_key }}
<a href="#{{ path|list_add:section_key|join:'-' }}"><i class="fa fa-link" aria-hidden="true"></i></a>
<a href="#{{ path|list_add:section_key|join:'-'|slugify }}"><i class="fa fa-link" aria-hidden="true"></i></a>
</h{{level}}>
{% endif %}

View File

@ -1,14 +1,14 @@
{% load rest_framework %}
{% if items %}
<ul id="{% if path %}{{ path|join:"-" }}-dropdown{% else %}menu-content{% endif %}" class="menu-content collapse out">
<ul id="{% if path %}{{ path|join:"-"|slugify }}-dropdown{% else %}menu-content{% endif %}" class="menu-content collapse out">
{% for section_key, section in items %}
<li data-toggle="collapse" data-target="#{{ path|list_add:section_key|join:"-" }}-dropdown" class="collapsed">
<li data-toggle="collapse" data-target="#{{ path|list_add:section_key|join:"-"|slugify }}-dropdown" class="collapsed">
<a><i class="fa fa-dot-circle-o fa-lg"></i> {% for p in path %}{{ p }}/{% endfor %}{% if section_key %}{{ section_key }}{% else %}API Endpoints{% endif %} <span class="arrow"></span></a>
</li>
{% if section.links|items %}
<ul class="sub-menu {% if section_key %}collapse{% endif %}" id="{{ path|list_add:section_key|join:'-' }}-dropdown">
<ul class="sub-menu {% if section_key %}collapse{% endif %}" id="{{ path|list_add:section_key|join:'-'|slugify }}-dropdown">
{% for link_key, link in section.links|items %}
<li><a href="#{{ path|list_add:section_key|list_add:link_key|join:"-" }}">{{ link.title|default:link_key }}</a></li>
<li><a href="#{{ path|list_add:section_key|list_add:link_key|join:"-"|slugify }}">{{ link.title|default:link_key }}</a></li>
{% endfor %}
</ul>
{% endif %}

View File

@ -10,9 +10,9 @@
<i class="fa fa-exchange"></i> Interact
</button>
<h3 id="{{ path|list_add:section_key|list_add:link_key|join:"-" }}" class="coredocs-link-title">
<h3 id="{{ path|list_add:section_key|list_add:link_key|join:"-"|slugify }}" class="coredocs-link-title">
{{ link.title|default:link_key }}
<a href="#{{ path|list_add:section_key|list_add:link_key|join:"-" }}"><i class="fa fa-link" aria-hidden="true"></i></a>
<a href="#{{ path|list_add:section_key|list_add:link_key|join:"-"|slugify }}"><i class="fa fa-link" aria-hidden="true"></i></a>
</h3>
<div class="meta">