home/badger
2
0
Fork 0
mirror of https://github.com/wahyd4/badger.git synced 2026-08-08 21:05:55 +10:00
Code Issues Packages Projects Releases Wiki Activity

Add note to deprecate badges service

Browse Source
This commit is contained in:
junv
2025-06-06 12:36:39 +10:00
parent f5ea265753
commit de57e26cec
2 changed files with 53 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/pages/badges/index.vue
+13
View File
@@ -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
www/pages/index.vue
+40 -138
View File
@@ -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;
}