chore: add website preview templates (#1716)

website/src/components/layout.js

@@ -1,10 +1,10 @@
 import React, { Fragment } from 'react';
 import Helmet from 'react-helmet';
-import classnames from 'classnames';
 import { graphql, StaticQuery } from 'gatsby';
 
 import Header from './header';
 import Footer from './footer';
+import Notification from './notification';
 
 import '../css/imports/base.css';
 import '../css/imports/utilities.css';
@@ -54,15 +54,9 @@ const Layout = ({ children }) => {
               <meta name="description" content={description} />
             </Helmet>
             {notifs.map((node, i) => (
-              <a
-                key={i}
-                href={node.url}
-                className={classnames('notification', {
-                  'notification-loud': node.loud,
-                })}
-              >
+              <Notification key={i} url={node.url} loud={node.loud}>
                 {node.message}
-              </a>
+              </Notification>
             ))}
             <Header notifications={notifs} />
             {children}

website/src/components/notification.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import cn from 'classnames';
+
+const Notification = ({ url, loud, children }) => (
+  <a href={url} className={cn('notification', { 'notification-loud': loud })}>
+    {children}
+  </a>
+);
+
+export default Notification;

website/src/components/release.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Markdownify from '../components/markdownify';
+
+const Release = ({ version, date, description }) => (
+  <a href={`https://github.com/netlify/netlify-cms/releases/tag/${version}`} key={version}>
+    <li>
+      <div className="update-metadata">
+        <span className="update-version">{version}</span>
+        <span className="update-date">{date}</span>
+      </div>
+      <span className="update-description">
+        <Markdownify source={description} />
+      </span>
+    </li>
+  </a>
+);
+
+export default Release;

website/src/components/whats-new.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const WhatsNew = ({ children }) => (
+  <section className="whatsnew">
+    <div className="contained">
+      <ol>{children}</ol>
+    </div>
+  </section>
+);
+
+export default WhatsNew;