diff --git a/pages/ambassadors/components/AmbassadorBanner.tsx b/components/AmbassadorsBanner.tsx similarity index 100% rename from pages/ambassadors/components/AmbassadorBanner.tsx rename to components/AmbassadorsBanner.tsx diff --git a/pages/ambassadors/components/AmbassadorCard.tsx b/components/AmbassadorsCard.tsx similarity index 83% rename from pages/ambassadors/components/AmbassadorCard.tsx rename to components/AmbassadorsCard.tsx index ce175430c..ad287ce64 100644 --- a/pages/ambassadors/components/AmbassadorCard.tsx +++ b/components/AmbassadorsCard.tsx @@ -1,16 +1,17 @@ import React, { useState } from 'react'; import Image from 'next/image'; -// import { Github, Twitter, Linkedin } from 'lucide-react'; -// Define the types for the `ambassador` prop interface Contribution { title: string; - date?: { month: string; year: number }; + date?: { + month: string; + year: number; + }; link: string; type: string; } -interface Ambassador { +export interface Ambassador { img?: string; name?: string; title?: string; @@ -24,29 +25,23 @@ interface Ambassador { contributions?: Contribution[]; } -interface AmbassadorCardProps { - ambassador: Ambassador; -} - -type SocialPlatform = 'github' | 'twitter' | 'mastodon' | 'linkedin'; +type SocialIcons = 'github' | 'twitter' | 'mastodon' | 'linkedin'; -// Utility function to generate full URLs for social media const getSocialMediaUrl = ( - platform: SocialPlatform, + platform: SocialIcons, username: string | undefined, ) => { - const baseUrls: Record = { + const baseUrls: Record = { github: 'https://github.com/', twitter: 'https://twitter.com/', - mastodon: 'https://mastodon.social/', + mastodon: 'https://fosstodon.org/', linkedin: 'https://www.linkedin.com/in/', }; return username ? baseUrls[platform] + username : undefined; }; -// Social media icon component with proper typing -const SocialIcon: React.FC<{ platform: SocialPlatform }> = ({ platform }) => { - const icons: Record = { +const SocialIcon = ({ platform }: { platform: SocialIcons }) => { + const icons: Record = { github: ( = ({ platform }) => { linkedin: ( - + + + ), mastodon: ( @@ -91,7 +99,7 @@ const SocialIcon: React.FC<{ platform: SocialPlatform }> = ({ platform }) => { return icons[platform]; }; -const AmbassadorCard: React.FC = ({ ambassador }) => { +const AmbassadorCard = ({ ambassador }: { ambassador: Ambassador }) => { const [showContributions, setShowContributions] = useState(false); const [imgSrc, setImgSrc] = useState( ambassador.img || '/api/placeholder/400/320', @@ -106,8 +114,7 @@ const AmbassadorCard: React.FC = ({ ambassador }) => { contributions = [], } = ambassador; - // Available social platforms with proper typing - const socialPlatforms: SocialPlatform[] = [ + const SocialIconss: SocialIcons[] = [ 'github', 'twitter', 'mastodon', @@ -116,7 +123,6 @@ const AmbassadorCard: React.FC = ({ ambassador }) => { return (
- {/* Black Borders */}
@@ -151,9 +157,8 @@ const AmbassadorCard: React.FC = ({ ambassador }) => {

)} - {/* Social Media Links */}
- {socialPlatforms.map((platform) => { + {SocialIconss.map((platform) => { const username = ambassador[platform]; return username ? ( = ({ ambassador }) => { })}
- {/* Button to Show/Hide Contributions */} {contributions.length > 0 && ( )} - {/* Contributions Section (Toggled) */} {showContributions && contributions.length > 0 && (

diff --git a/pages/ambassadors/components/AmbassadorList.tsx b/components/AmbassadorsList.tsx similarity index 85% rename from pages/ambassadors/components/AmbassadorList.tsx rename to components/AmbassadorsList.tsx index dfb3fcca7..0328f4772 100644 --- a/pages/ambassadors/components/AmbassadorList.tsx +++ b/components/AmbassadorsList.tsx @@ -1,18 +1,18 @@ import React from 'react'; -interface AmbassadorLink { +interface AmbassadorsLink { title: string; icon: string; details: string; } -interface AmbassadorListProps { +interface AmbassadorsListProps { ambassadorList: { - contents: AmbassadorLink[]; + contents: AmbassadorsLink[]; }; } -const AmbassadorList: React.FC = ({ ambassadorList }) => { +const AmbassadorList = ({ ambassadorList }: AmbassadorsListProps) => { return (
    {ambassadorList.contents.map((link) => ( diff --git a/context.ts b/context.ts index a091c1cb3..2d7bbee79 100644 --- a/context.ts +++ b/context.ts @@ -20,6 +20,7 @@ export const SectionContext = React.createContext< | 'getting-started' | 'reference' | 'roadmap' + | 'ambassador' >(null); export const BlockContext = React.createContext(null); export const FullMarkdownContext = React.createContext(null); diff --git a/data/ambassador_lists.json b/data/ambassadors-contributions.json similarity index 93% rename from data/ambassador_lists.json rename to data/ambassadors-contributions.json index 5b5537e7d..9bc6cab4c 100644 --- a/data/ambassador_lists.json +++ b/data/ambassadors-contributions.json @@ -12,7 +12,7 @@ }, { "title": "Give talks", - "details": "Speak at meetups and conferences; we’ll help with slides, abstract submissions, and travel budget.", + "details": "Speak at meetups and conferences; we'll help with slides, abstract submissions, and travel budget.", "icon": "/img/ambassadors/illustrations/speaker.png" }, { diff --git a/pages/ambassadors/index.page.tsx b/pages/ambassadors/index.page.tsx index 650883eb7..259d32035 100644 --- a/pages/ambassadors/index.page.tsx +++ b/pages/ambassadors/index.page.tsx @@ -2,19 +2,34 @@ import React from 'react'; import { getLayout } from '~/components/SiteLayout'; import { SectionContext } from '~/context'; -import ambassadorsBanner from '../../public/img/community/ambassadors.png'; -import AmbassadorBanner from './components/AmbassadorBanner'; -import ambassadorData from '../../data/ambassadors.json'; -import AmbassadorCard from './components/AmbassadorCard'; -import ambassadorList from '../../data/ambassador_lists.json'; +import ambassadorList from '~/data/ambassadors-contributions.json'; +import ambassadorsBanner from '~/public/img/community/ambassadors.png'; import Image from 'next/image'; -import AmbassadorList from './components/AmbassadorList'; +import fs from 'fs'; -export default function communityPages() { +import AmbassadorBanner from '~/components/AmbassadorsBanner'; +import AmbassadorCard, { type Ambassador } from '~/components/AmbassadorsCard'; +import AmbassadorList from '~/components/AmbassadorsList'; + +export async function getStaticProps() { + const ambassadorData = fs.readFileSync('data/ambassadors.json', 'utf-8'); + + return { + props: { + ambassadorData, + }, + }; +} + +export default function ambassadorPages({ + ambassadorData, +}: { + ambassadorData: any; +}) { return ( - +
    - {/* Left Section with Title, Description, and Button */}
    Become a JSON Schema Ambassador

-

+

The JSON Schema Ambassadors Program recognizes the people who drive adoption, innovation, and knowledge sharing in the JSON Schema community. @@ -51,7 +65,6 @@ export default function communityPages() {

- {/* Right Section with Image */}
- {ambassadorData.map((ambassador, index) => ( - - ))} + {JSON.parse(ambassadorData).map( + (ambassador: Ambassador, index: number) => ( + + ), + )}
@@ -102,4 +117,4 @@ export default function communityPages() { ); } -communityPages.getLayout = getLayout; +ambassadorPages.getLayout = getLayout;