Meesterproef WEEK 05

Working 2 days a week at this project

📅 MAANDAG 13/05 T/M VRIJDAG 17/05

📅 WOENSDAG 15/05

Sanity shema:

Uitleg en Visuele Schets

1. Sanity Schema Beschrijving: Dit schema definieert hoe een 'product' eruitziet in Sanity. Velden zoals slug, title, description, en image worden gedefinieerd.
2. Gegevens ophalen in Astro Homepagina Beschrijving: De homepagina van Astro haalt gegevens op van Sanity en toont ze in een kaarten grid.
3. Detailpagina in Astro Beschrijving: Bij het klikken op een kaart wordt de detailpagina geladen met specifieke gegevens van het product.
4. Gegevensstroom Beschrijving: De gegevensstroom begint bij het Sanity schema, waarna de gegevens worden opgehaald door de Astro homepagina en vervolgens worden getoond op de detailpagina.

Sanity Schema Definiëren:

import { defineField, defineType } from 'sanity';

export default defineType({
  name: 'product',
  title: 'Product',
  type: 'document',
  fields: [
    defineField({
      name: 'title',
      title: 'Title',
      type: 'string',
    }),
    defineField({
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      validation: (Rule) => Rule.required(),
      options: {
        source: 'title',
        maxLength: 96,
      },
    }),
    defineField({
      name: 'description',
      title: 'Description',
      type: 'text',
    }),
    defineField({
      name: 'image',
      title: 'Image',
      type: 'image',
      options: {
        hotspot: true,
      },
    }),
  ],
});

Sanity Card

// src/components/Card.astro
---
const { product } = Astro.props;
---

<article>
  <h2>{product.title}</h2>
  <img src={product.image} alt={product.title} />
  <p>{product.description}</p>
  <a href={`/products/${product.slug}`}>Read more</a>
</article>

Materiaal:

• https://www.sanity.io/docs/sanity-studio

• https://www.sanity.io/docs/schema-types

📅 DONDERDAG 16/05