Deduplicate CMS preview templates

cms/cms.js

@@ -5,37 +5,19 @@ import Features from 'site/components/Features'
 import Testimonials from 'site/components/Testimonials'
 import Pricing from 'site/components/Pricing'
 
-const AboutPagePreview = ({ entry, widgetFor }) => (
-  <section className="section section--gradient">
-    <div className="container">
-      <div className="columns">
-        <div className="column is-10 is-offset-1">
-          <div className="section">
-            <h2 className="title is-size-3 has-text-weight-bold is-bold-light">
-              {entry.getIn(['data', 'title'])}
-            </h2>
-            <div className="content">{widgetFor('body')}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-)
+import { AboutPageTemplate } from 'site/templates/about-page';
+import { ProductPageTemplate } from 'site/templates/product-page';
+import { BlogPostTemplate } from 'site/templates/blog-post';
+
+const AboutPagePreview = ({ entry, widgetFor }) =>
+  <AboutPageTemplate title={entry.getIn(['data', 'title'])} content={widgetFor('body')} />;
 
 const BlogPostPreview = ({ entry, widgetFor }) => (
-  <section className="section">
-    <div className="container content">
-      <div className="columns">
-        <div className="column is-10 is-offset-1">
-          <h1 className="title is-size-2 has-text-weight-bold is-bold-light">
-            {entry.getIn(['data', 'title'])}
-          </h1>
-          <p>{entry.getIn(['data', 'description'])}</p>
-          <div>{widgetFor('body')}</div>
-        </div>
-      </div>
-    </div>
-  </section>
+  <BlogPostTemplate
+    content={widgetFor('body')}
+    description={entry.getIn(['data', 'description'])}
+    title={entry.getIn(['data', 'title'])}
+  />
 )
 
 const ProductPagePreview = ({ entry, widgetFor, getAsset }) => {
@@ -48,116 +30,36 @@ const ProductPagePreview = ({ entry, widgetFor, getAsset }) => {
   const entryPricingPlans = entry.getIn(['data', 'pricing', 'plans'])
   const pricingPlans = entryPricingPlans ? entryPricingPlans.toJS() : []
 
-  return (
-    <section className="section section--gradient">
-      <div className="container">
-        <div className="section">
-          <div className="columns">
-            <div className="column is-10 is-offset-1">
-              <div className="content">
-                <div
-                  className="full-width-image-container margin-top-0"
-                  style={{
-                    backgroundImage: `url(${getAsset(
-                      entry.getIn(['data', 'image'])
-                    )})`,
-                  }}
-                >
-                  <h2
-                    className="has-text-weight-bold is-size-1"
-                    style={{
-                      boxShadow: '0.5rem 0 0 #f40, -0.5rem 0 0 #f40',
-                      backgroundColor: '#f40',
-                      color: 'white',
-                      padding: '1rem',
-                    }}
-                  >
-                    {entry.getIn(['data', 'title'])}
-                  </h2>
-                </div>
-                <div className="columns">
-                  <div className="column is-7">
-                    <h3 className="has-text-weight-semibold is-size-2">
-                      {entry.getIn(['data', 'heading'])}
-                    </h3>
-                    <p>{entry.getIn(['data', 'description'])}</p>
-                  </div>
-                </div>
-                <Features gridItems={blurbs} />
-                <div className="columns">
-                  <div className="column is-7">
-                    <h3 className="has-text-weight-semibold is-size-3">
-                      {entry.getIn(['data', 'main', 'heading'])}
-                    </h3>
-                    <p>{entry.getIn(['main', 'description'])}</p>
-                  </div>
-                </div>
-                <div className="tile is-ancestor">
-                  <div className="tile is-vertical">
-                    <div className="tile">
-                      <div className="tile is-parent is-vertical">
-                        <article className="tile is-child">
-                          <img
-                            style={{ borderRadius: '5px' }}
-                            src={entry.getIn([
-                              'data',
-                              'main',
-                              'image1',
-                              'image',
-                            ])}
-                            alt=""
-                          />
-                        </article>
-                      </div>
-                      <div className="tile is-parent">
-                        <article className="tile is-child">
-                          <img
-                            style={{ borderRadius: '5px' }}
-                            src={entry.getIn([
-                              'data',
-                              'main',
-                              'image2',
-                              'image',
-                            ])}
-                            alt=""
-                          />
-                        </article>
-                      </div>
-                    </div>
-                    <div className="tile is-parent">
-                      <article className="tile is-child">
-                        <img
-                          style={{ borderRadius: '5px' }}
-                          src={entry.getIn(['data', 'main', 'image3', 'image'])}
-                          alt=""
-                        />
-                      </article>
-                    </div>
-                  </div>
-                </div>
-                <Testimonials testimonials={testimonials} />
-                <div
-                  className="full-width-image-container"
-                  style={{
-                    backgroundImage: `url(${getAsset(
-                      entry.getIn(['data', 'full_image'])
-                    )})`,
-                  }}
-                />
-                <h2 className="has-text-weight-semibold is-size-2">
-                  {entry.getIn(['data', 'pricing', 'heading'])}
-                </h2>
-                <p className="is-size-5">
-                  {entry.getIn(['data', 'pricing', 'description'])}
-                </p>
-                <Pricing data={pricingPlans} />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  )
+  return <ProductPageTemplate
+    image={entry.getIn(['data', 'image'])}
+    title={entry.getIn(['data', 'title'])}
+    heading={entry.getIn(['data', 'heading'])}
+    description={entry.getIn(['data', 'description'])}
+    intro={{ blurbs }}
+    main={{
+      heading: entry.getIn(['data', 'main', 'heading']),
+      description: entry.getIn(['data', 'main', 'description']),
+      image1: {
+        image: getAsset(entry.getIn(['data', 'main', 'image1', 'image'])),
+        alt: entry.getIn(['data', 'main', 'image1', 'alt']),
+      },
+      image2: {
+        image: getAsset(entry.getIn(['data', 'main', 'image2', 'image'])),
+        alt: entry.getIn(['data', 'main', 'image2', 'alt']),
+      },
+      image3: {
+        image: getAsset(entry.getIn(['data', 'main', 'image3', 'image'])),
+        alt: entry.getIn(['data', 'main', 'image3', 'alt']),
+      },
+    }}
+    fullImage={entry.getIn(['data', 'full_image'])}
+    testimonials={testimonials}
+    pricing={{
+      heading: entry.getIn(['data', 'pricing', 'heading']),
+      description: entry.getIn(['data', 'pricing', 'description']),
+      plans: pricingPlans,
+    }}
+  />;
 }
 
 CMS.registerPreviewStyle('/styles.css')

src/components/Content.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default ({ content, className }) => <div className={className}>{content}</div>;
+export const HTMLContent = ({ content, className }) => <div
+  className={className}
+  dangerouslySetInnerHTML={{ __html: content }}
+/>;

src/templates/about-page.js

@@ -1,21 +1,29 @@
 import React from 'react';
+import Content, { HTMLContent } from '../components/Content';
 
-export default ({ data }) => {
-  const { markdownRemark: post } = data;
-  return (
-    <section className="section section--gradient">
-      <div className="container">
-        <div className="columns">
-          <div className="column is-10 is-offset-1">
-            <div className="section">
-              <h2 className="title is-size-3 has-text-weight-bold is-bold-light">{post.frontmatter.title}</h2>
-              <div className="content" dangerouslySetInnerHTML={{ __html: post.html }} />
-            </div>
+export const AboutPageTemplate = ({ title, content, contentComponent }) => {
+  const PageContent = contentComponent || Content;
+  return <section className="section section--gradient">
+    <div className="container">
+      <div className="columns">
+        <div className="column is-10 is-offset-1">
+          <div className="section">
+            <h2 className="title is-size-3 has-text-weight-bold is-bold-light">{title}</h2>
+            <PageContent className="content" content={content} />
           </div>
         </div>
       </div>
-    </section>
-  );
+    </div>
+  </section>;
+}
+
+export default ({ data }) => {
+  const { markdownRemark: post } = data;
+  return <AboutPageTemplate
+    contentComponent={HTMLContent}
+    title={post.frontmatter.title}
+    content={post.html}
+  />;
 };
 
 export const aboutPageQuery = graphql`

src/templates/blog-post.js

@@ -1,22 +1,32 @@
 import React from 'react';
+import Content, { HTMLContent } from '../components/Content';
 import Helmet from 'react-helmet';
 
-export default function Template({ data }) {
-  const { markdownRemark: post } = data;
-  return (
-    <section className="section">
-      <Helmet title={`Blog | ${post.frontmatter.title}`} />
-      <div className="container content">
-        <div className="columns">
-          <div className="column is-10 is-offset-1">
-            <h1 className="title is-size-2 has-text-weight-bold is-bold-light">{post.frontmatter.title}</h1>
-            <p>{post.frontmatter.description}</p>
-            <div dangerouslySetInnerHTML={{ __html: post.html }} />
-          </div>
+export const BlogPostTemplate = ({ content, contentComponent, description, title, helmet }) => {
+  const PostContent = contentComponent || Content;
+  return <section className="section">
+    { helmet ? helmet : ""}
+    <div className="container content">
+      <div className="columns">
+        <div className="column is-10 is-offset-1">
+          <h1 className="title is-size-2 has-text-weight-bold is-bold-light">{title}</h1>
+          <p>{description}</p>
+          <PostContent content={content} />
         </div>
       </div>
-    </section>
-  );
+    </div>
+  </section>;
+}
+
+export default ({ data }) => {
+  const { markdownRemark: post } = data;
+  return <BlogPostTemplate
+    content={post.html}
+    contentComponent={HTMLContent}
+    description={post.frontmatter.description}
+    helmet={<Helmet title={`Blog | ${post.frontmatter.title}`} />}
+    title={post.frontmatter.title}
+  />;
 }
 
 export const pageQuery = graphql`

src/templates/product-page.js

@@ -3,42 +3,42 @@ import Features from '../components/Features';
 import Testimonials from '../components/Testimonials';
 import Pricing from '../components/Pricing';
 
-export default ({ data }) => {
-  const { frontmatter } = data.markdownRemark;
-  return (
-    <section className="section section--gradient">
+export const ProductPageTemplate = ({
+    image, title, heading, description, intro, main, testimonials, fullImage, pricing
+  }) => {
+    return <section className="section section--gradient">
       <div className="container">
         <div className="section">
           <div className="columns">
             <div className="column is-10 is-offset-1">
               <div className="content">
                 <div
-                  className="full-width-image-container margin-top-0"
-                  style={{ backgroundImage: `url(${frontmatter.image})` }}
+                    className="full-width-image-container margin-top-0"
+                    style={{ backgroundImage: `url(${image})` }}
                 >
                   <h2
-                    className="has-text-weight-bold is-size-1"
-                    style={{
-                      boxShadow: '0.5rem 0 0 #f40, -0.5rem 0 0 #f40',
-                      backgroundColor: '#f40',
-                      color: 'white',
-                      padding: '1rem'
-                    }}
+                      className="has-text-weight-bold is-size-1"
+                      style={{
+                        boxShadow: '0.5rem 0 0 #f40, -0.5rem 0 0 #f40',
+                        backgroundColor: '#f40',
+                        color: 'white',
+                        padding: '1rem'
+                      }}
                   >
-                    {frontmatter.title}
+                    {title}
                   </h2>
                 </div>
                 <div className="columns">
                   <div className="column is-7">
-                    <h3 className="has-text-weight-semibold is-size-2">{frontmatter.heading}</h3>
-                    <p>{frontmatter.description}</p>
+                    <h3 className="has-text-weight-semibold is-size-2">{heading}</h3>
+                    <p>{description}</p>
                   </div>
                 </div>
-                <Features gridItems={frontmatter.intro.blurbs} />
+                <Features gridItems={intro.blurbs} />
                 <div className="columns">
                   <div className="column is-7">
-                    <h3 className="has-text-weight-semibold is-size-3">{frontmatter.main.heading}</h3>
-                    <p>{frontmatter.main.description}</p>
+                    <h3 className="has-text-weight-semibold is-size-3">{main.heading}</h3>
+                    <p>{main.description}</p>
                   </div>
                 </div>
                 <div className="tile is-ancestor">
@@ -47,18 +47,18 @@ export default ({ data }) => {
                       <div className="tile is-parent is-vertical">
                         <article className="tile is-child">
                           <img
-                            style={{ borderRadius: '5px' }}
-                            src={frontmatter.main.image1.image}
-                            alt=""
+                              style={{ borderRadius: '5px' }}
+                              src={main.image1.image}
+                              alt={main.image1.alt}
                           />
                         </article>
                       </div>
                       <div className="tile is-parent">
                         <article className="tile is-child">
                           <img
-                            style={{ borderRadius: '5px' }}
-                            src={frontmatter.main.image2.image}
-                            alt=""
+                              style={{ borderRadius: '5px' }}
+                              src={main.image2.image}
+                              alt={main.image2.alt}
                           />
                         </article>
                       </div>
@@ -66,29 +66,43 @@ export default ({ data }) => {
                     <div className="tile is-parent">
                       <article className="tile is-child">
                         <img
-                          style={{ borderRadius: '5px' }}
-                          src={frontmatter.main.image3.image}
-                          alt=""
+                            style={{ borderRadius: '5px' }}
+                            src={main.image3.image}
+                            alt={main.image3.alt}
                         />
                       </article>
                     </div>
                   </div>
                 </div>
-                <Testimonials testimonials={frontmatter.testimonials} />
+                <Testimonials testimonials={testimonials} />
                 <div
-                  className="full-width-image-container"
-                  style={{ backgroundImage: `url(${frontmatter.full_image})` }}
+                    className="full-width-image-container"
+                    style={{ backgroundImage: `url(${fullImage})` }}
                 />
-                <h2 className="has-text-weight-semibold is-size-2">{frontmatter.pricing.heading}</h2>
-                <p className="is-size-5">{frontmatter.pricing.description}</p>
-                <Pricing data={frontmatter.pricing.plans} />
+                <h2 className="has-text-weight-semibold is-size-2">{pricing.heading}</h2>
+                <p className="is-size-5">{pricing.description}</p>
+                <Pricing data={pricing.plans} />
               </div>
             </div>
           </div>
         </div>
       </div>
     </section>
-  );
+  };
+
+export default ({ data }) => {
+  const { frontmatter } = data.markdownRemark;
+  return <ProductPageTemplate
+    image={frontmatter.image}
+    title={frontmatter.title}
+    heading={frontmatter.heading}
+    description={frontmatter.description}
+    intro={frontmatter.intro}
+    main={frontmatter.main}
+    testimonials={frontmatter.testimonials}
+    fullImage={frontmatter.full_image}
+    pricing={frontmatter.pricing}
+  />;
 };
 
 export const productPageQuery = graphql`

static/admin/index.html

@@ -8,6 +8,7 @@
   <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
 </head>
 <body>
+  <script>window.graphql = function () { return null; }</script>
   <script src="/admin/cms.bundle.js"></script>
 </body>
 </html>