shape up code demo styles

HtmlDemo.js

@@ -1,31 +1,80 @@
 import React from 'react';
 import {CodeHighlighter} from 'components/atoms';
+import * as demoStyles from './demo.module.css';
 
 const styles = {
-  wrapper: {display: 'flex', flexFlow: 'row wrap'},
-  tab: {display: 'flex', flex: '1', flexFlow: 'column nowrap', margin: 16, maxWidth: '450px'},
+  wrapper: {
+    display: 'flex',
+    flexFlow: 'row wrap',
+    margin: '16px 0',
+    padding: '8px 0',
+    border: '1px solid #2D3748',
+    backgroundColor: '#2D3748',
+    borderRadius: '2px',
+  },
+  tab: {
+    display: 'flex',
+    flex: '1',
+    flexFlow: 'column nowrap',
+    margin: '2px',
+    maxWidth: '380px',
+    minWidth: '380px',
+  },
   label: {
-    border: '1px solid black',
-    borderTopRadius: 2,
-    borderBottom: 'none',
-    padding: 4,
-    margin: 4,
+    width: 'max-content',
+    padding: 6,
+    margin: '0 4px 4px 4px',
+    textTransform: 'uppercase',
+    color: 'rgb(238, 238, 239)',
+    fontWeight: 'bold',
+  },
+  code: {
+    height: 230,
   },
   output: {
-    height: '100%',
+    height: 230,
+    border: 'none',
+    backgroundColor: 'rgb(255,255,255)',
+    borderRadius: '0.3em',
   },
 };
 
-const HtmlDemo = ({srcString, highlightLines}) => {
+const codeBlocks = nodes =>
+  nodes
+    .filter(node => node.props.originalType === 'pre')
+    .map(pre => pre.props.children)
+    .filter(codeEl => codeEl.props.mdxType === 'code');
+
+const makeSrcString = nodes => {
+  return codeBlocks(nodes)
+    .map(block => {
+      if (block.props.className === 'language-js') {
+        return `<script>\n${block.props.children}\n</script>`;
+      } else if (block.props.className === 'language-css') {
+        return `<style>\n${block.props.children}\n</style>`;
+      } else if (block.props.className === 'language-html') {
+        return block.props.children;
+      } else {
+        throw new Error('JsDemo code blocks must be html, css, or js');
+      }
+    })
+    .join('\n\n');
+};
+
+const HtmlDemo = ({children, srcString}) => {
+  const src = srcString || makeSrcString(React.Children.toArray(children));
+  const display = children || <CodeHighlighter>{src}</CodeHighlighter>;
   return (
     <div style={styles.wrapper}>
       <div style={styles.tab}>
         <div style={styles.label}>Code</div>
-        <CodeHighlighter>{srcString}</CodeHighlighter>
+        <div className={demoStyles.code} style={styles.code}>
+          {display}
+        </div>
       </div>
       <div style={styles.tab}>
         <div style={styles.label}>Result</div>
-        <iframe style={styles.output} srcDoc={srcString}></iframe>
+        <iframe style={styles.output} srcDoc={src}></iframe>
       </div>
     </div>
   );

MagicDemo.js

@@ -1,18 +1,6 @@
 import React, {useState} from 'react';
 import HtmlDemo from './HtmlDemo';
 
-const styles = {
-  wrapper: {display: 'flex', flexFlow: 'row wrap'},
-  tab: {display: 'flex', flex: '1', flexFlow: 'column nowrap', margin: 16, maxWidth: '450px'},
-  label: {
-    border: '1px solid black',
-    borderTopRadius: 2,
-    borderBottom: 'none',
-    padding: 4,
-    margin: 4,
-  },
-};
-
 const MagicDemo = ({input, template, initialState = {}}) => {
   const [inputState, setInputState] = useState(initialState);
 

T002-HTML-syntax/p000-demos.mdx

@@ -0,0 +1,109 @@
+---
+title: 'Demo Components'
+slug: 'demos'
+contentType: 'TextContent'
+---
+
+import HtmlDemo from '../HtmlDemo';
+import MagicDemo from '../MagicDemo';
+import JsDemo from '../JsDemo';
+
+<HtmlDemo>
+
+```html
+<p>This tender treat is a perfect use for any old bananas you have sitting on the counter.</p>
+```
+
+</HtmlDemo>
+
+<HtmlDemo>
+
+```html
+<h1>Easy Chocolate Chip Banana Bread</h1>
+<ul>
+  <li>10 minutes prep time</li>
+  <li>50 minutes bake time</li>
+  <li>1 hr total</li>
+  <li>Makes 6 servings</li>
+</ul>
+<img src="./banana-bread.jpeg" />
+```
+
+</HtmlDemo>
+
+<HtmlDemo>
+
+```html
+<ol>
+  <li>Preheat oven to 350˚F (180˚C).</li>
+  <li>
+    In a bowl, add the bananas and mash until smooth. Add in the melted butter and stir until well
+    combined.
+  </li>
+  <li>
+    Add the sugar, egg, vanilla, baking soda, salt, and flour, and stir until the batter is smooth.
+  </li>
+</ol>
+```
+
+</HtmlDemo>
+
+<MagicDemo
+  initialState={{title: 'Intro to Recycling', tagline: 'Learn about recycling'}}
+  input={(state, updateState) => (
+    <>
+      Title:{' '}
+      <input value={state.title} onChange={e => updateState({...state, title: e.target.value})} />
+      Tagline: <input
+        value={state.tagline}
+        onChange={e => updateState({...state, tagline: e.target.value})}
+      />
+    </>
+  )}
+  template={state => `<div>
+  <h1>${state.title}</h1>
+  <h2>${state.tagline}</h2>
+</div>`}
+/>
+
+<JsDemo defer>
+
+```js
+alert('Hi there!');
+```
+
+</JsDemo>
+
+<JsDemo>
+
+```js
+console.log('5 * 5 is ...');
+console.log(5 * 5);
+```
+
+</JsDemo>
+
+<JsDemo defer>
+
+```html
+<button>Click, and the monster will eat a list item</button>
+<ul>
+  <li>A crunchy carrot</li>
+  <li>A tasty tangerine</li>
+  <li>A sweet strawberry</li>
+  <li>A perfect peach</li>
+</ul>
+```
+
+```js
+let button = document.querySelector('button');
+let indexToEat = 0;
+button.addEventListener('click', function () {
+  let items = document.querySelectorAll('li');
+  let snack = items[indexToEat];
+  snack.innerText = 'The monster ate it!';
+  indexToEat = indexToEat + 1;
+});
+```
+
+</JsDemo>

T002-HTML-syntax/p001-Intro.mdx

@@ -120,15 +120,15 @@ closing tags the `ul` element, they appear inside the same list.
 HTML elements sometimes need more info than just what kind of element they are. For example, the
 browser needs to know the `src` of the image so that it knows what to show.
 
-Attributes look like `src="./banana-bread.jpg"` or `height="100px"`. They usually have a name, an
+Attributes look like `src="./banana-bread.jpeg"` or `height="100px"`. They usually have a name, an
 equals sign (`=`) then a value in quotes.
 
 Attributes go after the tag name, but before the closing angle bracket of the opening tag.
 
 Elements can have lots of attributes, or just one. There's a space between each one.
 
 ```html
-<img src="./banana-bread.jpg" height="100px" width="300px" />
+<img src="./banana-bread.jpeg" height="100px" width="300px" />
 ```
 
 ## Nesting Elements
@@ -150,7 +150,7 @@ The nesting can go as many levels deep as we want:
 <ul>
   <li>
     <p>
-      <img src="./banana-bread.jpg" />
+      <img src="./banana-bread.jpeg" />
     </p>
   </li>
 </ul>

T002-HTML-syntax/p003-html-recipe.mdx

@@ -52,7 +52,7 @@ If it's helpful, copy those parts of the recipe into a separate document to work
 
 Here's the starter code for you to fork:
 
-<Exercise contentSrc="team/makeschool2/HTML-Recipe-Site-Starter" project />
+<Exercise contentSrc="team/makeschool2/web-foundations-HTML-Recipe-Site-Starter" project />
 
 ### About Repl.it
 

T003-CSS-syntax/p004-mission-statement.mdx

@@ -37,7 +37,10 @@ Here's some example mission statement pages from other MakeSchool staff and stud
 
 ## Starter Code
 
-<Exercise project contentSrc="team/makeschool2/CSS-Mission-Statement-Starter" />
+<Exercise
+  project
+  contentSrc="team/makeschool2/https://replit.com/@makeschool2/web-foundations-CSS-Mission-Statement-Starter"
+/>
 
 ## Design tips
 

demo.module.css

@@ -0,0 +1,6 @@
+.code pre,
+.code div {
+  height: 100%;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}