Merge pull request #4 from component-driven/feat-slide-bh

Support background image for Primary and Secondary slides

Author: okonet

examples/example.mdx

@@ -8,22 +8,19 @@ export const theme = { ...myTheme };
 
 </Footer>
 
-<Cover
-	title="Deck Name"
-	author="Andrey Okonetchnikov"
-/>
+<Cover title="Deck Name" author="Andrey Okonetchnikov" />
 
 ---
 
-<Primary>
+<Primary imgSrc="//source.unsplash.com/-K6JMRMj4x4/2560x1920" sx={{ backgroundBlendMode: "multiply" }}>
 
 # Primary slide
 
 </Primary>
 
 ---
 
-<Secondary>
+<Secondary imgSrc={require("./assets/colorsnapper.png")}>
 
 ## Secondary slide
 
@@ -72,22 +69,21 @@ This is paragraph with `inline` code
 
 ```jsx
 function Code({ children, language, inline = false }) {
-	if (typeof children !== "string") {
-		return (
-			<pre style={{ color: "firebrick" }}>
-				Code: `children` must be a string
-			</pre>
-		);
-	}
-	return (
-		<Prism {...codeTheme} useInlineStyles language={language}>
-			{children.replace(/\t/, "  ")}
-		</Prism>
-	);
+  if (typeof children !== "string") {
+    return (
+      <pre style={{ color: "firebrick" }}>
+        Code: `children` must be a string
+      </pre>
+    );
+  }
+  return (
+    <Prism {...codeTheme} useInlineStyles language={language}>
+      {children.replace(/\t/, "  ")}
+    </Prism>
+  );
 }
 ```
 
-
 </SplitTitle>
 <ThatGuy />
 
@@ -109,11 +105,11 @@ function Code({ children, language, inline = false }) {
 
 ---
 
-<Code language="jsx">{require('raw-loader!./assets/codeExample.txt')}</Code>
+<Code language="jsx">{require("raw-loader!./assets/codeExample.txt")}</Code>
 
 ---
 
-<LiveCode code={require('raw-loader!./assets/codeExample.txt')} />
+<LiveCode code={require("raw-loader!./assets/codeExample.txt")} />
 
 ---
 
@@ -122,9 +118,9 @@ function Code({ children, language, inline = false }) {
 ---
 
 <Figure
-    src={require('./assets/component-driven.svg')}
-    alt="Component-driven Logo"
-    caption={
-        <a href="https://component-driven.io">https://component-driven.io</a>
-    }
+  src={require("./assets/component-driven.svg")}
+  alt="Component-driven Logo"
+  caption={
+    <a href="https://component-driven.io">https://component-driven.io</a>
+  }
 />

src/layouts/Primary.jsx

@@ -1,4 +1,18 @@
-import React from 'react';
-import { Invert } from 'mdx-deck';
+import React from "react";
+import {Invert} from "mdx-deck";
 
-export default props => <Invert bg="primary" {...props} />;
+export default ({ children, imgSrc, sx, ...props }) => (
+  <Invert
+    sx={{
+      backgroundColor: "primary",
+      backgroundSize: "cover",
+      backgroundImage: `url(${imgSrc})`,
+      backgroundPosition: "center",
+      backgroundBlendMode: "multiply",
+      ...sx,
+    }}
+    {...props}
+  >
+    {children}
+  </Invert>
+);

src/layouts/Secondary.jsx

@@ -1,6 +1,13 @@
 import React from "react";
-import { Color } from "mdx-deck";
+import {Invert} from "mdx-deck";
 
-export default (props) => (
-	<Color bg="secondary" color="background" {...props} />
-);
+export default ({children, imgSrc, sx,...props}) => <Invert sx={{
+	backgroundColor: "secondary",
+	backgroundSize: "cover",
+	backgroundImage: `url(${imgSrc})`,
+	backgroundPosition: "center",
+	backgroundBlendMode: "multiply",
+	...sx,
+}} {...props}>
+	{children}
+</Invert>;