Development page override (#647)

Adds ability to override the development page on an instance basis, including accompanying documentation.
NASA-IMPACT · Sep 6, 2023 · 5b70832 · 5b70832
2 parents 2d0acaa + 390de23
commit 5b70832
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 44 deletions.
diff --git a/app/scripts/components/development/index.tsx b/app/scripts/components/development/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { getOverride } from 'veda';
 import { Button } from '@devseed-ui/button';
 import {
   CollecticonSpeechBalloon,
@@ -12,64 +13,74 @@ import { PageMainContent } from '$styles/page';
 import PageHero from '$components/common/page-hero';
 import { FoldProse } from '$components/common/fold';
 import { variableGlsp } from '$styles/variable-utils';
+import { ContentOverride } from '$components/common/page-overrides';
 
 const ContributeCta = styled.div`
   display: flex;
   gap: ${variableGlsp()};
 `;
 
+const developmentContent = getOverride('developmentContent');
+
 function Development() {
   const { show: showFeedbackModal } = useFeedbackModal();
 
   return (
     <PageMainContent>
       <LayoutProps title='Development' />
       <PageHero
-        title='Development & contributing'
-        description='Visualization, Exploration, and Data Analysis (VEDA): Scalable and Interactive System for Science Data.'
+        title={developmentContent?.data.title || 'Development & contributing'}
+        description={
+          developmentContent?.data.description ||
+          'Visualization, Exploration, and Data Analysis (VEDA): Scalable and Interactive System for Science Data.'
+        }
       />
-      <FoldProse>
-        <p>
-          NASA started development of the VEDA Dashboard in December 2021. This
-          early version reflects the next iteration on work completed for the{' '}
-          <a href='https://earthdata.nasa.gov/covid19/'>COVID dashboard</a> and
-          will continue to evolve as more functionality is developed.
-        </p>
-        <p>
-          This dashboard is built by the{' '}
-          <a href='https://earthdata.nasa.gov'>
-            NASA Earth Science Data Systems program
-          </a>{' '}
-          with help from various science teams and data providers. We are
-          grateful for the many third-party open source projects that we have
-          used.
-        </p>
-        <p>
-          We welcome your feedback to help improve the Dashboard. To do so you
-          can use the feedback option on this website.
-        </p>
-        <ContributeCta>
-          <Button
-            size='large'
-            fitting='relaxed'
-            variation='primary-fill'
-            onClick={() => {
-              showFeedbackModal();
-            }}
-          >
-            <CollecticonSpeechBalloon /> Feedback
-          </Button>
-          <Button
-            size='large'
-            fitting='relaxed'
-            forwardedAs='a'
-            href='https://github.com/NASA-IMPACT/veda-config/releases'
-            variation='primary-fill'
-          >
-            <CollecticonBrandGithub /> Releases
-          </Button>
-        </ContributeCta>
-      </FoldProse>
+
+      <ContentOverride with='developmentContent'>
+        <FoldProse>
+          <p>
+            NASA started development of the VEDA Dashboard in December 2021.
+            This early version reflects the next iteration on work completed for
+            the{' '}
+            <a href='https://earthdata.nasa.gov/covid19/'>COVID dashboard</a>{' '}
+            and will continue to evolve as more functionality is developed.
+          </p>
+          <p>
+            This dashboard is built by the{' '}
+            <a href='https://earthdata.nasa.gov'>
+              NASA Earth Science Data Systems program
+            </a>{' '}
+            with help from various science teams and data providers. We are
+            grateful for the many third-party open source projects that we have
+            used.
+          </p>
+          <p>
+            We welcome your feedback to help improve the Dashboard. To do so you
+            can use the feedback option on this website.
+          </p>
+          <ContributeCta>
+            <Button
+              size='large'
+              fitting='relaxed'
+              variation='primary-fill'
+              onClick={() => {
+                showFeedbackModal();
+              }}
+            >
+              <CollecticonSpeechBalloon /> Feedback
+            </Button>
+            <Button
+              size='large'
+              fitting='relaxed'
+              forwardedAs='a'
+              href='https://github.com/NASA-IMPACT/veda-config/releases'
+              variation='primary-fill'
+            >
+              <CollecticonBrandGithub /> Releases
+            </Button>
+          </ContributeCta>
+        </FoldProse>
+      </ContentOverride>
     </PageMainContent>
   );
 }

diff --git a/docs/content/PAGE_OVERRIDES.md b/docs/content/PAGE_OVERRIDES.md
@@ -95,6 +95,32 @@ import FeaturedStories from "$veda-ui-scripts/components/home/featured-stories";
 
 > 🧑‍🏫 You can import and use the `FeaturedStories` component to include a section listing the stories with the `featured` flag. It is important that this component is not inside a `Block`.
 
+### developmentContent
+`Content Override`
+
+The `developmentContent` allows you to specify new content for the development page (locally at http://localhost:9000/development).  
+Besides the new content, this page also uses frontmatter variables to modify the page title and description.  
+
+Example:
+```js
+// veda.config.js pageOverrides
+developmentContent: './overrides/development.mdx'
+```
+```jsx
+---
+title: The development page
+description: A brief description
+---
+
+<Block>
+  <Prose>
+    <p>
+      This is my new development page.
+    </p>
+  </Prose>
+</Block>
+```
+
 ## Component Override reference
 
 ### headerBrand

diff --git a/parcel-resolver-veda/index.d.ts b/parcel-resolver-veda/index.d.ts
@@ -237,6 +237,7 @@ declare module 'veda' {
   export const storyTaxonomies: Taxonomy[];
 
   export type PageOverrides =
+    | 'developmentContent'
     | 'aboutContent'
     | 'homeContent'
     | 'sandbox-override'