Sprint 04 🌩🧭 - JuulVrasdonk/ilojo-bar GitHub Wiki

Op Maandag hadden Daan en ik een gesprek met Joost, naar aanleiding van de code review op de woensdag ervoor. In dit gesprek legde Joost uit dat we 1 'verhaal' component aan moest maken waarin we vervolgens de content van ieder verhaal in laden.

Wat we tot nu hadden gedaan was ieder verhaal apart een component geven.

In eerste instantie begrepen Daan en ik niet helemaal hoe we ieder verhaal dan uiteindelijk zijn eigen styling konden geven. Omdat we in sommige verhalen bijvoorbeeld images boven de heading hadden en in andere weer niet. We konden niet echt een template maken waarin de verhalen werden gestructureerd. Joost zei dat we dat met position: absolute; of display: grid op konden lossen.

Uiteindelijk zou de html per verhaal er ongeveer zo uit komen te zien:

<article>
   <h4>Subheading</h4>
   <h2>Heading</h2>
   <p>Bodytext</p>
   {images.foreach(image => {
      <Image src="image.url "/> 
      {/*Laad alle images in uit CMS*/}
   }}
</article>

Na het gesprek met Joost wisten we goed wat we nog moesten doen. Eerst was het tijd om alle content in Graph te zetten. Daarna hebben we nog even gekeken naar het fetchen van data in Next. Maar we besloten ons daar verder in te verdiepen op Dinsdag.

Op Dinsdagochtend heb ik me even bezig gehouden met de border van sommige afbeeldingen in ons design.

Ik wilde dit eerst doen met border: 10px double white; maar dit gaf toch niet helemaal het gewenste resultaat. Ik besloot aan Vasilis te vragen hoe ik deze border het beste kon namaken. Hij zei dat ik hier box-shadows voor moest gebruiken. Ik vond daar deze box-shadow generator voor. Met deze tool kon ik heel makkelijk de border namaken.

Uiteindelijk was dit mijn code:

.border {
  -webkit-box-shadow: 0px 0px 0px 5px #ffffff, 0px 0px 0px 6px #e0e0e0,
    0px 0px 0px 11px #ffffff;
  box-shadow: 0px 0px 0px 5px #ffffff, 0px 0px 0px 6px #e0e0e0,
    0px 0px 0px 11px #ffffff;
}

Daarna besloot ik de mappen van ons project een beetje op te ruimen. Er kon namelijk best wat weg nadat we een nieuwe koers hadden gezet op Maandag. Alle components konden eruit. Hiermee kon ik ook heel wat component specifieke styling wegdoen. Kortom al het werk van vorige week kon de prullenbak in.🙃

Ondertussen was Daan al een beetje begonnen met het fetchen van de data in een api.js bestand. Nadat ik klaar was met opruimen hebben we daar samen aan verder gewerkt. Het was nogal ingewikkeld om in Graph de juiste queries te vinden om met GraphQL te versturen. Daarna moesten we de juiste data returns. Dus dat betekent... loopen. Gelukkig was het weer eens niet zo makkelijk als het klinkt. We hadden namelijk in Graph ook de introductie al ingevoegd. Maar grahpQL nam deze introductie ook mee tussen de stories. Toen we vervolgens in de stories de headings wilden selecteren pakte hij deze niet bij de introductie. Hierdoor kregen we een error met cannot read properties of undefined. Na veeel te lang ploeteren kwamen we hier achter. Om dit probleem even op te lossen besloten we de introductie nog even uit de CMS te laten. Daarna werkte het 'uitpakken' van de data wel naar behoren.

Ook besloten we nog even een dummy pagina in te richten. Om te kijken hoe we hier de data goed in konden laden.

Dit was onze code: (vergelijkbaar met de code van Maandag)

   {stories.map((item, i) => (
         <div key={i}>
           <h4>{item.subtitle}</h4>
           <h2>{item.title}</h2>
           <p>{item.bodytext01.text}</p>
           <p>{item.bodytext02.text}</p>
           {item.images.map((image) => {
             return (
               <div key={image.id}>
                 <Image
                   src={image.url}
                   alt="foto"
                   layout="responsive"
                   width="100%"
                   height="100%"
                   objectFit="contain"
                 />
          </div>
     );
    })}

Op Woensdag wilde we de data die we op Dinsdag hadden gefetched in het Main.js component zetten. Dit bleek echter nog ingewikkeld. Next staat het namelijk niet toe om data serverside in te laden in components. Dit heeft te maken met de manier waarop React werkt in combinatie met de manier waarop wij met Next data in willen laden.

Wij wilden namelijk de data inladen met de Next.js functie getStaticProps(). Deze functie prerendered de pagina namelijk voor je. Ook mogelijke data die in je pagina wordt gebruikt. Wij wilden onze data natuurlijk wel serverside inladen.

Robert vertelde ons dat we een context provider moesten gebruiken. Een context provider haalt de data voor alle componenten per pagina op. En zorgt dat deze data gedeeld kan worden naar alle componenten op de pagina. Okay. Klinkt goed. Laten we het proberen. De bronnen die we op internet vonden waren alleen veel te uitgebreid voor onze use case. Uiteindelijk vond Daan een simpele oplossing. Daarvoor we in onze context.js alleen de volgende code te gebruiken:

 import { createContext } from "react";
 export const Context = createContext();

Vervolgens hoefden we alleen het <Context /> component om alle componenten in de index.js te zetten. En de getStaticProps in index.js te gebruiken. Nu konden we ook de data gebruiken in het Main component.

Na dit grootse succes hebben Daan en ik de verhalen verdeeld om ze te gaan stylen. Eerste besloten we de paper cutouts op een betere manier in te voegen. We hadden eerst gewoon de cutouts in de html gezet. Dit kon niet meer handig om de content in html nu geregeld werd door het CMS. Ook vonden we het beter om dit in css te doen, omdat het eigenlijk gewoon een stylings dingetje is.

Dat deden we zo:

article {
     &:nth-child(7) {
       background-color: #e2dccf;
       position: relative;

       &::after {
         content: "";
         position: absolute;
         bottom: -25rem;
         background-image: url(../../../public/images/paper-effects/paper-botched.svg);
         background-position: center;
         background-size: 100%;
         background-repeat: no-repeat;
         width: 100%;
         height: 100vh;
       }
       h4,
       h2,
       p {
         position: relative;
         z-index: 1;
       }
     }
   }
 }

Op Donderdag zijn we verder gegaan met het styling van de sections. Hierin besloten we te werken met display: flex; en order. Hiermee konden we gemakkelijk de volgorde van de elementen binnen een verhaal aanpassen.

Ook besloten we voor de willekeurig ogende plaatsing van de images, position: absolute; te gebruiken. Dit zorgde voor de nodige problemen. Omdat we nu de margins van de teksten erg groot moesten maken zodat er nog wel ruimte tussen zat. Dit zorgde voor behoorlijk wat gezeur.

Op Vrijdag ochtend hebben we de puntjes op de i gezet wat betreft de basis styling van de pagina. Daarna heb ik me gefocust op het grain effect dat we als top-laag over het design hadden gelegd. Dit wilden we namelijk ook geanimeerd hebben.

Dat heb ik uiteindelijk op deze manier gedaan.

.grain::before {
   content: "";
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   opacity: .04;
   z-index: 100;
   pointer-events: none;
   background-image: url("../public/images/home/grain.gif");
 }

 .grain::after {
   content: "";
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 101;
   mix-blend-mode: darken;
   background-color: #2f2f2f;
   opacity: 0.03;
 }

Ook heb ik nog wat conditional rendering toegevoegd in het Main component. Zodat er geen errors komen op het moment dat er bijvoorbeeld geen teksten worden ingevoegd in het CMS.

Dat deed ik zo:

{(ctx.bodytext01.text !== '') ? <p>{ctx.bodytext01.text}</p> : ''}