Introduced Server Side Rendering for Cloud Pages based on React

src/components/App.js

@@ -0,0 +1,31 @@
+const React = require('react')
+const Menu = require('./Menu')
+const Footer = require('./Footer')
+
+const App = ({children, menu}) => (
+	<div className="body-wrapper theme-default">
+		<header>
+			<div className="navigation">
+				<div className="navigation__body">
+					<Menu items={menu.items}/>
+				</div>
+			</div>
+		</header>
+
+		<main className="body-wrapper__content">
+			<section className="content content_thin content--padding-top--menu">
+				<div className="cloud-page__body">
+					{children}
+				</div>
+			</section>
+		</main>
+
+		<Footer showAuthor={false}
+				address="г. Шлиссельбург ул. 18 января д. 3"
+				telephone="+7 (81362) 76-312"
+				email="hudozka@gmail.com"
+		/>
+	</div>
+)
+
+module.exports = App

src/components/Footer.js

@@ -0,0 +1,31 @@
+const React = require('react')
+
+const mailto = email => `mailto:${email}`
+
+const Footer = ({children, address, telephone, email, showAuthor}) => (
+	<footer>
+		<div className="contacts">
+			<div>
+				<h4>Контактная информация</h4>
+				<p>Адрес: {address}</p>
+				<p>Телефон: {telephone}</p>
+				<p>Почта: <a href={mailto(email)}>{email}</a></p>
+				<p>Вконтакте: <a href="https://vk.com/shlisselburghudozka">shlisselburghudozka</a></p>
+				<p>Инстаграм: <a href="https://www.instagram.com/hudozka/">hudozka</a></p>
+			</div>
+		</div>
+
+		<div className="copyright">
+			<span>©&nbsp;2012—2017 Шлиссельбургская детская художественная школа</span>
+			{!showAuthor ? null : (
+				<span>Разработка и поддержка сайта —
+					<a href="http://tmshv.ru?utm_source=artshburg&utm_medium=developer&utm_campaign=tmshv_ru">
+						www.tmshv.ru
+					</a>
+				</span>
+			)}
+		</div>
+	</footer>
+)
+
+module.exports = Footer

src/components/Menu.js

@@ -0,0 +1,39 @@
+const React = require('react')
+
+const hasSubmenu = item => !!item.items
+const doDrawSubmenu = item => false //item.active && hasSubmenu(item)
+
+const selectedClassName = active => active
+	? 'selected'
+	: ''
+
+const MenuItem = ({active, text, url}) => (active
+		? <span>{text}</span>
+		: <a href={url}>{text}</a>
+)
+
+const Menu = ({items}) => {
+	const content = items.map((item, index) => (
+		<li key={index} className={`${item.color} ${selectedClassName(item.active)}`}>
+			<MenuItem {...item}/>
+			{!doDrawSubmenu(item) ? null :
+				<Submenu key={index} items={item.items}/>
+			}
+		</li>
+	))
+	return (
+		<menu className="main-menu">{content}</menu>
+	)
+}
+
+const Submenu = ({items}) => (
+	<menu className="main-menu__submenu">
+		{items.map((item, index) => (
+			<li key={index} className={`${item.color} ${selectedClassName(item.active)}`}>
+				<MenuItem {...item}/>
+			</li>
+		))}
+	</menu>
+)
+
+module.exports = Menu