Merge pull request #352 from jorilallo/tom/static

[WIP] Content pages server side rendered in React

.env.sample

@@ -8,3 +8,4 @@ SEQUELIZE_SECRET=F0E5AD933D7F6FD8F4DBB3E038C501C052DC0593C686D21ACB30AE205D2F634
 SLACK_KEY=71315967491.XXXXXXXXXX
 SLACK_SECRET=d2dc414f9953226bad0a356c794XXXXX
 URL=http://localhost:3000
+DEPLOYMENT=hosted

.flowconfig

@@ -1,5 +1,5 @@
 [include]
-.*/frontend/.*
+.*/app/.*
 .*/server/.*
 .*/shared/.*
 
@@ -17,10 +17,12 @@
 emoji=true
 
 module.system.node.resolve_dirname=node_modules
-module.system.node.resolve_dirname=frontend
+module.system.node.resolve_dirname=app
 
 module.name_mapper='^\(.*\)\.s?css$' -> 'empty/object'
 module.name_mapper='^\(.*\)\.md$' -> 'empty/object'
+module.name_mapper='^shared\/\(.*\)$' -> '<PROJECT_ROOT>/shared/\1'
+
 module.file_ext=.js
 module.file_ext=.scss
 module.file_ext=.md

app/components/Alert/Alert.js

@@ -1,9 +1,9 @@
 // @flow
 import React from 'react';
 import { observer } from 'mobx-react';
-import Flex from 'components/Flex';
+import Flex from 'shared/components/Flex';
 import styled from 'styled-components';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 
 type Props = {
   children: React.Element<*>,

app/components/Button/Button.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 import { darken, lighten } from 'polished';
 
 const RealButton = styled.button`

app/components/Collaborators/Collaborators.js

@@ -2,8 +2,8 @@
 import React from 'react';
 import moment from 'moment';
 import styled from 'styled-components';
-import { color } from 'styles/constants';
-import Flex from 'components/Flex';
+import { color } from 'shared/styles/constants';
+import Flex from 'shared/components/Flex';
 import Tooltip from 'components/Tooltip';
 import Document from 'models/Document';
 

app/components/Divider/Divider.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
-import Flex from 'components/Flex';
+import Flex from 'shared/components/Flex';
 
 const Divider = () => {
   return <Flex auto justify="center"><Content /></Flex>;

app/components/DocumentPreview/DocumentPreview.js

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react';
 import { Link } from 'react-router-dom';
 import Document from 'models/Document';
 import styled from 'styled-components';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 import StarredIcon from 'components/Icon/StarredIcon';
 import PublishingInfo from './components/PublishingInfo';
 

app/components/DocumentPreview/components/PublishingInfo.js

@@ -2,10 +2,10 @@
 import React, { Component } from 'react';
 import moment from 'moment';
 import styled from 'styled-components';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 import Collection from 'models/Collection';
 import Document from 'models/Document';
-import Flex from 'components/Flex';
+import Flex from 'shared/components/Flex';
 
 const Container = styled(Flex)`
   color: ${color.slate};

app/components/DocumentViews/DocumentViews.js

@@ -5,7 +5,7 @@ import Popover from 'components/Popover';
 import styled from 'styled-components';
 import DocumentViewers from './components/DocumentViewers';
 import DocumentViewersStore from './DocumentViewersStore';
-import Flex from 'components/Flex';
+import Flex from 'shared/components/Flex';
 
 const Container = styled(Flex)`
   font-size: 13px;

app/components/DocumentViews/components/DocumentViewers/DocumentViewers.js

@@ -1,6 +1,6 @@
 // @flow
 import React, { Component } from 'react';
-import Flex from 'components/Flex';
+import Flex from 'shared/components/Flex';
 import styled from 'styled-components';
 import map from 'lodash/map';
 import Avatar from 'components/Avatar';

app/components/DropToImport/DropToImport.js

@@ -1,6 +1,8 @@
 // @flow
 import React, { Component } from 'react';
 import { inject } from 'mobx-react';
+import { injectGlobal } from 'styled-components';
+import { color } from 'shared/styles/constants';
 import invariant from 'invariant';
 import _ from 'lodash';
 import Dropzone from 'react-dropzone';
@@ -20,6 +22,17 @@ type Props = {
   history: Object,
 };
 
+injectGlobal`
+  .activeDropZone {
+    background: ${color.slateDark};
+    svg { fill: ${color.white}; }
+  }
+
+  .activeDropZone a {
+    color: ${color.white} !important;
+  }
+`;
+
 class DropToImport extends Component {
   state: {
     isImporting: boolean,

app/components/DropdownMenu/DropdownMenu.js

@@ -5,9 +5,9 @@ import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import styled from 'styled-components';
 import Portal from 'react-portal';
-import Flex from 'components/Flex';
-import { color } from 'styles/constants';
-import { fadeAndScaleIn } from 'styles/animations';
+import Flex from 'shared/components/Flex';
+import { color } from 'shared/styles/constants';
+import { fadeAndScaleIn } from 'shared/styles/animations';
 
 type Props = {
   label: React.Element<*>,

app/components/DropdownMenu/DropdownMenuItem.js

@@ -1,8 +1,8 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
-import Flex from 'components/Flex';
-import { color } from 'styles/constants';
+import Flex from 'shared/components/Flex';
+import { color } from 'shared/styles/constants';
 
 const DropdownMenuItem = ({
   onClick,

app/components/Editor/Editor.js

@@ -6,7 +6,7 @@ import { Editor, Plain } from 'slate';
 import keydown from 'react-keydown';
 import type { State, Editor as EditorType } from './types';
 import getDataTransferFiles from 'utils/getDataTransferFiles';
-import Flex from 'components/Flex';
+import Flex from 'shared/components/Flex';
 import ClickablePadding from './components/ClickablePadding';
 import Toolbar from './components/Toolbar';
 import BlockInsert from './components/BlockInsert';

app/components/Editor/components/BlockInsert.js

@@ -6,7 +6,7 @@ import Portal from 'react-portal';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import styled from 'styled-components';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 import PlusIcon from 'components/Icon/PlusIcon';
 import BlockMenu from 'menus/BlockMenu';
 import type { State } from '../types';

app/components/Editor/components/Code.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import CopyButton from './CopyButton';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 import type { Props } from '../types';
 
 export default function Code({ children, node, readOnly, attributes }: Props) {

app/components/Editor/components/Contents.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { List } from 'immutable';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 import headingToSlug from '../headingToSlug';
 import type { State, Block } from '../types';
 import styled from 'styled-components';

app/components/Editor/components/CopyButton.js

@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 import styled from 'styled-components';
 import CopyToClipboard from 'components/CopyToClipboard';
 

app/components/Editor/components/HorizontalRule.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import type { Props } from '../types';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 
 function HorizontalRule(props: Props) {
   const { state, node } = props;

app/components/Editor/components/Image.js

@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 import type { Props } from '../types';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 
 class Image extends Component {
   props: Props;

app/components/Editor/components/InlineCode.js

@@ -1,6 +1,6 @@
 // @flow
 import styled from 'styled-components';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 
 const InlineCode = styled.code`
   padding: .25em;

app/components/Editor/components/TodoItem.js

@@ -1,7 +1,7 @@
 // @flow
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 import type { Props } from '../types';
 
 export default class TodoItem extends Component {

app/components/Editor/components/Toolbar/components/DocumentResult.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
-import { fontWeight, color } from 'styles/constants';
+import { fontWeight, color } from 'shared/styles/constants';
 import Document from 'models/Document';
 import NextIcon from 'components/Icon/NextIcon';
 

app/components/Editor/components/Toolbar/components/LinkToolbar.js

@@ -14,7 +14,7 @@ import keydown from 'react-keydown';
 import CloseIcon from 'components/Icon/CloseIcon';
 import OpenIcon from 'components/Icon/OpenIcon';
 import TrashIcon from 'components/Icon/TrashIcon';
-import Flex from 'components/Flex';
+import Flex from 'shared/components/Flex';
 
 @keydown
 @observer

app/components/Empty/Empty.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 
 type Props = {
   children: string,

app/components/HelpText/HelpText.js

@@ -1,6 +1,6 @@
 // @flow
 import styled from 'styled-components';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 
 const HelpText = styled.p`
   margin-top: 0;

app/components/Icon/Icon.js

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 
 export type Props = {
   className?: string,