Skip to content

Update the Codú challenge banner #1145

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Oct 18, 2024
Merged

Update the Codú challenge banner #1145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7db16d9
Update the Codú challenge banner
NiallJoeMaher Oct 17, 2024
51dd686
Update tests and see what happens
NiallJoeMaher Oct 17, 2024
55b9d95
Merge branch 'develop' of https://github.com/codu-code/codu into feat…
NiallJoeMaher Oct 18, 2024
17ca607
Fix broken tests
NiallJoeMaher Oct 18, 2024
8e7dbf2
Merge branch 'develop' of https://github.com/codu-code/codu into feat…
NiallJoeMaher Oct 18, 2024
6cdf90a
Make button full width
NiallJoeMaher Oct 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 5 additions & 28 deletions app/(app)/articles/_client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,12 @@ import ArticleLoading from "@/components/ArticlePreview/ArticleLoading";
import { useInView } from "react-intersection-observer";
import { useSearchParams, useRouter } from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import challenge from "@/public/images/announcements/challenge.png";
import { api } from "@/server/trpc/react";
import SideBarSavedPosts from "@/components/SideBar/SideBarSavedPosts";
import { useSession } from "next-auth/react";
import { getCamelCaseFromLower } from "@/utils/utils";
import PopularTagsLoading from "@/components/PopularTags/PopularTagsLoading";
import CoduChallenge from "@/components/CoduChallenge/CoduChallenge";

const ArticlesPage = () => {
const searchParams = useSearchParams();
Expand Down Expand Up @@ -97,8 +96,8 @@ const ArticlesPage = () => {
</select>
</div>
</div>
<div className="mx-auto grid-cols-12 gap-8 sm:max-w-2xl lg:grid lg:max-w-5xl">
<div className="relative md:col-span-8">
<div className="mx-auto grid-cols-12 gap-6 sm:max-w-2xl lg:grid lg:max-w-5xl">
<div className="relative md:col-span-7">
<section>
{status === "error" && (
<div className="mt-8">
Expand Down Expand Up @@ -157,29 +156,8 @@ const ArticlesPage = () => {
</span>
</section>
</div>
<section className="col-span-4 hidden lg:block">
<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">
<Link href="/articles/join-our-6-week-writing-challenge-quohtgqb">
<Image
className="w-full rounded-t"
src={challenge}
alt={`"Codú Writing Challenge" text on white background`}
/>
</Link>
<div className="my-3 break-words px-4 py-2 text-sm tracking-wide">
<Link
className="block text-lg font-semibold leading-6 underline"
href="/articles/join-our-6-week-writing-challenge-quohtgqb"
>
Join the Codú writing challenge!
</Link>
<p className="my-3">
Join our first Codú challenge! Write 6 articles in 6 weeks and
earn a swag bag.
</p>
<p>Click the link to find out more.</p>
</div>
</div>
<section className="col-span-5 hidden lg:block">
<CoduChallenge />
Comment on lines +159 to +160
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Issue Found: CoduChallenge component lacks responsive design implementation.

The CoduChallenge component is present and styled with gradient backgrounds as intended. However, it does not include responsive classes (e.g., sm:, md:, lg:, xl:), which may cause display issues on different screen sizes.

Please update the component to include responsive design classes to ensure it functions well across all devices.

🔗 Analysis chain

LGTM: CoduChallenge component added to sidebar.

The CoduChallenge component has been successfully added to the sidebar, and the column span has been adjusted accordingly. This change directly implements the new challenge banner as described in the PR objectives.

Please ensure that:

  1. The content of the CoduChallenge component matches the design specifications.
  2. The component is styled correctly and visually appealing.
  3. The component is responsive and displays well on different screen sizes.

You can verify this by running the following commands:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check the implementation of the CoduChallenge component

# Test 1: Verify the component file exists
fd -t f "CoduChallenge.tsx" components

# Test 2: Check for proper styling (assuming Tailwind classes are used)
rg -i "className=" components/CoduChallenge/CoduChallenge.tsx

# Test 3: Look for responsive design implementation
rg -i "sm:|md:|lg:|xl:" components/CoduChallenge/CoduChallenge.tsx

# Test 4: Ensure the component includes key elements mentioned in the PR (e.g., gradient design)
rg -i "gradient" components/CoduChallenge/CoduChallenge.tsx

Length of output: 889

<h3 className="mb-4 mt-4 text-2xl font-semibold leading-6 tracking-wide">
Popular topics
</h3>
Expand All @@ -189,7 +167,6 @@ const ArticlesPage = () => {
tagsData.data.map(({ title }) => (
<Link
key={title}
// only reason this is toLowerCase is to make url look nicer. Not needed for functionality
href={`/articles?tag=${title.toLowerCase()}`}
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"
>
Expand Down
28 changes: 3 additions & 25 deletions app/(app)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import { Suspense } from "react";
import Image from "next/image";
import Link from "next/link";
import challenge from "public/images/announcements/challenge.png";
import Hero from "@/components/Hero/Hero";
import TrendingPosts from "@/components/TrendingPosts/TrendingPosts";
import TrendingLoading from "@/components/TrendingPosts/TrendingPostsLoading";
import SideBarSavedPosts from "@/components/SideBar/SideBarSavedPosts";
import { getServerAuthSession } from "@/server/auth";
import PopularTags from "@/components/PopularTags/PopularTags";
import PopularTagsLoading from "@/components/PopularTags/PopularTagsLoading";
import CoduChallenge from "@/components/CoduChallenge/CoduChallenge";

const Home = async () => {
const session = await getServerAuthSession();
Expand Down Expand Up @@ -47,33 +46,12 @@ const Home = async () => {
Trending
</h3>
</div>
<div className="mx-auto grid-cols-12 gap-8 sm:max-w-2xl lg:grid lg:max-w-5xl">
<div className="mx-auto grid-cols-12 gap-6 sm:max-w-2xl lg:grid lg:max-w-5xl">
<Suspense fallback={<TrendingLoading />}>
<TrendingPosts session={session} />
</Suspense>
<section className="col-span-5 hidden lg:block">
<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">
<Link href="/articles/join-our-6-week-writing-challenge-quohtgqb">
<Image
className="w-full rounded-t"
src={challenge}
alt={`"Codú Writing Challenge" text on white background`}
/>
</Link>
<div className="my-3 break-words px-4 py-2 text-sm tracking-wide">
<Link
className="block text-lg font-semibold leading-6 underline"
href="/articles/join-our-6-week-writing-challenge-quohtgqb"
>
Join the Codú writing challenge!
</Link>
<p className="my-3">
Join our first Codú challenge! Write 6 articles in 6 weeks and
earn a swag bag.
</p>
<p>Click the link to find out more.</p>
</div>
</div>
<CoduChallenge />
<h4 className="mb-4 mt-4 text-2xl font-semibold leading-6 tracking-wide">
Popular topics
</h4>
Expand Down
23 changes: 23 additions & 0 deletions components/CoduChallenge/CoduChallenge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import Link from "next/link";

const CoduChallenge = () => {
return (
<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">
<div className="p-6">
<h3 className="mb-2 text-2xl font-bold">Ready for a challenge?</h3>
<p className="mb-4 text-lg">
Write 6 articles in 6 weeks, showcase your expertise, and win
exclusive Codú swag!
</p>
<Link
href="/articles/join-our-6-week-writing-challenge-quohtgqb"
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"
>
Find out more
</Link>
</div>
</div>
);
};

export default CoduChallenge;
18 changes: 9 additions & 9 deletions e2e/articles.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ test.describe("Unauthenticated Articles Page", () => {
page.getByRole("heading", { name: "Popular topics" }),
).toBeVisible({ visible: !isMobile });

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

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

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

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

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

await expect(
page.getByRole("heading", { name: "Recent bookmarks" }),
Expand Down
Binary file removed public/images/announcements/challenge.png
View file
Open in desktop
Binary file not shown.
Loading