From de57e26cec07ec35737e4e3f366d6eb57c697b43 Mon Sep 17 00:00:00 2001
From: Junwei Zhao <wahyd4@gmail.com>
Date: Fri, 6 Jun 2025 12:36:29 +1000
Subject: [PATCH] Add note to deprecate badges service

---
 www/pages/badges/index.vue |  13 +++
 www/pages/index.vue        | 178 +++++++++----------------------------
 2 files changed, 53 insertions(+), 138 deletions(-)

diff --git a/www/pages/badges/index.vue b/www/pages/badges/index.vue
index cc6e7b4..0412799 100644
--- a/www/pages/badges/index.vue
+++ b/www/pages/badges/index.vue
@@ -1,6 +1,19 @@
 <template>
   <div class="my-badges-container container">
     <b-container fluid="lg">
+      <!-- Deprecation Notice -->
+      <b-row class="mb-4">
+        <b-col lg="10" offset-lg="1">
+          <b-alert show variant="warning" class="deprecation-notice">
+            <h4 class="alert-heading">⚠️ Service Deprecation Notice</h4>
+            <p>
+              This service is now in <strong>read-only mode</strong>. Your existing badges will continue to work,
+              but no new badges can be created.
+            </p>
+          </b-alert>
+        </b-col>
+      </b-row>
+
       <b-row class="badges">
         <b-col lg="3" md="6" sm="12" v-for="badge in badges" :key="badge.ulid" class="mb-4">
           <b-card
diff --git a/www/pages/index.vue b/www/pages/index.vue
index cc2e79e..c4e6d94 100644
--- a/www/pages/index.vue
+++ b/www/pages/index.vue
@@ -1,6 +1,24 @@
 <template>
   <div class="badges-container">
     <b-container fluid="lg">
+      <!-- Deprecation Notice -->
+      <b-row class="row-space">
+        <b-col lg="8" offset-lg="2">
+          <b-alert show variant="warning" class="deprecation-notice">
+            <h4 class="alert-heading">⚠️ Service Deprecation Notice</h4>
+            <p>
+              This website is now in <strong>read-only mode</strong>. We are deprecating this service and no longer allow new badge creation.
+              Existing badges will continue to work, but no new badges can be generated.
+            </p>
+            <p>We will shutdown the service on <strong>2025-07-31</strong>.</p>
+            <hr>
+            <p class="mb-0">
+              Thank you for using our service. Please consider alternative solutions for your badge needs.
+            </p>
+          </b-alert>
+        </b-col>
+      </b-row>
+
       <b-row class="row-space">
         <b-col lg="4" offset-lg="4">
           <div class="intro text-center">
@@ -8,76 +26,10 @@
           </div>
         </b-col>
       </b-row>
-      <b-row class="row-space">
-        <b-col lg="4" offset-lg="4" class="text-center generate-badge">
-          <b-button
-            pill
-            size="lg"
-            class="generate-button"
-            variant="outline-primary"
-            @click="generateBadge"
-            :disabled="!canGenerate"
-            >{{ buttonText }}
-          </b-button>
-        </b-col>
-      </b-row>
-      <b-row v-if="shouldRenderBadgeTextarea()" class="row-space">
-        <b-col lg="8" class="text-center" offset-lg="2">
-          <span class="title">Color Schemes:</span>
-          <b-button-group>
-            <b-button
-              variant="light"
-              :pressed="isBadgeActive('green')"
-              @click="updateBadgeText('green')"
-              ><img :src="myBadge('green')" class="badge-image"
-            /></b-button>
-            <b-button
-              variant="light"
-              :pressed="isBadgeActive('blue')"
-              @click="updateBadgeText('blue')"
-              ><img :src="myBadge('blue')" class="badge-image"
-            /></b-button>
-            <b-button
-              variant="light"
-              :pressed="isBadgeActive('orange')"
-              @click="updateBadgeText('orange')"
-              ><img :src="myBadge('orange')" class="badge-image"
-            /></b-button>
-          </b-button-group>
-        </b-col>
-      </b-row>
-      <b-row
-        class="row-space new-badge-info"
-        v-if="shouldRenderBadgeTextarea()"
-      >
-        <b-col lg>
-          <p>
-            Please copy the markdown script below to your Github readme.md or
-            any other markdown file you want to monitor.
-          </p>
-          <b-form-textarea
-            id="textarea"
-            class="badge-detail"
-            v-model="text"
-            rows="3"
-            max-rows="4"
-          ></b-form-textarea>
-        </b-col>
-      </b-row>
-      <b-row
-        class="row-space new-badge-info"
-        v-if="shouldRenderBadgeTextarea()"
-      >
-        <b-col lg>
-          <p>
-            Or simply insert the following embedded image in a page that
-            supports <b>HTML</b>.
-          </p>
-          <code>{{ myEmbeddedImageScript(activeBadgeColor) }}</code>
-        </b-col>
-      </b-row>
+
+      <!-- Removed badge generation button and related functionality -->
       <div class="px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
-        <h2 class="display-4">Count your page views in seconds</h2>
+        <h2 class="display-4">How it worked</h2>
         <div>
           <a :href="defaultStats"
             ><img :src="defaultBadge" class="my-badge"
@@ -85,10 +37,8 @@
         </div>
         <p></p>
         <p class="lead">
-          Badger generates a unique SVG image for your web page, requests gets
-          calculated and reflected on the value of the Badge. <br />
-          Think about this is simplified Google Analytics on a static page
-          without any JS script, isn't this neat?
+          Badger generated unique SVG images for web pages, with requests calculated and reflected on the Badge value. <br />
+          This was like simplified Google Analytics on a static page without any JS script.
           <br />
         </p>
       </div>
@@ -100,9 +50,9 @@
             alt="Generic placeholder image"
             height="140"
           />
-          <h2>It's just an image</h2>
+          <h2>It was just an image</h2>
           <p class="text-left">
-            No API calls, no Google analytics required. Only renders a svg
+            No API calls, no Google analytics required. Only rendered a svg
             image.
           </p>
         </div>
@@ -115,8 +65,8 @@
           />
           <h2>No setup no cost</h2>
           <p class="text-left">
-            Just copy the generated unique script to your markdown file and wait
-            for the first person to browse your page.
+            Users could copy the generated unique script to their markdown file and wait
+            for the first person to browse their page.
           </p>
         </div>
         <div class="col-lg-4 text-center">
@@ -128,14 +78,14 @@
           />
           <h2>Realtime chart</h2>
           <p class="text-left">
-            Every access gets counted and you are able to view the realtime
-            statistic data via a <a :href="defaultStats">chart</a>
-            Observe how your application grows in time.
+            Every access was counted and users could view the realtime
+            statistic data via a <a :href="defaultStats">chart</a>.
+            Observe how applications grew over time.
           </p>
         </div>
       </b-row>
       <div class="px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
-        <h2 class="display-4">Examples</h2>
+        <h2 class="display-4">Examples (Existing badges still work)</h2>
       </div>
       <b-row class="row-space text-center">
         <b-col md>
@@ -175,10 +125,7 @@ export default Vue.extend({
   auth: "guest",
   data() {
     return {
-      buttonText: "Create your badge",
-      text: "",
-      canGenerate: true,
-      activeBadgeColor: "green"
+      // Removed badge generation related data
     };
   },
   mounted() {
@@ -200,9 +147,6 @@ export default Vue.extend({
     }
   },
   computed: {
-    badge() {
-      return this.$store.state.badges.currentBadge;
-    },
     defaultBadge() {
       return `${this.$config.myBadge}/green.svg`;
     },
@@ -217,45 +161,7 @@ export default Vue.extend({
     }
   },
   methods: {
-    isBadgeActive: function(color) {
-      return this.activeBadgeColor === color;
-    },
-    generateBadge: function() {
-      this.createNewBadge();
-    },
-    shouldRenderBadgeTextarea: function() {
-      return this.text !== "";
-    },
-    updateBadgeText: function(color) {
-      var url = `${this.$config.backendURL}/badges/${this.badge.id}/${color}.svg`;
-      var statsUrl = `${this.$config.backendURL}/stats/${this.badge.id}`;
-      this.text = `[![Page Views Count](${url})](${statsUrl} "Get your own page views count badge on badges.toozhao.com")`;
-      this.activeBadgeColor = color;
-    },
-    myBadge: function(color) {
-      return `${this.$config.backendURL}/badges/${this.badge.id}/${color}.svg?i=0`;
-    },
-    myExternalBadge: function(color) {
-      return `${this.$config.backendURL}/badges/${this.badge.id}/${color}.svg`;
-    },
-    myEmbeddedImageScript(color) {
-      return `<img src="${this.myExternalBadge(color)}" />`;
-    },
-    createNewBadge() {
-      this.$store.commit("loading/updateLoading");
-
-      this.$store.dispatch("badges/createBadge", {
-        callback: () => {
-          this.updateBadgeText("green");
-          this.$store.commit("loading/updateLoading");
-          this.canGenerate = false;
-          this.buttonText = "Badge generated";
-        },
-        errorCallback: (error) => {
-          this.$store.commit("error/setError", error.response.data.msg);
-        }
-      });
-    }
+    // Removed all badge generation methods
   }
 });
 </script>
@@ -270,9 +176,14 @@ export default Vue.extend({
     margin-bottom: 4vh;
   }
 
-  .generate-badge {
-    margin-bottom: 2vh;
+  .deprecation-notice {
+    margin-bottom: 3vh;
+
+    .alert-heading {
+      color: #856404;
+    }
   }
+
   .intro {
     img {
       max-width: 40vh;
@@ -282,15 +193,6 @@ export default Vue.extend({
     }
   }
 
-  .new-badge-info {
-    margin-bottom: 2vh;
-    width: 100%;
-    .badge-detail {
-      width: 100%;
-      font-size: 14px;
-      margin-bottom: 2vh;
-    }
-  }
   p.note {
     font-size: 13px;
   }