Merge branch 'main' into blog

lotusk08 · Dec 10, 2024 · c6ce4f3 · c6ce4f3
2 parents 8573efd + 99d1e28
commit c6ce4f3
Show file tree

Hide file tree

Showing 32 changed files with 212 additions and 104 deletions.
diff --git a/README.md b/README.md
@@ -65,6 +65,10 @@ node tools/lqip/index.js
   - feat: adjust style code blocks.
   - feat: restyle prompt-alerts/note blocks.
   - feat: adjust breadcumb (desktop) & topbar (mobile) content.
+  - feat: TOC auto hidden/show with scrolling/hover
+  - style: moving social icon from sidebar to footer
+  - style: merge tag to archive page. Moving about page to footer. Hide tab, about, category.
+  - style: restyle sidebar: remove background, restyle nav.link hover effect.
 
 [theme]: https://rubygems.org/gems/jekyll-theme-chirpy
 [ci]: https://github.com/lotusk08/lotusk08.github.io/actions/workflows/ci.yml?query=event%3Apush+branch%3Amaster

diff --git a/_config.yml b/_config.yml
@@ -216,9 +216,9 @@ exclude:
   - tools
   - README.md
   - LICENSE
-  - "*.config.js"
-  - package*.json
-  - "topics 2/experience"
+  - purgecss.js
+  - rollup.config.js
+  - "package*.json"
 
 jekyll-archives:
   enabled: [categories, tags]

diff --git a/_data/authors.yml b/_data/authors.yml
@@ -9,5 +9,5 @@
 steve:
   name: Steve Hoang
   #twitter: LotusK08
-  url: https://stevehoang.com/about
+  url: /about
 
diff --git a/_data/locales/en.yml b/_data/locales/en.yml
@@ -79,8 +79,8 @@ df:
     strftime: "%B %e, %Y"
     dayjs: "MMMM D, YYYY"
   archives:
-    strftime: "%B"
-    dayjs: "MMMM"
+    strftime: "%b"
+    dayjs: "MMM"
 
 # categories page
 categories:

diff --git a/_includes/footer.html b/_includes/footer.html
@@ -13,34 +13,26 @@
 
     {{ site.data.locales[lang].post.written_by }}
 
-    <strong>
+    <span
+      data-bs-toggle="tooltip"
+      data-bs-placement="top"
+      title="{{ site.data.locales[include.lang].copyright.verbose }}"
+    >
       {% if authors %}
         {% for author in authors %}
           {% assign author_data = site.data.authors[author] %}
           {% if author_data.url %}
-            <a href="{{ author_data.url }}">{{ author_data.name }}</a>.
+            <strong><a href="{{ author_data.url }}">{{ author_data.name }}</a></strong>.
           {% else %}
             {{ author_data.name }}
           {% endif %}
           {% unless forloop.last %}, {% endunless %}
         {% endfor %}
       {% else %}
-        <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
+        <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>
       {% endif %}
-    </strong>
+    </span>
 
-    {% if site.data.locales[include.lang].copyright.brief %}
-      <span
-        data-bs-toggle="tooltip"
-        data-bs-placement="top"
-        title="{{ site.data.locales[include.lang].copyright.verbose }}"
-      >
-        {{ site.data.locales[include.lang].copyright.brief }}
-      </span>
-    {% endif %}
-  </p>
-
-  <p>
     {%- capture _platform -%}
       <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
     {%- endcapture -%}
@@ -58,4 +50,47 @@
 
     {{ site.data.locales[include.lang].meta | replace: ':PLATFORM', _platform | replace: ':THEME', _theme }}
   </p>
+
+  <div class="footer-social">
+    {% 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 -%}
+            javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
+          {%- endcapture -%}
+        {% 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 = '' %}
+
+          {% unless entry.noblank %}
+            target="_blank"
+            {% assign link_types = 'noopener noreferrer' %}
+          {% endunless %}
+
+          {% 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 %}
+  </div>
 </footer>
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
@@ -19,23 +19,23 @@
   <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 %}">
+      <!--<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>
-          </a>
-        </li>
-        <!-- .nav-item -->
+        {% if tab.hide != true %}
+          <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>
+        {% endif %}
       {% endfor %}
     </ul>
   </nav>
@@ -50,47 +50,7 @@
         <span class="icon-border"></span>
       {% endif %}
     {% endunless %}
-
-    {% 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 -%}
-            javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
-          {%- endcapture -%}
-        {% 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 = '' %}
-
-          {% unless entry.noblank %}
-            target="_blank"
-            {% assign link_types = 'noopener noreferrer' %}
-          {% endunless %}
-
-          {% 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 %}
+    <!-- Social icons moved to footer -->
   </div>
   <!-- .sidebar-bottom -->
 </aside>

diff --git a/_includes/toc.html b/_includes/toc.html
@@ -2,7 +2,7 @@
 
 {% if enable_toc %}
   <div class="toc-border-cover z-3"></div>
-  <section id="toc-wrapper" class="invisible position-sticky ps-0 pe-4">
+  <section id="toc-wrapper" class="invisible position-sticky ps-0 pe-4 pb-4">
     <h2 class="panel-heading ps-3 pb-2 mb-0">{{- site.data.locales[include.lang].panel.toc -}}</h2>
     <nav id="toc"></nav>
   </section>

diff --git a/_includes/topbar.html b/_includes/topbar.html
@@ -10,15 +10,15 @@
 
       {% if paths.size == 0 or page.layout == 'home' %}
         <!-- Home page -->
-        <span>Steve Hoang</span>
+        <span><strong>Steve Hoang</strong></span>
 
       {% else %}
         {% for item in paths %}
           {% if forloop.first %}
             <!-- First breadcrumb -->
             <span>
               <a href="{{ '/' | relative_url }}">
-                Steve Hoang
+                <strong>Steve Hoang</strong>
               </a>
             </span>
 

diff --git a/_layouts/archives.html b/_layouts/archives.html
@@ -5,6 +5,28 @@
 
 {% include lang.html %}
 
+<h2>Topics</h2>
+<hr>
+<div id="tags" class="d-flex flex-wrap mx-xl-2">
+  {% assign tags = '' | split: '' %}
+  {% for t in site.tags %}
+    {% assign tags = tags | push: t[0] %}
+  {% endfor %}
+
+  {% assign sorted_tags = tags | sort_natural %}
+
+  {% for t in sorted_tags %}
+    <div>
+      <a class="tag" href="{{ t | slugify | url_encode | prepend: '/topics/' | append: '/' | relative_url }}">
+        {{ t -}}
+        <span class="text-muted">{{ site.tags[t].size }}</span>
+      </a>
+    </div>
+  {% endfor %}
+</div>
+
+<h2 class="mt-5">Timeline</h2>
+<hr>
 {% assign df_strftime_m = site.data.locales[lang].df.archives.strftime | default: '/ %m' %}
 {% assign df_dayjs_m = site.data.locales[lang].df.archives.dayjs | default: '/ MM' %}
 

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -15,7 +15,7 @@
   <header>
     <h1 data-toc-skip>{{ page.title }}</h1>
     {% if page.description %}
-      <p class="post-desc fw-light mb-4">{{ page.description }}</p>
+      <p class="post-desc fw-light mb-4" aria-hidden="true" style="display: none;">{{ page.description }}</p>
     {% endif %}
 
     <div class="post-meta text-muted">

diff --git a/_sass/abstracts/_variables.scss b/_sass/abstracts/_variables.scss
@@ -1,6 +1,6 @@
 /* sidebar */
 
-$sidebar-width: 260px !default; /* the basic width */
+$sidebar-width: 240px !default; /* the basic width */
 $sidebar-width-large: 300px !default; /* screen width: >= 1650px */
 $sb-btn-gap: 0.8rem !default;
 $sb-btn-gap-lg: 1rem !default;

diff --git a/_sass/layout/_footer.scss b/_sass/layout/_footer.scss
@@ -7,6 +7,9 @@ footer {
   background-color: var(--main-bg);
   height: v.$footer-height;
   border-top: 1px solid var(--main-border-color);
+  display: flex;
+  flex-direction: column; /* Stack items vertically */
+  align-items: center;
 
   @extend %text-xs;
 
@@ -34,3 +37,34 @@ footer {
     margin-bottom: 0;
   }
 }
+
+.footer-social {
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  order: -1;
+  &:not(:last-child) {
+  margin-right: v.$sb-btn-gap;
+
+  @include bp.xxxl {
+    margin-right: v.$sb-btn-gap-lg;
+    }
+  }
+
+  a {
+    color: var(--sidebar-btn-color);
+    margin-right: 1rem;
+
+    &:hover {
+      color: var(--sidebar-active-color) !important;
+      border: none;
+    }
+
+    i {
+      font-size: 1.1rem;
+      margin: 0 10px 10px 0px;
+    }
+  }
+}