Skip to content

Commit 49c19f5

Browse files
codercatdevcodercatdev
authored
add key to force refresh of data (#460)
1 parent bce8ebc commit 49c19f5

File tree

1 file changed

+80
-78
lines changed
  • apps/codingcatdev/src/routes/(content-single)/course

1 file changed

+80
-78
lines changed

‎apps/codingcatdev/src/routes/(content-single)/course/Lesson.svelte

Lines changed: 80 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -13,86 +13,88 @@
1313
</script>
1414

1515
{#if data?.content}
16-
<div class="flex justify-center">
17-
<section class="flex flex-col xl:flex-row gap-8 justify-center p-2 xl:p-8 w-full">
18-
<div class="flex flex-col gap-2 md:gap-8 max-w-7xl w-full">
19-
<ol class="bcu-breadcrumb">
20-
<li class="bcu-crumb"><a href="/courses">Courses</a></li>
21-
<li class="bcu-crumb-separator" aria-hidden>&rsaquo;</li>
22-
<li class="bcu-crumb">
23-
<a href={`/course/${data.course.slug}`}>{data.course.title}</a>
24-
</li>
25-
<li class="bcu-crumb-separator" aria-hidden>&rsaquo;</li>
26-
<li>{data.content.title}</li>
27-
</ol>
28-
{#if data?.content?.youtube}
29-
<Video src={data.content.youtube} title={`${data.content.title}`} />
30-
{:else if data?.content?.cover}
31-
<Image src={data.content.cover} alt={data.content.title} />
32-
{/if}
33-
{#if data?.authors}
34-
<section class="flex">
35-
{#each data?.authors as author (author.slug)}
36-
<a
37-
class="bcu-button flex gap-2 items-center variant-ghost p-2 rounded-md"
38-
href={`/author/${author.slug}`}
16+
{#key data?.content?.slug}
17+
<div class="flex justify-center">
18+
<section class="flex flex-col xl:flex-row gap-8 justify-center p-2 xl:p-8 w-full">
19+
<div class="flex flex-col gap-2 md:gap-8 max-w-7xl w-full">
20+
<ol class="bcu-breadcrumb">
21+
<li class="bcu-crumb"><a href="/courses">Courses</a></li>
22+
<li class="bcu-crumb-separator" aria-hidden>&rsaquo;</li>
23+
<li class="bcu-crumb">
24+
<a href={`/course/${data.course.slug}`}>{data.course.title}</a>
25+
</li>
26+
<li class="bcu-crumb-separator" aria-hidden>&rsaquo;</li>
27+
<li>{data.content.title}</li>
28+
</ol>
29+
{#if data?.content?.youtube}
30+
<Video src={data.content.youtube} title={`${data.content.title}`} />
31+
{:else if data?.content?.cover}
32+
<Image src={data.content.cover} alt={data.content.title} />
33+
{/if}
34+
{#if data?.authors}
35+
<section class="flex">
36+
{#each data?.authors as author (author.slug)}
37+
<a
38+
class="bcu-button flex gap-2 items-center variant-ghost p-2 rounded-md"
39+
href={`/author/${author.slug}`}
40+
>
41+
{#if author?.cover}
42+
<div class="w-8 md:w-12">
43+
{#key author.slug}
44+
<Image src={author.cover} alt={author?.name} />
45+
{/key}
46+
</div>
47+
{/if}
48+
<div>{author?.name}</div>
49+
</a>
50+
{/each}
51+
</section>
52+
{/if}
53+
{#if data?.content?.title}
54+
<h1>{data?.content?.title}</h1>
55+
{/if}
56+
{#if browser && data?.content?.codepen}
57+
<section class=" aspect-video">
58+
<iframe
59+
scrolling="no"
60+
title={`codepen for ${data?.content?.title}`}
61+
src={`https://codepen.io/${data.content.codepen.replace(
62+
'pen',
63+
'embed'
64+
)}?default-tab=html%2Cresult`}
65+
allowtransparency={true}
66+
allowfullscreen={true}
67+
frameborder="0"
68+
height="100%"
69+
width="100%"
3970
>
40-
{#if author?.cover}
41-
<div class="w-8 md:w-12">
42-
{#key author.slug}
43-
<Image src={author.cover} alt={author?.name} />
44-
{/key}
45-
</div>
46-
{/if}
47-
<div>{author?.name}</div>
48-
</a>
49-
{/each}
50-
</section>
51-
{/if}
52-
{#if data?.content?.title}
53-
<h1>{data?.content?.title}</h1>
54-
{/if}
55-
{#if browser && data?.content?.codepen}
56-
<section class=" aspect-video">
57-
<iframe
58-
scrolling="no"
59-
title={`codepen for ${data?.content?.title}`}
60-
src={`https://codepen.io/${data.content.codepen.replace(
61-
'pen',
62-
'embed'
63-
)}?default-tab=html%2Cresult`}
64-
allowtransparency={true}
65-
allowfullscreen={true}
66-
frameborder="0"
67-
height="100%"
68-
width="100%"
69-
>
70-
See the Pen <a href={`https://codepen.io/${data.content.codepen}`}>
71-
on <a href="https://codepen.io">CodePen</a>.
72-
</a></iframe
73-
>
74-
</section>
75-
{/if}
76-
{#if browser && data?.content?.stackblitz}
77-
<section class=" aspect-video">
78-
<iframe
79-
title={`stackblitz for ${data?.content?.title}`}
80-
src={data.content.stackblitz}
81-
frameborder="0"
82-
height="100%"
83-
width="100%"
84-
loading="lazy"
85-
/>
71+
See the Pen <a href={`https://codepen.io/${data.content.codepen}`}>
72+
on <a href="https://codepen.io">CodePen</a>.
73+
</a></iframe
74+
>
75+
</section>
76+
{/if}
77+
{#if browser && data?.content?.stackblitz}
78+
<section class=" aspect-video">
79+
<iframe
80+
title={`stackblitz for ${data?.content?.title}`}
81+
src={data.content.stackblitz}
82+
frameborder="0"
83+
height="100%"
84+
width="100%"
85+
loading="lazy"
86+
/>
87+
</section>
88+
{/if}
89+
<section class="flex flex-col flex-grow w-full gap-2 markdown md:gap-8">
90+
<CopyCodeInjector>
91+
<slot />
92+
</CopyCodeInjector>
8693
</section>
87-
{/if}
88-
<section class="flex flex-col flex-grow w-full gap-2 markdown md:gap-8">
89-
<CopyCodeInjector>
90-
<slot />
91-
</CopyCodeInjector>
92-
</section>
93-
</div>
94-
</section>
95-
</div>
94+
</div>
95+
</section>
96+
</div>
97+
{/key}
9698
{:else}
9799
<p>No data found yet</p>
98100
{/if}

0 commit comments

Comments
 (0)