Merge branch 'dev' into eventspage-nextjs

Signed-off-by: Jan Lorenz <[email protected]>
ScilifelabDataCentre · Oct 3, 2024 · e555b36 · e555b36
2 parents 0359aee + 324e41e
commit e555b36
Show file tree

Hide file tree

Showing 24 changed files with 278 additions and 158 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -4,4 +4,5 @@ build
 .dockerignore
 **/.git
 **/.DS_Store
-**/node_modules
+**/node_modules
+next-app/.next
diff --git a/_nextjs_Dockerfile b/_nextjs_Dockerfile
@@ -0,0 +1,50 @@
+FROM node:18-alpine AS base
+
+# 1. Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY ./next-app/package.json ./
+COPY ./next-app/package-lock.json ./
+RUN \
+  if [ -f package-lock.json ]; then npm ci; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+
+# 2. Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY ./next-app/ .
+# This will do the trick, use the corresponding env file for each environment.
+RUN npm run build
+
+# 3. Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+
+RUN addgroup -g 1001 -S nodejs
+RUN adduser -S nextjs -u 1001
+
+COPY --from=builder /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+
+CMD HOSTNAME="0.0.0.0" node server.js
diff --git a/next-app/.eslintrc.json b/next-app/.eslintrc.json
@@ -1,3 +1,7 @@
 {
-  "extends": ["next/core-web-vitals", "next/typescript"]
+  "extends": ["next/core-web-vitals", "next/typescript"],
+  "rules": {
+    "prefer-spread": ["off"],
+    "@next/next/no-img-element": "off"
+  }
 }
diff --git a/next-app/next.config.mjs b/next-app/next.config.mjs
@@ -8,7 +8,8 @@ const nextConfig = {
             permanent: true,
           },
         ]
-      },
+    },
+    output: 'standalone',
 };
 
 export default nextConfig;
diff --git a/next-app/package-lock.json b/next-app/package-lock.json
diff --git a/next-app/package.json b/next-app/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@jonkoops/matomo-tracker-react": "^0.7.0",
     "axios": "^1.7.7",
+    "cookies-next": "^4.2.1",
     "daisyui": "^4.12.10",
     "js-cookie": "^3.0.5",
     "next": "14.2.11",

diff --git a/next-app/src/app/about/partners/page.tsx b/next-app/src/app/about/partners/page.tsx
@@ -6,18 +6,18 @@ import CardComponent from '@/components/CardComponent';
 import { TrackPageViewIfEnabled } from '@/util/cookiesHandling';
 
 // import elixirImage from '../assets/Partner logo/Elixir-Europe-logo-1.png';
-let dcImage = '/Partner logo/dc.png';
-let nbisImage = '/Partner logo/nbislogo_orange_txt_3cb0778d90.svg';
-let kawImage = '/Partner logo/kaw_sv_300x300.png';
-let kiImage = '/Partner logo/KI_digital_logotyp_positiv_RGB.png';
-let scilifelabImage = '/Partner logo/SciLifeLab_Logotype_Green_POS.png';
+const dcImage = '/Partner logo/dc.png';
+const nbisImage = '/Partner logo/nbislogo_orange_txt_3cb0778d90.svg';
+const kawImage = '/Partner logo/kaw_sv_300x300.png';
+const kiImage = '/Partner logo/KI_digital_logotyp_positiv_RGB.png';
+const scilifelabImage = '/Partner logo/SciLifeLab_Logotype_Green_POS.png';
 
 
 export default function AboutPartnersPage(): ReactElement {
     TrackPageViewIfEnabled();
 
-    let cardClasses: string = "flex flex-row justify-center items-center w-full h-full bg-white shadow-xl";
-    var cardConfig: { [id: string] : ICardConfig; } = {
+    const cardClasses: string = "flex flex-row justify-center items-center w-full h-full bg-white shadow-xl";
+    const cardConfig: { [id: string] : ICardConfig; } = {
         'dcCard': {
             cardClasses: cardClasses + " pl-6",
             titleClasses: "card-title",
@@ -65,7 +65,7 @@ export default function AboutPartnersPage(): ReactElement {
         },
     };
 
-    var cardContent: { [id: string] : ICardContent } = {
+    const cardContent: { [id: string] : ICardContent } = {
         'dcCard': {
             title: "SciLifeLab Data Centre",
             subTitle: "",

diff --git a/next-app/src/app/about/team/page.tsx b/next-app/src/app/about/team/page.tsx
@@ -9,7 +9,7 @@ import { TeamDescriptions } from '@/content/content';
 export default function AboutTeamPage(): ReactElement {
     TrackPageViewIfEnabled();
 
-    var cardConfig: { [id: string] : ICardConfig; } = {
+    const cardConfig: { [id: string] : ICardConfig; } = {
         'teamCard': { 
             cardClasses: "card h-[46rem] w-96 bg-white shadow-xl", 
             titleClasses: "card-title",
@@ -21,45 +21,45 @@ export default function AboutTeamPage(): ReactElement {
         },
     };
 
-    var cardContent: { [id: string] : ICardContent } = {
+    const cardContent: { [id: string] : ICardContent } = {
         'JanCard': {
             title: TeamDescriptions.teamMembers.jan.name, 
             subTitle: TeamDescriptions.teamMembers.jan.title,
             text: TeamDescriptions.teamMembers.jan.description, 
             buttonText: "",
-            imageSrc: TeamDescriptions.teamMembers.jan.img.src,
+            imageSrc: TeamDescriptions.teamMembers.jan.img,
             imageAlt: TeamDescriptions.teamMembers.jan.imgAlt,
         },
         'NatCard': {
             title: TeamDescriptions.teamMembers.natashia.name, 
             subTitle: TeamDescriptions.teamMembers.natashia.title,
             text: TeamDescriptions.teamMembers.natashia.description, 
             buttonText: "",
-            imageSrc: TeamDescriptions.teamMembers.natashia.img.src,
+            imageSrc: TeamDescriptions.teamMembers.natashia.img,
             imageAlt: TeamDescriptions.teamMembers.natashia.imgAlt,
         },
         'SebCard': {
             title: TeamDescriptions.teamMembers.sebastian.name, 
             subTitle: TeamDescriptions.teamMembers.sebastian.title,
             text: TeamDescriptions.teamMembers.sebastian.description, 
             buttonText: "",
-            imageSrc: TeamDescriptions.teamMembers.sebastian.img.src,
+            imageSrc: TeamDescriptions.teamMembers.sebastian.img,
             imageAlt: TeamDescriptions.teamMembers.sebastian.imgAlt,
         },
         'SamCard': {
             title: TeamDescriptions.teamMembers.saman.name, 
             subTitle: TeamDescriptions.teamMembers.saman.title,
             text: TeamDescriptions.teamMembers.saman.description, 
             buttonText: "",
-            imageSrc: TeamDescriptions.teamMembers.saman.img.src,
+            imageSrc: TeamDescriptions.teamMembers.saman.img,
             imageAlt: TeamDescriptions.teamMembers.saman.imgAlt,
         },
         'MarCard': {
             title: TeamDescriptions.teamMembers.maria.name, 
             subTitle: TeamDescriptions.teamMembers.maria.title,
             text: TeamDescriptions.teamMembers.maria.description, 
             buttonText: "",
-            imageSrc: TeamDescriptions.teamMembers.maria.img.src,
+            imageSrc: TeamDescriptions.teamMembers.maria.img,
             imageAlt: TeamDescriptions.teamMembers.maria.imgAlt,
         },
     };
@@ -68,7 +68,7 @@ export default function AboutTeamPage(): ReactElement {
         <>
             <div className="grid grid-cols-3 place-items-center gap-2">
                 {Object.keys(cardContent).map( key => (
-                    <CardComponent cardConfig={cardConfig['teamCard']} cardContent={cardContent[key]} />
+                    <CardComponent cardConfig={cardConfig['teamCard']} cardContent={cardContent[key]} key={key} />
                 ))}
             </div>
         </>

diff --git a/next-app/src/app/accessclinicaldata/page.tsx b/next-app/src/app/accessclinicaldata/page.tsx
@@ -9,25 +9,31 @@ import { TrackPageViewIfEnabled } from '@/util/cookiesHandling';
 export default function AboutPage(): ReactElement {
   TrackPageViewIfEnabled();
 
-  var breadcrumbs: { [id: string]: ILink } = {
+  const breadcrumbs: { [id: string]: ILink } = {
     l1: { text: "Home", classes: "", link: "/" },
     l2: { text: "Access Clinical Data", classes: "", link: "" },
   };
 
   return (
     <div className={BODY_CLASSES}>
       <div className="text-sm breadcrumbs">
-        <ul className="list-disc">
-          {Object.keys(breadcrumbs).map((key) => (
-            <li>
-              {breadcrumbs[key].link ? (
-                <Link href={breadcrumbs[key].link}>{breadcrumbs[key].text}</Link>
-              ) : (
-                <>{breadcrumbs[key].text}</>
-              )}
-            </li>
+          <ul>
+          {Object.keys(breadcrumbs).map( key => (
+              <li key={key}>
+                  {
+                  breadcrumbs[key].link 
+                      ? 
+                      <Link href={breadcrumbs[key].link}>
+                          {breadcrumbs[key].text}
+                      </Link> 
+                      : 
+                      <>
+                          {breadcrumbs[key].text}
+                      </>
+                  }
+              </li>
           ))}
-        </ul>
+          </ul>
       </div>
       {/* Paragraph before the first heading */}
       <p>

diff --git a/next-app/src/app/contact/page.tsx b/next-app/src/app/contact/page.tsx
@@ -11,7 +11,7 @@ import ContactFormComponent from '@/components/ContactFormComponent';
 export default function ContactPage(): ReactElement {
     TrackPageViewIfEnabled();
 
-    var breadcrumbs: { [id: string] : ILink; } = {
+    const breadcrumbs: { [id: string] : ILink; } = {
         'l1': { text: 'Home', classes: '', link: '/' },
         'l2': { text: 'Contact', classes: '', link: '' },
     };
@@ -21,7 +21,19 @@ export default function ContactPage(): ReactElement {
             <div className="text-sm breadcrumbs">
                 <ul>
                 {Object.keys(breadcrumbs).map( key => (
-                    <li>{breadcrumbs[key].link ? <Link href={breadcrumbs[key].link}>{breadcrumbs[key].text}</Link> : <>{breadcrumbs[key].text}</>}</li>
+                    <li key={key}>
+                        {
+                        breadcrumbs[key].link 
+                            ? 
+                            <Link href={breadcrumbs[key].link}>
+                                {breadcrumbs[key].text}
+                            </Link> 
+                            : 
+                            <>
+                                {breadcrumbs[key].text}
+                            </>
+                        }
+                    </li>
                 ))}
                 </ul>
             </div>

diff --git a/next-app/src/app/kiarva/page.tsx b/next-app/src/app/kiarva/page.tsx
@@ -7,7 +7,7 @@ import Iframe from 'react-iframe';
 export default function KiarvaIFramePage(): ReactElement {
     TrackPageViewIfEnabled();
 
-    let kiarva_hostname = '';
+    const kiarva_hostname = '';
 
     return (
         <>

diff --git a/next-app/src/app/layout.tsx b/next-app/src/app/layout.tsx
@@ -1,13 +1,8 @@
 import type { Metadata } from "next";
-import localFont from "next/font/local";
 import "./globals.css";
 import HeaderComponent from "@/components/HeaderComponent";
 import FooterComponent from "@/components/FooterComponent";
-
-const latoSans = localFont({
-  src: "../../fonts/Lato-Regular.ttf", 
-  weight: "100 900",
-});
+import React from "react";
 
 export const metadata: Metadata = {
   title: "Precision Medicine Portal",