Merge pull request #394 from xianmin/v3

Jane Theme V3 Major Update
xianmin · Sep 20, 2024 · 1e67182 · 1e67182
2 parents bf65081 + f9d9b11
commit 1e67182
Show file tree

Hide file tree

Showing 385 changed files with 314,987 additions and 1,696 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -35,6 +35,8 @@ jobs:
     env:
       HUGO_VERSION: 0.121.0
     steps:
+      - name: Install Dart Sass
+        run: sudo snap install dart-sass
       - name: Install Hugo CLI
         run: |
           wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \

diff --git a/.gitmodules b/.gitmodules
diff --git a/.prettierrc b/.prettierrc
@@ -1,11 +1,13 @@
 {
+  "plugins": ["prettier-plugin-go-template"],
   "overrides": [
     {
-      "files": ["*.html"],
+      "files": ["*.html", "*.css"],
       "options": {
-        "parser": "go-template"
+        "parser": "go-template",
+        "singleQuote": false
       }
     }
   ],
-  "goTemplateBracketSpacing": true
+  "singleQuote": true
 }
diff --git a/assets/js/initHeaderAnchor → assets/js/initHeaderAnchor.js b/assets/js/initHeaderAnchor → assets/js/initHeaderAnchor.js
@@ -5,7 +5,7 @@ const anchorForId = (id) => {
   var anchor = document.createElement("a");
   anchor.className = "header-link";
   anchor.href = "#" + id;
-  anchor.innerHTML = '<svg viewBox="0 0 16 10" version="1.1" width="24" height="24"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg>';
+  anchor.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link-2"><path d="M9 17H7A5 5 0 0 1 7 7h2"/><path d="M15 7h2a5 5 0 1 1 0 10h-2"/><line x1="8" x2="16" y1="12" y2="12"/></svg>';
   return anchor;
 };
 

diff --git a/assets/js/initMobileNavbar.js b/assets/js/initMobileNavbar.js
@@ -2,48 +2,53 @@
  * mobile Navbar
  */
 const initMobileNavbar = () => {
-  const $mobileNav = $('#mobile-navbar');
-  const $mobileNavIcon = $('.mobile-navbar-icon');
-  const slideout = new Slideout({
-    'panel': document.getElementById('mobile-panel'),
-    'menu': document.getElementById('mobile-menu'),
-    'padding': 180,
-    'tolerance': 70
-  })
-  slideout.disableTouch()
+  const mobileNav = document.getElementById('mobile-navbar');
+  const mobileNavIcon = document.getElementById('mobile-navbar-icon');
+  const mobileMenu = document.getElementById('mobile-menu');
+  const mobileMenuCloseModal = document.getElementById('mobile-menu-close-modal');
 
-  $mobileNavIcon.click(function () {
-    slideout.toggle()
-  })
-
-  slideout.on('beforeopen', function () {
-    $mobileNav.addClass('fixed-open')
-    $mobileNavIcon.addClass('icon-click').removeClass('icon-out')
-  })
-
-  slideout.on('beforeclose', function () {
-    $mobileNav.removeClass('fixed-open')
-    $mobileNavIcon.addClass('icon-out').removeClass('icon-click')
-  })
+  mobileNavIcon.addEventListener('click', () => {
+    // open mobile menu width
+    mobileMenu.style.width = '80vw';
+    mobileMenuCloseModal.style.display = 'block';
+    document.body.style.overflow = 'hidden'; // 禁用页面滚动
+  });
 
-  $('#mobile-panel').on('touchend', function () {
-    slideout.isOpen() && $mobileNavIcon.click()
-  })
+  mobileMenuCloseModal.addEventListener('click', () => {
+    mobileMenu.style.width = '0';
+    mobileMenuCloseModal.style.display = 'none';
+    document.body.style.overflow = ''; // 恢复页面滚动
+  });
 
-  $('.mobile-submenu-open').on('click', function () {
-    const $mobileSubmenuList = $('.mobile-submenu-list')
-    const $mobileMenuParent = $('.mobile-menu-parent')
+  document.querySelectorAll('.mobile-submenu-open').forEach(submenuOpen => {
+    submenuOpen.addEventListener('click', function () {
+      const mobileSubmenuList = document.querySelectorAll('.mobile-submenu-list');
+      const mobileMenuParent = document.querySelectorAll('.mobile-menu-parent');
 
-    if ($(this).parent().next().css('display') == "none") {
-      $mobileSubmenuList.slideUp(300)
-      $(this).parent().next('ul').slideDown(300)
-      $(this).parent().addClass('mobile-submenu-show')
-      $(this).parent().parent().siblings().children().removeClass('mobile-submenu-show')
-    } else {
-      $(this).parent().next('ul').slideUp(300)
-      $mobileMenuParent.removeClass('mobile-submenu-show')
-    }
+      if (this.parentElement.nextElementSibling.style.display === 'none') {
+        mobileSubmenuList.forEach(submenu => {
+          submenu.style.display = 'none';
+          submenu.style.height = '0px';
+        });
+        const nextUl = this.parentElement.nextElementSibling;
+        nextUl.style.display = 'block';
+        nextUl.style.height = nextUl.scrollHeight + 'px';
+        this.parentElement.classList.add('mobile-submenu-show');
+        mobileMenuParent.forEach(parent => {
+          if (parent !== this.parentElement) {
+            parent.classList.remove('mobile-submenu-show');
+          }
+        });
+      } else {
+        const nextUl = this.parentElement.nextElementSibling;
+        nextUl.style.height = '0px';
+        setTimeout(() => {
+          nextUl.style.display = 'none';
+        }, 300);
+        this.parentElement.classList.remove('mobile-submenu-show');
+      }
+    });
   });
-}
+};
 
-export default initMobileNavbar
+export default initMobileNavbar;
diff --git a/assets/js/initToogleTheme.js b/assets/js/initToogleTheme.js
@@ -0,0 +1,27 @@
+// Toogle Theme
+
+function initThemeToggle() {
+  const html = document.documentElement;
+  const themeToggles = document.querySelectorAll('.theme-toggle');
+
+  function setTheme(theme) {
+    html.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+  }
+
+  function toggleTheme() {
+    const currentTheme = html.getAttribute('data-theme');
+    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+    setTheme(newTheme);
+  }
+
+  // 为所有切换按钮添加事件监听器
+  themeToggles.forEach(toggle => {
+    toggle.addEventListener('click', function (e) {
+      e.preventDefault();
+      toggleTheme();
+    });
+  });
+}
+
+export default initThemeToggle
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -1,9 +1,11 @@
 import initMobileNavbar from './initMobileNavbar';
 import initToc from './initToc';
 import initHeaderAnchor from './initHeaderAnchor';
+import initToogleTheme from './initToogleTheme';
 
 /* main */
 $(document).ready(function () {
+  initToogleTheme();
   initMobileNavbar();
   initToc();
   initHeaderAnchor();

diff --git a/assets/sass/_base.scss b/assets/sass/_base.scss
@@ -1,83 +1,36 @@
-@import '_common/normalize';
-
 html {
+  font-family: $global-font-family;
   font-size: $global-font-size;
   box-sizing: border-box;
 
   // better scroll
   // scroll-behavior: smooth;
   scroll-padding-top: 1em;
+  scrollbar-color: var(--pico-primary) $grey-50;
 }
 
 body {
   padding: 0;
   margin: 0;
-  font-family: $global-font-family;
-  font-weight: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  line-height: $global-lineheight;
-  color: $global-font-color;
-  background: $global-background;
-  scroll-behavior: smooth;
-  // border-top: 3px solid $theme-color;
+  // background: $global-background;
+  // scroll-behavior: smooth;
 }
 
-main {
-  padding: 3em 0;
-}
+.main {
+  margin-top: 3rem;
 
-@include max-screen() {
-  body {
-    border-top: 0;
+  @include style-to-mobile() {
+    margin-top: 1rem;
   }
 }
 
-::selection {
-  background: $theme-color;
-  color: #fff;
-}
-
-// ::-webkit-scrollbar {
-//   width: 8px;
-//   height: 6px;
-// }
-
-// ::-webkit-scrollbar-thumb {
-//   background: lighten($theme-color, 10%);
-//   border-radius: 5px;
-// }
-
-// ::-webkit-scrollbar-track {
-//   background: rgba(211, 211, 211, 0.4);
-//   border-radius: 5px;
-// }
-
 img {
   max-width: 100%;
   height: auto;
   display: inline-block;
   vertical-align: middle;
 }
 
-a {
-  color: $global-font-color;
-  text-decoration: none;
-}
-
-@each $header, $size in $global-headings {
-  #{$header} {
-    font-size: $size;
-    font-family: $global-serif-font-family;
-  }
-}
-
-@include max-screen() {
-  .container {
-    width: 100%;
-  }
-}
-
 // make video fluid:
 // https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
 // class video-container is the wrapper used by hexo youtube tag plugin
@@ -95,6 +48,3 @@ a {
 	height: 100%;
 }
 
-.bg-llight {
-  background-color: #f2f2f5;
-}