Code Pane!

examples/js/test-js.js

@@ -2,30 +2,76 @@ import React from 'react';
 import Deck from '../../src/components/deck.js';
 import Slide from '../../src/components/slide.js';
 import SlideElementWrapper from '../../src/components/slide-element-wrapper';
+import CodePane from '../../src/components/code-pane';
+
+const reactJSCodeBlock = `
+export default function CodePane(props) {
+  return (
+    <Highlight
+      {...defaultProps}
+      code={props.children}
+      language={props.language}
+      theme={theme}
+    >
+      {({ className, style, tokens, getLineProps, getTokenProps }) => (
+        <pre className={className} style={style}>
+          {tokens.map((line, i) => (
+            <div key={i} {...getLineProps({ line, key: i })}>
+              {line.map((token, key) => (
+                <span key={key} {...getTokenProps({ token, key })} />
+              ))}
+            </div>
+          ))}
+        </pre>
+      )}
+    </Highlight>
+  );
+}
+`;
+
+const cppCodeBlock = `
+#include <iostream>
+
+int main()
+{
+  auto curried_add = [](int x) -> function<int(int)> {
+    return [=](int y) { return x + y; };
+  };
+
+  auto answer = curried_add(7)(8);
+  std::cout << answer << std::endl;
+
+  return 0;
+}
+`;
 
 const TestJs = () => (
-  <Deck loop={true}>
-    <Slide>
-      <div>Hi</div>
-      <b>b</b>
+  <Deck>
+    <Slide slideNum={1}>
+      <CodePane language="jsx">{reactJSCodeBlock}</CodePane>
+    </Slide>
+    <Slide slideNum={2}>
+      <CodePane googleFont="Space Mono" fontSize={20} language="cpp">
+        {cppCodeBlock}
+      </CodePane>
     </Slide>
-    <Slide>
+    <Slide slideNum={3}>
       <p> Slide 3! </p>
-      <SlideElementWrapper elementNum={0}>
+      <SlideElementWrapper elementNum={1}>
         <div>{`Hey, just one "animated" slide element here`}</div>
       </SlideElementWrapper>
     </Slide>
-    <Slide>
+    <Slide slideNum={4}>
       <p>{`I'm a static slide element that should always show`}</p>
       <p>{`This means that we don't need a SlideElementWrapper`}</p>
-      <SlideElementWrapper elementNum={0}>
-        <p slide-element="true"> ZERO Slide 4 x 3! </p>
-      </SlideElementWrapper>
       <SlideElementWrapper elementNum={1}>
-        <p slide-element="true"> ONE Slide 4 x 3! </p>
+        <p> ZERO Slide 4 x 3! </p>
       </SlideElementWrapper>
       <SlideElementWrapper elementNum={2}>
-        <p slide-element="true"> TWO Slide 4 x 3! </p>
+        <p> ONE Slide 4 x 3! </p>
+      </SlideElementWrapper>
+      <SlideElementWrapper elementNum={3}>
+        <p> TWO Slide 4 x 3! </p>
       </SlideElementWrapper>
       <p>{`I'm also a static non-animated "slide element"!`}</p>
     </Slide>

index.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { render } from 'react-dom';
 
 // START: test components to try rendering:
-import TestMDX from './examples/mdx/test-mdx';
-// import TestJs from './examples/JS/TestJS.js';
+// import TestMDX from './examples/mdx/test-mdx';
+import TestJs from './examples/js/test-js';
 // END: test components to try rendering
 
 /**
@@ -13,4 +13,4 @@ import TestMDX from './examples/mdx/test-mdx';
  * to hot-reload with new contents.
  */
 
-render(<TestMDX />, document.getElementById('root'));
+render(<TestJs />, document.getElementById('root'));

package.json

@@ -72,8 +72,10 @@
     "history": "^4.9.0",
     "loader-utils": "^1.2.3",
     "normalize-newline": "^3.0.0",
+    "prism-react-renderer": "^0.1.7",
     "query-string": "^6.8.2",
     "react-spring": "^8.0.25",
+    "react-typography": "^0.16.19",
     "styled-components": "^4.3.1",
     "wonka": "^3.2.0"
   }

src/components/code-pane.js

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import Highlight, { defaultProps } from 'prism-react-renderer';
+import propTypes from 'prop-types';
+import theme from 'prism-react-renderer/themes/vsDark';
+import { GoogleFont } from 'react-typography';
+
+export default function CodePane(props) {
+  const typography = React.useMemo(
+    () => ({
+      options: {
+        googleFonts: [
+          {
+            name: props.googleFont,
+            styles: ['400']
+          }
+        ]
+      }
+    }),
+    [props.googleFont]
+  );
+  const preStyles = React.useMemo(
+    () => ({
+      fontFamily: `"${props.googleFont}", monospace`,
+      fontSize: props.fontSize,
+      margin: 0,
+      padding: '0 1em'
+    }),
+    [props.googleFont, props.fontSize]
+  );
+  return (
+    <>
+      <GoogleFont typography={typography} />
+      <Highlight
+        {...defaultProps}
+        code={props.children}
+        language={props.language}
+        theme={theme}
+      >
+        {({ className, style, tokens, getLineProps, getTokenProps }) => (
+          <pre className={className} style={{ ...style, ...preStyles }}>
+            {tokens.map((line, i) => (
+              <div key={i} {...getLineProps({ line, key: i })}>
+                {line.map((token, key) => (
+                  <span key={key} {...getTokenProps({ token, key })} />
+                ))}
+              </div>
+            ))}
+          </pre>
+        )}
+      </Highlight>
+    </>
+  );
+}
+
+CodePane.propTypes = {
+  children: propTypes.string.isRequired,
+  fontSize: propTypes.number,
+  googleFont: propTypes.string,
+  language: propTypes.string.isRequired,
+  theme: propTypes.object
+};
+
+CodePane.defaultProps = {
+  language: 'javascript',
+  theme: theme,
+  fontSize: 15,
+  googleFont: 'Fira Code'
+};

src/components/deck.js

@@ -109,6 +109,10 @@ const Deck = ({ children, loop, keyboardControls, ...rest }) => {
     navigateToCurrentUrl();
   }, [navigateToCurrentUrl]);
 
+  React.useLayoutEffect(() => {
+    document.body.style.margin = '0';
+  }, []);
+
   React.useEffect(() => {
     if (!transitionRef.current) {
       return;
@@ -135,14 +139,7 @@ const Deck = ({ children, loop, keyboardControls, ...rest }) => {
   ));
 
   return (
-    <div
-      style={{
-        position: 'relative',
-        height: '50vh',
-        width: '100%',
-        overflowX: 'hidden'
-      }}
-    >
+    <div>
       <DeckContext.Provider
         value={{
           state,

src/components/slide.js

@@ -20,15 +20,21 @@ const Slide = ({ children, slideNum }) => {
     keyboardControls
   );
 
+  const baseSlideStyle = React.useMemo(
+    () => ({
+      height: '100vh',
+      width: '100vw',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      position: 'absolute'
+    }),
+    []
+  );
+
   return (
-    <div
-      style={{
-        backgroundColor: 'lavender',
-        border: '2px solid plum',
-        overflow: 'hidden'
-      }}
-    >
-      <p>{slideNum}</p>
+    <div style={baseSlideStyle}>
       <SlideContext.Provider value={value}>{children}</SlideContext.Provider>
     </div>
   );