Skip to content

Commit

Permalink
perf: refactor using semantic HTML (#1207)
Browse files Browse the repository at this point in the history 
Fixes #1196
  • Loading branch information
@cotes2020
cotes2020 committed Sep 8, 2023
1 parent 41b8f9f commit 505e314
Show file tree
Hide file tree
Showing 33 changed files with 415 additions and 402 deletions.
3 changes: 2 additions & 1 deletion _includes/comments/disqus.html
View file
Original file line number Diff line number Diff line change
@@ -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>

Expand Down
9 changes: 5 additions & 4 deletions _includes/datetime.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,18 @@
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 %}
data-bs-toggle="tooltip" data-bs-placement="bottom"
{% endif %}
>
{{ include.date | date: df_strftime }}
</{{ wrap_elem }}>
</time>
3 changes: 2 additions & 1 deletion _includes/footer.html
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
<!-- 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
"
>
<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
Expand Down
24 changes: 24 additions & 0 deletions _includes/notification.html
View file
Original file line number Diff line number Diff line change
@@ -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>
21 changes: 9 additions & 12 deletions _includes/post-nav.html
View file
Original file line number Diff line number Diff line change
@@ -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 %}
Expand All @@ -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>
21 changes: 10 additions & 11 deletions _includes/related-posts.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand All @@ -88,10 +88,9 @@ <h4 class="pt-0 my-2" data-toc-skip>{{ post.title }}</h4>
</div>
</div>
</a>
</div>
</article>
{% endfor %}
</div>
<!-- .card-deck -->
</div>
</nav>
</aside>
<!-- #related-posts -->
{% endif %}
18 changes: 10 additions & 8 deletions _includes/search-loader.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion _includes/search-results.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
123 changes: 63 additions & 60 deletions _includes/sidebar.html
View file
Original file line number Diff line number Diff line change
@@ -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 %}
Expand All @@ -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>

Expand All @@ -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 -->
6 changes: 3 additions & 3 deletions _includes/toc.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}

0 comments on commit 505e314

Please sign in to comment.