From 8461fa59db5bee1039574d17682fd70514948e16 Mon Sep 17 00:00:00 2001
From: Benaiah Mischenko <benaiah@mischenko.com>
Date: Wed, 6 Dec 2017 22:28:54 -0800
Subject: [PATCH] Update formatting script and format CMS JS

---
 cms/cms.js            | 196 ++++++++++++++++++++++++------------------
 cms/webpack.config.js |  24 +++---
 package.json          |   5 +-
 3 files changed, 128 insertions(+), 97 deletions(-)

diff --git a/cms/cms.js b/cms/cms.js
index 9606177..8fe6bcc 100644
--- a/cms/cms.js
+++ b/cms/cms.js
@@ -1,18 +1,18 @@
-import React from "react";
-import CMS from "netlify-cms";
+import React from 'react'
+import CMS from 'netlify-cms'
 
-import Features from 'site/components/Features';
-import Testimonials from 'site/components/Testimonials';
-import Pricing from 'site/components/Pricing';
+import Features from 'site/components/Features'
+import Testimonials from 'site/components/Testimonials'
+import Pricing from 'site/components/Pricing'
 
-const AboutPagePreview = ({ entry, widgetFor }) =>
+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"])}
+              {entry.getIn(['data', 'title'])}
             </h2>
             <div className="content">{widgetFor('body')}</div>
           </div>
@@ -20,119 +20,147 @@ const AboutPagePreview = ({ entry, widgetFor }) =>
       </div>
     </div>
   </section>
+)
 
-const BlogPostPreview = ({ entry, widgetFor }) =>
+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"])}
+            {entry.getIn(['data', 'title'])}
           </h1>
-          <p>{entry.getIn(["data", "description"])}</p>
-          <div>{widgetFor("body")}</div>
+          <p>{entry.getIn(['data', 'description'])}</p>
+          <div>{widgetFor('body')}</div>
         </div>
       </div>
     </div>
   </section>
+)
 
 const ProductPagePreview = ({ entry, widgetFor, getAsset }) => {
+  const entryBlurbs = entry.getIn(['data', 'intro', 'blurbs'])
+  const blurbs = entryBlurbs ? entryBlurbs.toJS() : []
 
-  const entryBlurbs = entry.getIn(["data", "intro", "blurbs"]);
-  const blurbs = entryBlurbs ? entryBlurbs.toJS() : [];
+  const entryTestimonials = entry.getIn(['data', 'testimonials'])
+  const testimonials = entryTestimonials ? entryTestimonials.toJS() : []
 
-  const entryTestimonials = entry.getIn(["data", "testimonials"]);
-  const testimonials = entryTestimonials ? entryTestimonials.toJS() : [];
+  const entryPricingPlans = entry.getIn(['data', 'pricing', 'plans'])
+  const pricingPlans = entryPricingPlans ? entryPricingPlans.toJS() : []
 
-  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"
+  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={{
-                    boxShadow: '0.5rem 0 0 #f40, -0.5rem 0 0 #f40',
-                    backgroundColor: '#f40',
-                    color: 'white',
-                    padding: '1rem'
+                    backgroundImage: `url(${getAsset(
+                      entry.getIn(['data', 'image'])
+                    )})`,
                   }}
                 >
-                  {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>
+                  <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>
-              <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 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>
-              </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>
+                <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", "image2", "image"])}
+                          src={entry.getIn(['data', 'main', 'image3', '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>
+                <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>
-              <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>
+    </section>
+  )
 }
 
-
-CMS.registerPreviewStyle("/styles.css");
-CMS.registerPreviewTemplate("about", AboutPagePreview);
-CMS.registerPreviewTemplate("products", ProductPagePreview);
-CMS.registerPreviewTemplate("blog", BlogPostPreview);
+CMS.registerPreviewStyle('/styles.css')
+CMS.registerPreviewTemplate('about', AboutPagePreview)
+CMS.registerPreviewTemplate('products', ProductPagePreview)
+CMS.registerPreviewTemplate('blog', BlogPostPreview)
diff --git a/cms/webpack.config.js b/cms/webpack.config.js
index c0b28e3..7b34a8a 100644
--- a/cms/webpack.config.js
+++ b/cms/webpack.config.js
@@ -1,11 +1,11 @@
 // This webpack config is used to compile the JS for the CMS
-const path = require('path');
+const path = require('path')
 
 module.exports = {
   entry: './cms.js',
   output: {
     filename: 'cms.bundle.js',
-    path: path.resolve(__dirname, '../static/admin/')
+    path: path.resolve(__dirname, '../static/admin/'),
   },
   module: {
     rules: [
@@ -13,17 +13,17 @@ module.exports = {
         test: /\.js$/,
         exclude: /node_modules/,
         use: {
-          loader: "babel-loader",
+          loader: 'babel-loader',
           options: {
-            presets: ["babel-preset-env", "babel-preset-react"]
-          }
-        }
-      }
-    ]
+            presets: ['babel-preset-env', 'babel-preset-react'],
+          },
+        },
+      },
+    ],
   },
   resolve: {
     alias: {
-      "site": "../src/"
-    }
-  }
-};
+      site: '../src/',
+    },
+  },
+}
diff --git a/package.json b/package.json
index 5f4bda1..59dcd8e 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,10 @@
     "build:cms": "cd cms && yarn && npm run build",
     "develop": "gatsby develop",
     "serve": "gatsby serve",
-    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js'",
+    "_format": "prettier --trailing-comma es5 --no-semi --single-quote --write",
+    "format": "npm run format:src & npm run format:cms",
+    "format:src": "npm run _format 'src/**/*.js'",
+    "format:cms": "npm run _format 'cms/**/*.js'",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {