Skip to content
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

Style changes in homepage #1360

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
+159 −118
Open

Style changes in homepage #1360

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
5e1e902
Style changes in homepage
cbum-dev Jan 22, 2025
48edc8f
fixes dark theme issues
cbum-dev Jan 25, 2025
3a44226
Merge branch 'main' into issues/#1273
cbum-dev Jan 31, 2025
5dbeb3a
resolved merge conflict
cbum-dev Jan 31, 2025
3ec8a04
Merge branch 'json-schema-org:main' into issues/#1273
cbum-dev Mar 5, 2025
fe9bc8d
Merge branch 'json-schema-org:main' into issues/#1273
cbum-dev Mar 6, 2025
405d939
Added Image
cbum-dev Mar 6, 2025
fa1305c
fixes lint issues
cbum-dev Mar 6, 2025
1cbeaed
changed padding.
cbum-dev Mar 11, 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
5 changes: 4 additions & 1 deletion components/AmbassadorsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import Image from 'next/image';

interface AmbassadorsLink {
title: string;
Expand All @@ -21,7 +22,9 @@ const AmbassadorList = ({ ambassadorList }: AmbassadorsListProps) => {
className='flex flex-col items-center text-center p-5 bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition hover:scale-105'
data-testid='Ambassadors-list'
>
<img
<Image
height={150}
width={150}
src={link.icon}
alt={link.title}
className='w-[150px] h-auto object-contain mb-5'
Expand Down
263 changes: 148 additions & 115 deletions pages/index.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,11 @@ import matter from 'gray-matter';
const PATH = 'pages/blog/posts';
import readingTime from 'reading-time';
import Link from 'next/link';
import TextTruncate from 'react-text-truncate';
import Image from 'next/image';
import {
fetchRemoteICalFile,
printEventsForNextWeeks,
} from '../lib/calendarUtils';
import { Headline4 } from '~/components/Headlines';
import { GetStaticProps } from 'next';

/* eslint-disable */
Expand Down Expand Up @@ -353,42 +351,45 @@ const Home = (props: any) => {
build new connections.
</p>
</div>
<div className='grid grid-cols-1 lg:grid-cols-3 gap-6 mb-12 mx-auto w-5/6 md:w-3/5 lg:w-5/6'>
<div className='p-4 w-full mb-6 dark:shadow-2xl'>
<div className='grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12 mx-auto w-5/6 md:w-3/5 lg:w-[85%]'>
<div className='w-full mb-6'>
<Link href='https://json-schema.org/slack'>
<h3 className='mb-4 font-semibold flex items-center dark:text-slate-200'>
Join the JSON Schema Slack Workspace!
<div className='p-2 py-8 border dark:border-gray-600 rounded-md hover:scale-105 duration-200'>
<h3 className='mb-4 font-semibold flex items-center dark:text-slate-200'>
Join the JSON Schema Slack Workspace!
{isClient && (
<>
<Image
src='/img/logos/Slack-mark.svg'
className='w-12 h-12'
alt='slack'
height={48}
width={48}
/>
</>
)}
</h3>
{isClient && (
<>
<Image
src='/img/logos/Slack-mark.svg'
className='w-8 h-8'
alt='slack'
height={32}
width={32}
src='/img/home-page/slack-json-schema.png'
className='w-full rounded-md'
alt='slack-json-schema'
height={500}
width={300}
/>
</>
)}
</h3>
{isClient && (
<>
<Image
src='/img/home-page/slack-json-schema.png'
className='w-full mb-4'
alt='slack-json-schema'
height={500}
width={300}
/>
</>
)}

{/* <h3 className='mb-4 font-semibold' >Event</h3> */}
<p className='mb-4 dark:text-slate-300'>
Join our Slack to ask questions, get feedback on your
projects, and connect with +5000 practitioners and experts.
</p>
</div>
</Link>
<button className='w-full lg:w-1/2 rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white h-[40px] flex items-center justify-center mx-auto dark:border-none'>

{/* <h3 className='mb-4 font-semibold' >Event</h3> */}
<p className='my-4 dark:text-slate-300'>
Join our Slack to ask questions, get feedback on your projects,
and connect with +5000 practitioners and experts. Simply say
hello 👋, you're welcome to join us.
</p>
<button className='w-full lg:w-1/2 rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white h-[40px] flex items-center justify-center dark:border-none'>
<a
href='https://json-schema.org/slack'
className='flex items-center '
Expand All @@ -409,92 +410,92 @@ const Home = (props: any) => {
</button>
</div>
{/* BlogPost Data */}
<div className='p-4 w-full mb-6 dark:shadow-2xl'>
<div className='w-full mb-6 '>
<Link href={`/blog/posts/${blogPosts[0].slug}`}>
<h3 className='mb-5 font-semibold pt-1 dark:text-slate-200'>
The JSON Schema Blog
</h3>
{isClient && (
<>
<Image
src={blogPosts[0].frontmatter.cover}
className='w-full h-[232px] mb-4'
width={600}
height={232}
alt='blog'
/>
</>
)}
<h3 className='mb-4 font-semibold dark:text-slate-300'>
{' '}
{blogPosts[0].frontmatter.title}
</h3>
<div className='mb-4'>
<TextTruncate
element='span'
line={4}
text={blogPosts[0].frontmatter.excerpt}
/>
</div>

<div className='flex ml-2 mb-2 '>
{(blogPosts[0].frontmatter.authors || []).map(
(author: any, index: number) => {
return (
<div
key={index}
className='bg-slate-50 h-[44px] w-[44px] rounded-full -ml-3 bg-cover bg-center border-2 border-white'
style={{
backgroundImage: `url(${author.photo})`,
zIndex: 10 - index,
}}
/>
);
},
<div className='p-2 border dark:border-gray-600 rounded-md hover:scale-105 duration-200'>
<h3 className='mb-4 font-semibold pt-1 dark:text-slate-200'>
Latest blog post
</h3>
{isClient && (
<>
<Image
src={blogPosts[0].frontmatter.cover}
className='w-full rounded-md h-[170px] mb-2'
width={600}
height={232}
alt='blog'
/>
</>
)}
<div className='flex flex-col ml-2'>
<p className='text-sm font-semibold dark:text-slate-300'>
{blogPosts[0].frontmatter.authors.length > 2 ? (
<>
{blogPosts[0].frontmatter.authors
.slice(0, 2)
.map((author: any, index: number) => (
<span key={author.name}>
{author.name}
{index === 0 && ' & '}
</span>
))}
{'...'}
</>
) : (
blogPosts[0].frontmatter.authors.map((author: any) => (
<span key={author.name}>{author.name}</span>
))
)}
</p>
<h3 className='mb-2 font-semibold dark:text-slate-300'>
{' '}
{blogPosts[0].frontmatter.title}
</h3>
<div className='flex mb-2 '>
{(blogPosts[0].frontmatter.authors || []).map(
(author: any, index: number) => {
return (
<div
key={index}
className='bg-slate-50 h-[44px] w-[44px] rounded-full bg-cover bg-center border-2 border-white'
style={{
backgroundImage: `url(${author.photo})`,
zIndex: 10 - index,
}}
/>
);
},
)}
<div className='flex flex-col ml-2'>
<p className='text-sm font-semibold dark:text-slate-300'>
{blogPosts[0].frontmatter.authors.length > 2 ? (
<>
{blogPosts[0].frontmatter.authors
.slice(0, 2)
.map((author: any, index: number) => (
<span key={author.name}>
{author.name}
{index === 0 && ' & '}
</span>
))}
{'...'}
</>
) : (
blogPosts[0].frontmatter.authors.map(
(author: any) => (
<span key={author.name}>{author.name}</span>
),
)
)}
</p>

<div className='text-slate-500 text-sm dark:text-slate-300'>
<span>
{blogPosts[0].frontmatter.date} &middot; {timeToRead}{' '}
min read
</span>
<div className='text-slate-500 text-sm dark:text-slate-300'>
<span>
{blogPosts[0].frontmatter.date} &middot; {timeToRead}{' '}
min read
</span>
</div>
</div>
</div>
</div>
</Link>

<div className='my-4'>
Explore our blogs. Their, you'll get latest information about
our blogs, articles, announcements. Let's get upto date with the
recent activities in the organization.
</div>
<div>
<Link
href={`/blog/posts/${blogPosts[0].slug}`}
className=' w-full lg:w-1/2 rounded border-2 bg-primary text-white hover:bg-blue-700 transition-all duration-300 ease-in-out h-[40px] text-center pt-1 semi-bold flex items-center justify-center mx-auto dark:border-none'
href={'/blog'}
className=' w-full lg:w-1/2 rounded border-2 bg-primary text-white hover:bg-blue-700 transition-all duration-300 ease-in-out h-[40px] text-center semi-bold flex items-center justify-center dark:border-none'
>
Read more{' '}
Read all blogs{' '}
</Link>
</div>
</div>
<div>
<div className='p-4 md:w-full mb-6 mr-4 dark:shadow-2xl'>
<h3 className='mb-2 font-semibold dark:text-slate-200'>
<div className='p-3 border dark:border-gray-600 rounded-md hover:scale-105 duration-200'>
<h3 className='mb-4 mt-2 font-semibold dark:text-slate-200'>
JSON Schema Community Meetings & Events
</h3>
<p className='mb-4 dark:text-slate-300'>
Expand All @@ -504,29 +505,49 @@ const Home = (props: any) => {
third Monday of the month at 12:00 PT.
</p>
<div className=''>
<button className='max-w-[300px] w-full text-center rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white h-[40px] mb-4 flex items-center justify-center mx-auto dark:border-none'>
<button className='max-w-[300px] w-full text-center rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white h-[40px] mb-4 flex items-center justify-center dark:border-none'>
<a href='https://github.com/orgs/json-schema-org/discussions/35'>
Open Community Working Meetings
</a>
</button>
<button className='max-w-[200px] w-full text-center rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white h-[40px] flex items-center justify-center mx-auto dark:border-none'>
<button className='max-w-[200px] w-full text-center rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white h-[40px] flex items-center justify-center dark:border-none'>
<a href='https://github.com/orgs/json-schema-org/discussions/34/'>
Office Hours
</a>
</button>
</div>
</div>
<div className='p-2'>
<div className='p-2 border dark:border-gray-600 rounded-md hover:scale-105 duration-200 mt-6'>
<div>
<Headline4>Upcoming events</Headline4>
<h2 className='text-h5 mb-4 mt-2 font-semibold dark:text-slate-200'>
Upcoming events
</h2>{' '}
<div>
<ul>
{props.datesInfo.map((event: any, index: any) => (
<li key={index}>
<div className='flex mb-4'>
<p className='bg-btnOrange rounded-full w-10 h-10 p-2 text-center text-white mr-2'>
{event.day}
</p>
<div className='flex mb-4 items-center gap-2'>
<div className='h-12 overflow-hidden w-12 rounded-xl border border-gray-200 dark:border-gray-600 flex flex-col'>
<div className='w-full h-5 bg-red-600'>
<p className='text-sm text-center font-semibold text-white my-auto'>
{new Date(
event.time.replace(
/(\d+)(th|st|nd|rd)/,
'$1',
),
)
.toLocaleDateString('en-US', {
weekday: 'short',
})
.toUpperCase()}
</p>
</div>
<p className='h-7 text-center text-black dark:text-white'>
{String(event.day).padStart(2, '0')}{' '}
</p>
</div>

<div className='w-[1px] h-[25px] bg-gray-300 dark:border-gray-600'></div>
<div className='text-sm'>
<p>{event.title}</p>
<p>
Expand All @@ -542,7 +563,7 @@ const Home = (props: any) => {

<a
href='https://calendar.google.com/calendar/embed?src=json.schema.community%40gmail.com&ctz=Europe%2FLondon'
className='w-full lg:w-1/2 rounded border-2 bg-primary text-white hover:bg-blue-700 transition-all duration-300 ease-in-out h-[40px] text-center flex items-center justify-center mx-auto dark:border-none'
className='w-full lg:w-1/2 rounded border-2 bg-primary text-white hover:bg-blue-700 transition-all duration-300 ease-in-out h-[40px] text-center flex items-center justify-center dark:border-none'
target='_blank'
rel='noopener noreferrer'
>
Expand Down Expand Up @@ -818,16 +839,24 @@ const Home = (props: any) => {
)}
</a>
<a href='https://www.octue.com/' target='_blank' rel='noreferrer'>
<img src={octue_logo} className=' w-44' />
<Image
src={octue_logo}
className=' w-44'
width={176}
height={100}
alt='octue'
/>
</a>
<a
href='https://www.apideck.com/'
target='_blank'
rel='noreferrer'
>
<img
<Image
src={apideck_logo}
className=' w-44'
width={176}
height={100}
alt='The Realtime Unified API
for Accounting integrations'
/>
Expand All @@ -837,9 +866,11 @@ for Accounting integrations'
target='_blank'
rel='noreferrer'
>
<img
<Image
src={rxdb_logo}
className=' w-44'
width={176}
height={100}
alt='The local Database for JavaScript Applications'
/>
</a>
Expand All @@ -848,9 +879,11 @@ for Accounting integrations'
target='_blank'
rel='noreferrer'
>
<img
<Image
src={wda_logo}
className=' w-44'
width={176}
height={100}
alt='best website design agencies'
/>
</a>
Expand Down
Loading