Skip to content

Commit a6a37ab

Browse files
sispsquidfunk
sisp
and
squidfunk
authored
Moved header options to partials (#5877)
* Improved warning in social plugin about site_url * Documentation * Documentation * Extract header options into partials --------- Co-authored-by: squidfunk <[email protected]>
1 parent 0de17c6 commit a6a37ab

File tree

7 files changed

+146
-90
lines changed

7 files changed

+146
-90
lines changed

‎docs/customization.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@ assets may also be put in the `overrides` directory:
100100
│ │ └─ analytics.html # Analytics setup
101101
│ ├─ languages/ # Translation languages
102102
│ ├─ actions.html # Actions
103+
│ ├─ alternate.html # Translation language selector
103104
│ ├─ comments.html # Comment system (empty by default)
104105
│ ├─ consent.html # Consent
105106
│ ├─ content.html # Page content
@@ -113,6 +114,7 @@ assets may also be put in the `overrides` directory:
113114
│ ├─ nav.html # Main navigation
114115
│ ├─ nav-item.html # Main navigation item
115116
│ ├─ pagination.html # Pagination (used for blog)
117+
│ ├─ palette.html # Color palette toggle
116118
│ ├─ post.html # Blog post excerpt
117119
│ ├─ search.html # Search interface
118120
│ ├─ social.html # Social links

‎material/partials/alternate.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{#-
2+
This file was automatically generated - do not edit
3+
-#}
4+
<div class="md-header__option">
5+
<div class="md-select">
6+
{% set icon = config.theme.icon.alternate or "material/translate" %}
7+
<button class="md-header__button md-icon" aria-label="{{ lang.t('select.language') }}">
8+
{% include ".icons/" ~ icon ~ ".svg" %}
9+
</button>
10+
<div class="md-select__inner">
11+
<ul class="md-select__list">
12+
{% for alt in config.extra.alternate %}
13+
<li class="md-select__item">
14+
<a href="{{ alt.link | url }}" hreflang="{{ alt.lang }}" class="md-select__link">
15+
{{ alt.name }}
16+
</a>
17+
</li>
18+
{% endfor %}
19+
</ul>
20+
</div>
21+
</div>
22+
</div>

‎material/partials/header.html

Lines changed: 2 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -36,41 +36,11 @@
3636
</div>
3737
{% if config.theme.palette %}
3838
{% if not config.theme.palette is mapping %}
39-
<form class="md-header__option" data-md-component="palette">
40-
{% for option in config.theme.palette %}
41-
{% set scheme = option.scheme | d("default", true) %}
42-
{% set primary = option.primary | d("indigo", true) %}
43-
{% set accent = option.accent | d("indigo", true) %}
44-
<input class="md-option" data-md-color-media="{{ option.media }}" data-md-color-scheme="{{ scheme | replace(' ', '-') }}" data-md-color-primary="{{ primary | replace(' ', '-') }}" data-md-color-accent="{{ accent | replace(' ', '-') }}" {% if option.toggle %} aria-label="{{ option.toggle.name }}" {% else %} aria-hidden="true" {% endif %} type="radio" name="__palette" id="__palette_{{ loop.index }}">
45-
{% if option.toggle %}
46-
<label class="md-header__button md-icon" title="{{ option.toggle.name }}" for="__palette_{{ loop.index0 or loop.length }}" hidden>
47-
{% include ".icons/" ~ option.toggle.icon ~ ".svg" %}
48-
</label>
49-
{% endif %}
50-
{% endfor %}
51-
</form>
39+
{% include "partials/palette.html" %}
5240
{% endif %}
5341
{% endif %}
5442
{% if config.extra.alternate %}
55-
<div class="md-header__option">
56-
<div class="md-select">
57-
{% set icon = config.theme.icon.alternate or "material/translate" %}
58-
<button class="md-header__button md-icon" aria-label="{{ lang.t('select.language') }}">
59-
{% include ".icons/" ~ icon ~ ".svg" %}
60-
</button>
61-
<div class="md-select__inner">
62-
<ul class="md-select__list">
63-
{% for alt in config.extra.alternate %}
64-
<li class="md-select__item">
65-
<a href="{{ alt.link | url }}" hreflang="{{ alt.lang }}" class="md-select__link">
66-
{{ alt.name }}
67-
</a>
68-
</li>
69-
{% endfor %}
70-
</ul>
71-
</div>
72-
</div>
73-
</div>
43+
{% include "partials/alternate.html" %}
7444
{% endif %}
7545
{% if "material/search" in config.plugins %}
7646
<label class="md-header__button md-icon" for="__search">

‎material/partials/palette.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{#-
2+
This file was automatically generated - do not edit
3+
-#}
4+
<form class="md-header__option" data-md-component="palette">
5+
{% for option in config.theme.palette %}
6+
{% set scheme = option.scheme | d("default", true) %}
7+
{% set primary = option.primary | d("indigo", true) %}
8+
{% set accent = option.accent | d("indigo", true) %}
9+
<input class="md-option" data-md-color-media="{{ option.media }}" data-md-color-scheme="{{ scheme | replace(' ', '-') }}" data-md-color-primary="{{ primary | replace(' ', '-') }}" data-md-color-accent="{{ accent | replace(' ', '-') }}" {% if option.toggle %} aria-label="{{ option.toggle.name }}" {% else %} aria-hidden="true" {% endif %} type="radio" name="__palette" id="__palette_{{ loop.index }}">
10+
{% if option.toggle %}
11+
<label class="md-header__button md-icon" title="{{ option.toggle.name }}" for="__palette_{{ loop.index0 or loop.length }}" hidden>
12+
{% include ".icons/" ~ option.toggle.icon ~ ".svg" %}
13+
</label>
14+
{% endif %}
15+
{% endfor %}
16+
</form>

‎src/partials/alternate.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!--
2+
Copyright (c) 2016-2023 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+
<div class="md-header__option">
24+
<div class="md-select">
25+
{% set icon = config.theme.icon.alternate or "material/translate" %}
26+
<button
27+
class="md-header__button md-icon"
28+
aria-label="{{ lang.t('select.language') }}"
29+
>
30+
{% include ".icons/" ~ icon ~ ".svg" %}
31+
</button>
32+
<div class="md-select__inner">
33+
<ul class="md-select__list">
34+
{% for alt in config.extra.alternate %}
35+
<li class="md-select__item">
36+
<a
37+
href="{{ alt.link | url }}"
38+
hreflang="{{ alt.lang }}"
39+
class="md-select__link"
40+
>
41+
{{ alt.name }}
42+
</a>
43+
</li>
44+
{% endfor %}
45+
</ul>
46+
</div>
47+
</div>
48+
</div>

‎src/partials/header.html

Lines changed: 2 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -75,69 +75,13 @@
7575
<!-- Color palette -->
7676
{% if config.theme.palette %}
7777
{% if not config.theme.palette is mapping %}
78-
<form class="md-header__option" data-md-component="palette">
79-
{% for option in config.theme.palette %}
80-
{% set scheme = option.scheme | d("default", true) %}
81-
{% set primary = option.primary | d("indigo", true) %}
82-
{% set accent = option.accent | d("indigo", true) %}
83-
<input
84-
class="md-option"
85-
data-md-color-media="{{ option.media }}"
86-
data-md-color-scheme="{{ scheme | replace(' ', '-') }}"
87-
data-md-color-primary="{{ primary | replace(' ', '-') }}"
88-
data-md-color-accent="{{ accent | replace(' ', '-') }}"
89-
{% if option.toggle %}
90-
aria-label="{{ option.toggle.name }}"
91-
{% else %}
92-
aria-hidden="true"
93-
{% endif %}
94-
type="radio"
95-
name="__palette"
96-
id="__palette_{{ loop.index }}"
97-
/>
98-
{% if option.toggle %}
99-
<label
100-
class="md-header__button md-icon"
101-
title="{{ option.toggle.name }}"
102-
for="__palette_{{ loop.index0 or loop.length }}"
103-
hidden
104-
>
105-
{% include ".icons/" ~ option.toggle.icon ~ ".svg" %}
106-
</label>
107-
{% endif %}
108-
{% endfor %}
109-
</form>
78+
{% include "partials/palette.html" %}
11079
{% endif %}
11180
{% endif %}
11281

11382
<!-- Site language selector -->
11483
{% if config.extra.alternate %}
115-
<div class="md-header__option">
116-
<div class="md-select">
117-
{% set icon = config.theme.icon.alternate or "material/translate" %}
118-
<button
119-
class="md-header__button md-icon"
120-
aria-label="{{ lang.t('select.language') }}"
121-
>
122-
{% include ".icons/" ~ icon ~ ".svg" %}
123-
</button>
124-
<div class="md-select__inner">
125-
<ul class="md-select__list">
126-
{% for alt in config.extra.alternate %}
127-
<li class="md-select__item">
128-
<a
129-
href="{{ alt.link | url }}"
130-
hreflang="{{ alt.lang }}"
131-
class="md-select__link"
132-
>
133-
{{ alt.name }}
134-
</a>
135-
</li>
136-
{% endfor %}
137-
</ul>
138-
</div>
139-
</div>
140-
</div>
84+
{% include "partials/alternate.html" %}
14185
{% endif %}
14286

14387
<!-- Button to open search modal -->

‎src/partials/palette.html

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!--
2+
Copyright (c) 2016-2023 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+
<form class="md-header__option" data-md-component="palette">
24+
{% for option in config.theme.palette %}
25+
{% set scheme = option.scheme | d("default", true) %}
26+
{% set primary = option.primary | d("indigo", true) %}
27+
{% set accent = option.accent | d("indigo", true) %}
28+
<input
29+
class="md-option"
30+
data-md-color-media="{{ option.media }}"
31+
data-md-color-scheme="{{ scheme | replace(' ', '-') }}"
32+
data-md-color-primary="{{ primary | replace(' ', '-') }}"
33+
data-md-color-accent="{{ accent | replace(' ', '-') }}"
34+
{% if option.toggle %}
35+
aria-label="{{ option.toggle.name }}"
36+
{% else %}
37+
aria-hidden="true"
38+
{% endif %}
39+
type="radio"
40+
name="__palette"
41+
id="__palette_{{ loop.index }}"
42+
/>
43+
{% if option.toggle %}
44+
<label
45+
class="md-header__button md-icon"
46+
title="{{ option.toggle.name }}"
47+
for="__palette_{{ loop.index0 or loop.length }}"
48+
hidden
49+
>
50+
{% include ".icons/" ~ option.toggle.icon ~ ".svg" %}
51+
</label>
52+
{% endif %}
53+
{% endfor %}
54+
</form>

0 commit comments

Comments
 (0)