From 3b30d8451e584c428a65c3cda3d45db105014368 Mon Sep 17 00:00:00 2001
From: tobiichi3227 <cz1346219@gmail.com>
Date: Fri, 7 Mar 2025 13:22:05 +0800
Subject: [PATCH] Feat(Fortune): Add copy preview url button

---
 .github/workflows/static.yml     | 22 +++++++++++++---------
 fortune_generator/css/styles.css |  7 +++++++
 fortune_generator/index.html     |  7 ++++++-
 fortune_generator/js/fortune.js  | 14 ++++++++++++++
 4 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml
index f2c9e97..e5cdbf6 100644
--- a/.github/workflows/static.yml
+++ b/.github/workflows/static.yml
@@ -31,13 +31,17 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      - name: Setup Pages
-        uses: actions/configure-pages@v5
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
+
+      - name: Write Commit Hash
+        run: |
+          cat << EOF | tee fortune_generator/json/commit_hash.json > /dev/null
+          {"commit_hash": "$(git rev-parse HEAD)"}
+          EOF
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v4
+        if: github.ref == 'refs/heads/main'
         with:
-          # Upload entire repository
-          path: '.'
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./
+          publish_branch: gh-pages
diff --git a/fortune_generator/css/styles.css b/fortune_generator/css/styles.css
index 6ac434e..4cfc3c2 100644
--- a/fortune_generator/css/styles.css
+++ b/fortune_generator/css/styles.css
@@ -3,6 +3,7 @@
   --button-hover-color: #459aef;
   --toggle-theme-button-color: #000000;
   --copy-result-button-color: #000000;
+  --copy-preview-result-url-button-color: #000000;
   --bg-color: #ffffff;
   --good-fortune-color: #e74c3c;
   --bad-fortune-color: #000000bf;
@@ -103,6 +104,12 @@ button:hover {
   color: var(--copy-result-button-color);
 }
 
+#copy-preview-result-url-button {
+  margin-top: 20px;
+  font-size: 1.5rem;
+  color: var(--copy-preview-result-url-button-color);
+}
+
 #themeModal {
   .modal-content {
     background-color: var(--bg-color) !important;
diff --git a/fortune_generator/index.html b/fortune_generator/index.html
index ca04ad8..41c43b7 100644
--- a/fortune_generator/index.html
+++ b/fortune_generator/index.html
@@ -121,10 +121,15 @@
           點擊打卡
         </button>
         <i
-          class="col-2 offset-2 fas fa-clone d-none"
+          class="col-1 offset-1 fas fa-clone d-none"
           id="copy-result-button"
           onclick="copyResultImageToClipboard()"
         ></i>
+        <i
+          class="col-1 fas fa-link d-none"
+          id="copy-preview-result-url-button"
+          onclick="copyPreviewResultUrlToClipboard()"
+        ></i>
       </div>
     </div>
 
diff --git a/fortune_generator/js/fortune.js b/fortune_generator/js/fortune.js
index 933a539..b74af1b 100644
--- a/fortune_generator/js/fortune.js
+++ b/fortune_generator/js/fortune.js
@@ -24,6 +24,7 @@ fetch("https://api.ipify.org?format=json").then((response) => {
 let goodFortunes = [];
 let badFortunes = [];
 let special_events = [];
+let commit_hash = "";
 
 // using async and await to prevent fetching the data too late...
 async function fetch_data(commit_hash) {
@@ -37,6 +38,11 @@ async function fetch_data(commit_hash) {
       goodFortunes = data.goodFortunes;
       badFortunes = data.badFortunes;
     });
+  await fetch('./json/commit_hash.json')
+    .then((response) => response.json())
+    .then((data) => {
+      commit_hash = data.commit_hash;
+    });
 
   async function fetch_events(path) {
     await fetch(path)
@@ -595,6 +601,14 @@ function Appear() {
     }
   }
   $("#copy-result-button").removeClass("d-none");
+  $("#copy-preview-result-url-button").removeClass("d-none");
+}
+
+function copyPreviewResultUrlToClipboard() {
+  let baseUrl = location.href.split("?")[0];
+  let url = `${baseUrl}?si=${status_index}&ei=${special_events_index}&fi=${[l1,l2,r1,r2].join(":")}&ch=${commit_hash.substr(0, 7)}`;
+  navigator.clipboard.writeText(url);
+  showCopiedNotice();
 }
 
 function getLuck() {