Pull changelog from Github releases - one less place to manage

CHANGELOG.md

@@ -1,64 +0,0 @@
-## Jan 28th 2018
-
-- Fixed keyboard shortcuts on Windows
-- Fixed slack slash command and improved results formatting in Slack
-- Fixed headings now have stable anchors for external linking
-- Fixed several JS issues in the editor
-- Improved toolbar behavior for link editing
-
----
-
-## Jan 23rd 2018
-
-- Added 'about' page
-- Added dynamic prefetching of scripts for improved performance
-- Added more meta tags
-- Added new onboarding document
-
----
-
-## Jan 15th 2018
-
-- Fixed loading placeholders styling
-- Added members view to settings pages
-- Dynamic loading of editor JS for first load performance
-- Added event bus for future integrations
-- Improved handling of malformed links
-
----
-
-## Jan 6th, 2018
-
-- Improved the floating toolbar behavior in the editor
-- Added blockquote button to formatting toolbar
-- Fixed saving a new document no longer redirects to read-only mode
-- Fixed an exception when visiting a document without being signed in
-- Fixed a problem with invalid urls causing errors
-
----
-
-## Dec 18th, 2017
-
-- We now support automatic unfurling of Outline links posted to Slack
-- Added privacy policy for the hosted version at getoutline.com
-- Added ability to update profile picture in the settings
-
----
-
-## Dec 11th, 2017
-
-- Added ability to develop locally in Docker. This is now the preferred way to work on Outline.
-- Various improvements and fixes to search
-
----
-
-## Nov 28th, 2017
-
-- Added the changelog you’re looking at!
-- Fixed some issues with collection homepage
-
----
-
-## Nov 23rd, 2017
-
-- Initial open source release.

server/pages/Changelog.js

@@ -1,5 +1,6 @@
 // @flow
 import * as React from 'react';
+import format from 'date-fns/format';
 import styled from 'styled-components';
 import Grid from 'styled-components-grid';
 import ReactMarkdown from 'react-markdown';
@@ -7,7 +8,14 @@ import { Helmet } from 'react-helmet';
 import Header from './components/Header';
 import { color } from '../../shared/styles/constants';
 
-function Changelog({ body }: { body: string }) {
+type Release = {
+  id: string,
+  name: string,
+  body: string,
+  created_at: string,
+};
+
+function Changelog({ releases }: { releases: Release[] }) {
   return (
     <Grid>
       <Helmet>
@@ -19,21 +27,40 @@ function Changelog({ body }: { body: string }) {
           We’re building in public. Here’s what we’ve been changing recently.
         </p>
       </Header>
-      <Container source={body} />
+      <Container>
+        {releases.map(release => (
+          <Article key={release.id}>
+            <h1>{release.name}</h1>
+            <Time datetime={release.created_at}>
+              {format(new Date(release.created_at), 'MMMM Do, YYYY')}
+            </Time>
+            <ReactMarkdown source={release.body} />
+          </Article>
+        ))}
+      </Container>
     </Grid>
   );
 }
 
-const Container = styled(ReactMarkdown)`
+const Time = styled.time`
+  color: ${color.slateDark};
+  margin-top: -16px;
+  display: block;
+`;
+
+const Container = styled.div`
   width: 100%;
   max-width: 720px;
   margin: 0 auto;
   padding: 0 2em;
+`;
 
-  hr {
+const Article = styled.div`
-    border: 0;
   border-bottom: 1px solid ${color.slateLight};
-    margin: 4em 0;
+  padding-bottom: 2em;
+
+  &:last-child {
+    border-bottom: 0;
   }
 `;
 

server/routes.js

@@ -68,9 +68,11 @@ router.get('/pricing', ctx => renderpage(ctx, <Pricing />));
 router.get('/developers', ctx => renderpage(ctx, <Api />));
 router.get('/privacy', ctx => renderpage(ctx, <Privacy />));
 router.get('/changelog', async ctx => {
-  const data = await fs.readFile(path.join(__dirname, '../CHANGELOG.md'));
+  const data = await fetch(
-  const body = data.toString();
+    'https://api.github.com/repos/outline/outline/releases'
-  return renderpage(ctx, <Changelog body={body} />);
+  );
+  const releases = await data.json();
+  return renderpage(ctx, <Changelog releases={releases} />);
 });
 
 // home page