Merge pull request #225 from nemarOrg/staging

Release v0.2.2: drop the Community placeholder, mark outbound links

Author: neuromechanist

package.json

@@ -1,7 +1,7 @@
 {
   "name": "nemar-website",
   "type": "module",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "private": true,
   "license": "CC-BY-NC-ND-4.0",
   "description": "nemar.org redesign on Astro + Cloudflare Pages",

src/components/ExternalLink.astro

@@ -0,0 +1,85 @@
+---
+/**
+ * A link that leaves nemar.org, marked as such and opened in a new tab.
+ *
+ * The NEMAR surfaces a visitor can reach from the nav and footer are not all
+ * one site: the citation dashboard (`nemarOrg/nemar-citations`) and the
+ * documentation (`nemarOrg/docs`) are separately built and deployed, as are
+ * the data/api hosts. Navigating to one in place drops the visitor out of the
+ * site they were reading with only the back button to return, and the old
+ * markup gave no warning that was about to happen.
+ *
+ * Deliberately NOT applied to every `rel="external"` link in the codebase.
+ * Download anchors (`BidsTree.astro`'s per-file links, the archive action)
+ * also carry `rel="external"`, and neither the arrow nor `target="_blank"`
+ * belongs on those: they trigger a download rather than a navigation, so the
+ * arrow would promise a page that never appears. This component is for
+ * links that genuinely navigate somewhere else.
+ *
+ * `rel="noopener"` is what actually matters with `target="_blank"` — without
+ * it the opened page gets a live `window.opener` handle back to this one.
+ * `noreferrer` rides along; these are all first-party NEMAR destinations, but
+ * there is nothing here worth leaking a referrer for either.
+ */
+interface Props {
+  href: string;
+  /** Extra classes for the anchor, so callers keep their own layout styles. */
+  class?: string;
+  /** Set for links whose visible text is already a URL/host, where "opens in
+   *  a new tab" is the only thing the announcement needs to add. */
+  label?: string;
+}
+
+const { href, class: className, label } = Astro.props;
+---
+
+<a
+  href={href}
+  class:list={["external-link", className]}
+  target="_blank"
+  rel="noopener noreferrer external"
+>
+  <slot />
+  {label && <span class="visually-hidden">{label}</span>}
+  {/* Announced as "(opens in a new tab)" rather than left to the icon alone —
+      a decorative arrow tells a sighted user what is about to happen and a
+      screen-reader user nothing at all. */}
+  <span class="visually-hidden">(opens in a new tab)</span>
+  <svg
+    class="external-link__icon"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M7 17 17 7M9 7h8v8" />
+  </svg>
+</a>
+
+<style>
+  .external-link {
+    /* inline-flex, not inline: keeps the arrow on the same line as the last
+       word and vertically centred against it, without the baseline drift a
+       plain inline SVG gets. */
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25em;
+  }
+  /* Sized in em so it tracks whatever type scale the caller is using — the
+     nav, the footer columns, and the footer's smaller build line all render
+     this at their own size without passing anything in. */
+  .external-link__icon {
+    inline-size: 0.75em;
+    block-size: 0.75em;
+    flex: none;
+    /* The arrow is supporting information, not part of the label. */
+    opacity: 0.7;
+  }
+  .external-link:hover .external-link__icon,
+  .external-link:focus-visible .external-link__icon {
+    opacity: 1;
+  }
+</style>

src/components/Footer.astro

@@ -3,6 +3,7 @@ import { apiBase } from "../lib/api-base";
 import { APP_VERSION, BUILD_REF } from "../lib/build-info";
 import { resolveDataBase } from "../lib/data-base";
 import { resolveDocsBase } from "../lib/docs-base";
+import ExternalLink from "./ExternalLink.astro";
 
 const year = new Date().getFullYear();
 
@@ -48,24 +49,28 @@ const versionUrl = isRelease ? `${REPO_URL}/releases/tag/v${APP_VERSION}` : `${R
         <h3>Explore</h3>
         <ul role="list">
           <li><a href="/discover">Discover</a></li>
-          <li><a href="https://dashboard.nemar.org/citations">Citations</a></li>
-          <li><a href="https://docs.nemar.org">Documentation</a></li>
+          <li><ExternalLink href="https://dashboard.nemar.org/citations/">Citations</ExternalLink></li>
+          <li><ExternalLink href="https://docs.nemar.org">Documentation</ExternalLink></li>
         </ul>
       </div>
       <div>
-        <h3>Community</h3>
+        {/* Was "Community", with a "Forum" link to a placeholder page
+            promising a forum that does not exist (website#222). Both are gone.
+            The heading is now "Project", which describes what is actually
+            under it — About and Support — rather than a community surface
+            NEMAR does not run. */}
+        <h3>Project</h3>
         <ul role="list">
-          <li><a href="/community">Forum</a></li>
           <li><a href="/about">About</a></li>
           <li><a href="/support">Support</a></li>
         </ul>
       </div>
       <div>
         <h3>Data</h3>
         <ul role="list">
-          <li><a href={`https://${dataHost}/`}>{dataHost}</a></li>
-          <li><a href={`https://${apiHost}/`}>{apiHost}</a></li>
-          <li><a href={`https://${docsHost}/`}>{docsHost}</a></li>
+          <li><ExternalLink href={`https://${dataHost}/`}>{dataHost}</ExternalLink></li>
+          <li><ExternalLink href={`https://${apiHost}/`}>{apiHost}</ExternalLink></li>
+          <li><ExternalLink href={`https://${docsHost}/`}>{docsHost}</ExternalLink></li>
         </ul>
       </div>
       <div>
@@ -80,8 +85,8 @@ const versionUrl = isRelease ? `${REPO_URL}/releases/tag/v${APP_VERSION}` : `${R
               the code, nemarDatasets holds one repository per dataset. Both
               are public and worth surfacing — people looking for the data
               repos never find them under nemarOrg. */}
-          <li><a href="https://github.com/nemarOrg" rel="external">nemarOrg</a></li>
-          <li><a href="https://github.com/nemarDatasets" rel="external">nemarDatasets</a></li>
+          <li><ExternalLink href="https://github.com/nemarOrg">nemarOrg</ExternalLink></li>
+          <li><ExternalLink href="https://github.com/nemarDatasets">nemarDatasets</ExternalLink></li>
         </ul>
       </div>
     </nav>
@@ -166,8 +171,11 @@ const versionUrl = isRelease ? `${REPO_URL}/releases/tag/v${APP_VERSION}` : `${R
     </p>
     <span class="site-footer__sep" aria-hidden="true">&middot;</span>
     <p>
-      Built with <a href="https://astro.build">Astro</a> on
-      <a href="https://pages.cloudflare.com">Cloudflare Pages</a>
+      {/* Marked like every other outbound link. Two arrows in one short line
+          is busier than leaving them bare, but a marker applied only to the
+          links someone judged important stops being a reliable signal. */}
+      Built with <ExternalLink href="https://astro.build">Astro</ExternalLink> on
+      <ExternalLink href="https://pages.cloudflare.com">Cloudflare Pages</ExternalLink>
     </p>
   </div>
 </footer>
@@ -222,11 +230,15 @@ const versionUrl = isRelease ? `${REPO_URL}/releases/tag/v${APP_VERSION}` : `${R
     flex-direction: column;
     gap: var(--space-2);
   }
-  .site-footer__nav a {
+  /* `:global(a)` for the same reason as Nav.astro: the outbound entries render
+     their anchor inside ExternalLink.astro, which carries that component's
+     scope id, so a scoped descendant selector misses them and they fall back
+     to the default link colour and size. Scoping stays on the container. */
+  .site-footer__nav :global(a) {
     color: var(--color-fg-muted);
     font-size: var(--fs-sm);
   }
-  .site-footer__nav a:hover {
+  .site-footer__nav :global(a:hover) {
     color: var(--color-fg);
   }
   /* Credits band: SCCN + SDSC as the makers, then sponsors and partners. Logos

src/components/Nav.astro

@@ -2,6 +2,7 @@
 import { getSession } from "../lib/auth";
 import { appUrl, hostMode, marketingUrl } from "../lib/host";
 import Brand from "./Brand.astro";
+import ExternalLink from "./ExternalLink.astro";
 import ThemeToggle from "./ThemeToggle.astro";
 import UserMenu from "./UserMenu.astro";
 
@@ -10,15 +11,26 @@ const pathname = url.pathname;
 const mode = hostMode(url.hostname);
 const session = getSession(Astro.locals);
 
+// "Community" is gone (website#222). It pointed at a placeholder page
+// promising a forum that does not exist and was not being built; a nav entry
+// for a surface with nothing behind it is worse than no entry. Per-dataset
+// discussion is the real need it was standing in for, and that is tracked
+// separately against the dataset repositories' GitHub issues.
+//
+// Citation Dashboard and Documentation are separate deployments
+// (`nemarOrg/nemar-citations`, `nemarOrg/docs`), not routes on this site —
+// hence the absolute URLs, and hence `isExternal` below.
 const marketingLinks = [
   { href: "/about", label: "About" },
   { href: "/discover", label: "Discover" },
-  { href: "https://dashboard.nemar.org/citations", label: "Citation Dashboard" },
-  { href: "/community", label: "Community" },
+  { href: "https://dashboard.nemar.org/citations/", label: "Citation Dashboard" },
   { href: "https://docs.nemar.org", label: "Documentation" },
   { href: "/support", label: "Support" },
 ];
 
+/** A nav target that leaves this site, and so opens in a new tab. */
+const isExternal = (href: string) => href.startsWith("http");
+
 // On the app host the nav depends on whether we can keep the user here.
 //
 // Signed in: relative links, so the marketing routes render on the app host
@@ -55,16 +67,16 @@ const signInHref = appUrl("/login", url.hostname);
         {
           links.map((link) => (
             <li>
-              <a
-                href={link.href}
-                aria-current={
-                  link.href.startsWith("/") && pathname.startsWith(link.href)
-                    ? "page"
-                    : undefined
-                }
-              >
-                {link.label}
-              </a>
+              {isExternal(link.href) ? (
+                <ExternalLink href={link.href}>{link.label}</ExternalLink>
+              ) : (
+                <a
+                  href={link.href}
+                  aria-current={pathname.startsWith(link.href) ? "page" : undefined}
+                >
+                  {link.label}
+                </a>
+              )}
             </li>
           ))
         }
@@ -125,7 +137,13 @@ const signInHref = appUrl("/login", url.hostname);
     justify-content: center;
     align-items: center;
   }
-  .primary-nav__list a {
+  /* `:global(a)`, not a bare `a`: the external entries render their anchor
+     inside ExternalLink.astro, which carries that component's scope id rather
+     than this one's, so a scoped descendant selector would not reach them —
+     Citation Dashboard and Documentation fell back to the default link style
+     and sat in the nav at the wrong colour and size. The container class keeps
+     its own scope, so this stays confined to this nav. */
+  .primary-nav__list :global(a) {
     display: inline-flex;
     align-items: center;
     min-block-size: 44px;
@@ -137,10 +155,10 @@ const signInHref = appUrl("/login", url.hostname);
     text-decoration: none;
     transition: color 0.15s ease;
   }
-  .primary-nav__list a:hover {
+  .primary-nav__list :global(a:hover) {
     color: var(--color-fg);
   }
-  .primary-nav__list a[aria-current="page"] {
+  .primary-nav__list :global(a[aria-current="page"]) {
     color: var(--color-fg);
     box-shadow: inset 0 -2px 0 var(--brand-teal);
   }

src/lib/host.test.ts

@@ -73,7 +73,6 @@ describe("isAppRoute", () => {
     "/discover",
     "/about",
     "/support",
-    "/community",
     "/citation-dashboard",
     "/docs",
     "/docs/getting-started",
@@ -193,7 +192,7 @@ describe("getRetiredRedirect", () => {
 
   it("redirects the retired citation dashboard to dashboard.nemar.org", () => {
     expect(getRetiredRedirect(u("/citation-dashboard"))).toBe(
-      "https://dashboard.nemar.org/citations",
+      "https://dashboard.nemar.org/citations/",
     );
   });
 
@@ -417,7 +416,7 @@ describe("getCrossHostRedirect with a session", () => {
   const url = (host: string, pathAndSearch: string) => new URL(`https://${host}${pathAndSearch}`);
 
   it("keeps marketing routes on the app host for a signed-in user", () => {
-    for (const path of ["/discover", "/about", "/support", "/community", "/"]) {
+    for (const path of ["/discover", "/about", "/support", "/"]) {
       expect(getCrossHostRedirect(url(APP_HOST, path), { hasSession: true })).toBeNull();
     }
   });

src/lib/host.ts

@@ -357,7 +357,10 @@ export function getRetiredRedirect(url: URL): string | null {
   if (mapped) return mapped;
   if (path === "/docs" || path.startsWith("/docs/")) return "https://docs.nemar.org/";
   if (path === "/citation-dashboard" || path.startsWith("/citation-dashboard/")) {
-    return "https://dashboard.nemar.org/citations";
+    // Trailing slash is the canonical form — `/citations` 308s to `/citations/`,
+    // so omitting it costs every visitor an extra round trip on top of the
+    // redirect that got them here.
+    return "https://dashboard.nemar.org/citations/";
   }
   return null;
 }