Struggling with CaseStudies (From SvelteKit/Prismic - Full Course 2024)

Developing with Prismic
,
5

Ok, got it working from fortunately seeing two other postings from the related topics:
Help with Mappers for blog listings, and Dark Modern Website - Build a Animated Website with SvelteKit, GSAP & Prismic.

These are the steps to get the Case Studies to work correctly now:

  1. Go to Slice Machine:
    1a) Add the Repeatable Group and use a name such as "Items". The API ID will be: items
    1b) Proceed to create the Case Study and others within the Repeatable Group.
  2. For the coding:
    2a) Rename the /src/lib/slices/mappers.js file to mappers.ts
    2b) Rename the /src/lib/slices/CaseStudies/mapper.js file to mapper.ts
    2c) Make the following line changes to /src/lib/slices/CaseStudies/mapper.ts:
    Line 7:
    Change this code of:
    export default async function mapper({ slice, context }) {
    To:
    export default async function mapper({ slice, context }: { slice: prismic.Content.CaseStudiesSlice, context: { client: prismic.Client<prismic.Content.AllDocumentTypes> } }) {
    Line 10:
    Change this code of:
    slice.items.map(async (item) => {
    To:
    slice.primary.items.map(async (item) => {
    Note: This change is of the Repeatable Group's API ID. In this case being "slice.primary.items".
  3. If there are internal errors after making the changes, then either restart Slice Machine environment or go to the /src/routes/+page.server.ts file and make a change (ex: a blank new line) and save.

And the last part, is the warning of the @apply rule with the index.svelte file.
Realized this is just a warning. The glow effect does work even with the warning. The reason for the warning is that the index.svelte file is using the "svelte" language and also CSS (tailwind). The warning can be ignored or if to hide it:

  1. Go to Settings (click on the gear icon at the bottom left corner, then click on Settings)
  2. In the search field, type: unknown”.
  3. the first result of CSS > Lint: Unknown At Rules is the one to use.
  4. Change from "warning" to "ignore".
  5. Sync the change by clicking on the gear icon immediately to the right, then click on "Sync this Setting"
1 Like