@magicpages/pagemoji 0.1.1 → 0.2.0

package/dist/element.js

@@ -11,15 +11,15 @@ const STYLES = `
   --_accent: var(--pagemoji-accent, var(--ghost-accent-color, currentColor));
   display: block;
   color: var(--pagemoji-fg, inherit);
-  font-size: var(--pagemoji-font-size, 0.9375rem);
+  font-size: var(--pagemoji-font-size, 0.875em);
 }
 :host([hidden]) { display: none; }
 .r {
   display: flex; flex-wrap: wrap; align-items: center;
-  gap: var(--pagemoji-gap, 0.5rem);
+  gap: var(--pagemoji-gap, 0.5em);
   justify-content: var(--pagemoji-justify, flex-start);
 }
-.l { margin-inline-end: 0.25rem; }
+.l { margin-inline-end: 0.25em; }
 button, .i {
   display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
   font: inherit; color: inherit; line-height: 1;

package/dist/embed.d.ts

@@ -34,8 +34,8 @@ export interface EmbedOptions {
     variant?: WidgetVariant;
     /** Text shown before the buttons, e.g. "What did you think?". Not used on cards. */
     label?: string;
-    /** Where `inject` mounts the widget. Defaults to Ghost's post body. */
+    /** Where `inject` mounts the widget. Defaults to `auto`: after the post body, on posts only. */
     mount?: string;
 }
-export declare const DEFAULT_MOUNT = "after:.gh-content";
+export declare const DEFAULT_MOUNT = "auto";
 export declare function embedCode(target: EmbedTarget, options: EmbedOptions): string;

package/dist/embed.js

@@ -31,7 +31,7 @@ export function parseEmojis(input) {
     }
     return selection;
 }
-export const DEFAULT_MOUNT = 'after:.gh-content';
+export const DEFAULT_MOUNT = 'auto';
 function escape(value) {
     return value
         .replaceAll('&', '&')

package/dist/mount.d.ts

@@ -0,0 +1,14 @@
+export type Placement = 'before' | 'after' | 'prepend' | 'append';
+export interface MountPoint {
+    target: Element;
+    where: Placement;
+}
+/**
+ * `.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.
+ */
+export declare function findPostBody(root: Document): Element | null;
+/** `auto`, or `before:`, `after:`, `prepend:` or `append:` and a CSS selector. */
+export declare function resolveMount(spec: string, root: Document): MountPoint | null;

package/dist/mount.js

@@ -0,0 +1,48 @@
+/** Ghost's `{{body_class}}` and WordPress's `body_class()` mark single posts with these. */
+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.
+ */
+export function findPostBody(root) {
+    if (!root.querySelector(POST_PAGE))
+        return null;
+    const ghost = root.querySelector('.gh-content');
+    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) {
+            best = parent;
+            bestCount = count;
+        }
+    }
+    return best;
+}
+/** `auto`, or `before:`, `after:`, `prepend:` or `append:` and a CSS selector. */
+export function resolveMount(spec, root) {
+    if (spec === 'auto') {
+        // Inside, not after: themes lay the post body out as a grid, and outside it the widget
+        // would leave the text column.
+        const target = findPostBody(root);
+        return target ? { target, where: 'append' } : null;
+    }
+    const match = spec.match(/^(before|after|prepend|append):(.+)$/);
+    if (!match)
+        return null;
+    const [, where = '', selector = ''] = match;
+    const target = root.querySelector(selector);
+    return target && isPlacement(where) ? { target, where } : null;
+}
+function isPlacement(value) {
+    return value === 'before' || value === 'after' || value === 'prepend' || value === 'append';
+}

package/dist/pagemoji.js

@@ -1,17 +1,17 @@
-(function(){"use strict";const w=/^[A-Za-z0-9._:-]{1,200}$/;function S(i){return w.test(i)}function m(i){const t=i.toLowerCase().replace(/\.$/,"");return t.startsWith("www.")?t.slice(4):t}function k(i,t){const e=m(i.hostname);return t?{host:e,key:`id:${t}`}:{host:e,key:i.pathname.replace(/\/+$/,"")||"/"}}const A=["❤️","👏","💡"],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 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=`
 :host {
   --_accent: var(--pagemoji-accent, var(--ghost-accent-color, currentColor));
   display: block;
   color: var(--pagemoji-fg, inherit);
-  font-size: var(--pagemoji-font-size, 0.9375rem);
+  font-size: var(--pagemoji-font-size, 0.875em);
 }
 :host([hidden]) { display: none; }
 .r {
   display: flex; flex-wrap: wrap; align-items: center;
-  gap: var(--pagemoji-gap, 0.5rem);
+  gap: var(--pagemoji-gap, 0.5em);
   justify-content: var(--pagemoji-justify, flex-start);
 }
-.l { margin-inline-end: 0.25rem; }
+.l { margin-inline-end: 0.25em; }
 button, .i {
   display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
   font: inherit; color: inherit; line-height: 1;
@@ -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 v(i){try{return new URL(i,document.baseURI)}catch{return null}}const y=6;class p extends HTMLElement{static#i=[];#u=this.attachShadow({mode:"open"});#n="";#e=null;#s=null;#p="";#o=[];#a=new Map;#t={};#r=new Set;#c=new Set;connectedCallback(){if(this.#e)return;const t=v(this.getAttribute("api")??b??"");if(!t)return;this.#n=t.href.endsWith("/")?t.href:`${t.href}/`;const e=new URL(location.href);let o=e;const a=this.getAttribute("url")??document.querySelector('link[rel="canonical"]')?.href,n=a?v(a):null;n&&m(n.hostname)===m(e.hostname)&&(o=n);const s=this.getAttribute("page");this.#s=s&&S(s)?s:null,this.#e=k(o,this.#s),this.#p=e.origin+o.pathname;const r=new Set((this.getAttribute("emojis")??"").split(/\s+/).filter(Boolean));this.#o=r.size?[...r].slice(0,5):A,p.#i.push(this)===1&&queueMicrotask(()=>void p.#d())}static async#d(){const t=p.#i;p.#i=[];const e=new Map;for(const o of t){const a=[o.#n,o.#e?.host,...o.#o].join(" ");let n=e.get(a);n||e.set(a,n=[]),n.push(o)}await Promise.all([...e.values()].map(o=>p.#h(o)))}static async#h(t){const[e]=t,o=e?e.#e?.host:void 0;if(!e||!o)return;const a=[...new Set(t.map(n=>n.#e?.key??""))];for(let n=0;n<a.length;n+=100){const s=new URLSearchParams({host:o});for(const r of a.slice(n,n+100))s.append("key",r);for(const r of e.#o)s.append("emoji",r);try{const r=await fetch(new URL(`v1/counts?${s}`,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.#a.size===0&&this.#f(),this.#l()}#f(){const t=this.hasAttribute("readonly"),e=document.createElement("div");e.className="r",e.setAttribute("part","list");const o=this.getAttribute("label")?.trim();if(o){const n=document.createElement("span");n.className="l",n.setAttribute("part","label"),n.textContent=o,e.append(n)}for(const n of this.#o){const s=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=n,r.append(c),s.append(r,l),s instanceof HTMLButtonElement?(s.type="button",s.addEventListener("click",()=>void this.#b(n))):(s.className="i",s.setAttribute("part","item")),this.#a.set(n,{element:s,burst:r,glyph:c,count:l}),e.append(s)}const a=document.createElement("style");a.textContent=x,this.#u.replaceChildren(a,e)}#l(){const t=this.hasAttribute("readonly"),e=new Intl.NumberFormat(void 0,{notation:"compact"});for(const[o,{element:a,count:n}]of this.#a){const s=this.#t[o]??0;if(n.textContent=s>0?e.format(s):"",t)a.hidden=s===0;else{const r=this.#r.has(o);a.setAttribute("aria-pressed",String(r)),a.setAttribute("part",r?"button pressed":"button")}}}#g(t,e){const o=this.#a.get(t);if(!o||!window.matchMedia?.("(prefers-reduced-motion: no-preference)").matches)return;const{burst:a,glyph:n,count:s}=o;for(const c of n.getAnimations())c.cancel();if(n.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"}),s.textContent&&s.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<y;c++){const l=(c+r)/y*2*Math.PI,h=1.3+Math.random()*.5,u=document.createElement("span");u.className="p",u.textContent=t,u.setAttribute("aria-hidden","true"),a.append(u),u.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=()=>u.remove()}}async#b(t){if(this.#c.has(t))return;this.#c.add(t);const e=!this.#r.has(t),o=this.#t[t]??0,a=s=>{s?this.#r.add(t):this.#r.delete(t)};a(e),this.#t={...this.#t,[t]:Math.max(0,o+(e?1:-1))},this.#l(),this.#g(t,e);const n={url:this.#p,emoji:t,action:e?"add":"remove",...this.#s?{page:this.#s}:{}};try{const s=await fetch(new URL("v1/reactions",this.#n),{...g,method:"POST",headers:{"content-type":"text/plain;charset=UTF-8"},body:JSON.stringify(n)});if(!s.ok)throw new Error(`HTTP ${s.status}`);const r=await s.json();this.#t=r.counts}catch{a(!e),this.#t={...this.#t,[t]:o}}finally{this.#c.delete(t),this.#l()}}}function M(i={}){i.api&&(b=i.api),customElements.get("pagemoji-reactions")||customElements.define("pagemoji-reactions",p)}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?.match(/^(before|after|prepend|append):(.+)$/);if(d&&E){const[,i,t=""]=E,e=()=>{const o=document.querySelector(t);if(!o)return;const a=document.createElement("pagemoji-reactions");for(const n of["emojis","page","variant","label"]){const s=d.dataset[n];s&&a.setAttribute(n,s)}i==="before"?o.before(a):i==="after"?o.after(a):i==="prepend"?o.prepend(a):o.append(a)};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",e):e()}})();
+`;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()}})();

package/package.json

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