Skip to content

Commit 14d6460

Browse files
quarcksterquarckster
committed
workaround for perfomance hit
Due to bug squidfunk/mkdocs-material#7317 page loading takes a significant amount of time. This commit replaces .md-ellipsis with .md-ellipsis-custom class.
1 parent b82b140 commit 14d6460

File tree

3 files changed

+291
-0
lines changed

3 files changed

+291
-0
lines changed

‎mkdocs.yml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,12 @@ extra:
55
version:
66
provider: mike
77
default: master
8+
extra_css:
9+
- stylesheets/extra.css
810
theme:
911
favicon: images/favicon.ico
1012
name: material
13+
custom_dir: overrides
1114
palette:
1215
- scheme: default
1316
primary: blue grey
@@ -25,6 +28,7 @@ theme:
2528
- navigation.indexes
2629
- navigation.instant
2730
- navigation.path
31+
- navigation.prune
2832
- navigation.tabs
2933
- navigation.tabs.sticky
3034
- navigation.tracking

‎overrides/partials/nav-item.html

Lines changed: 283 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,283 @@
1+
<!--
2+
Copyright (c) 2016-2024 Martin Donath <[email protected]>
3+
4+
Permission is hereby granted, free of charge, to any person obtaining a copy
5+
of this software and associated documentation files (the "Software"), to
6+
deal in the Software without restriction, including without limitation the
7+
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
8+
sell copies of the Software, and to permit persons to whom the Software is
9+
furnished to do so, subject to the following conditions:
10+
11+
The above copyright notice and this permission notice shall be included in
12+
all copies or substantial portions of the Software.
13+
14+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16+
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
17+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
19+
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
20+
IN THE SOFTWARE.
21+
-->
22+
23+
<!-- Render navigation link status -->
24+
{% macro render_status(nav_item, type) %}
25+
{% set class = "md-status md-status--" ~ type %}
26+
27+
<!-- Render icon with title (or tooltip), if given -->
28+
{% if config.extra.status and config.extra.status[type] %}
29+
<span
30+
class="{{ class }}"
31+
title="{{ config.extra.status[type] }}"
32+
>
33+
</span>
34+
35+
<!-- Render icon only -->
36+
{% else %}
37+
<span class="{{ class }}"></span>
38+
{% endif %}
39+
{% endmacro %}
40+
41+
<!-- Render navigation link content -->
42+
{% macro render_content(nav_item, ref = nav_item) %}
43+
44+
<!-- Navigation link icon -->
45+
{% if nav_item.is_page and nav_item.meta.icon %}
46+
{% include ".icons/" ~ nav_item.meta.icon ~ ".svg" %}
47+
{% endif %}
48+
49+
<!-- Navigation link title -->
50+
<!-- drift from the orignal partial is here "md-ellipsis" is replaced with "md-ellipsis-custom" -->
51+
<span class="md-ellipsis-custom">
52+
{{ ref.title }}
53+
</span>
54+
55+
<!-- Navigation link status -->
56+
{% if nav_item.is_page and nav_item.meta.status %}
57+
{{ render_status(nav_item, nav_item.meta.status) }}
58+
{% endif %}
59+
{% endmacro %}
60+
61+
<!-- Render navigation item (pruned) -->
62+
{% macro render_pruned(nav_item, ref = nav_item) %}
63+
{% set first = nav_item.children | first %}
64+
65+
<!-- Recurse, if the first item has further nested items -->
66+
{% if first and first.children %}
67+
{{ render_pruned(first, ref) }}
68+
69+
<!-- Navigation link -->
70+
{% else %}
71+
<a href="{{ first.url | url }}" class="md-nav__link">
72+
{{ render_content(ref) }}
73+
74+
<!-- Only render toggle if there's at least one nested item -->
75+
{% if nav_item.children | length > 0 %}
76+
<span class="md-nav__icon md-icon"></span>
77+
{% endif %}
78+
</a>
79+
{% endif %}
80+
{% endmacro %}
81+
82+
<!-- Render navigation item -->
83+
{% macro render(nav_item, path, level) %}
84+
85+
<!-- Determine classes -->
86+
{% set class = "md-nav__item" %}
87+
{% if nav_item.active %}
88+
{% set class = class ~ " md-nav__item--active" %}
89+
{% endif %}
90+
91+
<!-- Determine active page for paginated views -->
92+
{% if nav_item.pages %}
93+
{% if page in nav_item.pages %}
94+
{% set nav_item = page %}
95+
{% endif %}
96+
{% endif %}
97+
98+
<!-- Navigation item with nested items -->
99+
{% if nav_item.children %}
100+
101+
<!-- Determine all nested items that are index pages -->
102+
{% set indexes = [] %}
103+
{% if "navigation.indexes" in features %}
104+
{% for nav_item in nav_item.children %}
105+
{% if nav_item.is_index and not index is defined %}
106+
{% set _ = indexes.append(nav_item) %}
107+
{% endif %}
108+
{% endfor %}
109+
{% endif %}
110+
111+
<!-- Navigation tabs -->
112+
{% if "navigation.tabs" in features %}
113+
114+
<!-- Render 1st level active item as section -->
115+
{% if level == 1 and nav_item.active %}
116+
{% set class = class ~ " md-nav__item--section" %}
117+
{% set is_section = true %}
118+
{% endif %}
119+
120+
<!-- Navigation tabs + sections -->
121+
{% if "navigation.sections" in features %}
122+
123+
<!-- Render 2nd level items with nested items as sections -->
124+
{% if level == 2 and nav_item.parent.active %}
125+
{% set class = class ~ " md-nav__item--section" %}
126+
{% set is_section = true %}
127+
{% endif %}
128+
{% endif %}
129+
130+
<!-- Navigation sections -->
131+
{% elif "navigation.sections" in features %}
132+
133+
<!-- Render 1st level items with nested items as sections -->
134+
{% if level == 1 %}
135+
{% set class = class ~ " md-nav__item--section" %}
136+
{% set is_section = true %}
137+
{% endif %}
138+
{% endif %}
139+
140+
<!-- Navigation pruning -->
141+
{% if "navigation.prune" in features %}
142+
143+
<!-- Prune item if it is not a section and not active -->
144+
{% if not is_section and not nav_item.active %}
145+
{% set class = class ~ " md-nav__item--pruned" %}
146+
{% set is_pruned = true %}
147+
{% endif %}
148+
{% endif %}
149+
150+
<!-- Nested navigation item -->
151+
<li class="{{ class }} md-nav__item--nested">
152+
{% if not is_pruned %}
153+
{% set checked = "checked" if nav_item.active %}
154+
155+
<!-- Determine checked and indeterminate state -->
156+
{% if "navigation.expand" in features and not checked %}
157+
{% set indeterminate = "md-toggle--indeterminate" %}
158+
{% endif %}
159+
160+
<!-- Active checkbox expands items contained within nested section -->
161+
<input
162+
class="md-nav__toggle md-toggle {{ indeterminate }}"
163+
type="checkbox"
164+
id="{{ path }}"
165+
{{ checked }}
166+
/>
167+
168+
<!-- Toggle to expand nested items -->
169+
{% if not indexes %}
170+
{% set tabindex = "0" if not is_section %}
171+
<label
172+
class="md-nav__link"
173+
for="{{ path }}"
174+
id="{{ path }}_label"
175+
tabindex="{{ tabindex }}"
176+
>
177+
{{ render_content(nav_item) }}
178+
<span class="md-nav__icon md-icon"></span>
179+
</label>
180+
181+
<!-- Toggle to expand nested items with link to index page -->
182+
{% else %}
183+
{% set index = indexes | first %}
184+
{% set class = "md-nav__link--active" if index == page %}
185+
<div class="md-nav__link md-nav__container">
186+
<a
187+
href="{{ index.url | url }}"
188+
class="md-nav__link {{ class }}"
189+
>
190+
{{ render_content(index, nav_item) }}
191+
</a>
192+
193+
<!-- Only render toggle if there's at least one more page -->
194+
{% if nav_item.children | length > 1 %}
195+
{% set tabindex = "0" if not is_section %}
196+
<label
197+
class="md-nav__link {{ class }}"
198+
for="{{ path }}"
199+
id="{{ path }}_label"
200+
tabindex="{{ tabindex }}"
201+
>
202+
<span class="md-nav__icon md-icon"></span>
203+
</label>
204+
{% endif %}
205+
</div>
206+
{% endif %}
207+
208+
<!-- Nested navigation -->
209+
<nav
210+
class="md-nav"
211+
data-md-level="{{ level }}"
212+
aria-labelledby="{{ path }}_label"
213+
aria-expanded="{{ nav_item.active | tojson }}"
214+
>
215+
<label class="md-nav__title" for="{{ path }}">
216+
<span class="md-nav__icon md-icon"></span>
217+
{{ nav_item.title }}
218+
</label>
219+
<ul class="md-nav__list" data-md-scrollfix>
220+
221+
<!-- Nested navigation item -->
222+
{% for nav_item in nav_item.children %}
223+
{% if not indexes or nav_item != indexes | first %}
224+
{{ render(nav_item, path ~ "_" ~ loop.index, level + 1) }}
225+
{% endif %}
226+
{% endfor %}
227+
</ul>
228+
</nav>
229+
230+
<!-- Pruned navigation item -->
231+
{% else %}
232+
{{ render_pruned(nav_item) }}
233+
{% endif %}
234+
</li>
235+
236+
<!-- Currently active page -->
237+
{% elif nav_item == page %}
238+
<li class="{{ class }}">
239+
{% set toc = page.toc %}
240+
241+
<!-- State toggle -->
242+
<input
243+
class="md-nav__toggle md-toggle"
244+
type="checkbox"
245+
id="__toc"
246+
/>
247+
248+
<!-- Hack: see partials/toc.html for more information -->
249+
{% set first = toc | first %}
250+
{% if first and first.level == 1 %}
251+
{% set toc = first.children %}
252+
{% endif %}
253+
254+
<!-- Navigation link to table of contents -->
255+
{% if toc %}
256+
<label class="md-nav__link md-nav__link--active" for="__toc">
257+
{{ render_content(nav_item) }}
258+
<span class="md-nav__icon md-icon"></span>
259+
</label>
260+
{% endif %}
261+
<a
262+
href="{{ nav_item.url | url }}"
263+
class="md-nav__link md-nav__link--active"
264+
>
265+
{{ render_content(nav_item) }}
266+
</a>
267+
268+
<!-- Table of contents -->
269+
{% if toc %}
270+
{% include "partials/toc.html" %}
271+
{% endif %}
272+
</li>
273+
274+
<!-- Navigation item -->
275+
{% else %}
276+
<li class="{{ class }}">
277+
<!-- drift from the orignal partial is here title="{{ nav_item.title }}" added -->
278+
<a href="{{ nav_item.url | url }}" class="md-nav__link" title="{{ nav_item.title }}">
279+
{{ render_content(nav_item) }}
280+
</a>
281+
</li>
282+
{% endif %}
283+
{% endmacro %}

‎scaffold/stylesheets/extra.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.md-ellipsis-custom {
2+
overflow: hidden;
3+
text-overflow: ellipsis;
4+
}

0 commit comments

Comments
 (0)