Skip to content

Commit 91da591

Browse files
codercatdevcodercatdev
committed
adjusted main page
1 parent d5f1dc7 commit 91da591

3 files changed

Lines changed: 77 additions & 111 deletions

File tree

‎app/(main)/page.tsx‎

Lines changed: 65 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import type { HomePageQueryResult } from "@/sanity/types";
66
import { sanityFetch } from "@/sanity/lib/live";
77
import { homePageQuery } from "@/sanity/lib/queries";
88
import Link from "next/link";
9+
import CoverMedia from "@/components/cover-media";
910

1011
export default async function HomePage() {
1112
const [homePageFetch] = await Promise.all([
@@ -19,118 +20,96 @@ export default async function HomePage() {
1920
return (
2021
<div className="flex flex-col min-h-dvh">
2122
<main className="flex-1">
22-
<section className="w-full pb-12 md:py-24 lg:py-32">
23+
<section className="w-full pb-12 md:py-24 lg:py-32 flex flex-col items-center justify-center">
2324
<div className="container px-4 md:px-6 grid gap-8 md:grid-cols-2 lg:gap-16">
24-
{homePage?.featuredCourse && (
25-
<div className="space-y-4 flex flex-col items-start gap-2">
26-
<div className="inline-block rounded-lg bg-muted px-3 py-1 text-sm">
27-
Featured Course
28-
</div>
25+
<div className="flex flex-col items-start justify-center space-y-4">
26+
<h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl">
27+
CodingCat.dev Podcast
28+
</h1>
29+
<p className="max-w-[600px] text-muted-foreground md:text-xl/relaxed">
30+
Purrfect Podcast for Web Developers
31+
</p>
32+
<div className="flex flex-col gap-2 min-[400px]:flex-row">
2933
<Link
30-
href={`/${homePage?.featuredCourse?._type}/${homePage?.featuredCourse?.slug}`}
31-
className="w-full"
34+
href="/podcasts"
35+
className="inline-flex items-center justify-center rounded-md border border-transparent bg-primary px-5 py-3 text-base font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 sm:px-10"
3236
>
33-
{homePage?.featuredCourse?.coverImage && (
34-
<CoverImage
35-
image={homePage?.featuredCourse?.coverImage}
36-
priority
37-
/>
38-
)}
39-
<h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
40-
{homePage?.featuredCourse?.title}
41-
</h2>
42-
<p className="max-w-[600px] text-muted-foreground md:text-xl/relaxed">
43-
{homePage?.featuredCourse?.excerpt}
44-
</p>
37+
Explore Podcasts
4538
</Link>
46-
{homePage?.featuredCourse?.stripeProduct &&
47-
homePage?.featuredCourse?.title && (
48-
<div className="flex flex-col gap-2 min-[400px]:flex-row">
49-
<Buy
50-
stripeProduct={homePage?.featuredCourse?.stripeProduct}
51-
title={homePage?.featuredCourse?.title}
52-
/>
53-
<UserGoProButton />
54-
</div>
55-
)}
5639
</div>
57-
)}
58-
40+
</div>
5941
{homePage?.latestPodcast && (
6042
<div className="space-y-4 flex flex-col items-start gap-2">
6143
<div className="inline-block rounded-lg bg-muted px-3 py-1 text-sm">
6244
Latest Podcast
6345
</div>
64-
<Link
65-
href={`/${homePage?.latestPodcast?._type}/${homePage?.latestPodcast?.slug}`}
66-
className="w-full"
67-
>
68-
{homePage?.latestPodcast?.coverImage && (
69-
<CoverImage
70-
image={homePage?.latestPodcast?.coverImage}
71-
priority
72-
/>
73-
)}
74-
<h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
75-
{homePage?.latestPodcast?.title}
76-
</h2>
77-
<p className="max-w-[600px] text-muted-foreground md:text-xl/relaxed">
78-
{homePage?.latestPodcast?.excerpt}
79-
</p>
80-
</Link>
46+
<div className="w-full">
47+
<CoverMedia
48+
cloudinaryImage={homePage?.latestPodcast?.coverImage}
49+
cloudinaryVideo={homePage?.latestPodcast?.videoCloudinary}
50+
youtube={homePage?.latestPodcast?.youtube}
51+
className="w-full aspect-video rounded-md"
52+
/>
53+
</div>
8154
</div>
8255
)}
8356
</div>
8457
</section>
85-
<section className="w-full py-12 md:py-24 lg:py-32 bg-muted">
86-
<div className="relative mb-32 flex flex-col justify-center items-center">
87-
<div className="lg:absolute lg:-mt-36 px-8">
88-
<CarbonAdBanner />
89-
</div>
90-
</div>
58+
<section className="w-full py-12 md:py-24 lg:py-32 bg-muted flex flex-col items-center justify-center">
9159
<div className="container px-4 md:px-6">
9260
<div className="flex flex-col items-center justify-center space-y-4 text-center">
9361
<div className="space-y-2">
9462
<h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">
95-
Featured Courses
63+
Latest Podcasts
9664
</h2>
9765
<p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
98-
Check out our best courses.
66+
Check out our latest podcasts.
9967
</p>
10068
</div>
10169
</div>
102-
<div className="mx-auto grid max-w-5xl items-start gap-6 py-12 lg:grid-cols-2 lg:gap-12">
103-
{homePage?.featuredCourses?.map((fc) => (
104-
<div key={fc._id} className="space-y-4">
105-
<div className="inline-block rounded-lg bg-muted px-3 py-1 text-sm">
106-
Featured Course
70+
<div className="mx-auto grid max-w-5xl items-center gap-6 py-12 lg:grid-cols-2 lg:gap-12">
71+
{homePage?.latestPodcasts
72+
?.slice(0, homePage?.latestPodcasts.length / 2)
73+
.map((_p, i) => (
74+
<div
75+
className="grid gap-4"
76+
key={`podcasts-group-${homePage?.latestPodcasts[i * 2]?._id}-${homePage?.latestPodcasts[i * 2 + 1]?._id}`}
77+
>
78+
{homePage?.latestPodcasts
79+
?.slice(i * 2, i * 2 + 2)
80+
.map((podcast) => (
81+
<Link
82+
key={podcast?._id}
83+
href={`/${podcast?._type}/${podcast?.slug}`}
84+
className="flex flex-col gap-4 shadow-sm hover:scale-105 transform transition duration-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring bg-muted"
85+
prefetch={false}
86+
>
87+
<div className="flex flex-col">
88+
{podcast.coverImage && (
89+
<CoverImage
90+
image={podcast.coverImage}
91+
width={320}
92+
height={180}
93+
className="aspect-video w-full object-cover object-center"
94+
/>
95+
)}
96+
<div className="flex flex-col gap-2 p-2 sm:p-6">
97+
<h3 className="text-xl sm:text-3xl font-semibold">
98+
{podcast.title}
99+
</h3>
100+
<p className="text-sm text-muted-foreground line-clamp-2">
101+
{podcast.excerpt}
102+
</p>
103+
</div>
104+
</div>
105+
</Link>
106+
))}
107107
</div>
108-
<Link href={`${fc?._type}/${fc?.slug}`}>
109-
{fc?.coverImage && <CoverImage image={fc?.coverImage} />}
110-
</Link>
111-
<Link href={`${fc?._type}/${fc?.slug}`}>
112-
<h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
113-
{fc?.title}
114-
</h2>
115-
</Link>
116-
<p className="max-w-[600px] text-muted-foreground md:text-xl/relaxed">
117-
{fc?.excerpt}
118-
</p>
119-
{fc?.stripeProduct && fc?.title && (
120-
<div className="flex flex-col gap-2 min-[400px]:flex-row">
121-
<Buy
122-
stripeProduct={fc?.stripeProduct}
123-
title={fc?.title}
124-
/>
125-
<UserGoProButton />
126-
</div>
127-
)}
128-
</div>
129-
))}
108+
))}
130109
</div>
131110
</div>
132111
</section>
133-
<section className="w-full py-12 md:py-24 lg:py-32 ">
112+
<section className="w-full py-12 md:py-24 lg:py-32 flex flex-col items-center justify-center ">
134113
<div className="container px-4 md:px-6">
135114
<div className="flex flex-col items-center justify-center space-y-4 text-center">
136115
<div className="space-y-2">
@@ -185,7 +164,7 @@ export default async function HomePage() {
185164
</div>
186165
</div>
187166
</section>
188-
<section className="w-full py-12 md:py-24 lg:py-32 bg-muted">
167+
<section className="w-full py-12 md:py-24 lg:py-32 bg-muted flex flex-col items-center justify-center">
189168
<div className="container px-4 md:px-6">
190169
<div className="flex flex-col items-center justify-center space-y-4 text-center">
191170
<div className="space-y-2">

‎sanity/lib/queries.ts‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -118,15 +118,12 @@ const sponsorRelated = `
118118
`;
119119

120120
export const homePageQuery = groq`*[_type == "settings" ][0]{
121-
"featuredCourse": *[_type == "course" && featured > 0]|order(featured desc)[0]{
122-
${baseFieldsNoContent},
123-
${courseFields},
124-
},
125-
"featuredCourses": *[_type == "course" && featured > 0]|order(featured desc)[0...4]{
121+
"latestPodcast": *[_type == "podcast"]|order(date desc)[0]{
126122
${baseFieldsNoContent},
127-
${courseFields},
123+
youtube,
124+
videoCloudinary,
128125
},
129-
"latestPodcast": *[_type == "podcast"]|order(date desc)[0]{
126+
"latestPodcasts": *[_type == "podcast"]|order(date desc)[0...4]{
130127
${baseFieldsNoContent},
131128
},
132129
"topPodcasts": *[_type == "podcast" && statistics.youtube.viewCount > 0]|order(statistics.youtube.viewCount desc)[0...4]{

‎sanity/types.ts‎

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1764,31 +1764,21 @@ export type SettingsQueryResult = {
17641764
} | null;
17651765
} | null;
17661766
// Variable: homePageQuery
1767-
// Query: *[_type == "settings" ][0]{ "featuredCourse": *[_type == "course" && featured > 0]|order(featured desc)[0]{ _id, _type, "status": select(_originalId in path("drafts.**") => "draft", "published"), "title": coalesce(title, "Untitled"), "slug": slug.current, excerpt, coverImage, "date": coalesce(date, _createdAt), stripeProduct, }, "featuredCourses": *[_type == "course" && featured > 0]|order(featured desc)[0...4]{ _id, _type, "status": select(_originalId in path("drafts.**") => "draft", "published"), "title": coalesce(title, "Untitled"), "slug": slug.current, excerpt, coverImage, "date": coalesce(date, _createdAt), stripeProduct, }, "latestPodcast": *[_type == "podcast"]|order(date desc)[0]{ _id, _type, "status": select(_originalId in path("drafts.**") => "draft", "published"), "title": coalesce(title, "Untitled"), "slug": slug.current, excerpt, coverImage, "date": coalesce(date, _createdAt), }, "topPodcasts": *[_type == "podcast" && statistics.youtube.viewCount > 0]|order(statistics.youtube.viewCount desc)[0...4]{ _id, _type, "status": select(_originalId in path("drafts.**") => "draft", "published"), "title": coalesce(title, "Untitled"), "slug": slug.current, excerpt, coverImage, "date": coalesce(date, _createdAt), }, "latestPosts": *[_type == "post"]|order(date desc)[0...4]{ _id, _type, "status": select(_originalId in path("drafts.**") => "draft", "published"), "title": coalesce(title, "Untitled"), "slug": slug.current, excerpt, coverImage, "date": coalesce(date, _createdAt), }, "topPosts": *[_type == "post" && statistics.youtube.viewCount > 0]|order(statistics.youtube.viewCount desc)[0...4]{ _id, _type, "status": select(_originalId in path("drafts.**") => "draft", "published"), "title": coalesce(title, "Untitled"), "slug": slug.current, excerpt, coverImage, "date": coalesce(date, _createdAt), },}
1767+
// Query: *[_type == "settings" ][0]{ "latestPodcast": *[_type == "podcast"]|order(date desc)[0]{ _id, _type, "status": select(_originalId in path("drafts.**") => "draft", "published"), "title": coalesce(title, "Untitled"), "slug": slug.current, excerpt, coverImage, "date": coalesce(date, _createdAt), youtube, videoCloudinary, }, "latestPodcasts": *[_type == "podcast"]|order(date desc)[0...4]{ _id, _type, "status": select(_originalId in path("drafts.**") => "draft", "published"), "title": coalesce(title, "Untitled"), "slug": slug.current, excerpt, coverImage, "date": coalesce(date, _createdAt), }, "topPodcasts": *[_type == "podcast" && statistics.youtube.viewCount > 0]|order(statistics.youtube.viewCount desc)[0...4]{ _id, _type, "status": select(_originalId in path("drafts.**") => "draft", "published"), "title": coalesce(title, "Untitled"), "slug": slug.current, excerpt, coverImage, "date": coalesce(date, _createdAt), }, "latestPosts": *[_type == "post"]|order(date desc)[0...4]{ _id, _type, "status": select(_originalId in path("drafts.**") => "draft", "published"), "title": coalesce(title, "Untitled"), "slug": slug.current, excerpt, coverImage, "date": coalesce(date, _createdAt), }, "topPosts": *[_type == "post" && statistics.youtube.viewCount > 0]|order(statistics.youtube.viewCount desc)[0...4]{ _id, _type, "status": select(_originalId in path("drafts.**") => "draft", "published"), "title": coalesce(title, "Untitled"), "slug": slug.current, excerpt, coverImage, "date": coalesce(date, _createdAt), },}
17681768
export type HomePageQueryResult = {
1769-
featuredCourse: {
1769+
latestPodcast: {
17701770
_id: string;
1771-
_type: "course";
1771+
_type: "podcast";
17721772
status: "draft" | "published";
17731773
title: string | "Untitled";
17741774
slug: string | null;
17751775
excerpt: string | null;
17761776
coverImage: CloudinaryAsset | null;
17771777
date: string;
1778-
stripeProduct: string | null;
1778+
youtube: string | null;
1779+
videoCloudinary: CloudinaryAsset | null;
17791780
} | null;
1780-
featuredCourses: Array<{
1781-
_id: string;
1782-
_type: "course";
1783-
status: "draft" | "published";
1784-
title: string | "Untitled";
1785-
slug: string | null;
1786-
excerpt: string | null;
1787-
coverImage: CloudinaryAsset | null;
1788-
date: string;
1789-
stripeProduct: string | null;
1790-
}>;
1791-
latestPodcast: {
1781+
latestPodcasts: Array<{
17921782
_id: string;
17931783
_type: "podcast";
17941784
status: "draft" | "published";
@@ -1797,7 +1787,7 @@ export type HomePageQueryResult = {
17971787
excerpt: string | null;
17981788
coverImage: CloudinaryAsset | null;
17991789
date: string;
1800-
} | null;
1790+
}>;
18011791
topPodcasts: Array<{
18021792
_id: string;
18031793
_type: "podcast";
@@ -10889,7 +10879,7 @@ declare module "@sanity/client" {
1088910879
interface SanityQueries {
1089010880
"count(*[_type == $type])": DocCountResult;
1089110881
"*[_type == \"settings\"][0]{\n ...,\n ogImage{\n secure_url\n }\n}": SettingsQueryResult;
10892-
"*[_type == \"settings\" ][0]{\n \"featuredCourse\": *[_type == \"course\" && featured > 0]|order(featured desc)[0]{\n \n _id,\n _type,\n \"status\": select(_originalId in path(\"drafts.**\") => \"draft\", \"published\"),\n \"title\": coalesce(title, \"Untitled\"),\n \"slug\": slug.current,\n excerpt,\n coverImage,\n \"date\": coalesce(date, _createdAt)\n,\n \n stripeProduct\n,\n },\n \"featuredCourses\": *[_type == \"course\" && featured > 0]|order(featured desc)[0...4]{\n \n _id,\n _type,\n \"status\": select(_originalId in path(\"drafts.**\") => \"draft\", \"published\"),\n \"title\": coalesce(title, \"Untitled\"),\n \"slug\": slug.current,\n excerpt,\n coverImage,\n \"date\": coalesce(date, _createdAt)\n,\n \n stripeProduct\n,\n },\n \"latestPodcast\": *[_type == \"podcast\"]|order(date desc)[0]{\n \n _id,\n _type,\n \"status\": select(_originalId in path(\"drafts.**\") => \"draft\", \"published\"),\n \"title\": coalesce(title, \"Untitled\"),\n \"slug\": slug.current,\n excerpt,\n coverImage,\n \"date\": coalesce(date, _createdAt)\n,\n },\n \"topPodcasts\": *[_type == \"podcast\" && statistics.youtube.viewCount > 0]|order(statistics.youtube.viewCount desc)[0...4]{\n \n _id,\n _type,\n \"status\": select(_originalId in path(\"drafts.**\") => \"draft\", \"published\"),\n \"title\": coalesce(title, \"Untitled\"),\n \"slug\": slug.current,\n excerpt,\n coverImage,\n \"date\": coalesce(date, _createdAt)\n,\n },\n \"latestPosts\": *[_type == \"post\"]|order(date desc)[0...4]{\n \n _id,\n _type,\n \"status\": select(_originalId in path(\"drafts.**\") => \"draft\", \"published\"),\n \"title\": coalesce(title, \"Untitled\"),\n \"slug\": slug.current,\n excerpt,\n coverImage,\n \"date\": coalesce(date, _createdAt)\n,\n },\n \"topPosts\": *[_type == \"post\" && statistics.youtube.viewCount > 0]|order(statistics.youtube.viewCount desc)[0...4]{\n \n _id,\n _type,\n \"status\": select(_originalId in path(\"drafts.**\") => \"draft\", \"published\"),\n \"title\": coalesce(title, \"Untitled\"),\n \"slug\": slug.current,\n excerpt,\n coverImage,\n \"date\": coalesce(date, _createdAt)\n,\n },\n}": HomePageQueryResult;
10882+
"*[_type == \"settings\" ][0]{\n \"latestPodcast\": *[_type == \"podcast\"]|order(date desc)[0]{\n \n _id,\n _type,\n \"status\": select(_originalId in path(\"drafts.**\") => \"draft\", \"published\"),\n \"title\": coalesce(title, \"Untitled\"),\n \"slug\": slug.current,\n excerpt,\n coverImage,\n \"date\": coalesce(date, _createdAt)\n,\n youtube,\n videoCloudinary,\n },\n \"latestPodcasts\": *[_type == \"podcast\"]|order(date desc)[0...4]{\n \n _id,\n _type,\n \"status\": select(_originalId in path(\"drafts.**\") => \"draft\", \"published\"),\n \"title\": coalesce(title, \"Untitled\"),\n \"slug\": slug.current,\n excerpt,\n coverImage,\n \"date\": coalesce(date, _createdAt)\n,\n },\n \"topPodcasts\": *[_type == \"podcast\" && statistics.youtube.viewCount > 0]|order(statistics.youtube.viewCount desc)[0...4]{\n \n _id,\n _type,\n \"status\": select(_originalId in path(\"drafts.**\") => \"draft\", \"published\"),\n \"title\": coalesce(title, \"Untitled\"),\n \"slug\": slug.current,\n excerpt,\n coverImage,\n \"date\": coalesce(date, _createdAt)\n,\n },\n \"latestPosts\": *[_type == \"post\"]|order(date desc)[0...4]{\n \n _id,\n _type,\n \"status\": select(_originalId in path(\"drafts.**\") => \"draft\", \"published\"),\n \"title\": coalesce(title, \"Untitled\"),\n \"slug\": slug.current,\n excerpt,\n coverImage,\n \"date\": coalesce(date, _createdAt)\n,\n },\n \"topPosts\": *[_type == \"post\" && statistics.youtube.viewCount > 0]|order(statistics.youtube.viewCount desc)[0...4]{\n \n _id,\n _type,\n \"status\": select(_originalId in path(\"drafts.**\") => \"draft\", \"published\"),\n \"title\": coalesce(title, \"Untitled\"),\n \"slug\": slug.current,\n excerpt,\n coverImage,\n \"date\": coalesce(date, _createdAt)\n,\n },\n}": HomePageQueryResult;
1089310883
"*[_type == \"page\" && slug.current == $slug] [0] {\n \n _id,\n _type,\n \"status\": select(_originalId in path(\"drafts.**\") => \"draft\", \"published\"),\n \"title\": coalesce(title, \"Untitled\"),\n \"slug\": slug.current,\n excerpt,\n coverImage,\n \"date\": coalesce(date, _createdAt)\n,\n \n content[]{\n ...,\n markDefs[]{\n ...,\n _type == \"internalLink\" => {\n @.reference->_type == \"page\" => {\n \"href\": \"/\" + @.reference->slug.current\n },\n @.reference->_type != \"page\" => {\n \"href\": \"/\" + @.reference->_type + \"/\" + @.reference->slug.current\n }\n },\n }\n },\n author[]->{\n ...,\n \"title\": coalesce(title, \"Anonymous\"),\n \"slug\": slug.current,\n },\n devto,\n hashnode,\n sponsor[]->{\n ...,\n \"title\": coalesce(title, \"Anonymous\"),\n \"slug\": slug.current,\n },\n tags,\n videoCloudinary,\n youtube\n\n}": PageQueryResult;
1089410884
"*[_type == \"post\" && defined(slug.current)] | order(date desc, _updatedAt desc) [0] {\n \n _id,\n _type,\n \"status\": select(_originalId in path(\"drafts.**\") => \"draft\", \"published\"),\n \"title\": coalesce(title, \"Untitled\"),\n \"slug\": slug.current,\n excerpt,\n coverImage,\n \"date\": coalesce(date, _createdAt)\n,\n author[]->{\n ...,\n \"title\": coalesce(title, \"Anonymous\"),\n \"slug\": slug.current,\n }\n}": BlogQueryResult;
1089510885
"*[_type == \"post\" && _id != $skip && defined(slug.current)] | order(date desc, _updatedAt desc) [$offset...$limit] {\n \n _id,\n _type,\n \"status\": select(_originalId in path(\"drafts.**\") => \"draft\", \"published\"),\n \"title\": coalesce(title, \"Untitled\"),\n \"slug\": slug.current,\n excerpt,\n coverImage,\n \"date\": coalesce(date, _createdAt)\n,\n author[]->{\n ...,\n \"title\": coalesce(title, \"Anonymous\"),\n \"slug\": slug.current,\n }\n}": MorePostQueryResult;

0 commit comments

Comments
 (0)