Skip to content

Commit 989484a

Browse files
mudgemudge
committed
Don't include subsections in the site-wide TOC
To reduce the number of elements included on every single page of the documentation site, no longer include subsections of every section (e.g. terminate at Pico C SDK > Hardware APIs > hardware_adc, rather than also including the subsections of "Detailed Description", "Functions", etc.) as these are available in the right-hand "On this page" TOC shown on wide-enough screens. Note we're not yet cutting down the amount of markup to render the TOC but starting by cutting out the source data. This removes the JavaScript logic to render the currently clicked section in bold.
1 parent c6d3441 commit 989484a

File tree

2 files changed

+44
-194
lines changed

2 files changed

+44
-194
lines changed

‎jekyll-assets/_layouts/docs.html

Lines changed: 44 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -25,25 +25,14 @@ <h1 id="docs-header-title">
2525
</div>
2626
<div class="toc">
2727
{% for subdir in site.data.nav %}
28-
{% if subdir.toc[0] %}
2928
<ul class="sectlevel1">
30-
<input class="toc-toggle-box" type="checkbox" id="{{ subdir.path }}"
31-
{% if page.url contains subdir.path %}
32-
checked=true
33-
{% endif %}
34-
/>
29+
<input class="toc-toggle-box" type="checkbox" id="{{ subdir.path }}" {% if page.url contains subdir.path %}checked{% endif %} />
3530
<li>
3631
<span>
3732
<label class="toc-toggle" for="{{ subdir.path }}" onclick="event.stopPropagation()">
3833
<div class="toc-toggle-container">
3934
<a class="level1" href="{{ site.baseurl }}{{ subdir.path }}">
40-
<a title="expand {{ item.title | markdownify }}"
41-
{% if page.url contains subdir.path %}
42-
class="bold toc-item"
43-
{% else %}
44-
class="toc-item"
45-
{% endif %}
46-
>
35+
<a title="expand {{ item.title | markdownify }}" class="{% if page.url contains subdir.path %}bold {% endif %}toc-item">
4736
{{ subdir.title | markdownify }}
4837
</a>
4938
</a>
@@ -52,126 +41,55 @@ <h1 id="docs-header-title">
5241
</span>
5342
</li>
5443
{% for item in subdir.toc %}
55-
<div class="itemcontents">
56-
<ul class="sectlevel1">
57-
<input class="toc-toggle-box" type="checkbox" id="{{ item.path }}"
58-
{% if page.url contains item.path %}
59-
checked=true
60-
{% endif %}
61-
/>
62-
<li>
63-
<span>
64-
<label class="toc-toggle" for="{{ item.path }}">
65-
<div class="toc-toggle-container">
66-
<a class="level2" href="{{ site.baseurl }}{{ item.path }}">
67-
<a title="expand {{ item.title | strip_html }}"
68-
{% if page.url contains item.path %}
69-
class="bold toc-item"
70-
{% else %}
71-
class="toc-item"
72-
{% endif %}
73-
>
74-
{{ item.title | markdownify }}
75-
</a>
76-
</a>
77-
</div>
78-
</label>
79-
</span>
80-
</li>
81-
{% if item.sections[0] %}
82-
{% for entry in item.sections %}
83-
<div class="itemcontents">
84-
<ul class="sectlevel1">
85-
<input class="toc-toggle-box" type="checkbox" id="{{ item.path }}#{{ entry.anchor }}"
86-
{% if endcapture contains entry.anchor %}
87-
checked=true
88-
{% endif %}
89-
/>
90-
<li>
91-
<span>
92-
<label class="toc-toggle"
93-
{% if entry.subsections[0] %}
94-
for="{{ item.path }}#{{ entry.anchor }}"
95-
{% else %}
96-
{% endif %}>
97-
<div class="toc-toggle-container">
98-
{% if entry.subsections[0] %}
99-
<a class="level3">
100-
<a
101-
id="{{ item.path }}#{{entry.anchor}}-toc"
102-
href="{{ site.baseurl }}{{ item.path }}#{{ entry.anchor }}"
103-
class="toc-item"
104-
onclick="document.getElementById('mobile-toggle').checked = false; updateCurrentToc('{{ item.path }}#{{ entry.anchor }}-toc', '{{ item.path }}#{{ entry.anchor }}');"
105-
title="expand {{ entry.heading | strip_html }}"
106-
>
107-
<script type="text/javascript">if (window.location.hash == '#{{ entry.anchor }}' && window.location.href.includes('{{ item.path }}')) initialiseCurrentToc('{{ item.path }}#{{entry.anchor}}-toc', '{{ item.path }}#{{ entry.anchor }}');
108-
</script>
109-
{{ entry.heading | markdownify }}
110-
</a>
44+
<div class="itemcontents">
45+
<ul class="sectlevel1">
46+
<input class="toc-toggle-box" type="checkbox" id="{{ item.path }}" {% if page.url contains item.path %}checked{% endif %} />
47+
<li>
48+
<span>
49+
<label class="toc-toggle" for="{{ item.path }}">
50+
<div class="toc-toggle-container">
51+
<a class="level2" href="{{ site.baseurl }}{{ item.path }}">
52+
<a title="expand {{ item.title | strip_html }}" class="{% if page.url contains item.path %}bold {% endif %}toc-item">
53+
{{ item.title | markdownify }}
11154
</a>
112-
{% else %}
113-
<a class="level3">
114-
<a id="{{ item.path }}#{{entry.anchor}}-toc"
115-
title="expand {{ entry.heading | strip_html }}"
116-
href="{{ site.baseurl }}{{ item.path }}#{{ entry.anchor }}"
117-
onclick="document.getElementById('mobile-toggle').checked = false; updateCurrentToc('{{ item.path }}#{{ entry.anchor }}-toc');"
118-
class="toc-item no-dropdown"
119-
>
120-
<script type="text/javascript">if (window.location.hash == '#{{ entry.anchor }}' && window.location.href.includes('{{ item.path }}'))
121-
initialiseCurrentToc('{{ item.path }}#{{entry.anchor}}-toc');
122-
</script>
123-
{{ entry.heading | markdownify }}
55+
</a>
56+
</div>
57+
</label>
58+
</span>
59+
</li>
60+
{% for entry in item.sections %}
61+
<div class="itemcontents">
62+
<ul class="sectlevel1">
63+
<li>
64+
<span>
65+
<label class="toc-toggle">
66+
<div class="toc-toggle-container">
67+
<a class="level3">
68+
<a
69+
href="{{ site.baseurl }}{{ item.path }}#{{ entry.anchor }}"
70+
onclick="document.getElementById('mobile-toggle').checked = false"
71+
class="toc-item no-dropdown"
72+
>
73+
{{ entry.heading | markdownify }}
74+
</a>
12475
</a>
125-
</a>
126-
{% endif %}
127-
</div>
128-
</label>
129-
</span>
130-
</li>
131-
{% if entry.subsections[0] %}
132-
{% for subentry in entry.subsections %}
133-
<div class="itemcontents">
134-
<ul class="sectlevel1">
135-
<li>
136-
<span>
137-
<label class="toc-toggle">
138-
<div class="toc-toggle-container">
139-
<a class="level4">
140-
<a class="toc-item no-dropdown"
141-
href="{{ site.baseurl }}{{ item.path }}#{{ subentry.anchor }}"
142-
onclick="document.getElementById('mobile-toggle').checked = false; updateCurrentToc('{{ item.path }}#{{ entry.anchor }}-toc', '{{ item.path }}#{{ entry.anchor }}', '{{ item.path }}#{{ subentry.anchor }}-toc');"
143-
id="{{ item.path }}#{{subentry.anchor}}-toc"
144-
>
145-
<script type="text/javascript">if (window.location.hash == '#{{ subentry.anchor }}' && window.location.href.includes('{{ item.path }}')) initialiseCurrentToc('{{ item.path }}#{{ entry.anchor }}-toc', '{{ item.path }}#{{ entry.anchor }}', '{{ item.path }}#{{ subentry.anchor }}-toc');
146-
</script>
147-
{{ subentry.heading | markdownify }}
148-
</a>
149-
</a>
150-
</div>
151-
</label>
152-
</span>
153-
</li>
154-
</ul>
155-
</div>
156-
{% endfor %}
157-
{% endif %}
158-
</ul>
159-
</div>
76+
</div>
77+
</label>
78+
</span>
79+
</li>
80+
</ul>
81+
</div>
16082
{% endfor %}
161-
{% endif %}
16283
</ul>
16384
</div>
16485
{% endfor %}
16586
</ul>
166-
{% endif %}
167-
{% endfor %}
168-
87+
{% endfor %}
88+
16989
<ul class="sectlevel1">
170-
<input class="toc-toggle-box" type="checkbox" id="datasheets"
171-
/>
17290
<li>
17391
<span>
174-
<label class="toc-toggle" for="{{ subdir.path }}">
92+
<label class="toc-toggle">
17593
<div class="toc-toggle-container">
17694
<a class="level1">
17795
<a title="PDF documentation" class="toc-item no-dropdown" href="https://datasheets.raspberrypi.com/" target="_blank">
@@ -185,11 +103,9 @@ <h1 id="docs-header-title">
185103
</ul>
186104

187105
<ul class="sectlevel1">
188-
<input class="toc-toggle-box" type="checkbox" id="pip"
189-
/>
190106
<li>
191107
<span>
192-
<label class="toc-toggle" for="{{ subdir.path }}">
108+
<label class="toc-toggle">
193109
<div class="toc-toggle-container">
194110
<a class="level1">
195111
<a title="Raspberry Pi compliance documents" class="toc-item no-dropdown" href="https://pip.raspberrypi.com/" target="_blank">
@@ -203,11 +119,9 @@ <h1 id="docs-header-title">
203119
</ul>
204120

205121
<ul class="sectlevel1">
206-
<input class="toc-toggle-box" type="checkbox" id="tutorials"
207-
/>
208122
<li>
209123
<span>
210-
<label class="toc-toggle" for="{{ subdir.path }}">
124+
<label class="toc-toggle">
211125
<div class="toc-toggle-container">
212126
<a class="level1">
213127
<a title="Hands-on hardware and software tutorials" class="toc-item no-dropdown" href="https://www.raspberrypi.com/tutorials/" target="_blank">
@@ -221,11 +135,9 @@ <h1 id="docs-header-title">
221135
</ul>
222136

223137
<ul class="sectlevel1">
224-
<input class="toc-toggle-box" type="checkbox" id="forums"
225-
/>
226138
<li>
227139
<span>
228-
<label class="toc-toggle" for="{{ subdir.path }}">
140+
<label class="toc-toggle">
229141
<div class="toc-toggle-container">
230142
<a class="level1">
231143
<a title="User and product support forums" class="toc-item no-dropdown" href="https://forums.raspberrypi.com" target="_blank">

‎jekyll-assets/scripts/toc.js

Lines changed: 0 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -34,65 +34,3 @@ function makeToc() {
3434
handleTocOnResize();
3535
}
3636
}
37-
38-
var currentParentID;
39-
var currentParentInputID;
40-
var currentChildID;
41-
42-
function initialiseCurrentToc(parentID, parentInputID = null, childID = null) {
43-
// highlight the new parent
44-
var newParent = document.getElementById(parentID);
45-
newParent.setAttribute('style', 'font-weight:bold');
46-
currentParentID = parentID;
47-
48-
// if a parent input id is specified, expand the parent element
49-
if (parentInputID) {
50-
var newParentInput = document.getElementById(parentInputID);
51-
newParentInput.click();
52-
currentParentInputID = parentInputID;
53-
}
54-
55-
// if a child is specified, highlight the child
56-
if (childID) {
57-
var newChild = document.getElementById(childID);
58-
newChild.setAttribute('style', 'font-weight:bold');
59-
currentChildID = childID;
60-
}
61-
}
62-
63-
function updateCurrentToc(parentID, parentInputID = null, childID = null) {
64-
if (currentParentID == null && currentChildID == null) {
65-
initialiseCurrentToc(parentID, parentInputID, childID)
66-
} else {
67-
// if a parent input id is specified, but no child, expand the parent element
68-
// why no child? because if someone clicks the child within a parent, they don't want the parent section to collapse!
69-
if (parentInputID && childID == null) {
70-
var newParentInput = document.getElementById(parentInputID);
71-
newParentInput.click();
72-
currentParentInputID = parentInputID;
73-
}
74-
75-
// if this is a new parent id, de-highlight the old parent and highlight the new one
76-
if (currentParentID != parentID) {
77-
var oldParent = document.getElementById(currentParentID);
78-
oldParent.style.removeProperty('font-weight');
79-
var newParent = document.getElementById(parentID);
80-
newParent.setAttribute('style', 'font-weight:bold');
81-
currentParentID = parentID;
82-
}
83-
84-
// if there is an old child highlighted, un-highlight it
85-
if (currentChildID) {
86-
var oldChild = document.getElementById(currentChildID);
87-
oldChild.style.removeProperty('font-weight');
88-
}
89-
90-
// if there is a new child, highlight it
91-
if (childID != null) {
92-
var newChild = document.getElementById(childID);
93-
94-
newChild.setAttribute('style', 'font-weight:bold');
95-
}
96-
currentChildID = childID;
97-
}
98-
}

0 commit comments

Comments
 (0)