File tree Expand file tree Collapse file tree
apps/codingcatdev/src/routes Expand file tree Collapse file tree Original file line number Diff line number Diff line change 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" >
Original file line number Diff line number Diff line change 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" >
Original file line number Diff line number Diff line change 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 >
Original file line number Diff line number Diff line change 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 >
Original file line number Diff line number Diff line change 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 >
Original file line number Diff line number Diff line change 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 >
Original file line number Diff line number Diff line change 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 >
Original file line number Diff line number Diff line change 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" >
Original file line number Diff line number Diff line change 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" >
Original file line number Diff line number Diff line change 1+ import { listContent , getContentTypeDirectory } from '$lib/server/content' ;
12import { ccdValidateSessionCookie , validateStripeRole } from '$lib/server/firebase' ;
3+ import { type Content , ContentType } from '$lib/types' ;
4+ import type { Cookies } from '@sveltejs/kit' ;
25export 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
You can’t perform that action at this time.
0 commit comments