Production release

.github/workflows/deploy-staging.yml

@@ -3,7 +3,7 @@ name: Deploy Staging - Surge.sh
 on:
   push:
     branches:
-    - 'develop'
+      - 'develop'
 
 env:
   NODE: 14
@@ -34,46 +34,12 @@ jobs:
           path: node_modules
           key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package.json') }}
 
-      - name: Cache dist
-        uses: actions/cache@v2
-        id: cache-dist
-        with:
-          path: dist
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ github.workflow }}-${{ github.sha }}
-
       - name: Install
         run: yarn install
 
       - name: Build staging
         run: yarn stage
 
-  deploy:
-    runs-on: ubuntu-latest
-    needs: build
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-
-      - name: Restore node_modules
-        uses: actions/cache@v2
-        id: cache-node-modules
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package.json') }}
-
-      - name: Restore dist cache
-        uses: actions/cache@v2
-        id: cache-dist
-        with:
-          path: dist
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ github.workflow }}-${{ github.sha }}
-
-      - name: Use Node.js ${{ env.NODE }}
-        uses: actions/setup-node@v1
-        with:
-          node-version: ${{ env.NODE }}
-
       - name: Deploy Staging to Surge
         run: |
           cp ./dist/index.html ./dist/200.html

app/assets/scripts/components/common/page-footer.js

@@ -24,7 +24,7 @@ const PageFooterSelf = styled.footer`
 
 const Colophon = styled.p`
   display: grid;
-  grid-template-columns: minmax(min-content, max-content) 1fr;
+  grid-template-columns: minmax(min-content, max-content) 1fr 1fr;
   grid-gap: ${glsp(1)};
   font-size: 0.875rem;
   line-height: 1rem;
@@ -49,6 +49,10 @@ const CreditsLink = styled.a`
   }
 `;
 
+const AccessibilityLink = styled.a`
+  font-weight: ${themeVal('type.base.regular')};
+`;
+
 const VersionInfo = styled.span`
   margin-left: auto;
   opacity: 0.64;
@@ -70,6 +74,12 @@ function PageFooter() {
           </span>
           <time dateTime={nowDate.getFullYear()}>{nowDate.getFullYear()}</time>
         </CreditsLink>
+        <AccessibilityLink
+          href='https://www.nasa.gov/accessibility/'
+          title='Accessibility Statement'
+        >
+          <span>Accessibility Statement</span>
+        </AccessibilityLink>
         <Tip
           tag={VersionInfo}
           delay={1000}

app/assets/scripts/components/documents/citation.js

@@ -5,6 +5,9 @@ import { FormHelperMessage } from '@devseed-ui/form';
 
 import getDocumentIdKey from './get-document-id-key';
 import { documentView } from '../../utils/url-creator';
+import { formatAuthors } from '../../utils/references';
+import config from '../../config';
+const { baseUrl } = config;
 
 // Symbol to define that the description should come from the strings file.
 export const formStringSymbol = Symbol.for('form string');
@@ -16,8 +19,8 @@ export const citationFields = [
     description: formStringSymbol,
     helper: (
       <FormHelperMessage>
-        Separate values with <em>and</em> (e.g., John Doe <em>and</em> Jane
-        Doe).
+        Separate values with <em>and</em> (e.g. Doe, John <em>and</em> Doe,
+        Jane).
       </FormHelperMessage>
     )
   },
@@ -27,8 +30,8 @@ export const citationFields = [
     description: formStringSymbol,
     helper: (
       <FormHelperMessage>
-        Separate values with <em>and</em> (e.g., John Doe <em>and</em> Jane
-        Doe).
+        Separate values with <em>and</em> (e.g. Doe, John <em>and</em> Doe,
+        Jane).
       </FormHelperMessage>
     )
   },
@@ -114,7 +117,8 @@ function getCitationDocUrl(atbd) {
     return citation.online_resource;
   }
 
-  return `${window.location.origin}${documentView(atbd)}`;
+  const publicUrl = baseUrl || window.location.origin;
+  return `${publicUrl}${documentView(atbd)}`;
 }
 
 function getCitationDocVersion(atbd) {
@@ -151,26 +155,23 @@ export function createBibtexCitation(atbd) {
 }
 
 /**
- * Creates a comma separated citation from the given atbd.
+ * Creates a citation from the given atbd.
+ * Format is:
+ * Authors. (Publication Date). Title, version. Publisher. (DOC URL or DOI).
  *
  * @param {object} atbd The document for which to create a citation
  * @returns string
  */
 export function createStringCitation(atbd) {
-  const { title, citation } = atbd;
-  const { dateStr } = getCitationPublicationDate(atbd);
-  const citationVersion = getCitationDocVersion(atbd);
+  const { year } = getCitationPublicationDate(atbd);
+  const authors = formatAuthors(atbd.citation.creators, 'citation');
+  const title = atbd.title;
   const url = getCitationDocUrl(atbd);
-
-  return [
-    title,
-    citation.creators,
-    citation.editors,
-    citation.publisher,
-    dateStr,
-    citationVersion,
-    url
-  ]
-    .filter(Boolean)
-    .join(', ');
+  const doi = atbd.doi;
+  let docRef = doi ? doi : url;
+  const publisher = atbd.citation.publisher;
+  const returnStr = `${authors}. (${year}). ${title}, ${getCitationDocVersion(
+    atbd
+  )}. ${publisher}. (${docRef})`;
+  return returnStr;
 }

app/assets/scripts/components/documents/hub/index.js

@@ -21,6 +21,7 @@ import { Link } from '../../../styles/clean/link';
 
 import { useAtbds } from '../../../context/atbds-list';
 import CreateDocumentButton from '../../documents/create-document-button';
+import { PUBLISHED } from '../../documents/status';
 
 export const DocList = styled.ol`
   grid-column: content-start / content-end;
@@ -36,10 +37,10 @@ export const DocListItem = styled.li`
 `;
 
 function Documents() {
-  const { fetchAtbds, atbds } = useAtbds();
+  const { fetchAtbds, atbds } = useAtbds({ status: PUBLISHED });
 
   useEffect(() => {
-    fetchAtbds();
+    fetchAtbds({ status: PUBLISHED });
   }, [fetchAtbds]);
 
   // We only want to handle errors when the atbd request fails. Mutation errors,

app/assets/scripts/components/documents/journal-pdf-preview/index.js

@@ -24,8 +24,7 @@ import {
   sortReferences
 } from '../../../utils/references';
 import { applyNumberCaptionsToDocument } from '../../../utils/apply-number-captions-to-document';
-import { VariableItem } from '../single-view/document-body';
-import { variableNodeType } from '../../../types';
+import { VariablesTable } from '../single-view/common/variables-table';
 
 const ReferencesList = styled.ol`
   && {
@@ -219,28 +218,6 @@ ImplementationDataList.propTypes = {
   )
 };
 
-function VariablesList({ list }) {
-  if (!list || list.length === 0) {
-    return EMPTY_CONTENT_MESSAGE;
-  }
-
-  return (
-    <DataListContainer>
-      {list?.map((variable, i) => (
-        <VariableItem
-          key={`variable-${i + 1}`}
-          variable={variable}
-          element={{ id: `variable-${i}`, label: `Variable #${i + 1}` }}
-        />
-      ))}
-    </DataListContainer>
-  );
-}
-
-VariablesList.propTypes = {
-  list: T.arrayOf(variableNodeType)
-};
-
 function ContactOutput(props) {
   const { data } = props;
   const { affiliations, contact, roles } = data;
@@ -721,15 +698,15 @@ function JournalPdfPreview() {
                   id='algorithm_input_variables'
                   title='Algorithm Input Variables'
                 >
-                  <VariablesList list={algorithm_input_variables} />
+                  <VariablesTable variables={algorithm_input_variables} />
                 </Section>
               )}
               {algorithmOutputVariablesVisible && (
                 <Section
                   id='algorithm_output_variables'
                   title='Algorithm Output Variables'
                 >
-                  <VariablesList list={algorithm_output_variables} />
+                  <VariablesTable variables={algorithm_output_variables} />
                 </Section>
               )}
             </Section>

app/assets/scripts/components/documents/pdf-preview/index.js

@@ -243,7 +243,7 @@ function PdfPreview() {
       setDocument(applyNumberCaptionsToDocument(atbd.data.document));
       waitForImages();
     }
-  }, [atbd.status]);
+  }, [atbd.status, atbd.data]);
 
   // This useEffect is responsible for generating the ToC and numbering
   // after the document is transformed

app/assets/scripts/components/documents/single-view/common/variables-table.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { EmptySection } from '../document-body';
+import SafeReadEditor from '../../../slate/safe-read-editor';
+import styled from 'styled-components';
+import { VariablePropType } from '../../../../types';
+
+const TableElement = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+  margin: 20px 0;
+`;
+
+const Tr = styled.tr`
+  &:nth-child(even) {
+    background-color: #f2f2f2;
+  }
+`;
+
+const Th = styled.th`
+  background-color: rgb(244, 245, 247);
+  border: 1px solid rgb(193, 199, 208);
+  padding: 8px;
+  min-width: 48px;
+  text-align: left;
+
+  > * {
+    margin: 0;
+  }
+`;
+
+const Td = styled.td`
+  background-color: rgb(255, 255, 255);
+  border: 1px solid rgb(193, 199, 208);
+  padding: 8px;
+  min-width: 48px;
+
+  > * {
+    margin: 0;
+  }
+`;
+
+const NameTd = styled(Td)`
+  width: 150px;
+`;
+
+const UnitTd = styled(Td)`
+  width: 100px;
+`;
+
+export const VariablesTable = ({ variables }) => {
+  return (
+    <TableElement>
+      <thead>
+        <Tr>
+          <Th>Name</Th>
+          <Th>Long Name</Th>
+          <Th>Unit</Th>
+        </Tr>
+      </thead>
+      <tbody>
+        {variables.map((variable) => (
+          <Tr key={variable.name.children[0].children[0].text}>
+            <NameTd>
+              <SafeReadEditor
+                value={variable.name}
+                whenEmpty={<EmptySection />}
+              />
+            </NameTd>
+            <Td>
+              <SafeReadEditor
+                value={variable.long_name}
+                whenEmpty={<EmptySection />}
+              />
+            </Td>
+            <UnitTd>
+              <SafeReadEditor
+                value={variable.unit}
+                whenEmpty={<EmptySection />}
+              />
+            </UnitTd>
+          </Tr>
+        ))}
+      </tbody>
+    </TableElement>
+  );
+};
+
+VariablesTable.propTypes = {
+  variables: PropTypes.arrayOf(VariablePropType).isRequired
+};