diff --git a/src/components/StripMarkdown.tsx b/src/components/StripMarkdown.tsx new file mode 100644 index 0000000..ac6c8c4 --- /dev/null +++ b/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) => ( + {child} + ))} + +) + +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 ( + + {children} + + ) +} diff --git a/src/components/index.js b/src/components/index.js index 42e6953..5092c56 100644 --- a/src/components/index.js +++ b/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' diff --git a/src/pages/TrackPage/index.tsx b/src/pages/TrackPage/index.tsx index 645ef4f..9d7b763 100644 --- a/src/pages/TrackPage/index.tsx +++ b/src/pages/TrackPage/index.tsx @@ -112,13 +112,13 @@ const TrackPage = connect((state) => ({login: state.login}))(function TrackPage( )} -
Show in Map
+
Map settings
- +
Left - Points + Show distance of Right @@ -128,7 +128,7 @@ const TrackPage = connect((state) => ({login: state.login}))(function TrackPage( setLeft(d.checked)} />{' '} - Confirmed + Events setRight(d.checked)} />{' '} @@ -137,7 +137,7 @@ const TrackPage = connect((state) => ({login: state.login}))(function TrackPage( setLeftUnconfirmed(d.checked)} />{' '} - Other + Other points setRightUnconfirmed(d.checked)} />{' '} diff --git a/src/pages/TracksPage.tsx b/src/pages/TracksPage.tsx index 9ce0bef..7b64007 100644 --- a/src/pages/TracksPage.tsx +++ b/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 {Page} from '../components' -import api from '../api' -import {useQueryParam} from '../query' +import type {Track} from 'types' +import {Page, StripMarkdown} from 'components' +import api from 'api' +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 ( @@ -96,7 +104,9 @@ export function TrackListItem({track, privateFeed = false}) { Created by {track.author.username} on {track.createdAt} - {track.description} + + {maxLength(track.description, 200)} + {privateFeed && ( {track.visible ? ( diff --git a/src/styles.scss b/src/styles.scss index fd37131..3398b85 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,4 +1,4 @@ @mixin container { - max-width: 1000px; + max-width: 1200px; margin: 0 auto; }