diff --git a/frontend/components/DocumentPreview/DocumentPreview.js b/frontend/components/DocumentPreview/DocumentPreview.js
index 08fbbad8..37709d12 100644
--- a/frontend/components/DocumentPreview/DocumentPreview.js
+++ b/frontend/components/DocumentPreview/DocumentPreview.js
@@ -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,25 +17,38 @@ 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 (
-
-
- {document.title}
-
-
-
-
- Continue reading…
-
-
+
+
+
+
);
};
diff --git a/frontend/components/Editor/Editor.scss b/frontend/components/Editor/Editor.scss
index 3949ebe1..e81138d2 100644
--- a/frontend/components/Editor/Editor.scss
+++ b/frontend/components/Editor/Editor.scss
@@ -12,7 +12,6 @@
}
.editor {
- background: #fff;
color: #1b2631;
height: auto;
width: 100%;
diff --git a/frontend/components/Markdown/Markdown.js b/frontend/components/Markdown/Markdown.js
index 5334aef2..ee93d5d9 100644
--- a/frontend/components/Markdown/Markdown.js
+++ b/frontend/components/Markdown/Markdown.js
@@ -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 (
-
+
+
+
);
};
}
+
+export default Markdown;
diff --git a/frontend/scenes/Search/Search.js b/frontend/scenes/Search/Search.js
index e423bc3e..f7c51784 100644
--- a/frontend/scenes/Search/Search.js
+++ b/frontend/scenes/Search/Search.js
@@ -52,6 +52,7 @@ type Props = {
};
render() {
+ const query = this.props.match.params.query;
const title =
;
return (
@@ -80,6 +81,7 @@ type Props = {
searchTerm={this.store.searchTerm}
onKeyDown={this.handleKeyDown}
onChange={this.updateQuery}
+ value={query}
/>
{this.store.documents.map(document => (
diff --git a/frontend/styles/constants.js b/frontend/styles/constants.js
new file mode 100644
index 00000000..cc9cbcc1
--- /dev/null
+++ b/frontend/styles/constants.js
@@ -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',
+};