Strip markdown in track list

src/components/StripMarkdown.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import Markdown from 'react-markdown'
+
+const _noop = ({children}) => <>{children}</>
+const _space = () => <> </>
+const _spaced = ({children}) => (
+  <>
+    {children.map((child, i) => (
+      <React.Fragment key={i}>{child} </React.Fragment>
+    ))}
+  </>
+)
+
+const stripMarkdownNodes = {
+  root: _noop,
+  text: _noop,
+  break: _space,
+  paragraph: _spaced,
+  emphasis: _noop,
+  strong: _noop,
+  thematicBreak: _space,
+  blockquote: _noop,
+  link: _noop,
+  list: _spaced,
+  listItem: _noop,
+  definition: _noop,
+  heading: _noop,
+  inlineCode: _noop,
+  code: _noop,
+}
+const stripTypes = Array.from(Object.keys(stripMarkdownNodes))
+
+export default function StripMarkdown({children}) {
+  return (
+    <Markdown allowedTypes={stripTypes} renderers={stripMarkdownNodes}>
+      {children}
+    </Markdown>
+  )
+}

src/components/index.js

@@ -2,3 +2,4 @@ export {default as FormattedDate} from './FormattedDate'
 export {default as LoginForm} from './LoginForm'
 export {default as Map} from './Map'
 export {default as Page} from './Page'
+export {default as StripMarkdown} from './StripMarkdown'

src/pages/TrackPage/index.tsx

@@ -112,13 +112,13 @@ const TrackPage = connect((state) => ({login: state.login}))(function TrackPage(
               )}
             </Segment>
 
-            <Header as="h4">Show in Map</Header>
+            <Header as="h4">Map settings</Header>
 
-            <Table collapsing compact>
+            <Table compact>
               <Table.Header>
                 <Table.Row>
                   <Table.HeaderCell>Left</Table.HeaderCell>
-                  <Table.HeaderCell textAlign="center">Points</Table.HeaderCell>
+                  <Table.HeaderCell textAlign="center">Show distance of</Table.HeaderCell>
                   <Table.HeaderCell textAlign="right">Right</Table.HeaderCell>
                 </Table.Row>
               </Table.Header>
@@ -128,7 +128,7 @@ const TrackPage = connect((state) => ({login: state.login}))(function TrackPage(
                   <Table.Cell>
                     <Checkbox checked={left} onChange={(e, d) => setLeft(d.checked)} />{' '}
                   </Table.Cell>
-                  <Table.Cell textAlign="center">Confirmed</Table.Cell>
+                  <Table.Cell textAlign="center">Events</Table.Cell>
                   <Table.Cell textAlign="right">
                     <Checkbox checked={right} onChange={(e, d) => setRight(d.checked)} />{' '}
                   </Table.Cell>
@@ -137,7 +137,7 @@ const TrackPage = connect((state) => ({login: state.login}))(function TrackPage(
                   <Table.Cell>
                     <Checkbox checked={leftUnconfirmed} onChange={(e, d) => setLeftUnconfirmed(d.checked)} />{' '}
                   </Table.Cell>
-                  <Table.Cell textAlign="center">Other</Table.Cell>
+                  <Table.Cell textAlign="center">Other points</Table.Cell>
                   <Table.Cell textAlign="right">
                     <Checkbox checked={rightUnconfirmed} onChange={(e, d) => setRightUnconfirmed(d.checked)} />{' '}
                   </Table.Cell>

src/pages/TracksPage.tsx

@@ -7,10 +7,10 @@ import {of, from, concat} from 'rxjs'
 import {map, switchMap, distinctUntilChanged} from 'rxjs/operators'
 import _ from 'lodash'
 
-import type {Track} from '../types'
+import type {Track} from 'types'
-import {Page} from '../components'
+import {Page, StripMarkdown} from 'components'
-import api from '../api'
+import api from 'api'
-import {useQueryParam} from '../query'
+import {useQueryParam} from 'query'
 
 function TracksPageTabs() {
   const history = useHistory()
@@ -85,6 +85,14 @@ function TrackList({privateFeed}: {privateFeed: boolean}) {
   )
 }
 
+function maxLength(t, max) {
+  if (t.length > max) {
+    return t.substring(0, max) + ' ...'
+  } else {
+    return t
+  }
+}
+
 export function TrackListItem({track, privateFeed = false}) {
   return (
     <Item key={track.slug}>
@@ -96,7 +104,9 @@ export function TrackListItem({track, privateFeed = false}) {
         <Item.Meta>
           Created by {track.author.username} on {track.createdAt}
         </Item.Meta>
-        <Item.Description>{track.description}</Item.Description>
+        <Item.Description>
+          <StripMarkdown>{maxLength(track.description, 200)}</StripMarkdown>
+        </Item.Description>
         {privateFeed && (
           <Item.Extra>
             {track.visible ? (

src/styles.scss

@@ -1,4 +1,4 @@
 @mixin container {
-  max-width: 1000px;
+  max-width: 1200px;
   margin: 0 auto;
 }