sidebar style changed, categories re-designed

livia23k · May 3, 2024 · 32b93a1 · 32b93a1
1 parent d5886ee
commit 32b93a1
Show file tree

Hide file tree

Showing 38 changed files with 333 additions and 1,371 deletions.
diff --git a/_config.yml b/_config.yml
@@ -14,12 +14,12 @@ timezone: America/New_York
 # jekyll-seo-tag settings › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md
 # ↓ --------------------------
 
-title: Wenxin Lai # the main title
+title: 23K # the main title
 
-tagline: Do what you love, love what you do. # it will display as the sub-title
+tagline:  # it will display as the sub-title
 
 description: >- # used by seo meta and the atom feed
-  Personal text-focused blog about study and life generated by Chirpy.
+  Personal notes about everything I love.
 
 # Fill in the protocol & hostname for your site.
 # e.g. 'https://username.github.io', note that it does not end with a '/'.
@@ -28,13 +28,10 @@ url: "https://livia23k.github.io"
 github:
   username: livia23k # change to your github username
 
-# twitter:
-#   username: twitter_username # change to your twitter username
-
 social:
   # Change to your full name.
   # It will be displayed as the default author of the posts and the copyright owner in the Footer
-  name: Wenxin Lai
+  name: W.L.
   email: 1ussylvia@gmail.com # change to your email address
   links:
     # The first element serves as the copyright owner's link
@@ -44,6 +41,7 @@ social:
     # - https://www.facebook.com/username
     # - https://www.linkedin.com/in/username
 
+
 google_site_verification: Em3ut89rrqgQvWZ9XwCDkzmf--8XjWGQvWWOr9kgol4
 
 # ↑ --------------------------

diff --git a/_includes/sidebar.html b/_includes/sidebar.html
@@ -24,31 +24,106 @@ <h1 class="site-title">
   </header>
   <!-- .profile-wrapper -->
 
-  <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> -->
-      <!-- the real tabs -->
-      {% for tab in site.tabs %}
+  <div class="nav-grid">
+    <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>
+    {% 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>
+            <!-- {% 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>
+      <!-- .nav-item -->
+    {% endfor %}
+  </div>
+  <!-- .nav-grids -->
+
+
+  <div class="nav-category" id="lysidebar_content">
+
+    {% assign sort_categories = site.categories | sort %}
+    {% for category in sort_categories %}
+      {% assign category_name = category | first %}
+      {% assign posts_of_category = category | last %}
+      {% assign first_post = posts_of_category | first %}
+
+      {% if category_name == first_post.categories[0] %}
+        {% assign sub_categories = '' | split: '' %}
+
+        {% for post in posts_of_category %}
+          {% assign second_category = post.categories[1] %}
+          {% if second_category %}
+            {% unless sub_categories contains second_category %}
+              {% assign sub_categories = sub_categories | push: second_category %}
+            {% endunless %}
+          {% endif %}
+        {% endfor %}
+
+        {% assign sub_categories = sub_categories | sort %}
+        {% assign sub_categories_size = sub_categories | size %}
+        <!-- get sub-category info -->
+
+        {% if sub_categories_size > 0 %}
+
+        <div class="category-whole">
+            {% capture _category_url %}/categories/{{ category_name | slugify | url_encode }}/{% endcapture %}
+            <a class="category" href="{{ _category_url | relative_url }}">
+              {{ category_name }}
+            </a >
+            <!-- display main-category -->
+
+            {% for sub_category in sub_categories %}
+
+                <div class="sub-category">
+                  {% capture _sub_ctg_url %}/categories/{{ sub_category | slugify | url_encode }}/{% endcapture %}
+                  <i class="toggle-icon fas fa-angle-down" data-target="posts-{{ sub_category | slugify }}"></i>
+                  <a class="sub-category-link" href="{{ _sub_ctg_url | relative_url }}" class="mx-2">{{ sub_category }}</a>
+                  <!-- display sub-category  -->
+
+                  {% assign posts_under_subcate = '' | split: '' %}
+
+                  {% for post in posts_of_category %}
+                    {% if post.categories[1] == sub_category %}
+                      {% assign posts_under_subcate = posts_under_subcate | push: post %}
+                    {% endif %}
+                  {% endfor %}
+
+                  {% assign posts_size = posts_under_subcate | size %}
+                  {% if posts_size > 0 %}
+                      <div class="posts" id="posts-{{ sub_category | slugify }}">
+                          {% for post in posts_under_subcate %}
+                              <li>|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="{{ post.url }}">{{ post.title }}</a ></li>
+                          {% endfor %}
+                      </div>
+                    <!-- display posts  -->
+                  {% endif %}
+
+                </div>
+                <!-- posts in sub-categories -->
+
+            {% endfor %}
+            <!-- sub-categories -->
+
+        </div>
+        {% endif %}
+
+      {% endif %}
+    {% endfor %}
+  </div>
+
 
   <div class="sidebar-bottom d-flex flex-wrap  align-items-center w-100">
+
+      <a style="opacity: 0.6;list-style: none; margin-left: -10px;">
+        <button id="collapseAll" style="border: none;"><i class="fa-solid fa-expand"></i></button>
+      </a>
+
     {% unless site.theme_mode %}
       <button type="button" class="mode-toggle btn" aria-label="Switch Mode">
         <i class="fas fa-adjust"></i>
@@ -103,3 +178,81 @@ <h1 class="site-title">
   <!-- .sidebar-bottom -->
 </aside>
 <!-- #sidebar -->
+
+
+<script>
+
+  document.querySelectorAll('.toggle-icon').forEach(function(icon) {
+      var targetId = icon.getAttribute('data-target');
+      var target = document.getElementById(targetId);
+
+      var isVisible = localStorage.getItem('toggle_' + targetId) === 'true';
+      target.style.display = isVisible ? 'block' : 'none';
+      icon.classList.toggle('fa-angle-up', isVisible);
+      icon.classList.toggle('fa-angle-down', !isVisible);
+
+      icon.addEventListener('click', function() {
+        var isCurrentlyVisible = target.style.display !== 'none';
+        target.style.display = isCurrentlyVisible ? 'none' : 'block';
+        icon.classList.toggle('fa-angle-up', !isCurrentlyVisible);
+        icon.classList.toggle('fa-angle-down', isCurrentlyVisible);
+        localStorage.setItem('toggle_' + targetId, !isCurrentlyVisible);
+      });
+  });
+
+  document.getElementById('collapseAll').addEventListener('click', function() {
+      var posts = document.querySelectorAll('.posts');
+      var icons = document.querySelectorAll('.toggle-icon');
+      var isVisible = Array.from(posts).some(post => post.style.display === 'block' || post.style.display === '');
+
+      posts.forEach(post => {
+          post.style.display = isVisible ? 'none' : 'block';
+          localStorage.setItem('toggle_' + post.id, !isVisible);
+      });
+
+      icons.forEach(icon => {
+          icon.className = isVisible ? 'toggle-icon fas fa-angle-down' : 'toggle-icon fas fa-angle-up';
+      });
+
+      var buttonIcon = document.getElementById('collapseAll').querySelector('i');
+      buttonIcon.className = isVisible ? 'fa-solid fa-expand' : 'fa-solid fa-compress';
+  });
+
+  function savelysidebar_contentScrollPosition() {
+        const lysidebar_content = document.getElementById('lysidebar_content');
+        if (lysidebar_content) {
+            const scrollPosition = lysidebar_content.scrollTop;
+            sessionStorage.setItem('lysidebar_contentScrollPosition', scrollPosition);
+        }
+    }
+
+  function restorelysidebar_contentScrollPosition() {
+      const lysidebar_content = document.getElementById('lysidebar_content');
+      const savedPosition = sessionStorage.getItem('lysidebar_contentScrollPosition');
+      if (lysidebar_content && savedPosition) {
+          lysidebar_content.scrollTop = parseInt(savedPosition, 10);
+      }
+  }
+
+  restorelysidebar_contentScrollPosition();
+
+  const lysidebar_content = document.getElementById('lysidebar_content');
+  if (lysidebar_content) {
+      lysidebar_content.addEventListener('scroll', savelysidebar_contentScrollPosition);
+  }
+
+  function updateCollapseAllIcon() {
+      var posts = document.querySelectorAll('.posts');
+      var collapseAllIcon = document.getElementById('collapseAll').querySelector('i');
+
+      var allCollapsed = Array.from(posts).every(post => post.style.display === 'none');
+      if (allCollapsed) {
+          collapseAllIcon.className = 'fa-solid fa-expand';
+      } else {
+          collapseAllIcon.className = 'fa-solid fa-compress';
+      }
+  }
+
+  updateCollapseAllIcon();
+
+</script>
diff --git a/_posts/life/2020-10-24-lalaland.md b/_posts/life/2020-10-24-lalaland.md
@@ -1,7 +1,8 @@
 ---
-title: Movie | 爱乐之城 by Damien Chazelle
-categories: [Movie, Musical]
+title: 爱乐之城 by Damien Chazelle
+categories: [Food for Soul, Movie]
 tags: [life, movie, excerpt, comment]
+pin: true
 ---
 
 Mia和Seb都有强烈的艺术气息，他们都曾义无反顾的去追逐梦想，于是所以他们被彼此吸引、相近相亲相爱。

diff --git a/_posts/life/2021-08-06-zhujue.md b/_posts/life/2021-08-06-zhujue.md
@@ -1,8 +1,9 @@
 ---
-title: Novel | 主角 by 陈彦
+title: 主角 by 陈彦
 # pin: true
-categories: [Literature, Novel]
+categories: [Food for Soul, Novel]
 tags: [life, reading, excerpt]
+pin: true
 ---
 
 ## 书摘

diff --git a/_posts/life/2021-09-08-plague.md b/_posts/life/2021-09-08-plague.md
@@ -1,7 +1,8 @@
 ---
-title: Novel | 鼠疫 by Albert Camus
-categories: [Literature, Novel]
+title: 鼠疫 by Albert Camus
+categories: [Food for Soul, Novel]
 tags: [life, reading, excerpt]
+pin: true
 ---
 
 ## 书摘

diff --git a/_posts/life/2023-04-04-crimeandpunishment.md b/_posts/life/2023-04-04-crimeandpunishment.md
@@ -1,7 +1,8 @@
 ---
-title: Novel | 罪与罚 by Fyodor Dostoevsky
-categories: [Literature, Novel]
+title: 罪与罚 by Fyodor Dostoevsky
+categories: [Food for Soul, Novel]
 tags: [life, reading, excerpt]
+pin: true
 ---
 
 ## 书摘

diff --git a/_posts/life/2023-05-28-siddhartha.md b/_posts/life/2023-05-28-siddhartha.md
@@ -1,6 +1,6 @@
 ---
-title: Novel | 悉达多 by Hermann Hesse
-categories: [Literature, Novel]
+title: 悉达多 by Hermann Hesse
+categories: [Food for Soul, Novel]
 tags: [life, reading, excerpt, comment]
 ---
 

diff --git a/_posts/life/2023-12-21-amusingtodeath.md b/_posts/life/2023-12-21-amusingtodeath.md
@@ -1,6 +1,6 @@
 ---
-title: Media Ecology | 娱乐至死 by Neil Postman
-categories: [Literature, Media Ecology]
+title: 娱乐至死 by Neil Postman
+categories: [Food for Soul, Social Science]
 tags: [life, reading, excerpt, comment]
 ---
 

diff --git a/_posts/life/2024-02-13-silence.md b/_posts/life/2024-02-13-silence.md
@@ -1,6 +1,6 @@
 ---
 title: Moment | Silence
-categories: [Personal, Moments]
+categories: [Food for Soul, Personal]
 tags: [life, moment, jotting]
 ---
 

diff --git a/_posts/tech/2024-02-01-53614carmengo.md → _posts/others/2024-02-01-53614-carmengo.md b/_posts/tech/2024-02-01-53614carmengo.md → _posts/others/2024-02-01-53614-carmengo.md
@@ -1,7 +1,7 @@
 ---
-title: Game Design | Carmen Go based on Carmen Sandiego and Go Game Series
-categories: [Creation, Game Design]
-tags: [tech, game, game design, 53-614]
+title: Carmen Go based on Carmen Sandiego and Go Game Series
+categories: [Computer Graphics & Game, Game Design]
+tags: [game, game design, 53-614, project]
 img_path: /assets/img/post/2024-02-01-carmengo/
 ---