Update README.md

feat: Add `prefix` param
feat: Theme supports `_start` and `_end` as padding image

README.md

@@ -4,7 +4,7 @@
 
 <p align="center">
   <a href="https://count.getloli.com" target="_blank">
-    <img alt="Moe Counter!" src="https://count.getloli.com/@Moe-counter.github?name=Moe-counter.github&theme=booru-lewd&padding=7&offset=0&align=top&scale=0.72&pixelated=0&darkmode=auto">
+    <img alt="Moe Counter!" src="https://count.getloli.com/@Moe-counter.github?name=Moe-counter.github&theme=booru-lewd&padding=7&offset=0&align=top&scale=1&pixelated=1&darkmode=auto">
   </a>
 </p>
 
@@ -127,6 +127,14 @@
 
 ![booru-yuyuyui](https://count.getloli.com/@demo?theme=booru-yuyuyui)
 
+##### capoo-1
+
+![capoo-1](https://count.getloli.com/@demo?theme=capoo-1)
+
+##### capoo-2
+
+![capoo-2](https://count.getloli.com/@demo?theme=capoo-2)
+
 ##### e621
 
 ![e621](https://count.getloli.com/@demo?theme=e621)
@@ -211,6 +219,14 @@
 
 ![shimmie2](https://count.getloli.com/@demo?theme=shimmie2)
 
+##### sketch-1
+
+![sketch-1](https://count.getloli.com/@demo?theme=sketch-1)
+
+##### sketch-2
+
+![sketch-2](https://count.getloli.com/@demo?theme=sketch-2)
+
 </details>
 
 ## Demo
@@ -282,6 +298,10 @@ LOG_LEVEL=debug
 
 ---
 
-<p>
-<img src="https://api.star-history.com/svg?repos=journey-ad/Moe-Counter&type=Date" alt="Star History Chart" style="width: 600px; height: 400px;" width="600" height="400" />
-</p>
+<a href="https://star-history.com/?repos=journey-ad/Moe-Counter&type=Date#journey-ad/Moe-Counter&Date">
+ <picture>
+   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=journey-ad/Moe-Counter&type=Date&theme=dark" />
+   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=journey-ad/Moe-Counter&type=Date" />
+   <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=journey-ad/Moe-Counter&type=Date" />
+ </picture>
+</a>

assets/script.js

@@ -12,7 +12,8 @@
     scale: document.getElementById('scale'),
     pixelated: document.getElementById('pixelated'),
     darkmode: document.getElementById('darkmode'),
-    num: document.getElementById('num')
+    num: document.getElementById('num'),
+    prefix: document.getElementById('prefix')
   };
 
   btn.addEventListener('click', throttle(handleButtonClick, 500));
@@ -48,6 +49,9 @@
     if (num.value > 0) {
       params.num = num.value;
     }
+    if (prefix.value !== '') {
+      params.prefix = prefix.value;
+    }
 
     const query = new URLSearchParams(params).toString();
     const imgSrc = `${__global_data.site}/@${nameValue}?${query}`;

index.js

@@ -35,13 +35,16 @@ app.get(["/@:name", "/get/@:name"],
     }),
     query: z.object({
       theme: z.string().default("moebooru"),
-      num: z.coerce.number().int().min(0).max(1e15).default(0), // a carry-safe integer, less than `2^53-1`, and aesthetically pleasing in decimal.
       padding: z.coerce.number().int().min(0).max(16).default(7),
       offset: z.coerce.number().min(-500).max(500).default(0),
       align: z.enum(["top", "center", "bottom"]).default("top"),
       scale: z.coerce.number().min(0.1).max(2).default(1),
       pixelated: z.enum(["0", "1"]).default("1"),
-      darkmode: z.enum(["0", "1", "auto"]).default("auto")
+      darkmode: z.enum(["0", "1", "auto"]).default("auto"),
+
+      // Unusual Options
+      num: z.coerce.number().int().min(0).max(1e15).default(0), // a carry-safe integer, less than `2^53-1`, and aesthetically pleasing in decimal.
+      prefix: z.coerce.number().int().min(-1).max(999999).default(-1)
     })
   }),
   async (req, res) => {

utils/themify.js

@@ -42,7 +42,7 @@ function convertToDatauri(path) {
 }
 
 function getCountImage(params) {
-  let { count, theme = 'moebooru', padding = 7, offset = 0, align = 'top', scale = 1, pixelated = '1', darkmode = 'auto' } = params
+  let { count, theme = 'moebooru', padding = 7, prefix = -1, offset = 0, align = 'top', scale = 1, pixelated = '1', darkmode = 'auto' } = params
 
   if (!(theme in themeList)) theme = 'moebooru'
   padding = parseInt(Number(padding), 10)
@@ -51,6 +51,20 @@ function getCountImage(params) {
 
   // This is not the greatest way for generating an SVG but it'll do for now
   const countArray = count.toString().padStart(padding, '0').split('')
+
+  // Add prefix if exist
+  if (prefix >= 0) {
+    countArray.unshift(...String(prefix).split(''))
+  }
+
+  // Add _start and _end if exist
+  if (themeList[theme]['_start']) {
+    countArray.unshift('_start')
+  }
+  if (themeList[theme]['_end']) {
+    countArray.push('_end')
+  }
+
   const uniqueChar = [...new Set(countArray)]
 
   let x = 0, y = 0

views/index.pug

@@ -92,7 +92,7 @@ html
                   option(value=theme) #{theme}
           tr
             td: code padding
-            td Set the minimum length, between 1-32, default is 
+            td Set the minimum length, between 1-16, default is 
               code 7
             td: input#padding(type='number', value='7', min='1', max='32', step='1', oninput='this.value = this.value.replace(/[^0-9]/g, "")')
           tr
@@ -136,6 +136,10 @@ html
             td Set counter display number, 0 for disable, default is 
               code 0
             td: input#num(type='number', value='0', min='0', max='1e15', step='1', oninput='this.value = this.value.replace(/[^0-9]/g, "")')
+          tr
+            td: code prefix
+            td Set the prefix number, empty for disable
+            td: input#prefix(type='number', value='', min='0', max='999999', step='1', oninput='this.value = this.value.replace(/[^0-9]/g, "")')
 
       button#get(onclick='_evt_push("click", "normal", "get_counter")') Generate