Add bookmarkable anchors to news items

app/components/Anchor.tsx

@@ -0,0 +1,25 @@
+/*!
+ * Copyright © 2023 United States Government as represented by the
+ * Administrator of the National Aeronautics and Space Administration.
+ * All Rights Reserved.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { slug } from 'github-slugger'
+
+/**
+ * Wrap an element in a linkable anchor.
+ *
+ * This provides similar functionality to
+ * https://github.com/rehypejs/rehype-slug and
+ * https://github.com/rehypejs/rehype-autolink-headings
+ * but on arbitrary text (not just headings).
+ */
+export function Anchor({ children }: { children: string }) {
+  const id = slug(children)
+  return (
+    <a href={`#${id}`} id={id}>
+      {children}
+    </a>
+  )
+}

app/routes/news.mdx

@@ -12,6 +12,8 @@ import {
   GridContainer,
 } from '@trussworks/react-uswds'
 
+import { Anchor } from '~/components/Anchor'
+
 <GridContainer className="usa-section">
 
 # GCN News and Events
@@ -27,7 +29,7 @@ import {
       }
     >
       <CollectionHeading headingLevel="h3">
-        GCN Classic Outage Due to Local Network Maintenance
+        <Anchor>GCN Classic Outage Due to Local Network Maintenance</Anchor>
       </CollectionHeading>
       <CollectionDescription>
       Due to planned network maintenance at GSFC, the connections to GCN Classic will be offline on Saturday, May 6 from 8AM ET (12:00 UTC) and concluding no later than 3PM ET (19:00 UTC).  This affects the following GCN services:
@@ -44,7 +46,7 @@ import {
       }
     >
       <CollectionHeading headingLevel="h3">
-        New GCN Circulars Service Coming April 17, 2023
+        <Anchor>New GCN Circulars Service Coming April 17, 2023</Anchor>
       </CollectionHeading>
       <CollectionDescription>
         We are pleased to announce that on April 17, 2023, the General Coordinates Network will launch the most significant overhaul of GCN Circulars since its inception in 1997. The modernized GCN Circulars experience will be part of the new GCN web site.
@@ -86,7 +88,7 @@ import {
       }
     >
       <CollectionHeading headingLevel="h3">
-        New GECAM Notice Types Available
+        <Anchor>New GECAM Notice Types Available</Anchor>
       </CollectionHeading>
       <CollectionDescription>
         GCN now distributes notices from the
@@ -104,7 +106,7 @@ import {
       variantComponent={<CollectionCalendarDate datetime={'September 2, 2022'} />}
     >
       <CollectionHeading headingLevel="h3">
-        Self-Service Configuration of Email Notifications for GCN Notices
+        <Anchor>Self-Service Configuration of Email Notifications for GCN Notices</Anchor>
       </CollectionHeading>
       <CollectionDescription>
         Have GCN Notices delivered to your email inbox by signing up and managing
@@ -121,7 +123,7 @@ import {
       className="maxw-none"
       variantComponent={<CollectionCalendarDate datetime={'August 1, 2022'} />}
     >
-      <CollectionHeading headingLevel="h3">New GCN Webinars</CollectionHeading>
+      <CollectionHeading headingLevel="h3"><Anchor>New GCN Webinars</Anchor></CollectionHeading>
       <CollectionDescription>
         GCN held three public webinars to introduce the new GCN, the GCN Classic
         over Kafka service, and plans for new features and feedback. See the
@@ -133,7 +135,7 @@ import {
       variantComponent={<CollectionCalendarDate datetime={'July 20, 2022'} />}
     >
       <CollectionHeading headingLevel="h3">
-        GCN Classic over Kafka Now Available
+        <Anchor>GCN Classic over Kafka Now Available</Anchor>
       </CollectionHeading>
       <CollectionDescription>
         All three classic GCN Notice formats (text, VOEvent, 160-byte binary

package.json

@@ -45,6 +45,7 @@
     "dayjs": "^1.11.9",
     "downshift": "^7.2.1",
     "email-validator": "^2.0.4",
+    "github-slugger": "^2.0.0",
     "highlight.js": "^11.8.0",
     "isbot": "^3.6.13",
     "lodash": "^4.17.21",

remix.config.mjs

@@ -7,6 +7,10 @@ import remarkGfm from 'remark-gfm'
 
 const isProduction = process.env.NODE_ENV === 'production'
 
+// These packages only work in ESM mode, so we *must* bundle them
+// (at least until we switch the sererModuleFormat to ESM).
+const esmOnlyModules = ['github-slugger']
+
 /** @type {import('@remix-run/dev').AppConfig} */
 export default {
   mdx: {
@@ -39,9 +43,10 @@ export default {
   server: './server.ts',
   serverBuildPath: 'build/server/index.js',
   serverMinify: isProduction,
-  serverDependenciesToBundle: isProduction
-    ? [/^(?!@?aws-sdk(\/|$))/]
-    : undefined,
+  serverDependenciesToBundle: [
+    ...esmOnlyModules,
+    ...(isProduction ? [/^(?!@?aws-sdk(\/|$))/] : []),
+  ],
   future: {
     v2_dev: true,
     v2_headers: true,