use absolute file path for ambassadors.json

Author: idanidan29

pages/ambassadors/index.page.tsx

@@ -6,15 +6,25 @@ import ambassadorList from '~/data/ambassadors-contributions.json';
 import ambassadorsBanner from '~/public/img/community/ambassadors.png';
 
 import Image from 'next/image';
-
 import fs from 'fs';
+import path from 'path';
 
 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');
+  // Use an absolute path to correctly resolve the JSON file location
+  const filePath = path.join(
+    process.cwd(),
+    '_includes',
+    'community',
+    'programs',
+    'ambassadors',
+    'ambassadors.json',
+  );
+  const fileContents = fs.readFileSync(filePath, 'utf-8');
+  const ambassadorData = JSON.parse(fileContents);
 
   return {
     props: {
@@ -23,10 +33,10 @@ export async function getStaticProps() {
   };
 }
 
-export default function ambassadorPages({
+export default function AmbassadorPages({
   ambassadorData,
 }: {
-  ambassadorData: any;
+  ambassadorData: Ambassador[];
 }) {
   return (
     <SectionContext.Provider value='ambassador'>
@@ -48,7 +58,7 @@ export default function ambassadorPages({
             >
               Become a JSON Schema Ambassador
             </h1>
-            <p className='mt-5 text-slate-700 text-lg  dark:text-slate-100'>
+            <p className='mt-5 text-slate-700 text-lg dark:text-slate-100'>
               The JSON Schema Ambassadors Program recognizes the people who
               drive adoption, innovation, and knowledge sharing in the JSON
               Schema community.
@@ -100,13 +110,11 @@ export default function ambassadorPages({
             </p>
           </h2>
         </section>
-        <div className=' flex justify-center container m-auto p-auto'>
+        <div className='flex justify-center container m-auto p-auto'>
           <div className='grid md:grid-cols-2 lg:grid-cols-3 gap-6'>
-            {JSON.parse(ambassadorData).map(
-              (ambassador: Ambassador, index: number) => (
-                <AmbassadorCard key={index} ambassador={ambassador} />
-              ),
-            )}
+            {ambassadorData.map((ambassador: Ambassador, index: number) => (
+              <AmbassadorCard key={index} ambassador={ambassador} />
+            ))}
           </div>
         </div>
         <div className='flex justify-center p-auto'>
@@ -117,4 +125,4 @@ export default function ambassadorPages({
   );
 }
 
-ambassadorPages.getLayout = getLayout;
+AmbassadorPages.getLayout = getLayout;