Build share links from the live address and count visits on either host

GA only loaded on causalinferencelab.github.io, so moving the hub to
causalinference.pseudo-lab.com would have stopped all measurement. GA now
accepts both hosts, and copied links and share cards use the address the
hub is served from. The forum calendar UID stays as is so existing
calendar entries are not duplicated.

Author: jsshin2022

assets/js/ga.js

@@ -6,7 +6,8 @@
      (Until November 2026 the hub loaded the web book's tag, G-BEBVKYH8HL, which sent every page to both the
      web book's property and the hub's first stream, G-C5V0X2SGD3. That stream now only keeps the history.) */
   const ID = "G-CS9K0E86LR";
-  if (location.hostname === "causalinferencelab.github.io") {
+  /* counted on the live hub only: its github.io address and the pseudo-lab.com address it can move to */
+  if (["causalinferencelab.github.io", "causalinference.pseudo-lab.com"].includes(location.hostname)) {
     const s = document.createElement("script");
     s.async = true;
     s.src = `https://www.googletagmanager.com/gtag/js?id=${ID}`;

assets/js/helper.js

@@ -8,7 +8,7 @@
   const esc = (s) => String(s ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
   const norm = (s) => String(s || "").toLowerCase().replace(/[\s·\-_/()?!.,~'"]/g, "");
   const track = (n, p) => window.hubTrack && window.hubTrack(n, p);
-  const SITE = "https://causalinferencelab.github.io/";
+  const SITE = `${window.hubSite || "https://causalinferencelab.github.io"}/`;
   const BOOK = SITE + "Causal-Inference-with-Python/";
   const SAID = "cil-helper-said", QUIET = "cil-helper-quiet";
   const reduced = () => matchMedia("(prefers-reduced-motion: reduce)").matches;

assets/js/hub.js

@@ -21,6 +21,8 @@
 
   const esc = (s) => String(s ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
   const fmt = (n) => Number(n).toLocaleString("ko-KR");
+  /* the address printed on share cards: the live hub's host (track.js sets hubSite) */
+  const siteHost = () => { try { return new URL(window.hubSite).host; } catch (e) { return "causalinferencelab.github.io"; } };
   const $ = (sel, root = document) => root.querySelector(sel);
   const dot = (d) => esc(String(d ?? "").replace(/-/g, "."));
   /* Data files come from pull requests: links must be http(s) or a site path, ids plain tokens,
@@ -647,7 +649,7 @@
         <p class="fc-tier">${esc(lv.tier || lv.name)}</p>
         ${interest ? `<p class="fc-in"><span>관심</span>${esc(interest)}</p>` : ""}
         <label class="fc-name"><span>이름이나 닉네임 (선택, 저장하지 않음)</span><input type="text" maxlength="16" autocomplete="nickname" placeholder="예: 진수"></label>
-        <p class="fc-foot">인과추론 Hub에서 3분 진단 · causalinferencelab.github.io</p>
+        <p class="fc-foot">인과추론 Hub에서 3분 진단 · ${esc(siteHost())}</p>
       </div>
       <p class="lt-sub">같은 레벨이나 같은 관심 분야인 사람과 이야기를 시작해 보세요. 화면을 켜 둔 채 보여 주면 됩니다.</p></div>
       <div class="sh-foot"><button type="button" class="btn ghost" data-forum-back>결과로 돌아가기</button><button type="button" class="btn" data-goto-level="${lv.id}" data-test-go>${LV(lv.id)} 코스로 이동</button></div>`;
@@ -1628,7 +1630,7 @@
     if (name) { c.fillStyle = "#fff"; c.font = font(700, 34); c.fillText(name, 80, H - 104); }
     c.fillStyle = "rgba(255,255,255,.7)"; c.font = font(500, 24);
     const d = new Date(), date = `${d.getFullYear()}.${pad2(d.getMonth() + 1)}.${pad2(d.getDate())}`;
-    c.fillText(`${date} · causalinferencelab.github.io`, 80, H - 60);
+    c.fillText(`${date} · ${siteHost()}`, 80, H - 60);
     const mark = $(".banner-mark");
     if (mark && mark.complete && mark.naturalWidth) c.drawImage(mark, W - 300, 70, 210, 210);
   }
@@ -1672,7 +1674,7 @@
       c.fillStyle = "#fff"; c.font = font(700, 24); c.fillText(m.name, x + 56, y + 9);
     });
     c.fillStyle = "rgba(255,255,255,.7)"; c.font = font(500, 22);
-    c.fillText(`causalinferencelab.github.io/builders/${info.slug || ""}`, 80, H - 56);
+    c.fillText(`${siteHost()}/builders/${info.slug || ""}`, 80, H - 56);
     drawMedal(c, 930, 330, 150, t, p.cohorts.length);
   }
   async function openMedalCard(name) {

assets/js/library.js

@@ -180,7 +180,7 @@
   function projectsHTML(list) {
     if (!list.length) return "";
     return `<section class="lib-pjs" aria-labelledby="lib-pjs-h"><h2 class="lib-pjs-h" id="lib-pjs-h">팀 프로젝트<span>저장소째 살펴보기</span></h2><ul>${list.map((r) => {
-      const url = r.site ? (/^https?:/.test(r.site) ? r.site : `https://causalinferencelab.github.io/${String(r.site).replace(/^\//, "")}`) : `https://github.com/CausalInferenceLab/${r.repo}`;
+      const url = r.site ? (/^https?:/.test(r.site) ? r.site : `${window.hubSite}/${String(r.site).replace(/^\//, "")}`) : `https://github.com/CausalInferenceLab/${r.repo}`;
       const lv = /^L[0-4]$/.test(r.level || "") ? `<b class="lib-lv lv-${r.level}">${r.level} ${LV_NAME[r.level]}</b>` : "";
       return `<li class="lib-pj" id="pj-${esc(r.repo)}" tabindex="-1"><a href="${esc(url)}" target="_blank" rel="noopener" data-event="library_click" data-event-params='${esc(JSON.stringify({ topic: "project", kind: "project", repo: r.repo, target: "project" }))}'>
         <span class="lib-pj-t">${esc(r.title)}<span class="lib-out" aria-hidden="true"> ↗</span></span><span class="lib-pj-s">${esc(r.summary || "")}</span><span class="lib-src">${lv}${r.site ? "사이트" : "GitHub"} · ${esc(r.repo)}</span></a></li>`;
@@ -232,7 +232,7 @@
       const terms = termsFor(t).slice(0, 3);
       return `${head}<article class="lib-topic s-${esc(t.shelf)}" id="${esc(t.id)}" tabindex="-1" aria-labelledby="t-${esc(t.id)}">
         <header><h3 id="t-${esc(t.id)}">${esc(t.name)}</h3><span class="lib-en" lang="en">${esc(t.en)}</span>
-          <button type="button" class="lib-link" data-copy="${esc(`https://causalinferencelab.github.io/library.html#${t.id}`)}" data-share="library_topic" aria-label="${esc(t.name)} 링크 복사">링크 복사</button></header>
+          <button type="button" class="lib-link" data-copy="${esc(`${window.hubSite}/library.html#${t.id}`)}" data-share="library_topic" aria-label="${esc(t.name)} 링크 복사">링크 복사</button></header>
         <p class="lib-about">${esc(t.about)}</p>
         ${terms.length ? `<p class="lib-terms"><span>먼저 알아 둘 용어</span>${terms.map((x) => `<a href="#${esc(x.id)}" data-term="${esc(x.id)}">${esc(x.ko)}</a>`).join("")}</p>` : ""}
         ${groupsHTML(v.items, t)}
@@ -294,7 +294,7 @@
         <section class="gl-col"><h4>팀 자료에서</h4>${team ? `<ul class="gl-team">${team}</ul>` : '<p class="gl-none">이 용어를 주로 다룬 팀 자료를 아직 찾지 못했습니다.</p>'}</section>
       </div>
       <p class="gl-acts">${tp ? `<span class="gl-tps"><span>자료실 주제</span>${tp}</span>` : ""}
-        <span class="gl-btns"><button type="button" class="lib-link" data-copy="${esc(`https://causalinferencelab.github.io/library.html#${x.id}`)}" data-share="library_term" aria-label="${esc(x.ko)} 링크 복사">링크 복사</button>
+        <span class="gl-btns"><button type="button" class="lib-link" data-copy="${esc(`${window.hubSite}/library.html#${x.id}`)}" data-share="library_term" aria-label="${esc(x.ko)} 링크 복사">링크 복사</button>
         <button type="button" class="lib-link" data-helper-ask="${esc(x.ko)} 알려 주세요">Pseudo에게 묻기</button>
         <a class="lib-link" href="${BOOK}glossary.html#${encodeURIComponent(x.id)}">웹북 용어집</a></span></p>
     </div>`;

assets/js/track.js

@@ -3,7 +3,11 @@
    dictionary in the PM doc; keep them in snake_case and the params flat. */
 (() => {
   "use strict";
-  const SITE = "https://causalinferencelab.github.io";
+  /* the hub's own address for links people copy and share: wherever the live hub is served (github.io, or
+     the pseudo-lab.com address it can move to); a local preview shares links to the live hub */
+  const LIVE = ["causalinferencelab.github.io", "causalinference.pseudo-lab.com"];
+  const SITE = LIVE.includes(location.hostname) ? location.origin : "https://causalinferencelab.github.io";
+  window.hubSite = SITE;
   window.hubTrack = (name, params = {}) => {
     try {
       if (typeof window.gtag === "function") window.gtag("event", name, params);