Renamed /src to /frontend

frontend/components/Document/Document.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import moment from 'moment';
+
+import { Link } from 'react-router';
+import PublishingInfo from 'components/PublishingInfo';
+
+import styles from './Document.scss';
+
+const DocumentHtml = observer((props) => {
+  return (
+    <div
+      className={ styles.document }
+      dangerouslySetInnerHTML={{ __html: props.html }}
+      { ...props }
+    />
+  );
+});
+
+@observer
+class Document extends React.Component {
+  static propTypes = {
+    document: React.PropTypes.object.isRequired,
+  }
+
+  render() {
+    return (
+      <div className={ styles.container }>
+        <PublishingInfo
+          name={ this.props.document.user.name }
+          avatarUrl={ this.props.document.user.avatarUrl }
+          createdAt={ this.props.document.createdAt }
+          updatedAt={ this.props.document.updatedAt }
+        />
+        <DocumentHtml html={ this.props.document.html } />
+      </div>
+    );
+  }
+};
+
+export default Document;
+export {
+  DocumentHtml
+};

frontend/components/Document/Document.scss

@@ -0,0 +1,31 @@
+.container {
+  width: 100%;
+  padding: 20px;
+}
+
+.document {
+  h1, h2, h3, h4, h5, h6 {
+    :global {
+      .anchor {
+        visibility: hidden;
+        color: #ccc;
+      }
+    }
+
+    &:hover {
+      :global {
+        .anchor {
+          visibility: visible;
+        }
+      }
+    }
+  }
+
+  ul {
+    padding-left: 1.5em;
+
+    ul {
+      margin: 0;
+    }
+  }
+}

frontend/components/Document/index.js

@@ -0,0 +1,6 @@
+import Document, { DocumentHtml } from './Document';
+
+export default Document;
+export {
+  DocumentHtml,
+};