Initial page layout

gatsby-node.js

@@ -13,17 +13,19 @@ module.exports.createPages = ({ actions, graphql }) => {
     model.forEach(page => {
         let template;
 
+        page.type = page.type || 'article';
+
         switch (page.type) {
             default:
-                template = path.resolve(`src/components/ArticlePage/ArticlePage.tsx`);
+                template = path.resolve(`src/components/Page/Page.tsx`);
         }
 
         return createPage({
             path: page.url,
             component: template,
             context: {
+                ...page,
                 model,
-                page,
                 langs,
                 lang
             },

package.json

@@ -4,6 +4,7 @@
   "description": "bem.info web-site built with Gatsby",
   "version": "0.1.0",
   "dependencies": {
+    "@bem-react/classname": "1.4.4",
     "gatsby": "2.7.1",
     "gatsby-image": "2.1.1",
     "gatsby-plugin-intl": "0.1.7",

src/components/Context/Context.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+const Context = React.createContext();
+
+export { Context };

src/components/Footer/Footer.tsx

@@ -0,0 +1,17 @@
+import React, { useContext } from 'react'
+import { Link } from 'gatsby'
+import { cn } from '@bem-react/classname'
+
+import { Context } from '../Context/Context'
+
+const cls = cn('Footer');
+
+export function Footer({ className }) {
+  const page = useContext(Context);
+
+  return (
+    <footer className={cls(null, [className])}>
+      FOOTER
+    </footer>
+  )
+}

src/components/Header/Header.tsx

@@ -1,33 +1,16 @@
-import { Link } from "gatsby"
-import React from "react"
+import React, { useContext } from 'react'
+import { cn } from '@bem-react/classname'
 
-const Header = ({ siteTitle }) => (
-  <header
-    style={{
-      background: `rebeccapurple`,
-      marginBottom: `1.45rem`,
-    }}
-  >
-    <div
-      style={{
-        margin: `0 auto`,
-        maxWidth: 960,
-        padding: `1.45rem 1.0875rem`,
-      }}
-    >
-      <h1 style={{ margin: 0 }}>
-        <Link
-          to="/"
-          style={{
-            color: `white`,
-            textDecoration: `none`,
-          }}
-        >
-          {siteTitle}
-        </Link>
-      </h1>
-    </div>
-  </header>
-)
+import { Context } from '../Context/Context'
 
-export default Header
+const cls = cn('Header');
+
+export function Header({ className }) {
+  const page = useContext(Context);
+
+  return (
+    <header className={cls(null, [className])}>
+      {page.title}
+    </header>
+  )
+}