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

Visitor from Youtube - SvelteKit, GSAP & Prismic - Full Course 2024 :slight_smile:

Learning front end as I go, and having a blast! It has been a great video so far, and I feel like I am learning a ton by reasoning out what is going on in the video, and then transferring it to my own project needs. (Here is what my project looks like currently). As background I have only ever had experience with php, html and css, working with wordpress until I started learning this last month (what timing, I know!).

I have found, for someone new to javascript frameworks in general with some general coding experience, that the complexity steeply increases at the CaseStudy part of the video, and a ton of what is being done with mapper/mappers etc is run through quite quickly so, as to not really understand whats fully happening. Like trying to implement the section with my own naming scheme (team members / member instead of case studies) I don't really know what parts of the mapper code etc relates to which uid's/api id's etc.

Also, with the change to repeatable zones, I think there may be further updates needed for the video? Is that in the works? I am fully new to graphquery/graphql stuff, so any links to good resources to help fill in the gaps are appreciated! Hopefully the above is useful as feedback too. Really great content though, and loving prismic.

Cheers.

Hey @mk32 ! Sorry for the delay to your question.
I’m so glad you’re taking the course and finding it useful! I’d love to help you out with making the mapper work for you. Do you happen to have your project live on GitHub anywhere? If so, linking me to that would be super helpful so that I can give you direct help with your project rather than an example.

I have been following with the video on YouTube and have corrected a couple of errors, likely due to updates. However, the CaseStudies segment I cannot fix apparently. There are multiple errors, some of which I did with Copilot but the CaseStudies do not appear, only the title and description afterwards.

The main problem looks to be of revamp of Repeatable Groups.
I believe it to be this line here:

{#each caseStudies as caseStudy, index}

Also renaming the file from mappers.js to mappers.ts appeared to solve some other issues. Primarily the usetype errors.
This is how the index.svelte file is currently:

<script>
	import Bounded from '$lib/components/Bounded.svelte';
	import { PrismicImage, PrismicLink, PrismicRichText, PrismicText } from '@prismicio/svelte';
	import clsx from 'clsx';
	import { compile } from 'svelte/compiler';

	/** @type {import("@prismicio/client").Content.CaseStudiesSlice} */
	export let slice;
	/** @type {import("@prismicio/client").Content.CaseStudyDocument[]} */
	export let caseStudies = [];
</script>

<Bounded data-slice-type={slice.slice_type} data-slice-variation={slice.variation}>
	<h2 class="max-w-2xl text-balance text-center text-5xl font-medium md:text-7xl">
		<PrismicText field={slice.primary.heading} />
	</h2>
	<div class="mx-auto mt-6 max-w-md text-balance text-center text-gray-300">
		<PrismicRichText field={slice.primary.body} />
	</div>

	<div class="mt-20 grid gap-16">
		{#each caseStudies as caseStudy, index}
			<div
				class="group relative grid gap-4 opacity-85 transition-opacity duration-300 hover:cursor-pointer hover:opacity-100 md:grid-cols-2 md:gap-8 lg:grid-cols-3"
			>
				<div class="col-span-1 flex flex-col justify-center gap-4">
					<h3 class="text-4xl">
						<PrismicText field={caseStudy.data.company} />
					</h3>
					<div class="max-w-md">
						<PrismicRichText field={caseStudy.data.description} />
					</div>

					<PrismicLink
						document={caseStudy}
						class="z-10 after:absolute after:inset-0 hover:underline"
					>
						Read <PrismicText field={caseStudy.data.company} /> case study
					</PrismicLink>
				</div>

				<div class={clsx('relative lg:col-span-2', index % 2 && 'md:-order-1')}>
					<div class="image-glow -bottom-8 -left-4 bg-orange-500"></div>
					<div class="image-glow -right-4 -top-8 bg-violet-500"></div>
					<PrismicImage
						field={caseStudy.data.image}
						sizes="(max-width: 768px) 100vw, 50vw"
						class="z-20 scale-[.98] rounded-xl transition-transform duration-300 group-hover:scale-100"
					/>
				</div>
			</div>
		{/each}
	</div>
</Bounded>

<style>
	.image-glow {
			position: absolute;
			height: 50%;
			width: 50%;
			border-radius: 9999px;
			opacity: 0;
			mix-blend-mode: screen;
			filter: blur(3rem);
			transition: opacity 0.5s;
		}
		.group:hover .image-glow {
			opacity: 0.3;
	}
</style>

For the Slice Machine I created a Group called "Case Studies" and therefore has an identifier of, "slice.primary.case_studies". I tried with renaming to other names, such as slice.primary.case_studies_sequence, but had no change of the problem.
Also with the script, the image-glow didn't work as a intended and had to change over with the full CSS. Not sure why the @apply would not work.

Ok, made a type-o with the above post, in that it was the index.svelte file, not the mapper file.
And working too late, so I have gone back to the original GitHub files, with the original filenames and added in the Console Logging (index.svelte).

Disregard the above post of mine.

The terminal log reports as:

[vite:dev] 9:03:17 am [vite] hmr update /src/lib/slices/CaseStudies/index.svelte, /src/app.css
[vite:dev] 🚀 ~ slice: {
[vite:dev]   variation: 'default',
[vite:dev]   version: 'initial',
[vite:dev]   items: [],
[vite:dev]   primary: {
[vite:dev]     heading: [ [Object] ],
[vite:dev]     body: [ [Object] ],
[vite:dev]     case_studies: [ [Object] ]
[vite:dev]   },
[vite:dev]   id: 'case_studies$c69a277f-e2e5-4a4b-be46-44f499060798',
[vite:dev]   slice_type: 'case_studies',
[vite:dev]   slice_label: null
[vite:dev] }

So, there is the problem with the case_study and the type (items is an empty set). The error messages indicate as:
Property 'case_study' does not exist on type 'never'. ts(2339) [Ln11, Col 51]
Property 'case_study' does not exist on type 'never'. ts(2339) [Ln13, Col 41]

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

Hi @Mr.Patrick,

Welcome to the community! You beat us to the fix - thank you so much for reaching out and sharing your solution in such details, I'm confident it'll help other users running into the same situation. We always appreciate community members sharing their progress and keeping us updated :slight_smile: If you run into anything else we can help you with or you want to share, don't hesitate!