Merge pull request #6 from hviwen/blog/vitepress

fix: 06-05 09:33
hviwen · Jun 5, 2024 · 715fce8 · 715fce8
2 parents 86fff8d + ec8288d
commit 715fce8
Show file tree

Hide file tree

Showing 8 changed files with 184 additions and 217 deletions.
diff --git a/.github/workflows/sync_and_deploy.yml b/.github/workflows/sync_and_deploy.yml
@@ -0,0 +1,30 @@
+name: Sync and Deploy Workflow
+
+on:
+  schedule:
+    - cron: '0 12 * * *'
+
+
+jobs:
+  sync-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # 如果未启用 lastUpdated，则不需要
+          uses: pnpm/action-setup@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+
+      - name: Install pnpm
+        run: npm install -g pnpm  # 安装 pnpm
+
+      - name: Download and unzip repository
+        run: |
+          curl -L https://github.com/monocytess/simple/archive/refs/heads/master.zip > repo.zip
+          unzip repo.zip
+
+      - name: Sync files
+        run: rsync -av --checksum --delete simple-master/src/js30 docs/public/pages/
diff --git a/docs/public/assets/css/js30.base.css b/docs/public/assets/css/js30.base.css
@@ -0,0 +1,66 @@
+@font-face {
+  font-family: Leckerli;
+  font-style: normal;
+  font-weight: normal;
+  src: url("/assets/fonts/LeckerliOne-Regular.ttf") format('truetype');
+}
+
+html, body {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  overflow-x: hidden;
+  font-family: Roboto, sans-serif;
+}
+
+.background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 100vw;
+  height: 100vh;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
+
+.footer {
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-bottom: 12px;
+  font-size: 0.8rem;
+  color: white;
+}
+
+.footer a {
+  display: inline-block;
+  margin: 0 8px;
+  color: white;
+  text-decoration-line: none;
+  transition: color 0.3s ease 0s;
+}
+
+.footer a::after {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  display: block;
+  width: 0;
+  height: 2px;
+  content: "";
+  background: yellow;
+  transition: width 0.3s ease 0s, left 0.3s ease 0s;
+}
+
+.footer a:hover::after {
+  left: 0;
+  width: 100%;
+}
+
+.footer a:hover {
+  color: yellow;
+}
diff --git a/docs/public/assets/fonts/LeckerliOne-Regular.ttf b/docs/public/assets/fonts/LeckerliOne-Regular.ttf
diff --git a/docs/public/pages/js30/clock/index.html b/docs/public/pages/js30/clock/index.html
@@ -36,49 +36,47 @@
 <body>
 <div class="background"></div>
 
-<div class="container">
-  <main>
-    <div class="clock">
-      <div class="outer-clock-face">
-        <div class="marking marking-zero">
-          <div class="clock-header-weight"></div>
-          <div class="clock-footer-weight"></div>
-        </div>
-        <div class="marking marking-one">
-          <div class="clock-header"></div>
-          <div class="clock-footer"></div>
-        </div>
-        <div class="marking marking-two">
-          <div class="clock-header"></div>
-          <div class="clock-footer"></div>
-        </div>
-        <div class="marking marking-row">
-          <div class="clock-header-weight"></div>
-          <div class="clock-footer-weight"></div>
-        </div>
-        <div class="marking marking-three">
-          <div class="clock-header"></div>
-          <div class="clock-footer"></div>
-        </div>
-        <div class="marking marking-four">
-          <div class="clock-header"></div>
-          <div class="clock-footer"></div>
-        </div>
+<main>
+  <div class="clock">
+    <div class="outer-clock-face">
+      <div class="marking marking-zero">
+        <div class="clock-header-weight"></div>
+        <div class="clock-footer-weight"></div>
       </div>
-      <div class="clock-face">
-        <div class="hand hand-hour"></div>
-        <div class="hand hand-minute"></div>
-        <div class="hand hand-second"></div>
+      <div class="marking marking-one">
+        <div class="clock-header"></div>
+        <div class="clock-footer"></div>
       </div>
-      <div class="clock-center">
-
+      <div class="marking marking-two">
+        <div class="clock-header"></div>
+        <div class="clock-footer"></div>
+      </div>
+      <div class="marking marking-row">
+        <div class="clock-header-weight"></div>
+        <div class="clock-footer-weight"></div>
+      </div>
+      <div class="marking marking-three">
+        <div class="clock-header"></div>
+        <div class="clock-footer"></div>
+      </div>
+      <div class="marking marking-four">
+        <div class="clock-header"></div>
+        <div class="clock-footer"></div>
       </div>
     </div>
-  </main>
-  <footer class="footer">
-    mode by <a href="https://github.com/hviwen" target="_blank">&copy;pan</a> 2024
-  </footer>
-</div>
+    <div class="clock-face">
+      <div class="hand hand-hour"></div>
+      <div class="hand hand-minute"></div>
+      <div class="hand hand-second"></div>
+    </div>
+    <div class="clock-center">
+
+    </div>
+  </div>
+</main>
+<footer class="footer">
+  mode by <a href="https://github.com/hviwen" target="_blank">&copy;pan</a> 2024
+</footer>
 
 </body>
 </html>
diff --git a/docs/public/pages/js30/clock/style.css b/docs/public/pages/js30/clock/style.css
@@ -1,30 +1,4 @@
-html, body {
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  overflow-x: hidden;
-  font-family: Roboto, sans-serif;
-}
-
-.background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: -1;
-  width: 100vw;
-  height: 100vh;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
-}
-
-.container {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  justify-content: space-between;
-  height: 100vh;
-}
+@import "/assets/css/js30.base.css";
 
 .clock {
   position: relative;
@@ -169,40 +143,3 @@ html, body {
   border-radius: 50%;
 }
 
-
-.footer {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 12px;
-  font-size: 0.8rem;
-  color: white;
-}
-
-.footer a {
-  display: inline-block;
-  margin: 0 8px;
-  color: white;
-  text-decoration-line: none;
-  transition: color 0.3s ease 0s;
-}
-
-.footer a::after {
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  display: block;
-  width: 0;
-  height: 2px;
-  content: "";
-  background: yellow;
-  transition: width 0.3s ease 0s, left 0.3s ease 0s;
-}
-
-.footer a:hover::after {
-  left: 0;
-  width: 100%;
-}
-
-.footer a:hover {
-  color: yellow;
-}
diff --git a/docs/public/pages/js30/kit/index.html b/docs/public/pages/js30/kit/index.html
@@ -22,6 +22,7 @@
         background.style.backgroundImage = 'url("/assets/images/portrait_2x1.jpg")'
       }
     }
+
     window.addEventListener('resize', adaptBackgroundImage);
 
     window.addEventListener('DOMContentLoaded', function () {
@@ -34,58 +35,56 @@
 <body>
 <div class="background"></div>
 
-<div class="container">
-  <main>
-    <div class="key-main">
-      <div data-key="65" class="key">
-        <kbd>A</kbd>
-        <span class="key-tips">Clap</span>
-      </div>
-      <div data-key="83" class="key">
-        <kbd>S</kbd>
-        <span class="key-tips">HiHat</span>
-      </div>
-      <div data-key="68" class="key">
-        <kbd>D</kbd>
-        <span class="key-tips">Kick</span>
-      </div>
-      <div data-key="70" class="key">
-        <kbd>F</kbd>
-        <span class="key-tips">OpenHat</span>
-      </div>
-      <div data-key="71" class="key">
-        <kbd>G</kbd>
-        <span class="key-tips">Boom</span>
-      </div>
-      <div data-key="72" class="key">
-        <kbd>H</kbd>
-        <span class="key-tips">Ride</span>
-      </div>
-      <div data-key="74" class="key">
-        <kbd>J</kbd>
-        <span class="key-tips">Snare</span>
-      </div>
-      <div data-key="75" class="key">
-        <kbd>K</kbd>
-        <span class="key-tips">Tom</span>
-      </div>
-      <div data-key="76" class="key">
-        <kbd>L</kbd>
-        <span class="key-tips">Tink</span>
-      </div>
+<main>
+  <div class="key-main">
+    <div data-key="65" class="key">
+      <kbd>A</kbd>
+      <span class="key-tips">Clap</span>
+    </div>
+    <div data-key="83" class="key">
+      <kbd>S</kbd>
+      <span class="key-tips">HiHat</span>
+    </div>
+    <div data-key="68" class="key">
+      <kbd>D</kbd>
+      <span class="key-tips">Kick</span>
+    </div>
+    <div data-key="70" class="key">
+      <kbd>F</kbd>
+      <span class="key-tips">OpenHat</span>
+    </div>
+    <div data-key="71" class="key">
+      <kbd>G</kbd>
+      <span class="key-tips">Boom</span>
+    </div>
+    <div data-key="72" class="key">
+      <kbd>H</kbd>
+      <span class="key-tips">Ride</span>
+    </div>
+    <div data-key="74" class="key">
+      <kbd>J</kbd>
+      <span class="key-tips">Snare</span>
+    </div>
+    <div data-key="75" class="key">
+      <kbd>K</kbd>
+      <span class="key-tips">Tom</span>
+    </div>
+    <div data-key="76" class="key">
+      <kbd>L</kbd>
+      <span class="key-tips">Tink</span>
     </div>
+  </div>
 
-    <div class="key-footer">
-      <div data-key="32" class="key float">
-        <kbd>Space</kbd>
-        <span class="key-tips">Play</span>
-      </div>
+  <div class="key-footer">
+    <div data-key="32" class="key float">
+      <kbd>Space</kbd>
+      <span class="key-tips">Play</span>
     </div>
-  </main>
-  <footer class="footer">
-     mode by <a href="https://github.com/hviwen" target="_blank">&copy;pan</a> 2024
-  </footer>
-</div>
+  </div>
+</main>
+<footer class="footer">
+  mode by <a href="https://github.com/hviwen" target="_blank">&copy;pan</a> 2024
+</footer>
 
 <section>
   <audio src="/assets/sounds/clap.wav" data-key="65"></audio>