show stars in header (#1125)

Author: mbostock

docs/style.css

@@ -21,6 +21,10 @@
   content: "\2197";
 }
 
+#observablehq-header a[target="_blank"][data-decoration]::after {
+  content: attr(data-decoration);
+}
+
 #observablehq-header a[target="_blank"]:not(:hover, :focus)::after {
   color: var(--theme-foreground-muted);
 }

observablehq.config.ts

@@ -1,3 +1,13 @@
+import {formatPrefix} from "d3-format";
+
+let stargazers_count: number;
+try {
+  ({stargazers_count} = await github("/repos/observablehq/framework"));
+} catch (error) {
+  if (process.env.CI) throw error;
+  stargazers_count = NaN;
+}
+
 export default {
   output: "docs/.observablehq/dist",
   title: "Observable Framework",
@@ -106,13 +116,31 @@ export default {
     <a href="/">
       <span class="hide-if-small">Observable</span> Framework
     </a>
-    <span style="display: flex; align-items: baseline; gap: 0.5rem; font-size: 14px;">
-      <a target="_blank" href="https://github.com/observablehq/framework/releases"><span>${process.env.npm_package_version}</span></a>
-      <a target="_blank" href="https://github.com/observablehq/framework"><span>GitHub</span></a>
+    <span style="display: flex; align-items: baseline; gap: 1rem; font-size: 14px;">
+      <a target="_blank" href="https://github.com/observablehq/framework/releases"><span>${
+        process.env.npm_package_version
+      }</span></a>
+      <a target="_blank" data-decoration="★" href="https://github.com/observablehq/framework"><span>GitHub️ ${
+        stargazers_count ? formatPrefix(".1s", 1000)(stargazers_count) : ""
+      }</span></a>
     </span>
   </div>
 </div>`,
   footer: `© ${new Date().getUTCFullYear()} Observable, Inc.`,
   style: "style.css",
   search: true
 };
+
+async function github(
+  path: string,
+  {
+    authorization = process.env.GITHUB_TOKEN && `token ${process.env.GITHUB_TOKEN}`,
+    accept = "application/vnd.github.v3+json"
+  } = {}
+) {
+  const url = new URL(path, "https://api.github.com");
+  const headers = {...(authorization && {authorization}), accept};
+  const response = await fetch(url, {headers});
+  if (!response.ok) throw new Error(`fetch error: ${response.status} ${url}`);
+  return await response.json();
+}

package.json

@@ -90,6 +90,7 @@
   "devDependencies": {
     "@types/cross-spawn": "^6.0.6",
     "@types/d3-array": "^3.2.1",
+    "@types/d3-format": "^3.0.4",
     "@types/he": "^1.2.3",
     "@types/jsdom": "^21.1.6",
     "@types/markdown-it": "^13.0.2",
@@ -107,6 +108,7 @@
     "chai-http": "^4.4.0",
     "concurrently": "^8.2.2",
     "d3-dsv": "^3.0.1",
+    "d3-format": "^3.1.0",
     "eslint": "^8.50.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",

yarn.lock

@@ -518,6 +518,11 @@
   resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-3.2.1.tgz#1f6658e3d2006c4fceac53fde464166859f8b8c5"
   integrity sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==
 
+"@types/d3-format@^3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-format/-/d3-format-3.0.4.tgz#b1e4465644ddb3fdf3a263febb240a6cd616de90"
+  integrity sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==
+
 "@types/[email protected]", "@types/estree@^1.0.0":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
@@ -1209,6 +1214,11 @@ d3-dsv@^3.0.1:
     iconv-lite "0.6"
     rw "1"
 
+d3-format@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-3.1.0.tgz#9260e23a28ea5cb109e93b21a06e24e2ebd55641"
+  integrity sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==
+
 d3-require@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/d3-require/-/d3-require-1.3.0.tgz#2b97f5e2ebcb64ac0c63c11f30056aea1c74f0ec"