paywall-protect-widget 1.0.0

package/README.md

@@ -0,0 +1,76 @@
+# PaywallProtect Widget
+
+Official JavaScript widget for PaywallProtect - bot detection and content protection.
+
+## Installation
+
+### Via CDN (Easiest - No Build Step)
+```html
+<script 
+  src="https://cdn.jsdelivr.net/npm/@paywallprotect/widget@1/dist/paywall-widget.min.js"
+  data-site-id="your_site_id"
+  data-api-key="your_api_key"
+  data-api-url="https://your-project.supabase.co/functions/v1"
+  async
+></script>
+```
+
+### Via npm (For Build Tools)
+```bash
+npm install @paywallprotect/widget
+```
+```javascript
+import PaywallProtect from '@paywallprotect/widget';
+
+PaywallProtect.init({
+  siteId: 'your_site_id',
+  apiKey: 'your_api_key',
+  apiUrl: 'https://your-project.supabase.co/functions/v1'
+});
+```
+
+## Usage
+
+### Mark Protected Content
+```html
+<article class="paywall-protected">
+  Your premium content here
+</article>
+```
+
+Or use data attribute:
+```html
+<div data-paywall="true">
+  Premium content
+</div>
+```
+
+## API
+```javascript
+// Manual initialization
+PaywallProtect.init({
+  siteId: 'site_xxx',
+  apiKey: 'pk_live_xxx',
+  apiUrl: 'https://...',
+  subscribeUrl: '/pricing',
+  loginUrl: '/login',
+  mode: 'auto' // or 'always', 'never'
+});
+
+// Show paywall manually
+PaywallProtect.showPaywall({
+  type: 'hard',
+  title: 'Premium Content',
+  message: 'Subscribe to continue'
+});
+
+// Hide paywall
+PaywallProtect.hidePaywall();
+
+// Reload protection
+PaywallProtect.reload();
+```
+
+## License
+
+MIT

package/dist/paywall-widget.esm.js

@@ -0,0 +1,32 @@
+var u=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports);var p=(r,n,a)=>new Promise((e,t)=>{var o=i=>{try{c(a.next(i))}catch(s){t(s)}},l=i=>{try{c(a.throw(i))}catch(s){t(s)}},c=i=>i.done?e(i.value):Promise.resolve(i.value).then(o,l);c((a=a.apply(r,n)).next())});var y=u((g,d)=>{(function(r){"use strict";let n={version:"1.0.0",init:function(e){if(!e.siteId||!e.apiKey){console.error("[PaywallProtect] Missing siteId or apiKey");return}this.config={siteId:e.siteId,apiKey:e.apiKey,apiUrl:e.apiUrl||"",subscribeUrl:e.subscribeUrl||"/subscribe",loginUrl:e.loginUrl||"/login",mode:e.mode||"auto"},console.log("[PaywallProtect] Initializing...",{siteId:this.config.siteId}),document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>this.start()):this.start()},start:function(){if(this.config.mode==="never"){console.log("[PaywallProtect] Disabled");return}if(this.config.mode==="always"){this.blurContent(),this.createPaywallModal({type:"hard"});return}this.checkAccess()},generateFingerprint:function(){return{userAgent:navigator.userAgent,language:navigator.language,platform:navigator.platform,hardwareConcurrency:navigator.hardwareConcurrency||0,deviceMemory:navigator.deviceMemory||0,timezone:Intl.DateTimeFormat().resolvedOptions().timeZone,screen:{width:r.screen.width,height:r.screen.height,colorDepth:r.screen.colorDepth,pixelRatio:r.devicePixelRatio||1},timing:{pageLoadTime:Math.round(performance.now())},webdriver:navigator.webdriver||!1,canvas:this.getCanvasFingerprint(),webgl:this.getWebGLFingerprint(),touchSupport:"ontouchstart"in r,plugins:this.getPluginsList()}},getCanvasFingerprint:function(){try{let e=document.createElement("canvas"),t=e.getContext("2d");return t?(t.textBaseline="top",t.font="14px Arial",t.fillText("PaywallProtect",2,2),e.toDataURL().substring(0,100)):null}catch(e){return null}},getWebGLFingerprint:function(){try{let t=document.createElement("canvas").getContext("webgl");return t?{renderer:t.getParameter(t.RENDERER),vendor:t.getParameter(t.VENDOR)}:null}catch(e){return null}},getPluginsList:function(){try{return Array.from(navigator.plugins||[]).map(e=>e.name).slice(0,5)}catch(e){return[]}},checkAccess:function(){return p(this,null,function*(){try{let e=yield fetch(this.config.apiUrl+"/check-access",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({siteId:this.config.siteId,apiKey:this.config.apiKey,page:r.location.pathname,userAgent:navigator.userAgent,fingerprint:this.generateFingerprint(),referrer:document.referrer})});if(!e.ok){console.error("[PaywallProtect] API error:",e.status);return}let t=yield e.json();console.log("[PaywallProtect] Decision:",t),!t.allowed&&t.status==="blocked"?(this.blurContent(),this.createPaywallModal({type:"bot-blocked",message:t.reason})):t.showPaywall&&t.paywallConfig&&(this.blurContent(),this.createPaywallModal(t.paywallConfig))}catch(e){console.error("[PaywallProtect] Error:",e)}})},blurContent:function(){let t=document.querySelectorAll('.paywall-protected, [data-paywall="true"]');(t.length?t:[document.querySelector("main, article, .content")].filter(Boolean)).forEach(o=>{o.style.filter="blur(8px)",o.style.userSelect="none",o.style.pointerEvents="none"})},createPaywallModal:function(e){if(document.getElementById("paywall-protect-modal"))return;let t=e.type||"hard",o="";t==="hard"?o=`
+          <div class="paywall-icon">\u{1F512}</div>
+          <h2 id="paywall-title">${e.title||"Premium Content"}</h2>
+          <p>${e.message||"Subscribe to access this content."}</p>
+          <button id="paywall-subscribe" class="paywall-btn primary">Subscribe Now</button>
+          <p class="footer">Already a subscriber? <a href="${this.config.loginUrl}" id="paywall-login">Sign in</a></p>
+        `:t==="metered"?o=`
+          <div class="paywall-icon">\u{1F4CA}</div>
+          <h2 id="paywall-title">Free Article Limit Reached</h2>
+          <p>You've read <strong>${e.articlesRead||3} of ${e.freeLimit||3}</strong> free articles this month.</p>
+          <button id="paywall-subscribe" class="paywall-btn primary">Get Unlimited Access</button>
+          <button id="paywall-close" class="paywall-btn secondary">Maybe Later</button>
+        `:o=`
+          <div class="paywall-icon">\u{1F916}</div>
+          <h2 id="paywall-title">Access Denied</h2>
+          <p>${e.message||"Automated access is not permitted."}</p>
+        `;let l=document.createElement("div");if(l.id="paywall-protect-modal",l.innerHTML=`<div class="paywall-overlay"><div class="paywall-content">${o}</div></div>`,!document.getElementById("paywall-styles")){let s=document.createElement("style");s.id="paywall-styles",s.textContent=`
+          #paywall-protect-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999999;animation:fadeIn .3s}
+          .paywall-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px}
+          .paywall-content{background:#fff;border-radius:16px;padding:48px 40px;max-width:500px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:slideUp .3s}
+          .paywall-icon{font-size:64px;margin-bottom:24px}
+          #paywall-title{font-size:28px;font-weight:700;color:#1a1a1a;margin:0 0 16px 0}
+          .paywall-content p{font-size:16px;color:#666;line-height:1.6;margin:0 0 24px 0}
+          .paywall-btn{display:block;width:100%;padding:16px 32px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;margin-bottom:12px}
+          .paywall-btn.primary{background:#3b82f6;color:#fff}
+          .paywall-btn.primary:hover{background:#2563eb}
+          .paywall-btn.secondary{background:transparent;color:#666;border:2px solid #e5e7eb}
+          .footer{margin-top:24px;font-size:14px;color:#666}
+          .footer a{color:#3b82f6;text-decoration:none}
+          @keyframes fadeIn{from{opacity:0}to{opacity:1}}
+          @keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
+        `,document.head.appendChild(s)}document.body.appendChild(l);let c=l.querySelector("#paywall-subscribe");c&&(c.onclick=()=>r.location.href=e.subscribeUrl||this.config.subscribeUrl);let i=l.querySelector("#paywall-close");i&&(i.onclick=()=>l.remove())},showPaywall:function(e){this.blurContent(),this.createPaywallModal(e||{type:"hard"})},hidePaywall:function(){let e=document.getElementById("paywall-protect-modal");e&&e.remove()},reload:function(){let e=document.getElementById("paywall-protect-modal");e&&e.remove(),this.start()}},a=document.currentScript||document.querySelector("script[data-site-id]");a&&a.dataset.siteId&&n.init({siteId:a.dataset.siteId,apiKey:a.dataset.apiKey,apiUrl:a.dataset.apiUrl,subscribeUrl:a.dataset.subscribeUrl,loginUrl:a.dataset.loginUrl,mode:a.dataset.mode}),r.PaywallProtect=n,typeof d!="undefined"&&d.exports&&(d.exports=n)})(typeof window!="undefined"?window:{})});export default y();

package/dist/paywall-widget.min.js

@@ -0,0 +1,32 @@
+var PaywallProtect=(()=>{var u=(r,n)=>()=>(n||r((n={exports:{}}).exports,n),n.exports);var p=(r,n,a)=>new Promise((e,t)=>{var o=i=>{try{c(a.next(i))}catch(s){t(s)}},l=i=>{try{c(a.throw(i))}catch(s){t(s)}},c=i=>i.done?e(i.value):Promise.resolve(i.value).then(o,l);c((a=a.apply(r,n)).next())});var y=u((g,d)=>{(function(r){"use strict";let n={version:"1.0.0",init:function(e){if(!e.siteId||!e.apiKey){console.error("[PaywallProtect] Missing siteId or apiKey");return}this.config={siteId:e.siteId,apiKey:e.apiKey,apiUrl:e.apiUrl||"",subscribeUrl:e.subscribeUrl||"/subscribe",loginUrl:e.loginUrl||"/login",mode:e.mode||"auto"},console.log("[PaywallProtect] Initializing...",{siteId:this.config.siteId}),document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>this.start()):this.start()},start:function(){if(this.config.mode==="never"){console.log("[PaywallProtect] Disabled");return}if(this.config.mode==="always"){this.blurContent(),this.createPaywallModal({type:"hard"});return}this.checkAccess()},generateFingerprint:function(){return{userAgent:navigator.userAgent,language:navigator.language,platform:navigator.platform,hardwareConcurrency:navigator.hardwareConcurrency||0,deviceMemory:navigator.deviceMemory||0,timezone:Intl.DateTimeFormat().resolvedOptions().timeZone,screen:{width:r.screen.width,height:r.screen.height,colorDepth:r.screen.colorDepth,pixelRatio:r.devicePixelRatio||1},timing:{pageLoadTime:Math.round(performance.now())},webdriver:navigator.webdriver||!1,canvas:this.getCanvasFingerprint(),webgl:this.getWebGLFingerprint(),touchSupport:"ontouchstart"in r,plugins:this.getPluginsList()}},getCanvasFingerprint:function(){try{let e=document.createElement("canvas"),t=e.getContext("2d");return t?(t.textBaseline="top",t.font="14px Arial",t.fillText("PaywallProtect",2,2),e.toDataURL().substring(0,100)):null}catch(e){return null}},getWebGLFingerprint:function(){try{let t=document.createElement("canvas").getContext("webgl");return t?{renderer:t.getParameter(t.RENDERER),vendor:t.getParameter(t.VENDOR)}:null}catch(e){return null}},getPluginsList:function(){try{return Array.from(navigator.plugins||[]).map(e=>e.name).slice(0,5)}catch(e){return[]}},checkAccess:function(){return p(this,null,function*(){try{let e=yield fetch(this.config.apiUrl+"/check-access",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({siteId:this.config.siteId,apiKey:this.config.apiKey,page:r.location.pathname,userAgent:navigator.userAgent,fingerprint:this.generateFingerprint(),referrer:document.referrer})});if(!e.ok){console.error("[PaywallProtect] API error:",e.status);return}let t=yield e.json();console.log("[PaywallProtect] Decision:",t),!t.allowed&&t.status==="blocked"?(this.blurContent(),this.createPaywallModal({type:"bot-blocked",message:t.reason})):t.showPaywall&&t.paywallConfig&&(this.blurContent(),this.createPaywallModal(t.paywallConfig))}catch(e){console.error("[PaywallProtect] Error:",e)}})},blurContent:function(){let t=document.querySelectorAll('.paywall-protected, [data-paywall="true"]');(t.length?t:[document.querySelector("main, article, .content")].filter(Boolean)).forEach(o=>{o.style.filter="blur(8px)",o.style.userSelect="none",o.style.pointerEvents="none"})},createPaywallModal:function(e){if(document.getElementById("paywall-protect-modal"))return;let t=e.type||"hard",o="";t==="hard"?o=`
+          <div class="paywall-icon">\u{1F512}</div>
+          <h2 id="paywall-title">${e.title||"Premium Content"}</h2>
+          <p>${e.message||"Subscribe to access this content."}</p>
+          <button id="paywall-subscribe" class="paywall-btn primary">Subscribe Now</button>
+          <p class="footer">Already a subscriber? <a href="${this.config.loginUrl}" id="paywall-login">Sign in</a></p>
+        `:t==="metered"?o=`
+          <div class="paywall-icon">\u{1F4CA}</div>
+          <h2 id="paywall-title">Free Article Limit Reached</h2>
+          <p>You've read <strong>${e.articlesRead||3} of ${e.freeLimit||3}</strong> free articles this month.</p>
+          <button id="paywall-subscribe" class="paywall-btn primary">Get Unlimited Access</button>
+          <button id="paywall-close" class="paywall-btn secondary">Maybe Later</button>
+        `:o=`
+          <div class="paywall-icon">\u{1F916}</div>
+          <h2 id="paywall-title">Access Denied</h2>
+          <p>${e.message||"Automated access is not permitted."}</p>
+        `;let l=document.createElement("div");if(l.id="paywall-protect-modal",l.innerHTML=`<div class="paywall-overlay"><div class="paywall-content">${o}</div></div>`,!document.getElementById("paywall-styles")){let s=document.createElement("style");s.id="paywall-styles",s.textContent=`
+          #paywall-protect-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999999;animation:fadeIn .3s}
+          .paywall-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px}
+          .paywall-content{background:#fff;border-radius:16px;padding:48px 40px;max-width:500px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:slideUp .3s}
+          .paywall-icon{font-size:64px;margin-bottom:24px}
+          #paywall-title{font-size:28px;font-weight:700;color:#1a1a1a;margin:0 0 16px 0}
+          .paywall-content p{font-size:16px;color:#666;line-height:1.6;margin:0 0 24px 0}
+          .paywall-btn{display:block;width:100%;padding:16px 32px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;margin-bottom:12px}
+          .paywall-btn.primary{background:#3b82f6;color:#fff}
+          .paywall-btn.primary:hover{background:#2563eb}
+          .paywall-btn.secondary{background:transparent;color:#666;border:2px solid #e5e7eb}
+          .footer{margin-top:24px;font-size:14px;color:#666}
+          .footer a{color:#3b82f6;text-decoration:none}
+          @keyframes fadeIn{from{opacity:0}to{opacity:1}}
+          @keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
+        `,document.head.appendChild(s)}document.body.appendChild(l);let c=l.querySelector("#paywall-subscribe");c&&(c.onclick=()=>r.location.href=e.subscribeUrl||this.config.subscribeUrl);let i=l.querySelector("#paywall-close");i&&(i.onclick=()=>l.remove())},showPaywall:function(e){this.blurContent(),this.createPaywallModal(e||{type:"hard"})},hidePaywall:function(){let e=document.getElementById("paywall-protect-modal");e&&e.remove()},reload:function(){let e=document.getElementById("paywall-protect-modal");e&&e.remove(),this.start()}},a=document.currentScript||document.querySelector("script[data-site-id]");a&&a.dataset.siteId&&n.init({siteId:a.dataset.siteId,apiKey:a.dataset.apiKey,apiUrl:a.dataset.apiUrl,subscribeUrl:a.dataset.subscribeUrl,loginUrl:a.dataset.loginUrl,mode:a.dataset.mode}),r.PaywallProtect=n,typeof d!="undefined"&&d.exports&&(d.exports=n)})(typeof window!="undefined"?window:{})});return y();})();

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "paywall-protect-widget", 
+  "version": "1.0.0",
+  "description": "PaywallProtect widget for bot detection and content protection",
+  "main": "dist/paywall-widget.min.js",
+  "module": "dist/paywall-widget.esm.js",
+  "types": "types/index.d.ts",
+  "files": [
+    "dist",
+    "types",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "npm run build:iife && npm run build:esm",
+    "build:iife": "esbuild src/index.js --bundle --minify --target=es2015 --format=iife --global-name=PaywallProtect --outfile=dist/paywall-widget.min.js",
+    "build:esm": "esbuild src/index.js --bundle --minify --target=es2015 --format=esm --outfile=dist/paywall-widget.esm.js",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": ["paywall", "bot-detection"],
+  "author": "PaywallProtect",
+  "license": "MIT",
+  "devDependencies": {
+    "esbuild": "^0.19.0"
+  }
+}

package/types/index.d.ts

@@ -0,0 +1,35 @@
+export interface PaywallProtectConfig {
+  siteId: string;
+  apiKey: string;
+  apiUrl?: string;
+  subscribeUrl?: string;
+  loginUrl?: string;
+  mode?: 'auto' | 'always' | 'never';
+}
+
+export interface PaywallConfig {
+  type: 'hard' | 'metered' | 'bot-blocked';
+  title?: string;
+  message?: string;
+  articlesRead?: number;
+  freeLimit?: number;
+  subscribeUrl?: string;
+  loginUrl?: string;
+}
+
+export interface PaywallProtect {
+  version: string;
+  init(config: PaywallProtectConfig): void;
+  showPaywall(config?: PaywallConfig): void;
+  hidePaywall(): void;
+  reload(): void;
+}
+
+declare global {
+  interface Window {
+    PaywallProtect: PaywallProtect;
+  }
+}
+
+export const PaywallProtect: PaywallProtect;
+export default PaywallProtect;