template cover with updated example.config.js

2026-06-08 03:18:36 +03:00 · 2019-05-16 10:38:46 +01:00
parent 6e2ae8cd20
commit db92644624
22 changed files with 12866 additions and 76 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -3,9 +3,6 @@ build/
 node_modules/
 config.js
 dev.config.js
-# ignore all covers but the default
-src/components/presentational/covers/
-!src/src/components/presentational/covers/Default.js

 src/\.DS_Store

--- a/example.config.js
+++ b/example.config.js
@@ -9,18 +9,42 @@ module.exports = {
  SITES_EXT: '/api/example/export_sites/rows',
  SHAPES_EXT: '/api/example/export_shapes/columns',
  INCOMING_DATETIME_FORMAT: '%m/%d/%YT%H:%M',
-  // MAPBOX_TOKEN: 'pk.EXAMPLE_MAPBOX_TOKEN',
+  MAPBOX_TOKEN: 'pk.EXAMPLE_MAPBOX_TOKEN',
  features: {
    USE_COVER: false,
    USE_TAGS: false,
    USE_SEARCH: false,
    USE_SITES: true,
    USE_SOURCES: true,
-    USE_SHAPES: false,
+    USE_SHAPES: true,
    CATEGORIES_AS_TAGS: true
  },
  store: {
    app: {
+      cover: {
+        title: 'project title',         //required
+        subtitle: 'project subtitle',   //required
+        description: 'A description of the project goes here.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n\nThis description may contain markdown.\n\n#### markdown\n\n### markdown\n\n## markdown', //required
+        // subsubtitle: '<project subsubtitle>',
+        // bgVideo:'<url for bakground video>',
+        // howToVideo: {
+        //   title: '<how to video title>',
+        //   desc: 'This step-by-step guide explores the way that the platform arranges and presents information.',
+        //   file: '<url for how to video>',
+        //   poster: '<poster for how to video>'
+        // },
+        //  - up to 4 additional videos can be included -
+        // videos: [
+        //   {
+        //     title: '<video 1 title>',
+        //     desc: '<video 1 description>',
+        //     file: '<url for video 1 file>',
+        //     poster: '<url for video 1 poster>',
+        //     buttonTitle: '<video 1 button title>',
+        //     buttonSubtitle: '<video 1 button subtitle>'
+        //   }
+        // ]
+      },
      map: {
        anchor: [31.356397, 34.784818]
      },
@@ -34,15 +58,14 @@ module.exports = {
          new Date(2018, 1, 6, 23)
        ]
      }
-    },
-    ui: {
-      style: {
-        categories: {},
-        shapes: {},
-        narratives: {},
-        selectedEvent: {}
-      }
+    }
+  },
+  ui: {
+    style: {
+      categories: {},
+      shapes: {},
+      narratives: {},
+      selectedEvent: {}
    }
  }
-
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
    "react-device-detect": "^1.6.2",
    "react-dom": "^16.6.3",
    "react-image": "^1.5.1",
+    "react-markdown": "^4.0.8",
    "react-portal": "^4.2.0",
    "react-redux": "^5.0.4",
    "react-tabs": "^1.0.0",
--- a/src/components/InfoPopup.jsx
+++ b/src/components/InfoPopup.jsx
@@ -6,9 +6,31 @@ export default ({ ui, app, methods }) => {
    return copy[app.language].legend.default.intro.map(txt => <p>{txt}</p>)
  }

+  function renderHalfWithDot () {
+    const categories = Object.keys(ui.style.categories).filter(label => label !== 'default')
+    let firstFill = 'red'
+    let secondFill = 'yellow'
+    if (categories.length >= 1) {
+      firstFill = 'rgb(163, 22, 33)'
+    }
+    if (categories.length >= 2) {
+      secondFill = '#1c5df9'
+    }
+    return [
+      <style>{`.svg-demo { max-width: 30px } .first { fill: ${firstFill} } .second { fill: ${secondFill} } .demo-text { font-size: 9pt; color: white; font-weight:900 }`}</style>,
+      <svg viewBox='0 0 30 30' className='svg-demo'>
+        <g className='location demo-element' transform='translate(15,15)'>
+          <path className="location-event-marker first" id="arc_0" d="M 10 0 A 10 10 0 0 1 -10 1.2246467991473533e-15 L 0 0  L 10 0 Z" />
+          <path class="location-event-marker second" id="arc_1" d="M -10 1.2246467991473533e-15 A 10 10 0 0 1 10 -2.4492935982947065e-15 L 0 0  L -10 1.2246467991473533e-15 Z" />
+          <text class="location-count demo-text" dx="-4" dy="4">2</text>
+        </g>
+      </svg>
+    ]
+  }
+
  function renderCategoryColors () {
    const categories = Object.keys(ui.style.categories).filter(label => label !== 'default')
-
+    categories.reverse()
    return categories.map(category => (
      <div className='legend-section'>
        <svg x='0px' y='0px' width='50px' height='20px' viewBox='0 0 100 30' enableBackground='new 0 0 100 30'>
@@ -21,7 +43,21 @@ export default ({ ui, app, methods }) => {
    ))
  }

+  function renderArrow (strokeFill) {
+    return (
+      <svg x='-10px' y='0px' width='100px' height='30px' viewBox='0 40 100 30' enableBackground='new 0 0 100 70'>
+        <polyline fill='none' stroke={strokeFill} strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' stroke-miterlimit='10' points='
+          8.376,63.723 47.287,63.723 60,46 80,46 ' />
+        {/* <line stroke={strokeFill} strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' x1='33.723' y1='59.663' x2='39.069' y2='63.723' /> */}
+        {/* <line stroke={strokeFill} strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' x1='33.723' y1='67.782' x2='39.069' y2='63.723' /> */}
+        <line stroke={strokeFill} strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' x1='78.849' y1='41.94' x2='84.195' y2='46' />
+        <line stroke={strokeFill} strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' x1='78.849' y1='50.06' x2='84.195' y2='46' />
+      </svg>
+    )
+  }
+
  function renderView2DLegend () {
+    const categories = Object.keys(ui.style.categories).filter(label => label !== 'default')
    return (
      <div className={`infopopup ${(app.flags.isInfopopup) ? '' : 'hidden'}`}>
        <div className='legend-header'>
@@ -29,11 +65,39 @@ export default ({ ui, app, methods }) => {
          <h2>{copy[app.language].legend.default.header}</h2>
        </div>
        {renderIntro()}
+        <div>
+          {renderCategoryColors()}
+        </div>
+        <br />
        <div className='legend'>
          <div className='legend-container'>
-            {renderCategoryColors()}
+            <div className='legend-item one'>
+              {renderHalfWithDot()}
+            </div>
+            <div className='legend-item three'>
+              {copy[app.language].legend.default.notation}
+            </div>
          </div>
        </div>
+        <br/>
+        <div>
+          <p>In narratives, arrows indicate physical movement between two events.</p>
+        </div>
+
+        {
+          ui.style.arrows ? (
+
+            Object.keys(ui.style.arrows).map( arrowName => (
+              <div className='legend-section'>
+                {renderArrow(ui.style.arrows[arrowName])}
+                <div className='legend-labels'>
+                  <div className='label'>{arrowName}</div>
+                </div>
+              </div>
+            ))
+          ) : null
+        }
+
      </div>
    )
  }
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -14,7 +14,7 @@ import InfoPopUp from './InfoPopup.jsx'
 import Timeline from './Timeline.jsx'
 import Notification from './Notification.jsx'
 import StaticPage from './StaticPage'
-import DefaultCover from './presentational/covers/Default'
+import TemplateCover from './presentational/covers/TemplateCover'

 import { parseDate } from '../js/utilities'

@@ -108,7 +108,7 @@ class Dashboard extends React.Component {
            <StaticPage showing={app.flags.isCover}>
              {/* enable USE_COVER in config.js features, and customise your header */}
              {/* pass 'actions.toggleCover' as a prop to your custom header */}
-              <DefaultCover showAppHandler={() => {
+              <TemplateCover showAppHandler={() => {
                /* eslint-disable no-undef */
                alert('This platform is not suitable for mobile. Please re-visit the site on a device with a larger screen.')
                /* eslint-enable no-undef */
@@ -187,7 +187,7 @@ class Dashboard extends React.Component {
          <StaticPage showing={app.flags.isCover}>
            {/* enable USE_COVER in config.js features, and customise your header */}
            {/* pass 'actions.toggleCover' as a prop to your custom header */}
-            <DefaultCover showAppHandler={actions.toggleCover} />
+            <TemplateCover showing={app.flags.isCover} showAppHandler={actions.toggleCover} />
          </StaticPage>
        )}
        <LoadingOverlay
--- a/src/components/Map.jsx
+++ b/src/components/Map.jsx
@@ -17,6 +17,7 @@ import DefsMarkers from './presentational/Map/DefsMarkers.jsx'

 // NB: important constants for map, TODO: make statics
 const supportedMapboxMap = ['streets', 'satellite']
+const defaultToken = 'your_token'

 class Map extends React.Component {
  constructor () {
@@ -69,17 +70,14 @@ class Map extends React.Component {

    let firstLayer

-    // if mapbox token and one of the default maps are specified
-    if ((supportedMapboxMap.indexOf(this.props.ui.tiles) !== -1) && process.env.MAPBOX_TOKEN) {
+    if ((supportedMapboxMap.indexOf(this.props.ui.tiles) !== -1) && process.env.MAPBOX_TOKEN && process.env.MAPBOX_TOKEN !== defaultToken) {
      firstLayer = L.tileLayer(
        `http://a.tiles.mapbox.com/v4/mapbox.${this.props.ui.tiles}/{z}/{x}/{y}@2x.png?access_token=${process.env.MAPBOX_TOKEN}`
      )
-    // if mapbox token and custom map
-    } else if (process.env.MAPBOX_TOKEN) {
+    } else if (process.env.MAPBOX_TOKEN && process.env.MAPBOX_TOKEN !== defaultToken) {
      firstLayer = L.tileLayer(
        `http://a.tiles.mapbox.com/styles/v1/${this.props.ui.tiles}/tiles/{z}/{x}/{y}?access_token=${process.env.MAPBOX_TOKEN}`
      )
-    // no mapbox token
    } else {
      firstLayer = L.tileLayer(
        'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
--- a/src/components/Overlay/Content.js
+++ b/src/components/Overlay/Content.js
@@ -10,7 +10,7 @@ export default ({ media, viewIdx }) => {
  const shiftW = el ? el.getBoundingClientRect().width : 0

  function renderMedia (media) {
-    const { path, type } = media
+    const { path, type, poster } = media
    switch (type) {
      case 'Image':
        return (
@@ -27,6 +27,7 @@ export default ({ media, viewIdx }) => {
        return (
          <div className='media-player'>
            <Player
+              poster={poster}
              className='source-video'
              playsInline
              src={path}
--- a/src/components/Overlay/Media.js
+++ b/src/components/Overlay/Media.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import Content from './Content'
 import Controls from './Controls'
-import { selectTypeFromPath } from '../../js/utilities'
+import { selectTypeFromPathWithPoster } from '../../js/utilities'

 class SourceOverlay extends React.Component {
  constructor () {
@@ -32,11 +32,11 @@ class SourceOverlay extends React.Component {
    if (typeof (this.props.source) !== 'object') {
      return this.renderError()
    }
-    const { url, title, paths, date, type } = this.props.source
+    const { url, title, paths, date, type, desc, poster } = this.props.source
    const shortenedTitle = title.substring(0, 100)

    return (
-      <div className='mo-overlay'>
+      <div className={`mo-overlay ${this.props.opaque ? 'opaque' : ''}`}>
        <div className='mo-banner'>
          <div className='mo-banner-close' onClick={this.props.onCancel}>
            <i className='material-icons'>close</i>
@@ -49,7 +49,7 @@ class SourceOverlay extends React.Component {

        <div className='mo-container' onClick={e => e.stopPropagation()}>
          <div className='mo-media-container'>
-            <Content media={paths.map(selectTypeFromPath)} viewIdx={this.state.idx} />
+            <Content media={paths.map(p => selectTypeFromPathWithPoster(p, poster))} viewIdx={this.state.idx} />
          </div>

        </div>
@@ -58,25 +58,24 @@ class SourceOverlay extends React.Component {
          <Controls paths={paths} viewIdx={this.state.idx} onShiftHandler={this.onShiftGallery} />

          <div className='mo-meta-container'>
-            {/* <div className='mo-box-title'> */}
-            {/*   {title ? <p><b>{title}</b></p> : null} */}
-            {/*   <div>{desc}</div> */}
-            {/* </div> */}
+            <div className='mo-box-title'>
+              <div>{desc}</div>
+            </div>

-            <div className='mo-box'>
+            {(type || date || url) ? <div className='mo-box'>
              <div>
                {type ? <h4>Media type</h4> : null}
                {type ? <p><i className='material-icons left'>perm_media</i>{type}</p> : null}
              </div>
              <div>
-                {date ? <h4>Date</h4> : null}
+                {date ? <h4>Date Published</h4> : null}
                {date ? <p><i className='material-icons left'>today</i>{date}</p> : null}
              </div>
              <div>
                {url ? <h4>Link</h4> : null}
                {url ? <span><i className='material-icons left'>link</i><a href={url} target='_blank'>Link to original URL</a></span> : null}
              </div>
-            </div>
+            </div> : null}
          </div>
        </div>

--- a/src/components/presentational/Card/Location.js
+++ b/src/components/presentational/Card/Location.js
@@ -1,10 +1,9 @@
 import React from 'react'

 import copy from '../../../js/data/copy.json'
-import { isNotNullNorUndefined } from '../../../js/utilities'

 const CardLocation = ({ language, location, isPrecise }) => {
-  if (isNotNullNorUndefined(location)) {
+  if (location !== '') {
    return (
      <div className='card-cell location'>
        <p>
--- a/src/components/presentational/Map/Events.jsx
+++ b/src/components/presentational/Map/Events.jsx
@@ -96,9 +96,9 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation,

    return (
      <g
-        className='location'
+        className={`location ${narrative ? 'no-hover' : ''}`}
        transform={`translate(${x}, ${y})`}
-        onClick={() => onSelect(location.events)}
+        onClick={(!narrative) ? () => onSelect(location.events) : null}
      >
        {renderLocationSlicesByCategory(location)}
        {extraRender ? extraRender() : null}
--- a/src/components/presentational/covers/TemplateCover.js
+++ b/src/components/presentational/covers/TemplateCover.js
@@ -0,0 +1,115 @@
+import React from 'react'
+import { connect } from "react-redux"
+import MediaOverlay from '../../Overlay/Media'
+
+const ReactMarkdown = require('react-markdown')
+
+const MEDIA_HIDDEN = -2
+const MEDIA_HOWTO = -1
+
+class TemplateCover extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      video: MEDIA_HIDDEN
+    }
+  }
+
+  getVideo(index) {
+    if(index == MEDIA_HOWTO) {
+      return this.props.cover.howToVideo
+    } else if(index >= 0) {
+      return this.props.cover.videos[index]
+    } else {
+      return null
+    }
+  }
+
+  render () {
+    var video = this.getVideo(this.state.video)
+    return (
+      <div className='default-cover-container'>
+        <div className="cover-content">
+          {
+            this.props.cover.bgVideo ? (
+              <div className={`fullscreen-bg ${!this.props.showing ? 'hidden' : ''}`}>
+                <video
+                  loop
+                  muted
+                  autoPlay
+                  preload='auto'
+                  className='fullscreen-bg__video'
+                >
+                <source src={this.props.cover.bgVideo} type='video/mp4' />
+                </video>
+              </div>
+            ) : null
+          }
+          <h1 style={{ 'margin-bottom': '-20px', 'text-align': 'center' }}>{this.props.cover.title}</h1>
+          <h3 style={{ 'text-align': 'center' }}>{this.props.cover.subtitle}</h3>
+          {
+            this.props.cover.subsubtitle ? (
+              <h5 style={{ 'text-align': 'center', 'margin-top': '-10px' }}>{this.props.cover.subsubtitle}</h5>
+            ) : null
+          }
+          <hr />
+          <div className='hero thin'>
+          {
+            this.props.cover.howToVideo ? (
+              <div className='row'>
+                <div className='cell plain' onClick={() => this.setState({ video: -1 })}>
+                  How to Use the Platform
+                </div>
+              </div>
+            ) : null
+          }
+            <div className='row'>
+              <div className='cell yellow' onClick={this.props.showAppHandler}>
+                EXPLORE
+              </div>
+            </div>
+          </div>
+
+          <ReactMarkdown source={this.props.cover.description} />
+
+          {
+            this.props.cover.videos ? (
+              <div className='hero'>
+                <div className='row'>
+                  { this.props.cover.videos.slice(0,4).map( (media, index) => (
+                    <div className='cell small' onClick={() => this.setState({ video: index })} >
+                      {media.buttonTitle}<br />{media.buttonSubtitle}
+                    </div>
+                  )) }
+                </div>
+              </div>
+            ) : null
+          }
+        </div>
+
+        {
+          this.state.video != MEDIA_HIDDEN ? (
+          <MediaOverlay
+            opaque
+            source={
+              {
+              title: video.title,
+              desc: video.desc,
+              paths: [video.file],
+              poster: video.poster
+            }}
+            onCancel={() => this.setState({ video: MEDIA_HIDDEN })}
+          />
+        ) : null }
+      </div>
+    )
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    cover : state.app.cover
+  }
+}
+
+export default connect(mapStateToProps) (TemplateCover);
--- a/src/js/data/copy.json
+++ b/src/js/data/copy.json
@@ -97,7 +97,9 @@
          "Each event represents an occurence that is distinct in either time, space, or both. An event is represented by a coloured circle on both the map and the timeline.",
          "Select an event to reveal its content and sources. You can filter events by category or other specified filters in the top left toolbar.",
          "Narratives compose events to reveal logical threads that emerge from them. Transition to narrative mode by selecting a narrative from the top left dashboard icon."
-        ]
+        ],
+        "notation": "Combinations of colours indicate multiple events in a single location.",
+        "arrows": "Arrows indicate physical movement between events."
      }
    },
    "toolbar": {
@@ -117,14 +119,14 @@
        }
      },
      "narratives_label": "Narratives",
-      "narrative_summary": "Here you can follow some curated stories we have found in the data.",
+      "narrative_summary": "Follow a path through the data, from one key event to the next.",
      "categories": "Categories",
      "tags": "Filters",
      "tags_label": "Filters",
      "explore_by_tag__title": "Explore by filter",
      "explore_by_tag__description": "Selecting a filter will show you only those events that are annotated with the filter. If you select nothing, as well as everything, all data will be displayed.",
-      "explore_by_category__title": "Explore by category",
-      "explore_by_category__description": "Selecting a category will show you only the events in that category. If you select a filter on top, it will filter events only in the selected categories."
+      "explore_by_category__title": "Explore events by category",
+      "explore_by_category__description": ""

    },
    "timeline": {
--- a/src/js/utilities.js
+++ b/src/js/utilities.js
@@ -151,3 +151,18 @@ export function selectTypeFromPath (path) {
  }
  return { type, path }
 }
+
+export function selectTypeFromPathWithPoster (path, poster) {
+  let type
+  switch (true) {
+    case /\.(png|jpg)$/.test(path):
+      type = 'Image'; break
+    case /\.(mp4)$/.test(path):
+      type = 'Video'; break
+    case /\.(md)$/.test(path):
+      type = 'Text'; break
+    default:
+      type = 'Unknown'; break
+  }
+  return { type, path, poster }
+}
--- a/src/reducers/schema/eventSchema.js
+++ b/src/reducers/schema/eventSchema.js
@@ -11,6 +11,7 @@ const eventSchema = Joi.object().keys({
  longitude: Joi.string().allow(''),
  type: Joi.string().allow(''),
  category: Joi.string().required(),
+  category_full: Joi.string().allow(''),
  narratives: Joi.array(),
  sources: Joi.array(),
  tags: Joi.array().allow(''),
--- a/src/scss/_colors.scss
+++ b/src/scss/_colors.scss
@@ -5,6 +5,7 @@ $lightwhite: #dfdfdf;
 $midwhite: #a0a0a0;
 $darkwhite: darken($midwhite, 15%);
 $yellow: #ffd800;
+// $yellow: rgb(240, 255, 0);
 $red: rgb(233, 0, 19);
 $green: rgb(61, 241, 79);
 $midgrey: rgb(44, 44, 44);
--- a/src/scss/cover.scss
+++ b/src/scss/cover.scss
@@ -5,10 +5,10 @@
  background-color: black;
  width: 100%;
  height: 100%;
-  opacity: 0.95;
+  opacity: 1;
  transition: top 0.4s ease;
  z-index: $overheader + 1;
-
+  overflow-y: auto;
  color: $offwhite;

  &.showing {
@@ -17,10 +17,212 @@
  }
 }

+.fullscreen-bg {
+  &.hidden {
+    top: -100%;
+  }
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  z-index: -100;
+  background: #000000; }
+
+.fullscreen-bg__video {
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  -webkit-filter: contrast(70%) brightness(70%) grayscale(100%);
+  /* Webkit */
+  /*  filter: gray; /* IE6-9 */
+  filter: contrast(70%) brightness(70%) grayscale(100%);
+  /* W3C */ }
+
 .default-cover-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  height: 100%;
-}
+}
+
+.cover-container {
+  font-size: 12pt;
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+
+  hr, br {
+    width: 100%;
+  }
+
+
+  .sidebar {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: space-around;
+    position: fixed;
+    left: 0;
+    background-color: $offwhite;
+    margin-top: 60px;
+    min-height: calc(100% - 280px);
+    max-height: calc(100% - 280px);
+    min-width: 19%;
+    max-width: 19%;
+    color: black;
+    .il-video-pill {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      flex: 1;
+      background-color: transparent;
+      border-bottom: 5px solid black;
+      transition: all 0.4s ease;
+      &.explore {
+        background-color: $yellow;
+      }
+      &.videos {
+        background-color: blue;
+      }
+      &:hover {
+        cursor: pointer;
+        background-color: $darkwhite;
+        color: white;
+      }
+    }
+  }
+
+  .hero {
+    min-width: 100%;
+    max-width: 100%;
+    min-height: 100px;
+    &.thin {
+      min-width: 250px;
+      max-width: 400px;
+    }
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 20px;
+    margin-top: 20px;
+    .row {
+      display: flex;
+      flex: 1;
+      flex-direction: row;
+      @media only screen and (max-width: 1200px) {
+        flex-direction: column;
+      }
+      justify-content: space-around;
+      .cell {
+        border: 1px solid white;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        flex: 1;
+        background-color: $darkgrey;
+        padding: 10px 0;
+        transition: all 0.4s ease;
+        letter-spacing: 2px;
+        min-height: 40px;
+        &.small {
+          letter-spacing: inherit;
+          font-size: 10pt;
+        }
+        &.plain {
+          min-height: 10px;
+          background-color: black;
+          letter-spacing: 1px;
+        }
+        &.yellow {
+          color: black;
+          background-color: $yellow;
+        }
+        &:hover {
+          cursor: pointer;
+          background-color: $darkwhite;
+          color: white;
+        }
+      }
+    }
+  }
+
+  .cover-content {
+    display: flex;
+    flex-direction: column;
+    // min-width: 100%;
+    padding: 20px 40px 0px 40px;
+
+    @media only screen and (min-width: 992px) {
+      padding: 20px 30% 0px 30%;
+    }
+
+    .verify-tabs {
+      background-color: $yellow;
+      color: black;
+      display: flex;
+      flex-direction: column;
+
+      .v-tab {
+        display: flex;
+        margin: auto;
+        justify-content: center;
+        align-content: center;
+        flex: 1;
+        // border-right: 4px solid black;
+        // padding: 0 10px;
+        // min-height: 60px;
+      }
+    }
+
+    .il-cover-verification-container {
+      display: flex;
+      flex-direction: column;
+
+      .il-cover-verification {
+        .il-video {
+          border-radius: 1em;
+          background-color: rgba(240,240,240,0.5);
+        }
+      }
+    }
+
+
+  }
+}
+
+.cover-footer {
+  &.disabled {
+    display: none;
+  }
+  position: fixed;
+  bottom: 0;
+  min-height: 150px;
+  min-width: 100%;
+  padding: 10px;
+  background-color: black;
+  display: flex;
+  justify-content: center;
+  .il-cover-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-width: 300px;
+    max-height: 80px;
+    margin-top: 30px;
+    background-color: $offwhite;
+    color: black;
+    transition: all 0.3s ease;
+    &:hover {
+      cursor: pointer;
+      background-color: darken($offwhite, 30%);
+      color: black;
+    }
+  }
+}
--- a/src/scss/infopopup.scss
+++ b/src/scss/infopopup.scss
@@ -2,14 +2,14 @@

 .infopopup {
  width: 400px;
-  height: 400px;
+  // height: 400px;
  box-shadow: 10px -10px 38px rgba(0, 0, 0, 0.3), 10px 15px 12px rgba(0, 0, 0, 0.22);
  color: $darkgrey;
  position: absolute;
  background: $offwhite;
  border-radius: 5px;
-  bottom: 20px;
-  left: 100px;
+  bottom: 180px;
+  left: 120px;
  border: 3px solid $offwhite;
  padding: 20px;
  box-sizing: border-box;
@@ -48,11 +48,22 @@
  .legend-container {
    height: 100%;
    display: flex;
-    flex-direction: column;
+    flex-direction: row;
+
+    .legend-item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      &.one {
+        flex: 1;
+      }
+      &.three {
+        flex: 5;
+      }
+    }
  }

  .legend-section {
-    width: 300px;
    height: 25px;
    display: flex;
    align-items: center;
@@ -67,7 +78,7 @@
      display: flex;

      .label {
-        font-size: $xsmall;
+        // font-size: $xsmall;
      }
    }

--- a/src/scss/map.scss
+++ b/src/scss/map.scss
@@ -39,10 +39,6 @@
    opacity: 0.45;
  }

-  .narrative {
-    cursor: pointer;
-  }
-
  .link {
    stroke: $midgrey;
    fill: none;
@@ -173,6 +169,10 @@
  pointer-events: all !important;
  fill: $event_default;
  stroke-width: 0;
+
+  &.blue {
+    fill: blue;
+  }
 }

 .narrative-step-arrow {
@@ -190,5 +190,6 @@
  fill: #d0d0d0;
 }

-
-
+.no-hover {
+  cursor: grab !important;
+}
--- a/src/scss/overlay.scss
+++ b/src/scss/overlay.scss
@@ -13,12 +13,15 @@ $banner-height: 100px;
  flex-direction: column;
  // justify-content: center;
  align-items: center;
-  position: absolute;
+  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0, 0.85);
+  &.opaque {
+    background-color: black;
+  }
  z-index: 20;
 }

@@ -28,13 +31,12 @@ $banner-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
-  height: calc(100vh - 350px);
-  max-height: calc(100vh - 350px);
+  // height: calc(100vh - 350px);
+  // max-height: calc(100vh - 350px);
  width: $panel-width;
  max-width: 90vw;
  box-shadow: 0 19px 19px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
-
-
+  overflow: auto;
 }

 $overlay-bg: rgba(239,239,239,0.9);
@@ -155,7 +157,7 @@ $overlay-bg: rgba(239,239,239,0.9);

 .mo-footer {
  position: fixed;
-  height: 250px;
+  // height: 250px;
  background-color: transparent;
  width: 100%;
  opacity: 0.9;
@@ -166,6 +168,8 @@ $overlay-bg: rgba(239,239,239,0.9);

 .mo-meta-container {
  color: $overlay-bg;
+  background-color: rgba(0,0,0,0.5);
+  border-radius: 2em;
  display: flex;
  flex-direction: column;
  justify-content: center;
@@ -177,13 +181,15 @@ $overlay-bg: rgba(239,239,239,0.9);
    flex-direction: row;
    justify-content: space-between;
    padding: 0 20px;
+    max-width: $panel-width;
  }

  .mo-box {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
-    width: $panel-width;
+    min-width: 800px;
+    max-width: $panel-width;
    padding: $padding 0;
    border-top: 1px solid rgb(189,189,189);
    font-family: "Lato", Helvetica, sans-serif;
@@ -283,6 +289,7 @@ $overlay-bg: rgba(239,239,239,0.9);
 }

 .media-player {
+  background-color: transparent;
  box-sizing: border-box;
  width: 100%;
  min-width: 100%;
@@ -299,6 +306,7 @@ $overlay-bg: rgba(239,239,239,0.9);
  margin: auto;
  width: auto;
  height: auto;
+  max-width: 100%;
  object-fit: contain;
 }

@@ -314,3 +322,18 @@ $overlay-bg: rgba(239,239,239,0.9);
 .video-react .video-react-control {
  min-height: 100%;
 }
+
+// full-screen overloads
+.mo-overlay.full-screen {
+  background-color: black;
+  .mo-container {
+    background-color: transparent;
+  }
+  .mo-media-container {
+    border-top: 1px solid $offwhite;
+    border-bottom: 1px solid $offwhite;
+  }
+  .mo-box {
+    border-color: transparent;
+  }
+}
--- a/src/store/initial.js
+++ b/src/store/initial.js
@@ -72,13 +72,9 @@ const initial = {
        new Date(2016, 2, 23, 12)
      ],
      zoomLevels: [
-        { label: '3 years', duration: 1576800 },
        { label: '3 months', duration: 129600 },
        { label: '3 days', duration: 4320 },
-        { label: '12 hours', duration: 720 },
-        { label: '2 hours', duration: 120 },
-        { label: '30 min', duration: 30 },
-        { label: '10 min', duration: 10 }
+        { label: '12 hours', duration: 720 }
      ]
    },
    flags: {
--- a/yarn.lock
+++ b/yarn.lock
@@ -1181,6 +1181,11 @@ babel-runtime@^6.26.0, babel-runtime@^6.9.2:
    core-js "^2.4.0"
    regenerator-runtime "^0.11.0"

+bail@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.4.tgz#7181b66d508aa3055d3f6c13f0a0c720641dde9b"
+  integrity sha512-S8vuDB4w6YpRhICUDET3guPlQpaJl7od94tpZ0Fvnyp+MKW/HyDTcRDck+29C9g+d/qQHnddRH3+94kZdrW0Ww==
+
 balanced-match@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@@ -1528,6 +1533,21 @@ chalk@^2.1.0:
    escape-string-regexp "^1.0.5"
    supports-color "^5.3.0"

+character-entities-legacy@^1.0.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.3.tgz#3c729991d9293da0ede6dddcaf1f2ce1009ee8b4"
+  integrity sha512-YAxUpPoPwxYFsslbdKkhrGnXAtXoHNgYjlBM3WMXkWGTl5RsY3QmOyhwAgL8Nxm9l5LBThXGawxKPn68y6/fww==
+
+character-entities@^1.0.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.3.tgz#bbed4a52fe7ef98cc713c6d80d9faa26916d54e6"
+  integrity sha512-yB4oYSAa9yLcGyTbB4ItFwHw43QHdH129IJ5R+WvxOkWlyFnR5FAaBNnUq4mcxsTVZGh28bHoeTHMKXH1wZf3w==
+
+character-reference-invalid@^1.0.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.3.tgz#1647f4f726638d3ea4a750cf5d1975c1c7919a85"
+  integrity sha512-VOq6PRzQBam/8Jm6XBGk2fNEnHXAdGd6go0rtd4weAGECBamHDwwCQSOT12TACIYUZegUXnV6xBXqUssijtxIg==
+
 chardet@^0.4.0:
  version "0.4.2"
  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
@@ -1678,6 +1698,11 @@ code-point-at@^1.0.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"

+collapse-white-space@^1.0.2:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.5.tgz#c2495b699ab1ed380d29a1091e01063e75dbbe3a"
+  integrity sha512-703bOOmytCYAX9cXYqoikYIx6twmFCXsnzRQheBcTG3nzKYBR4P/+wkYeH+Mvj7qUz8zZDtdyzbxfnEi/kYzRQ==
+
 collection-visit@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
@@ -2523,6 +2548,11 @@ domelementtype@1:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2"

+domelementtype@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
+  integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
+
 domelementtype@~1.1.1:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
@@ -2533,6 +2563,13 @@ domhandler@2.1:
  dependencies:
    domelementtype "1"

+domhandler@^2.3.0, domhandler@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
+  integrity sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==
+  dependencies:
+    domelementtype "1"
+
 domutils@1.1:
  version "1.1.6"
  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.1.6.tgz#bddc3de099b9a2efacc51c623f28f416ecc57485"
@@ -2546,6 +2583,14 @@ domutils@1.5.1:
    dom-serializer "0"
    domelementtype "1"

+domutils@^1.5.1:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
+  integrity sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==
+  dependencies:
+    dom-serializer "0"
+    domelementtype "1"
+
 dot-prop@^4.1.0, dot-prop@^4.2.0:
  version "4.2.0"
  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
@@ -2625,6 +2670,11 @@ enhanced-resolve@^4.1.0:
    memory-fs "^0.4.0"
    tapable "^1.0.0"

+entities@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
+  integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
+
 entities@~1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
@@ -3001,9 +3051,10 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
    assign-symbols "^1.0.0"
    is-extendable "^1.0.1"

-extend@~3.0.2:
+extend@^3.0.0, extend@~3.0.2:
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==

 external-editor@^2.1.0:
  version "2.2.0"
@@ -3564,6 +3615,17 @@ html-minifier@^3.2.3:
    relateurl "0.2.x"
    uglify-js "3.4.x"

+html-to-react@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/html-to-react/-/html-to-react-1.3.4.tgz#647b3a54fdec73a6461864b129fb0d1eec7d4589"
+  integrity sha512-/tWDdb/8Koi/QEP5YUY1653PcDpBnnMblXRhotnTuhFDjI1Fc6Wzox5d4sw73Xk5rM2OdM5np4AYjT/US/Wj7Q==
+  dependencies:
+    domhandler "^2.4.2"
+    escape-string-regexp "^1.0.5"
+    htmlparser2 "^3.10.0"
+    lodash.camelcase "^4.3.0"
+    ramda "^0.26"
+
 html-webpack-plugin@^3.2.0:
  version "3.2.0"
  resolved "http://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz#b01abbd723acaaa7b37b6af4492ebda03d9dd37b"
@@ -3576,6 +3638,18 @@ html-webpack-plugin@^3.2.0:
    toposort "^1.0.0"
    util.promisify "1.0.0"

+htmlparser2@^3.10.0:
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
+  integrity sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==
+  dependencies:
+    domelementtype "^1.3.1"
+    domhandler "^2.3.0"
+    domutils "^1.5.1"
+    entities "^1.1.1"
+    inherits "^2.0.1"
+    readable-stream "^3.1.1"
+
 htmlparser2@~3.3.0:
  version "3.3.0"
  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.3.0.tgz#cc70d05a59f6542e43f0e685c982e14c924a9efe"
@@ -3819,6 +3893,19 @@ is-accessor-descriptor@^1.0.0:
  dependencies:
    kind-of "^6.0.0"

+is-alphabetical@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.3.tgz#eb04cc47219a8895d8450ace4715abff2258a1f8"
+  integrity sha512-eEMa6MKpHFzw38eKm56iNNi6GJ7lf6aLLio7Kr23sJPAECscgRtZvOBYybejWDQ2bM949Y++61PY+udzj5QMLA==
+
+is-alphanumerical@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.3.tgz#57ae21c374277b3defe0274c640a5704b8f6657c"
+  integrity sha512-A1IGAPO5AW9vSh7omxIlOGwIqEvpW/TA+DksVOPM5ODuxKlZS09+TEM1E3275lJqO2oJ38vDpeAL3DCIiHE6eA==
+  dependencies:
+    is-alphabetical "^1.0.0"
+    is-decimal "^1.0.0"
+
 is-arrayish@^0.2.1:
  version "0.2.1"
  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
@@ -3829,9 +3916,10 @@ is-binary-path@^1.0.0:
  dependencies:
    binary-extensions "^1.0.0"

-is-buffer@^1.1.5:
+is-buffer@^1.1.4, is-buffer@^1.1.5:
  version "1.1.6"
  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+  integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==

 is-builtin-module@^1.0.0:
  version "1.0.0"
@@ -3865,6 +3953,11 @@ is-date-object@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"

+is-decimal@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.3.tgz#381068759b9dc807d8c0dc0bfbae2b68e1da48b7"
+  integrity sha512-bvLSwoDg2q6Gf+E2LEPiklHZxxiSi3XAh4Mav65mKqTfCO1HM3uBs24TjEH8iJX3bbDdLXKJXBTmGzuTUuAEjQ==
+
 is-descriptor@^0.1.0:
  version "0.1.6"
  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
@@ -3931,6 +4024,11 @@ is-glob@^4.0.0:
  dependencies:
    is-extglob "^2.1.1"

+is-hexadecimal@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.3.tgz#e8a426a69b6d31470d3a33a47bb825cda02506ee"
+  integrity sha512-zxQ9//Q3D/34poZf8fiy3m3XVpbQc7ren15iKqrTtLPwkPD/t3Scy9Imp63FujULGxuK0ZlCwoo5xNpktFgbOA==
+
 is-installed-globally@^0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.1.0.tgz#0dfd98f5a9111716dd535dda6492f67bf3d25a80"
@@ -4035,10 +4133,20 @@ is-utf8@^0.2.0, is-utf8@^0.2.1:
  version "0.2.1"
  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"

+is-whitespace-character@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.3.tgz#b3ad9546d916d7d3ffa78204bca0c26b56257fac"
+  integrity sha512-SNPgMLz9JzPccD3nPctcj8sZlX9DAMJSKH8bP7Z6bohCwuNgX8xbWr1eTAYXX9Vpi/aSn8Y1akL9WgM3t43YNQ==
+
 is-windows@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"

+is-word-character@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-word-character/-/is-word-character-1.0.3.tgz#264d15541cbad0ba833d3992c34e6b40873b08aa"
+  integrity sha512-0wfcrFgOOOBdgRNT9H33xe6Zi6yhX/uoc4U8NBZGeQQB0ctU1dnlNTyL9JM2646bHDTpsDm1Brb3VPoCIMrd/A==
+
 is-wsl@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
@@ -4425,6 +4533,11 @@ map-visit@^1.0.0:
  dependencies:
    object-visit "^1.0.0"

+markdown-escapes@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.3.tgz#6155e10416efaafab665d466ce598216375195f5"
+  integrity sha512-XUi5HJhhV5R74k8/0H2oCbCiYf/u4cO/rX8tnGkRvrqhsr5BRNU6Mg0yt/8UIx1iIS8220BNJsDb7XnILhLepw==
+
 marked@^0.6.0:
  version "0.6.0"
  resolved "https://registry.yarnpkg.com/marked/-/marked-0.6.0.tgz#a18d01cfdcf8d15c3c455b71c8329e5e0f01faa1"
@@ -4453,6 +4566,13 @@ md5.js@^1.3.4:
    inherits "^2.0.1"
    safe-buffer "^5.1.2"

+mdast-add-list-metadata@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-add-list-metadata/-/mdast-add-list-metadata-1.0.1.tgz#95e73640ce2fc1fa2dcb7ec443d09e2bfe7db4cf"
+  integrity sha512-fB/VP4MJ0LaRsog7hGPxgOrSL3gE/2uEdZyDuSEnKCv/8IkYHiDkIQSbChiJoHyxZZXZ9bzckyRk+vNxFzh8rA==
+  dependencies:
+    unist-util-visit-parents "1.1.2"
+
 media-typer@0.3.0:
  version "0.3.0"
  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -5158,6 +5278,18 @@ parse-asn1@^5.0.0:
    evp_bytestokey "^1.0.0"
    pbkdf2 "^3.0.3"

+parse-entities@^1.1.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-1.2.2.tgz#c31bf0f653b6661354f8973559cb86dd1d5edf50"
+  integrity sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==
+  dependencies:
+    character-entities "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    character-reference-invalid "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
 parse-headers@^2.0.0:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/parse-headers/-/parse-headers-2.0.1.tgz#6ae83a7aa25a9d9b700acc28698cd1f1ed7e9536"
@@ -5432,6 +5564,15 @@ prop-types@15.6.2, prop-types@^15.5.0, prop-types@^15.5.7, prop-types@^15.5.8, p
    loose-envify "^1.3.1"
    object-assign "^4.1.1"

+prop-types@^15.7.2:
+  version "15.7.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.8.1"
+
 proxy-addr@~2.0.4:
  version "2.0.4"
  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.4.tgz#ecfc733bf22ff8c6f407fa275327b9ab67e48b93"
@@ -5509,7 +5650,7 @@ quick-lru@^1.0.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8"

-ramda@^0.26.1:
+ramda@^0.26, ramda@^0.26.1:
  version "0.26.1"
  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
  integrity sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ==
@@ -5570,6 +5711,24 @@ react-image@^1.5.1:
    "@babel/runtime" "^7.0.0"
    prop-types "15.6.2"

+react-is@^16.8.1:
+  version "16.8.6"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
+  integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
+
+react-markdown@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-4.0.8.tgz#e3621b5becaac82a651008d7bc8390d3e4e438c0"
+  integrity sha512-Z6oa648rufvzyO0KwYJ/9p9AsdYGIluqK6OlpJ35ouJ8HPF0Ko1WDNdyymjDSHxNrkb7HDyEcIDJCQs8NlET5A==
+  dependencies:
+    html-to-react "^1.3.4"
+    mdast-add-list-metadata "1.0.1"
+    prop-types "^15.7.2"
+    remark-parse "^5.0.0"
+    unified "^6.1.5"
+    unist-util-visit "^1.3.0"
+    xtend "^4.0.1"
+
 react-portal@^4.2.0:
  version "4.2.0"
  resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-4.2.0.tgz#5400831cdb0ae64dccb8128121cf076089ab1afd"
@@ -5671,6 +5830,15 @@ readable-stream@1.0:
    isarray "0.0.1"
    string_decoder "~0.10.x"

+readable-stream@^3.1.1:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.3.0.tgz#cb8011aad002eb717bf040291feba8569c986fb9"
+  integrity sha512-EsI+s3k3XsW+fU8fQACLN59ky34AZ14LoeVZpYwmZvldCFo0r0gnelwF2TcMjLor/BTL5aDJVBMkss0dthToPw==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
 readdirp@^2.0.0:
  version "2.2.1"
  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
@@ -5830,6 +5998,27 @@ release-zalgo@^1.0.0:
  dependencies:
    es6-error "^4.0.1"

+remark-parse@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-5.0.0.tgz#4c077f9e499044d1d5c13f80d7a98cf7b9285d95"
+  integrity sha512-b3iXszZLH1TLoyUzrATcTQUZrwNl1rE70rVdSruJFlDaJ9z5aMkhrG43Pp68OgfHndL/ADz6V69Zow8cTQu+JA==
+  dependencies:
+    collapse-white-space "^1.0.2"
+    is-alphabetical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-whitespace-character "^1.0.0"
+    is-word-character "^1.0.0"
+    markdown-escapes "^1.0.0"
+    parse-entities "^1.1.0"
+    repeat-string "^1.5.4"
+    state-toggle "^1.0.0"
+    trim "0.0.1"
+    trim-trailing-lines "^1.0.0"
+    unherit "^1.0.4"
+    unist-util-remove-position "^1.0.0"
+    vfile-location "^2.0.0"
+    xtend "^4.0.1"
+
 remove-trailing-separator@^1.0.1:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
@@ -5848,9 +6037,10 @@ repeat-element@^1.1.2:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce"

-repeat-string@^1.6.1:
+repeat-string@^1.5.4, repeat-string@^1.6.1:
  version "1.6.1"
  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+  integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=

 repeating@^2.0.0:
  version "2.0.1"
@@ -5858,6 +6048,11 @@ repeating@^2.0.0:
  dependencies:
    is-finite "^1.0.0"

+replace-ext@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
+  integrity sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=
+
 request@^2.87.0, request@^2.88.0:
  version "2.88.0"
  resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
@@ -6418,6 +6613,11 @@ standard@^12.0.1:
    eslint-plugin-standard "~4.0.0"
    standard-engine "~9.0.0"

+state-toggle@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.2.tgz#75e93a61944116b4959d665c8db2d243631d6ddc"
+  integrity sha512-8LpelPGR0qQM4PnfLiplOQNJcIN1/r2Gy0xKB2zKnIW2YzPMt2sR4I/+gtPjhN7Svh9kw+zqEg2SFwpBO9iNiw==
+
 static-extend@^0.1.1:
  version "0.1.2"
  resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
@@ -6488,6 +6688,13 @@ string_decoder@^1.0.0, string_decoder@~1.1.1:
  dependencies:
    safe-buffer "~5.1.0"

+string_decoder@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.2.0.tgz#fe86e738b19544afe70469243b2a1ee9240eae8d"
+  integrity sha512-6YqyX6ZWEYguAxgZzHGL7SsCeGx3V2TtOTqZz1xSTSWnqsbWwbptafNyvf/ACquZUXV3DANr5BDIwNYe1mN42w==
+  dependencies:
+    safe-buffer "~5.1.0"
+
 string_decoder@~0.10.x:
  version "0.10.31"
  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
@@ -6731,10 +6938,20 @@ trim-right@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"

+trim-trailing-lines@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.2.tgz#d2f1e153161152e9f02fabc670fb40bec2ea2e3a"
+  integrity sha512-MUjYItdrqqj2zpcHFTkMa9WAv4JHTI6gnRQGPFLrt5L9a6tRMiDnIqYl8JBvu2d2Tc3lWJKQwlGCp0K8AvCM+Q==
+
 trim@0.0.1:
  version "0.0.1"
  resolved "https://registry.yarnpkg.com/trim/-/trim-0.0.1.tgz#5858547f6b290757ee95cccc666fb50084c460dd"

+trough@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.4.tgz#3b52b1f13924f460c3fbfd0df69b587dbcbc762e"
+  integrity sha512-tdzBRDGWcI1OpPVmChbdSKhvSVurznZ8X36AYURAcl+0o2ldlCY2XPzyXNNxwJwwyIU+rIglTCG4kxtNKBQH7Q==
+
 "true-case-path@^1.0.2":
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/true-case-path/-/true-case-path-1.0.3.tgz#f813b5a8c86b40da59606722b144e3225799f47d"
@@ -6812,6 +7029,14 @@ uid2@0.0.3:
  version "0.0.3"
  resolved "https://registry.yarnpkg.com/uid2/-/uid2-0.0.3.tgz#483126e11774df2f71b8b639dcd799c376162b82"

+unherit@^1.0.4:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/unherit/-/unherit-1.1.2.tgz#14f1f397253ee4ec95cec167762e77df83678449"
+  integrity sha512-W3tMnpaMG7ZY6xe/moK04U9fBhi6wEiCYHUW5Mop/wQHf12+79EQGwxYejNdhEz2mkqkBlGwm7pxmgBKMVUj0w==
+  dependencies:
+    inherits "^2.0.1"
+    xtend "^4.0.1"
+
 unicode-canonical-property-names-ecmascript@^1.0.4:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
@@ -6831,6 +7056,18 @@ unicode-property-aliases-ecmascript@^1.0.4:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.4.tgz#5a533f31b4317ea76f17d807fa0d116546111dd0"

+unified@^6.1.5:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-6.2.0.tgz#7fbd630f719126d67d40c644b7e3f617035f6dba"
+  integrity sha512-1k+KPhlVtqmG99RaTbAv/usu85fcSRu3wY8X+vnsEhIxNP5VbVIDiXnLqyKIG+UMdyTg0ZX9EI6k2AfjJkHPtA==
+  dependencies:
+    bail "^1.0.0"
+    extend "^3.0.0"
+    is-plain-obj "^1.1.0"
+    trough "^1.0.0"
+    vfile "^2.0.0"
+    x-is-string "^0.1.0"
+
 union-value@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.0.tgz#5c71c34cb5bad5dcebe3ea0cd08207ba5aa1aea4"
@@ -6871,6 +7108,42 @@ unique-temp-dir@^1.0.0:
    os-tmpdir "^1.0.1"
    uid2 "0.0.3"

+unist-util-is@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-2.1.2.tgz#1193fa8f2bfbbb82150633f3a8d2eb9a1c1d55db"
+  integrity sha512-YkXBK/H9raAmG7KXck+UUpnKiNmUdB+aBGrknfQ4EreE1banuzrKABx3jP6Z5Z3fMSPMQQmeXBlKpCbMwBkxVw==
+
+unist-util-remove-position@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/unist-util-remove-position/-/unist-util-remove-position-1.1.2.tgz#86b5dad104d0bbfbeb1db5f5c92f3570575c12cb"
+  integrity sha512-XxoNOBvq1WXRKXxgnSYbtCF76TJrRoe5++pD4cCBsssSiWSnPEktyFrFLE8LTk3JW5mt9hB0Sk5zn4x/JeWY7Q==
+  dependencies:
+    unist-util-visit "^1.1.0"
+
+unist-util-stringify-position@^1.0.0, unist-util-stringify-position@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz#3f37fcf351279dcbca7480ab5889bb8a832ee1c6"
+  integrity sha512-pNCVrk64LZv1kElr0N1wPiHEUoXNVFERp+mlTg/s9R5Lwg87f9bM/3sQB99w+N9D/qnM9ar3+AKDBwo/gm/iQQ==
+
+unist-util-visit-parents@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-1.1.2.tgz#f6e3afee8bdbf961c0e6f028ea3c0480028c3d06"
+  integrity sha512-yvo+MMLjEwdc3RhhPYSximset7rwjMrdt9E41Smmvg25UQIenzrN83cRnF1JMzoMi9zZOQeYXHSDf7p+IQkW3Q==
+
+unist-util-visit-parents@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-2.1.0.tgz#e45cad0d7e5ac683362088b329bc80abd1cfc5fb"
+  integrity sha512-j0XZY3063E6v7qhx4+Q2Z0r8SMrLX7Mr6DabiCy67zMEcFQYtpNOplLlEK1KKEBEs9S+xB5U+yloQxbSwF9P/g==
+  dependencies:
+    unist-util-is "^2.1.2"
+
+unist-util-visit@^1.1.0, unist-util-visit@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.4.0.tgz#1cb763647186dc26f5e1df5db6bd1e48b3cc2fb1"
+  integrity sha512-FiGu34ziNsZA3ZUteZxSFaczIjGmksfSgdKqBfOejrrfzyUy5b7YrlzT1Bcvi+djkYDituJDy2XB7tGTeBieKw==
+  dependencies:
+    unist-util-visit-parents "^2.0.0"
+
 unpipe@1.0.0, unpipe@~1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
@@ -6943,9 +7216,10 @@ use@^3.1.0:
  version "3.1.1"
  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"

-util-deprecate@~1.0.1:
+util-deprecate@^1.0.1, util-deprecate@~1.0.1:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=

 util.promisify@1.0.0, util.promisify@^1.0.0:
  version "1.0.0"
@@ -7001,6 +7275,28 @@ verror@1.10.0:
    core-util-is "1.0.2"
    extsprintf "^1.2.0"

+vfile-location@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-2.0.4.tgz#2a5e7297dd0d9e2da4381464d04acc6b834d3e55"
+  integrity sha512-KRL5uXQPoUKu+NGvQVL4XLORw45W62v4U4gxJ3vRlDfI9QsT4ZN1PNXn/zQpKUulqGDpYuT0XDfp5q9O87/y/w==
+
+vfile-message@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-1.1.1.tgz#5833ae078a1dfa2d96e9647886cd32993ab313e1"
+  integrity sha512-1WmsopSGhWt5laNir+633LszXvZ+Z/lxveBf6yhGsqnQIhlhzooZae7zV6YVM1Sdkw68dtAW3ow0pOdPANugvA==
+  dependencies:
+    unist-util-stringify-position "^1.1.1"
+
+vfile@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/vfile/-/vfile-2.3.0.tgz#e62d8e72b20e83c324bc6c67278ee272488bf84a"
+  integrity sha512-ASt4mBUHcTpMKD/l5Q+WJXNtshlWxOogYyGYYrg4lt/vuRjC1EFQtlAofL5VmtVNIZJzWYFJjzGWZ0Gw8pzW1w==
+  dependencies:
+    is-buffer "^1.1.4"
+    replace-ext "1.0.0"
+    unist-util-stringify-position "^1.0.0"
+    vfile-message "^1.0.0"
+
 video-react@^0.13.1:
  version "0.13.1"
  resolved "https://registry.yarnpkg.com/video-react/-/video-react-0.13.1.tgz#5d0dc68748f9b12e118beea1998d6ae5f6cbd6ba"
@@ -7252,6 +7548,11 @@ write@^0.2.1:
  dependencies:
    mkdirp "^0.5.1"

+x-is-string@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/x-is-string/-/x-is-string-0.1.0.tgz#474b50865af3a49a9c4657f05acd145458f77d82"
+  integrity sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI=
+
 xdg-basedir@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"