feat(attributions): add attributions to menu (#643)

* feat(attributions): add attributions to menu * feat(attribution): use only one useState * refactor(attribution): change default value
ubilabs · Sep 22, 2020 · 6b38c67 · 6b38c67
1 parent 834a4bd
commit 6b38c67
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 6 deletions.
diff --git a/i18n/de.json b/i18n/de.json
@@ -32,6 +32,7 @@
   "export": "Daten exportieren",
   "info": "Weitere Informationen",
   "about": "Über das Projekt",
+  "attributions": "Attributions",
   "EsaWebsite": "ESA Website",
   "CCIWebsite": "CCI Website",
   "github": "Github",
@@ -41,6 +42,7 @@
   "storiesSelected": "{numberSelected, number} {numberSelected, plural, one {Geschichte} other {Geschichten}} ausgewählt",
   "resetFilters": "Filter löschen",
   "projectDescription": "# About the project\n\nThe European Space Agency (ESA) [Climate Change Initiative (CCI)](https://climate.esa.int/) programme aims to provide stable, long-term, satellite-based Essential Climate Variable (ECV) data products to the scientific community and general public. Based on Earth Observation (EO) archives that ESA together with its member states have established over the last 30 years, the CCI programme adds significant and timely contributions to the ECV databases required by United Nations Framework Convention on Climate Change ([UNFCCC](https://unfccc.int/)).\n\nESA's Climate Change initiative is organised in different themes:\n- Development of Essential Climate Variables\n- Cross-ECV scientific exploitation of the data products\n- Knowledge Exchange\n\nThe objective for Knowledge Exchange activities within CCI is to maximise awareness, access, use\nand understanding of satellite data for climate research with an emphasis on promoting the CCI\nProgramme as a whole.\n\nThe role of the Climate from Space application (this application) within those objectives is to increase the visibility of the CCI programme and the role of ESA satellite data in climate science. It addresses a general public and educational audience as well as representing ESA climate office at exhibition environments.",
+  "attributionDescription": "# Attributions\n\nBackground maps created by Planetary Visions, \n\nbased on: GMTED2010 digital terrain (USGS/NGA), HydroSHEDS rivers (USGS), ESA CCI Land Cover water bodies, permanent snow and ice (UCL), Natural Earth international boundaries and coastline (naturalearthdata.com)\n\nCopyright (C) 2020 Planetary Visions Limited",
   "tags.sea-surface-temperature": "Meeresoberflächentemperatur",
   "tags.sea-ice": "Meereis",
   "tags.ocean-colour": "Ozean Farbe",

diff --git a/i18n/en.json b/i18n/en.json
@@ -32,6 +32,7 @@
   "export": "Export Data",
   "info": "More Information",
   "about": "About this project",
+  "attributions": "Attributions",
   "EsaWebsite": "ESA Website",
   "CCIWebsite": "CCI Website",
   "github": "Github",
@@ -41,6 +42,7 @@
   "storiesSelected": "{numberSelected, number} {numberSelected, plural, one {Story} other {Stories}} selected",
   "resetFilters": "Reset Filters",
   "projectDescription": "# About the project\n\nThe European Space Agency (ESA) [Climate Change Initiative (CCI)](https://climate.esa.int/) programme aims to provide stable, long-term, satellite-based Essential Climate Variable (ECV) data products to the scientific community and general public. Based on Earth Observation (EO) archives that ESA together with its member states have established over the last 30 years, the CCI programme adds significant and timely contributions to the ECV databases required by United Nations Framework Convention on Climate Change ([UNFCCC](https://unfccc.int/)).\n\nESA's Climate Change initiative is organised in different themes:\n- Development of Essential Climate Variables\n- Cross-ECV scientific exploitation of the data products\n- Knowledge Exchange\n\nThe objective for Knowledge Exchange activities within CCI is to maximise awareness, access, use\nand understanding of satellite data for climate research with an emphasis on promoting the CCI\nProgramme as a whole.\n\nThe role of the Climate from Space application (this application) within those objectives is to increase the visibility of the CCI programme and the role of ESA satellite data in climate science. It addresses a general public and educational audience as well as representing ESA climate office at exhibition environments.",
+  "attributionDescription": "# Attributions\n\nBackground maps created by Planetary Visions, \n\nbased on: GMTED2010 digital terrain (USGS/NGA), HydroSHEDS rivers (USGS), ESA CCI Land Cover water bodies, permanent snow and ice (UCL), Natural Earth international boundaries and coastline (naturalearthdata.com)\n\nCopyright (C) 2020 Planetary Visions Limited",
   "tags.sea-surface-temperature": "Sea Surface Temperature",
   "tags.sea-ice": "Sea Ice",
   "tags.ocean-colour": "Ocean Colour",

diff --git a/i18n/es.json b/i18n/es.json
@@ -32,6 +32,7 @@
   "export": "Exportar datos",
   "info": "Más información",
   "about": "Acerca de este proyecto",
+  "attributions": "Attributions",
   "EsaWebsite": "El sitio web de ESA",
   "CCIWebsite": "El sitio web de CCI",
   "github": "Github",
@@ -41,6 +42,7 @@
   "storiesSelected": "{numberSelected, number} {numberSelected, plural, one {Historia} other {Historias}} seleccionada(s)",
   "resetFilters": "Restablecer filtros",
   "projectDescription": "# About the project\n\nThe European Space Agency (ESA) [Climate Change Initiative (CCI)](https://climate.esa.int/) programme aims to provide stable, long-term, satellite-based Essential Climate Variable (ECV) data products to the scientific community and general public. Based on Earth Observation (EO) archives that ESA together with its member states have established over the last 30 years, the CCI programme adds significant and timely contributions to the ECV databases required by United Nations Framework Convention on Climate Change ([UNFCCC](https://unfccc.int/)).\n\nESA's Climate Change initiative is organised in different themes:\n- Development of Essential Climate Variables\n- Cross-ECV scientific exploitation of the data products\n- Knowledge Exchange\n\nThe objective for Knowledge Exchange activities within CCI is to maximise awareness, access, use\nand understanding of satellite data for climate research with an emphasis on promoting the CCI\nProgramme as a whole.\n\nThe role of the Climate from Space application (this application) within those objectives is to increase the visibility of the CCI programme and the role of ESA satellite data in climate science. It addresses a general public and educational audience as well as representing ESA climate office at exhibition environments.",
+  "attributionDescription": "# Attributions\n\nBackground maps created by Planetary Visions, \n\nbased on: GMTED2010 digital terrain (USGS/NGA), HydroSHEDS rivers (USGS), ESA CCI Land Cover water bodies, permanent snow and ice (UCL), Natural Earth international boundaries and coastline (naturalearthdata.com)\n\nCopyright (C) 2020 Planetary Visions Limited",
   "tags.sea-surface-temperature": "Temperatura de la superficie del mar",
   "tags.sea-ice": "Hielo marino",
   "tags.ocean-colour": "Color del océano",

diff --git a/i18n/fr.json b/i18n/fr.json
@@ -32,6 +32,7 @@
   "export": "Exporter les données",
   "info": "Plus d'informations",
   "about": "À propos du projet",
+  "attributions": "Attributions",
   "EsaWebsite": "Site de l'ESA",
   "CCIWebsite": "Site de l'ICC",
   "github": "Github",
@@ -41,6 +42,7 @@
   "storiesSelected": "{numberSelected, number} {numberSelected, plural, one {Article} other {Articles}} sélectionné(z)",
   "resetFilters": "Réinitialiser les filtres",
   "projectDescription": "# About the project\n\nThe European Space Agency (ESA) [Climate Change Initiative (CCI)](https://climate.esa.int/) programme aims to provide stable, long-term, satellite-based Essential Climate Variable (ECV) data products to the scientific community and general public. Based on Earth Observation (EO) archives that ESA together with its member states have established over the last 30 years, the CCI programme adds significant and timely contributions to the ECV databases required by United Nations Framework Convention on Climate Change ([UNFCCC](https://unfccc.int/)).\n\nESA's Climate Change initiative is organised in different themes:\n- Development of Essential Climate Variables\n- Cross-ECV scientific exploitation of the data products\n- Knowledge Exchange\n\nThe objective for Knowledge Exchange activities within CCI is to maximise awareness, access, use\nand understanding of satellite data for climate research with an emphasis on promoting the CCI\nProgramme as a whole.\n\nThe role of the Climate from Space application (this application) within those objectives is to increase the visibility of the CCI programme and the role of ESA satellite data in climate science. It addresses a general public and educational audience as well as representing ESA climate office at exhibition environments.",
+  "attributionDescription": "# Attributions\n\nBackground maps created by Planetary Visions, \n\nbased on: GMTED2010 digital terrain (USGS/NGA), HydroSHEDS rivers (USGS), ESA CCI Land Cover water bodies, permanent snow and ice (UCL), Natural Earth international boundaries and coastline (naturalearthdata.com)\n\nCopyright (C) 2020 Planetary Visions Limited",
   "tags.sea-surface-temperature": "Température de surface de la mer",
   "tags.sea-ice": "Glace de mer",
   "tags.ocean-colour": "Couleur des océans",

diff --git a/i18n/nl.json b/i18n/nl.json
@@ -32,6 +32,7 @@
   "export": "Data exporteren",
   "info": "Meer informatie",
   "about": "Over dit project",
+  "attributions": "Attributions",
   "EsaWebsite": "ESA website",
   "CCIWebsite": "CCI website",
   "github": "Github",
@@ -41,6 +42,7 @@
   "storiesSelected": "{numberSelected, number} {numberSelected, plural, one {verhaal} other {verhalen}} selected",
   "resetFilters": "Filters wissen",
   "projectDescription": "# About the project\n\nThe European Space Agency (ESA) [Climate Change Initiative (CCI)](https://climate.esa.int/) programme aims to provide stable, long-term, satellite-based Essential Climate Variable (ECV) data products to the scientific community and general public. Based on Earth Observation (EO) archives that ESA together with its member states have established over the last 30 years, the CCI programme adds significant and timely contributions to the ECV databases required by United Nations Framework Convention on Climate Change ([UNFCCC](https://unfccc.int/)).\n\nESA's Climate Change initiative is organised in different themes:\n- Development of Essential Climate Variables\n- Cross-ECV scientific exploitation of the data products\n- Knowledge Exchange\n\nThe objective for Knowledge Exchange activities within CCI is to maximise awareness, access, use\nand understanding of satellite data for climate research with an emphasis on promoting the CCI\nProgramme as a whole.\n\nThe role of the Climate from Space application (this application) within those objectives is to increase the visibility of the CCI programme and the role of ESA satellite data in climate science. It addresses a general public and educational audience as well as representing ESA climate office at exhibition environments.",
+  "attributionDescription": "# Attributions\n\nBackground maps created by Planetary Visions, \n\nbased on: GMTED2010 digital terrain (USGS/NGA), HydroSHEDS rivers (USGS), ESA CCI Land Cover water bodies, permanent snow and ice (UCL), Natural Earth international boundaries and coastline (naturalearthdata.com)\n\nCopyright (C) 2020 Planetary Visions Limited",
   "tags.sea-surface-temperature": "Zeewateroppervlaktetemperatuur",
   "tags.sea-ice": "Zee-ijs",
   "tags.ocean-colour": "Oceaankleur",

diff --git a/src/scripts/components/main/attributions/attributions.styl b/src/scripts/components/main/attributions/attributions.styl
@@ -0,0 +1,18 @@
+@require '../../../../variables.styl'
+
+.attributions
+  display: flex
+  flex-direction: column
+  justify-content: center
+  width: 50%
+  color: $textDefault
+  font-family: NotesEsa
+
+  h1
+    display: flex
+    justify-content: space-between
+    color: $textDefault
+
+  a
+    color: $textColor
+    text-decoration: none
diff --git a/src/scripts/components/main/attributions/attributions.tsx b/src/scripts/components/main/attributions/attributions.tsx
@@ -0,0 +1,33 @@
+import React, {FunctionComponent} from 'react';
+import {useIntl} from 'react-intl';
+import ReactMarkdown from 'react-markdown';
+
+import styles from './attributions.styl';
+
+const Attributions: FunctionComponent = () => {
+  const intl = useIntl();
+
+  return (
+    <div className={styles.attributions}>
+      <ReactMarkdown
+        source={intl.formatMessage({id: 'attributionDescription'})}
+        linkTarget="_blank"
+        allowedTypes={[
+          'heading',
+          'text',
+          'paragraph',
+          'break',
+          'strong',
+          'emphasis',
+          'image',
+          'imageReference',
+          'list',
+          'listItem',
+          'link'
+        ]}
+      />
+    </div>
+  );
+};
+
+export default Attributions;
diff --git a/src/scripts/components/main/menu/menu.tsx b/src/scripts/components/main/menu/menu.tsx
@@ -15,20 +15,21 @@ import {LinuxIcon} from '../icons/linux-icon';
 import {AppleIcon} from '../icons/apple-icon';
 import config from '../../../config/main';
 import {Ubilabslogo} from '../icons/ubilabs-logo';
+import Attributions from '../attributions/attributions';
 
 import styles from './menu.styl';
 
 const Menu: FunctionComponent = () => {
-  const [showOverlay, setShowOverlay] = useState(false);
+  const [overlayType, setOverlayType] = useState<string | null>(null);
   // @ts-ignore - injected via webpack's define plugin
   const version = INFO_VERSION;
 
   return (
     <React.Fragment>
       <nav className={styles.menuContainer}>
-        {showOverlay ? (
-          <Overlay onClose={() => setShowOverlay(false)}>
-            <AboutProject />
+        {overlayType ? (
+          <Overlay onClose={() => setOverlayType(null)}>
+            {overlayType === 'about' ? <AboutProject /> : <Attributions />}
           </Overlay>
         ) : (
           <React.Fragment>
@@ -101,7 +102,7 @@ const Menu: FunctionComponent = () => {
                 <Button
                   className={styles.menuButton}
                   label={'about'}
-                  onClick={() => setShowOverlay(true)}
+                  onClick={() => setOverlayType('about')}
                 />
               </li>
               <li className={styles.menuListItem}>
@@ -131,6 +132,13 @@ const Menu: FunctionComponent = () => {
                   <FormattedMessage id={'github'} />
                 </a>
               </li>
+              <li className={styles.menuListItem}>
+                <Button
+                  className={styles.menuButton}
+                  label={'attributions'}
+                  onClick={() => setOverlayType('attributions')}
+                />
+              </li>
             </ul>
           </React.Fragment>
         )}

diff --git a/webpack.config.js b/webpack.config.js
@@ -97,7 +97,10 @@ module.exports = (env, {mode} = {}) => {
       sourcePrefix: ''
     },
     devServer: {
-      contentBase: [path.join(__dirname, 'dist'), path.join(__dirname, 'storage')],
+      contentBase: [
+        path.join(__dirname, 'dist'),
+        path.join(__dirname, 'storage')
+      ],
       contentBasePublicPath: ['/', '/storage'],
       port: 8080,
       watchContentBase: true
@@ -133,6 +136,10 @@ module.exports = (env, {mode} = {}) => {
         {
           from: './node_modules/cesium/Build/Cesium/Workers',
           to: './cesium/Workers'
+        },
+        {
+          from: './assets/images',
+          to: './assets/images'
         }
       ])
     ]