Merge pull request #456 from outline/changelog

Add Changelog

server/pages/Api.js

@@ -3,10 +3,12 @@ import React from 'react';
 import Grid from 'styled-components-grid';
 import { Helmet } from 'react-helmet';
 import styled from 'styled-components';
+import Header from './components/Header';
 
 const Container = styled.div`
   max-width: 720px;
   margin: 0 auto;
+  padding: 0 2em;
 
   pre {
     padding: 0.5em 1em;
@@ -56,20 +58,17 @@ export default function Pricing() {
   return (
     <Grid>
       <Helmet>
-        <title>Developer API - Outline</title>
+        <title>API Documentation - Outline</title>
       </Helmet>
+      <Header>
+        <h1>Documentation</h1>
+        <p>The API is the heart and soul of Outline.</p>
+      </Header>
       <Container>
-        <h1>Outline API</h1>
         <p>
-          First thing we build for Outline was its API. It’s the heart and soul
-          of the service and as developers, it’s our mission to make the API as
-          rich and easy to use as possible.
-        </p>
-        <p>
-          <i>
-            While Outline is still in public beta, we might make small
-            adjustments, including breaking changes to the API.
-          </i>
+          As developers, it’s our mission to make the API as great as possible.
+          While Outline is still in public beta, we might make small
+          adjustments, including breaking changes to the API.
         </p>
         <h2>Making requests</h2>
         <p>

server/pages/Changelog.js

@@ -0,0 +1,40 @@
+// @flow
+import React from 'react';
+import styled from 'styled-components';
+import Grid from 'styled-components-grid';
+import ReactMarkdown from 'react-markdown';
+import { Helmet } from 'react-helmet';
+import Header from './components/Header';
+import { color } from '../../shared/styles/constants';
+
+function Changelog({ body }: { body: string }) {
+  return (
+    <Grid>
+      <Helmet>
+        <title>Changelog</title>
+      </Helmet>
+      <Header>
+        <h1>Changelog</h1>
+        <p>
+          We’re building in public. Here’s what we’ve been changing recently.
+        </p>
+      </Header>
+      <Container source={body} />
+    </Grid>
+  );
+}
+
+const Container = styled(ReactMarkdown)`
+  width: 100%;
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 0 2em;
+
+  hr {
+    border: 0;
+    border-bottom: 1px solid ${color.slateLight};
+    margin: 4em 0;
+  }
+`;
+
+export default Changelog;

server/pages/components/Header.js

@@ -0,0 +1,22 @@
+// @flow
+import styled from 'styled-components';
+import { color } from '../../../shared/styles/constants';
+
+const Header = styled.div`
+  width: 100%;
+  padding: 0 2em 2em;
+  text-align: center;
+  background: ${color.slateLight};
+  margin-bottom: 2em;
+
+  p {
+    max-width: 720px;
+    margin: 0 auto;
+  }
+
+  h1 {
+    font-size: 2.5em;
+  }
+`;
+
+export default Header;

server/pages/components/Navigation.js

@@ -5,6 +5,7 @@ import breakpoint from 'styled-components-breakpoint';
 import {
   signin,
   developers,
+  changelog,
   githubUrl,
   spectrumUrl,
   blogUrl,
@@ -23,6 +24,9 @@ function TopNavigation() {
         <MenuItemDesktop>
           <a href={blogUrl()}>Blog</a>
         </MenuItemDesktop>
+        <MenuItemDesktop>
+          <a href={changelog()}>Changelog</a>
+        </MenuItemDesktop>
         <MenuItem>
           <a href={developers()}>API</a>
         </MenuItem>

server/routes.js

@@ -1,6 +1,7 @@
 // @flow
 import React from 'react';
 import path from 'path';
+import fs from 'fs-extra';
 import httpErrors from 'http-errors';
 import Koa from 'koa';
 import Router from 'koa-router';
@@ -12,6 +13,7 @@ import { slackAuth } from '../shared/utils/routeHelpers';
 
 import Home from './pages/Home';
 import About from './pages/About';
+import Changelog from './pages/Changelog';
 import Pricing from './pages/Pricing';
 import Api from './pages/Api';
 
@@ -62,6 +64,11 @@ router.get('/auth/slack/install', async ctx => {
 router.get('/about', ctx => renderpage(ctx, <About />));
 router.get('/pricing', ctx => renderpage(ctx, <Pricing />));
 router.get('/developers', ctx => renderpage(ctx, <Api />));
+router.get('/changelog', async ctx => {
+  const data = await fs.readFile(path.join(__dirname, '../CHANGELOG.md'));
+  const body = data.toString();
+  return renderpage(ctx, <Changelog body={body} />);
+});
 
 // home page
 router.get('/', async ctx => {