Put container, E&A style, etc.

app/(datasets)/data-catalog/page.tsx

@@ -1,19 +1,18 @@
 import React from 'react';
-import { getDatasets } from 'app/content/utils/mdx';
+import { getTransformedDatasetMetadata } from 'app/content/utils/mdx';
 import { Suspense } from 'react';
 import Catalog from './catalog';
-import { transformData } from '@helpers/data';
 
 export default function Page() {
-  const posts: any[] = getDatasets(); // @TODO: Revist type here, should use data types from veda-ui
-  const transformed = transformData(posts);
+  const transformed = getTransformedDatasetMetadata();
 
   return (
-    <section>
-      <h1 className='font-semibold text-2xl mb-8 tracking-tighter'>Datasets</h1>
-      <Suspense fallback={<>Loading...</>}>
-        <Catalog datasets={transformed} />
-      </Suspense>
-    </section>
+    <div className='grid-container'>
+      <section>
+        <Suspense fallback={<>Loading...</>}>
+          <Catalog datasets={transformed} />
+        </Suspense>
+      </section>
+    </div>
   );
 }

app/(datasets)/exploration/exploration.tsx

@@ -7,50 +7,40 @@ import {
   useTimelineDatasetAtom,
   externalDatasetsAtom,
 } from 'app/lib';
+
 import { useSetAtom } from 'jotai';
+import useElemengHeight from '@utils/hooks/use-element-height';
 
 export default function ExplorationAnalysis({ datasets }: { datasets: any }) {
-  const transformData = () => {
-    const data = datasets?.map((post) => ({
-      ...post.metadata,
-    }));
-
-    const result = data?.map((d) => {
-      const updatedTax = d.taxonomy.map((t) => {
-        const updatedVals = t.values.map((v) => {
-          return {
-            id: v.replace(/ /g, '_').toLowerCase(),
-            name: v,
-          };
-        });
-        return { ...t, values: updatedVals };
-      });
-      return { ...d, taxonomy: updatedTax };
-    });
-
-    return result;
-  };
-
-  const transformed = transformData();
-
   const setExternalDatasets = useSetAtom(externalDatasetsAtom);
 
-  setExternalDatasets(transformed);
+  setExternalDatasets(datasets);
+
+  const [timelineDatasets, setTimelineDatasets] = useTimelineDatasetAtom();
+  const [datasetModalRevealed, setDatasetModalRevealed] = useState(
+    !timelineDatasets.length,
+  );
 
   const openModal = () => {
     setDatasetModalRevealed(true);
   };
   const closeModal = () => {
     setDatasetModalRevealed(false);
   };
-
-  const [timelineDatasets, setTimelineDatasets] = useTimelineDatasetAtom();
-  const [datasetModalRevealed, setDatasetModalRevealed] = useState(
-    !timelineDatasets.length,
-  );
+  // On landing, measure the height of Header and fill up the rest of the space with E&A
+  const offsetHeight = useElemengHeight({ queryToSelect: 'header' });
 
   return (
-    <>
+    <div
+      id='ea-wrapper'
+      // The below styles adjust the E&A page to match what we have on earthdata.nasa.gov
+      // E&A is supposed to fill up whichever space given
+      // Adjusting the container's height so the page with E&A doesn't overflow.
+      style={{
+        width: '100%',
+        height: `calc(100vh - ${offsetHeight}px)`,
+      }}
+    >
       <DatasetSelectorModal
         revealed={datasetModalRevealed}
         close={closeModal}
@@ -61,14 +51,14 @@ export default function ExplorationAnalysis({ datasets }: { datasets: any }) {
         timelineDatasets={timelineDatasets}
         setTimelineDatasets={setTimelineDatasets}
         datasetPathName={'data-catalog'}
-        datasets={transformed}
+        datasets={datasets}
       />
 
       <ExplorationAndAnalysis
         datasets={timelineDatasets}
         setDatasets={setTimelineDatasets}
         openDatasetsSelectionModal={openModal}
       />
-    </>
+    </div>
   );
 }

app/(datasets)/exploration/page.tsx

@@ -1,28 +1,16 @@
 import React, { Suspense } from 'react';
-import { getDatasets } from 'app/content/utils/mdx';
+import { getTransformedDatasetMetadata } from 'app/content/utils/mdx';
 import ExplorationAnalysis from './exploration';
 import { PageHero } from 'app/lib';
 
 export default function Page() {
-  const datasets: any[] = getDatasets();
+  const datasets: any[] = getTransformedDatasetMetadata();
   return (
     <section>
-      <div
-        // The below styles adjust the E&A page to match what we have on earthdata.nasa.gov
-        // Ideally, we would replace some of the custom styles with the USWDS grid and util classes
-        // but since we do not have USWDS yet in the template instance, this is a quick workaround
-        // to make the page look closer to the current E&A page.
-        style={{
-          height: 'calc(100vh - 64px)',
-          position: 'absolute',
-          width: '100%',
-        }}
-      >
-        <Suspense fallback={<>Loading...</>}>
-          <PageHero title='Exploration' isHidden />
-          <ExplorationAnalysis datasets={datasets} />
-        </Suspense>
-      </div>
+      <Suspense fallback={<>Loading...</>}>
+        <PageHero title='Exploration' isHidden />
+        <ExplorationAnalysis datasets={datasets} />
+      </Suspense>
     </section>
   );
 }

app/(datasets)/stories/page.tsx

@@ -3,12 +3,16 @@ import { getStoriesMetadata } from 'app/content/utils/mdx';
 import Hub from './hub';
 
 export default function Page() {
-  const stories = getStoriesMetadata().map(d => ({...d.metadata, path: `stories/${d.slug}`}));
+  const stories = getStoriesMetadata().map((d) => ({
+    ...d.metadata,
+    path: `stories/${d.slug}`,
+  }));
 
   return (
     <section>
-      <h1 className='font-semibold text-2xl mb-8 tracking-tighter'>Stories</h1>
-      <Hub stories={stories} />
+      <div className='grid-container'>
+        <Hub stories={stories} />
+      </div>
     </section>
   );
 }

app/content/utils/mdx.ts

@@ -6,40 +6,6 @@ import { DatasetLayer, StoryData } from 'app/types/veda';
 
 const md = markdownit();
 
-export function resolveConfigFunctions<T>(datum, bag);
-export function resolveConfigFunctions<T extends any[]>(datum, bag);
-export function resolveConfigFunctions(datum, bag): any {
-  if (Array.isArray(datum)) {
-    return datum.map((v) => resolveConfigFunctions(v, bag));
-  }
-
-  if (datum != null && typeof datum === 'object') {
-    // Use for loop instead of reduce as it faster.
-    const ready = {};
-    for (const [k, v] of Object.entries(datum as object)) {
-      ready[k] = resolveConfigFunctions(v, bag);
-    }
-    return ready;
-  }
-
-  if (typeof datum === 'function') {
-    try {
-      return datum(bag);
-    } catch (error) {
-      /* eslint-disable-next-line no-console */
-      console.error(
-        'Failed to resolve function %s(%o) with error %s',
-        datum.name,
-        bag,
-        error.message,
-      );
-      return null;
-    }
-  }
-
-  return datum;
-}
-
 function parseAttributes(obj) {
   const convert = (obj) => {
     return Object.keys(obj).reduce(
@@ -115,6 +81,27 @@ function getMDXMetaData(dir) {
   });
 }
 
+const transformData = (content: any) => {
+  const data = content?.map((post) => ({
+    ...post.metadata,
+  }));
+
+  const result = data?.map((d) => {
+    const updatedTax = d.taxonomy.map((t) => {
+      const updatedVals = t.values.map((v) => {
+        return {
+          id: v.replace(/ /g, '_').toLowerCase(),
+          name: v,
+        };
+      });
+      return { ...t, values: updatedVals };
+    });
+    return { ...d, taxonomy: updatedTax };
+  });
+
+  return result;
+};
+
 export function getStoriesMetadata() {
   return getMDXMetaData(path.join(process.cwd(), 'app', 'content', 'stories'));
 }
@@ -127,6 +114,14 @@ export function getDatasets() {
   return getMDXData(path.join(process.cwd(), 'app', 'content', 'datasets'));
 }
 
+export function getTransformedDatasetMetadata() {
+  return transformData(getDatasetsMetadata());
+}
+
+export function getTransformedDatasets() {
+  return transformData(getDatasets());
+}
+
 export function getStories() {
   return getMDXData(path.join(process.cwd(), 'app', 'content', 'stories'));
 }

app/layout.tsx

@@ -64,7 +64,6 @@ export default function RootLayout({
             >
               <Navbar />
               {children}
-              <Footer />
             </EnvConfigProvider>
           </DevSeedUIThemeProvider>
         </main>

app/page.tsx

@@ -3,14 +3,16 @@ import React from 'react';
 export default function Page() {
   return (
     <section>
-      <h1 className='mb-8 text-2xl font-semibold tracking-tighter'>
-        Next.js VEDA Template Instance
-      </h1>
+      <div className='grid-container'>
+        <h1 className='mb-8 text-2xl font-semibold tracking-tighter'>
+          Next.js VEDA Template Instance
+        </h1>
 
-      <p className='mb-4'>
-        This is a test Next JS instance to figure out how to use VEDA specific
-        MDX files with NEXT JS Instance.
-      </p>
+        <p className='mb-4'>
+          This is a test Next JS instance to figure out how to use VEDA specific
+          MDX files with NEXT JS Instance.
+        </p>
+      </div>
     </section>
   );
 }

app/store/providers/theme.tsx

@@ -3,6 +3,9 @@ import React, { ReactNode } from 'react';
 import { createUITheme } from '@devseed-ui/theme-provider';
 import { DevseedUiThemeProvider, PageMainContent } from '@lib';
 
+// Values here should be manually synced until we consolidate all the styles to USWDS
+// Be mindful that these values are used more for VEDA UI component, not for instance
+// Use this page to look up the value: https://designsystem.digital.gov/design-tokens/color/system-tokens/
 const VEDA_OVERRIDE_THEME = {
   zIndices: {
     hide: -1,
@@ -16,10 +19,11 @@ const VEDA_OVERRIDE_THEME = {
     toast: 1700,
     tooltip: 1800,
   },
+
   color: {
     base: '#2c3e50',
-    primary: '#2276ac',
-    link: '#FFFFFF',
+    primary: '#d83933',
+    link: '#6f3331',
     danger: '#FC3D21',
     infographicA: '#fcab10',
     infographicB: '#f4442e',

app/styles/index.scss

@@ -2,3 +2,7 @@
 @forward 'uswds';
 
 @use 'uswds-core' as *;
+
+.veda__hug-reset-container {
+  grid-column: 1 / -1;
+}

app/utilities/hooks/use-element-height.tsx

@@ -0,0 +1,38 @@
+import { useState, useEffect } from 'react';
+
+const DEFAULT_HEIGHT = 100;
+
+export default function useElementHeight({
+  queryToSelect,
+}: {
+  queryToSelect: string;
+}): number | null {
+  const [headerHeight, setHeaderHeight] = useState<number | null>(
+    DEFAULT_HEIGHT,
+  );
+
+  useEffect(() => {
+    const matchingElement = document.querySelector<HTMLElement>(queryToSelect);
+    if (matchingElement) {
+      const updateHeaderHeight = () => {
+        setHeaderHeight(matchingElement.offsetHeight);
+      };
+      // Initial height check
+      updateHeaderHeight();
+      // Add a resize observer to update height on resize
+      const resizeObserver = new ResizeObserver(() => {
+        updateHeaderHeight();
+      });
+      resizeObserver.observe(matchingElement);
+
+      return () => {
+        resizeObserver.disconnect();
+      };
+    } else {
+      console.warn(`No matching element for ${queryToSelect} found.`);
+    }
+    // Runs once on mount
+  }, []);
+
+  return headerHeight;
+}

tsconfig.json

@@ -18,7 +18,7 @@
     "paths": {
       "@lib": ["app/lib"],
       "@lib/*": ["app/lib/*"],
-      "@helpers/*": ["app/utilities/helpers/*"]
+      "@utils/*": ["app/utilities/*"]
     },
     "plugins": [
       {