Skip to content

Commit f0c2d2d

Browse files
author
Alex FusionAuth
committed
video
1 parent 38f18a9 commit f0c2d2d

2 files changed

Lines changed: 147 additions & 84 deletions

File tree

‎apps/codingcatdev/src/lib/actions/inView.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/**
2+
* This action triggers a custom event on node entering/exiting the viewport.
3+
* example:
4+
* <p
5+
* use:inView
6+
* on:enter={() => console.log("enter")}
7+
* on:exit={() => console.log("exit")}
8+
* >
9+
*
10+
* optional params { root, top, bottom }
11+
* top and bottom are numbers
12+
* use:inView={ bottom: 100 } // 100 pixels from bottom of viewport
13+
*/
14+
import type { Action } from "svelte/action";
15+
16+
export const inView: Action<HTMLElement, { root?: Element | Document | null, top?: number, bottom?: number } | undefined> = (node, params) => {
17+
let observer: IntersectionObserver;
18+
19+
const handleIntersect = (e: IntersectionObserverEntry[]) => {
20+
const v = e[0].isIntersecting ? "enter" : "exit";
21+
node.dispatchEvent(new CustomEvent(v));
22+
};
23+
24+
const setObserver = (params: { root: Element | Document | null, top: number, bottom: number } | undefined) => {
25+
const marginTop = params?.top ? params?.top * -1 : 0;
26+
const marginBottom = params?.bottom ? params?.bottom * -1 : 0;
27+
const rootMargin = `${marginTop}px 0px ${marginBottom}px 0px`;
28+
const options: IntersectionObserverInit = { root: params?.root, rootMargin };
29+
if (observer) observer.disconnect();
30+
observer = new IntersectionObserver(handleIntersect, options);;
31+
observer.observe(node);
32+
}
33+
setObserver(params);
34+
35+
return {
36+
update(params) {
37+
setObserver(params);
38+
},
39+
40+
destroy() {
41+
if (observer) observer.disconnect();
42+
}
43+
};
44+
}

‎apps/codingcatdev/src/routes/(home-partials)/(home-latest-course)/HomeLatestCourse.svelte‎

Lines changed: 103 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -6,108 +6,127 @@
66
import GitLineGradient from '../(home-campaign)/GitLineGradient.svelte';
77
import CheckOutArrow from './CheckOutArrow.svelte';
88
import CoursesSvg from './CoursesSvg.svelte';
9+
import { inView } from '$lib/actions/inView';
10+
import { fade } from 'svelte/transition';
11+
12+
let videoVisible = false;
913
</script>
1014

1115
<div class=" bg-surface-800-100-token h-[800px]" />
1216

13-
<section
14-
class="grid justify-center grid-cols-1 px-8 mx-auto gap-2 2xl:gap-10 max-w-7xl relative z-10"
15-
>
16-
<div class="flex">
17-
<div class="flex flex-col basis-1/12 relative">
18-
<GitLineGradient />
19-
<CoursesSvg />
20-
<GitLineGradient rotate={true} />
21-
</div>
22-
<div class="basis-11/12 pt-44 pl-4 sm:pl-2 -mt-80 pb-8">
23-
<div
24-
class="max-w-6xl -mt-80 flex flex-col gap-8 sm:gap-24 text-surface-50-900-token relative"
25-
>
26-
<div class="max-w-lg flex flex-col gap-8 text-center relative items-center mx-auto">
27-
<h2>Svelte Front-to-Back</h2>
28-
<p class="!text-lg sm:!text-xl">
29-
Learn how to build performant full-stack web applications using the Svelte framework
30-
from start to production
31-
</p>
32-
</div>
33-
<div class="check-out-text">Check out our latest course!</div>
34-
<div class="check-out-arrow"><CheckOutArrow /></div>
35-
<div class="block">
36-
<Video class="rounded-2xl" src="https://youtu.be/sp7qvtvCFv8" title="Svelte" />
37-
</div>
38-
39-
<!-- Lessons -->
40-
<div class="flex flex-col gap-8">
17+
<div>
18+
<section
19+
class="grid justify-center grid-cols-1 px-8 mx-auto gap-2 2xl:gap-10 max-w-7xl relative z-10"
20+
>
21+
<div class="flex">
22+
<div class="flex flex-col basis-1/12 relative">
23+
<GitLineGradient />
24+
<CoursesSvg />
25+
<GitLineGradient rotate={true} />
26+
</div>
27+
<div class="basis-11/12 pt-44 pl-4 sm:pl-2 -mt-80 pb-8">
28+
<div
29+
class="max-w-6xl -mt-80 flex flex-col gap-8 sm:gap-24 text-surface-50-900-token relative"
30+
>
31+
<div class="max-w-lg flex flex-col gap-8 text-center relative items-center mx-auto">
32+
<h2>Svelte Front-to-Back</h2>
33+
<p class="!text-lg sm:!text-xl">
34+
Learn how to build performant full-stack web applications using the Svelte framework
35+
from start to production
36+
</p>
37+
</div>
38+
{#if videoVisible}
39+
<div class="check-out-text" in:fade={{ delay: 300, duration: 300 }} out:fade>
40+
Check out our latest course!
41+
</div>
42+
<div class="check-out-arrow" in:fade={{ delay: 400, duration: 300 }} out:fade>
43+
<CheckOutArrow />
44+
</div>
45+
{/if}
4146
<div
42-
class="grid grid-cols-1 sm:grid-rows-2 sm:grid-cols-2 gap-4 sm:gap-8 relative py-8 sm:py-0"
47+
class="block"
48+
use:inView
49+
on:enter={() => (videoVisible = true)}
50+
on:exit={() => (videoVisible = false)}
4351
>
44-
<div class="hidden absolute w-full h-full sm:flex justify-center items-center -z-10">
45-
<div class="bg-surface-800-100-token rounded-full h-24 w-24" />
46-
</div>
47-
<div class="bcu-card !text-surface-800-100-token !bg-surface-100-800-token">
48-
<div class="p-4 space-y-4">
49-
<div class="text-4xl font-bold text-primary-400-500-token">01</div>
50-
<h2>What is Svelte?</h2>
51-
<article>
52-
<p>
53-
Svelte is a modern JavaScript framework that is designed to be fast, simple, and
54-
scalable.
55-
</p>
56-
</article>
52+
<Video class="rounded-2xl" src="https://youtu.be/sp7qvtvCFv8" title="Svelte" />
53+
</div>
54+
55+
<!-- Lessons -->
56+
<div class="flex flex-col gap-8">
57+
<div
58+
class="grid grid-cols-1 sm:grid-rows-2 sm:grid-cols-2 gap-4 sm:gap-8 relative py-8 sm:py-0"
59+
>
60+
<div class="hidden absolute w-full h-full sm:flex justify-center items-center -z-10">
61+
<div class="bg-surface-800-100-token rounded-full h-24 w-24" />
5762
</div>
58-
</div>
59-
<div class="bcu-card !text-surface-800-100-token !bg-surface-100-800-token">
60-
<div class="p-4 space-y-4">
61-
<div class="text-4xl font-bold text-primary-400-500-token">02</div>
62-
<h2>Getting Started</h2>
63-
<article>
64-
<p>Explanation of Svelte vs. SvelteKit and other metaframeworks</p>
65-
</article>
63+
<div class="bcu-card !text-surface-800-100-token !bg-surface-100-800-token">
64+
<div class="p-4 space-y-4">
65+
<div class="text-4xl font-bold text-primary-400-500-token">01</div>
66+
<h2>What is Svelte?</h2>
67+
<article>
68+
<p>
69+
Svelte is a modern JavaScript framework that is designed to be fast, simple,
70+
and scalable.
71+
</p>
72+
</article>
73+
</div>
6674
</div>
67-
</div>
68-
<div class="bcu-card !text-surface-800-100-token !bg-surface-100-800-token">
69-
<div class="p-4 space-y-4">
70-
<div class="text-4xl font-bold text-primary-400-500-token">03</div>
75+
<div class="bcu-card !text-surface-800-100-token !bg-surface-100-800-token">
76+
<div class="p-4 space-y-4">
77+
<div class="text-4xl font-bold text-primary-400-500-token">02</div>
78+
<h2>Getting Started</h2>
79+
<article>
80+
<p>Explanation of Svelte vs. SvelteKit and other metaframeworks</p>
81+
</article>
82+
</div>
83+
</div>
84+
<div class="bcu-card !text-surface-800-100-token !bg-surface-100-800-token">
85+
<div class="p-4 space-y-4">
86+
<div class="text-4xl font-bold text-primary-400-500-token">03</div>
7187

72-
<h2>Starting To Code</h2>
73-
<article>
74-
<p>Setup VSCode and Get Started writing Svelte</p>
75-
</article>
88+
<h2>Starting To Code</h2>
89+
<article>
90+
<p>Setup VSCode and Get Started writing Svelte</p>
91+
</article>
92+
</div>
7693
</div>
77-
</div>
78-
<div class="bcu-card !text-surface-800-100-token !bg-surface-100-800-token">
79-
<div class="p-4 space-y-4">
80-
<div class="text-4xl font-bold text-primary-400-500-token">04</div>
94+
<div class="bcu-card !text-surface-800-100-token !bg-surface-100-800-token">
95+
<div class="p-4 space-y-4">
96+
<div class="text-4xl font-bold text-primary-400-500-token">04</div>
8197

82-
<h2>Components and Props</h2>
83-
<article>
84-
<p>
85-
Components are reusable pieces of code that can be used to build complex user
86-
interfaces, props pass data within those components.
87-
</p>
88-
</article>
98+
<h2>Components and Props</h2>
99+
<article>
100+
<p>
101+
Components are reusable pieces of code that can be used to build complex user
102+
interfaces, props pass data within those components.
103+
</p>
104+
</article>
105+
</div>
89106
</div>
90107
</div>
91-
</div>
92-
<div class="grid grid-cols-1 sm:grid-rows-2 sm:grid-cols-2 gap-4 sm:gap-8 relative">
93-
<div class="flex sm:justify-end">
94-
<a href="/course/svelte" class="bcu-button md:bcu-button-xl variant-filled flex gap-1"
95-
>Begin Course <Icon src={ArrowRight} theme="solid" class="w-6" />
96-
</a>
97-
</div>
98-
<div class="flex sm:justify-start">
99-
<a
100-
href="/courses"
101-
class="bcu-button md:bcu-button-xl variant-ghost-surface !text-on-surface-token flex gap-1"
102-
>Explore other Courses
103-
</a>
108+
<div class="grid grid-cols-1 sm:grid-rows-2 sm:grid-cols-2 gap-4 sm:gap-8 relative">
109+
<div class="flex sm:justify-end">
110+
<a
111+
href="/course/svelte"
112+
class="bcu-button md:bcu-button-xl variant-filled flex gap-1"
113+
>Begin Course <Icon src={ArrowRight} theme="solid" class="w-6" />
114+
</a>
115+
</div>
116+
<div class="flex sm:justify-start">
117+
<a
118+
href="/courses"
119+
class="bcu-button md:bcu-button-xl variant-ghost-surface !text-on-surface-token flex gap-1"
120+
>Explore other Courses
121+
</a>
122+
</div>
104123
</div>
105124
</div>
106125
</div>
107126
</div>
108127
</div>
109-
</div>
110-
</section>
128+
</section>
129+
</div>
111130

112131
<style>
113132
@media (max-width: 390px) {

0 commit comments

Comments
 (0)