add cms preview templates

Shawn Erquhart committed Aug 30, 2018

commit 5efd2f4faec9cd71e16d0577a1a1f65b3d39fb41

Showing 3 changed files with 102 additions and 1 deletions

source/admin/config.yml +0 -1

@@	@@ -1,6 +1,5 @@
	backend:
	name: git-gateway
-	branch: master

	media_folder: source/images/uploads
	public_folder: /images/uploads

source/admin/index.html +7 -0

@@	@@ -9,5 +9,12 @@
	</head>
	<body>
	<script script src="https://unpkg.com/netlify-cms@^2.0.6/dist/netlify-cms.js" type="text/javascript"></script>
+	<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+	<script src="https://unpkg.com/dayjs@^1.7.5/dayjs.min.js"></script>
+	<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+	<script src="previews.js" type="text/babel"></script>
+	<script>
+	CMS.registerPreviewStyle('/stylesheets/all.css');
+	</script>
	</body>
	</html>

source/admin/previews.js +95 -0

@@	@@ -0,0 +1,95 @@
+	const BlogPreview = ({ entry, widgetFor }) => {
+	const data = entry.get('data').toJS()
+	const date = dayjs(data.date).format('DD-MM-YY')
+	return (
+	<div className="news-detail">
+	<div className="container">
+	<div className="row">
+	<div className="title">
+	<span className="date">{date}</span>
+	<h1>{data.title}</h1>
+	</div>
+	</div>
+	<div className="row">
+	<div className="image">
+	<img src={data.image}/>
+	</div>
+	</div>
+	<div className="row content">{widgetFor('body')}</div>
+	</div>
+	</div>
+	)
+	}
+
+	const ProductPreview = ({ entry, widgetFor }) => {
+	const data = entry.get('data').toJS()
+	return (
+	<div className="product-detail">
+	<div className="image" style={{ backgroundImage: `url('${data.image}')` }}></div>
+	<div className="content">
+	<div className="meta">
+	<h1>{data.title}</h1>
+	<div className="weight">
+	<span>{`${data.weight}kg`}</span>
+	</div>
+	<div className="price">
+	<span>{`€${data.price}`}</span>
+	</div>
+	</div>
+	<div className="body">{widgetFor('body')}</div>
+	</div>
+	</div>
+	)
+	}
+
+	const HomePreview = ({ entry, widgetFor }) => {
+	const data = entry.get('data').toJS()
+	return (
+	<div>
+	<section className="hero" style={{ backgroundImage: `url('${data.hero.image}')` }}>
+	<div className="caption">
+	<div className="row">
+	<h1>{data.hero.title}</h1>
+	</div>
+	</div>
+	</section>
+	<section className="homepage-story">
+	<div className="container">
+	<div className="row">
+	<div className="story-content">{widgetFor('story')}</div>
+	</div>
+	</div>
+	</section>
+	</div>
+	)
+	}
+
+	const NavigationPreview = ({ entry }) => {
+	const data = entry.get('data').toJS()
+	return (
+	<header className="header-primary">
+	<div className="logo">
+	<a href="/">
+	<img src="/images/logo.svg" alt="Kaldi"/>
+	</a>
+	</div>
+	<a className="nav-button">
+	<img src="/images/nav-open.svg" className="open"/>
+	</a>
+	<nav className="navigation" style={{ paddingRight: '40px' }}>
+	<ul>
+	{!data.nav_items ? null : data.nav_items.map((item, idx) => (
+	<li key={idx}>
+	<a href={item.path}>{item.label}</a>
+	</li>
+	))}
+	</ul>
+	</nav>
+	</header>
+	)
+	}
+
+	CMS.registerPreviewTemplate('blog', BlogPreview)
+	CMS.registerPreviewTemplate('product', ProductPreview)
+	CMS.registerPreviewTemplate('home', HomePreview)
+	CMS.registerPreviewTemplate('navigation', NavigationPreview)