chore(package): update to version 26.2.22(289)

.vitepress/theme/components/Footer.vue

@@ -28,7 +28,7 @@ const siteVersion = theme.value.siteVersion;
       </div>
       <div class="beian-info">
         <div class="beian-gongan">
-          <img src="/assets/images/beian.png" loading="eager" />
+          <img src="/assets/images/beian.webp" loading="eager" />
           <a href="https://beian.mps.gov.cn/#/query/webSearch?code=23020002230215" target="_blank"
             >黑公网安备23020002230215</a
           >

.vitepress/theme/components/Header.vue

@@ -217,79 +217,87 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <header ref="headerRef" class="Header">
-    <div class="carousel-container" :impression-color="frontmatter.color">
-      <template v-if="hasMultiple">
-        <div class="stage" :style="{ '--carousel-duration': `${animDuration}ms` }">
-          <div v-for="slot in slotStates" :key="slot.id" class="item" :class="slot.className" :style="{ order: slot.order }">
-            <img :src="slot.imgUrl" />
+  <Transition name="header" mode="in-out" :duration="10000" appear>
+    <header ref="headerRef" class="Header">
+      <div class="carousel-container" :impression-color="frontmatter.color">
+        <template v-if="hasMultiple">
+          <div class="stage" :style="{ '--carousel-duration': `${animDuration}ms` }">
+            <div
+              v-for="slot in slotStates"
+              :key="slot.id"
+              class="item"
+              :class="slot.className"
+              :style="{ order: slot.order }"
+            >
+              <img :src="slot.imgUrl" />
+            </div>
           </div>
-        </div>
-        <div class="progress-ring">
-          <svg width="24" height="24" viewBox="0 0 24 24">
-            <circle cx="12" cy="12" r="9" fill="none" stroke="var(--md-sys-color-tertiary-container)" stroke-width="5" />
-            <circle
-              cx="12"
-              cy="12"
-              r="9"
-              fill="none"
-              stroke="var(--md-sys-color-tertiary)"
-              stroke-width="5"
-              stroke-linecap="round"
-              :style="{
-                strokeDasharray: `${2 * Math.PI * 9}`,
-                strokeDashoffset: `${2 * Math.PI * 9 * (1 - progress / 100)}`,
-                transition: isFastForwarding ? 'none' : 'stroke-dashoffset 100ms linear',
-              }"
-            />
-          </svg>
-        </div>
-        <div class="controls">
-          <div class="prev" title="上一张" @click="handleNav(-1)"></div>
-          <div class="next" title="下一张" @click="handleNav(1)"></div>
-        </div>
-        <div class="indicators">
-          <button
-            v-for="(_, idx) in rawImgList"
-            :key="idx"
-            class="dot"
-            :class="{ active: currentRealIndex === idx }"
-            @click="jumpTo(idx)"
-          ></button>
-        </div>
-      </template>
-      <template v-else>
-        <ClientOnly>
-          <svg width="0" height="0" style="display: none">
-            <defs>
-              <filter id="noise-filter" x="0" y="0" width="100%" height="100%">
-                <feTurbulence
-                  :seed="frontmatter.date ? new Date(frontmatter.date).getTime() : 0"
-                  type="turbulence"
-                  baseFrequency="0.15"
-                  numOctaves="2"
-                  stitchTiles="stitch"
-                ></feTurbulence>
-                <feColorMatrix type="saturate" values="1"></feColorMatrix>
-                <feComponentTransfer>
-                  <feFuncA type="discrete" tableValues="0 0.1"></feFuncA>
-                </feComponentTransfer>
-                <feBlend mode="multiply" in2="SourceGraphic"></feBlend>
-              </filter>
-            </defs>
-          </svg>
-        </ClientOnly>
-        <div class="single">
-          <h1 class="overlay">{{ frontmatter.title || page.title }}</h1>
-          <h1 :style="`background-image: url(${getGradientUrl(rawImgList[0])})`">
-            {{ frontmatter.title || page.title }}
-          </h1>
-          <img :src="getGradientUrl(rawImgList[0])" />
-          <img :src="rawImgList[0]" />
-        </div>
-      </template>
-    </div>
-  </header>
+          <div class="progress-ring">
+            <svg width="24" height="24" viewBox="0 0 24 24">
+              <circle cx="12" cy="12" r="9" fill="none" stroke="var(--md-sys-color-tertiary-container)" stroke-width="5" />
+              <circle
+                cx="12"
+                cy="12"
+                r="9"
+                fill="none"
+                stroke="var(--md-sys-color-tertiary)"
+                stroke-width="5"
+                stroke-linecap="round"
+                :style="{
+                  strokeDasharray: `${2 * Math.PI * 9}`,
+                  strokeDashoffset: `${2 * Math.PI * 9 * (1 - progress / 100)}`,
+                  transition: isFastForwarding ? 'none' : 'stroke-dashoffset 100ms linear',
+                }"
+              />
+            </svg>
+          </div>
+          <div class="controls">
+            <div class="prev" title="上一张" @click="handleNav(-1)"></div>
+            <div class="next" title="下一张" @click="handleNav(1)"></div>
+          </div>
+          <div class="indicators">
+            <button
+              v-for="(_, idx) in rawImgList"
+              :key="idx"
+              class="dot"
+              :class="{ active: currentRealIndex === idx }"
+              @click="jumpTo(idx)"
+            ></button>
+          </div>
+        </template>
+        <template v-else>
+          <ClientOnly>
+            <svg width="0" height="0" style="display: none">
+              <defs>
+                <filter id="noise-filter" x="0" y="0" width="100%" height="100%">
+                  <feTurbulence
+                    :seed="frontmatter.date ? new Date(frontmatter.date).getTime() : 0"
+                    type="turbulence"
+                    baseFrequency="0.15"
+                    numOctaves="2"
+                    stitchTiles="stitch"
+                  ></feTurbulence>
+                  <feColorMatrix type="saturate" values="1"></feColorMatrix>
+                  <feComponentTransfer>
+                    <feFuncA type="discrete" tableValues="0 0.1"></feFuncA>
+                  </feComponentTransfer>
+                  <feBlend mode="multiply" in2="SourceGraphic"></feBlend>
+                </filter>
+              </defs>
+            </svg>
+          </ClientOnly>
+          <div class="single">
+            <h1 class="overlay">{{ frontmatter.title || page.title }}</h1>
+            <h1 :style="`background-image: url(${getGradientUrl(rawImgList[0])})`">
+              {{ frontmatter.title || page.title }}
+            </h1>
+            <img :src="getGradientUrl(rawImgList[0])" />
+            <img :src="rawImgList[0]" />
+          </div>
+        </template>
+      </div>
+    </header>
+  </Transition>
 </template>
 
 <style lang="scss" scoped>

.vitepress/theme/layouts/Default.vue

@@ -158,7 +158,7 @@ onMounted(() => {
                 <h3>
                   {{ randomGreeting }}
                 </h3>
-                <img src="/assets/images/avatar_transparent.png" alt="" />
+                <img src="/assets/images/avatar_transparent.webp" alt="" />
                 <span></span>
               </div>
             </ClientOnly>

.vitepress/theme/styles/animation.scss

@@ -1,20 +1,3 @@
-.layout-enter-active {
-  transition: opacity var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect),
-    transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial)
-      var(--md-sys-motion-duration-short1);
-}
-
-.layout-leave-active {
-  transition: opacity var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect),
-    transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
-}
-
-.layout-enter-from,
-.layout-leave-to {
-  opacity: 0;
-  transform: translateY(10px);
-}
-
 @keyframes fade-out {
   0% {
     opacity: 0;

.vitepress/theme/styles/components/Header.scss

@@ -61,6 +61,9 @@
         &.overlay {
           color: var(--md-ref-palette-primary20);
 
+          background: none;
+
+          animation: none;
           mix-blend-mode: luminosity;
           z-index: 3;
         }
@@ -334,3 +337,58 @@
     grid-column: span 4;
   }
 }
+
+.header-enter-active {
+  transition:
+    opacity var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect),
+    transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial)
+      var(--md-sys-motion-duration-short1);
+
+  .carousel-container .single {
+    h1 {
+      transition: var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-slow-effect);
+    }
+
+    img {
+      &:nth-of-type(1) {
+        transition: 5s var(--md-sys-motion-spring-slow-effect);
+      }
+
+      &:nth-of-type(2) {
+        transition: var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-default-effect)
+          var(--md-sys-motion-spring-fast-effect-duration);
+      }
+    }
+  }
+}
+
+.header-leave-active {
+  transition:
+    opacity var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect),
+    transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
+}
+
+.header-enter-from,
+.header-leave-to {
+  opacity: 0;
+  transform: scale(0.985);
+
+  .carousel-container .single {
+    h1 {
+      opacity: 0;
+      transform: translateX(5%);
+    }
+
+    img {
+      &:nth-of-type(1) {
+        opacity: 0;
+        transform: translateX(-25%);
+      }
+
+      &:nth-of-type(2) {
+        opacity: 0;
+        transform: scale(1.005);
+      }
+    }
+  }
+}

.vitepress/theme/styles/layouts/Default.scss

@@ -258,3 +258,22 @@
     }
   }
 }
+
+.layout-enter-active {
+  transition:
+    opacity var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect),
+    transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial)
+      var(--md-sys-motion-duration-short1);
+}
+
+.layout-leave-active {
+  transition:
+    opacity var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect),
+    transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
+}
+
+.layout-enter-from,
+.layout-leave-to {
+  opacity: 0;
+  transform: scale(0.99);
+}

Dockerfile

@@ -0,0 +1,11 @@
+FROM node:lts-alpine
+
+WORKDIR /app
+
+COPY . /app
+
+RUN npm install
+
+EXPOSE 4173
+
+CMD ["npm", "run", "docs:preview"]

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "26.2.8(281)",
+  "version": "26.2.22(289)",
   "scripts": {
     "update-version": "bash ./scripts/update-version.sh",
     "docs:dev": "vitepress dev",
@@ -9,16 +9,16 @@
   },
   "dependencies": {
     "@material/material-color-utilities": "^0.3.0",
-    "@vueuse/core": "^14.1.0",
+    "@vueuse/core": "^14.2.0",
     "pinia": "^3.0.4"
   },
   "devDependencies": {
-    "@mdit/plugin-align": "^0.23.0",
-    "@mdit/plugin-footnote": "^0.22.3",
-    "@mdit/plugin-tasklist": "^0.22.2",
+    "@mdit/plugin-align": "^0.23.1",
+    "@mdit/plugin-footnote": "^0.22.4",
+    "@mdit/plugin-tasklist": "^0.22.3",
     "markdown-it-anchor": "^9.2.0",
-    "sass-embedded": "^1.93.0",
-    "vitepress": "^2.0.0-alpha.15",
-    "vue": "^3.5.0"
+    "sass-embedded": "^1.97.3",
+    "vitepress": "^2.0.0-alpha.16",
+    "vue": "^3.5.28"
   }
 }

posts/关于这个主题的一些事.md

@@ -1,8 +1,8 @@
 ---
 title: "关于这个主题的一些事"
 description: ""
-color: "#59f3b3"
-impression: "/assets/images/133925125_p0.webp"
+color: "#0084ff"
+impression: "/assets/images/131559307_p0.webp"
 categories:
   - 随笔
 tags: