Skip to content

adapting the community page to ShadCN + 2 issues resolved #1817

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

adapting the community page to ShadCN + 2 issues resolved #1817

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
138 changes: 79 additions & 59 deletions pages/community/index.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable linebreak-style */
import React from 'react';
import { getLayout } from '~/components/SiteLayout';
import { SectionContext } from '~/context';
Expand All @@ -15,6 +16,8 @@ import {
fetchRemoteICalFile,
printEventsForNextWeeks,
} from '../../lib/calendarUtils';
import { Button } from '~/components/ui/button';
import { cn } from '~/lib/utils';

export const getStaticProps: GetStaticProps = async () => {
const PATH = 'pages/blog/posts';
Expand Down Expand Up @@ -83,7 +86,7 @@ export default function communityPages(props: any) {
</h2>
</div>
<div className='mt-8'>
<button
<Button
className='bg-blue-700 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded block md:inline-block focus:outline-none'
onClick={() =>
window.open(
Expand All @@ -93,7 +96,7 @@ export default function communityPages(props: any) {
}
>
Join Discussions
</button>
</Button>
</div>
</div>
</div>
Expand Down Expand Up @@ -152,10 +155,10 @@ export default function communityPages(props: any) {
<div className='z-40 mt-20 mx-auto w-full md:h-[520px] md:flex grid grid-cols-1 lg:grid-cols-2 md:justify-between rounded-lg border border-gray-200 bg-white transition-colors hover:bg-slate-100 dark:bg-slate-800 hover:dark:bg-slate-900/30 shadow-3xl dark:shadow-2xl dark:shadow-slate-900'>
<div className='p-4 px-8 flex justify-between w-full md:w-3/6 h-auto flex-col text-center md:text-left'>
<div data-testid='HomeCard-main' className='m-auto'>
<h2 className=' text-blue-700 font-bold text-[2rem] text-center'>
<h2 className='text-blue-700 font-bold text-[2rem] max-sm:text-[1.5rem] text-center'>
Ambassadors Program
</h2>
<h2 className='text-center font-bold text-slate-500 text-base tracking-wide dark:text-white mt-10'>
<h2 className='text-center font-bold text-slate-500 text-base max-sm:text-sm tracking-wide dark:text-white mt-10'>
The JSON Schema Ambassadors Program recognize the people who
drive adoption, innovation and knowledge sharing in the JSON
Schema community.
Expand All @@ -164,17 +167,18 @@ export default function communityPages(props: any) {
className='mt-10 mx-auto flex justify-center items-center'
data-testid='HomeCard-button'
>
<Link
href='/ambassadors'
rel='noopener noreferrer'
<Button
asChild
className='bg-blue-700 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded block md:inline-block focus:outline-none'
>
Become an ambassador
</Link>
<Link href='/ambassadors' rel='noopener noreferrer'>
Become an ambassador
</Link>
</Button>
</div>
</div>
</div>
<div className='w-full h-fit-content md:w-3/6 max-sm:w-1/4 flex rounded-r-lg justify-end bg-cover bg-center bg-ambassador' />
<div className='w-full h-[250px] sm:h-[300px] md:h-full md:w-3/6 max-sm:w-full flex rounded-r-lg md:rounded-r-lg max-sm:rounded-t-none max-sm:rounded-b-lg justify-end bg-cover bg-center bg-ambassador max-sm:bg-contain max-sm:bg-no-repeat' />
</div>

<div className='z-40 mt-20 rounded-lg border border-gray-200 bg-white transition-colors hover:bg-slate-100 mx-auto w-full md:h-[520px] md:flex grid grid-cols-1 lg:grid-cols-2 md:justify-between dark:bg-slate-800 hover:dark:bg-slate-900/30 shadow-3xl dark:shadow-2xl dark:shadow-slate-900'>
Expand All @@ -183,69 +187,76 @@ export default function communityPages(props: any) {
data-testid='HomeCard-main'
className='m-auto flex flex-col items-center text-center'
>
<h2 className='text-blue-700 font-bold text-[2rem]'>
<h2 className='text-blue-700 font-bold text-[2rem] max-sm:text-[1.5rem]'>
Join the JSON Schema Slack workspace!
</h2>
<h2 className='font-bold text-base text-slate-500 dark:text-white tracking-wide mt-10'>
<h2 className='font-bold text-base max-sm:text-sm text-slate-500 dark:text-white tracking-wide mt-10'>
Join our Slack to ask questions, get feedback on your
projects, and connect with +5000 practitioners and experts.
</h2>
<div className='mt-10'>
<Link
href='/slack'
rel='noopener noreferrer'
<Button
asChild
className='bg-blue-700 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded block md:inline-block focus:outline-none'
>
Join Slack
</Link>
<Link href='/slack' rel='noopener noreferrer'>
Join Slack
</Link>
</Button>
</div>
</div>
</div>
<div className='w-full h-fit-content md:w-3/6 flex rounded-r-lg justify-end bg-cover bg-center bg-slack' />
<div className='hidden md:flex w-full h-[200px] sm:h-[300px] md:h-full md:w-3/6 flex rounded-r-lg md:rounded-r-lg justify-end bg-cover bg-center bg-slack' />
</div>
</div>

<div className='m-auto w-12/12 md:w-11/12 lg:w-10/12 xl:w-10/12'>
<div className='z-40 mt-20 w-full rounded-lg border border-gray-200 bg-white group dark:bg-slate-800 hover:dark:bg-slate-900/30 shadow-3xl dark:shadow-2xl dark:shadow-slate-900 transition-colors hover:bg-slate-100 md:flex grid grid-cols-1 lg:grid-cols-2 justify-between'>
<div className='p-4 px-8 grid items-center w-full md:w-3/6 h-auto flex-col text-center md:text-left'>
<div data-testid='HomeCard-main'>
<h2 className='text-blue-700 text-[2rem] font-bold text-center'>
<h2 className='text-blue-700 text-[2rem] max-sm:text-[1.5rem] font-bold text-center'>
JSON Schema Community Meetings & Events
</h2>
<div
className='mt-10 text-center'
data-testid='HomeCard-button'
>
<h2 className='text-slate-500 text-base tracking-wide dark:text-white mt-10 font-bold text-body-lg tracking-body font-regular'>
<h2 className='text-slate-500 text-base max-sm:text-sm tracking-wide dark:text-white mt-10 font-bold text-body-lg tracking-body font-regular'>
We hold monthly Office Hours and weekly Open Community
Working Meetings. Office Hours are every first Tuesday of
the month at 15:00 BST, and by appointment. Open Community
Working Meetings are every Monday at 14:00 PT.
</h2>
<div className='mt-10 flex justify-center'>
<a
href='https://github.com/orgs/json-schema-org/discussions/35'
rel='noopener noreferrer'
className='bg-blue-700 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded block md:inline-block focus:outline-none'
<div className='mt-10 flex justify-center max-sm:flex-col max-sm:gap-3'>
<Button
asChild
className='bg-blue-700 hover:bg-blue-800 text-white font-bold py-2 px-4 mx-1 rounded block md:inline-block focus:outline-none'
>
Open Community Working Meetings
</a>
</div>
<div className='mt-4 flex justify-center'>
<a
href='https://github.com/orgs/json-schema-org/discussions/34/'
rel='noopener noreferrer'
className='bg-blue-700 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded block md:inline-block focus:outline-none'
<a
href='https://github.com/orgs/json-schema-org/discussions/35'
rel='noopener noreferrer'
>
Open Community Working Meetings
</a>
</Button>
<Button
asChild
className='bg-blue-700 hover:bg-blue-800 text-white font-bold py-2 px-4 mx-1 rounded block md:inline-block focus:outline-none'
>
Office Hours
</a>
<a
href='https://github.com/orgs/json-schema-org/discussions/34/'
rel='noopener noreferrer'
>
Office Hours
</a>
</Button>
</div>
</div>
</div>
</div>
<div className='w-fit-content h-fit-content py-3 md:w-3/6 max-lg:mx-3 flex rounded-r-lg justify-end'>
<div className='mx-auto max-lg:w-full'>
<h2 className='text-center dark:text-white text-primary text-[2rem] font-bold '>
<h2 className='text-center dark:text-white text-primary text-[2rem] max-sm:text-[1.5rem] font-bold '>
Upcoming events
</h2>
{props.datesInfo.map((event: any, index: any) => (
Expand All @@ -254,12 +265,16 @@ export default function communityPages(props: any) {
className='mx-auto gap-2 group-hover:bg-white dark:bg-slate-900/50 dark:group-hover:bg-slate-800 bg-slate-100 h-[90px] max-md:h-[120px] max-sm:h-auto w-full rounded-lg flex flex-row justify-between items-center p-2 mt-2'
>
<div
className={`h-[70px] w-1/3 rounded-lg text-center grid items-center bg-index-${index}`}
className={cn(
`h-[70px] w-1/3 rounded-lg text-center grid items-center bg-index-${index}`,
)}
>
<p className='text-[2rem] dark:text-white'>{event.day}</p>
<p className='text-[2rem] max-sm:text-[1.5rem] dark:text-white'>
{event.day}
</p>
</div>
<div className='h-[70px] max-md:h-[120px] max-sm:h-auto w-2/3 rounded-lg grid items-center px-2'>
<p className='text-[12px] dark:text-white'>
<p className='text-[12px] max-sm:text-[10px] dark:text-white'>
<b className='text-blue-700'>{event.title}</b>
<br />
<span>
Expand All @@ -276,14 +291,17 @@ export default function communityPages(props: any) {
<div className='m-auto w-12/12 md:w-11/12 lg:w-10/12 xl:w-10/12'>
<div className='z-40 mt-20 w-full md:h-130 rounded-lg border border-gray-200 bg-white shadow-3xl transition-colors hover:bg-slate-100 md:flex grid grid-cols-1 md:grid-cols-2 justify-between mb-10 dark:bg-slate-800 hover:dark:bg-slate-900/30 dark:shadow-2xl dark:shadow-slate-900'>
<div className='p-4 px-8 flex justify-between w-full md:w-3/6 h-auto flex-col text-center md:text-left'>
<div data-testid='HomeCard-main' className='mx-auto my-20'>
<h2 className=' text-blue-700 font-bold text-[2rem] text-center'>
<div
data-testid='HomeCard-main'
className='mx-auto my-20 max-sm:my-10'
>
<h2 className='text-blue-700 font-bold text-[2rem] max-sm:text-[1.5rem] text-center'>
Welcome to
<br />
the JSON Schema Blog!
</h2>
<div className='m-auto flex flex-col items-center text-center'>
<h2 className='font-bold text-slate-500 text-base dark:text-white tracking-wide mt-10'>
<h2 className='font-bold text-slate-500 text-base max-sm:text-sm dark:text-white tracking-wide mt-10'>
<p>
Want to publish a blog post? Check out the&nbsp;
<a
Expand All @@ -298,31 +316,32 @@ export default function communityPages(props: any) {
</p>
</h2>
<div className='mt-10'>
<Link
href='/blog'
rel='noopener noreferrer'
<Button
asChild
className='bg-blue-700 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded block md:inline-block focus:outline-none'
>
Read blog
</Link>
<Link href='/blog' rel='noopener noreferrer'>
Read blog
</Link>
</Button>
</div>
</div>
</div>
</div>
<div className='p-10 flex justify-between w-full md:w-3/6 h-auto flex-col text-center md:text-left '>
<div className='p-10 max-sm:p-6 flex justify-between w-full md:w-3/6 h-auto flex-col text-center md:text-left '>
<div className='w-full mb-6 '>
<Link href={`/blog/posts/${blogPosts[0].slug}`}>
<Image
src={blogPosts[0].frontmatter.cover}
className='w-full h-[232px] mb-4'
className='w-full h-[232px] max-sm:h-[180px] mb-4'
height={232}
width={400}
alt={blogPosts[0].frontmatter.title}
/>
<h3 className='mb-4 font-semibold dark:text-white'>
<h3 className='mb-4 font-semibold dark:text-white max-sm:text-base'>
{blogPosts[0].frontmatter.title}
</h3>
<div className='mb-4 text-[14px] dark:text-white'>
<div className='mb-4 text-[14px] max-sm:text-[12px] dark:text-white'>
<TextTruncate
element='span'
line={4}
Expand All @@ -335,7 +354,7 @@ export default function communityPages(props: any) {
return (
<div
key={index}
className='bg-slate-50 h-[44px] w-[44px] rounded-full -ml-3 bg-cover bg-center border-2 border-white'
className='bg-slate-50 h-[44px] w-[44px] max-sm:h-[36px] max-sm:w-[36px] rounded-full -ml-3 bg-cover bg-center border-2 border-white'
style={{
backgroundImage: `url(${author.photo})`,
zIndex: 10 - index,
Expand All @@ -345,7 +364,7 @@ export default function communityPages(props: any) {
},
)}
<div className='flex flex-col ml-2'>
<p className='text-sm font-semibold dark:text-white'>
<p className='text-sm max-sm:text-xs font-semibold dark:text-white'>
{blogPosts[0].frontmatter.authors.length > 2 ? (
<>
{blogPosts[0].frontmatter.authors
Expand All @@ -366,7 +385,7 @@ export default function communityPages(props: any) {
)
)}
</p>
<div className='dark:text-slate-300 text-sm'>
<div className='dark:text-slate-300 text-sm max-sm:text-xs'>
<span>
{blogPosts[0].frontmatter.date} &middot;{timeToRead}{' '}
min min read
Expand All @@ -376,13 +395,14 @@ export default function communityPages(props: any) {
</div>
</Link>
<div className='mx-auto '>
<Link
href='/blog'
rel='noopener noreferrer'
<Button
asChild
className='bg-blue-700 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded block md:inline-block focus:outline-none mt-4'
>
Read more posts
</Link>
<Link href='/blog' rel='noopener noreferrer'>
Read more posts
</Link>
</Button>
</div>
</div>
</div>
Expand Down
Loading