Skip to content

Commit e66b70e

Browse files
BenaiahBenaiah
committed
Integrate CMS build system and create initial preview templates
1 parent 567d244 commit e66b70e

File tree

7 files changed

+4282
-3
lines changed

7 files changed

+4282
-3
lines changed

Diff for: ‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,6 @@ node_modules
44
.cache/
55
# Build directory
66
public/
7+
static/admin/*.bundle.*
78
.DS_Store
89
yarn-error.log

Diff for: ‎cms/cms.js

+138
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
import React from "react";
2+
import CMS from "netlify-cms";
3+
4+
import Features from 'site/components/Features';
5+
import Testimonials from 'site/components/Testimonials';
6+
import Pricing from 'site/components/Pricing';
7+
8+
const AboutPagePreview = ({ entry, widgetFor }) =>
9+
<section className="section section--gradient">
10+
<div className="container">
11+
<div className="columns">
12+
<div className="column is-10 is-offset-1">
13+
<div className="section">
14+
<h2 className="title is-size-3 has-text-weight-bold is-bold-light">
15+
{entry.getIn(["data", "title"])}
16+
</h2>
17+
<div className="content">{widgetFor('body')}</div>
18+
</div>
19+
</div>
20+
</div>
21+
</div>
22+
</section>
23+
24+
const BlogPostPreview = ({ entry, widgetFor }) =>
25+
<section className="section">
26+
<div className="container content">
27+
<div className="columns">
28+
<div className="column is-10 is-offset-1">
29+
<h1 className="title is-size-2 has-text-weight-bold is-bold-light">
30+
{entry.getIn(["data", "title"])}
31+
</h1>
32+
<p>{entry.getIn(["data", "description"])}</p>
33+
<div>{widgetFor("body")}</div>
34+
</div>
35+
</div>
36+
</div>
37+
</section>
38+
39+
const ProductPagePreview = ({ entry, widgetFor, getAsset }) => {
40+
41+
const entryBlurbs = entry.getIn(["data", "intro", "blurbs"]);
42+
const blurbs = entryBlurbs ? entryBlurbs.toJS() : [];
43+
44+
const entryTestimonials = entry.getIn(["data", "testimonials"]);
45+
const testimonials = entryTestimonials ? entryTestimonials.toJS() : [];
46+
47+
const entryPricingPlans = entry.getIn(["data", "pricing", "plans"]);
48+
const pricingPlans = entryPricingPlans ? entryPricingPlans.toJS() : [];
49+
50+
return <section className="section section--gradient">
51+
<div className="container">
52+
<div className="section">
53+
<div className="columns">
54+
<div className="column is-10 is-offset-1">
55+
<div className="content">
56+
<div
57+
className="full-width-image-container margin-top-0"
58+
style={{ backgroundImage: `url(${getAsset(entry.getIn(["data", "image"]))})` }}
59+
>
60+
<h2
61+
className="has-text-weight-bold is-size-1"
62+
style={{
63+
boxShadow: '0.5rem 0 0 #f40, -0.5rem 0 0 #f40',
64+
backgroundColor: '#f40',
65+
color: 'white',
66+
padding: '1rem'
67+
}}
68+
>
69+
{entry.getIn(["data", "title"])}
70+
</h2>
71+
</div>
72+
<div className="columns">
73+
<div className="column is-7">
74+
<h3 className="has-text-weight-semibold is-size-2">{entry.getIn(["data", "heading"])}</h3>
75+
<p>{entry.getIn(["data", "description"])}</p>
76+
</div>
77+
</div>
78+
<Features gridItems={blurbs} />
79+
<div className="columns">
80+
<div className="column is-7">
81+
<h3 className="has-text-weight-semibold is-size-3">{entry.getIn(["data", "main", "heading"])}</h3>
82+
<p>{entry.getIn(["main", "description"])}</p>
83+
</div>
84+
</div>
85+
<div className="tile is-ancestor">
86+
<div className="tile is-vertical">
87+
<div className="tile">
88+
<div className="tile is-parent is-vertical">
89+
<article className="tile is-child">
90+
<img
91+
style={{ borderRadius: '5px' }}
92+
src={entry.getIn(["data", "main", "image1", "image"])}
93+
alt=""
94+
/>
95+
</article>
96+
</div>
97+
<div className="tile is-parent">
98+
<article className="tile is-child">
99+
<img
100+
style={{ borderRadius: '5px' }}
101+
src={entry.getIn(["data", "main", "image2", "image"])}
102+
alt=""
103+
/>
104+
</article>
105+
</div>
106+
</div>
107+
<div className="tile is-parent">
108+
<article className="tile is-child">
109+
<img
110+
style={{ borderRadius: '5px' }}
111+
src={entry.getIn(["data", "main", "image3", "image"])}
112+
alt=""
113+
/>
114+
</article>
115+
</div>
116+
</div>
117+
</div>
118+
<Testimonials testimonials={testimonials} />
119+
<div
120+
className="full-width-image-container"
121+
style={{ backgroundImage: `url(${getAsset(entry.getIn(["data", "full_image"]))})` }}
122+
/>
123+
<h2 className="has-text-weight-semibold is-size-2">{entry.getIn(["data", "pricing", "heading"])}</h2>
124+
<p className="is-size-5">{entry.getIn(["data", "pricing", "description"])}</p>
125+
<Pricing data={pricingPlans} />
126+
</div>
127+
</div>
128+
</div>
129+
</div>
130+
</div>
131+
</section>
132+
}
133+
134+
135+
CMS.registerPreviewStyle("/styles.css");
136+
CMS.registerPreviewTemplate("about", AboutPagePreview);
137+
CMS.registerPreviewTemplate("products", ProductPagePreview);
138+
CMS.registerPreviewTemplate("blog", BlogPostPreview);

Diff for: ‎cms/package.json

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"scripts": {
3+
"build": "webpack --config webpack.config.js"
4+
},
5+
"dependencies": {
6+
"babel-core": "^6.26.0",
7+
"babel-loader": "^7.1.2",
8+
"babel-preset-env": "^1.6.1",
9+
"babel-preset-react": "^6.24.1",
10+
"netlify-cms": "^0.7.6",
11+
"webpack": "^3.10.0"
12+
}
13+
}

Diff for: ‎cms/webpack.config.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// This webpack config is used to compile the JS for the CMS
2+
const path = require('path');
3+
4+
module.exports = {
5+
entry: './cms.js',
6+
output: {
7+
filename: 'cms.bundle.js',
8+
path: path.resolve(__dirname, '../static/admin/')
9+
},
10+
module: {
11+
rules: [
12+
{
13+
test: /\.js$/,
14+
exclude: /node_modules/,
15+
use: {
16+
loader: "babel-loader",
17+
options: {
18+
presets: ["babel-preset-env", "babel-preset-react"]
19+
}
20+
}
21+
}
22+
]
23+
},
24+
resolve: {
25+
alias: {
26+
"site": "../src/"
27+
}
28+
}
29+
};

0 commit comments

Comments
 (0)