props- #89

content/lance-lotta/1-opening-image/index.md

@@ -0,0 +1,27 @@
+It's a sunny summer day around lunch time in London Bridge's bustling neighbourhood. Elli and Lance-Lotta are playing with their two rodents Milli and Tilly. Milli and Tilly loves finding their way through the maze of tunnels the girls build for them. The girls pretend Tilly is a pirate captain hunting their enemy's hidden treasure.
+
+"Oi! Elli did you hear that?!"
+"Hear what?"
+"That crash downstairs."
+"No and it was surely from the street."
+"Lets hide just in case. Uncle Kay won't be home any time soon an he always says hide if...."
+"Okay! Okay, fine."
+
+They hide behind a hidden door and wouldn't you know it, their bedroom door creaks open. Lance-Lotta grabs Ellis shoulder and covers her mouth just as  Milli and Tilly squak in terror. The door slams shut. Lance-Lotta is outta the secret room, grabs her sturdy wood practice cutlass and jogs towards the staris. Elli is right behind with her wood sword. An unfamiliar and deep voice form downstairs says:
+
+"MY, my, my. Breaking into my home in broad daylight."
+"You don't live her fat boy. Step away from the door or I'll break your fat neck." Says a sly drawling voice.
+
+"Put my pets down and I'll let you out." Says the deep voice. The girls are racing down the stairs three steps at a time. They see a compact short hooded figure with his cane raised blocking the open dor to the street. A tall thin blackclad man with a black mask over his mouth and nose is holding the cage with Milli and Tilly.
+
+"Wait!" Shouts Elli, but Lance-Lotta smacks the hand holding the cage with her cutlass. Blackmask whips around with a long wickedly curved black dagger going for Lance-Lotta. "Crack!" Lance-Lotta's cuttlass hits the daggerhand sending the dagger flying. "!" Elli's wood sword hits his shin. Elli grabs the cage.
+
+"Eaaaasy! Easy now young ladies." The compact deep voiced man is somehow between the girls and the would-be-petnapper poking him towards the door with his gnarly cane. "Eaaaasy now. One cracked hand is enough punishment for burglary. Or maybe you'll disagree punk? Huh! You need a dancing lesson also?"
+
+"You'll regret this all of you. You have NO idea who your messing ....Gah!" He stumbles towards the door after a wack behind the knee from Lance-Lotta's cuttlass, she raises her cuttlass again, but Blackmask leaves.
+
+"That young ladies was RASH. No doubt you'll regret those wacks dearly. And soon. He would not be here in the middle of the day if not under orders from a bad, bad and powerful person. Do you have any quarrels with somebody powerful maybe?"
+
+"You COULD say that...."
+
+

src/components/site-header.js

@@ -4,15 +4,15 @@ import { AppBar, Toolbar, Button, Container } from "@mui/material";
 
 import { Logo } from "./logo";
 
-export const SiteHeader = ({ children }) => {
+export const SiteHeader = ({ children, tagline }) => {
   return (
     <AppBar sx={{ pt: 1, pb: 0.5 }}>
       <Container maxWidth="xl">
         <Toolbar disableGutters>
           <Button component={Link} to="/" sx={{ ml: -1.5 }}>
             <Logo height="2.5rem" /> -Skill-builders
           </Button>
-          Ola and Lillian(7 🏴‍☠️)
+          {tagline}
           {children}
         </Toolbar>
       </Container>

src/components/wes-of-the-day/App.js

@@ -0,0 +1,19 @@
+import React from "react";
+class App extends React.Component {
+  state = {
+    fishes: {},
+    order: {},
+  };
+  addFish = (fish) => {
+    console.log("adding a fish");
+  };
+  render() {
+    return (
+      <div className="wes-of-the-day">
+        <div className="menu">
+          <h2 tagline="Fresh React Shop" />
+        </div>
+      </div>
+    );
+  }
+}

src/pages/404.js

@@ -1,12 +1,13 @@
 import React from "react";
 import { Link } from "gatsby";
+import { SiteHeader } from "../components/site-header";
 
 const NotFoundPage = () => {
   return (
     <main>
-      <header>
+      <SiteHeader tagline="404">
         <h1>Page not found</h1>
-      </header>
+      </SiteHeader>
       <p>
         Sorry{" "}
         <span role="img" aria-label="Pensive emoji">

src/templates/pageTemplate.js

@@ -5,15 +5,19 @@ import {
   Button,
   Container,
   Typography,
+  ImageList,
+  ImageListItem,
   Link as MuiLink,
 } from "@mui/material";
+import { PlayArrowRounded as PlayIcon } from "@mui/icons-material";
 
 import { Prose } from "../components/prose";
 import { SiteHeader } from "../components/site-header";
 import { NewsletterForm } from "../components/newsletter-form";
-// import { SiteFooter } from "../components/site-footer";
+import { SiteFooter } from "../components/site-footer";
+import { GatsbyImage, getImage } from "gatsby-plugin-image";
 
-export default function PageTemplate({ data = {} }) {
+export default function PageTemplate({ data = {}, ...props }) {
   const { frontmatter, html } = data.markdownRemark || {};
   const { title, sections } = frontmatter || {};
 
@@ -44,13 +48,18 @@ export default function PageTemplate({ data = {} }) {
             </Container>
           </Box>
 
-          <Prose html={html} />
+          <Container maxWidth="content">
+            <Prose html={html} />
+          </Container>
 
           {(sections || []).map((section) => {
             const { title, subtitle, body } = section || {};
+
+            const { videos } = section || {};
             const { html } = body?.childMarkdownRemark || {};
             const { path, label } = section.cta || {};
             const { form } = section || {};
+
             return (
               <Box component="section" sx={{ py: 6 }}>
                 <Container maxWidth="content">
@@ -81,6 +90,7 @@ export default function PageTemplate({ data = {} }) {
             );
           })}
         </main>
+        <SiteFooter sx={{ pt: 12, pb: 4 }} />
       </div>
     </>
   );