From 802ce10f14f1e69852a6fd1eb26f6bd63a2377f6 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sun, 22 Oct 2017 17:16:57 -0700 Subject: [PATCH] POC --- flow-typed/npm/react-helmet_v3.x.x.js | 37 --------------- server/index.js | 2 +- server/pages/About.js | 27 +++++++++++ server/pages/Home.js | 28 +++++++++++ server/pages/Pricing.js | 27 +++++++++++ server/pages/components/Layout.js | 2 + server/pages/components/Navigation.js | 14 ++++++ server/routes.js | 67 ++++++++------------------- server/static/home.html | 64 ------------------------- server/utils/renderpage.js | 27 +++++++++++ 10 files changed, 146 insertions(+), 149 deletions(-) delete mode 100644 flow-typed/npm/react-helmet_v3.x.x.js create mode 100644 server/pages/About.js create mode 100644 server/pages/Pricing.js create mode 100644 server/pages/components/Navigation.js delete mode 100644 server/static/home.html create mode 100644 server/utils/renderpage.js diff --git a/flow-typed/npm/react-helmet_v3.x.x.js b/flow-typed/npm/react-helmet_v3.x.x.js deleted file mode 100644 index 06a1432e..00000000 --- a/flow-typed/npm/react-helmet_v3.x.x.js +++ /dev/null @@ -1,37 +0,0 @@ -// flow-typed signature: 7ee00cf01ba33eeba35dee9d286ece86 -// flow-typed version: 0d0440f3d3/react-helmet_v3.x.x/flow_>=v0.26.x - -declare module 'react-helmet' { - declare type Props = { - htmlAttributes?: Object, - title?: string, - defaultTitle?: string, - titleTemplate?: string, - base?: Object, - meta?: Array, - link?: Array, - script?: Array, - noscript?: Array, - style?: Array, - onChangeClientState?: (newState: Object, addedTags: Object, removeTags: Object) => void | mixed, - }; - declare interface HeadAttribute { - toString(): string; - toComponent(): React$Element<*>; - } - declare interface Head { - htmlAttributes: HeadAttribute; - title: HeadAttribute; - base: HeadAttribute; - meta: HeadAttribute; - link: HeadAttribute; - script: HeadAttribute; - style: HeadAttribute; - } - - declare class Helmet extends React$Component { - static rewind(): Head; - props: Props; - } - declare var exports: typeof Helmet; -} diff --git a/server/index.js b/server/index.js index 10c7bb92..92eb0738 100644 --- a/server/index.js +++ b/server/index.js @@ -46,7 +46,7 @@ if (process.env.NODE_ENV === 'development') { // use the same as in webpack publicPath: config.output.publicPath, - // options for formating the statistics + // options for formatting the statistics stats: { colors: true, }, diff --git a/server/pages/About.js b/server/pages/About.js new file mode 100644 index 00000000..5d7c43d2 --- /dev/null +++ b/server/pages/About.js @@ -0,0 +1,27 @@ +// @flow +import React from 'react'; +import styled from 'styled-components'; +import Grid from 'styled-components-grid'; +import { Helmet } from 'react-helmet'; + +const Header = styled.div` + width: 100%; + padding: 3em; + text-align: center; +`; + +export default function About() { + return ( + + + About + +
+

About Atlas

+

+ Just a proof of concept for multiple pages. +

+
+ + ); +} diff --git a/server/pages/Home.js b/server/pages/Home.js index 147a93bd..4eb54c01 100644 --- a/server/pages/Home.js +++ b/server/pages/Home.js @@ -28,6 +28,7 @@ export default function Home() { Atlas is fast, really fast. We’ve trimmed 100ms and 50ms there to make sure that documents load instantly, search is speedy and there are keyboard shortcuts for everything.

+

Markdown Support

@@ -35,6 +36,33 @@ export default function Home() {

+ + + +

Markdown Support

+

+ Documents are stored in Markdown and you can export them at any time. Markdown shortcuts are also built right into the editor so you can easily format using markdown syntax or our GUI. +

+ + + +

Powerful Search

+

+ Built-in search makes that one document easy to find in a large knowledgebase. +

+ + +

API & Integrations

+

+ Atlas is built on it’s own API, treat Atlas as a CMS or automatically great documents from outside events. +

+ + +

Open Source

+

+ Want to contribute or host Atlas yourself? All of the code is on GitHub. +

+ ); } diff --git a/server/pages/Pricing.js b/server/pages/Pricing.js new file mode 100644 index 00000000..15e861c0 --- /dev/null +++ b/server/pages/Pricing.js @@ -0,0 +1,27 @@ +// @flow +import React from 'react'; +import styled from 'styled-components'; +import Grid from 'styled-components-grid'; +import { Helmet } from 'react-helmet'; + +const Header = styled.div` + width: 100%; + padding: 3em; + text-align: center; +`; + +export default function Pricing() { + return ( + + + Pricing + +
+

Pricing

+

+ Just a proof of concept for multiple pages. +

+
+ + ); +} diff --git a/server/pages/components/Layout.js b/server/pages/components/Layout.js index 6fe9d56f..17738152 100644 --- a/server/pages/components/Layout.js +++ b/server/pages/components/Layout.js @@ -1,6 +1,7 @@ // @flow import React from 'react'; import { Helmet } from 'react-helmet'; +import Navigation from './Navigation'; type Props = { children?: React$Element<*>, @@ -19,6 +20,7 @@ export default function Layout({ children }: Props) { {'{{CSS}}'} + {children} diff --git a/server/pages/components/Navigation.js b/server/pages/components/Navigation.js new file mode 100644 index 00000000..7aefe5fc --- /dev/null +++ b/server/pages/components/Navigation.js @@ -0,0 +1,14 @@ +// @flow +import React from 'react'; + +export default function Navigation() { + return ( + + ); +} diff --git a/server/routes.js b/server/routes.js index 2d94fd09..2f88a4b2 100644 --- a/server/routes.js +++ b/server/routes.js @@ -1,49 +1,27 @@ +// @flow import React from 'react'; import path from 'path'; -import fs from 'fs'; import httpErrors from 'http-errors'; import Koa from 'koa'; import Router from 'koa-router'; import sendfile from 'koa-sendfile'; -import ReactDOMServer from 'react-dom/server'; import subdomainRedirect from './middlewares/subdomainRedirect'; -import { Helmet } from 'react-helmet'; +import renderpage from './utils/renderpage'; -import { ServerStyleSheet, StyleSheetManager } from 'styled-components'; -import Layout from './pages/components/Layout'; import Home from './pages/Home'; +import About from './pages/About'; +import Pricing from './pages/Pricing'; const isProduction = process.env.NODE_ENV === 'production'; const koa = new Koa(); const router = new Router(); -const sheet = new ServerStyleSheet(); -const readFile = src => { - return new Promise((resolve, reject) => { - fs.readFile(src, { encoding: 'utf8' }, (err, data) => { - if (err) return reject(err); - resolve(data); - }); - }); -}; - -const renderPage = children => { - const html = ReactDOMServer.renderToString( - - - {children} - - - ); - - // helmet returns an object of meta tags with toString methods, urgh. - const helmet = Helmet.renderStatic(); - let head = ''; - Object.keys(helmet).forEach(key => (head += helmet[key].toString())); - - return html - .replace('{{CSS}}', sheet.getStyleTags()) - .replace('{{HEAD}}', head); +const renderapp = async ctx => { + if (isProduction) { + await sendfile(ctx, path.join(__dirname, '../dist/index.html')); + } else { + await sendfile(ctx, path.join(__dirname, './static/dev.html')); + } }; router.get('/_health', ctx => (ctx.body = 'OK')); @@ -61,33 +39,28 @@ if (process.env.NODE_ENV === 'production') { }); } +// static pages +router.get('/about', ctx => renderpage(ctx, )); +router.get('/pricing', ctx => renderpage(ctx, )); + +// home page router.get('/', async ctx => { if (ctx.cookies.get('loggedIn')) { - if (isProduction) { - ctx.body = await readFile(path.join(__dirname, '../dist/index.html')); - } else { - ctx.body = await readFile(path.join(__dirname, './static/dev.html')); - } + await renderapp(ctx); } else { - ctx.body = await renderPage(); + await renderpage(ctx, ); } - - if (!ctx.status) ctx.throw(httpErrors.NotFound()); }); +// catch all for react app router.get('*', async ctx => { - if (isProduction) { - ctx.body = await readFile(path.join(__dirname, '../dist/index.html')); - } else { - ctx.body = await readFile(path.join(__dirname, './static/dev.html')); - } + await renderapp(ctx); if (!ctx.status) ctx.throw(httpErrors.NotFound()); }); +// middleware koa.use(subdomainRedirect()); koa.use(router.routes()); - -// 404 handler koa.use(async () => { throw httpErrors.NotFound(); }); diff --git a/server/static/home.html b/server/static/home.html deleted file mode 100644 index 35a36c02..00000000 --- a/server/static/home.html +++ /dev/null @@ -1,64 +0,0 @@ - - - - Atlas - - - - - -
-

Your team’s knowledge base

-

Documentation, meeting notes, playbooks, onboarding, work logs, brainstorming, decisions, & more…

- Sign In -
- -
-
-
-
-

Blazing Fast

-

Atlas is fast, really fast. We’ve trimmed 100ms and 50ms there to make sure that documents load instantly, search is speedy and there are keyboard shortcuts for everything.

-
-
- -
-
-

Markdown Support

-

Documents are stored in Markdown and you can export them at any time. Markdown shortcuts are also built right into the editor so you can easily format using markdown syntax or our GUI.

-
-
-
-
- -
-
-
-
-

Beautiful Editor

-

We built a custom editor from the ground up to be great looking, extensible, and a pleasure to use whether you're typing up quick notes or pages of documentation.

-
-
- -
-

Powerful Search

-

Built-in search makes that one document easy to find in a large knowledgebase.

-
-
-

API & Integrations

-

Atlas is built on it's own API, treat Atlas as a CMS or automatically great documents from outside events.

-
-
-

Open Source

-

Want to contribute or host Atlas yourself? All of the code is on GitHub.

-
- -
-
    -
  • About Us
    • -
  • Pricing
    • -
  • Contact
    • -
-
- - diff --git a/server/utils/renderpage.js b/server/utils/renderpage.js new file mode 100644 index 00000000..7a8c7399 --- /dev/null +++ b/server/utils/renderpage.js @@ -0,0 +1,27 @@ +// @flow +import React from 'react'; +import ReactDOMServer from 'react-dom/server'; +import { Helmet } from 'react-helmet'; +import { ServerStyleSheet, StyleSheetManager } from 'styled-components'; +import Layout from '../pages/components/Layout'; + +const sheet = new ServerStyleSheet(); + +export default function renderpage(ctx: Object, children: React$Element<*>) { + const html = ReactDOMServer.renderToString( + + + {children} + + + ); + + // helmet returns an object of meta tags with toString methods, urgh. + const helmet = Helmet.renderStatic(); + let head = ''; + Object.keys(helmet).forEach(key => (head += helmet[key].toString())); + + ctx.body = html + .replace('{{CSS}}', sheet.getStyleTags()) + .replace('{{HEAD}}', head); +}