crtc page: add 5-min-read TL;DR + collapsible deep-detail sections (non-destructive JS/CSS enhancement)
This commit is contained in:
justin
parent
4f52d12629
commit
0562fd2bd3
3 changed files with 247 additions and 2 deletions
104
site/public/js/pw-crtc-collapse.css
Normal file
104
site/public/js/pw-crtc-collapse.css
Normal file
|
|
@ -0,0 +1,104 @@
|
||||||
|
/* pw-crtc-collapse.css — styles for the CRTC page reading aid (TL;DR + accordions). */
|
||||||
|
|
||||||
|
.pw-tldr {
|
||||||
|
border: 1px solid #cfe0f5;
|
||||||
|
background: linear-gradient(135deg, #f0f6ff 0%, #eef9f3 100%);
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 1.1rem 1.25rem;
|
||||||
|
margin: 0 0 1.75rem;
|
||||||
|
}
|
||||||
|
.pw-tldr-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.6rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
color: #1a2744;
|
||||||
|
}
|
||||||
|
.pw-tldr-badge {
|
||||||
|
background: #059669;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 0.18rem 0.5rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
.pw-tldr-lead {
|
||||||
|
margin: 0 0 0.85rem;
|
||||||
|
color: #334155;
|
||||||
|
font-size: 0.96rem;
|
||||||
|
line-height: 1.55;
|
||||||
|
}
|
||||||
|
.pw-tldr-jump {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.45rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
.pw-tldr-jump > span {
|
||||||
|
color: #64748b;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-right: 0.15rem;
|
||||||
|
}
|
||||||
|
.pw-tldr-chip {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.28rem 0.7rem;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #cbd5e1;
|
||||||
|
border-radius: 999px;
|
||||||
|
color: #1d4ed8;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
transition: background 0.12s, border-color 0.12s;
|
||||||
|
}
|
||||||
|
.pw-tldr-chip:hover {
|
||||||
|
background: #1d4ed8;
|
||||||
|
color: #fff;
|
||||||
|
border-color: #1d4ed8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Collapsible section */
|
||||||
|
.pw-collapse {
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-radius: 12px;
|
||||||
|
margin: 0.75rem 0;
|
||||||
|
background: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.pw-collapse[open] {
|
||||||
|
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
|
||||||
|
}
|
||||||
|
.pw-collapse-summary {
|
||||||
|
cursor: pointer;
|
||||||
|
list-style: none;
|
||||||
|
padding: 0.95rem 1.15rem;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
color: #1a2744;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.6rem;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.pw-collapse-summary::-webkit-details-marker { display: none; }
|
||||||
|
.pw-collapse-summary::before {
|
||||||
|
content: "";
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: 0.5rem;
|
||||||
|
height: 0.5rem;
|
||||||
|
border-right: 2px solid #2d4e78;
|
||||||
|
border-bottom: 2px solid #2d4e78;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
transition: transform 0.15s ease;
|
||||||
|
}
|
||||||
|
.pw-collapse[open] > .pw-collapse-summary::before {
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
.pw-collapse-summary:hover { background: #f8fafc; }
|
||||||
|
.pw-collapse-body {
|
||||||
|
padding: 0 1.15rem 1.1rem;
|
||||||
|
}
|
||||||
|
.pw-collapse-body > h2 { display: none; }
|
||||||
141
site/public/js/pw-crtc-collapse.js
Normal file
141
site/public/js/pw-crtc-collapse.js
Normal file
|
|
@ -0,0 +1,141 @@
|
||||||
|
/*
|
||||||
|
* pw-crtc-collapse.js — progressive-enhancement reading aid for the long
|
||||||
|
* Canada CRTC carrier page (public/services/telecom/canada-crtc/index.html).
|
||||||
|
*
|
||||||
|
* Why a runtime script instead of editing the HTML: that page is a single
|
||||||
|
* 183 KB minified file with auto-generated markup whose section headings sit
|
||||||
|
* at inconsistent DOM depths. Rewriting it by hand risks corrupting the markup
|
||||||
|
* and is hard to maintain. This script enhances it non-destructively:
|
||||||
|
*
|
||||||
|
* 1. Injects a "5-minute read" TL;DR + jump menu at the top of the article.
|
||||||
|
* 2. Collapses a curated set of deep-detail H2 sections into <details>-style
|
||||||
|
* accordions (collapsed by default) so the page reads short, while every
|
||||||
|
* word remains present for SEO and for anyone who expands it.
|
||||||
|
*
|
||||||
|
* It is idempotent (guards against double-run) and degrades gracefully: with
|
||||||
|
* JS off, the full page renders exactly as before.
|
||||||
|
*/
|
||||||
|
(function () {
|
||||||
|
"use strict";
|
||||||
|
if (window.__pwCrtcCollapse) return;
|
||||||
|
window.__pwCrtcCollapse = true;
|
||||||
|
|
||||||
|
// H2 headings (matched by normalized text prefix) to collapse by default.
|
||||||
|
// Order here is also the order used in the TL;DR jump menu.
|
||||||
|
var COLLAPSE = [
|
||||||
|
{ key: "why canada", label: "Why Canada: FCC vs CRTC" },
|
||||||
|
{ key: "corporate tax comparison", label: "Corporate tax comparison (BC vs US)" },
|
||||||
|
{ key: "canada telecom m&a", label: "Canada telecom M&A climate" },
|
||||||
|
{ key: "step 6: canadian business banking", label: "Canadian business banking" },
|
||||||
|
{ key: "included: canadian wholesale", label: "Wholesale vendor directory" },
|
||||||
|
{ key: "frequently asked questions", label: "FAQ", open: false },
|
||||||
|
{ key: "us wholesale voice market", label: "US wholesale / DID restrictions" },
|
||||||
|
{ key: "the growing burden", label: "The growing burden of a US carrier" },
|
||||||
|
{ key: "what you'll need", label: "What you'll need to get started" }
|
||||||
|
];
|
||||||
|
|
||||||
|
function norm(s) {
|
||||||
|
return (s || "").replace(/\s+/g, " ").trim().toLowerCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
function ready(fn) {
|
||||||
|
if (document.readyState !== "loading") fn();
|
||||||
|
else document.addEventListener("DOMContentLoaded", fn);
|
||||||
|
}
|
||||||
|
|
||||||
|
ready(function () {
|
||||||
|
var h2s = Array.prototype.slice.call(document.querySelectorAll("h2"));
|
||||||
|
if (!h2s.length) return;
|
||||||
|
|
||||||
|
var made = [];
|
||||||
|
|
||||||
|
COLLAPSE.forEach(function (cfg) {
|
||||||
|
var h2 = h2s.find(function (h) {
|
||||||
|
return norm(h.textContent).indexOf(cfg.key) === 0 ||
|
||||||
|
norm(h.textContent).indexOf(cfg.key) !== -1;
|
||||||
|
});
|
||||||
|
if (!h2 || h2.dataset.pwCollapsed) return;
|
||||||
|
|
||||||
|
var parent = h2.parentNode;
|
||||||
|
// Collect this H2 plus its following siblings up to the next H2 sibling.
|
||||||
|
var nodes = [h2];
|
||||||
|
var n = h2.nextSibling;
|
||||||
|
while (n) {
|
||||||
|
if (n.nodeType === 1 && n.tagName === "H2") break;
|
||||||
|
var next = n.nextSibling;
|
||||||
|
nodes.push(n);
|
||||||
|
n = next;
|
||||||
|
}
|
||||||
|
if (nodes.length < 2) {
|
||||||
|
// Heading has no sibling body at this level (body nested elsewhere);
|
||||||
|
// skip rather than risk an empty/incorrect accordion.
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var details = document.createElement("details");
|
||||||
|
details.className = "pw-collapse";
|
||||||
|
if (cfg.open) details.open = true;
|
||||||
|
|
||||||
|
var summary = document.createElement("summary");
|
||||||
|
summary.className = "pw-collapse-summary";
|
||||||
|
summary.textContent = h2.textContent.replace(/\s+/g, " ").trim();
|
||||||
|
details.appendChild(summary);
|
||||||
|
|
||||||
|
var body = document.createElement("div");
|
||||||
|
body.className = "pw-collapse-body";
|
||||||
|
|
||||||
|
// Move the original H2 (hidden, keeps heading in DOM for SEO) + siblings in.
|
||||||
|
h2.style.display = "none";
|
||||||
|
h2.dataset.pwCollapsed = "1";
|
||||||
|
parent.insertBefore(details, nodes[0]);
|
||||||
|
nodes.forEach(function (node) { body.appendChild(node); });
|
||||||
|
details.appendChild(body);
|
||||||
|
|
||||||
|
var id = "crtc-" + cfg.key.replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
|
||||||
|
details.id = id;
|
||||||
|
made.push({ id: id, label: cfg.label });
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!made.length) return;
|
||||||
|
|
||||||
|
// Build the TL;DR + jump menu and insert it right after the hero/pricing card.
|
||||||
|
var anchor = document.querySelector("nav[aria-label], .max-w-4xl") || document.body;
|
||||||
|
var tldr = document.createElement("div");
|
||||||
|
tldr.className = "pw-tldr";
|
||||||
|
tldr.innerHTML =
|
||||||
|
'<div class="pw-tldr-head">' +
|
||||||
|
'<span class="pw-tldr-badge">5-min read</span>' +
|
||||||
|
'<strong>The short version</strong></div>' +
|
||||||
|
'<p class="pw-tldr-lead">Become a single <strong>Canadian CRTC/BITS carrier</strong> ' +
|
||||||
|
'and lawfully serve US & international customers \u2014 without taking on the US ' +
|
||||||
|
'FCC 499/USF, RMD, STIR/SHAKEN and state-PUC stack a US carrier carries. ' +
|
||||||
|
'A Canadian carrier serving US customers as one entity is a common, established ' +
|
||||||
|
'structure (per public FCC records). Details below are optional \u2014 tap any to expand.</p>' +
|
||||||
|
'<div class="pw-tldr-jump"><span>Jump to:</span></div>';
|
||||||
|
|
||||||
|
var jump = tldr.querySelector(".pw-tldr-jump");
|
||||||
|
made.forEach(function (m) {
|
||||||
|
var a = document.createElement("a");
|
||||||
|
a.href = "#" + m.id;
|
||||||
|
a.className = "pw-tldr-chip";
|
||||||
|
a.textContent = m.label;
|
||||||
|
a.addEventListener("click", function (e) {
|
||||||
|
var d = document.getElementById(m.id);
|
||||||
|
if (d) {
|
||||||
|
d.open = true;
|
||||||
|
e.preventDefault();
|
||||||
|
d.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
jump.appendChild(a);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Insert TL;DR before the first collapsed section for a clean top-of-article placement.
|
||||||
|
var firstDetails = document.querySelector("details.pw-collapse");
|
||||||
|
if (firstDetails && firstDetails.parentNode) {
|
||||||
|
firstDetails.parentNode.insertBefore(tldr, firstDetails);
|
||||||
|
} else {
|
||||||
|
anchor.insertBefore(tldr, anchor.firstChild);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})();
|
||||||
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue