mirror of
https://github.com/kingomarnajjar/gatsby-starter-netlify-cms.git
synced 2026-07-25 22:27:24 +10:00
Integrate CMS build system and create initial preview templates
This commit is contained in:
Benaiah Mischenko
parent
567d2444c2
commit
e66b70e934
7 changed files with 4282 additions and 3 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -4,5 +4,6 @@ node_modules
|
|||
.cache/
|
||||
# Build directory
|
||||
public/
|
||||
static/admin/*.bundle.*
|
||||
.DS_Store
|
||||
yarn-error.log
|
||||
|
|
|
|||
138
cms/cms.js
Normal file
138
cms/cms.js
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
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';
|
||||
|
||||
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>
|
||||
|
||||
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>
|
||||
|
||||
const ProductPagePreview = ({ entry, widgetFor, getAsset }) => {
|
||||
|
||||
const entryBlurbs = entry.getIn(["data", "intro", "blurbs"]);
|
||||
const blurbs = entryBlurbs ? entryBlurbs.toJS() : [];
|
||||
|
||||
const entryTestimonials = entry.getIn(["data", "testimonials"]);
|
||||
const testimonials = entryTestimonials ? entryTestimonials.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"
|
||||
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>
|
||||
}
|
||||
|
||||
|
||||
CMS.registerPreviewStyle("/styles.css");
|
||||
CMS.registerPreviewTemplate("about", AboutPagePreview);
|
||||
CMS.registerPreviewTemplate("products", ProductPagePreview);
|
||||
CMS.registerPreviewTemplate("blog", BlogPostPreview);
|
||||
13
cms/package.json
Normal file
13
cms/package.json
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"scripts": {
|
||||
"build": "webpack --config webpack.config.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-loader": "^7.1.2",
|
||||
"babel-preset-env": "^1.6.1",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"netlify-cms": "^0.7.6",
|
||||
"webpack": "^3.10.0"
|
||||
}
|
||||
}
|
||||
29
cms/webpack.config.js
Normal file
29
cms/webpack.config.js
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
// This webpack config is used to compile the JS for the CMS
|
||||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
entry: './cms.js',
|
||||
output: {
|
||||
filename: 'cms.bundle.js',
|
||||
path: path.resolve(__dirname, '../static/admin/')
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: "babel-loader",
|
||||
options: {
|
||||
presets: ["babel-preset-env", "babel-preset-react"]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
"site": "../src/"
|
||||
}
|
||||
}
|
||||
};
|
||||
4095
cms/yarn.lock
Normal file
4095
cms/yarn.lock
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -20,8 +20,11 @@
|
|||
"license": "MIT",
|
||||
"main": "n/a",
|
||||
"scripts": {
|
||||
"build": "gatsby build",
|
||||
"build": "npm run build:cms && npm run build:site",
|
||||
"build:site": "gatsby build",
|
||||
"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'",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@
|
|||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Content Manager</title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/netlify-cms@^0.7.0/dist/cms.css" />
|
||||
<link rel="stylesheet" href="https://unpkg.com/netlify-cms@^0.7.6/dist/cms.css" />
|
||||
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://unpkg.com/netlify-cms@^0.7.0/dist/cms.js"></script>
|
||||
<script src="/admin/cms.bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue