diff --git a/components/Layout.tsx b/components/Layout.tsx index 1e4edb07a..bd383df57 100644 --- a/components/Layout.tsx +++ b/components/Layout.tsx @@ -158,7 +158,7 @@ const MainNavigation = () => { /> @@ -233,7 +233,7 @@ const MobileNav = () => { /> diff --git a/package.json b/package.json index 780315e66..71e5de8f7 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "slate": "^0.100.0", "slate-react": "^0.100.1", "slugify": "^1.6.5", + "tailwind-merge": "^2.2.1", "yarn": "1.22.19", "zero-fill": "^2.2.4", "zustand": "^4.0.0-rc.1" diff --git a/pages/community/Header.jsx b/pages/community/Header.jsx new file mode 100644 index 000000000..851fe38fe --- /dev/null +++ b/pages/community/Header.jsx @@ -0,0 +1,55 @@ +import React from 'react'; +// import IconRocket from './icons/Rocket'; +import Heading from './typography/Heading'; +// import Button from './buttons/Button'; + +export default function Header() { + return ( +
+ + JSON Schema Community + +
+ + + Welcome to the +
JSON Schema Community + + +
+
+ + With over 60 million weekly downloads, JSON Schema has a large and + active developer community across the world. Join the Community to + learn, share ideas, ask questions, develop JSON Schema tooling and + build new connections. sharing ideas, and building connections. + +
+
+ +
+
+ ); +} diff --git a/pages/community/card/BlogCard.jsx b/pages/community/card/BlogCard.jsx new file mode 100644 index 000000000..3bd79467e --- /dev/null +++ b/pages/community/card/BlogCard.jsx @@ -0,0 +1,55 @@ +import React from 'react'; +import Link from 'next/link'; +import TextTruncate from 'react-text-truncate'; +import PropTypes from 'prop-types'; +function BlogCard(props) { + return ( +
+ +

The JSON Schema Blog

+ +

{props.h3_1}

+
+ +
+
+
+
+

{props.author}

+
+ + {props.spanPart1} · {props.spanPart2} min read + +
+
+
+ +
+ + Read more{' '} + +
+
+ ); +} + +BlogCard.propTypes = { + href: PropTypes.string.isRequired, + src: PropTypes.string.isRequired, + h3_1: PropTypes.string.isRequired, + text: PropTypes.string.isRequired, + url: PropTypes.string.isRequired, + author: PropTypes.string.isRequired, + spanPart1: PropTypes.string.isRequired, + spanPart2: PropTypes.number.isRequired, +}; + +export default BlogCard; diff --git a/pages/community/card/Button.jsx b/pages/community/card/Button.jsx new file mode 100644 index 000000000..0716dd551 --- /dev/null +++ b/pages/community/card/Button.jsx @@ -0,0 +1,24 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +function Button(props) { + return ( + + {props.btnText} + + ); +} + +// Add prop type validation +Button.propTypes = { + href: PropTypes.string.isRequired, // href prop should be a string and is required + class: PropTypes.string, // class prop should be a string (optional) + btnText: PropTypes.string.isRequired, // btnText prop should be a string and is required +}; + +export default Button; diff --git a/pages/community/card/Card.jsx b/pages/community/card/Card.jsx new file mode 100644 index 000000000..0169f08a2 --- /dev/null +++ b/pages/community/card/Card.jsx @@ -0,0 +1,50 @@ +import React from 'react'; +import Heading from '../typography/Heading'; +import Button from './Button'; +import PropTypes from 'prop-types'; + +export default function Card(props) { + return ( +
+
+
+ + {props.headline} + +
+
+ + {props.title} + + + {props.description} + +
+
+
+
+
+
+ ); +} + +Card.propTypes = { + headline: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + href: PropTypes.string.isRequired, + btnText: PropTypes.string.isRequired, + className: PropTypes.string, +}; diff --git a/pages/community/column/Coloumn.jsx b/pages/community/column/Coloumn.jsx new file mode 100644 index 000000000..e7cf57da5 --- /dev/null +++ b/pages/community/column/Coloumn.jsx @@ -0,0 +1,43 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +function Coloumn(props) { + return ( + + ); +} + +Coloumn.propTypes = { + testId: PropTypes.string, + href: PropTypes.string, + className: PropTypes.string, + emoji: PropTypes.string, + h1: PropTypes.string, + p: PropTypes.string, +}; + +export default Coloumn; diff --git a/pages/community/config/orbitData.json b/pages/community/config/orbitData.json new file mode 100644 index 000000000..1f21a19e0 --- /dev/null +++ b/pages/community/config/orbitData.json @@ -0,0 +1,108 @@ +[ + [ + { + "id": "item", + "img": "./img/avatars/benhutton.webp", + "alt": "benhutton" + }, + { + "id": "item", + "img": "./img/avatars/benjagm.webp", + "alt": "benjagm" + }, + { + "id": "item", + "img": "./img/avatars/gregsdennis.webp", + "alt": "gregs" + }, + { + "id": "item", + "img": "./img/avatars/jasondesrosiers.jpeg", + "alt": "jason" + }, + { + "id": "item", + "img": "./img/avatars/julian.webp", + "alt": "julian" + }, + { + "id": "item", + "img": "./img/avatars/jviotti.webp", + "alt": "jviotti" + } + ], + [ + { + "id": "item-2", + "img": "./img/avatars/melinda.webp", + "alt": "melinda" + }, + { + "id": "item-2", + "img": "./img/avatars/mikeralphson.webp", + "alt": "mikeralphson" + }, + { + "id": "item-2", + "img": "./img/avatars/simonplenderleith.webp", + "alt": "simon" + }, + { + "id": "item-2", + "img": "./img/avatars/yanick.jpg", + "alt": "yanick" + }, + { + "id": "item-2", + "img": "./img/avatars/yeray.webp", + "alt": "yeray" + }, + { + "id": "item-2", + "img": "./img/contributer_gsoc_2024/akanksha_kushwaha.jpeg", + "alt": "maciej" + }, + { + "id": "item-2", + "img": "./img/contributer_gsoc_2024/alok_gupta.jpeg", + "alt": "git" + } + ], + [ + { + "id": "item-3", + "img": "./img/contributer_gsoc_2024/dairya.jpeg", + "alt": "ace" + }, + { + "id": "item-3", + "img": "./img/contributer_gsoc_2024/jeel_rajodiya.jpeg", + "alt": "star" + }, + { + "id": "item-3", + "img": "./img/contributer_gsoc_2024/neeraj_saini.jpeg", + "alt": "barbano" + }, + { + "id": "item-3", + "img": "./img/contributer_gsoc_2024/michael_sharber.jpeg", + "alt": "dale" + }, + { + "id": "item-3", + "img": "./img/contributer_gsoc_2024/mintu_gogoi.jpeg", + "alt": "kuda" + }, + { + "id": "item-3", + "img": "./img/contributer_gsoc_2024/paul_waller.jpeg", + "alt": "yash" + }, + { + "id": "item-3", + "img": "./img/contributer_gsoc_2024/roni.jpeg", + "alt": "sergio" + } + ] +] diff --git a/pages/community/event/Event.jsx b/pages/community/event/Event.jsx new file mode 100644 index 000000000..b72739ef1 --- /dev/null +++ b/pages/community/event/Event.jsx @@ -0,0 +1,63 @@ +import React from 'react'; +import Heading from '../typography/Heading'; +import Button from '../card/Button'; +import PropTypes from 'prop-types'; + +export default function Event(props) { + return ( +
+
+
+ + {props.headline} + +
+
+ + {props.title} + + + {props.description} + +
+
+
+
+
+
+ ); +} + +Event.propTypes = { + headline: PropTypes.string, // Add PropTypes for each prop + title: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + href: PropTypes.string.isRequired, + btnText: PropTypes.string.isRequired, + btn1Class: PropTypes.string, // Add PropTypes for each prop + href2: PropTypes.string.isRequired, + btnText2: PropTypes.string.isRequired, + btn2Class: PropTypes.string, // Add PropTypes for each prop + className: PropTypes.string, // Add PropTypes for each prop +}; diff --git a/pages/community/index.page.tsx b/pages/community/index.page.tsx new file mode 100644 index 000000000..eb7281375 --- /dev/null +++ b/pages/community/index.page.tsx @@ -0,0 +1,606 @@ +import React from 'react'; +import { getLayout } from '~/components/SiteLayout'; +import { SectionContext } from '~/context'; +import orbitData from './config/orbitData.json'; +import Header from './Header'; +import Coloumn from './column/Coloumn'; +import Card from './card/Card'; +import Event from './event/Event'; +import Heading from './typography/Heading'; +import BlogCard from './card/BlogCard'; + +// import { getLayout } from '../components/SiteLayout'; +// import { DocSearch } from '@docsearch/react'; +import fs from 'fs'; +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 { GetStaticProps } from 'next'; + +/* eslint-disable */ +import axios from 'axios'; +import ical from 'node-ical'; +import moment from 'moment-timezone'; + +/* eslint-enable */ +export const getStaticProps: GetStaticProps = async () => { + const files = fs.readdirSync(PATH); + const blogPosts = files + .filter((file) => file.substr(-3) === '.md') + .map((fileName) => { + const slug = fileName.replace('.md', ''); + const fullFileName = fs.readFileSync( + `pages/blog/posts/${slug}.md`, + 'utf-8', + ); + const { data: frontmatter, content } = matter(fullFileName); + return { + slug: slug, + frontmatter, + content, + }; + }) + .sort((a, b) => { + const dateA = new Date(a.frontmatter.date).getTime(); + const dateB = new Date(b.frontmatter.date).getTime(); + return dateA < dateB ? 1 : -1; + }) + .slice(0, 5); + + // Function to fetch the remote iCal file + async function fetchRemoteICalFile(url: string) { + try { + const response = await axios.get(url, { method: 'no-cors' }); + return response.data; + } catch (error) { + console.error('Error fetching iCal file:', error); + return null; + } + } + // Example usage: + const remoteICalUrl = + 'https://calendar.google.com/calendar/ical/c_8r4g9r3etmrmt83fm2gljbatos%40group.calendar.google.com/public/basic.ics'; // Replace with the actual URL + const datesInfo = await fetchRemoteICalFile(remoteICalUrl) + .then((icalData) => printEventsForNextFourWeeks(ical.parseICS(icalData))) + .catch((error) => console.error('Error:', error)); + // console.log('this is fetched data', datesInfo) + return { + props: { + blogPosts, + datesInfo, + fallback: false, + }, + }; +}; +// Function to filter and print events for the next 4 weeks from today +function printEventsForNextFourWeeks(icalData: { [x: string]: any }) { + const arrayDates = []; + if (!icalData) { + console.error('iCal data is empty or invalid.'); + return; + } + + // Calculate the range of dates for the next 4 weeks from today + const today = moment().startOf('day'); + const nextFourWeeksEnd = moment().add(4, 'weeks').endOf('day'); + + // Loop through the events in the iCal data + for (const k in icalData) { + const event = icalData[k]; + + if (event.type === 'VEVENT') { + const title = event.summary; + + const timezoneL = moment.tz.guess(); // Default to UTC if timezone information is not provided + const startDate = moment.tz(event.start, timezoneL); + + // Complicated case - if an RRULE exists, handle multiple recurrences of the event. + if (event.rrule !== undefined) { + // For recurring events, get the set of event start dates that fall within the range + // of dates we're looking for. + const dates = event.rrule.between( + today.toDate(), + nextFourWeeksEnd.toDate(), + true, + ); + + // Loop through the set of date entries to see which recurrences should be printed. + for (const date of dates) { + const startDate = moment.tz(date, timezoneL); + + // Check if the event falls within the next 4 weeks from today + if (startDate.isBetween(today, nextFourWeeksEnd, undefined, '[]')) { + const dateTimezone = moment.tz.zone(event.start.tz); + const localTimezone = moment.tz.guess(); + const tz = + event.rrule.origOptions.tzid === localTimezone + ? event.rrule.origOptions.tzid + : localTimezone; + const timezone = moment.tz.zone(tz); + let offset; + if (timezone && dateTimezone) + offset = timezone.utcOffset(date) - dateTimezone.utcOffset(date); + const newDate = moment(date).add(offset, 'minutes').toDate(); + + const start = moment(newDate); + const utcDate = start.utc(); + + const time = utcDate.format('MMMM Do YYYY, h:mm a'); + const day = utcDate.format('D'); + const parsedStartDate = utcDate.format('YYYY-MM-DD HH:mm:ss'); + arrayDates.push({ + title, + time, + day, + timezone: 'UTC', + parsedStartDate, + }); + } + } + } else { + // Simple case - no recurrences, just print out the calendar event. + if (startDate.isBetween(today, nextFourWeeksEnd, undefined, '[]')) { + const utcDate = startDate.utc(); + + const time = utcDate.format('MMMM Do YYYY, h:mm a'); + const day = utcDate.format('D'); + const parsedStartDate = startDate.format('YYYY-MM-DD HH:mm:ss'); + arrayDates.push({ + title, + time, + day, + timezone: 'UTC', + parsedStartDate, + }); + } + } + } + } + + arrayDates.sort( + (x, y) => + new Date(x.parsedStartDate).getTime() - + new Date(y.parsedStartDate).getTime(), + ); + + return arrayDates; +} + +// const Event = (props: any) => { +// // const blogPosts = props.blogPosts; +// // const timeToRead = Math.ceil(readingTime(blogPosts[0].content).minutes); + +// return ( + +// ) +// } + +export default function communityPages(props: any) { + const blogPosts = props.blogPosts; + const timeToRead = Math.ceil(readingTime(blogPosts[0].content).minutes); + + return ( + +
+
+
+
+
+
+
+ {orbitData[0].map((orbit) => ( +
+ {orbit.alt} +
+ ))} +
+
+
+
+
+ {orbitData[1].map((orbit) => ( +
+ {orbit.alt} +
+ ))} +
+
+ {orbitData[2].map((orbit) => ( +
+ {orbit.alt} +
+ ))} +
+
+
+
+
+ + +
+
+ {/*
*/} + + {/*
*/} + + {/*
*/} + + {/*
*/} + + {/*
*/} + + {/*
*/} + + {/*
*/} +
+
+
+ + Upcoming events + +
+
+
+
    + {props.datesInfo.map((event: any, index: any) => ( +
  • +
    +

    + {event.day} +

    +
    +

    {event.title}

    +

    + {event.time} ({event.timezone}) +

    +
    +
    +
    • + ))} +
+
+ +
+
+
+
+ {/*
*/} + + {/*
*/} +
+
+ +
+
+
+ {/*
*/} + + {/* BlogPost Data */} + {/*
+ +

+ The JSON Schema Blog +

+ +

+ {' '} + {blogPosts[0].frontmatter.title} +

+
+ +
+
+
+
+

+ {blogPosts[0].frontmatter.authors[0].name} +

+
+ + {blogPosts[0].frontmatter.date} · {timeToRead}{' '} + min read + +
+
+
+ +
+ + Read more{' '} + +
+
*/} + + {/*
+
+
+ Upcoming events +
+
    + {props.datesInfo.map((event: any, index: any) => ( +
  • +
    +

    + {event.day} +

    +
    +

    {event.title}

    +

    + {event.time} ({event.timezone}) +

    +
    +
    +
    • + ))} +
+
+
+ + View Calendar + +
+
*/} +
+ + ); +} + +communityPages.getLayout = getLayout; + +// function ImplementationTable({ +// implementationsByLanguage, +// prefix, +// }: { +// implementationsByLanguage: any; +// prefix: string; +// }) { +// const router = useRouter(); +// return ( +// <> +//
+// {implementationsByLanguage.map( +// (implementationByLanguage: any, index: number) => { +// const slug = +// prefix + +// slugify(implementationByLanguage.name, { +// lower: true, +// trim: true, +// }); +// const isActive = router.query.language === slug; +// return ( +// +// {implementationByLanguage.name} +// +// ); +// }, +// )} +//
+//
+// +// +// +// +// +// +// +// +// +// {implementationsByLanguage.map( +// (implementationByLanguage: any, index: number) => { +// const slug = +// prefix + +// slugify(implementationByLanguage.name, { +// lower: true, +// trim: true, +// }); +// const isActive = router.query.language === slug; +// if (router.query.language && !isActive) return null; + +// // return ( +// // +// // +// // +// // +// // {implementationByLanguage.implementations.map( +// // (implementation: any, index: number) => { +// // let mixedNotes = ''; +// // if (implementation.notes) { +// // mixedNotes = implementation.notes; +// // } +// // if (implementation.compliance) { +// // if (implementation.notes) { +// // mixedNotes += '
Compliance:'; +// // } else { +// // mixedNotes = 'Compliance:'; +// // } +// // if (implementation.compliance.config.docs) { +// // mixedNotes += +// // ' This implementation documents that you must '; +// // } +// // if (implementation.compliance.config.instructions) { +// // mixedNotes += +// // '' + +// // implementation.compliance.config.instructions + +// // ' to produce specification-compliant behavior.'; +// // } +// // } +// // const allDrafts = [ +// // ...(implementation['date-draft'] || []), +// // ...(implementation['draft'] || []), +// // ]; +// // return ( +// // +// // +// // +// // +// // +// // +// // ); +// // }, +// // )} +// // +// // ); +// }, +// )} +// +//
+// +// About +// DraftsLicense
+// // +// // {implementationByLanguage.name} +// // +// //
+// // +// // {implementation.name} +// // +// // +// // +// // +// // {allDrafts +// // ?.sort((a, b) => +// // DRAFT_ORDER.indexOf(a) < +// // DRAFT_ORDER.indexOf(b) +// // ? -1 +// // : 1, +// // ) +// // ?.map((draft: string | number) => ( +// // +// // {typeof draft === 'number' +// // ? zeroFill(2, draft) +// // : draft} +// // +// // ))} +// // {implementation.license}
+//
+// +// ); +// } diff --git a/pages/community/typography/Heading.jsx b/pages/community/typography/Heading.jsx new file mode 100644 index 000000000..b3c895f89 --- /dev/null +++ b/pages/community/typography/Heading.jsx @@ -0,0 +1,65 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +export default function Heading({ + typeStyle = 'heading-lg', + level = 'h2', + textColor = 'text-primary-800', + className, + children, + id, +}) { + let classNames = ''; + const Tag = `${level}`; + switch (typeStyle) { + case 'heading-xl': + classNames = `font-heading text-heading-md font-bold tracking-heading md:text-heading-xl ${className || ''}`; + break; + case 'heading-lg': + classNames = `font-heading text-heading-md font-bold tracking-heading md:text-heading-lg ${className || ''}`; + break; + case 'heading-md': + classNames = `font-heading text-heading-md font-bold tracking-heading ${className || ''}`; + break; + case 'heading-md-semibold': + classNames = `font-heading text-heading-md font-semibold tracking-heading ${className || ''}`; + break; + case 'heading-sm': + classNames = `font-heading text-heading-sm font-bold tracking-heading ${className || ''}`; + break; + case 'heading-sm-semibold': + classNames = `font-heading text-heading-sm font-semibold tracking-heading ${className || ''}`; + break; + case 'heading-xs': + classNames = `font-heading text-heading-xs font-bold tracking-heading ${className || ''}`; + break; + case 'heading-xs-semibold': + classNames = `font-heading text-heading-xs font-semibold tracking-heading ${className || ''}`; + break; + case 'body-lg': + classNames = `font-heading text-body-lg tracking-body font-regular ${className || ''}`; + break; + case 'body-md': + classNames = `font-heading text-body-md tracking-body font-regular ${className || ''}`; + break; + case 'body-sm': + classNames = `font-heading text-body-lg tracking-body font-regular ${className || ''}`; + break; + default: + classNames = `font-heading text-heading-md font-bold tracking-heading md:text-heading-xl ${className || ''}`; + } + + return ( + + {children} + + ); +} + +Heading.propTypes = { + typeStyle: PropTypes.string, + level: PropTypes.string, + textColor: PropTypes.string, + className: PropTypes.string, + children: PropTypes.node, + id: PropTypes.string, +}; diff --git a/public/img/community-member/alombarte.jpeg b/public/img/community-member/alombarte.jpeg new file mode 100644 index 000000000..1507eca3f Binary files /dev/null and b/public/img/community-member/alombarte.jpeg differ diff --git a/public/img/community-member/beda-hammerschmidt.jpeg b/public/img/community-member/beda-hammerschmidt.jpeg new file mode 100644 index 000000000..ee769b8cf Binary files /dev/null and b/public/img/community-member/beda-hammerschmidt.jpeg differ diff --git a/public/img/community-member/jeremy-faden.jpeg b/public/img/community-member/jeremy-faden.jpeg new file mode 100644 index 000000000..6fc2654be Binary files /dev/null and b/public/img/community-member/jeremy-faden.jpeg differ diff --git a/public/img/community-member/jeremy-fiel.jpeg b/public/img/community-member/jeremy-fiel.jpeg new file mode 100644 index 000000000..93f1bb58b Binary files /dev/null and b/public/img/community-member/jeremy-fiel.jpeg differ diff --git a/public/img/community-member/matteo-collina.jpeg b/public/img/community-member/matteo-collina.jpeg new file mode 100644 index 000000000..0d692b2fb Binary files /dev/null and b/public/img/community-member/matteo-collina.jpeg differ diff --git a/public/img/community-member/satyam-kumar.jpeg b/public/img/community-member/satyam-kumar.jpeg new file mode 100644 index 000000000..ebf63c3ab Binary files /dev/null and b/public/img/community-member/satyam-kumar.jpeg differ diff --git a/public/img/community-member/tobie.jpeg b/public/img/community-member/tobie.jpeg new file mode 100644 index 000000000..7efe42e93 Binary files /dev/null and b/public/img/community-member/tobie.jpeg differ diff --git a/public/img/contributer_gsoc_2024/akanksha_kushwaha.jpeg b/public/img/contributer_gsoc_2024/akanksha_kushwaha.jpeg new file mode 100644 index 000000000..81a650439 Binary files /dev/null and b/public/img/contributer_gsoc_2024/akanksha_kushwaha.jpeg differ diff --git a/public/img/contributer_gsoc_2024/alok_gupta.jpeg b/public/img/contributer_gsoc_2024/alok_gupta.jpeg new file mode 100644 index 000000000..e6fd64076 Binary files /dev/null and b/public/img/contributer_gsoc_2024/alok_gupta.jpeg differ diff --git a/public/img/contributer_gsoc_2024/dairya.jpeg b/public/img/contributer_gsoc_2024/dairya.jpeg new file mode 100644 index 000000000..3bcd5b85a Binary files /dev/null and b/public/img/contributer_gsoc_2024/dairya.jpeg differ diff --git a/public/img/contributer_gsoc_2024/jeel_rajodiya.jpeg b/public/img/contributer_gsoc_2024/jeel_rajodiya.jpeg new file mode 100644 index 000000000..a2654050b Binary files /dev/null and b/public/img/contributer_gsoc_2024/jeel_rajodiya.jpeg differ diff --git a/public/img/contributer_gsoc_2024/julian_cataldo.jpeg b/public/img/contributer_gsoc_2024/julian_cataldo.jpeg new file mode 100644 index 000000000..ba44bb430 Binary files /dev/null and b/public/img/contributer_gsoc_2024/julian_cataldo.jpeg differ diff --git a/public/img/contributer_gsoc_2024/michael_sharber.jpeg b/public/img/contributer_gsoc_2024/michael_sharber.jpeg new file mode 100644 index 000000000..3935cbee2 Binary files /dev/null and b/public/img/contributer_gsoc_2024/michael_sharber.jpeg differ diff --git a/public/img/contributer_gsoc_2024/mintu_gogoi.jpeg b/public/img/contributer_gsoc_2024/mintu_gogoi.jpeg new file mode 100644 index 000000000..7981a067a Binary files /dev/null and b/public/img/contributer_gsoc_2024/mintu_gogoi.jpeg differ diff --git a/public/img/contributer_gsoc_2024/neeraj_saini.jpeg b/public/img/contributer_gsoc_2024/neeraj_saini.jpeg new file mode 100644 index 000000000..9bec0ca47 Binary files /dev/null and b/public/img/contributer_gsoc_2024/neeraj_saini.jpeg differ diff --git a/public/img/contributer_gsoc_2024/paul_waller.jpeg b/public/img/contributer_gsoc_2024/paul_waller.jpeg new file mode 100644 index 000000000..c41f27c1f Binary files /dev/null and b/public/img/contributer_gsoc_2024/paul_waller.jpeg differ diff --git a/public/img/contributer_gsoc_2024/prince_rajput.jpeg b/public/img/contributer_gsoc_2024/prince_rajput.jpeg new file mode 100644 index 000000000..435ca3c01 Binary files /dev/null and b/public/img/contributer_gsoc_2024/prince_rajput.jpeg differ diff --git a/public/img/contributer_gsoc_2024/roni.jpeg b/public/img/contributer_gsoc_2024/roni.jpeg new file mode 100644 index 000000000..9f4441dad Binary files /dev/null and b/public/img/contributer_gsoc_2024/roni.jpeg differ diff --git a/public/img/contributer_gsoc_2024/tamanna_verma.jpeg b/public/img/contributer_gsoc_2024/tamanna_verma.jpeg new file mode 100644 index 000000000..18859ea94 Binary files /dev/null and b/public/img/contributer_gsoc_2024/tamanna_verma.jpeg differ diff --git a/public/img/event/Json-Schema-Blog.png b/public/img/event/Json-Schema-Blog.png new file mode 100644 index 000000000..1c44e7d57 Binary files /dev/null and b/public/img/event/Json-Schema-Blog.png differ diff --git a/public/img/event/meet.png b/public/img/event/meet.png new file mode 100644 index 000000000..b419ae063 Binary files /dev/null and b/public/img/event/meet.png differ diff --git a/public/img/home-page/slack.png b/public/img/home-page/slack.png new file mode 100644 index 000000000..7b5d6a1e5 Binary files /dev/null and b/public/img/home-page/slack.png differ diff --git a/styles/globals.css b/styles/globals.css index d0425223b..be156f2d4 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -195,8 +195,246 @@ border-radius: 4px; */ top: 35px; /* change this value to match the height of the header */ } + /* In your CSS file */ .mt-custom { margin-top: 4.4rem; } +@media (max-width: 767px) { + .orbits { + display: none; + } +} + +.orbit-container { + position: relative; + margin: 0 auto; + width: 100%; + height: 100%; + top: -200px; +} + +.orbit { + position: absolute; + border-radius: 100%; + border: solid 3px #f3f3f4; + transition: 0.2s; +} + +.orbit > div { + cursor: pointer; +} + +.orbit > div > img { + border-radius: 100%; +} + +.title { + line-height: 0.9; + font-size: 60px; +} + +#first-orbit { + --n: 6; + /* number of item */ + --d: 70s; + /* duration */ + width: 600px; + height: 600px; + top: 165px; + left: calc(50% - 300px); + position: relative; + display: grid; + grid-template-columns: 35px; + grid-template-rows: 35px; + place-content: center; +} + +#second-orbit { + --no: 7; + /* number of item */ + --de: 80s; + /* duration */ + width: 800px; + height: 800px; + top: 75px; + left: calc(50% - 400px); + display: grid; + grid-template-columns: 35px; + grid-template-rows: 35px; + place-content: center; +} + +#third-orbit { + --ni: 7; + /* number of item */ + --ds: 80s; + /* duration */ + width: 1000px; + height: 1000px; + top: -10px; + left: calc(50% - 500px); + display: grid; + grid-template-columns: 35px; + grid-template-rows: 35px; + place-content: center; +} + +.item, +.item-2, +.item-3 { + grid-area: 1/1; + line-height: 30px; + text-align: center; + border-radius: 50%; +} + +.item { + animation: orbit-spin var(--d) linear infinite; + transform: rotate(0) translate(300px) rotate(0); +} + +.item-2 { + animation: orbit-spin2 var(--de) linear infinite; + transform: rotate(-0) translate(400px) rotate(-0); +} + +.item-3 { + animation: orbit-spin3 var(--ds) linear infinite; + transform: rotate(0) translate(500px) rotate(0); +} + +@keyframes orbit-spin { + 100% { + transform: rotate(1turn) translate(300px) rotate(-1turn); + } +} + +.item:nth-child(1) { + animation-delay: calc(-0 * var(--d) / var(--n)); +} + +.item:nth-child(2) { + animation-delay: calc(-1 * var(--d) / var(--n)); +} + +.item:nth-child(3) { + animation-delay: calc(-2 * var(--d) / var(--n)); +} + +.item:nth-child(4) { + animation-delay: calc(-3 * var(--d) / var(--n)); +} + +.item:nth-child(5) { + animation-delay: calc(-4 * var(--d) / var(--n)); +} + +.item:nth-child(6) { + animation-delay: calc(-5 * var(--d) / var(--n)); +} + +@keyframes orbit-spin2 { + 100% { + transform: rotate(-1turn) translate(400px) rotate(1turn); + } +} + +.item-2:nth-child(1) { + animation-delay: calc(-0 * var(--de) / var(--no)); +} + +.item-2:nth-child(2) { + animation-delay: calc(-1 * var(--de) / var(--no)); +} + +.item-2:nth-child(3) { + animation-delay: calc(-2 * var(--de) / var(--no)); +} + +.item-2:nth-child(4) { + animation-delay: calc(-3 * var(--de) / var(--no)); +} + +.item-2:nth-child(5) { + animation-delay: calc(-4 * var(--de) / var(--no)); +} + +.item-2:nth-child(6) { + animation-delay: calc(-5 * var(--de) / var(--no)); +} + +.item-2:nth-child(7) { + animation-delay: calc(-6 * var(--de) / var(--no)); +} + +.item-2:nth-child(8) { + animation-delay: calc(-7 * var(--de) / var(--no)); +} + +.item-2:nth-child(9) { + animation-delay: calc(-8 * var(--de) / var(--no)); +} + +@keyframes orbit-spin3 { + 100% { + transform: rotate(1turn) translate(500px) rotate(-1turn); + } +} + +.item-3:nth-child(1) { + animation-delay: calc(-0 * var(--ds) / var(--ni)); +} + +.item-3:nth-child(2) { + animation-delay: calc(-1 * var(--ds) / var(--ni)); +} + +.item-3:nth-child(3) { + animation-delay: calc(-2 * var(--ds) / var(--ni)); +} + +.item-3:nth-child(4) { + animation-delay: calc(-3 * var(--ds) / var(--ni)); +} + +.item-3:nth-child(5) { + animation-delay: calc(-4 * var(--ds) / var(--ni)); +} + +.item-3:nth-child(6) { + animation-delay: calc(-5 * var(--ds) / var(--ni)); +} + +.item-3:nth-child(7) { + animation-delay: calc(-6 * var(--ds) / var(--ni)); +} + +.item-3:nth-child(8) { + animation-delay: calc(-7 * var(--ds) / var(--ni)); +} + +.item-3:nth-child(9) { + animation-delay: calc(-8 * var(--ds) / var(--ni)); +} + +.top-12 { + top: 48px; +} + +.bg-ambassador { + background-image: url(/img/avatars/benhutton.webp); +} + +.bg-slack { + background-image: url(/img/home-page/slack.png); +} + +.bg-meeting { + background-image: url(/img/event/meet.png); +} + +.bg-blog { + background-image: url(/img/event/Json-Schema-Blog.png); +} diff --git a/yarn.lock b/yarn.lock index 6ef2c42e5..e1a7e7b7b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -150,6 +150,13 @@ dependencies: regenerator-runtime "^0.14.0" +"@babel/runtime@^7.23.7": + version "7.24.0" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.0.tgz#584c450063ffda59697021430cb47101b085951e" + integrity sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw== + dependencies: + regenerator-runtime "^0.14.0" + "@corex/deepmerge@^4.0.43": version "4.0.43" resolved "https://registry.yarnpkg.com/@corex/deepmerge/-/deepmerge-4.0.43.tgz#9bd42559ebb41cc5a7fb7cfeea5f231c20977dca" @@ -3088,6 +3095,13 @@ synckit@^0.8.6: "@pkgr/core" "^0.1.0" tslib "^2.6.2" +tailwind-merge@^2.2.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.2.1.tgz#3f10f296a2dba1d88769de8244fafd95c3324aeb" + integrity sha512-o+2GTLkthfa5YUt4JxPfzMIpQzZ3adD1vLVkvKE1Twl9UAhGsEbIZhHHZVRttyW177S8PDJI3bTQNaebyofK3Q== + dependencies: + "@babel/runtime" "^7.23.7" + tailwindcss@^3.3.5: version "3.3.5" resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.5.tgz#22a59e2fbe0ecb6660809d9cc5f3976b077be3b8"