Packet/july 7

apps/site/astro.config.mjs

@@ -23,6 +23,30 @@ const robotsTxtConfig = {
   ],
 };
 
+function externalLinks() {
+  return (tree) => {
+    tree.children?.forEach(function walk(node) {
+      if (
+        node.tagName === 'a' &&
+        typeof node.properties?.href === 'string' &&
+        (node.properties.href.startsWith('http://') ||
+          node.properties.href.startsWith('https://'))
+      ) {
+        node.properties.target = '_blank';
+        node.properties.rel = 'noopener noreferrer';
+        node.properties.className = [
+          ...(Array.isArray(node.properties.className)
+            ? node.properties.className
+            : []),
+          'usa-link',
+          'usa-link--external',
+        ];
+      }
+      node.children?.forEach(walk);
+    });
+  };
+}
+
 export default defineConfig({
   site: siteUrl,
   integrations: [
@@ -34,6 +58,7 @@ export default defineConfig({
   ],
   markdown: {
     remarkPlugins: [['remark-excerpt', { remove: true }]],
+    rehypePlugins: [externalLinks],
   },
   vite: {
     optimizeDeps: {

apps/site/package.json

@@ -28,6 +28,7 @@
     "js-yaml": "^4.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-hook-form": "^7.79.0",
     "remark-excerpt": "^1.0.0-beta.1",
     "sass-embedded": "^1.83.0"
   },

apps/site/src/components/Button.astro

@@ -15,17 +15,18 @@ interface Props extends astroHTML.JSX.ButtonHTMLAttributes {
   icon?: string;
   href?: string;
   to?: string;
+  centered?: boolean;
 }
 
 const {
   variant = 'default',
   size = 'default',
   icon,
   class: className,
-  className: classNameProp,
   type = 'button',
   href,
   to,
+  centered,
   ...rest
 } = Astro.props;
 
@@ -37,18 +38,29 @@ const classes = [
   'radius-pill',
   variant !== 'default' && `usa-button--${variant}`,
   size === 'big' && 'usa-button--big',
+  centered && 'usa-button--centered',
   className,
-  classNameProp,
 ]
   .filter(Boolean)
   .join(' ');
+
+const tagProps = {
+  ...(targetUrl ? { href: targetUrl } : { type }),
+  class: classes,
+  ...rest,
+};
 ---
 
-<Tag 
-  {...targetUrl ? { href: targetUrl } : { type }} 
-  class={classes} 
-  {...rest}
->
-  {icon && <Icon name={icon} /> }
+<Tag {...tagProps}>
+  {icon && <Icon name={icon} />}
   <slot />
 </Tag>
+
+<style>
+  .usa-button--centered {
+    display: block;
+    width: fit-content;
+    margin-left: auto;
+    margin-right: auto;
+  }
+</style>

apps/site/src/components/Tooltip.tsx

@@ -0,0 +1,19 @@
+import { Icon, Tooltip as TrussTooltip } from '@trussworks/react-uswds';
+
+interface Props {
+  text: string;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+export default function Tooltip({ text, position = 'top' }: Props) {
+  return (
+    <TrussTooltip
+      label={text}
+      position={position}
+      className="bg-transparent padding-0 cursor-pointer text-primary-dark margin-left-1 height-3 width-3"
+      aria-label={text}
+    >
+      <Icon.InfoOutline aria-hidden size={3} />
+    </TrussTooltip>
+  );
+}

apps/site/src/components/events/EventsList.astro

@@ -35,7 +35,7 @@ const dateOptions = {
         <div class="usa-collection__body">
 
           <h4 class="usa-collection__heading">
-            <a href={`/updates/events/${event.id}/`} class="usa-link">
+            <a href={`/news/events/${event.id}/`} class="usa-link">
               {event.data.title}
             </a>
           </h4>