mirror of
https://github.com/kingomarnajjar/gatsby-starter-netlify-cms.git
synced 2026-07-26 06:37:25 +10:00
Update formatting script and format CMS JS
This commit is contained in:
Benaiah Mischenko
parent
e66b70e934
commit
8461fa59db
3 changed files with 128 additions and 97 deletions
196
cms/cms.js
196
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)
|
||||
|
|
|
|||
|
|
@ -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/',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue