@gsa-tts/graymatter-ui 0.3.0 → 0.3.2

package/src/layouts/GlobalAppLayout.astro

@@ -19,10 +19,12 @@ const {
   logoLinkUrl,
   logoLinkLabel,
   title: pageTitle,
+  description,
+  openGraphImage,
 } = Astro.props;
 ---
 
-<BaseLayout title={pageTitle} gtmID={gtmID}>
+<BaseLayout title={pageTitle} {gtmID} {description} {openGraphImage}>
   <div class="app">
     <!-- Desktop Navigation -->
     <div class="layout-container">
@@ -48,7 +50,12 @@ const {
 
     <!-- Mobile Navigation -->
     <nav aria-label="Mobile navigation">
-      <MobileTopNav client:load {profileMenuData} />
+      <MobileTopNav
+        client:load
+        {profileMenuData}
+        {logoLinkUrl}
+        {logoLinkLabel}
+      />
       <MobileSideMenu client:load {logoLinkUrl} {logoLinkLabel}>
         <slot name="sub-nav" />
       </MobileSideMenu>
@@ -102,10 +109,6 @@ const {
               const mobileRect = mobileContent.getBoundingClientRect();
               const scrollTop =
                 mobileContent.scrollTop + rect.top - mobileRect.top;
-              console.log(
-                '[GlobalAppLayout] Immediate mobile scroll to:',
-                scrollTop
-              );
               mobileContent.scrollTo({ top: scrollTop, behavior: 'auto' });
 
               setTimeout(() => {
@@ -138,11 +141,6 @@ const {
           if (mainContent) {
             const desktopAnchor = mainContent.querySelector(`[id="${anchor}"]`);
             if (desktopAnchor) {
-              console.log(
-                '[GlobalAppLayout] Immediate desktop scroll for:',
-                anchor
-              );
-
               try {
                 // Add temporary scroll margin to account for header
                 const originalScrollMargin =
@@ -200,27 +198,16 @@ const {
       // Check navigation flag first, before any components mount
       const isMainNavNavigation =
         sessionStorage.getItem('navigatingToMainNav') === 'true';
-      console.log(
-        '[GlobalAppLayout] DOMContentLoaded - navigation flag:',
-        isMainNavNavigation
-      );
 
       if (isMainNavNavigation) {
         // Clear the flag immediately
         sessionStorage.removeItem('navigatingToMainNav');
-        console.log(
-          '[GlobalAppLayout] Cleared navigation flag for main nav navigation'
-        );
         // Don't clear header state here - let navigation components handle it
       }
 
       // Handle URL hash scrolling (fallback for cases where immediate scroll didn't work)
       if (window.location.hash) {
         const anchor = window.location.hash.substring(1);
-        console.log(
-          '[GlobalAppLayout] DOMContentLoaded fallback hash scroll for:',
-          anchor
-        );
 
         // Only proceed if we haven't already scrolled
         if (sessionStorage.getItem('globalLayoutScrolling') !== 'true') {
@@ -241,10 +228,6 @@ const {
                   const mobileRect = mobileContent.getBoundingClientRect();
                   const scrollTop =
                     mobileContent.scrollTop + rect.top - mobileRect.top;
-                  console.log(
-                    '[GlobalAppLayout] Fallback mobile scroll to:',
-                    scrollTop
-                  );
                   mobileContent.scrollTo({ top: scrollTop, behavior: 'auto' });
 
                   setTimeout(() => {
@@ -285,11 +268,6 @@ const {
               );
               if (desktopAnchor) {
                 setTimeout(() => {
-                  console.log(
-                    '[GlobalAppLayout] Fallback desktop scroll for:',
-                    anchor
-                  );
-
                   // Try scrollIntoView first with a temporary offset
                   try {
                     // Add temporary scroll margin to account for header
@@ -303,43 +281,18 @@ const {
                       inline: 'nearest',
                     });
 
-                    console.log(
-                      '[GlobalAppLayout] Used fallback scrollIntoView for desktop'
-                    );
-
                     // Restore original scroll margin after a delay
                     setTimeout(() => {
                       desktopAnchor.style.scrollMarginTop =
                         originalScrollMargin;
                     }, 1000);
                   } catch (e) {
-                    console.log(
-                      '[GlobalAppLayout] Fallback scrollIntoView failed, using manual calculation:',
-                      e
-                    );
-
                     // Fallback to manual calculation
                     const headerHeight = 56;
                     const rect = desktopAnchor.getBoundingClientRect();
                     const scrollTop = window.scrollY + rect.top - headerHeight;
-                    console.log(
-                      '[GlobalAppLayout] Fallback desktop scroll calculation:',
-                      {
-                        anchor,
-                        rectTop: rect.top,
-                        windowScrollY: window.scrollY,
-                        headerHeight,
-                        scrollTop,
-                        elementText: desktopAnchor.textContent?.trim(),
-                      }
-                    );
-
                     // Ensure scrollTop is not negative
                     const finalScrollTop = Math.max(0, scrollTop);
-                    console.log(
-                      '[GlobalAppLayout] Fallback final scroll position:',
-                      finalScrollTop
-                    );
 
                     window.scrollTo({ top: finalScrollTop, behavior: 'auto' });
                   }
@@ -372,25 +325,14 @@ const {
                   }, 100);
                 }, 100);
               } else {
-                console.log(
-                  '[GlobalAppLayout] Fallback desktop anchor not found in main-content container:',
-                  anchor
-                );
                 // Log all available anchors for debugging
                 const allAnchors = mainContent.querySelectorAll('[id]');
-                console.log(
-                  '[GlobalAppLayout] Available anchors in main-content:',
-                  Array.from(allAnchors).map(el => el.id)
-                );
                 // Clear the flag if anchor not found
                 if (typeof window !== 'undefined') {
                   sessionStorage.removeItem('globalLayoutScrolling');
                 }
               }
             } else {
-              console.log(
-                '[GlobalAppLayout] Fallback desktop main-content container not found'
-              );
               // Clear the flag if container not found
               if (typeof window !== 'undefined') {
                 sessionStorage.removeItem('globalLayoutScrolling');
@@ -418,29 +360,10 @@ const {
         const wasMobile = lastWidth <= 640;
         const isMobile = currentWidth <= 640;
 
-        console.log('[GlobalAppLayout] Resize detected:', {
-          lastWidth,
-          currentWidth,
-          wasMobile,
-          isMobile,
-          changed: wasMobile !== isMobile,
-        });
-
         if (wasMobile !== isMobile) {
-          console.log(
-            '[GlobalAppLayout] Layout changed from',
-            wasMobile ? 'mobile' : 'desktop',
-            'to',
-            isMobile ? 'mobile' : 'desktop'
-          );
-
           // Handle anchor scrolling for layout changes
           if (window.location.hash) {
             const anchor = window.location.hash.substring(1);
-            console.log(
-              '[GlobalAppLayout] Layout change with URL hash:',
-              anchor
-            );
 
             // Wait for navigation state to update, then scroll
             setTimeout(() => {
@@ -458,10 +381,6 @@ const {
                     const mobileRect = mobileContent.getBoundingClientRect();
                     const scrollTop =
                       mobileContent.scrollTop + rect.top - mobileRect.top;
-                    console.log(
-                      '[GlobalAppLayout] Scrolling mobile to anchor:',
-                      scrollTop
-                    );
                     mobileContent.scrollTo({
                       top: scrollTop,
                       behavior: 'auto',
@@ -499,15 +418,6 @@ const {
                     `[id="${anchor}"]`
                   );
                   if (desktopAnchor) {
-                    console.log(
-                      '[GlobalAppLayout] Desktop anchor found for layout change:',
-                      {
-                        anchor,
-                        elementText: desktopAnchor.textContent?.trim(),
-                        elementId: desktopAnchor.id,
-                      }
-                    );
-
                     // Try scrollIntoView first with a temporary offset
                     try {
                       // Add temporary scroll margin to account for header
@@ -521,44 +431,20 @@ const {
                         inline: 'nearest',
                       });
 
-                      console.log(
-                        '[GlobalAppLayout] Used scrollIntoView for desktop layout change with scroll margin'
-                      );
-
                       // Restore original scroll margin after a delay
                       setTimeout(() => {
                         desktopAnchor.style.scrollMarginTop =
                           originalScrollMargin;
                       }, 1000);
                     } catch (e) {
-                      console.log(
-                        '[GlobalAppLayout] scrollIntoView failed for layout change, using manual calculation:',
-                        e
-                      );
-
                       // Fallback to manual calculation
                       const headerHeight = 56;
                       const rect = desktopAnchor.getBoundingClientRect();
                       const scrollTop =
                         window.scrollY + rect.top - headerHeight;
-                      console.log(
-                        '[GlobalAppLayout] Desktop scroll calculation for layout change:',
-                        {
-                          anchor,
-                          rectTop: rect.top,
-                          windowScrollY: window.scrollY,
-                          headerHeight,
-                          scrollTop,
-                          elementText: desktopAnchor.textContent?.trim(),
-                        }
-                      );
 
                       // Ensure scrollTop is not negative
                       const finalScrollTop = Math.max(0, scrollTop);
-                      console.log(
-                        '[GlobalAppLayout] Final scroll position for layout change:',
-                        finalScrollTop
-                      );
 
                       window.scrollTo({
                         top: finalScrollTop,
@@ -601,11 +487,6 @@ const {
               detail: { isMobile },
             })
           );
-          console.log(
-            '[GlobalAppLayout] Dispatched layoutTransition event for',
-            isMobile ? 'mobile' : 'desktop',
-            'layout'
-          );
         }
 
         lastWidth = currentWidth;

package/src/styles/base/theme.css

@@ -14,7 +14,12 @@ body {
 }
 
 *:focus {
-  outline-color: var(--ai-color-blue-600) !important;
+  outline: var(--ai-size-2) solid var(--ai-color-blue-600);
+  outline-offset: var(--ai-size-4);
+}
+
+*:focus:not(:focus-visible) {
+  outline: none;
 }
 
 a:focus {

package/src/styles/base/typography.css

@@ -50,7 +50,14 @@ h6,
 }
 
 pre {
-  padding: var(--ai-size-8);
+  padding: var(--ai-size-16);
+  border-radius: var(--ai-size-4);
+}
+
+code {
+  font-family: var(--ai-font-family-monospace);
+  font-weight: var(--ai-font-weight-normal);
+  font-size: var(--ai-size-14);
 }
 
 a {

package/src/utils/getAppUrls.ts

@@ -1,9 +1,32 @@
+import { getUrlFromBase } from '@gsa-tts/graymatter-ui/helpers/url.js';
+
 function warnIfMissing(name: string, value: string | undefined) {
   if (!value) {
     console.warn(`[getAppUrls] Environment variable for ${name} is missing!`);
   }
 }
 
+function isAbsoluteUrl(url: string): boolean {
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function processUrl(url: string | undefined, fallback: string): string {
+  if (!url) {
+    return fallback;
+  }
+
+  if (isAbsoluteUrl(url)) {
+    return url;
+  }
+
+  return getUrlFromBase(url);
+}
+
 export function getAppUrls(envArg?: Record<string, string | undefined>) {
   const env = envArg || import.meta.env;
   const fallback = '#';
@@ -18,9 +41,9 @@ export function getAppUrls(envArg?: Record<string, string | undefined>) {
   warnIfMissing('api', apiUrl);
 
   return {
-    chat: chatUrl || fallback,
-    console: consoleUrl || fallback,
-    api: apiUrl || '/api',
-    discover: discoverUrl || '/discover',
+    chat: processUrl(chatUrl, fallback),
+    console: processUrl(consoleUrl, fallback),
+    api: processUrl(apiUrl, getUrlFromBase('/api/documentation')),
+    discover: processUrl(discoverUrl, '#'),
   };
 }