Home

Analyseren

We hebben goed zitten brainstormen. We wilde iets leuks maken wat niet te voor de hand liggend was en wel paste bij de opdracht. We hadden eerst ideeën om de squad page te maken als een clone van Tinder of Instagram.

Wij hadden bedacht om een boekenkast in de browser te maken waar je de jaarboeken van de tweedejaars in kon bekijken. In de jaarboeken staan dan foto's van alle studenten in het tweede jaar.

Ontwerpen

Bouwen

Svelte installatie

Svelte installeren was geen probleem, we hadden afgesproken eerst de functionaliteiten werkend te krijgen en daarna pas de styling toe te passen. De functionaliteiten zijn. Laat een lijst met jaarboeken zien, laat de details van een jaarboek zien wanneer de gebruiker er op klikt. Dit moet allemaal data zijn die uit prismic.io komt.

Prismic.io installatie

De Prismic installatie was wel anders dan waar we voorheen mee gewerkt hebben. Het ging goed alleen was het wel een hele nieuwe omgeving. De slice machine was onduidelijk in het begin omdat je een beetje wordt los gelaten. Uiteindelijk kwam ik er achter dat sommige velden verplicht zijn zoals je uid.

Prismic data in sveltekit

Nadat alles geinstalleerd was konden we beginnen met het datamodel in prismic. We hadden al snel de homepage werkend gekregen. We wilde ook een detail pagina maken met de squads er in. Dit ging wat minder makkelijk. We hebben heel veel verschillende mogenlijkheden geprobeerd. Uiteindelijk was het gelukt om de juiste url te krijgen wanneer je op de overzichtspagina op een element klikte alleen werden we nog niet goed geredirect. Pas toen we sveltekit routing begrepen werkte dit pas. We hebben een volder met boek gemaakt en daarin een volder [uid]. Daar binnenin zit +page.svelte en +page.server.js.

Prismic data loopen

We hebben de website zo ontworpen dat er 20 members per pagina getoond kunnen worden. Omdat er meer dan 20 mensen in de prismic data zit is dit een uitdaging. We hebben nu een loop van 20 mensen. Dat doen we zo.

<div id="card-container" class="container">
{#each slice.items as item, index (item.slug.text)}
              {#if index < currentItemIndex}
                <!-- Skip items that have already been rendered -->
              {:else if currentPage === 1 && index < currentItemIndex + 20}
                <!-- Render the next 20 items on page 1 -->
                  <div class="card-item">
                    <div class="inner-card">
                      {#if !item.image.url}
                        <img class="yearbook-image" src="/img/placeholder-image.jpg" alt="" />
                      {:else}
                        <img class="yearbook-image" src={item.image.url} alt={item.image.alt} />
                      {/if}
                        <p>{item.name[0].text}</p>
                    </div>
                  </div>
                {/if}
            {/each}
          </div>

Testen

Integreren