Truncated previews now rendered on client
This commit is contained in:
parent
e791509dac
commit
c0b85a643c
|
@ -4,6 +4,7 @@ import { toJS } from 'mobx';
|
|||
import { Link } from 'react-router-dom';
|
||||
import type { Document } from 'types';
|
||||
import styled from 'styled-components';
|
||||
import { color } from 'styles/constants';
|
||||
import PublishingInfo from 'components/PublishingInfo';
|
||||
import Markdown from 'components/Markdown';
|
||||
|
||||
|
@ -16,9 +17,29 @@ const Container = styled.div`
|
|||
padding: 20px 0;
|
||||
`;
|
||||
|
||||
const DocumentLink = styled(Link)`
|
||||
display: block;
|
||||
margin: -16px;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: ${color.smokeLight};
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledMarkdown = styled(Markdown)`
|
||||
pointer-events: none;
|
||||
`;
|
||||
|
||||
const DocumentPreview = ({ document }: Props) => {
|
||||
return (
|
||||
<Container>
|
||||
<DocumentLink to={document.url}>
|
||||
<PublishingInfo
|
||||
createdAt={document.createdAt}
|
||||
createdBy={document.createdBy}
|
||||
|
@ -26,15 +47,8 @@ const DocumentPreview = ({ document }: Props) => {
|
|||
updatedBy={document.updatedBy}
|
||||
collaborators={toJS(document.collaborators)}
|
||||
/>
|
||||
<Link to={document.url}>
|
||||
<h2>{document.title}</h2>
|
||||
</Link>
|
||||
<Markdown text={document.text.substring(0, 300)} />
|
||||
<div>
|
||||
<Link to={document.url}>
|
||||
Continue reading…
|
||||
</Link>
|
||||
</div>
|
||||
<StyledMarkdown text={document.text} limit={150} />
|
||||
</DocumentLink>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -12,7 +12,6 @@
|
|||
}
|
||||
|
||||
.editor {
|
||||
background: #fff;
|
||||
color: #1b2631;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
|
|
|
@ -1,35 +1,75 @@
|
|||
// @flow
|
||||
import React, { Component } from 'react';
|
||||
import { Editor } from 'slate';
|
||||
import { State, Document, Editor } from 'slate';
|
||||
import MarkdownSerializer from '../Editor/serializer';
|
||||
import type { State } from '../Editor/types';
|
||||
import type { State as StateType } from '../Editor/types';
|
||||
import schema from '../Editor/schema';
|
||||
import styles from '../Editor/Editor.scss';
|
||||
|
||||
type Props = {
|
||||
text: string,
|
||||
className: string,
|
||||
limit: number,
|
||||
};
|
||||
|
||||
export default class MarkdownEditor extends Component {
|
||||
function filterDocument({ document, characterLimit, nodeLimit }) {
|
||||
if (document.text.length <= characterLimit) {
|
||||
return document;
|
||||
}
|
||||
|
||||
let totalCharacters = 0;
|
||||
let totalNodes = 0;
|
||||
const newNodes = document.nodes.filter(childNode => {
|
||||
if (childNode.text.length + totalCharacters <= characterLimit) {
|
||||
totalCharacters += childNode.text.length;
|
||||
|
||||
if (totalNodes++ <= nodeLimit) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
return Document.create({
|
||||
...document,
|
||||
nodes: newNodes,
|
||||
});
|
||||
}
|
||||
|
||||
class Markdown extends React.Component {
|
||||
props: Props;
|
||||
|
||||
state: {
|
||||
state: State,
|
||||
state: StateType,
|
||||
};
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = { state: MarkdownSerializer.deserialize(props.text) };
|
||||
const state = MarkdownSerializer.deserialize(props.text);
|
||||
|
||||
this.state = {
|
||||
state: State.create({
|
||||
document: filterDocument({
|
||||
document: state.document,
|
||||
characterLimit: props.limit,
|
||||
nodeLimit: 5,
|
||||
}),
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
render = () => {
|
||||
return (
|
||||
<span className={this.props.className}>
|
||||
<Editor
|
||||
className={styles.editor}
|
||||
schema={schema}
|
||||
state={this.state.state}
|
||||
readOnly
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default Markdown;
|
||||
|
|
|
@ -52,6 +52,7 @@ type Props = {
|
|||
};
|
||||
|
||||
render() {
|
||||
const query = this.props.match.params.query;
|
||||
const title = <Title content="Search" />;
|
||||
|
||||
return (
|
||||
|
@ -80,6 +81,7 @@ type Props = {
|
|||
searchTerm={this.store.searchTerm}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
onChange={this.updateQuery}
|
||||
value={query}
|
||||
/>
|
||||
</Flex>
|
||||
{this.store.documents.map(document => (
|
||||
|
|
|
@ -0,0 +1,46 @@
|
|||
// @flow
|
||||
|
||||
export const size = {
|
||||
tiny: '2px',
|
||||
small: '4px',
|
||||
medium: '8px',
|
||||
large: '16px',
|
||||
huge: '24px',
|
||||
enormous: '32px',
|
||||
};
|
||||
|
||||
export const fontSize = {
|
||||
small: '14px',
|
||||
medium: '16px',
|
||||
large: '18px',
|
||||
huge: '24px',
|
||||
};
|
||||
|
||||
export const fontWeight = {
|
||||
ultraLight: 100,
|
||||
thin: 200,
|
||||
light: 300,
|
||||
regular: 400,
|
||||
medium: 500,
|
||||
demiBold: 600,
|
||||
bold: 700,
|
||||
heavy: 800,
|
||||
};
|
||||
|
||||
export const color = {
|
||||
/* Brand */
|
||||
primary: '#73DF7B',
|
||||
|
||||
/* Dark Grays */
|
||||
slate: '#9BA6B2',
|
||||
slateLight: '#DAE1E9',
|
||||
slateDark: '#4E5C6E',
|
||||
|
||||
/* Light Grays */
|
||||
smoke: '#F4F7FA',
|
||||
smokeLight: '#F9FBFC',
|
||||
|
||||
/* Misc */
|
||||
white: '#FFFFFF',
|
||||
black: '#000000',
|
||||
};
|
Reference in New Issue