Skip to content

fix: #3597 removed swags and goodies card #3598

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

Closed
wants to merge 2 commits into from
Closed

fix: #3597 removed swags and goodies card #3598

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
563ca79
removed swags and goodies card
anmolyadav-dev Jan 22, 2025
f498446
removed trailing spaces
anmolyadav-dev Jan 22, 2025
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
51 changes: 32 additions & 19 deletions components/community/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ interface CardProps {
btnText?: string;
btnBg?: string;
link: string;
customClasses?: string;
}

/**
Expand All @@ -45,30 +46,37 @@ export default function Card({
bg,
btnText = '',
btnBg = '',
link
link,
customClasses,
}: CardProps) {
if (type === CardType.SMALL) {
return (
<Link href={link} target={link.includes('http') ? '_blank' : undefined}>
<div
className={`w-full cursor-pointer rounded border border-[#ad20e2] p-3 shadow-xl ${bg}`}
data-testid='Card-small-bg'
className={`w-full cursor-pointer rounded border border-[#ad20e2] p-3 shadow-xl ${bg} ${customClasses}`}
data-testid="Card-small-bg"
>
<div className='flex w-min justify-between rounded-xl bg-gray-100 p-2 text-center text-xs'>
<span>{icon}</span> <span className='ml-[5px]'>{tagline}</span>
<div className="flex w-min justify-between rounded-xl bg-gray-100 p-2 text-center text-xs">
<span>{icon}</span> <span className="ml-[5px]">{tagline}</span>
</div>
<div className='mt-3' data-testid='Card-heading'>
<div className="mt-3" data-testid="Card-heading">
<Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.md}>
{heading}
</Heading>
</div>
<div className='mt-2' data-testid='Card-desc'>
<Paragraph textColor={bg === 'bg-white' ? 'text-gray-600' : 'text-black'} typeStyle={ParagraphTypeStyle.sm}>
<div className="mt-2" data-testid="Card-desc">
<Paragraph
textColor={bg === 'bg-white' ? 'text-gray-600' : 'text-black'}
typeStyle={ParagraphTypeStyle.sm}
>
{description}
</Paragraph>
</div>
<div className='flex w-full justify-end text-right' data-testid='Card-icon'>
<IconArrowUp className='w-[20px]' />
<div
className="flex w-full justify-end text-right"
data-testid="Card-icon"
>
<IconArrowUp className="w-[20px]" />
</div>
</div>
</Link>
Expand All @@ -78,27 +86,32 @@ export default function Card({
return (
<div
className={`h-140 w-full rounded border p-6 shadow-xl ${!bg && 'border-[#ad20e2]'} ${bg}`}
data-testid='Card-lg-bg'
data-testid="Card-lg-bg"
>
<div
className={`flex w-min justify-between rounded-xl p-2 text-center text-xs text-black ${taglineBg}`}
data-testid='Card-lg-tagline'
data-testid="Card-lg-tagline"
>
<span>{icon}</span> <span className='ml-[5px]'>{tagline}</span>
<span>{icon}</span> <span className="ml-[5px]">{tagline}</span>
</div>

<div className='mt-10' data-testid='Card-heading-lg'>
<Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg} textColor={bg && 'text-white'}>
<div className="mt-10" data-testid="Card-heading-lg">
<Heading
level={HeadingLevel.h1}
typeStyle={HeadingTypeStyle.lg}
textColor={bg && 'text-white'}
>
{heading}
</Heading>
</div>
<div className='mt-6' data-testid='Card-desc-lg'>
<div className="mt-6" data-testid="Card-desc-lg">
<Paragraph textColor={bg && 'text-gray-400'}>{description}</Paragraph>
</div>
<div className='mt-10'>
<Link href={link} data-testid='Card-link-lg'>
<div className="mt-10">
<Link href={link} data-testid="Card-link-lg">
<div className={`flex ${btnBg} cursor-pointer`}>
<IconArrowUp className={`w-[20px] ${btnBg}`} /> <span className='ml-2 text-sm'>{btnText}</span>
<IconArrowUp className={`w-[20px] ${btnBg}`} />{' '}
<span className="ml-2 text-sm">{btnText}</span>
</div>
</Link>
</div>
Expand Down
200 changes: 110 additions & 90 deletions pages/community/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,110 +28,126 @@ export default function CommunityIndexPage() {

return (
<GenericLayout
title='AsyncAPI Community Meetings'
description='The home for developer communities'
title="AsyncAPI Community Meetings"
description="The home for developer communities"
image={image}
wide
>
<div className='mt-15 md:hidden'>
<div className="mt-15 md:hidden">
<Header />
</div>
<Hero />
<div className='gh-img mt-10 h-auto w-full object-contain md:mt-0'>
<img className='gh-img object-contain' src='/img/homepage/discuss-page.webp' alt='github-discussion' />
<div className="gh-img mt-10 h-auto w-full object-contain md:mt-0">
<img
className="gh-img object-contain"
src="/img/homepage/discuss-page.webp"
alt="github-discussion"
/>
</div>
<div className='mt-20 flex flex-col items-center justify-center text-center'>
<div className="mt-20 flex flex-col items-center justify-center text-center">
<Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.xl}>
Home of #CommunityOps
</Heading>
<div>
<Heading
level={HeadingLevel.h2}
typeStyle={HeadingTypeStyle.bodyLg}
textColor='text-gray-700'
className='text-slate-500'
textColor="text-gray-700"
className="text-slate-500"
>
Join the conversation with over 10k+ developers from literally everywhere.
Join the conversation with over 10k+ developers from literally
everywhere.
</Heading>
</div>
</div>
Comment on lines +31 to 62
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 22, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue

Fix quote style to match project conventions.

The codebase appears to use single quotes for string literals, but this section uses double quotes. This is causing pipeline failures.

Apply this pattern throughout the file:

-      title="AsyncAPI Community Meetings"
+      title='AsyncAPI Community Meetings'
-      description="The home for developer communities"
+      description='The home for developer communities'
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
title="AsyncAPI Community Meetings"
description="The home for developer communities"
image={image}
wide
>
<div className='mt-15 md:hidden'>
<div className="mt-15 md:hidden">
<Header />
</div>
<Hero />
<div className='gh-img mt-10 h-auto w-full object-contain md:mt-0'>
<img className='gh-img object-contain' src='/img/homepage/discuss-page.webp' alt='github-discussion' />
<div className="gh-img mt-10 h-auto w-full object-contain md:mt-0">
<img
className="gh-img object-contain"
src="/img/homepage/discuss-page.webp"
alt="github-discussion"
/>
</div>
<div className='mt-20 flex flex-col items-center justify-center text-center'>
<div className="mt-20 flex flex-col items-center justify-center text-center">
<Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.xl}>
Home of #CommunityOps
</Heading>
<div>
<Heading
level={HeadingLevel.h2}
typeStyle={HeadingTypeStyle.bodyLg}
textColor='text-gray-700'
className='text-slate-500'
textColor="text-gray-700"
className="text-slate-500"
>
Join the conversation with over 10k+ developers from literally everywhere.
Join the conversation with over 10k+ developers from literally
everywhere.
</Heading>
</div>
</div>
title='AsyncAPI Community Meetings'
description='The home for developer communities'
image={image}
wide
>
<div className='mt-15 md:hidden'>
<Header />
</div>
<Hero />
<div className='gh-img mt-10 h-auto w-full object-contain md:mt-0'>
<img
className='gh-img object-contain'
src='/img/homepage/discuss-page.webp'
alt='github-discussion'
/>
</div>
<div className='mt-20 flex flex-col items-center justify-center text-center'>
<Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.xl}>
Home of #CommunityOps
</Heading>
<div>
<Heading
level={HeadingLevel.h2}
typeStyle={HeadingTypeStyle.bodyLg}
textColor='text-gray-700'
className='text-slate-500'
>
Join the conversation with over 10k+ developers from literally
everywhere.
</Heading>
</div>
</div>
🧰 Tools
🪛 eslint

[error] 31-31: Replace "AsyncAPI·Community·Meetings" with 'AsyncAPI·Community·Meetings'

(prettier/prettier)

[error] 31-31: Unexpected usage of doublequote.

(jsx-quotes)

[error] 32-32: Replace "The·home·for·developer·communities" with 'The·home·for·developer·communities'

(prettier/prettier)

[error] 32-32: Unexpected usage of doublequote.

(jsx-quotes)

[error] 36-36: Replace "mt-15·md:hidden" with 'mt-15·md:hidden'

(prettier/prettier)

[error] 36-36: Unexpected usage of doublequote.

(jsx-quotes)

[error] 40-40: Replace "gh-img·mt-10·h-auto·w-full·object-contain·md:mt-0" with 'gh-img·mt-10·h-auto·w-full·object-contain·md:mt-0'

(prettier/prettier)

[error] 40-40: Unexpected usage of doublequote.

(jsx-quotes)

[error] 41-45: Replace ⏎··········className="gh-img·object-contain"⏎··········src="/img/homepage/discuss-page.webp"⏎··········alt="github-discussion"⏎······· with ·className='gh-img·object-contain'·src='/img/homepage/discuss-page.webp'·alt='github-discussion'

(prettier/prettier)

[error] 42-42: Unexpected usage of doublequote.

(jsx-quotes)

[error] 43-43: Unexpected usage of doublequote.

(jsx-quotes)

[error] 44-44: Unexpected usage of doublequote.

(jsx-quotes)

[error] 47-47: Replace "mt-20·flex·flex-col·items-center·justify-center·text-center" with 'mt-20·flex·flex-col·items-center·justify-center·text-center'

(prettier/prettier)

[error] 47-47: Unexpected usage of doublequote.

(jsx-quotes)

[error] 55-55: Replace "text-gray-700" with 'text-gray-700'

(prettier/prettier)

[error] 55-55: Unexpected usage of doublequote.

(jsx-quotes)

[error] 56-56: Replace "text-slate-500" with 'text-slate-500'

(prettier/prettier)

[error] 56-56: Unexpected usage of doublequote.

(jsx-quotes)

[error] 58-59: Delete ⏎···········

(prettier/prettier)

🪛 GitHub Actions: PR testing - if Node project

[error] 31-199: Multiple ESLint and Prettier errors related to double quotes usage. Use single quotes instead of double quotes throughout the file.

<div data-testid='CommunityIndex-HomeCard'>
<div data-testid="CommunityIndex-HomeCard">
<HomeCards
headline='Thanking our AsyncAPI Ambassadors'
title='Ambassador Programs'
headline="Thanking our AsyncAPI Ambassadors"
title="Ambassador Programs"
description="Launch OSS community programs that your community is proud to
participate in. Let's build thriving OSS communities together!"
btnText='Become an ambassador'
link='/community/ambassadors'
className='bg-ambassador'
btnText="Become an ambassador"
link="/community/ambassadors"
className="bg-ambassador"
/>
</div>
<div className='mt-20 w-full md:flex md:justify-between'>
<div className='text-white md:w-1/2' data-testid='CommunityIndex-IssuesCard'>
<div className="mt-20 w-full md:flex md:justify-between">
<div
className="text-white md:w-1/2"
data-testid="CommunityIndex-IssuesCard"
>
<Card
taglineBg='bg-pink-100'
bg='bg-code-editor-dark'
heading='Explore and Contribute to Hot Issues'
description='Discover over 100s of interesting issues, suitable for new and existing contributors.'
tagline='Issues'
icon='🔥'
btnText='Explore issues'
btnBg='fill-pink-200 text-pink-200'
link='/community/dashboard'
taglineBg="bg-pink-100"
bg="bg-code-editor-dark"
heading="Explore and Contribute to Hot Issues"
description="Discover over 100s of interesting issues, suitable for new and existing contributors."
tagline="Issues"
icon="🔥"
btnText="Explore issues"
btnBg="fill-pink-200 text-pink-200"
link="/community/dashboard"
/>
</div>
<div
className='mt-10 flex flex-col justify-between md:mt-0 md:w-[45%]'
data-testid='CommunityIndex-SmallsCards'
className="mt-10 flex flex-col justify-between md:mt-0 md:w-[45%]"
data-testid="CommunityIndex-SmallsCards"
>
<div data-testid='CommunityIndex-Newsroom-Card'>
<div data-testid="CommunityIndex-Newsroom-Card">
<Card
icon='📣'
tagline='Newsroom'
icon="📣"
tagline="Newsroom"
type={CardType.SMALL}
heading='Never Get Left Behind'
description='Do you want to get the latest news with recent activities happening in the community?'
bg='bg-white'
link='/community/newsroom'
heading="Never Get Left Behind"
description="Do you want to get the latest news with recent activities happening in the community?"
bg="bg-white"
link="/community/newsroom"
/>
</div>
<div className='mt-10 md:mt-0' data-testid='CommunityIndex-Toolings-Card'>
<div
className="mt-10 md:mt-0"
data-testid="CommunityIndex-Toolings-Card"
>
<Card
icon='🧰'
tagline='Toolings'
icon="🧰"
tagline="Toolings"
type={CardType.SMALL}
heading='Check out our collection of Toolings'
description='Discover various AsyncAPI tools to optimize your journey! These tools are made by the community, for the community.'
bg='bg-pink-200'
link='/tools'
heading="Check out our collection of Toolings"
description="Discover various AsyncAPI tools to optimize your journey! These tools are made by the community, for the community."
bg="bg-pink-200"
link="/tools"
/>
</div>
</div>
</div>
<div className='relative size-full'>
<div className="relative size-full">
<HomeCards
headline='Community heartbeat'
title='AsyncAPI Community Meetings & Events'
description='Join an AsyncAPI meeting from anywhere in the world! We host both
headline="Community heartbeat"
title="AsyncAPI Community Meetings & Events"
description="Join an AsyncAPI meeting from anywhere in the world! We host both
live and recorded community events. You can also sign up for our
community newsletter to stay up-to-date on all meetings and
events.'
className='bg-eventCover'
btnText='Explore more events'
link='/community/events'
events."
className="bg-eventCover"
btnText="Explore more events"
link="/community/events"
/>
<div className='absolute right-0 top-0 mt-[100px] hidden w-[500px] justify-end md:block'>
<div className="absolute right-0 top-0 mt-[100px] hidden w-[500px] justify-end md:block">
<ul>
{getEvents(eventsData, 3).map((event: Event, index: number) => {
return (
<li key={index} className='mt-2 w-full rounded-l-md bg-white p-2 md:p-10'>
<a href={event.url} className='flex'>
<div className='inline-flex h-12 min-w-12 flex-row rounded-full bg-pink-500 font-bold text-white'>
<span className='flex-1 self-center text-center'>{event.date.format('D')}</span>
<li
key={index}
className="mt-2 w-full rounded-l-md bg-white p-2 md:p-10"
>
<a href={event.url} className="flex">
<div className="inline-flex h-12 min-w-12 flex-row rounded-full bg-pink-500 font-bold text-white">
<span className="flex-1 self-center text-center">
{event.date.format('D')}
</span>
</div>
<div className='ml-4 text-left'>
<h1 className='text-md md:text-lg'>{event.title}</h1>
<span className='text-xs text-gray-500 md:text-sm'>
<div className="ml-4 text-left">
<h1 className="text-md md:text-lg">{event.title}</h1>
<span className="text-xs text-gray-500 md:text-sm">
{event.date.local().format('LLLL')} UTC
{event.date.local().format('Z')}
</span>
Expand All @@ -143,68 +159,72 @@ export default function CommunityIndexPage() {
</ul>
</div>
</div>
<div className='mt-10 flex flex-col sm:flex-row'>
<div className='m-5' data-testid='CommunityCards-Goals'>
<div className="mt-10 flex flex-col sm:flex-row">
<div className="m-5" data-testid="CommunityCards-Goals">
<Card
type={CardType.SMALL}
tagline='Goals'
icon='🎯'
heading='2024 AsyncAPI Community Goals'
description='Help us improve our 2024 AsyncAPI community building and maintenance goals.'
bg='bg-white'
link='https://github.com/orgs/asyncapi/discussions/948'
tagline="Goals"
icon="🎯"
heading="2024 AsyncAPI Community Goals"
description="Help us improve our 2024 AsyncAPI community building and maintenance goals."
bg="bg-white"
link="https://github.com/orgs/asyncapi/discussions/948"
/>
</div>
<div className='m-5' data-testid='CommunityCards-TSC'>
<div className="m-5" data-testid="CommunityCards-TSC">
<Card
type={CardType.SMALL}
tagline='TSC'
icon='🚀'
heading='Meet Folks Redefining the Initiative'
description='Learn how to become a Technical Steering Committee (TSC) member and see our current members.'
bg='bg-white'
link='/community/tsc'
tagline="TSC"
icon="🚀"
heading="Meet Folks Redefining the Initiative"
description="Learn how to become a Technical Steering Committee (TSC) member and see our current members."
bg="bg-white"
link="/community/tsc"
/>
</div>
</div>
<div className='' data-testid='CommunityCards-Slack'>
<div className="" data-testid="CommunityCards-Slack">
<HomeCards
headline='All community info, tracked'
title='AsyncAPI Slack'
headline="All community info, tracked"
title="AsyncAPI Slack"
description="AsyncAPI's incredible community of developers, designers,
technical writers, and more hail from over 83 countries. We
actively contribute, collaborate, and mentor others on how to
build with AsyncAPI."
btnText='Join AsyncAPI slack'
link='https://asyncapi.com/slack-invite'
className='bg-channelCover'
btnText="Join AsyncAPI slack"
link="https://asyncapi.com/slack-invite"
className="bg-channelCover"
/>
</div>
<div className='mt-10 flex flex-col sm:flex-row'>
<div className='m-5'>
<div className="mt-10 flex flex-col items-center justify-center sm:flex-row">
<div className="m-5 mr-2">
<Card
type={CardType.SMALL}
tagline='Finance'
icon='💰'
heading='Track Initiative Spending with Budget Analysis'
tagline="Finance"
icon="💰"
heading="Track Initiative Spending with Budget Analysis"
description="Explore our transparent finance section for a detailed analysis of our project's budget. See how we track expenses and gain insights into funds allocation."
bg='bg-white'
link='/finance'
bg="bg-white"
link="/finance"
customClasses="p-8"
/>
</div>
<div className='m-5'>
<Card
<div className="m-5">
{/* <Card //for future references
type={CardType.SMALL}
tagline='Store'
icon='🛒'
heading='Swags and Goodies'
description='Explore our swag collection of AsyncAPI-themed t-shirts and goodies.'
link='https://www.store.asyncapi.com/'
bg='bg-primary-200'
/>
/> */}
</div>
</div>
<div className='mt-8 rounded-lg bg-dark py-12 md:mt-20' data-testid='CommunityCard-subscribe'>
<div
className="mt-8 rounded-lg bg-dark py-12 md:mt-20"
data-testid="CommunityCard-subscribe"
>
<NewsletterSubscribe dark />
</div>
</GenericLayout>
Expand Down
Loading