Skip to content

Commit d32599b

Browse files
NiallJoeMaherNiallJoeMaher
authored
Update the Codú challenge banner (#1145)
* Update the Codú challenge banner * Fix the col layouts so they are consistent on feed and homepage. * Remove image that is no longer used * Fix broken tests * Make button full width
1 parent 474c544 commit d32599b

File tree

5 files changed

+40
-62
lines changed

5 files changed

+40
-62
lines changed

‎app/(app)/articles/_client.tsx‎

Lines changed: 5 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,12 @@ import ArticleLoading from "@/components/ArticlePreview/ArticleLoading";
77
import { useInView } from "react-intersection-observer";
88
import { useSearchParams, useRouter } from "next/navigation";
99
import Link from "next/link";
10-
import Image from "next/image";
11-
import challenge from "@/public/images/announcements/challenge.png";
1210
import { api } from "@/server/trpc/react";
1311
import SideBarSavedPosts from "@/components/SideBar/SideBarSavedPosts";
1412
import { useSession } from "next-auth/react";
1513
import { getCamelCaseFromLower } from "@/utils/utils";
1614
import PopularTagsLoading from "@/components/PopularTags/PopularTagsLoading";
15+
import CoduChallenge from "@/components/CoduChallenge/CoduChallenge";
1716

1817
const ArticlesPage = () => {
1918
const searchParams = useSearchParams();
@@ -97,8 +96,8 @@ const ArticlesPage = () => {
9796
</select>
9897
</div>
9998
</div>
100-
<div className="mx-auto grid-cols-12 gap-8 sm:max-w-2xl lg:grid lg:max-w-5xl">
101-
<div className="relative md:col-span-8">
99+
<div className="mx-auto grid-cols-12 gap-6 sm:max-w-2xl lg:grid lg:max-w-5xl">
100+
<div className="relative md:col-span-7">
102101
<section>
103102
{status === "error" && (
104103
<div className="mt-8">
@@ -157,29 +156,8 @@ const ArticlesPage = () => {
157156
</span>
158157
</section>
159158
</div>
160-
<section className="col-span-4 hidden lg:block">
161-
<div className="mb-8 mt-2 rounded border border-neutral-300 bg-white text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50">
162-
<Link href="/articles/join-our-6-week-writing-challenge-quohtgqb">
163-
<Image
164-
className="w-full rounded-t"
165-
src={challenge}
166-
alt={`"Codú Writing Challenge" text on white background`}
167-
/>
168-
</Link>
169-
<div className="my-3 break-words px-4 py-2 text-sm tracking-wide">
170-
<Link
171-
className="block text-lg font-semibold leading-6 underline"
172-
href="/articles/join-our-6-week-writing-challenge-quohtgqb"
173-
>
174-
Join the Codú writing challenge!
175-
</Link>
176-
<p className="my-3">
177-
Join our first Codú challenge! Write 6 articles in 6 weeks and
178-
earn a swag bag.
179-
</p>
180-
<p>Click the link to find out more.</p>
181-
</div>
182-
</div>
159+
<section className="col-span-5 hidden lg:block">
160+
<CoduChallenge />
183161
<h3 className="mb-4 mt-4 text-2xl font-semibold leading-6 tracking-wide">
184162
Popular topics
185163
</h3>
@@ -189,7 +167,6 @@ const ArticlesPage = () => {
189167
tagsData.data.map(({ title }) => (
190168
<Link
191169
key={title}
192-
// only reason this is toLowerCase is to make url look nicer. Not needed for functionality
193170
href={`/articles?tag=${title.toLowerCase()}`}
194171
className="rounded border border-neutral-300 bg-white px-6 py-2 text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50"
195172
>

‎app/(app)/page.tsx‎

Lines changed: 3 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import { Suspense } from "react";
2-
import Image from "next/image";
32
import Link from "next/link";
4-
import challenge from "public/images/announcements/challenge.png";
53
import Hero from "@/components/Hero/Hero";
64
import TrendingPosts from "@/components/TrendingPosts/TrendingPosts";
75
import TrendingLoading from "@/components/TrendingPosts/TrendingPostsLoading";
86
import SideBarSavedPosts from "@/components/SideBar/SideBarSavedPosts";
97
import { getServerAuthSession } from "@/server/auth";
108
import PopularTags from "@/components/PopularTags/PopularTags";
119
import PopularTagsLoading from "@/components/PopularTags/PopularTagsLoading";
10+
import CoduChallenge from "@/components/CoduChallenge/CoduChallenge";
1211

1312
const Home = async () => {
1413
const session = await getServerAuthSession();
@@ -47,33 +46,12 @@ const Home = async () => {
4746
Trending
4847
</h3>
4948
</div>
50-
<div className="mx-auto grid-cols-12 gap-8 sm:max-w-2xl lg:grid lg:max-w-5xl">
49+
<div className="mx-auto grid-cols-12 gap-6 sm:max-w-2xl lg:grid lg:max-w-5xl">
5150
<Suspense fallback={<TrendingLoading />}>
5251
<TrendingPosts session={session} />
5352
</Suspense>
5453
<section className="col-span-5 hidden lg:block">
55-
<div className="mb-8 mt-2 rounded border border-neutral-300 bg-white text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50">
56-
<Link href="/articles/join-our-6-week-writing-challenge-quohtgqb">
57-
<Image
58-
className="w-full rounded-t"
59-
src={challenge}
60-
alt={`"Codú Writing Challenge" text on white background`}
61-
/>
62-
</Link>
63-
<div className="my-3 break-words px-4 py-2 text-sm tracking-wide">
64-
<Link
65-
className="block text-lg font-semibold leading-6 underline"
66-
href="/articles/join-our-6-week-writing-challenge-quohtgqb"
67-
>
68-
Join the Codú writing challenge!
69-
</Link>
70-
<p className="my-3">
71-
Join our first Codú challenge! Write 6 articles in 6 weeks and
72-
earn a swag bag.
73-
</p>
74-
<p>Click the link to find out more.</p>
75-
</div>
76-
</div>
54+
<CoduChallenge />
7755
<h4 className="mb-4 mt-4 text-2xl font-semibold leading-6 tracking-wide">
7856
Popular topics
7957
</h4>

‎components/CoduChallenge/CoduChallenge.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import Link from "next/link";
2+
3+
const CoduChallenge = () => {
4+
return (
5+
<div className="mb-8 mt-2 overflow-hidden rounded border border-neutral-300 bg-gradient-to-br from-blue-600 to-pink-600 text-white shadow-lg dark:border-neutral-600">
6+
<div className="p-6">
7+
<h3 className="mb-2 text-2xl font-bold">Ready for a challenge?</h3>
8+
<p className="mb-4 text-lg">
9+
Write 6 articles in 6 weeks, showcase your expertise, and win
10+
exclusive Codú swag!
11+
</p>
12+
<Link
13+
href="/articles/join-our-6-week-writing-challenge-quohtgqb"
14+
className="flex items-center justify-center rounded bg-white px-6 py-2 text-sm font-semibold text-pink-600 transition-colors hover:bg-pink-100"
15+
>
16+
Find out more
17+
</Link>
18+
</div>
19+
</div>
20+
);
21+
};
22+
23+
export default CoduChallenge;

‎e2e/articles.spec.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ test.describe("Unauthenticated Articles Page", () => {
1111
page.getByRole("heading", { name: "Popular topics" }),
1212
).toBeVisible({ visible: !isMobile });
1313

14-
await expect(
15-
page.getByRole("link", { name: '"Codú Writing Challenge" text' }),
16-
).toBeVisible({ visible: !isMobile });
14+
await expect(page.getByRole("link", { name: "Find out more" })).toBeVisible(
15+
{ visible: !isMobile },
16+
);
1717
});
1818

1919
test("Should not show bookmark article icon", async ({ page }) => {
@@ -66,9 +66,9 @@ test.describe("Authenticated Articles Page", () => {
6666
page.getByRole("heading", { name: "Popular topics" }),
6767
).toBeVisible({ visible: !isMobile });
6868

69-
await expect(
70-
page.getByRole("link", { name: '"Codú Writing Challenge" text' }),
71-
).toBeVisible({ visible: !isMobile });
69+
await expect(page.getByRole("link", { name: "Find out more" })).toBeVisible(
70+
{ visible: !isMobile },
71+
);
7272

7373
await expect(
7474
page.getByRole("heading", { name: "Recent bookmarks" }),
@@ -81,9 +81,9 @@ test.describe("Authenticated Articles Page", () => {
8181
page.getByRole("heading", { name: "Popular topics" }),
8282
).toBeVisible({ visible: !isMobile });
8383

84-
await expect(
85-
page.getByRole("link", { name: '"Codú Writing Challenge" text' }),
86-
).toBeVisible({ visible: !isMobile });
84+
await expect(page.getByRole("link", { name: "Find out more" })).toBeVisible(
85+
{ visible: !isMobile },
86+
);
8787

8888
await expect(
8989
page.getByRole("heading", { name: "Recent bookmarks" }),

‎public/images/announcements/challenge.png‎

-42.5 KB
Binary file not shown.

0 commit comments

Comments
 (0)