Bouwen

Trial and error

Ik heb om te beginnen een youtube tutorial proberen te volgen: Prismic & Svelte tutorial.

Het ging best wel goed met het installeren van Svelte. Maar toen de tutorial bij prismic aankwam sloeg de tutorial gever het gedeelte over van hoe je dingen toevoegd in Prismic. Dit was voor mij een probleem. Ik kon toen eigenlijk niet meer verder met de tutorial. Ik heb verschillende dingen wel geprobeerd te doen, het installeren van de slicemachine werkte wel. Daarna heb ik dingen geprobeerd hier toe te voegen, maar dat lukte niet echt, en het lukte al helemaal niet om info eventueel op te halen.

Daarom besloot ik opnieuw te beginnen en met de hulp van Rick heb ik geleerd hoe je info in Prismic kan toevoegen en ophalen in je project.

Hieronder zal ik laten zien met afbeeldingen wat de juiste volgorde is om het project bouwen met Svelte en Prismic.

Stappenplan

1. npm create svelte@latest

Dit doe je om svelte te installeren. Je word dan door een paar vragen geleid die je moet beantwoorden. Hier koos ik voor het 'skeleton project' toen erom werd gevraagd.

2. npm install

Om de node packages te installeren.

3. npx@slicemachine/init@latest

Om de slicemachine te installeren. Bekijk hieronder de slicemachine:

4. Ga naar custom types:

5. Druk op create:

6. Vul het volgende formulier in:

7. voeg daarna eventueel extra velden toe:

8. sla het op door op save te drukken.

9. Ga naar changes:

10. push de changes.

11. Ga naar de repo op de prismic website:

12. Daar zie je het als het goed is verschijnen:

13. Vervolgens kan je als je daarop drukt de afbeelding etc toevoegen:

Inladen prismic data

In de routes maak je een bestand genaamd +page.server.js en daarin zet je de volgende code om de data op te halen:

import { createClient } from "$lib/prismicio"

export async function load({fetch, request}){
    const client = createClient({fetch, request})

    const document = await client.getByUID('homepage', 'page', {'fetchLinks': ['homepage.content', 'homepage.title', 'homepage.image', 'homepage.slices']})

    return document.data
}

Vervolgens zet je in de +page.svelte:

<script>
    export let data
</script>

<section class="top-mobile">
    <h1>{data.title}</h1>
    <p>{data.intro}</p>
</section>

Hierdoor komt de data op de pagina.