refactor: add config.yml

config.yml

@@ -0,0 +1,3 @@
+length: 7
+
+theme: 'moebooru'

package.json

@@ -14,7 +14,8 @@
     "prettier": "^3.2.5",
     "webpack": "^5.90.3",
     "webpack-cli": "^5.1.4",
-    "wrangler": "^3.0.0"
+    "wrangler": "^3.0.0",
+    "yamljs": "^0.3.0"
   },
   "dependencies": {
     "itty-router": "^4.0.27"

src/main.js

@@ -1,42 +1,9 @@
 import { Router, error, html, json } from 'itty-router';
-import themes from '../themes';
+import config from '../config.yml';
+import { getNum, setNum } from './db.js';
+import { getCountImage } from './utils.js';
+import { validateId } from './middlewares.js';
 import indexHtml from './index.html';
-import { getNum, setNum } from './d1.js';
-
-const vaildateId = (req) => {
-  const { id } = req.params;
-  if (!/^[a-z0-9:.@_-]{1,256}$/i.test(id)) {
-    return error(400, 'Invalid Counter ID');
-  }
-};
-
-/**
- * @param {number} count 需要显示的数字
- * @param {string} theme 主题
- * @param {number} length 数字总长度
- * @param {boolean} pixelated 是否像素化
- * @returns
- */
-const getCountImage = (count, theme, length, pixelated) => {
-  const countArray = count.toString().padStart(length, '0').split('');
-
-  const { width, height, images } = themes[theme];
-  let x = 0;
-  const parts = countArray.reduce((pre, cur) => {
-    const uri = images[cur];
-    const image = `<image x="${x}" y="0" width="${width}" height="${height}" href="${uri}"/>`;
-    x += width;
-    return pre + image;
-  }, '');
-
-  return (
-    '<?xml version="1.0" encoding="UTF-8"?>' +
-    `<svg width="${x}" height="${height}" version="1.1"` +
-    ' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"' +
-    `${pixelated ? ' style="image-rendering: pixelated"' : ''}>` +
-    `<title>Moe Counter</title><g>${parts}</g></svg>`
-  );
-};
 
 const router = Router();
 
@@ -51,24 +18,24 @@ router.get('/heart-beat', () => {
   });
 });
 
-router.get('/record/:id', vaildateId, async (req, env) => {
+router.get('/record/:id', validateId, async (req, env) => {
   const { id } = req.params;
 
   const num = await getNum(env.DB, id);
 
   return json({ id, num });
 });
 
-router.get('/:id', vaildateId, async (req, env) => {
+router.get('/:id', validateId, async (req, env) => {
   const { id } = req.params;
   let { theme } = req.query;
 
   if (!theme || !themes[theme]) {
-    theme = env.DEFAULT_THEME;
+    theme = config.theme;
   }
 
   let count = 0,
-    length = env.DEFAULT_LENGTH;
+    length = config.length;
 
   if (id === 'demo') {
     count = 123456789;

src/middlewares.js

@@ -0,0 +1,8 @@
+const validateId = (req) => {
+  const { id } = req.params;
+  if (!/^[a-z0-9:.@_-]{1,256}$/i.test(id)) {
+    return error(400, 'Invalid Counter ID');
+  }
+};
+
+export { validateId };

src/utils.js

@@ -0,0 +1,31 @@
+import themes from '../themes';
+
+/**
+ * @param {number} count 需要显示的数字
+ * @param {string} theme 主题
+ * @param {number} length 数字总长度
+ * @param {boolean} pixelated 是否像素化
+ * @returns
+ */
+const getCountImage = (count, theme, length, pixelated) => {
+  const countArray = count.toString().padStart(length, '0').split('');
+
+  const { width, height, images } = themes[theme];
+  let x = 0;
+  const parts = countArray.reduce((pre, cur) => {
+    const uri = images[cur];
+    const image = `<image x="${x}" y="0" width="${width}" height="${height}" href="${uri}"/>`;
+    x += width;
+    return pre + image;
+  }, '');
+
+  return (
+    '<?xml version="1.0" encoding="UTF-8"?>' +
+    `<svg width="${x}" height="${height}" version="1.1"` +
+    ' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"' +
+    `${pixelated ? ' style="image-rendering: pixelated"' : ''}>` +
+    `<title>Moe Counter</title><g>${parts}</g></svg>`
+  );
+};
+
+export { getCountImage };

webpack.config.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const yaml = require('yamljs');
 
 module.exports = {
   mode: 'production',
@@ -24,14 +25,17 @@ module.exports = {
         test: /\.(gif|png)$/i,
         type: 'asset/inline',
       },
+      {
+        test: /\.yml$/i,
+        type: 'json',
+        parser: {
+          parse: yaml.parse,
+        },
+      },
     ],
   },
   optimization: {
     minimize: false,
   },
-  performance: {
-    hints: false,
-  },
-  devtool: 'inline-source-map',
   plugins: [new CleanWebpackPlugin()],
 };

wrangler.toml

@@ -14,7 +14,3 @@ command = "npm run build"
 binding = "DB"
 database_name = "count"
 database_id = "08323087-a0a9-44cb-a940-c82df8945a47"
-
-[vars]
-DEFAULT_LENGTH = 7
-DEFAULT_THEME = 'moebooru'