perf: refactor using semantic HTML (#1207)

Fixes #1196

_includes/comments/disqus.html

@@ -1,5 +1,6 @@
 <!-- The Disqus lazy loading. -->
-<div id="disqus_thread" class="pt-2 pb-2">
+
+<div id="disqus_thread" class="mb-5">
   <p class="text-center text-muted small">Comments powered by <a href="https://disqus.com/">Disqus</a>.</p>
 </div>
 

_includes/datetime.html

@@ -3,12 +3,13 @@
   See: ${JS_ROOT}/utils/locale-dateime.js
 -->
 
-{% assign wrap_elem = include.wrap | default: 'em' %}
 {% assign df_strftime = site.data.locales[include.lang].df.post.strftime | default: '%d/%m/%Y' %}
 {% assign df_dayjs = site.data.locales[include.lang].df.post.dayjs | default: 'DD/MM/YYYY' %}
 
-<{{ wrap_elem }}
-  class="{% if include.class %}{{ include.class }}{% endif %}"
+<time
+  {% if include.class %}
+    class="{{ include.class }}"
+  {% endif %}
   data-ts="{{ include.date | date: '%s' }}"
   data-df="{{ df_dayjs }}"
   {% if include.tooltip %}
@@ -16,4 +17,4 @@
   {% endif %}
 >
   {{ include.date | date: df_strftime }}
-</{{ wrap_elem }}>
+</time>

_includes/footer.html

@@ -1,6 +1,7 @@
 <!-- The Footer -->
 
 <footer
+  aria-label="Site Info"
   class="
     d-flex flex-column justify-content-center text-muted
     flex-lg-row justify-content-lg-between align-items-lg-center pb-lg-3
@@ -8,7 +9,7 @@
 >
   <p>
     {{ '©' }}
-    {{ 'now' | date: '%Y' }}
+    <time>{{ 'now' | date: '%Y' }}</time>
     <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
     {% if site.data.locales[include.lang].copyright.brief %}
       <span

_includes/notification.html

@@ -0,0 +1,24 @@
+<aside
+  id="notification"
+  class="toast"
+  role="alert"
+  aria-live="assertive"
+  aria-atomic="true"
+  data-bs-animation="true"
+  data-bs-autohide="false"
+>
+  <div class="toast-header">
+    <button
+      type="button"
+      class="btn-close ms-auto"
+      data-bs-dismiss="toast"
+      aria-label="Close"
+    ></button>
+  </div>
+  <div class="toast-body text-center pt-0">
+    <p class="px-2 mb-3">{{ site.data.locales[include.lang].notification.update_found }}</p>
+    <button type="button" class="btn btn-primary" aria-label="Update">
+      {{ site.data.locales[include.lang].notification.update }}
+    </button>
+  </div>
+</aside>

_includes/post-nav.html

@@ -1,19 +1,19 @@
 <!-- Navigation buttons at the bottom of the post. -->
 
-<div class="post-navigation d-flex justify-content-between">
+<nav class="post-navigation d-flex justify-content-between" aria-label="Post Navigation">
+  {% assign previous = site.data.locales[include.lang].post.button.previous %}
+  {% assign next = site.data.locales[include.lang].post.button.next %}
+
   {% if page.previous.url %}
     <a
       href="{{ site.baseurl }}{{ page.previous.url }}"
       class="btn btn-outline-primary"
-      prompt="{{ site.data.locales[include.lang].post.button.previous }}"
+      aria-label="{{ previous }}"
     >
       <p>{{ page.previous.title }}</p>
     </a>
   {% else %}
-    <div
-      class="btn btn-outline-primary disabled"
-      prompt="{{ site.data.locales[include.lang].post.button.previous }}"
-    >
+    <div class="btn btn-outline-primary disabled" aria-label="{{ previous }}">
       <p>-</p>
     </div>
   {% endif %}
@@ -22,16 +22,13 @@
     <a
       href="{{ site.baseurl }}{{page.next.url}}"
       class="btn btn-outline-primary"
-      prompt="{{ site.data.locales[include.lang].post.button.next }}"
+      aria-label="{{ next }}"
     >
       <p>{{ page.next.title }}</p>
     </a>
   {% else %}
-    <div
-      class="btn btn-outline-primary disabled"
-      prompt="{{ site.data.locales[include.lang].post.button.next }}"
-    >
+    <div class="btn btn-outline-primary disabled" aria-label="{{ next }}">
       <p>-</p>
     </div>
   {% endif %}
-</div>
+</nav>

_includes/related-posts.html

@@ -69,17 +69,17 @@
 {% endfor %}
 
 {% if relate_posts.size > 0 %}
-  <div id="related-posts" class="mb-2 mb-sm-4">
-    <h3 class="pt-2 mb-4" data-toc-skip>
-      {{ site.data.locales[include.lang].post.relate_posts }}
+  <aside id="related-posts" aria-labelledby="related-label">
+    <h3 class="mb-4" id="related-label">
+      {{- site.data.locales[include.lang].post.relate_posts -}}
     </h3>
-    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4">
+    <nav class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4">
       {% for post in relate_posts %}
-        <div class="col">
-          <a href="{{ post.url | relative_url }}" class="card post-preview h-100">
+        <article class="col">
+          <a href="{{ post.url | relative_url }}" class="post-preview card h-100">
             <div class="card-body">
               {% include datetime.html date=post.date class="small" lang=include.lang %}
-              <h4 class="pt-0 my-2" data-toc-skip>{{ post.title }}</h4>
+              <h4 class="pt-0 my-2">{{ post.title }}</h4>
               <div class="text-muted small">
                 <p>
                   {% include no-linenos.html content=post.content %}
@@ -88,10 +88,9 @@
               </div>
             </div>
           </a>
-        </div>
+        </article>
       {% endfor %}
-    </div>
-    <!-- .card-deck -->
-  </div>
+    </nav>
+  </aside>
   <!-- #related-posts -->
 {% endif %}

_includes/search-loader.html

@@ -4,14 +4,16 @@
 -->
 
 {% capture result_elem %}
-<div class="px-1 px-sm-2 px-lg-4 px-xl-0">
-  <a href="{url}">{title}</a>
-  <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
-    {categories}
-    {tags}
-  </div>
-  <p>{snippet}</p>
-</div>
+  <article class="px-1 px-sm-2 px-lg-4 px-xl-0">
+    <header>
+      <h2><a href="{url}">{title}</a></h2>
+      <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
+        {categories}
+        {tags}
+      </div>
+    </header>
+    <p>{snippet}</p>
+  </article>
 {% endcapture %}
 
 {% capture not_found %}<p class="mt-5">{{ site.data.locales[include.lang].search.no_results }}</p>{% endcapture %}

_includes/search-results.html

@@ -1,7 +1,7 @@
 <!-- The Search results -->
 
 <div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
-  <div class="col-11 post-content">
+  <div class="col-11 content">
     <div id="search-hints">
       {% include_cached trending-tags.html %}
     </div>

_includes/sidebar.html

@@ -1,7 +1,7 @@
 <!-- The Side Bar -->
 
-<div id="sidebar" class="d-flex flex-column align-items-end">
-  <div class="profile-wrapper">
+<aside aria-label="Sidebar" id="sidebar" class="d-flex flex-column align-items-end">
+  <header class="profile-wrapper">
     <a href="{{ '/' | relative_url }}" id="avatar" class="rounded-circle">
       {% if site.avatar != empty and site.avatar %}
         {% capture avatar_url %}
@@ -17,39 +17,40 @@
       {% endif %}
     </a>
 
-    <div class="site-title">
+    <h1 class="site-title">
       <a href="{{ '/' | relative_url }}">{{ site.title }}</a>
-    </div>
-    <div class="site-subtitle fst-italic">{{ site.tagline }}</div>
-  </div>
+    </h1>
+    <p class="site-subtitle fst-italic mb-0">{{ site.tagline }}</p>
+  </header>
   <!-- .profile-wrapper -->
 
-  <ul class="nav flex-column flex-grow-1 w-100 ps-0">
-    <!-- home -->
-    <li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
-      <a href="{{ '/' | relative_url }}" class="nav-link">
-        <i class="fa-fw fas fa-home"></i>
-        <span>{{ site.data.locales[include.lang].tabs.home | upcase }}</span>
-      </a>
-    </li>
-    <!-- the real tabs -->
-    {% for tab in site.tabs %}
-      <li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}">
-        <a href="{{ tab.url | relative_url }}" class="nav-link">
-          <i class="fa-fw {{ tab.icon }}"></i>
-          {% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}
-
-          <span>{{ site.data.locales[include.lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
+  <nav class="flex-column flex-grow-1 w-100 ps-0">
+    <ul class="nav">
+      <!-- home -->
+      <li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
+        <a href="{{ '/' | relative_url }}" class="nav-link">
+          <i class="fa-fw fas fa-home"></i>
+          <span>{{ site.data.locales[include.lang].tabs.home | upcase }}</span>
         </a>
       </li>
-      <!-- .nav-item -->
-    {% endfor %}
-  </ul>
-  <!-- ul.nav.flex-column -->
+      <!-- the real tabs -->
+      {% for tab in site.tabs %}
+        <li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}">
+          <a href="{{ tab.url | relative_url }}" class="nav-link">
+            <i class="fa-fw {{ tab.icon }}"></i>
+            {% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}
+
+            <span>{{ site.data.locales[include.lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
+          </a>
+        </li>
+        <!-- .nav-item -->
+      {% endfor %}
+    </ul>
+  </nav>
 
   <div class="sidebar-bottom d-flex flex-wrap  align-items-center w-100">
     {% unless site.theme_mode %}
-      <button class="mode-toggle btn" aria-label="Switch Mode">
+      <button type="button" class="mode-toggle btn" aria-label="Switch Mode">
         <i class="fas fa-adjust"></i>
       </button>
 
@@ -58,47 +59,49 @@
       {% endif %}
     {% endunless %}
 
-    {% for entry in site.data.contact %}
-      {% case entry.type %}
-        {% when 'github', 'twitter' %}
-          {%- capture url -%}
+    <address class="d-flex mb-0">
+      {% for entry in site.data.contact %}
+        {% case entry.type %}
+          {% when 'github', 'twitter' %}
+            {%- capture url -%}
             https://{{ entry.type }}.com/{{ site[entry.type].username }}
           {%- endcapture -%}
-        {% when 'email' %}
-          {% assign email = site.social.email | split: '@' %}
-          {%- capture url -%}
+          {% when 'email' %}
+            {% assign email = site.social.email | split: '@' %}
+            {%- capture url -%}
             javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
           {%- endcapture -%}
-        {% when 'rss' %}
-          {% assign url = '/feed.xml' | relative_url %}
-        {% else %}
-          {% assign url = entry.url %}
-      {% endcase %}
+          {% when 'rss' %}
+            {% assign url = '/feed.xml' | relative_url %}
+          {% else %}
+            {% assign url = entry.url %}
+        {% endcase %}
 
-      {% if url %}
-        <a
-          href="{{ url }}"
-          aria-label="{{ entry.type }}"
-          {% assign link_types = '' %}
+        {% if url %}
+          <a
+            href="{{ url }}"
+            aria-label="{{ entry.type }}"
+            {% assign link_types = '' %}
 
-          {% unless entry.noblank %}
-            target="_blank"
-            {% assign link_types = 'noopener noreferrer' %}
-          {% endunless %}
+            {% unless entry.noblank %}
+              target="_blank"
+              {% assign link_types = 'noopener noreferrer' %}
+            {% endunless %}
 
-          {% if entry.type == 'mastodon' %}
-            {% assign link_types = link_types | append: ' me' | strip %}
-          {% endif %}
+            {% if entry.type == 'mastodon' %}
+              {% assign link_types = link_types | append: ' me' | strip %}
+            {% endif %}
 
-          {% unless link_types == empty %}
-            rel="{{ link_types }}"
-          {% endunless %}
-        >
-          <i class="{{ entry.icon }}"></i>
-        </a>
-      {% endif %}
-    {% endfor %}
+            {% unless link_types == empty %}
+              rel="{{ link_types }}"
+            {% endunless %}
+          >
+            <i class="{{ entry.icon }}"></i>
+          </a>
+        {% endif %}
+      {% endfor %}
+    </address>
   </div>
   <!-- .sidebar-bottom -->
-</div>
+</aside>
 <!-- #sidebar -->

_includes/toc.html

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

_includes/topbar.html

@@ -1,11 +1,11 @@
 <!-- The Top Bar -->
 
-<div id="topbar-wrapper">
+<header id="topbar-wrapper" aria-label="Top Bar">
   <div
     id="topbar"
-    class="container d-flex align-items-center justify-content-between h-100"
+    class="d-flex align-items-center justify-content-between px-lg-3 h-100"
   >
-    <span id="breadcrumb">
+    <nav id="breadcrumb" aria-label="Breadcrumb">
       {% assign paths = page.url | split: '/' %}
 
       {% if paths.size == 0 or page.layout == 'home' %}
@@ -37,10 +37,12 @@
           {% endif %}
         {% endfor %}
       {% endif %}
-    </span>
+    </nav>
     <!-- endof #breadcrumb -->
 
-    <i id="sidebar-trigger" class="fas fa-bars fa-fw"></i>
+    <button type="button" id="sidebar-trigger" class="btn btn-link">
+      <i class="fas fa-bars fa-fw"></i>
+    </button>
 
     <div id="topbar-title">
       {% if page.layout == 'home' %}
@@ -53,8 +55,11 @@
       {% endif %}
     </div>
 
-    <i id="search-trigger" class="fas fa-search fa-fw"></i>
-    <span id="search-wrapper" class="align-items-center">
+    <button type="button" id="search-trigger" class="btn btn-link">
+      <i class="fas fa-search fa-fw"></i>
+    </button>
+
+    <search class="align-items-center ms-3 ms-lg-0">
       <i class="fas fa-search fa-fw"></i>
       <input
         class="form-control"
@@ -64,7 +69,9 @@
         autocomplete="off"
         placeholder="{{ site.data.locales[include.lang].search.hint | capitalize }}..."
       >
-    </span>
-    <span id="search-cancel">{{ site.data.locales[include.lang].search.cancel }}</span>
+    </search>
+    <button type="button" class="btn btn-link text-decoration-none" id="search-cancel">
+      {{- site.data.locales[include.lang].search.cancel -}}
+    </button>
   </div>
-</div>
+</header>

_includes/trending-tags.html

@@ -34,13 +34,13 @@
 {% endfor %}
 
 {% if trending_tags.size > 0 %}
-  <div id="access-tags">
-    <div class="panel-heading">{{- site.data.locales[include.lang].panel.trending_tags -}}</div>
+  <section>
+    <h2 class="panel-heading">{{- site.data.locales[include.lang].panel.trending_tags -}}</h2>
     <div class="d-flex flex-wrap mt-3 mb-1 me-3">
       {% for tag_name in trending_tags %}
         {% assign url = tag_name | slugify | url_encode | prepend: '/tags/' | append: '/' %}
         <a class="post-tag btn btn-outline-primary" href="{{ url | relative_url }}">{{ tag_name }}</a>
       {% endfor %}
     </div>
-  </div>
+  </section>
 {% endif %}

_includes/update-list.html

@@ -22,9 +22,9 @@
 {% endfor %}
 
 {% if update_list.size > 0 %}
-  <div id="access-lastmod" class="post">
-    <div class="panel-heading">{{- site.data.locales[include.lang].panel.lastmod -}}</div>
-    <ul class="post-content list-unstyled ps-0 pb-1 ms-1 mt-2">
+  <section id="access-lastmod">
+    <h2 class="panel-heading">{{- site.data.locales[include.lang].panel.lastmod -}}</h2>
+    <ul class="content list-unstyled ps-0 pb-1 ms-1 mt-2">
       {% for item in update_list %}
         {% assign index = item | split: '::' | last | plus: 0 %}
         {% assign post = site.posts[index] %}
@@ -34,6 +34,6 @@
         </li>
       {% endfor %}
     </ul>
-  </div>
+  </section>
   <!-- #access-lastmod -->
 {% endif %}