Feat(Fortune): Add copy preview url button

.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

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;

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>
 

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() {