Skip to content

Commit b1e99e4

Browse files
codercatdevcodercatdev
committed
update to locked lesson list
1 parent f4e57ac commit b1e99e4

8 files changed

Lines changed: 129 additions & 28 deletions

File tree

‎apps/codingcatdev/src/content/course/sveltekit-firebase/lesson/intro-blackcat-tailwind.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
cloudinary_convert: false
3+
cover:
4+
excerpt:
5+
locked: true
6+
published: draft
7+
slug: intro-blackcat-tailwind
8+
start: April 17, 2023
9+
title: Intruduction of BlackCatUI and Tailwind CSS
10+
weight: 2
11+
youtube:
12+
---
13+
14+
Closed Lesson

‎apps/codingcatdev/src/content/course/sveltekit-firebase/lesson/intro.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,7 @@ start: April 17, 2023
88
section: Intro
99
title: Introduction to Svelte Kit and Firebase
1010
weight: 1
11-
youtube: https://youtu.be/Z_DAxhYbjyM
11+
youtube:
1212
---
13+
14+
Open Lesson

‎apps/codingcatdev/src/lib/server/content.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ export const getContentBySlug = async ({
170170
:
171171
(l) => new Date(l.start) <= new Date() && l.published === ContentPublished.published
172172
)
173-
.sort((a, b) => b.weight || 99 - (a.weight || 1))
173+
.sort((a, b) => a.weight && b.weight ? a.weight - b.weight : -1)
174174
};
175175
})
176176
.at(0);

‎apps/codingcatdev/src/routes/(content-single)/course/[slug]/LessonCards.svelte‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,34 @@
11
<script lang="ts">
22
import type { Lesson } from '$lib/types';
3+
import { Icon } from '@steeze-ui/svelte-icon';
4+
import { LockClosed } from '@steeze-ui/heroicons';
5+
import { LockOpen } from '@steeze-ui/heroicons';
36
47
export let lesson: Lesson[];
58
export let courseSlug: string;
69
</script>
710

811
<section
9-
class="grid grid-cols-[repeat(1,minmax(0,_1fr))] md:grid-cols-[repeat(2,minmax(0,_1fr))] lg:md:grid-cols-[repeat(3,minmax(0,_1fr))] xl:grid-cols-[repeat(4,minmax(0,_1fr))] gap-2 md:gap-8"
12+
class="grid grid-cols-[repeat(1,minmax(0,_1fr))] md:grid-cols-[repeat(2,minmax(0,_1fr))] lg:md:grid-cols-[repeat(3,minmax(0,_1fr))] gap-2 md:gap-8"
1013
>
1114
{#each lesson as l}
12-
<a href={`/course/${courseSlug}/lesson/${l.slug}`} class="link-primary">
13-
<div class="bcu-card h-full">
14-
<header class="bcu-card-header capitalize pb-2 text-xl font-bold">{l.title}</header>
15+
<a href={`/course/${courseSlug}/lesson/${l.slug}`} class="!no-underline !text-token">
16+
<div class="bcu-card h-full p-4">
17+
<header class="bcu-card-header capitalize py-6 text-2xl font-bold relative">
18+
<div class="w-6 absolute top-0 right-0">
19+
{#if l?.locked}
20+
<Icon src={LockClosed} theme="solid" />
21+
{:else}
22+
<Icon src={LockOpen} theme="solid" />
23+
{/if}
24+
</div>
25+
<div>
26+
{l.title}
27+
</div>
28+
</header>
29+
<p class="p-4 !opacity-80">
30+
{l?.excerpt || 'More info in course.'}
31+
</p>
1532
</div>
1633
</a>
1734
{/each}

‎apps/codingcatdev/src/routes/(content-single)/course/[slug]/lesson/[lessonSlug]/+page.server.ts‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,43 @@
11
import { getLessonFromCourseSlug } from '$lib/server/content';
2+
import { db } from '$lib/server/firebase';
23
import { ContentType } from '$lib/types';
3-
import { error } from '@sveltejs/kit';
4+
import { error, redirect } from '@sveltejs/kit';
45

56

67
const contentType = ContentType.lesson;
78

8-
export const load = (async ({ params, parent }) => {
9+
export const load = (async ({ params, parent, url }) => {
910
// Get parsed courses with lessons from layout
10-
const { courseItems } = await parent();
11+
const { courseItems, user } = await parent();
1112
const content = await getLessonFromCourseSlug({ courseSlug: params.slug, slug: params.lessonSlug, courseItems });
1213
if (!content) {
1314
throw error(404, {
1415
message: 'Not found'
1516
});
1617
}
18+
19+
if (!user?.uid) {
20+
throw redirect(307, `/login?redirectTo=${url.pathname}`);
21+
}
22+
23+
const snapshot = await db.collection('stripe-products').where('active', '==', true).get();
24+
const products = [];
25+
26+
for (const doc of snapshot.docs) {
27+
const priceSnapshot = await doc.ref.collection('prices').where('active', '==', true).get();
28+
29+
for (const price of priceSnapshot.docs) {
30+
products.push({
31+
id: doc.id,
32+
...doc.data(),
33+
price: price.id
34+
})
35+
}
36+
}
37+
1738
return {
1839
contentType,
19-
content
40+
content,
41+
products
2042
};
2143
});

‎apps/codingcatdev/src/routes/(content-single)/course/[slug]/lesson/[lessonSlug]/+page.svelte‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,22 @@
11
<script lang="ts">
22
import Lesson from './Lesson.svelte';
33
import type { PageData } from './$types';
4+
import ProButton from '../../../../../(protected)/ProButton.svelte';
45
56
export let data: PageData;
67
</script>
78

8-
<Lesson {data} />
9+
{#if data.content.locked && !data?.user?.stripeRole}
10+
<section class="flex flex-col justify-center mt-8 items-center p-2">
11+
<div class="flex flex-col items-center gap-8">
12+
<div class="font-bold flex flex-col gap-2 max-w-4xl">
13+
<span class="text-3xl">You have reached a locked lesson.</span>
14+
<div class="text-primary-500 text-2xl">{data.content.title}</div>
15+
Select the button below to add a Pro membership to your account.
16+
</div>
17+
<ProButton products={data.products} uid={data.user?.uid} />
18+
</div>
19+
</section>
20+
{:else}
21+
<Lesson {data} />
22+
{/if}

‎apps/codingcatdev/src/routes/(content-single)/course/[slug]/lesson/[lessonSlug]/LessonList.svelte‎

Lines changed: 46 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,52 @@
11
<script lang="ts">
2-
import type { Content } from '$lib/types';
2+
import { Icon } from '@steeze-ui/svelte-icon';
3+
import { LockClosed } from '@steeze-ui/heroicons';
4+
import { LockOpen } from '@steeze-ui/heroicons';
35
4-
export let lesson: Content[];
6+
import type { Lesson } from '$lib/types';
7+
import { storeCurrentUrl } from '$lib/stores/stores';
8+
9+
export let lesson: Lesson[];
510
export let courseSlug: string;
11+
12+
$: classesActive = (href: string) =>
13+
$storeCurrentUrl?.split('/').at(-1) === href ? 'bg-primary-active-token' : '';
614
</script>
715

8-
<div class="bcu-card">
9-
<header class="bcu-card-header capitalize pb-2 text-xl font-bold">Lessons</header>
10-
<hr />
11-
<ul>
12-
{#each lesson as l}
13-
<li class={`list-none cursor-pointer p-1 rounded m-1 flex flex-col justify-between`}>
14-
<a href={`/course/${courseSlug}/lesson/${l.slug}`} class="link-primary">
15-
{l.title}
16-
</a>
17-
</li>
18-
{/each}
19-
</ul>
16+
<div class="bcu-card p-2 md:p-4">
17+
<!-- <header class="bcu-card-header capitalize pb-2 text-2xl font-bold flex justify-center">
18+
Lessons
19+
</header>
20+
<hr /> -->
21+
<nav class="nav-list-nav">
22+
<ul>
23+
{#each lesson as l}
24+
{#if l?.section}
25+
<div class="pb-2">
26+
<span class="flex py-2 mt-4 text-xl font-bold">
27+
{l.section}
28+
</span>
29+
<hr />
30+
</div>
31+
{/if}
32+
<li>
33+
<a
34+
href={`/course/${courseSlug}/lesson/${l.slug}`}
35+
class={`${classesActive(l.slug)} flex gap-1`}
36+
>
37+
<div class="w-6 shrink-0">
38+
{#if l?.locked}
39+
<Icon src={LockClosed} theme="solid" />
40+
{:else}
41+
<Icon src={LockOpen} theme="solid" />
42+
{/if}
43+
</div>
44+
<div>
45+
{l.title}
46+
</div>
47+
</a>
48+
</li>
49+
{/each}
50+
</ul>
51+
</nav>
2052
</div>

‎apps/codingcatdev/src/styles/nav-list.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@
1313
/* === List Items (Children) === */
1414

1515
.nav-list li {
16-
@apply flex items-center space-x-4 whitespace-nowrap;
16+
@apply flex items-center space-x-4;
1717
/* Padding */
1818
@apply p-2;
1919
/* Theme: Rounded */
2020
@apply rounded-token;
2121
}
2222

2323
.nav-list-dl div {
24-
@apply flex items-center space-x-4 whitespace-nowrap;
24+
@apply flex items-center space-x-4;
2525
/* Padding */
2626
@apply p-2;
2727
/* Theme: Rounded */
@@ -31,7 +31,7 @@
3131
.nav-list-nav a,
3232
.nav-list-nav button,
3333
.nav-list-option {
34-
@apply flex items-center space-x-4 whitespace-nowrap;
34+
@apply flex items-center space-x-4;
3535
/* Padding */
3636
@apply px-4 py-2;
3737
/* Hover */

0 commit comments

Comments
 (0)