add PIs info in json

ts4nfdi · Feb 6, 2025 · 74f09e0 · 74f09e0
1 parent d38ce83
commit 74f09e0
Show file tree

Hide file tree

Showing 10 changed files with 98 additions and 109 deletions.
diff --git a/app/about/page.tsx b/app/about/page.tsx
@@ -3,7 +3,7 @@ import AboutPeople from "../ui/about/people";
 
 export default function About() {
   return (
-    <div className="md:col-span-10 sm:row-span-1 gap-4">
+    <div className="md:col-span-3 grid grid-rows-1">
       <div className="grid grid-rows-1 mb-20">
         <p className="header-1">Goals</p>
         <p className="text-justify">

diff --git a/app/contact/page.tsx b/app/contact/page.tsx
@@ -1,6 +1,6 @@
 export default function Contact() {
   return (
-    <div className="md:col-span-10 sm:row-span-1">
+    <div className="md:col-span-2">
       <p className="header-1">Contact us</p>
       <p>
         Feel free to contact us at

diff --git a/app/documentation/page.tsx b/app/documentation/page.tsx
@@ -1,6 +1,6 @@
 export default function Documentation() {
   return (
-    <div className="md:col-span-10 sm:row-span-1">
+    <div className="md:col-span-2">
       <p className="header-1">Service documentation</p>
       <p className="text-justify">
         Here you can read about service portal and API gateway user guid

diff --git a/app/globals.css b/app/globals.css
@@ -28,7 +28,7 @@ body {
 }
 
 .site-content{
-  @apply container grid md:grid-cols-10 sm:grid-rows-1 gap-4 min-h-screen pt-20 mx-auto md:pl-10 md:pr-4;
+  @apply container grid md:grid-cols-3 sm:grid-rows-1 gap-4 min-h-screen pt-20 mx-auto md:pl-10 pr-10;
 }
 
 .header-1{

diff --git a/app/libs/utils.ts b/app/libs/utils.ts
@@ -0,0 +1,13 @@
+import { promises as fs } from "fs";
+
+
+export async function readJsonFile(filePath: string) {
+  try {
+    const file = await fs.readFile(process.cwd() + filePath, 'utf8');
+    const data = JSON.parse(file);
+    return data;
+  } catch (e) {
+    console.error("Error reading JSON file:", e);
+    return null;
+  }
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -4,15 +4,15 @@ import Image from 'next/image';
 export default function Home() {
   return (
     <>
-      <div className='md:col-span-4 sm:row-span-1 mx-auto'>
+      <div className='md:col-span-1 mx-auto'>
         <Image
           src={"/logo.png"}
           width={400}
           height={400}
           alt="TS4NFDI Logo"
         />
       </div>
-      <div className='md:col-span-6 sm:row-span-1'>
+      <div className='md:col-span-2'>
         <p className='text-justify'>
           Terminology Services 4 NFDI (TS4NFDI) is a cross-domain service for the provision, curation, development,
           harmonization, and mapping of terminologies. It aims to facilitate consensus-building and interoperability

diff --git a/app/ui/about/people.json b/app/ui/about/people.json
@@ -22,6 +22,24 @@
           "name": "Koepler, Oliver",
           "affiliation": "TIB - Leibniz Information Centre for Science and Technology, Hannover",
           "orcid": "https://orcid.org/0000-0003-3385-4232"
+        },
+        {
+          "imagePath": "/blank.jpg",
+          "name": "Voß, Jakob",
+          "affiliation": "Verbundzentrale des GBV (VZG), Göttingen",
+          "orcid": "https://orcid.org/0000-0002-7613-4123"
+        },
+        {
+          "imagePath": "/blank.jpg",
+          "name": "Mühlhaus, Timo",
+          "affiliation": "RPTU University of Kaiserslautern-Landau",
+          "orcid": "https://orcid.org/0000-0003-3925-6778"
+        },
+        {
+          "imagePath": "/blank.jpg",
+          "name": "Posthumus, Etienne",
+          "affiliation": "FIZ Karlsruhe",
+          "orcid": "https://orcid.org/0000-0002-0006-7542"
         }
       ]
     },

diff --git a/app/ui/about/people.tsx b/app/ui/about/people.tsx
@@ -1,102 +1,43 @@
 import Image from "next/image";
+import { readJsonFile } from "@/app/libs/utils";
+import {
+  peopleJsonData,
+  sectionData,
+  personData
+} from "./types";
 
 
-import { promises as fs } from "fs";
-
-
-type personData = {
-  imagePath: string,
-  name: string,
-  affiliation: string,
-  orcid: string
-}
-
-type sectionData = {
-  title: string,
-  persons: personData[]
-}
-
 export default async function AboutPeople() {
   const [imgW, imgH] = [150, 150];
-
-  async function readJsonFile(filePath: string) {
-    try {
-      const file = await fs.readFile(process.cwd() + '/app/ui/about/people.json', 'utf8');
-      const data = JSON.parse(file);
-      return data;
-    } catch (e) {
-      console.error("Error reading YAML file:", e);
-      return null;
-    }
-  }
-
-  const peopleJson = await readJsonFile('') as sectionData[];
-  console.log(peopleJson)
-
+  const peopleJson = await readJsonFile('/app/ui/about/people.json') as peopleJsonData;
 
   return (
     <>
-      <p className="header-2"><b>Principal Investigators</b></p>
-      <div className="grid grid-rows-1">
-        <div className="grid md:grid-cols-3 sm:grid-rows-1">
-          {
-            //@ts-ignore
-            peopleJson['sections'][0]['persons'].map((person: personData) => {
-              return (
-                <div className="card">
-                  <Image src={person.imagePath} width={imgW} height={imgH} alt={person.name} className="mx-auto"></Image>
-                  <div className="pt-2">
-                    <p className="text-lg"><b>{person.name}</b></p>
-                    <p className="mb-2">{person.affiliation}</p>
-                    <a href={person.orcid} className="orcid-id-btn" target="_blank">ID</a>
-                  </div>
-                </div>
-              );
-            })
-          }
-        </div>
-      </div>
-      <p className="header-2"><b>Project Team Members</b></p>
-      <div className="grid grid-rows-1">
-        <div className="grid grid-cols-3">
-          {
-            //@ts-ignore
-            peopleJson['sections'][1]['persons'].map((person: personData) => {
-              return (
-                <div className="card">
-                  <Image src={person.imagePath} width={imgW} height={imgH} alt={person.name} className="mx-auto"></Image>
-                  <div className="pt-2">
-                    <p className="text-lg"><b>{person.name}</b></p>
-                    <p className="mb-2">{person.affiliation}</p>
-                    <a href={person.orcid} className="orcid-id-btn" target="_blank">ID</a>
-                  </div>
-                </div>
-              );
-            })
-          }
-
-        </div>
-      </div>
-      <p className="header-2"><b>Former Project Team Members</b></p>
-      <div className="grid grid-rows-1">
-        <div className="grid grid-cols-3">
-          {
-            //@ts-ignore
-            peopleJson['sections'][2]['persons'].map((person: personData) => {
-              return (
-                <div className="card">
-                  <Image src={person.imagePath} width={imgW} height={imgH} alt={person.name} className="mx-auto"></Image>
-                  <div className="pt-2">
-                    <p className="text-lg"><b>{person.name}</b></p>
-                    <p className="mb-2">{person.affiliation}</p>
-                    <a href={person.orcid} className="orcid-id-btn" target="_blank">ID</a>
-                  </div>
-                </div>
-              );
-            })
-          }
-        </div>
-      </div>
+      {
+        peopleJson['sections'].map((section: sectionData) => {
+          return (
+            <>
+              <p className="header-2"><b>{section.title}</b></p>
+              <div className="grid md:grid-cols-3 sm:grid-rows-1 gap-4">
+                {
+                  section.persons.map((person: personData) => {
+                    return (
+                      <div className="card">
+                        <Image src={person.imagePath} width={imgW} height={imgH} alt={person.name} className="mx-auto"></Image>
+                        <div className="pt-2">
+                          <p className="text-lg"><b>{person.name}</b></p>
+                          <p className="mb-2">{person.affiliation}</p>
+                          <a href={person.orcid} className="orcid-id-btn" target="_blank">ID</a>
+                        </div>
+                      </div>
+                    );
+                  })
+                }
+              </div>
+            </>
+          )
+        })
+      }
     </>
   );
 }
diff --git a/app/ui/about/types.ts b/app/ui/about/types.ts
@@ -0,0 +1,15 @@
+export type personData = {
+  imagePath: string,
+  name: string,
+  affiliation: string,
+  orcid: string
+}
+
+export type sectionData = {
+  title: string,
+  persons: personData[]
+}
+
+export type peopleJsonData = {
+  sections: sectionData[]
+}
diff --git a/app/widgets/page.tsx b/app/widgets/page.tsx
@@ -25,7 +25,7 @@ import { QueryClient, QueryClientProvider } from "react-query";
 export default function Widgets() {
   const queryClient = new QueryClient();
   return (
-    <div className="md:col-span-8 sm:row-span-1">
+    <div className="md:col-span-3">
       <p className="header-1">TSS Widgets</p>
       <p className="text-justify">
         The Terminology Service Suite project, derived from the
@@ -47,17 +47,19 @@ export default function Widgets() {
           <b>Parameters: </b>
           ontology=mesh,efo&type=class&collection=nfdi4health&fieldList=description,label,iri,ontology_name,type,short_form
         </p>
-        <AutocompleteWidget
-          api={"https://ts4nfdi-api-gateway.prod.km.k8s.zbmed.de/api-gateway/"}
-          hasShortSelectedLabel={true}
-          parameter={"ontology=mesh,efo&type=class&collection=nfdi4health&fieldList=description,label,iri,ontology_name,type,short_form"}
-          placeholder="Search for a Concept"
-          preselected={[]}
-          selectionChangedEvent={function noRefCheck() { }}
-          showApiSource={true}
-          singleSelection={true}
-          ts4nfdiGateway={true}
-        />
+        <div className='md:w-1/2 sm:w-full'>
+          <AutocompleteWidget
+            api={"https://ts4nfdi-api-gateway.prod.km.k8s.zbmed.de/api-gateway/"}
+            hasShortSelectedLabel={true}
+            parameter={"ontology=mesh,efo&type=class&collection=nfdi4health&fieldList=description,label,iri,ontology_name,type,short_form"}
+            placeholder="Search for a Concept"
+            preselected={[]}
+            selectionChangedEvent={function noRefCheck() { }}
+            showApiSource={true}
+            singleSelection={true}
+            ts4nfdiGateway={true}
+          />
+        </div>
       </QueryClientProvider>
     </div>
   );