@5ime/likeme 1.0.4 → 1.0.6

package/README.md

@@ -81,11 +81,23 @@
 </script>
 ```
 
-### 方法二：下载使用
+也可以用你自己的 Vercel 域名加载静态资源：
 
-1. 下载 `static/css/likeme.css` 和 `static/js/likeme.js`
-2. 在你的项目中引入这些文件
-3. 按照上面的方式初始化组件
+```html
+<link rel="stylesheet" href="https://your-domain.vercel.app/static/css/likeme.css" />
+<script src="https://your-domain.vercel.app/static/js/likeme.js"></script>
+```
+
+### 方法二：npm 安装
+
+```bash
+npm install @5ime/likeme
+```
+
+然后引入：
+
+- `node_modules/@5ime/likeme/static/css/likeme.css`
+- `node_modules/@5ime/likeme/static/js/likeme.js`
 
 ### 配置选项
 

package/package.json

@@ -1,24 +1,42 @@
-{
-  "name": "@5ime/likeme",
-  "version": "1.0.4",
-  "description": "Do you like me? - 一个可爱的互动小组件",
-  "main": "index.js",
-  "scripts": {
-    "start": "node index.js",
-    "dev": "node index.js"
-  },
-  "author": "iami233",
-  "license": "MIT",
-  "dependencies": {
-    "@vercel/postgres": "^0.10.0",
-    "express": "^5.1.0"
-  },
-  "engines": {
-    "node": ">=18.0.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/5ime/likeMe.git"
-  },
-  "homepage": "https://github.com/5ime/likeMe"
-}
+{
+  "name": "@5ime/likeme",
+  "version": "1.0.6",
+  "description": "Do you like me? - 一个可爱的互动点赞组件",
+  "main": "static/js/likeme.js",
+  "unpkg": "static/js/likeme.js",
+  "jsdelivr": "static/js/likeme.js",
+  "style": "static/css/likeme.css",
+  "files": [
+    "static",
+    "README.md"
+  ],
+  "scripts": {
+    "start": "node index.js",
+    "dev": "node index.js",
+    "prepare:public": "node scripts/prepare-public.js",
+    "prepublishOnly": "node -e \"const fs=require('fs');['static/css/likeme.css','static/js/likeme.js'].forEach(f=>{if(!fs.existsSync(f)){console.error('missing '+f);process.exit(1)}})\""
+  },
+  "author": "iami233",
+  "license": "MIT",
+  "keywords": [
+    "like",
+    "widget",
+    "embed",
+    "vercel"
+  ],
+  "dependencies": {
+    "@vercel/postgres": "^0.10.0",
+    "express": "^5.1.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/5ime/likeMe.git"
+  },
+  "homepage": "https://github.com/5ime/likeMe",
+  "bugs": {
+    "url": "https://github.com/5ime/likeMe/issues"
+  }
+}

package/static/js/likeme.js

@@ -1 +1 @@
-const likeMe=(()=>{let instance;return options=>instance||(instance=new LikeMeSingleton(options))})();class LikeMeSingleton{constructor({el,serverURL,color='#ff9797'}){Object.assign(this,{el,url:serverURL,color});this.isLiking=false;this.init()}async init(){try{await this.renderUI();this.attachEvents();this.updateCount()}catch(error){console.error('LikeMe init error:',error)}}async renderUI(){try{const response=await fetch(this.url);const html=await response.text();const element=document.querySelector(this.el);if(element){const parser=new DOMParser();const doc=parser.parseFromString(html,'text/html');element.innerHTML=doc.body.innerHTML;const card=element.querySelector('.likeCard');if(card){card.style.setProperty('background-color',this.color)}}}catch(error){console.error('Render UI error:',error)}}attachEvents(){const card=document.querySelector(`${this.el} .likeCard`);if(card){card.addEventListener('click',()=>this.handleLike())}}async updateCount(){try{const response=await fetch(`${this.url}/info`);const data=await response.json().catch(()=>null);if(response.ok&&data){const count=data.data?.count||0;const textElement=document.querySelector(`${this.el} .likeCard-text`);if(textElement){textElement.textContent=`❤ ${count}`}}}catch(error){console.error('Update count error:',error)}}setUIState(isLoading,text,isSuccess=false){const card=document.querySelector(`${this.el} .likeCard`);const textElement=document.querySelector(`${this.el} .likeCard-text`);if(card&&textElement){card.classList.remove('loading','success');if(isLoading){card.classList.add('loading')}else if(isSuccess){card.classList.add('success')}textElement.textContent=text}}async handleLike(){if(this.isLiking)return;this.isLiking=true;this.setUIState(true,'❤ 爱意传递中...');try{const response=await fetch(`${this.url}/like`);const payload=await response.json().catch(()=>null);if(!payload){this.setUIState(false,'❤ 网络错误');setTimeout(()=>{this.updateCount()},1500);return}const{code,data={},msg}=payload;const count=data.count||0;if(response.ok&&code==='200'){this.setUIState(false,'❤ 传递成功~',true);setTimeout(()=>{this.setUIState(false,`❤ ${count}`)},500);return}this.setUIState(false,msg||'❤ 传递失败~');setTimeout(()=>{this.updateCount()},1500)}catch(error){console.error('Handle like error:',error);this.setUIState(false,'❤ 网络错误');setTimeout(()=>{this.updateCount()},1500)}finally{this.isLiking=false}}}
+const likeMe=(()=>{let instance;return options=>instance||(instance=new LikeMeSingleton(options))})();class LikeMeSingleton{constructor({el,serverURL,color='#ff9797'}){Object.assign(this,{el,url:serverURL,color});this.isLiking=false;this.init()}async init(){try{await this.renderUI();this.attachEvents();this.updateCount()}catch(error){console.error('LikeMe init error:',error)}}async renderUI(){try{const element=document.querySelector(this.el);if(element){element.innerHTML='\n    <div class="container">\n        <div class="likeCard">\n            <div class="likeCard-text">\n                少女祈祷中...\n            </div>\n            <h3>Do You Like Me</h3>\n        </div>\n    </div>\n';const card=element.querySelector('.likeCard');if(card){card.style.setProperty('background-color',this.color)}}}catch(error){console.error('Render UI error:',error)}}attachEvents(){const card=document.querySelector(`${this.el} .likeCard`);if(card){card.addEventListener('click',()=>this.handleLike())}}async updateCount(){try{const response=await fetch(`${this.url}/info`);const data=await response.json().catch(()=>null);if(response.ok&&data){const count=data.data?.count||0;const textElement=document.querySelector(`${this.el} .likeCard-text`);if(textElement){textElement.textContent=`❤ ${count}`}}}catch(error){console.error('Update count error:',error)}}setUIState(isLoading,text,isSuccess=false){const card=document.querySelector(`${this.el} .likeCard`);const textElement=document.querySelector(`${this.el} .likeCard-text`);if(card&&textElement){card.classList.remove('loading','success');if(isLoading){card.classList.add('loading')}else if(isSuccess){card.classList.add('success')}textElement.textContent=text}}async handleLike(){if(this.isLiking)return;this.isLiking=true;this.setUIState(true,'❤ 爱意传递中...');try{const response=await fetch(`${this.url}/like`);const payload=await response.json().catch(()=>null);if(!payload){this.setUIState(false,'❤ 网络错误');setTimeout(()=>{this.updateCount()},1500);return}const{code,data={},msg}=payload;const count=data.count||0;if(response.ok&&code==='200'){this.setUIState(false,'❤ 传递成功~',true);setTimeout(()=>{this.setUIState(false,`❤ ${count}`)},500);return}this.setUIState(false,msg||'❤ 传递失败~');setTimeout(()=>{this.updateCount()},1500)}catch(error){console.error('Handle like error:',error);this.setUIState(false,'❤ 网络错误');setTimeout(()=>{this.updateCount()},1500)}finally{this.isLiking=false}}}

package/.env.example

@@ -1,7 +0,0 @@
-POSTGRES_URL=postgres://...
-PORT=3000
-ALLOW_ORIGIN=*
-TRUST_PROXY=1
-INFO_CACHE_SECONDS=5
-LIKE_RATE_LIMIT_WINDOW_MS=60000
-LIKE_RATE_LIMIT_MAX=20

package/.gitattributes

@@ -1,20 +0,0 @@
-* text=auto
-
-# Normalize line endings to LF for source/docs to avoid noisy diffs across OSes
-*.js  text eol=lf
-*.cjs text eol=lf
-*.mjs text eol=lf
-*.ts  text eol=lf
-*.tsx text eol=lf
-*.json text eol=lf
-*.md  text eol=lf
-*.html text eol=lf
-*.css text eol=lf
-*.svg text eol=lf
-*.yml text eol=lf
-*.yaml text eol=lf
-*.toml text eol=lf
-
-# Keep Windows scripts with CRLF if you add any in the future
-*.bat text eol=crlf
-*.cmd text eol=crlf

package/demo/index.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Do You Like Me? - 组件演示页面">
-    <meta name="keywords" content="点赞,互动,like,web组件,演示">
-    <title>Do You Like Me? - 演示页面</title>
-    <link rel="stylesheet" href="/static/css/likeme.css">
-    <style>
-        .container {
-            margin: 0 auto;
-            max-width: 400px;
-            width: 100%;
-        }
-        
-        .demo-info {
-            text-align: center;
-            margin-bottom: 20px;
-            padding: 10px;
-            border-radius: 5px;
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="demo-info">
-            <h2>LikeMe 组件演示</h2>
-            <p>这是一个可交互的点赞组件演示页面</p>
-        </div>
-        <div id="likeme"></div>
-    </div>
-
-    <script src="/static/js/likeme.js"></script>
-    <script>
-        likeMe({
-            el: '#likeme',
-            serverURL: `${location.protocol}//${location.host}`,
-            color: '#ff4e6a'
-        });
-    </script>
-</body>
-</html>

package/index.js

@@ -1,14 +0,0 @@
-const { createApp } = require('./src/app');
-const { port, isVercel } = require('./src/config');
-
-const app = createApp();
-
-if (isVercel) {
-  module.exports = app;
-} else {
-  app.listen(port, () => {
-    console.log(`💖 启动成功！端口：${port}`);
-    console.log(`✨ 运行环境：${process.env.NODE_ENV || 'development'}`);
-    console.log(`🌍 访问地址：http://localhost:${port}`);
-  });
-}

package/public/index.html

@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Do You Like Me? - 一个可爱的互动点赞组件">
-    <title>Do You Like Me?</title>
-    <link rel="stylesheet" href="/static/css/likeme.css">
-    <style>
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            margin: 0;
-            min-height: 100vh;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-        
-        .container {
-            max-width: 400px;
-            width: 100%;
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="likeCard">
-            <div class="likeCard-text">
-                少女祈祷中...
-            </div>
-            <h3>Do You Like Me</h3>
-        </div>
-    </div>
-</body>
-</html> 

package/src/app.js

@@ -1,87 +0,0 @@
-const express = require('express');
-const path = require('path');
-
-const {
-  allowOrigin,
-  trustProxy,
-  infoCacheSeconds,
-  likeRateLimitMax,
-  likeRateLimitWindowMs,
-} = require('./config');
-const { getClientIp } = require('./ip');
-const { getCurrentCount, likeOncePerDay } = require('./db');
-const { ok, fail } = require('./http');
-const { createIpRateLimiter } = require('./ratelimit');
-
-function createApp() {
-  const app = express();
-
-  // 反代环境下正确识别客户端 IP（Vercel/CF 等）
-  app.set('trust proxy', trustProxy);
-
-  app.use((req, res, next) => {
-    res.setHeader('X-Content-Type-Options', 'nosniff');
-    res.setHeader('X-Frame-Options', 'DENY');
-    res.setHeader('Referrer-Policy', 'no-referrer');
-    res.setHeader(
-      'Permissions-Policy',
-      'geolocation=(), microphone=(), camera=()'
-    );
-    next();
-  });
-
-  app.use((req, res, next) => {
-    res.header('Access-Control-Allow-Origin', allowOrigin);
-    res.header('Access-Control-Allow-Headers', 'Content-Type');
-    res.header('Access-Control-Allow-Methods', 'GET,OPTIONS');
-    if (req.method === 'OPTIONS') return res.sendStatus(200);
-    next();
-  });
-
-  // 健康检查
-  app.get('/healthz', (req, res) => res.status(200).send('ok'));
-
-  // 静态资源
-  app.use('/static', express.static(path.join(__dirname, '..', 'static')));
-  app.use('/demo', express.static(path.join(__dirname, '..', 'demo')));
-  app.get('/', (req, res) =>
-    res.sendFile(path.join(__dirname, '..', 'public', 'index.html'))
-  );
-
-  app.get('/info', async (req, res) => {
-    try {
-      // 计数查询短缓存
-      res.setHeader('Cache-Control', `public, max-age=${infoCacheSeconds}`);
-      const count = await getCurrentCount();
-      return ok(res, { count });
-    } catch (error) {
-      console.error('Error in /info:', error?.message || 'Unknown error');
-      return fail(res, '哎呀，数据偷懒跑掉了');
-    }
-  });
-
-  // 点赞限流
-  const likeLimiter = createIpRateLimiter({
-    windowMs: likeRateLimitWindowMs,
-    max: likeRateLimitMax,
-    keyFn: (req) => getClientIp(req),
-  });
-
-  app.get('/like', likeLimiter, async (req, res) => {
-    const ip = getClientIp(req);
-    try {
-      res.setHeader('Cache-Control', 'no-store');
-      const result = await likeOncePerDay(ip);
-      if (!result.ok) return fail(res, '今天的爱意已经收到啦~');
-      return ok(res, { count: result.count });
-    } catch (error) {
-      console.error('Error in /like:', error?.message || 'Unknown error');
-      return fail(res, '你的爱意传递失败~');
-    }
-  });
-
-  return app;
-}
-
-module.exports = { createApp };
-

package/src/config.js

@@ -1,16 +0,0 @@
-function env(name, fallback) {
-  const v = process.env[name];
-  if (v === undefined || v === null || v === '') return fallback;
-  return v;
-}
-
-module.exports = {
-  port: Number(env('PORT', '3000')),
-  allowOrigin: env('ALLOW_ORIGIN', '*'),
-  trustProxy: env('TRUST_PROXY', '1'),
-  infoCacheSeconds: Number(env('INFO_CACHE_SECONDS', '5')),
-  likeRateLimitWindowMs: Number(env('LIKE_RATE_LIMIT_WINDOW_MS', '60000')),
-  likeRateLimitMax: Number(env('LIKE_RATE_LIMIT_MAX', '20')),
-  isVercel: Boolean(process.env.VERCEL),
-};
-

package/src/db.js

@@ -1,93 +0,0 @@
-const { sql } = require('@vercel/postgres');
-
-let schemaInitPromise = null;
-
-async function ensureSchema() {
-  if (schemaInitPromise) return schemaInitPromise;
-
-  schemaInitPromise = (async () => {
-    // 总计数表
-    await sql`
-      CREATE TABLE IF NOT EXISTS like_count (
-        id INT PRIMARY KEY DEFAULT 1,
-        count BIGINT NOT NULL DEFAULT 0
-      );
-    `;
-    await sql`
-      INSERT INTO like_count (id, count)
-      VALUES (1, 0)
-      ON CONFLICT (id) DO NOTHING;
-    `;
-
-    // 去重表：同一 IP 每天一次（PRIMARY KEY (ip, day)）
-    await sql`
-      CREATE TABLE IF NOT EXISTS like_user (
-        ip TEXT NOT NULL,
-        day DATE NOT NULL DEFAULT CURRENT_DATE,
-        created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
-        PRIMARY KEY (ip, day)
-      );
-    `;
-  })();
-
-  return schemaInitPromise;
-}
-
-async function getCurrentCount() {
-  await ensureSchema();
-  const { rows } = await sql`SELECT count FROM like_count WHERE id = 1;`;
-  return Number(rows?.[0]?.count ?? 0);
-}
-
-async function likeOncePerDay(ip) {
-  await ensureSchema();
-
-  const client = await sql.connect();
-  try {
-    await client.sql`BEGIN;`;
-
-    const exists = await client.sql`
-      SELECT 1
-      FROM like_user
-      WHERE ip = ${ip} AND day = CURRENT_DATE
-      LIMIT 1;
-    `;
-
-    if (exists.rows.length > 0) {
-      await client.sql`ROLLBACK;`;
-      return { ok: false, reason: 'already_liked_today' };
-    }
-
-    await client.sql`
-      INSERT INTO like_user (ip, day)
-      VALUES (${ip}, CURRENT_DATE)
-      ON CONFLICT (ip, day) DO NOTHING;
-    `;
-
-    const updated = await client.sql`
-      UPDATE like_count
-      SET count = count + 1
-      WHERE id = 1
-      RETURNING count;
-    `;
-
-    await client.sql`COMMIT;`;
-    const count = Number(updated.rows?.[0]?.count ?? 0);
-    return { ok: true, count };
-  } catch (err) {
-    try {
-      await client.sql`ROLLBACK;`;
-    } catch (_) {
-    }
-    throw err;
-  } finally {
-    client.release();
-  }
-}
-
-module.exports = {
-  ensureSchema,
-  getCurrentCount,
-  likeOncePerDay,
-};
-

package/src/http.js

@@ -1,10 +0,0 @@
-function ok(res, data) {
-  return res.json({ code: '200', msg: 'success', data });
-}
-
-function fail(res, msg) {
-  return res.json({ code: '201', msg });
-}
-
-module.exports = { ok, fail };
-

package/src/ip.js

@@ -1,23 +0,0 @@
-function sanitizeIp(ip) {
-  if (!ip || typeof ip !== 'string') return 'unknown';
-  // IPv6 最大长度 45
-  const cleaned = ip.trim().slice(0, 45);
-  if (!/^[a-fA-F0-9.:\-]+$/.test(cleaned)) return 'unknown';
-  return cleaned;
-}
-
-function getClientIp(req) {
-  const forwarded = req.headers['x-forwarded-for'];
-  if (forwarded) {
-    const ip = String(forwarded).split(',')[0].trim();
-    return sanitizeIp(ip);
-  }
-  const ip =
-    req.socket?.remoteAddress ||
-    req.connection?.remoteAddress ||
-    'unknown';
-  return sanitizeIp(ip);
-}
-
-module.exports = { getClientIp, sanitizeIp };
-

package/src/ratelimit.js

@@ -1,37 +0,0 @@
-function createIpRateLimiter({ windowMs, max, keyFn }) {
-  // key -> { count, resetAt }
-  const hits = new Map();
-
-  function cleanup(now) {
-    for (const [k, v] of hits) {
-      if (v.resetAt <= now) hits.delete(k);
-    }
-  }
-
-  return function rateLimit(req, res, next) {
-    const now = Date.now();
-    cleanup(now);
-
-    const key = (keyFn ? keyFn(req) : undefined) || 'unknown';
-    const existing = hits.get(key);
-
-    if (!existing || existing.resetAt <= now) {
-      hits.set(key, { count: 1, resetAt: now + windowMs });
-      return next();
-    }
-
-    existing.count += 1;
-    if (existing.count > max) {
-      res.setHeader(
-        'Retry-After',
-        String(Math.ceil((existing.resetAt - now) / 1000))
-      );
-      return res.status(429).json({ code: '201', msg: '请求太频繁啦，稍后再试~' });
-    }
-
-    return next();
-  };
-}
-
-module.exports = { createIpRateLimiter };
-

package/vercel.json

@@ -1,14 +0,0 @@
-{
-  "builds": [
-    {
-      "src": "index.js",
-      "use": "@vercel/node"
-    }
-  ],
-  "routes": [
-    {
-      "src": "/(.*)",
-      "dest": "index.js"
-    }
-  ]
-}