@magicpages/pagemoji 0.2.0 → 0.2.1

package/dist/mount.d.ts

@@ -7,7 +7,8 @@ export interface MountPoint {
  * `.gh-content` is the post body in Ghost's official themes, even on a members-only post that
  * shows only a signup prompt. Elsewhere it's the element with the most paragraphs as direct
  * children, which holds for Ghost's `{{content}}` and WordPress's `the_content()` whatever the
- * theme calls the wrapper.
+ * theme calls the wrapper. A short post ties with banners and calls to action that hold one
+ * paragraph too, so a tie goes to the element in an `<article>`, then in `<main>`.
  */
 export declare function findPostBody(root: Document): Element | null;
 /** `auto`, or `before:`, `after:`, `prepend:` or `append:` and a CSS selector. */

package/dist/mount.js

@@ -4,7 +4,8 @@ const POST_PAGE = 'body.post-template, body.single-post';
  * `.gh-content` is the post body in Ghost's official themes, even on a members-only post that
  * shows only a signup prompt. Elsewhere it's the element with the most paragraphs as direct
  * children, which holds for Ghost's `{{content}}` and WordPress's `the_content()` whatever the
- * theme calls the wrapper.
+ * theme calls the wrapper. A short post ties with banners and calls to action that hold one
+ * paragraph too, so a tie goes to the element in an `<article>`, then in `<main>`.
  */
 export function findPostBody(root) {
     if (!root.querySelector(POST_PAGE))
@@ -13,21 +14,32 @@ export function findPostBody(root) {
     if (ghost)
         return ghost;
     const counts = new Map();
-    let best = null;
-    let bestCount = 0;
     for (const paragraph of root.querySelectorAll('body p')) {
         const parent = paragraph.parentElement;
         if (!parent || parent.closest('header, footer, nav, aside, form'))
             continue;
-        const count = (counts.get(parent) ?? 0) + 1;
-        counts.set(parent, count);
-        if (count > bestCount) {
+        counts.set(parent, (counts.get(parent) ?? 0) + 1);
+    }
+    let best = null;
+    let bestCount = 0;
+    let bestLandmark = -1;
+    for (const [parent, count] of counts) {
+        if (count < bestCount)
+            continue;
+        const rank = landmark(parent);
+        if (count > bestCount || rank > bestLandmark) {
             best = parent;
             bestCount = count;
+            bestLandmark = rank;
         }
     }
     return best;
 }
+function landmark(element) {
+    if (element.closest('article'))
+        return 2;
+    return element.closest('main') ? 1 : 0;
+}
 /** `auto`, or `before:`, `after:`, `prepend:` or `append:` and a CSS selector. */
 export function resolveMount(spec, root) {
     if (spec === 'auto') {

package/dist/pagemoji.js

@@ -1,4 +1,4 @@
-(function(){"use strict";const w=/^[A-Za-z0-9._:-]{1,200}$/;function S(a){return w.test(a)}function m(a){const t=a.toLowerCase().replace(/\.$/,"");return t.startsWith("www.")?t.slice(4):t}function A(a,t){const e=m(a.hostname);return t?{host:e,key:`id:${t}`}:{host:e,key:a.pathname.replace(/\/+$/,"")||"/"}}const k=["❤️","👏","💡"],g={credentials:"omit",referrerPolicy:"strict-origin"},x=`
+(function(){"use strict";const w=/^[A-Za-z0-9._:-]{1,200}$/;function S(a){return w.test(a)}function m(a){const t=a.toLowerCase().replace(/\.$/,"");return t.startsWith("www.")?t.slice(4):t}function k(a,t){const e=m(a.hostname);return t?{host:e,key:`id:${t}`}:{host:e,key:a.pathname.replace(/\/+$/,"")||"/"}}const A=["❤️","👏","💡"],g={credentials:"omit",referrerPolicy:"strict-origin"},x=`
 :host {
   --_accent: var(--pagemoji-accent, var(--ghost-accent-color, currentColor));
   display: block;
@@ -48,4 +48,4 @@ button:focus-visible { outline: 2px solid var(--_accent); outline-offset: 2px; }
   .g { transition: transform 0.15s ease-out; }
   button:hover .g { transform: scale(1.15); }
 }
-`;let b;function y(a){try{return new URL(a,document.baseURI)}catch{return null}}const v=6;class u extends HTMLElement{static#i=[];#p=this.attachShadow({mode:"open"});#n="";#e=null;#o=null;#u="";#s=[];#r=new Map;#t={};#a=new Set;#c=new Set;connectedCallback(){if(this.#e)return;const t=y(this.getAttribute("api")??b??"");if(!t)return;this.#n=t.href.endsWith("/")?t.href:`${t.href}/`;const e=new URL(location.href);let s=e;const r=this.getAttribute("url")??document.querySelector('link[rel="canonical"]')?.href,o=r?y(r):null;o&&m(o.hostname)===m(e.hostname)&&(s=o);const n=this.getAttribute("page");this.#o=n&&S(n)?n:null,this.#e=A(s,this.#o),this.#u=e.origin+s.pathname;const i=new Set((this.getAttribute("emojis")??"").split(/\s+/).filter(Boolean));this.#s=i.size?[...i].slice(0,5):k,u.#i.push(this)===1&&queueMicrotask(()=>void u.#d())}static async#d(){const t=u.#i;u.#i=[];const e=new Map;for(const s of t){const r=[s.#n,s.#e?.host,...s.#s].join(" ");let o=e.get(r);o||e.set(r,o=[]),o.push(s)}await Promise.all([...e.values()].map(s=>u.#h(s)))}static async#h(t){const[e]=t,s=e?e.#e?.host:void 0;if(!e||!s)return;const r=[...new Set(t.map(o=>o.#e?.key??""))];for(let o=0;o<r.length;o+=100){const n=new URLSearchParams({host:s});for(const i of r.slice(o,o+100))n.append("key",i);for(const i of e.#s)n.append("emoji",i);try{const i=await fetch(new URL(`v1/counts?${n}`,e.#n),g);if(!i.ok)continue;const{counts:c}=await i.json();for(const l of t){const h=l.#e?.key??"";h in c&&l.#m(c[h]??{})}}catch{}}}#m(t){this.#t=t,this.#r.size===0&&this.#f(),this.#l()}#f(){const t=this.hasAttribute("readonly"),e=document.createElement("div");e.className="r",e.setAttribute("part","list");const s=this.getAttribute("label")?.trim();if(s){const o=document.createElement("span");o.className="l",o.setAttribute("part","label"),o.textContent=s,e.append(o)}for(const o of this.#s){const n=document.createElement(t?"span":"button"),i=document.createElement("span"),c=document.createElement("span"),l=document.createElement("span");i.className="e",c.className="g",c.setAttribute("part","emoji"),l.className="c",l.setAttribute("part","count"),c.textContent=o,i.append(c),n.append(i,l),n instanceof HTMLButtonElement?(n.type="button",n.addEventListener("click",()=>void this.#b(o))):(n.className="i",n.setAttribute("part","item")),this.#r.set(o,{element:n,burst:i,glyph:c,count:l}),e.append(n)}const r=document.createElement("style");r.textContent=x,this.#p.replaceChildren(r,e)}#l(){const t=this.hasAttribute("readonly"),e=new Intl.NumberFormat(void 0,{notation:"compact"});for(const[s,{element:r,count:o}]of this.#r){const n=this.#t[s]??0;if(o.textContent=n>0?e.format(n):"",t)r.hidden=n===0;else{const i=this.#a.has(s);r.setAttribute("aria-pressed",String(i)),r.setAttribute("part",i?"button pressed":"button")}}}#g(t,e){const s=this.#r.get(t);if(!s||!window.matchMedia?.("(prefers-reduced-motion: no-preference)").matches)return;const{burst:r,glyph:o,count:n}=s;for(const c of o.getAnimations())c.cancel();if(o.animate({transform:e?["scale(1)","scale(1.4)","scale(0.92)","scale(1)"]:["scale(1)","scale(0.8)","scale(1)"]},{duration:e?400:200,easing:"ease-out"}),n.textContent&&n.animate({transform:[`translateY(${e?.4:-.4}em)`,"none"],opacity:[0,1]},{duration:200,easing:"ease-out"}),!e)return;const i=Math.random();for(let c=0;c<v;c++){const l=(c+i)/v*2*Math.PI,h=1.3+Math.random()*.5,p=document.createElement("span");p.className="p",p.textContent=t,p.setAttribute("aria-hidden","true"),r.append(p),p.animate({transform:["scale(0.6)",`translate(${Math.cos(l)*h}em, ${Math.sin(l)*h}em) scale(0.3)`],opacity:[1,1,0]},{duration:450,easing:"cubic-bezier(0.2, 0.7, 0.3, 1)"}).onfinish=()=>p.remove()}}async#b(t){if(this.#c.has(t))return;this.#c.add(t);const e=!this.#a.has(t),s=this.#t[t]??0,r=n=>{n?this.#a.add(t):this.#a.delete(t)};r(e),this.#t={...this.#t,[t]:Math.max(0,s+(e?1:-1))},this.#l(),this.#g(t,e);const o={url:this.#u,emoji:t,action:e?"add":"remove",...this.#o?{page:this.#o}:{}};try{const n=await fetch(new URL("v1/reactions",this.#n),{...g,method:"POST",headers:{"content-type":"text/plain;charset=UTF-8"},body:JSON.stringify(o)});if(!n.ok)throw new Error(`HTTP ${n.status}`);const i=await n.json();this.#t=i.counts}catch{r(!e),this.#t={...this.#t,[t]:s}}finally{this.#c.delete(t),this.#l()}}}function M(a={}){a.api&&(b=a.api),customElements.get("pagemoji-reactions")||customElements.define("pagemoji-reactions",u)}const _="body.post-template, body.single-post";function T(a){if(!a.querySelector(_))return null;const t=a.querySelector(".gh-content");if(t)return t;const e=new Map;let s=null,r=0;for(const o of a.querySelectorAll("body p")){const n=o.parentElement;if(!n||n.closest("header, footer, nav, aside, form"))continue;const i=(e.get(n)??0)+1;e.set(n,i),i>r&&(s=n,r=i)}return s}function j(a,t){if(a==="auto"){const n=T(t);return n?{target:n,where:"append"}:null}const e=a.match(/^(before|after|prepend|append):(.+)$/);if(!e)return null;const[,s="",r=""]=e,o=t.querySelector(r);return o&&C(s)?{target:o,where:s}:null}function C(a){return a==="before"||a==="after"||a==="prepend"||a==="append"}const f=document.currentScript,d=f instanceof HTMLScriptElement&&f.src?f:null;M(d?{api:new URL("../",d.src).href}:{});const E=d?.dataset.mount;if(d&&E){const a=()=>{const t=j(E,document);if(!t)return;const e=document.createElement("pagemoji-reactions");for(const s of["emojis","page","variant","label"]){const r=d.dataset[s];r&&e.setAttribute(s,r)}t.target[t.where](e)};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",a):a()}})();
+`;let b;function y(a){try{return new URL(a,document.baseURI)}catch{return null}}const v=6;class u extends HTMLElement{static#i=[];#p=this.attachShadow({mode:"open"});#n="";#e=null;#o=null;#u="";#s=[];#r=new Map;#t={};#a=new Set;#c=new Set;connectedCallback(){if(this.#e)return;const t=y(this.getAttribute("api")??b??"");if(!t)return;this.#n=t.href.endsWith("/")?t.href:`${t.href}/`;const e=new URL(location.href);let s=e;const i=this.getAttribute("url")??document.querySelector('link[rel="canonical"]')?.href,o=i?y(i):null;o&&m(o.hostname)===m(e.hostname)&&(s=o);const n=this.getAttribute("page");this.#o=n&&S(n)?n:null,this.#e=k(s,this.#o),this.#u=e.origin+s.pathname;const r=new Set((this.getAttribute("emojis")??"").split(/\s+/).filter(Boolean));this.#s=r.size?[...r].slice(0,5):A,u.#i.push(this)===1&&queueMicrotask(()=>void u.#d())}static async#d(){const t=u.#i;u.#i=[];const e=new Map;for(const s of t){const i=[s.#n,s.#e?.host,...s.#s].join(" ");let o=e.get(i);o||e.set(i,o=[]),o.push(s)}await Promise.all([...e.values()].map(s=>u.#h(s)))}static async#h(t){const[e]=t,s=e?e.#e?.host:void 0;if(!e||!s)return;const i=[...new Set(t.map(o=>o.#e?.key??""))];for(let o=0;o<i.length;o+=100){const n=new URLSearchParams({host:s});for(const r of i.slice(o,o+100))n.append("key",r);for(const r of e.#s)n.append("emoji",r);try{const r=await fetch(new URL(`v1/counts?${n}`,e.#n),g);if(!r.ok)continue;const{counts:c}=await r.json();for(const l of t){const h=l.#e?.key??"";h in c&&l.#m(c[h]??{})}}catch{}}}#m(t){this.#t=t,this.#r.size===0&&this.#f(),this.#l()}#f(){const t=this.hasAttribute("readonly"),e=document.createElement("div");e.className="r",e.setAttribute("part","list");const s=this.getAttribute("label")?.trim();if(s){const o=document.createElement("span");o.className="l",o.setAttribute("part","label"),o.textContent=s,e.append(o)}for(const o of this.#s){const n=document.createElement(t?"span":"button"),r=document.createElement("span"),c=document.createElement("span"),l=document.createElement("span");r.className="e",c.className="g",c.setAttribute("part","emoji"),l.className="c",l.setAttribute("part","count"),c.textContent=o,r.append(c),n.append(r,l),n instanceof HTMLButtonElement?(n.type="button",n.addEventListener("click",()=>void this.#b(o))):(n.className="i",n.setAttribute("part","item")),this.#r.set(o,{element:n,burst:r,glyph:c,count:l}),e.append(n)}const i=document.createElement("style");i.textContent=x,this.#p.replaceChildren(i,e)}#l(){const t=this.hasAttribute("readonly"),e=new Intl.NumberFormat(void 0,{notation:"compact"});for(const[s,{element:i,count:o}]of this.#r){const n=this.#t[s]??0;if(o.textContent=n>0?e.format(n):"",t)i.hidden=n===0;else{const r=this.#a.has(s);i.setAttribute("aria-pressed",String(r)),i.setAttribute("part",r?"button pressed":"button")}}}#g(t,e){const s=this.#r.get(t);if(!s||!window.matchMedia?.("(prefers-reduced-motion: no-preference)").matches)return;const{burst:i,glyph:o,count:n}=s;for(const c of o.getAnimations())c.cancel();if(o.animate({transform:e?["scale(1)","scale(1.4)","scale(0.92)","scale(1)"]:["scale(1)","scale(0.8)","scale(1)"]},{duration:e?400:200,easing:"ease-out"}),n.textContent&&n.animate({transform:[`translateY(${e?.4:-.4}em)`,"none"],opacity:[0,1]},{duration:200,easing:"ease-out"}),!e)return;const r=Math.random();for(let c=0;c<v;c++){const l=(c+r)/v*2*Math.PI,h=1.3+Math.random()*.5,p=document.createElement("span");p.className="p",p.textContent=t,p.setAttribute("aria-hidden","true"),i.append(p),p.animate({transform:["scale(0.6)",`translate(${Math.cos(l)*h}em, ${Math.sin(l)*h}em) scale(0.3)`],opacity:[1,1,0]},{duration:450,easing:"cubic-bezier(0.2, 0.7, 0.3, 1)"}).onfinish=()=>p.remove()}}async#b(t){if(this.#c.has(t))return;this.#c.add(t);const e=!this.#a.has(t),s=this.#t[t]??0,i=n=>{n?this.#a.add(t):this.#a.delete(t)};i(e),this.#t={...this.#t,[t]:Math.max(0,s+(e?1:-1))},this.#l(),this.#g(t,e);const o={url:this.#u,emoji:t,action:e?"add":"remove",...this.#o?{page:this.#o}:{}};try{const n=await fetch(new URL("v1/reactions",this.#n),{...g,method:"POST",headers:{"content-type":"text/plain;charset=UTF-8"},body:JSON.stringify(o)});if(!n.ok)throw new Error(`HTTP ${n.status}`);const r=await n.json();this.#t=r.counts}catch{i(!e),this.#t={...this.#t,[t]:s}}finally{this.#c.delete(t),this.#l()}}}function M(a={}){a.api&&(b=a.api),customElements.get("pagemoji-reactions")||customElements.define("pagemoji-reactions",u)}const _="body.post-template, body.single-post";function T(a){if(!a.querySelector(_))return null;const t=a.querySelector(".gh-content");if(t)return t;const e=new Map;for(const n of a.querySelectorAll("body p")){const r=n.parentElement;!r||r.closest("header, footer, nav, aside, form")||e.set(r,(e.get(r)??0)+1)}let s=null,i=0,o=-1;for(const[n,r]of e){if(r<i)continue;const c=j(n);(r>i||c>o)&&(s=n,i=r,o=c)}return s}function j(a){return a.closest("article")?2:a.closest("main")?1:0}function L(a,t){if(a==="auto"){const n=T(t);return n?{target:n,where:"append"}:null}const e=a.match(/^(before|after|prepend|append):(.+)$/);if(!e)return null;const[,s="",i=""]=e,o=t.querySelector(i);return o&&C(s)?{target:o,where:s}:null}function C(a){return a==="before"||a==="after"||a==="prepend"||a==="append"}const f=document.currentScript,d=f instanceof HTMLScriptElement&&f.src?f:null;M(d?{api:new URL("../",d.src).href}:{});const E=d?.dataset.mount;if(d&&E){const a=()=>{const t=L(E,document);if(!t)return;const e=document.createElement("pagemoji-reactions");for(const s of["emojis","page","variant","label"]){const i=d.dataset[s];i&&e.setAttribute(s,i)}t.target[t.where](e)};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",a):a()}})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magicpages/pagemoji",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Emoji reactions for any web page. No cookies, no tracking.",
   "license": "MIT",
   "repository": {