Skip to content

Commit 505e314

Browse files
cotes2020cotes2020
authored
perf: refactor using semantic HTML (#1207)
Fixes #1196
1 parent 41b8f9f commit 505e314

33 files changed

+415
-402
lines changed

‎_includes/comments/disqus.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!-- The Disqus lazy loading. -->
2-
<div id="disqus_thread" class="pt-2 pb-2">
2+
3+
<div id="disqus_thread" class="mb-5">
34
<p class="text-center text-muted small">Comments powered by <a href="https://disqus.com/">Disqus</a>.</p>
45
</div>
56

‎_includes/datetime.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,18 @@
33
See: ${JS_ROOT}/utils/locale-dateime.js
44
-->
55

6-
{% assign wrap_elem = include.wrap | default: 'em' %}
76
{% assign df_strftime = site.data.locales[include.lang].df.post.strftime | default: '%d/%m/%Y' %}
87
{% assign df_dayjs = site.data.locales[include.lang].df.post.dayjs | default: 'DD/MM/YYYY' %}
98

10-
<{{ wrap_elem }}
11-
class="{% if include.class %}{{ include.class }}{% endif %}"
9+
<time
10+
{% if include.class %}
11+
class="{{ include.class }}"
12+
{% endif %}
1213
data-ts="{{ include.date | date: '%s' }}"
1314
data-df="{{ df_dayjs }}"
1415
{% if include.tooltip %}
1516
data-bs-toggle="tooltip" data-bs-placement="bottom"
1617
{% endif %}
1718
>
1819
{{ include.date | date: df_strftime }}
19-
</{{ wrap_elem }}>
20+
</time>

‎_includes/footer.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
<!-- The Footer -->
22

33
<footer
4+
aria-label="Site Info"
45
class="
56
d-flex flex-column justify-content-center text-muted
67
flex-lg-row justify-content-lg-between align-items-lg-center pb-lg-3
78
"
89
>
910
<p>
1011
{{ '©' }}
11-
{{ 'now' | date: '%Y' }}
12+
<time>{{ 'now' | date: '%Y' }}</time>
1213
<a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
1314
{% if site.data.locales[include.lang].copyright.brief %}
1415
<span

‎_includes/notification.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<aside
2+
id="notification"
3+
class="toast"
4+
role="alert"
5+
aria-live="assertive"
6+
aria-atomic="true"
7+
data-bs-animation="true"
8+
data-bs-autohide="false"
9+
>
10+
<div class="toast-header">
11+
<button
12+
type="button"
13+
class="btn-close ms-auto"
14+
data-bs-dismiss="toast"
15+
aria-label="Close"
16+
></button>
17+
</div>
18+
<div class="toast-body text-center pt-0">
19+
<p class="px-2 mb-3">{{ site.data.locales[include.lang].notification.update_found }}</p>
20+
<button type="button" class="btn btn-primary" aria-label="Update">
21+
{{ site.data.locales[include.lang].notification.update }}
22+
</button>
23+
</div>
24+
</aside>

‎_includes/post-nav.html‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
<!-- Navigation buttons at the bottom of the post. -->
22

3-
<div class="post-navigation d-flex justify-content-between">
3+
<nav class="post-navigation d-flex justify-content-between" aria-label="Post Navigation">
4+
{% assign previous = site.data.locales[include.lang].post.button.previous %}
5+
{% assign next = site.data.locales[include.lang].post.button.next %}
6+
47
{% if page.previous.url %}
58
<a
69
href="{{ site.baseurl }}{{ page.previous.url }}"
710
class="btn btn-outline-primary"
8-
prompt="{{ site.data.locales[include.lang].post.button.previous }}"
11+
aria-label="{{ previous }}"
912
>
1013
<p>{{ page.previous.title }}</p>
1114
</a>
1215
{% else %}
13-
<div
14-
class="btn btn-outline-primary disabled"
15-
prompt="{{ site.data.locales[include.lang].post.button.previous }}"
16-
>
16+
<div class="btn btn-outline-primary disabled" aria-label="{{ previous }}">
1717
<p>-</p>
1818
</div>
1919
{% endif %}
@@ -22,16 +22,13 @@
2222
<a
2323
href="{{ site.baseurl }}{{page.next.url}}"
2424
class="btn btn-outline-primary"
25-
prompt="{{ site.data.locales[include.lang].post.button.next }}"
25+
aria-label="{{ next }}"
2626
>
2727
<p>{{ page.next.title }}</p>
2828
</a>
2929
{% else %}
30-
<div
31-
class="btn btn-outline-primary disabled"
32-
prompt="{{ site.data.locales[include.lang].post.button.next }}"
33-
>
30+
<div class="btn btn-outline-primary disabled" aria-label="{{ next }}">
3431
<p>-</p>
3532
</div>
3633
{% endif %}
37-
</div>
34+
</nav>

‎_includes/related-posts.html‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -69,17 +69,17 @@
6969
{% endfor %}
7070

7171
{% if relate_posts.size > 0 %}
72-
<div id="related-posts" class="mb-2 mb-sm-4">
73-
<h3 class="pt-2 mb-4" data-toc-skip>
74-
{{ site.data.locales[include.lang].post.relate_posts }}
72+
<aside id="related-posts" aria-labelledby="related-label">
73+
<h3 class="mb-4" id="related-label">
74+
{{- site.data.locales[include.lang].post.relate_posts -}}
7575
</h3>
76-
<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4">
76+
<nav class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4">
7777
{% for post in relate_posts %}
78-
<div class="col">
79-
<a href="{{ post.url | relative_url }}" class="card post-preview h-100">
78+
<article class="col">
79+
<a href="{{ post.url | relative_url }}" class="post-preview card h-100">
8080
<div class="card-body">
8181
{% include datetime.html date=post.date class="small" lang=include.lang %}
82-
<h4 class="pt-0 my-2" data-toc-skip>{{ post.title }}</h4>
82+
<h4 class="pt-0 my-2">{{ post.title }}</h4>
8383
<div class="text-muted small">
8484
<p>
8585
{% include no-linenos.html content=post.content %}
@@ -88,10 +88,9 @@ <h4 class="pt-0 my-2" data-toc-skip>{{ post.title }}</h4>
8888
</div>
8989
</div>
9090
</a>
91-
</div>
91+
</article>
9292
{% endfor %}
93-
</div>
94-
<!-- .card-deck -->
95-
</div>
93+
</nav>
94+
</aside>
9695
<!-- #related-posts -->
9796
{% endif %}

‎_includes/search-loader.html‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,16 @@
44
-->
55

66
{% capture result_elem %}
7-
<div class="px-1 px-sm-2 px-lg-4 px-xl-0">
8-
<a href="{url}">{title}</a>
9-
<div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
10-
{categories}
11-
{tags}
12-
</div>
13-
<p>{snippet}</p>
14-
</div>
7+
<article class="px-1 px-sm-2 px-lg-4 px-xl-0">
8+
<header>
9+
<h2><a href="{url}">{title}</a></h2>
10+
<div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
11+
{categories}
12+
{tags}
13+
</div>
14+
</header>
15+
<p>{snippet}</p>
16+
</article>
1517
{% endcapture %}
1618

1719
{% capture not_found %}<p class="mt-5">{{ site.data.locales[include.lang].search.no_results }}</p>{% endcapture %}

‎_includes/search-results.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!-- The Search results -->
22

33
<div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
4-
<div class="col-11 post-content">
4+
<div class="col-11 content">
55
<div id="search-hints">
66
{% include_cached trending-tags.html %}
77
</div>

‎_includes/sidebar.html‎

Lines changed: 63 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!-- The Side Bar -->
22

3-
<div id="sidebar" class="d-flex flex-column align-items-end">
4-
<div class="profile-wrapper">
3+
<aside aria-label="Sidebar" id="sidebar" class="d-flex flex-column align-items-end">
4+
<header class="profile-wrapper">
55
<a href="{{ '/' | relative_url }}" id="avatar" class="rounded-circle">
66
{% if site.avatar != empty and site.avatar %}
77
{% capture avatar_url %}
@@ -17,39 +17,40 @@
1717
{% endif %}
1818
</a>
1919

20-
<div class="site-title">
20+
<h1 class="site-title">
2121
<a href="{{ '/' | relative_url }}">{{ site.title }}</a>
22-
</div>
23-
<div class="site-subtitle fst-italic">{{ site.tagline }}</div>
24-
</div>
22+
</h1>
23+
<p class="site-subtitle fst-italic mb-0">{{ site.tagline }}</p>
24+
</header>
2525
<!-- .profile-wrapper -->
2626

27-
<ul class="nav flex-column flex-grow-1 w-100 ps-0">
28-
<!-- home -->
29-
<li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
30-
<a href="{{ '/' | relative_url }}" class="nav-link">
31-
<i class="fa-fw fas fa-home"></i>
32-
<span>{{ site.data.locales[include.lang].tabs.home | upcase }}</span>
33-
</a>
34-
</li>
35-
<!-- the real tabs -->
36-
{% for tab in site.tabs %}
37-
<li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}">
38-
<a href="{{ tab.url | relative_url }}" class="nav-link">
39-
<i class="fa-fw {{ tab.icon }}"></i>
40-
{% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}
41-
42-
<span>{{ site.data.locales[include.lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
27+
<nav class="flex-column flex-grow-1 w-100 ps-0">
28+
<ul class="nav">
29+
<!-- home -->
30+
<li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
31+
<a href="{{ '/' | relative_url }}" class="nav-link">
32+
<i class="fa-fw fas fa-home"></i>
33+
<span>{{ site.data.locales[include.lang].tabs.home | upcase }}</span>
4334
</a>
4435
</li>
45-
<!-- .nav-item -->
46-
{% endfor %}
47-
</ul>
48-
<!-- ul.nav.flex-column -->
36+
<!-- the real tabs -->
37+
{% for tab in site.tabs %}
38+
<li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}">
39+
<a href="{{ tab.url | relative_url }}" class="nav-link">
40+
<i class="fa-fw {{ tab.icon }}"></i>
41+
{% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}
42+
43+
<span>{{ site.data.locales[include.lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
44+
</a>
45+
</li>
46+
<!-- .nav-item -->
47+
{% endfor %}
48+
</ul>
49+
</nav>
4950

5051
<div class="sidebar-bottom d-flex flex-wrap align-items-center w-100">
5152
{% unless site.theme_mode %}
52-
<button class="mode-toggle btn" aria-label="Switch Mode">
53+
<button type="button" class="mode-toggle btn" aria-label="Switch Mode">
5354
<i class="fas fa-adjust"></i>
5455
</button>
5556

@@ -58,47 +59,49 @@
5859
{% endif %}
5960
{% endunless %}
6061

61-
{% for entry in site.data.contact %}
62-
{% case entry.type %}
63-
{% when 'github', 'twitter' %}
64-
{%- capture url -%}
62+
<address class="d-flex mb-0">
63+
{% for entry in site.data.contact %}
64+
{% case entry.type %}
65+
{% when 'github', 'twitter' %}
66+
{%- capture url -%}
6567
https://{{ entry.type }}.com/{{ site[entry.type].username }}
6668
{%- endcapture -%}
67-
{% when 'email' %}
68-
{% assign email = site.social.email | split: '@' %}
69-
{%- capture url -%}
69+
{% when 'email' %}
70+
{% assign email = site.social.email | split: '@' %}
71+
{%- capture url -%}
7072
javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
7173
{%- endcapture -%}
72-
{% when 'rss' %}
73-
{% assign url = '/feed.xml' | relative_url %}
74-
{% else %}
75-
{% assign url = entry.url %}
76-
{% endcase %}
74+
{% when 'rss' %}
75+
{% assign url = '/feed.xml' | relative_url %}
76+
{% else %}
77+
{% assign url = entry.url %}
78+
{% endcase %}
7779

78-
{% if url %}
79-
<a
80-
href="{{ url }}"
81-
aria-label="{{ entry.type }}"
82-
{% assign link_types = '' %}
80+
{% if url %}
81+
<a
82+
href="{{ url }}"
83+
aria-label="{{ entry.type }}"
84+
{% assign link_types = '' %}
8385

84-
{% unless entry.noblank %}
85-
target="_blank"
86-
{% assign link_types = 'noopener noreferrer' %}
87-
{% endunless %}
86+
{% unless entry.noblank %}
87+
target="_blank"
88+
{% assign link_types = 'noopener noreferrer' %}
89+
{% endunless %}
8890

89-
{% if entry.type == 'mastodon' %}
90-
{% assign link_types = link_types | append: ' me' | strip %}
91-
{% endif %}
91+
{% if entry.type == 'mastodon' %}
92+
{% assign link_types = link_types | append: ' me' | strip %}
93+
{% endif %}
9294

93-
{% unless link_types == empty %}
94-
rel="{{ link_types }}"
95-
{% endunless %}
96-
>
97-
<i class="{{ entry.icon }}"></i>
98-
</a>
99-
{% endif %}
100-
{% endfor %}
95+
{% unless link_types == empty %}
96+
rel="{{ link_types }}"
97+
{% endunless %}
98+
>
99+
<i class="{{ entry.icon }}"></i>
100+
</a>
101+
{% endif %}
102+
{% endfor %}
103+
</address>
101104
</div>
102105
<!-- .sidebar-bottom -->
103-
</div>
106+
</aside>
104107
<!-- #sidebar -->

‎_includes/toc.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
{% endif %}
77

88
{% if enable_toc %}
9-
<div id="toc-wrapper" class="ps-0 pe-4 mb-5">
10-
<div class="panel-heading ps-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</div>
9+
<section id="toc-wrapper" class="ps-0 pe-4 mb-5">
10+
<h2 class="panel-heading ps-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</h2>
1111
<nav id="toc"></nav>
12-
</div>
12+
</section>
1313
{% endif %}

0 commit comments

Comments
 (0)