mcp-scraper 0.40.1 → 0.40.2

package/dist/editorial-reading-room/assets/app.js

@@ -0,0 +1,335 @@
+const elements = {
+  home: document.querySelector("#home-view"),
+  article: document.querySelector("#article-view"),
+  loading: document.querySelector("#loading-screen"),
+  menuButton: document.querySelector("#menu-button"),
+  menuClose: document.querySelector("#menu-close"),
+  backdrop: document.querySelector("#drawer-backdrop"),
+  drawer: document.querySelector("#navigation-drawer"),
+  drawerNav: document.querySelector("#drawer-navigation"),
+  search: document.querySelector("#menu-search"),
+  progress: document.querySelector("#reading-progress-bar"),
+  desktopJumps: document.querySelector("#desktop-jump-links")
+};
+
+const state = {
+  data: null,
+  current: null,
+  storageKey: "editorial-reading-room",
+  typeIndex: Number(localStorage.getItem("editorial-reading-room:type") || 0),
+  completed: new Set(
+    JSON.parse(localStorage.getItem("editorial-reading-room:completed") || "[]")
+  )
+};
+
+const typeModes = ["default", "large", "larger"];
+
+function escapeHtml(value = "") {
+  return value
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function setTypeMode() {
+  const mode = typeModes[state.typeIndex % typeModes.length];
+  if (mode === "default") document.documentElement.removeAttribute("data-type");
+  else document.documentElement.dataset.type = mode;
+  localStorage.setItem(`${state.storageKey}:type`, String(state.typeIndex % typeModes.length));
+}
+
+function setTheme(theme) {
+  if (theme === "evening") document.documentElement.dataset.theme = "evening";
+  else document.documentElement.removeAttribute("data-theme");
+  localStorage.setItem(`${state.storageKey}:theme`, theme);
+}
+
+function routeSlug() {
+  return new URL(window.location.href).searchParams.get("article");
+}
+
+function articleUrl(slug, section = "") {
+  const url = new URL(window.location.href);
+  if (slug) url.searchParams.set("article", slug);
+  else url.searchParams.delete("article");
+  url.hash = section ? `#${section}` : "";
+  return `${url.pathname}${url.search}${url.hash}`;
+}
+
+function navigate(slug, section = "", replace = false) {
+  const method = replace ? "replaceState" : "pushState";
+  history[method]({}, "", articleUrl(slug, section));
+  renderRoute();
+}
+
+function openDrawer() {
+  document.body.classList.add("drawer-open");
+  elements.drawer.setAttribute("aria-hidden", "false");
+  elements.menuButton.setAttribute("aria-expanded", "true");
+  renderDrawer();
+  requestAnimationFrame(() => elements.search.focus());
+}
+
+function closeDrawer() {
+  document.body.classList.remove("drawer-open");
+  elements.drawer.setAttribute("aria-hidden", "true");
+  elements.menuButton.setAttribute("aria-expanded", "false");
+  elements.search.value = "";
+  elements.menuButton.focus();
+}
+
+function groupArticles(articles) {
+  const groups = new Map();
+  articles.forEach((article) => {
+    if (!groups.has(article.category)) groups.set(article.category, []);
+    groups.get(article.category).push(article);
+  });
+  return groups;
+}
+
+function renderDrawer() {
+  const query = elements.search.value.trim().toLowerCase();
+  const current = state.current;
+  const articles = state.data.articles.filter((article) => {
+    if (!query) return true;
+    return `${article.title} ${article.summary} ${article.category}`
+      .toLowerCase()
+      .includes(query);
+  });
+  const groups = groupArticles(articles);
+  let html = "";
+  for (const [category, items] of groups) {
+    html += `<section class="drawer-group"><p class="drawer-group-title">${escapeHtml(
+      category
+    )}</p>`;
+    items.forEach((article) => {
+      const index = String(article.order).padStart(2, "0");
+      const completed = state.completed.has(article.slug) ? "✓" : index;
+      html += `<button class="drawer-link" data-article="${article.slug}" ${
+        current?.slug === article.slug ? 'aria-current="page"' : ""
+      }><span class="drawer-index">${completed}</span><span class="drawer-title">${escapeHtml(
+        article.title
+      )}</span></button>`;
+    });
+    html += "</section>";
+  }
+  if (current && (!query || current.title.toLowerCase().includes(query))) {
+    html += `<section class="jump-group"><p class="drawer-group-title">Jump within this article</p>`;
+    current.toc.forEach((item) => {
+      html += `<button class="jump-link level-${item.level}" data-section="${item.id}">${escapeHtml(
+        item.title
+      )}</button>`;
+    });
+    html += "</section>";
+  }
+  elements.drawerNav.innerHTML = html || "<p>No matching articles.</p>";
+}
+
+function renderHome() {
+  state.current = null;
+  elements.home.hidden = false;
+  elements.article.hidden = true;
+  elements.progress.style.width = "0";
+  document.title = state.data.site.title;
+  document.querySelector("#masthead-product").textContent = state.data.site.product;
+  document.querySelector("#masthead-title").textContent = state.data.site.edition;
+  document.querySelector("#edition-label").textContent = state.data.site.editionLabel;
+  document.querySelector("#issue-label").textContent = state.data.site.issueLabel;
+  document.querySelector("#home-eyebrow").textContent = state.data.site.eyebrow;
+  document.querySelector("#home-title").textContent = state.data.site.heroTitle;
+  document.querySelector("#start-label").textContent = state.data.site.startLabel;
+  document.querySelector("#footer-title").textContent = state.data.site.title;
+  document.querySelector("#home-deck").textContent = state.data.deck;
+  document.querySelector("#article-count").textContent = `${state.data.articles.length} readings`;
+  document.querySelector("#generated-at").textContent = `Updated ${new Date(
+    state.data.generatedAt
+  ).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}`;
+
+  const featured = state.data.articles.slice(0, 3);
+  document.querySelector("#featured-grid").innerHTML = featured
+    .map(
+      (article) => `<article class="feature-card">
+        <button data-article="${article.slug}">
+          <p class="card-kicker">${escapeHtml(article.kicker)}</p>
+          <h2>${escapeHtml(article.title)}</h2>
+          <p>${escapeHtml(article.summary)}</p>
+        </button>
+      </article>`
+    )
+    .join("");
+
+  document.querySelector("#contents-list").innerHTML = state.data.articles
+    .map(
+      (article) => `<article class="content-row">
+        <span class="content-number">${String(article.order).padStart(2, "0")}</span>
+        <button data-article="${article.slug}"><h3>${escapeHtml(article.title)}</h3></button>
+        <p>${escapeHtml(article.summary)}</p>
+        <span class="content-meta">${article.readingMinutes} min${
+          state.completed.has(article.slug) ? " · Read" : ""
+        }</span>
+      </article>`
+    )
+    .join("");
+  window.scrollTo({ top: 0, behavior: "instant" });
+}
+
+function renderDesktopJumps(article) {
+  elements.desktopJumps.innerHTML = article.toc
+    .map(
+      (item) =>
+        `<a class="level-${item.level}" href="#${item.id}" data-section-link="${item.id}">${escapeHtml(
+          item.title
+        )}</a>`
+    )
+    .join("");
+}
+
+function renderArticle(article) {
+  state.current = article;
+  elements.home.hidden = true;
+  elements.article.hidden = false;
+  document.title = `${article.title} — ${state.data.site.title}`;
+  document.querySelector("#article-category").textContent = article.category;
+  document.querySelector("#article-kicker").textContent = article.kicker;
+  document.querySelector("#article-title").textContent = article.title;
+  document.querySelector("#article-summary").textContent = article.summary;
+  document.querySelector("#article-reading-time").textContent = `${article.readingMinutes} min read`;
+  document.querySelector("#article-word-count").textContent = `${article.wordCount.toLocaleString()} words`;
+  document.querySelector("#article-revision").textContent = article.revision
+    ? `Revision ${article.revision}`
+    : article.sourceType || "Source material";
+  document.querySelector("#article-body").innerHTML = article.html;
+  document.querySelector("#article-source").textContent = article.sourceLabel;
+  renderDesktopJumps(article);
+  renderAdjacent(article);
+  requestAnimationFrame(() => {
+    if (window.location.hash) {
+      document.querySelector(window.location.hash)?.scrollIntoView();
+    } else {
+      window.scrollTo({ top: 0, behavior: "instant" });
+    }
+  });
+}
+
+function renderAdjacent(article) {
+  const index = state.data.articles.findIndex((item) => item.slug === article.slug);
+  const previous = state.data.articles[index - 1];
+  const next = state.data.articles[index + 1];
+  const previousButton = document.querySelector("#previous-article");
+  const nextButton = document.querySelector("#next-article");
+
+  previousButton.disabled = !previous;
+  previousButton.dataset.article = previous?.slug || "";
+  previousButton.innerHTML = previous
+    ? `<span class="eyebrow">Previous</span><br>${escapeHtml(previous.title)}`
+    : "Beginning of the edition";
+
+  nextButton.disabled = !next;
+  nextButton.dataset.article = next?.slug || "";
+  nextButton.innerHTML = next
+    ? `<span class="eyebrow">Next</span><br>${escapeHtml(next.title)}`
+    : "End of the edition";
+}
+
+function renderRoute() {
+  const slug = routeSlug();
+  if (!slug) renderHome();
+  else {
+    const article = state.data.articles.find((item) => item.slug === slug);
+    if (article) renderArticle(article);
+    else navigate(null, "", true);
+  }
+  renderDrawer();
+}
+
+function updateReadingProgress() {
+  if (!state.current) return;
+  const article = document.querySelector("#article-body");
+  const rect = article.getBoundingClientRect();
+  const start = window.scrollY + rect.top - window.innerHeight * 0.18;
+  const end = start + article.offsetHeight - window.innerHeight * 0.55;
+  const percent = Math.max(0, Math.min(1, (window.scrollY - start) / Math.max(1, end - start)));
+  elements.progress.style.width = `${percent * 100}%`;
+  localStorage.setItem(`${state.storageKey}:progress:${state.current.slug}`, String(percent));
+  if (percent > 0.94 && !state.completed.has(state.current.slug)) {
+    state.completed.add(state.current.slug);
+    localStorage.setItem(`${state.storageKey}:completed`, JSON.stringify([...state.completed]));
+  }
+
+  let active = null;
+  for (const heading of document.querySelectorAll(".article-body h2, .article-body h3")) {
+    if (heading.getBoundingClientRect().top <= 150) active = heading.id;
+  }
+  document.querySelectorAll("[data-section-link]").forEach((link) => {
+    link.classList.toggle("active", link.dataset.sectionLink === active);
+  });
+}
+
+document.addEventListener("click", (event) => {
+  const articleButton = event.target.closest("[data-article]");
+  if (articleButton?.dataset.article) {
+    navigate(articleButton.dataset.article);
+    closeDrawer();
+    return;
+  }
+  const jump = event.target.closest("[data-section]");
+  if (jump && state.current) {
+    closeDrawer();
+    history.replaceState({}, "", articleUrl(state.current.slug, jump.dataset.section));
+    document.querySelector(`#${CSS.escape(jump.dataset.section)}`)?.scrollIntoView();
+  }
+});
+
+elements.menuButton.addEventListener("click", openDrawer);
+elements.menuClose.addEventListener("click", closeDrawer);
+elements.backdrop.addEventListener("click", closeDrawer);
+elements.search.addEventListener("input", renderDrawer);
+document.querySelector("#home-button").addEventListener("click", () => navigate(null));
+document.querySelector("#footer-contents").addEventListener("click", () => navigate(null));
+document.querySelector("#article-category").addEventListener("click", () => navigate(null));
+document.querySelector("#start-reading").addEventListener("click", () =>
+  navigate(state.data.articles[0].slug)
+);
+document.querySelector("#type-button").addEventListener("click", () => {
+  state.typeIndex = (state.typeIndex + 1) % typeModes.length;
+  setTypeMode();
+});
+document.querySelector("#theme-button").addEventListener("click", () => {
+  setTheme(document.documentElement.dataset.theme === "evening" ? "day" : "evening");
+});
+
+window.addEventListener("popstate", renderRoute);
+window.addEventListener("scroll", updateReadingProgress, { passive: true });
+window.addEventListener("keydown", (event) => {
+  if (event.key === "Escape" && document.body.classList.contains("drawer-open")) closeDrawer();
+  if (event.key.toLowerCase() === "m" && !/input|textarea/i.test(event.target.tagName)) openDrawer();
+  if (!state.current || /input|textarea/i.test(event.target.tagName)) return;
+  const index = state.data.articles.findIndex((item) => item.slug === state.current.slug);
+  if (event.key === "[" && index > 0) navigate(state.data.articles[index - 1].slug);
+  if (event.key === "]" && index < state.data.articles.length - 1)
+    navigate(state.data.articles[index + 1].slug);
+});
+
+async function boot() {
+  const dataElement = document.querySelector("#reading-room-data");
+  if (!dataElement?.textContent) throw new Error("Could not load the reading-room content.");
+  state.data = JSON.parse(dataElement.textContent);
+  state.storageKey = `editorial-reading-room:${state.data.site.slug}`;
+  state.typeIndex = Number(localStorage.getItem(`${state.storageKey}:type`) || 0);
+  state.completed = new Set(
+    JSON.parse(localStorage.getItem(`${state.storageKey}:completed`) || "[]")
+  );
+  const savedTheme = localStorage.getItem(`${state.storageKey}:theme`);
+  if (savedTheme === "evening") setTheme("evening");
+  setTypeMode();
+  renderRoute();
+  elements.loading.classList.add("loaded");
+  document.querySelector("#main-content").focus({ preventScroll: true });
+}
+
+boot().catch((error) => {
+  elements.loading.innerHTML = `<span class="loading-mark">!</span><p>${escapeHtml(
+    error.message
+  )}</p>`;
+});

package/dist/editorial-reading-room/assets/index.html

@@ -0,0 +1,131 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="A mobile-first editorial reading room."
+    />
+    <meta name="theme-color" content="#f5f1e8" />
+    <title>Editorial Reading Room</title>
+    <style>/*__READING_ROOM_STYLES__*/</style>
+  </head>
+  <body>
+    <a class="skip-link" href="#main-content">Skip to the article</a>
+    <div class="reading-progress" aria-hidden="true">
+      <span id="reading-progress-bar"></span>
+    </div>
+
+    <header class="site-header">
+      <button
+        class="menu-button"
+        id="menu-button"
+        type="button"
+        aria-label="Open contents and jump links"
+        aria-controls="navigation-drawer"
+        aria-expanded="false"
+      >
+        <span></span><span></span><span></span>
+      </button>
+      <button class="masthead" id="home-button" type="button" aria-label="Return to contents">
+        <span class="masthead-product" id="masthead-product">Reading Room</span>
+        <span class="masthead-title" id="masthead-title">Field Notes</span>
+      </button>
+      <div class="header-tools">
+        <button class="text-button" id="type-button" type="button" aria-label="Change text size">
+          <span aria-hidden="true">A<span class="type-large">A</span></span>
+          <span class="tool-label">Type</span>
+        </button>
+        <button class="text-button" id="theme-button" type="button" aria-label="Toggle evening mode">
+          <span aria-hidden="true">◐</span>
+          <span class="tool-label">Evening</span>
+        </button>
+      </div>
+    </header>
+
+    <aside class="navigation-drawer" id="navigation-drawer" aria-hidden="true">
+      <div class="drawer-header">
+        <p class="eyebrow">Reading desk</p>
+        <button id="menu-close" type="button" aria-label="Close navigation">Close</button>
+      </div>
+      <label class="search-field">
+        <span class="sr-only">Search the reading room</span>
+        <input id="menu-search" type="search" placeholder="Find an article or section" />
+      </label>
+      <nav id="drawer-navigation" aria-label="Reading room contents"></nav>
+    </aside>
+    <button class="drawer-backdrop" id="drawer-backdrop" type="button" aria-label="Close navigation"></button>
+
+    <main id="main-content" tabindex="-1">
+      <section id="home-view" class="home-view" hidden>
+        <div class="issue-line">
+          <span id="edition-label">Reader’s edition</span>
+          <span id="issue-label">Current edition</span>
+          <span id="article-count"></span>
+        </div>
+        <section class="home-hero">
+          <p class="eyebrow" id="home-eyebrow">A guided collection</p>
+          <h1 id="home-title">Make complex material easy to explore.</h1>
+          <p class="home-deck" id="home-deck"></p>
+          <button class="primary-link" id="start-reading" type="button">
+            <span id="start-label">Start reading</span> <span aria-hidden="true">→</span>
+          </button>
+        </section>
+        <section class="featured-grid" id="featured-grid" aria-label="Featured reading"></section>
+        <section class="contents-section">
+          <div class="section-heading">
+            <p class="eyebrow">The complete edition</p>
+            <h2>Contents</h2>
+          </div>
+          <div id="contents-list" class="contents-list"></div>
+        </section>
+      </section>
+
+      <section id="article-view" class="article-view" hidden>
+        <div class="article-shell">
+          <aside class="article-rail" aria-label="In this article">
+            <p class="rail-label">In this article</p>
+            <nav id="desktop-jump-links"></nav>
+          </aside>
+          <article>
+            <header class="article-header">
+              <button class="breadcrumb" id="article-category" type="button">Field Notes</button>
+              <p class="article-kicker" id="article-kicker"></p>
+              <h1 id="article-title"></h1>
+              <p class="article-deck" id="article-summary"></p>
+              <div class="article-meta">
+                <span id="article-reading-time"></span>
+                <span id="article-word-count"></span>
+                <span id="article-revision"></span>
+              </div>
+            </header>
+            <div class="article-body" id="article-body"></div>
+            <footer class="article-source">
+              <p class="eyebrow">Source record</p>
+              <p id="article-source"></p>
+            </footer>
+          </article>
+        </div>
+        <nav class="next-previous" aria-label="Previous and next articles">
+          <button id="previous-article" type="button"></button>
+          <button id="next-article" type="button"></button>
+        </nav>
+      </section>
+    </main>
+
+    <footer class="site-footer">
+      <span id="footer-title">Editorial Reading Room</span>
+      <button id="footer-contents" type="button">Contents</button>
+      <span id="generated-at"></span>
+    </footer>
+
+    <div class="loading-screen" id="loading-screen" role="status">
+      <span class="loading-mark">M</span>
+      <p>Preparing the reading room…</p>
+    </div>
+
+    <script id="reading-room-data" type="application/json">/*__READING_ROOM_DATA__*/</script>
+    <script>/*__READING_ROOM_SCRIPT__*/</script>
+  </body>
+</html>