npm - evol-npm-pulse - Versions diffs - 1.0.0 - Mend

evol-npm-pulse 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/.github/FUNDING.yml ADDED Viewed

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+github: evoluteur

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2026 Olivier Giulieri
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,40 @@
+# npm-Pulse
+One page to see how all your npm packages are doing: downloads over the last week, month, or year, a weekly sparkline for each package, the trend against the previous month, and the GitHub stars that go with it.
+- [See the packages](https://evoluteur.github.io/npm-pulse/)
+- [See the charts](https://evoluteur.github.io/npm-pulse/chart.html)
+![npm Pulse](npm-pulse.png)
+![npm Pulse charts](npm-pulse-charts.png)
+Everything is computed in the browser from three public APIs - no backend, no build step, no library:
+- the [npm registry search API](https://github.com/npm/registry/blob/main/docs/REGISTRY-API.md) for the list of packages published by a maintainer,
+- the [npm download counts API](https://github.com/npm/registry/blob/main/docs/download-counts.md) for a year of daily downloads (fetched in a single bulk call),
+- the [GitHub API](https://docs.github.com/en/rest) for stars and forks.
+The sparklines are 52 weekly buckets drawn as plain SVG, and the charts page shows total downloads month by month plus the ranking of the most downloaded packages.
+Downloads are recomputed once a day by npm, so the answers are cached in `localStorage` for 6 hours. Use the "Refresh" link to fetch them again.
+## Use it for your own packages
+Change the `user` value (at the top of the [/js/npm-data.js](https://github.com/evoluteur/npm-pulse/blob/main/js/npm-data.js) file) to see your packages instead of mine:
+```js
+const user = "evoluteur"; // npm maintainer whose packages are shown
+const ghUser = "evoluteur"; // GitHub user (for stars and forks)
+const cacheMinutes = 360; // npm recomputes its stats once a day
+```
+Then open `index.html` - there is nothing to install and nothing to build.
+GitHub allows 60 anonymous API calls per hour. When that limit is reached the stars simply do not show, and everything else keeps working.
+npm-Pulse is open source at [GitHub](https://github.com/evoluteur/npm-pulse) with MIT license.
+For more ways to look at your projects check out my other projects [GitHub-Projects-Cards](https://github.com/evoluteur/github-projects-cards) ([demo](https://evoluteur.github.io/github-projects-cards/)) to display your repositories as cards, and [Meet-the-Fans](https://github.com/evoluteur/meet-the-fans) ([demo](https://evoluteur.github.io/meet-the-fans/)) to visualize the network graph of your repositories, followers, stargazers, and forks.
+Copyright (c) 2026 [Olivier Giulieri](https://evoluteur.github.io/).

package/chart.html ADDED Viewed

@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-063933E3C2"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+      gtag("config", "G-063933E3C2");
+    </script>
+    <title>npm Pulse Charts - Downloads month by month</title>
+    <link
+      rel="canonical"
+      href="https://evoluteur.github.io/npm-pulse/chart.html"
+    />
+    <meta charset="utf-8" />
+    <meta http-equiv="content-language" content="en" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#0288d1" />
+    <link rel="icon" type="image/png" href="favicon.png" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Marcellus"
+    />
+    <link href="css/me.css" rel="stylesheet" />
+    <link href="css/pulse.css" rel="stylesheet" />
+    <script src="js/npm-data.js"></script>
+    <script src="js/chart.js"></script>
+    <meta
+      name="keywords"
+      content="npm, downloads, chart, monthly, statistics, packages, ranking, trends, svg"
+    />
+    <meta
+      name="description"
+      content="Total npm downloads month by month across all the packages of a maintainer, and the ranking of the most downloaded ones."
+    />
+    <meta name="robots" content="index, follow" />
+    <meta name="author" content="Olivier Giulieri" />
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="Evoluteur" />
+    <meta property="og:title" content="npm Pulse Charts" />
+    <meta
+      property="og:description"
+      content="Total npm downloads month by month across all the packages of a maintainer, and the ranking of the most downloaded ones."
+    />
+    <meta
+      property="og:url"
+      content="https://evoluteur.github.io/npm-pulse/chart.html"
+    />
+  </head>
+  <body onload="setupChartPage()">
+    <div class="nav">
+      <a href="https://evoluteur.github.io/">Evoluteur</a> &gt;
+      <a href="index.html">npm Pulse</a> &gt; Charts
+    </div>
+    <section class="gpc">
+      <h1 id="title">Loading...</h1>
+      <div id="charts"></div>
+    </section>
+    <footer>
+      <p>
+        Charts are drawn in plain SVG from the
+        <a
+          href="https://github.com/npm/registry/blob/main/docs/download-counts.md"
+          >npm registry API</a
+        >, no charting library.
+      </p>
+      <p>
+        <a href="index.html">Back to the packages</a>
+      </p>
+      <p>
+        &#169; 2026
+        <a href="https://evoluteur.github.io/" target="_blank"
+          >Olivier Giulieri</a
+        >
+      </p>
+    </footer>
+  </body>
+</html>

package/css/me.css ADDED Viewed

@@ -0,0 +1,76 @@
+/*
+  https://evoluteur.github.io/
+  (c) 2026 Olivier Giulieri
+ */
+html {
+  margin: 0;
+  padding: 0;
+  scroll-behavior: smooth;
+  background: #0288d1 url("spirals.png");
+}
+body {
+  margin: 0;
+  padding: 0;
+  font-family: "Marcellus", serif;
+  font-size: 20px;
+  font-weight: 300;
+  line-height: 1.4em;
+  color: white;
+  overflow-x: hidden;
+}
+h1,
+h2 {
+  color: #ffcc80;
+}
+h1 {
+  font-size: 2.5rem;
+}
+a,
+a:visited {
+  color: #ffb74d;
+  text-decoration: none;
+  font-weight: 400;
+  /* background-color: #2b88d2; */
+}
+a:active,
+a:hover {
+  color: #ffcc80;
+  text-decoration: underline;
+  font-weight: 400;
+}
+footer {
+  color: #bdcff1;
+  margin: 50px 20px 10px 20px;
+  > a {
+    white-space: nowrap;
+  }
+  &:hover {
+    color: white;
+  }
+}
+.nav {
+  color: white;
+  background-color: #1a1a1a;
+  padding: 8px 10px;
+  > a {
+    color: #92cddc;
+    background-color: #1a1a1a !important;
+    text-decoration: none;
+    &:hover {
+      color: #ff9900;
+    }
+  }
+}
+.gpc {
+  padding: 0 20px;
+}
+@media print {
+  body {
+    color: #1a1a1a !important;
+  }
+  @page {
+    margin: 1cm 1cm;
+  }
+}

package/css/pulse.css ADDED Viewed

@@ -0,0 +1,207 @@
+/*
+  npm-pulse
+  https://evoluteur.github.io/npm-pulse/
+  (c) 2026 Olivier Giulieri
+*/
+#title > a {
+  text-transform: none;
+}
+.totals {
+  font-size: 1.2rem;
+  white-space: nowrap;
+  margin-left: 20px;
+  > span {
+    margin-right: 20px;
+  }
+}
+.filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  align-items: baseline;
+  margin-bottom: 20px;
+  label::after {
+    content: ":";
+  }
+  input,
+  select {
+    font-size: 16px;
+    padding: 5px 10px;
+    margin-left: 5px;
+  }
+  .tools {
+    white-space: nowrap;
+  }
+}
+#summary {
+  font-size: 0.9em;
+  color: #bbdefb;
+}
+.projects {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  font-size: 0.9em;
+  > .project-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex-grow: 1;
+    background-color: #5594f4;
+    width: 300px;
+    max-width: 100%;
+    border: 3px solid #0288d1;
+    border-radius: 10px;
+    padding: 5px 20px 15px;
+    .desc {
+      padding: 10px 0;
+    }
+    .p-links > a {
+      display: inline-block;
+      margin-top: 5px;
+    }
+  }
+}
+.pcard-title {
+  display: flex;
+  gap: 10px;
+  align-items: baseline;
+  min-height: 56px;
+  margin-bottom: 5px;
+  > span:nth-child(1) {
+    flex-grow: 1;
+    overflow-wrap: anywhere;
+  }
+  > .dls {
+    font-size: 1.1rem;
+    color: white;
+    white-space: nowrap;
+  }
+}
+.pcard-foot {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-top: 12px;
+  font-size: 0.85em;
+  color: #dbe9ff;
+}
+.lang {
+  margin-right: 10px;
+  padding: 3px 10px;
+  border-radius: 10px;
+  border: solid 1px white;
+  white-space: nowrap;
+}
+.trend {
+  white-space: nowrap;
+  &.up {
+    color: #b9f6ca;
+  }
+  &.down {
+    color: #ffcdd2;
+  }
+}
+.crud-icon {
+  position: relative;
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+  top: 2px;
+  svg {
+    fill: currentColor;
+    height: 16px;
+    width: 16px;
+  }
+}
+/* sparklines: 52 weekly buckets, no axis, no library */
+.spark {
+  display: block;
+  width: 100%;
+  height: 46px;
+  overflow: visible;
+  > polygon {
+    fill: rgba(255, 255, 255, 0.22);
+  }
+  > polyline {
+    fill: none;
+    stroke: #ffcc80;
+    stroke-width: 1.5;
+    stroke-linejoin: round;
+    vector-effect: non-scaling-stroke;
+  }
+  > circle {
+    fill: #ffcc80;
+    vector-effect: non-scaling-stroke;
+  }
+}
+.spark-empty {
+  height: 46px;
+  display: flex;
+  align-items: center;
+  font-size: 0.85em;
+  color: #dbe9ff;
+}
+.noresults {
+  margin: 20px 0;
+  padding: 30px;
+}
+/* charts page */
+.chart-block {
+  margin: 0 0 50px 0;
+  > h2 {
+    margin-bottom: 5px;
+  }
+  > .chart-note {
+    font-size: 0.85em;
+    color: #bbdefb;
+    margin: 0 0 15px 0;
+  }
+}
+.chart {
+  width: 100%;
+  height: auto;
+  overflow: visible;
+  .grid {
+    stroke: rgba(255, 255, 255, 0.25);
+    stroke-width: 1;
+  }
+  .bar {
+    fill: #ffcc80;
+  }
+  .bar.partial {
+    fill: rgba(255, 204, 128, 0.6);
+    stroke: #ffcc80;
+    stroke-dasharray: 3 3;
+  }
+  .axis {
+    fill: white;
+    font-size: 12px;
+    font-family: "Marcellus", serif;
+  }
+  .axis.value {
+    fill: #dbe9ff;
+  }
+  .bar-label {
+    fill: white;
+    font-size: 13px;
+    font-family: "Marcellus", serif;
+  }
+}
+@media print {
+  .filters,
+  .nav {
+    display: none;
+  }
+  .projects > .project-card {
+    break-inside: avoid;
+  }
+}

package/css/spirals.png ADDED Viewed

Binary file

package/favicon.png ADDED Viewed

Binary file

package/index.html ADDED Viewed

@@ -0,0 +1,151 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-063933E3C2"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+      gtag("config", "G-063933E3C2");
+    </script>
+    <title>npm Pulse - Downloads and trends for your npm packages</title>
+    <link rel="canonical" href="https://evoluteur.github.io/npm-pulse/" />
+    <meta charset="utf-8" />
+    <meta http-equiv="content-language" content="en" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#0288d1" />
+    <link rel="icon" type="image/png" href="favicon.png" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Marcellus"
+    />
+    <link href="css/me.css" rel="stylesheet" />
+    <link href="css/pulse.css" rel="stylesheet" />
+    <script src="js/npm-data.js"></script>
+    <script src="js/pulse.js"></script>
+    <meta
+      name="keywords"
+      content="npm, downloads, packages, statistics, stats, dashboard, sparkline, trends, registry, open source, portfolio, github, stars"
+    />
+    <meta
+      name="description"
+      content="One page dashboard for all the npm packages of a maintainer: downloads over the last week, month, and year, weekly sparklines, trends, and GitHub stars."
+    />
+    <meta name="robots" content="index, follow" />
+    <meta name="author" content="Olivier Giulieri" />
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="Evoluteur" />
+    <meta property="og:title" content="npm Pulse" />
+    <meta
+      property="og:description"
+      content="One page dashboard for all the npm packages of a maintainer: downloads over the last week, month, and year, weekly sparklines, trends, and GitHub stars."
+    />
+    <meta property="og:url" content="https://evoluteur.github.io/npm-pulse/" />
+    <meta
+      property="og:image"
+      content="https://raw.githubusercontent.com/evoluteur/npm-pulse/main/npm-pulse.png"
+    />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="npm Pulse" />
+    <meta
+      name="twitter:description"
+      content="Downloads, sparklines, and trends for all your npm packages on a single page."
+    />
+    <meta
+      name="twitter:image"
+      content="https://raw.githubusercontent.com/evoluteur/npm-pulse/main/npm-pulse.png"
+    />
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "SoftwareSourceCode",
+        "name": "npm-pulse",
+        "description": "One page dashboard for all the npm packages of a maintainer: downloads, weekly sparklines, trends, and GitHub stars.",
+        "url": "https://evoluteur.github.io/npm-pulse/",
+        "codeRepository": "https://github.com/evoluteur/npm-pulse",
+        "license": "https://github.com/evoluteur/npm-pulse/blob/main/LICENSE",
+        "programmingLanguage": "JavaScript",
+        "author": {
+          "@type": "Person",
+          "name": "Olivier Giulieri",
+          "url": "https://evoluteur.github.io/"
+        }
+      }
+    </script>
+  </head>
+  <body onload="setupPulsePage()">
+    <div class="nav">
+      <a href="https://evoluteur.github.io/">Evoluteur</a> &gt; npm Pulse
+    </div>
+    <section class="gpc">
+      <h1 id="title">Loading...</h1>
+      <div class="filters">
+        <div>
+          <label for="filter">Find</label>
+          <input type="text" onkeyup="filter(this.value)" id="filter" />
+        </div>
+        <div>
+          <label for="periodPicker">Period</label>
+          <select onchange="setPeriod(this.value)" id="periodPicker">
+            <option value="last7">Last 7 days</option>
+            <option value="last30" selected>Last 30 days</option>
+            <option value="last365">Last 12 months</option>
+          </select>
+        </div>
+        <div>
+          <label for="sortPicker">Sort by</label>
+          <select onchange="sort(this.value)" id="sortPicker">
+            <option value="downloads" selected>Downloads</option>
+            <option value="name">Name</option>
+            <option value="stars">Stars</option>
+            <option value="date">Published</option>
+            <option value="trend">Trend</option>
+          </select>
+        </div>
+        <span id="summary"></span>
+        <span class="tools">
+          <a href="chart.html">Charts</a>
+          <!-- <a href="#" onclick="clearCache(); return false;">Refresh</a> -->
+        </span>
+      </div>
+      <div id="packages" class="projects"></div>
+    </section>
+    <footer>
+      <p>
+        <a href="https://github.com/evoluteur/npm-pulse">npm-Pulse</a> is open
+        source at GitHub with MIT license. Downloads come from the
+        <a
+          href="https://github.com/npm/registry/blob/main/docs/download-counts.md"
+          >npm registry API</a
+        >, stars from the
+        <a href="https://docs.github.com/en/rest">GitHub API</a>.
+      </p>
+      <p>
+        For more ways to look at your projects check out
+        <a href="https://evoluteur.github.io/github-projects-cards/"
+          >GitHub-Projects-Cards</a
+        >
+        and
+        <a href="https://evoluteur.github.io/meet-the-fans/">Meet-the-Fans</a>.
+      </p>
+      &#169; 2026
+      <a href="https://evoluteur.github.io/" target="_blank"
+        >Olivier Giulieri</a
+      >
+    </footer>
+  </body>
+</html>

package/js/chart.js ADDED Viewed

@@ -0,0 +1,134 @@
+/*
+  npm-pulse - charts
+  https://evoluteur.github.io/npm-pulse/
+  (c) 2026 Olivier Giulieri
+*/
+const topCount = 12; // number of packages in the ranking
+// round a maximum up to a readable value (1200 -> 2000, 43 -> 50)
+const niceMax = (value) => {
+  if (value <= 0) return 1;
+  const power = Math.pow(10, Math.floor(Math.log10(value)));
+  const steps = [1, 1.5, 2, 2.5, 3, 4, 5, 7.5, 10];
+  const step = steps.find((s) => value <= s * power) || 10;
+  return step * power;
+};
+const gridHTML = (max, x0, x1, y0, y1, ticks) => {
+  let html = "";
+  for (let i = 0; i <= ticks; i++) {
+    const y = y1 - ((y1 - y0) * i) / ticks;
+    html += `<line class="grid" x1="${x0}" y1="${y}" x2="${x1}" y2="${y}"></line>
+      <text class="axis value" x="${x0 - 10}" y="${
+      y + 4
+    }" text-anchor="end">${fNum(Math.round((max * i) / ticks))}</text>`;
+  }
+  return html;
+};
+// downloads per month, across every package
+const monthsChart = (months) => {
+  const w = 900;
+  const h = 340;
+  const left = 90;
+  const right = 20;
+  const top = 20;
+  const bottom = 50;
+  const max = niceMax(Math.max(...months.map((m) => m.downloads), 1));
+  const iw = w - left - right;
+  const step = iw / months.length;
+  const barW = Math.min(step * 0.62, 60);
+  const bars = months
+    .map((m, i) => {
+      const height = ((h - top - bottom) * m.downloads) / max;
+      const x = left + i * step + (step - barW) / 2;
+      const y = h - bottom - height;
+      const partial = i === months.length - 1;
+      return `<rect class="bar${partial ? " partial" : ""}" x="${x.toFixed(
+        1
+      )}" y="${y.toFixed(1)}" width="${barW.toFixed(1)}" height="${height.toFixed(
+        1
+      )}"><title>${m.month}: ${fNum(m.downloads)} downloads${
+        partial ? " so far" : ""
+      }</title></rect>
+      <text class="axis" x="${(x + barW / 2).toFixed(1)}" y="${
+        h - bottom + 20
+      }" text-anchor="middle">${fMonth(m.month)}</text>`;
+    })
+    .join("");
+  return `<svg class="chart" viewBox="0 0 ${w} ${h}" role="img"
+    aria-label="Total npm downloads per month over the last year">
+    ${gridHTML(max, left, w - right, top, h - bottom, 4)}
+    ${bars}
+  </svg>`;
+};
+// the most downloaded packages of the last 12 months
+const topChart = (top) => {
+  const rowH = 32;
+  const w = 900;
+  const left = 230;
+  const right = 90;
+  const h = top.length * rowH + 10;
+  const max = Math.max(...top.map((p) => p.last365), 1);
+  const iw = w - left - right;
+  const rows = top
+    .map((p, i) => {
+      const y = i * rowH + 5;
+      const barW = (iw * p.last365) / max;
+      return `<text class="bar-label" x="${left - 12}" y="${
+        y + rowH / 2
+      }" text-anchor="end" dominant-baseline="middle">${escapeHtml(
+        p.name
+      )}</text>
+      <rect class="bar" x="${left}" y="${y + 4}" width="${barW.toFixed(
+        1
+      )}" height="${rowH - 12}" rx="3"><title>${escapeHtml(p.name)}: ${fNum(
+        p.last365
+      )} downloads</title></rect>
+      <text class="axis value" x="${(left + barW + 10).toFixed(1)}" y="${
+        y + rowH / 2
+      }" dominant-baseline="middle">${fNum(p.last365)}</text>`;
+    })
+    .join("");
+  return `<svg class="chart" viewBox="0 0 ${w} ${h}" role="img"
+    aria-label="Most downloaded packages over the last 12 months">${rows}</svg>`;
+};
+const setupChartPage = async () => {
+  try {
+    await loadData();
+  } catch (e) {
+    document.getElementById("title").innerHTML = "npm";
+    document.getElementById("charts").innerHTML =
+      `<div class="noresults">Could not reach the npm registry: ${escapeHtml(
+        e.message
+      )}</div>`;
+    return;
+  }
+  document.getElementById("title").innerHTML = `<a href="https://www.npmjs.com/~${user}"
+    target="npm-user">${escapeHtml(user)}</a> downloads`;
+  const months = monthlyTotals();
+  const top = packages
+    .slice()
+    .sort((a, b) => b.last365 - a.last365)
+    .slice(0, topCount)
+    .filter((p) => p.last365);
+  document.getElementById("charts").innerHTML = `
+    <div class="chart-block">
+      <h2>${fNum(totals.last365)} downloads over the last 12 months</h2>
+      <p class="chart-note">
+        All ${totals.packages} packages together, month by month. The last bar
+        covers the current month only up to yesterday.
+      </p>
+      ${monthsChart(months)}
+    </div>
+    <div class="chart-block">
+      <h2>Most downloaded packages</h2>
+      <p class="chart-note">Downloads over the last 12 months.</p>
+      ${topChart(top)}
+    </div>`;
+};

package/js/npm-data.js ADDED Viewed

@@ -0,0 +1,249 @@
+/*
+  npm-pulse - shared data layer
+  https://evoluteur.github.io/npm-pulse/
+  (c) 2026 Olivier Giulieri
+*/
+// --- config options ---------------------------------------------------
+const user = "evoluteur"; // npm maintainer whose packages are shown
+const ghUser = "evoluteur"; // GitHub user (for stars and forks)
+const cacheMinutes = 360; // npm recomputes its stats once a day, no need to refetch often
+// ----------------------------------------------------------------------
+const npmURL = "https://www.npmjs.com/package/";
+const ghURL = `https://github.com/${ghUser}`;
+const cacheKey = "npm-pulse-data";
+let packages = []; // all packages, enriched with downloads and GitHub stats
+let totals = {};
+const periods = {
+  last7: "last 7 days",
+  last30: "last 30 days",
+  last365: "last 12 months",
+};
+// --- formatting -------------------------------------------------------
+const numFormat = new Intl.NumberFormat();
+const fNum = (n) => numFormat.format(n || 0);
+const fDate = (d) => (d ? new Date(d).toDateString().substring(4) : "");
+const fMonth = (ym) => {
+  const [y, m] = ym.split("-");
+  return new Date(y, m - 1, 1).toLocaleString(undefined, { month: "short" });
+};
+const escapeHtml = (txt) =>
+  String(txt)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+// --- fetching ---------------------------------------------------------
+const fetchJSON = async (url) => {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`${response.status} on ${url}`);
+  }
+  return response.json();
+};
+// all packages published by the maintainer
+const fetchPackages = async () => {
+  const data = await fetchJSON(
+    `https://registry.npmjs.org/-/v1/search?text=maintainer:${user}&size=250`
+  );
+  return (data.objects || []).map((o) => o.package);
+};
+// a year of daily downloads, in bulk (the API takes up to 128 packages per call)
+const fetchDownloads = async (names) => {
+  const chunks = [];
+  for (let i = 0; i < names.length; i += 100) {
+    chunks.push(names.slice(i, i + 100));
+  }
+  const answers = await Promise.all(
+    chunks.map((chunk) =>
+      fetchJSON(
+        `https://api.npmjs.org/downloads/range/last-year/${chunk.join(",")}`
+      ).catch(() => null)
+    )
+  );
+  const all = {};
+  answers.forEach((answer) => {
+    if (!answer) return;
+    // asking for a single package answers with one object rather than a map
+    const map = answer.package ? { [answer.package]: answer } : answer;
+    Object.keys(map).forEach((name) => {
+      if (map[name]) {
+        all[name] = map[name].downloads || [];
+      }
+    });
+  });
+  return all;
+};
+// stars and forks are a bonus: GitHub throttles anonymous calls at 60/hour
+const fetchRepos = async () => {
+  try {
+    const list = await fetchJSON(
+      `https://api.github.com/users/${ghUser}/repos?per_page=100`
+    );
+    const map = {};
+    list.forEach((r) => {
+      map[r.name.toLowerCase()] = {
+        name: r.name,
+        stars: r.stargazers_count,
+        forks: r.forks_count,
+        language: r.language,
+        homepage: r.homepage,
+      };
+    });
+    return map;
+  } catch (e) {
+    return {};
+  }
+};
+// --- deriving ---------------------------------------------------------
+// "git+https://github.com/evoluteur/healing-frequencies.git" -> "healing-frequencies"
+const repoOf = (pkg) => {
+  const url = (pkg.links || {}).repository;
+  if (!url) return "";
+  const match = url
+    .replace(/\.git$/, "")
+    .replace(/\/$/, "")
+    .match(/github\.com[/:]([^/]+)\/([^/]+)$/);
+  return match ? match[2] : "";
+};
+const sumDays = (days, from, to) =>
+  days.slice(from, to).reduce((total, d) => total + (d.downloads || 0), 0);
+// 52 weekly buckets, oldest first, for the sparklines
+const weeklyBuckets = (days) => {
+  const weeks = [];
+  const year = days.slice(-364);
+  for (let i = 0; i < year.length; i += 7) {
+    weeks.push(sumDays(year, i, i + 7));
+  }
+  return weeks;
+};
+const build = (pkgs, downloads, repos) => {
+  packages = pkgs.map((pkg) => {
+    const days = downloads[pkg.name] || [];
+    const repoName = repoOf(pkg);
+    const repo = repos[repoName.toLowerCase()];
+    const last30 = sumDays(days, -30);
+    const previous30 = sumDays(days, -60, -30);
+    return {
+      name: pkg.name,
+      version: pkg.version || "",
+      description: pkg.description || "",
+      date: pkg.date,
+      repo: repoName,
+      homepage: (pkg.links || {}).homepage || (repo && repo.homepage) || "",
+      language: repo ? repo.language : "",
+      stars: repo ? repo.stars : 0,
+      forks: repo ? repo.forks : 0,
+      days,
+      weeks: weeklyBuckets(days),
+      last7: sumDays(days, -7),
+      last30,
+      last365: sumDays(days, -365),
+      // growth of the last 30 days over the 30 days before them
+      trend: previous30
+        ? Math.round(((last30 - previous30) / previous30) * 100)
+        : null,
+    };
+  });
+  const add = (field) => packages.reduce((t, p) => t + p[field], 0);
+  totals = {
+    packages: packages.length,
+    last7: add("last7"),
+    last30: add("last30"),
+    last365: add("last365"),
+    stars: add("stars"),
+    forks: add("forks"),
+  };
+  return packages;
+};
+// total downloads per month, across all packages, oldest first
+const monthlyTotals = () => {
+  const months = {};
+  packages.forEach((p) =>
+    p.days.forEach((d) => {
+      const month = d.day.substring(0, 7);
+      months[month] = (months[month] || 0) + (d.downloads || 0);
+    })
+  );
+  const keys = Object.keys(months).sort();
+  // the first month is only partially covered by a "last-year" range
+  keys.shift();
+  return keys.map((month) => ({ month, downloads: months[month] }));
+};
+// --- caching ----------------------------------------------------------
+const readCache = () => {
+  try {
+    const cache = JSON.parse(localStorage.getItem(cacheKey));
+    if (!cache || cache.user !== user) return null;
+    if (Date.now() - cache.time > cacheMinutes * 60000) return null;
+    return cache.data;
+  } catch (e) {
+    return null;
+  }
+};
+const writeCache = (data) => {
+  try {
+    localStorage.setItem(cacheKey, JSON.stringify({ user, time: Date.now(), data }));
+  } catch (e) {
+    // a year of daily downloads can outgrow the quota, the page works without the cache
+  }
+};
+const clearCache = () => {
+  try {
+    localStorage.removeItem(cacheKey);
+  } catch (e) {}
+  location.reload();
+};
+// --- entry point ------------------------------------------------------
+const loadData = async () => {
+  const cached = readCache();
+  if (cached) {
+    build(cached.pkgs, cached.downloads, cached.repos);
+    return { cached: true, time: cached.time };
+  }
+  const pkgs = await fetchPackages();
+  const names = pkgs.map((p) => p.name);
+  const [downloads, repos] = await Promise.all([
+    fetchDownloads(names),
+    fetchRepos(),
+  ]);
+  build(pkgs, downloads, repos);
+  writeCache({ pkgs, downloads, repos, time: Date.now() });
+  return { cached: false, time: Date.now() };
+};
+// --- icons ------------------------------------------------------------
+const icoStar = `<span class="crud-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"></path></svg></span>`;
+const icoDownload = `<span class="crud-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"></path></svg></span>`;
+const icoBox = `<span class="crud-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12,2L2,7V17L12,22L22,17V7L12,2M12,4.2L19.2,7.8L12,11.4L4.8,7.8L12,4.2M4,9.4L11,12.9V19.6L4,16.1V9.4M13,19.6V12.9L20,9.4V16.1L13,19.6Z"></path></svg></span>`;
+const icoChart = `<span class="crud-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z"></path></svg></span>`;

package/js/pulse.js ADDED Viewed

@@ -0,0 +1,186 @@
+/*
+  npm-pulse - package cards
+  https://evoluteur.github.io/npm-pulse/
+  (c) 2026 Olivier Giulieri
+*/
+let selection = [];
+let period = localStorage.getItem("npm-pulse-period") || "last30";
+let sortField = localStorage.getItem("npm-pulse-sort") || "downloads";
+let searchString = "";
+// --- sparkline --------------------------------------------------------
+// 52 weeks of downloads drawn as an area and a line, no library, no axis
+const sparkHTML = (pkg) => {
+  const weeks = pkg.weeks;
+  if (weeks.length < 2 || !pkg.last365) {
+    return `<div class="spark-empty">no downloads reported yet</div>`;
+  }
+  const w = 300;
+  const h = 46;
+  const max = Math.max(...weeks, 1);
+  const points = weeks.map((v, i) => {
+    const x = (i / (weeks.length - 1)) * w;
+    const y = h - 3 - (v / max) * (h - 8);
+    return `${x.toFixed(1)},${y.toFixed(1)}`;
+  });
+  const peak = weeks.indexOf(max);
+  const peakX = ((peak / (weeks.length - 1)) * w).toFixed(1);
+  const peakY = (h - 3 - (h - 8)).toFixed(1);
+  return `<svg class="spark" viewBox="0 0 ${w} ${h}" preserveAspectRatio="none"
+    role="img" aria-label="Weekly downloads over the last 12 months, peak of ${fNum(
+      max
+    )}">
+    <polygon points="0,${h} ${points.join(" ")} ${w},${h}"></polygon>
+    <polyline points="${points.join(" ")}"></polyline>
+    <circle cx="${peakX}" cy="${peakY}" r="2.5"></circle>
+  </svg>`;
+};
+// --- cards ------------------------------------------------------------
+const trendHTML = (pkg) => {
+  if (pkg.trend === null || !pkg.last30) return "";
+  const up = pkg.trend >= 0;
+  return `<span class="trend ${up ? "up" : "down"}" title="${
+    up ? "up" : "down"
+  } ${Math.abs(pkg.trend)}% over the previous 30 days">${up ? "▲" : "▼"} ${Math.abs(
+    pkg.trend
+  )}%</span>`;
+};
+const linksHTML = (pkg) => {
+  const n = pkg.name;
+  const links = [`<a href="${npmURL}${n}" target="npm-${n}">npm</a>`];
+  if (pkg.repo) {
+    links.push(`<a href="${ghURL}/${pkg.repo}" target="code-${n}">Code</a>`);
+  }
+  if (pkg.homepage) {
+    links.push(`<a href="${pkg.homepage}" target="demo-${n}">Demo</a>`);
+  }
+  links.push(
+    `<a href="https://npm-stat.com/charts.html?package=${n}" target="stat-${n}">Charts</a>`
+  );
+  const lang = pkg.language
+    ? `<span class="lang">${escapeHtml(pkg.language)}</span>`
+    : "";
+  return lang + links.join(" - ");
+};
+const statsHTML = (pkg) => {
+  const bits = [];
+  if (pkg.stars) {
+    bits.push(
+      `<a href="${ghURL}/${pkg.repo}/stargazers" target="stars-${pkg.name}" aria-label="stars">${icoStar} ${pkg.stars}</a>`
+    );
+  }
+  return bits.join(" ");
+};
+const cardHTML = (pkg) => `<div class="project-card">
+  <div>
+    <h2 class="pcard-title">
+      <span><a href="${npmURL}${pkg.name}" target="npm-${pkg.name}">${escapeHtml(
+  pkg.name
+)}</a></span>
+      <span class="dls" title="downloads ${periods[period]}">${icoDownload} ${fNum(
+  pkg[period]
+)}</span>
+    </h2>
+    ${sparkHTML(pkg)}
+    <div class="desc">${escapeHtml(pkg.description || pkg.name)}</div>
+    <div class="p-links">${linksHTML(pkg)}</div>
+  </div>
+  <div class="pcard-foot">
+    <span>v${escapeHtml(pkg.version)} - ${fDate(pkg.date)}</span>
+    <span class="stats">${trendHTML(pkg)} ${statsHTML(pkg)}</span>
+  </div>
+</div>`;
+// --- filtering and sorting --------------------------------------------
+const applySort = () => {
+  const field = sortField === "downloads" ? period : sortField;
+  const alpha = field === "name";
+  const way = alpha ? 1 : -1;
+  selection.sort((a, b) => {
+    const av = a[field] === null ? -Infinity : a[field];
+    const bv = b[field] === null ? -Infinity : b[field];
+    if (av === bv) return a.name > b.name ? 1 : -1;
+    return way * (av > bv ? 1 : -1);
+  });
+};
+const applyFilter = () => {
+  const s = searchString.toLowerCase();
+  selection = s
+    ? packages.filter(
+        (p) =>
+          p.name.toLowerCase().includes(s) ||
+          p.description.toLowerCase().includes(s)
+      )
+    : packages.slice();
+};
+const refresh = () => {
+  applyFilter();
+  applySort();
+  const html = selection.map(cardHTML).join("");
+  document.getElementById("packages").innerHTML =
+    html ||
+    `<div class="noresults">No results. The search criteria is too restrictive.</div>`;
+  const shown = selection.length;
+  const downloads = selection.reduce((t, p) => t + p[period], 0);
+  document.getElementById("summary").innerHTML = `${shown} package${
+    shown === 1 ? "" : "s"
+  } - ${fNum(downloads)} downloads ${periods[period]}`;
+};
+const filter = (value) => {
+  searchString = value;
+  refresh();
+};
+const sort = (value) => {
+  sortField = value;
+  localStorage.setItem("npm-pulse-sort", value);
+  refresh();
+};
+const setPeriod = (value) => {
+  period = value;
+  localStorage.setItem("npm-pulse-period", value);
+  refresh();
+};
+// --- page -------------------------------------------------------------
+const titleHTML = () => `<a href="https://www.npmjs.com/~${user}" target="npm-user">${escapeHtml(
+  user
+)}</a> on npm
+  <span class="totals">
+    <span title="packages">${icoBox} ${totals.packages}</span>
+    <span title="downloads in the last 12 months">${icoDownload} ${fNum(
+  totals.last365
+)}</span>
+    ${totals.stars ? `<span title="stars on GitHub">${icoStar} ${totals.stars}</span>` : ""}
+  </span>`;
+const setupPulsePage = async () => {
+  document.getElementById("sortPicker").value = sortField;
+  document.getElementById("periodPicker").value = period;
+  try {
+    await loadData();
+  } catch (e) {
+    document.getElementById("title").innerHTML = "npm";
+    document.getElementById(
+      "packages"
+    ).innerHTML = `<div class="noresults">Could not reach the npm registry: ${escapeHtml(
+      e.message
+    )}</div>`;
+    return;
+  }
+  document.getElementById("title").innerHTML = titleHTML();
+  refresh();
+};

package/npm-pulse-charts.png ADDED Viewed

Binary file

package/npm-pulse.png ADDED Viewed

Binary file

package/package.json ADDED Viewed

@@ -0,0 +1,30 @@
+{
+  "name": "evol-npm-pulse",
+  "version": "1.0.0",
+  "description": "One page dashboard for all your npm packages: downloads over the last week, month, and year, weekly sparklines, trends, and GitHub stars.",
+  "repository": "github:evoluteur/npm-pulse",
+  "homepage": "https://evoluteur.github.io/npm-pulse/",
+  "copyright": "(c) 2026 Olivier Giulieri",
+  "author": "Olivier Giulieri (https://evoluteur.github.io/)",
+  "license": "MIT",
+  "keywords": [
+    "npm",
+    "downloads",
+    "download-counts",
+    "packages",
+    "registry",
+    "stats",
+    "statistics",
+    "dashboard",
+    "sparkline",
+    "trends",
+    "chart",
+    "svg",
+    "portfolio",
+    "github",
+    "stars",
+    "open-source",
+    "javascript",
+    "vanilla-js"
+  ]
+}

package/robots.txt ADDED Viewed

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+Sitemap: https://evoluteur.github.io/npm-pulse/sitemap.xml

package/sitemap.xml ADDED Viewed

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://evoluteur.github.io/npm-pulse/</loc>
+  </url>
+  <url>
+    <loc>https://evoluteur.github.io/npm-pulse/chart.html</loc>
+  </url>
+</urlset>