Skip to content

Commit e7155dd

Browse files
author
Alex FusionAuth
committed
add podcasts
1 parent 4dc1f01 commit e7155dd

12 files changed

Lines changed: 180 additions & 15 deletions

File tree

apps/codingcatdev/src/routes/(home-partials)/(home-campaign)/HomeCampaign.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
</div>
2323

2424
<section
25-
class="grid justify-center grid-cols-1 px-8 pt-12 mx-auto gap-2 2xl:gap-10 2xl:min-h-768 max-w-7xl relative"
25+
class="grid justify-center grid-cols-1 px-8 pt-12 mx-auto gap-2 2xl:gap-10 max-w-7xl relative"
2626
>
2727
<div class="flex">
2828
<div class="flex flex-col basis-1/12 relative">

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<div class=" bg-surface-800-100-token h-[800px]" />
1212

1313
<section
14-
class="grid justify-center grid-cols-1 px-8 mx-auto gap-2 2xl:gap-10 2xl:min-h-768 max-w-7xl relative z-10"
14+
class="grid justify-center grid-cols-1 px-8 mx-auto gap-2 2xl:gap-10 max-w-7xl relative z-10"
1515
>
1616
<div class="flex">
1717
<div class="flex flex-col basis-1/12 relative">
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<script>
2+
import { CheckBadge } from '@steeze-ui/heroicons';
3+
import { Icon } from '@steeze-ui/svelte-icon';
4+
</script>
5+
6+
<div class="mx-auto my-3">
7+
<div class="relative d-inline-block z-1">
8+
<Icon src={CheckBadge} theme="solid" class="w-8" />
9+
</div>
10+
</div>
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<script lang="ts">
2+
import type { Podcast } from '$lib/types';
3+
import GitLineGradient from '../(home-campaign)/GitLineGradient.svelte';
4+
import PodcastCard from './PodcastCard.svelte';
5+
import PodcastSvg from './PodcastSvg.svelte';
6+
export let podcasts: Podcast[];
7+
console.log(podcasts);
8+
</script>
9+
10+
<section class="relative">
11+
<div class="grid justify-center grid-cols-1 px-8 mx-auto gap-2 2xl:gap-10 max-w-7xl relative">
12+
<div class="flex">
13+
<div class="flex flex-col basis-1/12 relative">
14+
<GitLineGradient />
15+
<PodcastSvg />
16+
<GitLineGradient rotate={true} />
17+
</div>
18+
<div class="basis-11/12 pl-4 sm:pl-2 pt-8 sm:pt-20 pb-96 lg:mb-72">
19+
<div class="flex flex-col lg:flex-row gap-8 items-center">
20+
<div class="sm:basis-2/3 flex flex-col justify-center gap-8">
21+
<h2>CodingCat.dev Podcast</h2>
22+
<p>
23+
Tune in to our thought-provoking episodes featuring industry experts, thought leaders,
24+
and innovators.
25+
</p>
26+
</div>
27+
<div class="sm:basis-1/3 flex">
28+
<a href="/podcasts" class="bcu-button variant-filled">View all episodes</a>
29+
</div>
30+
</div>
31+
</div>
32+
</div>
33+
</div>
34+
<div class="absolute top-64 left-0 w-full">
35+
<div
36+
class="snap-x scroll-px-4 snap-mandatory scroll-smooth flex gap-4 overflow-x-auto overflow-y-hidden py-10 sm:justify-center"
37+
>
38+
{#each podcasts as content, i}
39+
<PodcastCard position={i % 2 ? 'left' : 'right'} {content} />
40+
{/each}
41+
</div>
42+
</div>
43+
</section>
44+
45+
<style>
46+
/* Scrollbars are ugly on horizontal */
47+
.scroll-smooth::-webkit-scrollbar {
48+
display: none;
49+
}
50+
</style>
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script lang="ts">
2+
import type { Content } from '$lib/types';
3+
export let position: 'left' | 'right';
4+
export let content: Content;
5+
6+
import Image from '$lib/components/content/Image.svelte';
7+
8+
$: positionStyle = position === 'left' ? '-rotate-2 !bg-primary-300' : 'rotate-2 !bg-white';
9+
</script>
10+
11+
<div
12+
class={`bcu-card max-w-xs snap-center shrink-0 !text-surface-500 ${positionStyle} ${$$props.class}`}
13+
>
14+
<a class="self-start !no-underline" href={`/${content.type}/${content.slug}`}>
15+
{#if content?.cover}
16+
<Image
17+
src={content.cover}
18+
alt={content.title || 'Missing Alt Sorry'}
19+
classes="object-cover w-full bg-cover rounded bg-black/50 aspect-video rounded-md rounded-b-none cursor-pointer"
20+
/>
21+
{:else}
22+
<Image
23+
src="https://media.codingcat.dev/image/upload/dev-codingcatdev-photo/v60h88eohd7ufghkspgo"
24+
alt={content.title || 'Missing Alt Sorry'}
25+
classes="object-cover w-full bg-cover rounded bg-black/50 aspect-video rounded-md rounded-b-none cursor-pointer"
26+
/>
27+
{/if}
28+
29+
<section class="grid h-full grid-cols-1 gap-2 p-4">
30+
<div class="space-y-2">
31+
<h3 class="font-sans text-lg tracking-wide text-bold">
32+
{content.title}
33+
</h3>
34+
{#if content?.excerpt}
35+
<p class="text-sm font-hairline">{content.excerpt}</p>
36+
{/if}
37+
</div>
38+
</section>
39+
</a>
40+
</div>
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script>
2+
import Podcasts from '$lib/components/global/icons/nav/Podcasts.svelte';
3+
</script>
4+
5+
<div class="mx-auto my-3">
6+
<div class="relative d-inline-block z-1">
7+
<Podcasts />
8+
</div>
9+
</div>
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<script>
2+
import { RadioGroup, RadioItem } from '@codingcatdev/blackcatui';
3+
import GitLineGradient from '../(home-campaign)/GitLineGradient.svelte';
4+
5+
let subscription = 1;
6+
</script>
7+
8+
<div class="bcu-card bg-gradient-to-b from-surface-700 to-primary-500 p-8 shadow-lg lg:w-full">
9+
<header class="bcu-card-header flex justify-center">
10+
<RadioGroup hover="hover:variant-ghost-surface" background="bg-primary-200-700-token">
11+
<RadioItem bind:group={subscription} name="justify" value={1}>Annual</RadioItem>
12+
<RadioItem bind:group={subscription} name="justify" value={0}>Monthly</RadioItem>
13+
</RadioGroup>
14+
</header>
15+
<section class="p-8 sm:p-20 flex justify-center text-surface-100">
16+
<div class="flex flex-col items-center relative">
17+
{#if subscription}
18+
<div class="absolute text-2xl top-0 left-0">$</div>
19+
<h6 class="!text-9xl !font-medium">48</h6>
20+
<div class="mb-6">
21+
<span class="font-medium text-xs">Save $12 compared to monthly</span>
22+
</div>
23+
{:else}
24+
<div class="absolute text-2xl top-0 left-0">$</div>
25+
<h6 class="!text-9xl !font-medium">5</h6>
26+
<div class="mb-6"><span class="font-medium text-xs">Just $0.17 per day</span></div>
27+
{/if}
28+
</div>
29+
</section>
30+
<footer class="bcu-card-footer text-surface-100-800-token">
31+
<div class="flex flex-col items-center gap-8">
32+
<a href="/terms-of-use" class="!text-surface-100-800-token">Terms & Conditions</a>
33+
<a href="/login?redirectTo=/dashboard" class="bcu-button variant-filled-surface w-full"
34+
>Let's do it!</a
35+
>
36+
</div>
37+
</footer>
38+
</div>

apps/codingcatdev/src/routes/(home-partials)/(home-pro-benefits)/HomeProBenefits.svelte

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,14 @@
88
</script>
99

1010
<section class="bg-primary-200-700-token">
11-
<div
12-
class="grid justify-center grid-cols-1 px-8 mx-auto gap-2 2xl:gap-10 2xl:min-h-768 max-w-7xl relative"
13-
>
11+
<div class="grid justify-center grid-cols-1 px-8 mx-auto gap-2 2xl:gap-10 max-w-7xl relative">
1412
<div class="flex">
1513
<div class="flex flex-col basis-1/12 relative">
1614
<GitLineGradient />
1715
<CheckBadgeSvg />
1816
<GitLineGradient rotate={true} />
1917
</div>
20-
<div class="basis-11/12 pl-4 sm:pl-2 py-48">
18+
<div class="basis-11/12 pl-4 sm:pl-2 py-20 sm:py-48">
2119
<div class="flex flex-col lg:flex-row gap-8 items-center">
2220
<div class="sm:basis-2/3 flex flex-col justify-center gap-8">
2321
<div class="flex flex-col gap-4">

apps/codingcatdev/src/routes/(layout-partials)/CcdFooter.svelte

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,7 @@
55
</script>
66

77
<hr />
8-
<footer
9-
class="grid justify-center grid-cols-1 px-8 pt-12 mx-auto gap-2 2xl:gap-10 2xl:min-h-768 max-w-7xl"
10-
>
8+
<footer class="grid justify-center grid-cols-1 px-8 pt-12 mx-auto gap-2 2xl:gap-10 max-w-7xl">
119
<div class="flex flex-col gap-6 md:gap-10">
1210
<section class="flex flex-col md:flex-row justify-between gap-8 md:space-y-0 items-center">
1311
<p class="text-xs">

apps/codingcatdev/src/routes/+layout.server.ts

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,37 @@
1+
import { listContent, getContentTypeDirectory } from '$lib/server/content';
12
import { ccdValidateSessionCookie, validateStripeRole } from '$lib/server/firebase';
3+
import { type Content, ContentType } from '$lib/types';
4+
import type { Cookies } from '@sveltejs/kit';
25
export const prerender = false;
3-
export const load = (async ({ cookies }) => {
6+
export const load = (async ({ cookies }: { cookies: Cookies }) => {
47
try {
8+
// Get latest podcast
9+
const podcasts = (await listContent<Content>({
10+
contentItems: await getContentTypeDirectory<Content>(ContentType.podcast),
11+
limit: 5
12+
})).content
513

614
const ccdsession = cookies.get('session');
715
if (!ccdsession) {
8-
return {};
16+
return {
17+
podcasts
18+
};
919
}
1020
const user = await ccdValidateSessionCookie(ccdsession);
1121

1222
// Revalidate needed after stripe subsciption
1323
const stripeRole = await validateStripeRole(user.uid);
24+
1425
return {
1526
user: {
1627
...user,
17-
stripeRole
28+
stripeRole,
29+
podcasts,
1830
}
1931
};
32+
33+
34+
2035
} catch (error) {
2136
cookies.set('session', "", { expires: new Date(0) });
2237

0 commit comments

Comments
 (0)