Use Markdown for talk status (#4711)

Replace HTML with Markdown in talk status template strings on the project home page. Any markup in project titles, or the number of active users, is now rendered as plain strings rather than parsed as HTML.

app/locales/es.js

@@ -68,9 +68,9 @@ export default {
         subjects: 'Subjects'
       },
       talk: {
-        zero: 'Noone is talking about <strong>%(title)s</strong> right now.',
-        one: '<strong>1</strong> person is talking about <strong>%(title)s</strong> right now.',
-        other: '<strong>%(count)s</strong> people are talking about <strong>%(title)s</strong> right now.'
+        zero: 'Noone is talking about **%(title)s** right now.',
+        one: '**1** person is talking about **%(title)s** right now.',
+        other: '**%(count)s** people are talking about **%(title)s** right now.'
       },
       joinIn: 'Join in',
       learnMore: 'Learn more',

app/locales/it.js

@@ -68,9 +68,9 @@ export default {
         subjects: 'Subjects'
       },
       talk: {
-        zero: 'Nessuno sta parlando di <strong>%(title)s</strong> in questo momento.',
-        one: '<strong>1</strong> persona sta parlando di <strong>%(title)s</strong> in questo momento.',
-        other: '<strong>%(count)s</strong> persone stanno parlando di <strong>%(title)s</strong> in questo momento.'
+        zero: 'Nessuno sta parlando di **%(title)s** in questo momento.',
+        one: '**1** persona sta parlando di **%(title)s** in questo momento.',
+        other: '**%(count)s** persone stanno parlando di **%(title)s** in questo momento.'
       },
       joinIn: 'Partecipa',
       learnMore: 'Learn more',

app/locales/nl.js

@@ -95,9 +95,9 @@ export default {
         subjects: 'Onderwerpen'
       },
       talk: {
-        zero: 'Niemand praat over <strong>%(title)s</strong> op dit moment.',
-        one: '<strong>1</strong> persoon praat over <strong>%(title)s</strong> op dit moment.',
-        other: '<strong>%(count)s</strong> mensen praten over <strong>%(title)s</strong> op dit moment.'
+        zero: 'Niemand praat over **%(title)s** op dit moment.',
+        one: '**1** persoon praat over **%(title)s** op dit moment.',
+        other: '**%(count)s** mensen praten over **%(title)s** op dit moment.'
       },
       joinIn: 'Doe mee',
       learnMore: 'Learn more',

app/pages/project/home/talk-status.jsx

@@ -2,6 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { sugarApiClient } from 'panoptes-client/lib/sugar';
 import { Link } from 'react-router';
+import { Markdown } from 'markdownz';
+import counterpart from 'counterpart';
 import Translate from 'react-translate-component';
 
 export default class TalkStatus extends React.Component {
@@ -30,14 +32,15 @@ export default class TalkStatus extends React.Component {
   render() {
     return (
       <div className="project-home-page__talk-stat">
-        <Translate
-          content="project.home.talk"
-          with={{
-            count: this.state.activeUsers,
-            title: this.props.translation.display_name
-          }}
-          unsafe={true}
-        />
+        <Markdown>
+          {counterpart(
+            'project.home.talk',
+            {
+              count: parseInt(this.state.activeUsers, 10),
+              title: this.props.translation.display_name
+            }
+          )}
+        </Markdown>
         <div>
           <Link to={`/projects/${this.props.project.slug}/talk`} className="join-in project-home-page__button">
             <Translate content="project.home.joinIn" />
@@ -65,4 +68,4 @@ TalkStatus.propTypes = {
     researcher_quote: PropTypes.string,
     title: PropTypes.string
   }).isRequired
-};
+};