From 9ef9381d6f8c21ed29e48bff43188e33da780d07 Mon Sep 17 00:00:00 2001 From: Ola Date: Wed, 8 Feb 2023 07:34:19 +0100 Subject: [PATCH 1/4] props- #89 --- src/components/site-header.js | 4 ++-- src/pages/404.js | 5 +++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/site-header.js b/src/components/site-header.js index 207c1f6..e4b41a4 100644 --- a/src/components/site-header.js +++ b/src/components/site-header.js @@ -4,7 +4,7 @@ import { AppBar, Toolbar, Button, Container } from "@mui/material"; import { Logo } from "./logo"; -export const SiteHeader = ({ children }) => { +export const SiteHeader = ({ children, tagline }) => { return ( @@ -12,7 +12,7 @@ export const SiteHeader = ({ children }) => { - Ola and Lillian(7 🏴‍☠️) + {tagline} {children} diff --git a/src/pages/404.js b/src/pages/404.js index b316cbd..0559ea3 100755 --- a/src/pages/404.js +++ b/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 (
-
+

Page not found

-
+

Sorry{" "} From cf4692967958a0a3a45de8bd74341892b69eb3c9 Mon Sep 17 00:00:00 2001 From: Ola Date: Tue, 21 Feb 2023 09:20:56 +0100 Subject: [PATCH 2/4] lance-lotta --- content/lance-lotta/1-opening-image/index.md | 27 ++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 content/lance-lotta/1-opening-image/index.md diff --git a/content/lance-lotta/1-opening-image/index.md b/content/lance-lotta/1-opening-image/index.md new file mode 100644 index 0000000..9754b0a --- /dev/null +++ b/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...." + + From 1ffe58403591c5e147214d002dd98185237ae6c7 Mon Sep 17 00:00:00 2001 From: Ola Date: Tue, 21 Feb 2023 09:27:03 +0100 Subject: [PATCH 3/4] more practice --- src/components/wes-of-the-day/App.js | 19 ++++++ src/templates/pageTemplate.js | 95 +++++++++++++++++++++++++++- 2 files changed, 111 insertions(+), 3 deletions(-) create mode 100644 src/components/wes-of-the-day/App.js diff --git a/src/components/wes-of-the-day/App.js b/src/components/wes-of-the-day/App.js new file mode 100644 index 0000000..e24b552 --- /dev/null +++ b/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 ( +

+
+

+

+
+ ); + } +} diff --git a/src/templates/pageTemplate.js b/src/templates/pageTemplate.js index 856c4a9..5054faf 100644 --- a/src/templates/pageTemplate.js +++ b/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,20 @@ export default function PageTemplate({ data = {} }) { - + + + {(sections || []).map((section) => { const { title, subtitle, body } = section || {}; + const { image, imageAlt } = section || {}; + const { videos } = section || {}; const { html } = body?.childMarkdownRemark || {}; const { path, label } = section.cta || {}; const { form } = section || {}; + const gatsbyImage = getImage( + image?.childImageSharp?.gatsbyImageData + ); return ( @@ -76,11 +87,66 @@ export default function PageTemplate({ data = {} }) { )} {form === "newsletter" && } + {videos && ( + + {videos.map((video, index, { length }) => { + const { action, childYouTube } = video; + const { title, url } = childYouTube.oEmbed || {}; + const { gatsbyImage } = childYouTube.thumbnail || {}; + return ( + + + + + ); + })} + + )} + + {gatsbyImage && ( + + + + )} ); })}
+ ); @@ -101,10 +167,33 @@ export const query = graphql` html } } + image { + childImageSharp { + gatsbyImageData(width: 500) + } + } + imageAlt cta { path label } + videos { + childYouTube { + oEmbed { + title + url + } + thumbnail { + gatsbyImage( + width: 480 + height: 270 + fit: COVER + cropFocus: CENTER + ) + } + } + action + } } } } From 2c2ee6f7c3d881f21df3cf7c8248fdca70212012 Mon Sep 17 00:00:00 2001 From: Ola Date: Tue, 21 Feb 2023 09:44:34 +0100 Subject: [PATCH 4/4] delete image --- src/templates/pageTemplate.js | 83 +---------------------------------- 1 file changed, 2 insertions(+), 81 deletions(-) diff --git a/src/templates/pageTemplate.js b/src/templates/pageTemplate.js index 5054faf..232caa2 100644 --- a/src/templates/pageTemplate.js +++ b/src/templates/pageTemplate.js @@ -54,14 +54,12 @@ export default function PageTemplate({ data = {}, ...props }) { {(sections || []).map((section) => { const { title, subtitle, body } = section || {}; - const { image, imageAlt } = section || {}; + const { videos } = section || {}; const { html } = body?.childMarkdownRemark || {}; const { path, label } = section.cta || {}; const { form } = section || {}; - const gatsbyImage = getImage( - image?.childImageSharp?.gatsbyImageData - ); + return ( @@ -87,60 +85,6 @@ export default function PageTemplate({ data = {}, ...props }) { )} {form === "newsletter" && } - {videos && ( - - {videos.map((video, index, { length }) => { - const { action, childYouTube } = video; - const { title, url } = childYouTube.oEmbed || {}; - const { gatsbyImage } = childYouTube.thumbnail || {}; - return ( - - - - - ); - })} - - )} - - {gatsbyImage && ( - - - - )} ); @@ -167,33 +111,10 @@ export const query = graphql` html } } - image { - childImageSharp { - gatsbyImageData(width: 500) - } - } - imageAlt cta { path label } - videos { - childYouTube { - oEmbed { - title - url - } - thumbnail { - gatsbyImage( - width: 480 - height: 270 - fit: COVER - cropFocus: CENTER - ) - } - } - action - } } } }