feat(layer-info): content updates (#541)

* feat(about project): add links * feat(layers): update data formats for daily data sets * feat(layers): update descriptions adding landcover detailed legend * feat(content): adding mark down converter Stringifies Markdown for use in config files * feat(biomass): update description * feat(biomass): update description * fix(meta data updater): bump version and fix paths
ubilabs · Aug 31, 2020 · 2cd3c5a · 2cd3c5a
1 parent 7f9aa1f
commit 2cd3c5a
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 15 deletions.
diff --git a/data/layers-config.json b/data/layers-config.json
@@ -24,7 +24,8 @@
     "basemap": "ocean",
     "timeFormat": {
       "year": "numeric",
-      "month": "long"
+      "month": "long",
+      "day": "numeric"
     },
     "flyTo": {
       "position": {
@@ -226,7 +227,8 @@
     "basemap": "blue",
     "timeFormat": {
       "year": "numeric",
-      "month": "long"
+      "month": "long",
+      "day": "numeric"
     },
     "flyTo": {
       "position": {
@@ -246,7 +248,8 @@
     "basemap": "blue",
     "timeFormat": {
       "year": "numeric",
-      "month": "long"
+      "month": "long",
+      "day": "numeric"
     },
     "flyTo": {
       "position": {

diff --git a/i18n/en.json b/i18n/en.json
@@ -40,7 +40,7 @@
   "dataInfo": "Data Information",
   "storiesSelected": "{numberSelected, number} {numberSelected, plural, one {Story} other {Stories}} selected",
   "resetFilters": "Reset Filters",
-  "projectDescription": "# About the project\n\nClimate from Space application for ESAs CCI program.\n\nLorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis natus praesentium reprehenderit veritatis mollitia quisquam distinctio nihil voluptate rerum ut placeat sint tenetur, tempora facere, velit in sed. Ex, sapiente.",
+  "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.",
   "tags.nature": "Nature",
   "tags.biomass": "Biomass",
   "tags.university": "University",

diff --git a/scripts/md-converter.html b/scripts/md-converter.html
@@ -0,0 +1,37 @@
+<html>
+    <head>
+        <title>Mark Down Converter</title>
+        <style>
+            input, textarea {
+                width: 80%;
+            }
+        </style>
+    </head>
+    <body>
+        <h1>Prepare Mark Down for config files by stringifying multiline content</h1>
+        Markdown:<br>
+        <textarea id="rawInput" cols="100" rows="30"></textarea><br>
+        <br>
+        Stringified:<br>
+        <input id="processedContent"/><br>
+        (Clicking or giving focus will copy into clipboard.)
+        <script>
+            document.getElementById('rawInput').value = '# Hello\nworld!';
+            document.getElementById('rawInput').focus();
+            document.getElementById('rawInput').select();
+
+            function copyToClipboard(){
+                document.getElementById('processedContent').select();
+                document.execCommand('copy');
+                console.log('copied!');
+            }
+
+            document.getElementById('rawInput').addEventListener('keyup', ()=> {
+                const rawContent = document.getElementById('rawInput').value;
+                document.getElementById('processedContent').value = JSON.stringify(rawContent).slice(1, -1).trim();
+            });
+            document.getElementById('processedContent').addEventListener('click', copyToClipboard);
+            document.getElementById('processedContent').addEventListener('focus', copyToClipboard);
+        </script>
+    </body>
+</html>
diff --git a/scripts/update-metadata.sh b/scripts/update-metadata.sh
@@ -4,9 +4,9 @@
 # Usage: ./scripts/update-metadata.sh <layerId (optional)>
 
 
-version=0.6.1
+version=0.7.1
 workingDir="./download"
-layersConfigFile="./data/layers-config.json"
+layersConfigFile="../data/layers-config.json"
 
 # take optional layer ID from command line argument
 layerID=$1

diff --git a/src/scripts/components/layers/layer-info/layer-info.tsx b/src/scripts/components/layers/layer-info/layer-info.tsx
@@ -1,5 +1,5 @@
 import React, {FunctionComponent} from 'react';
-import ReactMarkdown from 'react-markdown';
+import ReactMarkdown from 'react-markdown/with-html';
 
 import {LayerListItem} from '../../../types/layer-list';
 
@@ -17,6 +17,7 @@ const LayerInfo: FunctionComponent<Props> = ({layer}) => (
       <ReactMarkdown
         source={layer.description}
         linkTarget="_blank"
+        escapeHtml={false}
         allowedTypes={[
           'heading',
           'text',
@@ -26,7 +27,8 @@ const LayerInfo: FunctionComponent<Props> = ({layer}) => (
           'emphasis',
           'list',
           'listItem',
-          'link'
+          'link',
+          'html'
         ]}
       />
     </div>

diff --git a/src/scripts/components/main/about-project/about-project.styl b/src/scripts/components/main/about-project/about-project.styl
@@ -12,3 +12,7 @@
     display: flex
     justify-content: space-between
     color: $textDefault
+
+  a
+    color: $textColor
+    text-decoration: none
diff --git a/src/scripts/components/main/about-project/about-project.tsx b/src/scripts/components/main/about-project/about-project.tsx
@@ -22,7 +22,8 @@ const AboutProject: FunctionComponent = () => {
           'image',
           'imageReference',
           'list',
-          'listItem'
+          'listItem',
+          'link'
         ]}
       />
     </div>