↗︎ for external sidebar links (#1342)

Author: mbostock

docs/style.css

@@ -6,18 +6,21 @@
   color: inherit;
 }
 
-#observablehq-header a[target="_blank"] {
+#observablehq-header a[target="_blank"],
+.observablehq-link a[target="_blank"] {
   display: flex;
   align-items: center;
   gap: 0.25rem;
   text-decoration: none;
 }
 
-#observablehq-header a[target="_blank"]:hover span {
+#observablehq-header a[target="_blank"]:hover span,
+.observablehq-link a[target="_blank"]:hover span {
   text-decoration: underline;
 }
 
-#observablehq-header a[target="_blank"]::after {
+#observablehq-header a[target="_blank"]::after,
+.observablehq-link a[target="_blank"]::after {
   content: "\2197";
 }
 
@@ -29,6 +32,10 @@
   color: var(--theme-foreground-muted);
 }
 
+.observablehq-link a[target="_blank"]:not(:hover, :focus)::after {
+  color: var(--theme-foreground-faint);
+}
+
 #observablehq-main {
   min-height: calc(100vh - 23.8rem);
 }

src/render.ts

@@ -197,10 +197,11 @@ function renderToc(headers: Header[], label: string): Html {
 }
 
 function renderListItem(page: Page, path: string, resolveLink: (href: string) => string): Html {
+  const external = !isAssetPath(page.path);
   return html`\n    <li class="observablehq-link${
     normalizePath(page.path) === path ? " observablehq-link-active" : ""
-  }"><a href="${encodeURI(resolveLink(page.path))}"${isAssetPath(page.path) ? null : html` target="_blank"`}>${
-    page.name
+  }"><a href="${encodeURI(resolveLink(page.path))}"${external ? html` target="_blank"` : null}>${
+    external ? html`<span>${page.name}</span>` : page.name
   }</a></li>`;
 }