refactor(experimental/breaking): remove animate.css

- header normal is removed
- auto hide comment and back to top button is removed

README.md

@@ -209,7 +209,6 @@ Thanks to the authors of following resources included in the theme:
 
 * [Font Awesome](https://fontawesome.com/)
 * [Simple Icons](https://github.com/simple-icons/simple-icons)
-* [Animate.css](https://daneden.github.io/animate.css/)
 * [autocomplete.js](https://github.com/algolia/autocomplete.js)
 * [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
 * [Fuse.js](https://fusejs.io/)

README.zh-cn.md

@@ -195,7 +195,6 @@ DoIt 主题中用到了以下项目，感谢它们的作者：
 
 * [Font Awesome](https://fontawesome.com/)
 * [Simple Icons](https://github.com/simple-icons/simple-icons)
-* [Animate.css](https://daneden.github.io/animate.css/)
 * [autocomplete.js](https://github.com/algolia/autocomplete.js)
 * [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
 * [Fuse.js](https://fusejs.io/)

assets/css/_core/_media.scss

@@ -63,14 +63,7 @@
   .page {
     width: 100% !important;
     margin-left: auto !important;
-
-    [header-mobile] & {
-      padding-top: $header-height;
-    }
-
-    [header-mobile=normal] & {
-      padding-top: 0;
-    }
+    padding-top: $header-height;
 
     .categories-card, .author-card, .series-card {
       .card-item {

assets/css/_page/_index.scss

@@ -3,13 +3,7 @@
   max-width: 800px;
   width: 60%;
   margin: 0 auto;
-  [header-desktop] & {
-    padding-top: $header-height;
-  }
-
-  [header-desktop=normal] & {
-    padding-top: 0;
-  }
+  padding-top: $header-height;
 
   @include blur;
 }

assets/css/_partial/_fixed-button.scss

@@ -1,9 +1,4 @@
-#fixed-buttons {
-  display: none;
-}
-
 .fixed-button {
-  display: none;
   z-index: 100;
   position: fixed;
   right: 1.5rem;
@@ -17,10 +12,8 @@
   @include transition(color 0.4s ease);
 
   @include blur;
-
   &:hover, &:active {
     color: $global-font-color;
-    cursor: pointer;
   }
 
   &:active, &:focus, &:hover {

assets/css/_partial/_header.scss

@@ -151,10 +151,6 @@ header {
   height: $header-height;
   line-height: $header-height;
 
-  [header-desktop=normal] & {
-    position: static;
-  }
-
   .header-wrapper {
     padding: 0 2rem 0 10%;
 
@@ -213,10 +209,6 @@ header {
   height: $header-height;
   line-height: $header-height;
 
-  [header-mobile=normal] & {
-    position: static;
-  }
-
   .header-container {
     padding: 0;
     margin: 0;

assets/css/_partial/_single/_toc.scss

@@ -47,10 +47,6 @@
   left: 80%;
   width: 20%;
 
-  [header-desktop=normal] & {
-    top: 5rem;
-  }
-
   @include blur;
 
   .toc-title {

assets/css/main.css

@@ -926,6 +926,10 @@ html.dark {
   color: var(--global-link-color);
 }
 
+.tw-opacity-0 {
+  opacity: 0;
+}
+
 .tw-shadow-black {
   --tw-shadow-color: #000;
   --tw-shadow: var(--tw-shadow-colored);
@@ -951,6 +955,12 @@ html.dark {
   transition-duration: 150ms;
 }
 
+.tw-transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .tw-duration-300 {
   transition-duration: 300ms;
 }

assets/data/cdn/jsdelivr.yml

@@ -5,8 +5,6 @@ prefix:
 libFiles:
   # [email protected] https://github.com/algolia/algoliasearch-client-javascript
   algoliasearchJS: [email protected]/dist/algoliasearch.umd.min.js
-  # [email protected] https://github.com/daneden/animate.css
-  animateCSS: [email protected]/animate.min.css
   # [email protected] https://github.com/MoePlayer/APlayer
   aplayerCSS: [email protected]/dist/APlayer.min.css
   aplayerJS: [email protected]/dist/APlayer.min.js

assets/js/theme.ts

@@ -32,24 +32,6 @@ function isMobileWindow () {
   return window.matchMedia('only screen and (max-width: 680px)').matches
 }
 
-/**
- * Animate the element with AnimateCSS. https://animate.style/
- * @param {HTMLElement} element The element to animate.
- * @param {Array} animation The animation selected.
- * @param {boolean} reserved Whether to execute the callback after the animation is ended.
- * @param {function} callback The callback gets exectued after the element is animated.
- */
-function animateCSS (element, animation, reserved, callback) {
-  if (!Array.isArray(animation)) animation = [animation]
-  element.classList.add('animate__animated', ...animation)
-  const handler = () => {
-    element.classList.remove('animate__animated', ...animation)
-    element.removeEventListener('animationend', handler)
-    if (typeof callback === 'function') callback()
-  }
-  if (!reserved) element.addEventListener('animationend', handler)
-}
-
 
 /**
  * Initialize the mobile menu bar.
@@ -636,47 +618,8 @@ function initMeta () {
 }
 
 function onScroll () {
-  const $headers = []
-  const $viewComments = document.getElementById('view-comments')
-  if (document.body.getAttribute('header-desktop') === 'auto') $headers.push(document.getElementById('header-desktop'))
-  if (document.body.getAttribute('header-mobile') === 'auto') $headers.push(document.getElementById('header-mobile'))
-  if (document.getElementById('comments')) {
-    $viewComments.href = '#comments'
-    $viewComments.style.display = 'block'
-  } else {
-    $viewComments.style.display = 'null'
-  }
-  const $fixedButtons = document.getElementById('fixed-buttons')
-  const ACCURACY = 20; const MINIMUM = 100
   function handleScrollEvent () {
     window.newScrollTop = getScrollTop()
-    const scroll = window.newScrollTop - window.oldScrollTop
-    const isMobile = isMobileWindow()
-    forEach($headers, $header => {
-      if (scroll > ACCURACY) {
-        $header.classList.remove('animate__fadeInDown')
-        animateCSS($header, ['animate__fadeOutUp', 'animate__faster'], true)
-      } else if (scroll < -ACCURACY || window.newScrollTop <= 20) {
-        $header.classList.remove('animate__fadeOutUp')
-        animateCSS($header, ['animate__fadeInDown', 'animate__faster'], true)
-      }
-    })
-    if (window.newScrollTop > MINIMUM) {
-      if (isMobile && scroll > ACCURACY) {
-        $fixedButtons.classList.remove('animate__fadeIn')
-        animateCSS($fixedButtons, ['animate__fadeOut', 'animate__faster'], true)
-      } else if (!isMobile || scroll < -ACCURACY) {
-        $fixedButtons.style.display = 'block'
-        $fixedButtons.classList.remove('animate__fadeOut')
-        animateCSS($fixedButtons, ['animate__fadeIn', 'animate__faster'], true)
-      }
-    } else {
-      if (!isMobile) {
-        $fixedButtons.classList.remove('animate__fadeIn')
-        animateCSS($fixedButtons, ['animate__fadeOut', 'animate__faster'], true)
-      }
-      $fixedButtons.style.display = 'none'
-    }
     for (const event of window.scrollEventSet) event()
     window.oldScrollTop = window.newScrollTop
   }

assets/lib/VERSION

@@ -1,5 +1,4 @@
 [email protected] https://github.com/algolia/algoliasearch-client-javascript
-[email protected] https://github.com/daneden/animate.css
 [email protected] https://github.com/MoePlayer/APlayer
 [email protected] https://github.com/algolia/autocomplete.js
 [email protected] https://github.com/zenorocha/clipboard.js

exampleSite/config/_default/params.toml

@@ -41,12 +41,6 @@ srcsetLargeResizeMethod = "800x webp Lanczos q75"
 # Header config
 # 页面头部导航栏配置
 [header]
-  # desktop header mode ("fixed", "normal", "auto")
-  # 桌面端导航栏模式 ("fixed", "normal", "auto")
-  desktopMode = "fixed"
-  # mobile header mode ("fixed", "normal", "auto")
-  # 移动端导航栏模式 ("fixed", "normal", "auto")
-  mobileMode = "auto"
   # theme change mode ("switch", "select")
   # 主题切换模式 ("switch", "select")
   themeChangeMode = "select"

exampleSite/content/about/index.en.md

@@ -90,7 +90,6 @@ Thanks to the authors of following resources included in the theme:
 
 * [Font Awesome](https://fontawesome.com/)
 * [Simple Icons](https://github.com/simple-icons/simple-icons)
-* [Animate.css](https://daneden.github.io/animate.css/)
 * [autocomplete.js](https://github.com/algolia/autocomplete.js)
 * [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
 * [Fuse.js](https://fusejs.io/)

exampleSite/content/about/index.zh-cn.md

@@ -90,7 +90,6 @@ DoIt 主题中用到了以下项目，感谢它们的作者：
 
 * [Font Awesome](https://fontawesome.com/)
 * [Simple Icons](https://github.com/simple-icons/simple-icons)
-* [Animate.css](https://daneden.github.io/animate.css/)
 * [autocomplete.js](https://github.com/algolia/autocomplete.js)
 * [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)
 * [Fuse.js](https://fusejs.io/)

exampleSite/content/posts/theme-documentation-basics/index.en.md

@@ -271,10 +271,6 @@ Please open the code block below to view the complete sample configuration {{< f
       ignoreFieldNorm = false
   # Header config
   [params.header]
-    # desktop header mode ("fixed", "normal", "auto")
-    desktopMode = "fixed"
-    # mobile header mode ("fixed", "normal", "auto")
-    mobileMode = "auto"
     # {{< version 0.2.11 >}} Theme change mode
     # theme change mode ("switch", "select")
     themeChangeMode = "select"

exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md

@@ -275,10 +275,6 @@ optimizeImages = true
 
   # 页面头部导航栏配置
   [params.header]
-    # 桌面端导航栏模式 ("fixed", "normal", "auto")
-    desktopMode = "fixed"
-    # 移动端导航栏模式 ("fixed", "normal", "auto")
-    mobileMode = "auto"
     # {{< version 0.2.11 >}} 主题切换模式
     # 主题切换模式 ("switch", "select")
     themeChangeMode = "select"

layouts/_default/baseof.html

@@ -24,7 +24,7 @@
     {{- partial "head/seo.html" . -}}
 </head>
 
-<body header-desktop="{{ .Site.Params.header.desktopMode }}" header-mobile="{{ .Site.Params.header.mobileMode }}">
+<body>
     {{- /* Check theme isDark before body rendering */ -}}
     {{- $theme := .Site.Params.defaulttheme -}}
     <script type="text/javascript">
@@ -83,9 +83,11 @@
         </a>
 
         {{- /* comment button */ -}}
-        <a href="#" id="view-comments" class="fixed-button" title="{{ T `viewComments` }}">
+        {{- if  (.Page.Scratch.Get "this").commentEnabled -}}
+        <a href="#comments" id="view-comments" class="fixed-button" title="{{ T `viewComments` }}">
             {{ partial "plugin/fontawesome.html" (dict "Style" "solid" "Icon" "comment") }}
         </a>
+        {{- end -}}
     </div>
 
     {{- /* Load JavaScript scripts and CSS */ -}}

layouts/_default/section.html

@@ -10,7 +10,7 @@
 {{- define "content" -}}
     <div class="page archive">
         {{- /* Title */ -}}
-        <h2 class="single-title animate__animated animate__pulse animate__faster">
+        <h2 class="single-title">
             {{- .Params.Title | default (T .Section) | default .Section | dict "Some" | T "allSome" -}}
         </h2>
 

layouts/_default/single.html

@@ -5,7 +5,7 @@
     {{- $params := .Scratch.Get "params" -}}
     <div class="page single special print:!tw-w-full print:!tw-max-w-none print:!tw-m-0 print:!tw-p-0">
         {{- /* Title */ -}}
-        <h1 class="single-title animate__animated animate__pulse animate__faster">
+        <h1 class="single-title">
             {{- .Title -}}
         </h1>
 

layouts/partials/comment.html

@@ -4,6 +4,7 @@
 {{- $commentConfig := dict -}}
 
 {{- if $comment.enable -}}
+    {{- .Scratch.SetInMap "this" "commentEnabled" true -}}
     <div id="comments" class="print:!tw-hidden">
         {{- /* Disqus Comment System */ -}}
         {{- $disqus := $comment.disqus | default dict -}}

layouts/partials/head/link.html

@@ -49,11 +49,6 @@
 {{- $style = dict "Context" . "ToCSS" $options | merge $style -}}
 {{- partial "plugin/style.html" $style -}}
 
-{{- /* Animate.css */ -}}
-{{- $source := $cdn.animateCSS | default "lib/animate/animate.min.css" -}}
-{{- $style := dict "Source" $source "Fingerprint" $fingerprint "Defer" true -}}
-{{- partial "plugin/style.html" $style -}}
-
 {{- if .Site.Params.enablePWA | and hugo.IsProduction -}}
     {{ $options := dict }}
     {{ $options = dict "targetPath" "sw.min.js" | merge $options }}

layouts/posts/single.html

@@ -34,7 +34,7 @@ <h2 class="toc-title">{{ T "contents" }}</h2>
 
     <article class="page single print:!tw-w-full print:!tw-max-w-none print:!tw-m-0 print:!tw-p-0">
         {{- /* Title */ -}}
-        <h1 class="single-title animate__animated animate__flipInX">{{ .Title }}</h1>
+        <h1 class="single-title">{{ .Title }}</h1>
 
         {{- /* Subtitle */ -}}
         {{- with $params.subtitle -}}

layouts/taxonomy/list.html

@@ -11,7 +11,7 @@
     {{- $params := .Scratch.Get "params" -}}
     <div class="page archive">
         {{- /* Title */ -}}
-        <h2 class="single-title animate__animated animate__pulse animate__faster">
+        <h2 class="single-title">
             {{- $taxonomy := .Data.Singular -}}
             {{- if eq $taxonomy "category" -}}
                 {{ partial "plugin/fontawesome.html" (dict "Style" "regular" "Icon" "folder-open") }}&nbsp;{{ .Title }}

layouts/taxonomy/terms.html

@@ -8,7 +8,7 @@
 
     <div class="page archive">
         {{- /* Title */ -}}
-        <h2 class="single-title animate__animated animate__pulse animate__faster">
+        <h2 class="single-title">
             {{- .Params.Title | default (T $taxonomies) | default $taxonomies | dict "Some" | T "allSome" -}}
         </h2>