Migrated to nextjs

HackHPI · Feb 13, 2024 · 58e7b0d · 58e7b0d
1 parent f74164a
commit 58e7b0d
Show file tree

Hide file tree

Showing 20 changed files with 374 additions and 113 deletions.
diff --git a/.github/workflows/docker-image.yml b/.github/workflows/docker-image.yml
@@ -22,6 +22,12 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
+      - name: Node install and build
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+      - run: npm i
+      - run: npm run build --if-present
       - name: Log in to the Container registry
         uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
         with:

diff --git a/Dockerfile b/Dockerfile
@@ -1,12 +1,4 @@
-FROM node:lts AS runtime
-WORKDIR /app
+FROM nginx:alpine
 
-COPY . .
-
-RUN npm install
-RUN npm run build
-
-ENV HOST=0.0.0.0
-ENV PORT=80
+COPY ./out /usr/share/nginx/html/
 EXPOSE 80
-CMD node ./dist/server/entry.mjs
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import {AppRouterCacheProvider} from "@mui/material-nextjs/v13-appRouter";
+import HackHPIWrapper from "../src/components/Theme/HackHPIWrapper";
+import Footer from "../src/components/Footer/Footer";
+
+export default function RootLayout({
+                                       children,
+                                   }: {
+    children: React.ReactNode
+}) {
+    return (
+        <html lang="en">
+        <head>
+            <meta charSet="UTF-8"/>
+            <meta name="viewport" content="width=device-width"/>
+            <link rel="icon" type="image/svg" href="/HackHPI_white.svg"/>
+            <title>
+                HackHPI 2024 | tomorrow's reality, today's vision. smart cities edition.
+            </title>
+            <meta name={"description"}
+                  content={"Explore the future of urban living at HPI in Potsdam. Join motivated students for two days of innovation, workshops, and collaboration with top-notch sponsors offering support and expertise. Tackle a challenge and dive into the world of smart cities."}/>
+        </head>
+        <body>
+        <AppRouterCacheProvider>
+            <HackHPIWrapper>
+                {children}
+            </HackHPIWrapper>
+            <Footer/>
+        </AppRouterCacheProvider>
+        </body>
+        </html>
+    )
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,27 @@
+import LandingImage2 from "../src/components/LandingImage/LandingImage2";
+import {VerifiedChecker} from "../src/components/VerifiedChecker/VerifiedChecker";
+import WhatToExpect from "../src/components/WhatToExpect/WhatToExpect";
+import Sponsors from "../src/components/Sponsors/Sponsors";
+import Registration from "../src/components/Registration/Registration";
+import Newsletter from "../src/components/Newsletter/Newsletter";
+import {TimeTable} from "../src/components/TimeTable/TimeTable";
+import {Gallery} from "../src/components/Gallery/Gallery";
+import {Faq} from "../src/components/Faq/Faq";
+import Team from "../src/components/Team/Team";
+
+export default function Page() {
+    return (
+        <>
+            <LandingImage2 />
+            <VerifiedChecker />
+            <WhatToExpect />
+            <Sponsors />
+            <Registration/>
+            <Newsletter />
+            <TimeTable />
+            <Gallery />
+            <Faq />
+            <Team />
+        </>
+    )
+}
diff --git a/next.config.js b/next.config.js
@@ -0,0 +1,17 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+    output: 'export',
+
+    // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
+    // trailingSlash: true,
+
+    // Optional: Prevent automatic `/me` -> `/me/`, instead preserve `href`
+    // skipTrailingSlashRedirect: true,
+
+    // Optional: Change the output directory `out` -> `dist`
+    // distDir: 'dist',
+}
+
+module.exports = nextConfig
diff --git a/package.json b/package.json
@@ -1,19 +1,18 @@
 {
   "name": "hackhpi-website",
-  "type": "module",
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "dev": "astro dev",
-    "start": "astro dev",
-    "build": "astro build",
-    "preview": "astro preview",
-    "astro": "astro"
+    "dev": "next dev",
+    "start": "next dev",
+    "build": "next build",
+    "lint": "next lint"
   },
   "dependencies": {
     "@astrojs/node": "^6.1.0",
     "@astrojs/react": "^3.0.9",
     "@astrojs/tailwind": "^5.0.0",
+    "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@fontsource-variable/exo-2": "^5.0.17",
@@ -27,12 +26,14 @@
     "@mui/icons-material": "^5.15.5",
     "@mui/lab": "^5.0.0-alpha.163",
     "@mui/material": "^5.15.5",
+    "@mui/material-nextjs": "^5.15.9",
     "@supabase/supabase-js": "^2.39.3",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "astro": "^3.1.1",
     "astro-icon": "^0.8.1",
     "axios": "^1.6.7",
+    "next": "^14.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-type-animation": "^3.2.0",

diff --git a/public/HackHPI24_white.svg b/public/HackHPI24_white.svg
diff --git a/src/components/FadeInContainer/FadeInContainer.jsx b/src/components/FadeInContainer/FadeInContainer.jsx
@@ -1,3 +1,4 @@
+'use client'
 import ReactVisibilitySensor from 'react-visibility-sensor';
 import {useState} from "react";
 import {Slide} from "@mui/material";

diff --git a/src/components/Faq/Faq.jsx b/src/components/Faq/Faq.jsx
@@ -1,3 +1,4 @@
+'use client'
 import {Box, Card, Container, Grid, Link, List, ListItemButton, ListItemIcon, Typography} from "@mui/material";
 import React from "react";
 import {KeyboardArrowRight} from "@mui/icons-material";

diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
@@ -1,3 +1,4 @@
+'use client'
 import {
     Card,
     Container,

diff --git a/src/components/Gallery/Gallery.jsx b/src/components/Gallery/Gallery.jsx
@@ -1,3 +1,4 @@
+'use client'
 import {Box, Container, Grid, ImageList, ImageListItem, Typography} from "@mui/material";
 import React from "react";
 import DSC02572 from '../../assets/images/event/DSC02572_1920.webp'

diff --git a/src/components/LandingImage/Countdown.jsx b/src/components/LandingImage/Countdown.jsx
@@ -1,3 +1,4 @@
+'use client'
 import {Typography} from "@mui/material";
 import {useEffect, useState} from "react";
 

diff --git a/src/components/LandingImage/LandingImage2.jsx b/src/components/LandingImage/LandingImage2.jsx
@@ -1,3 +1,4 @@
+'use client'
 import {Box, Button, Container, Stack} from "@mui/material";
 import '@fontsource/urbanist'
 import {TypeAnimation} from "react-type-animation";
@@ -8,7 +9,6 @@ function LandingImage2() {
 
 
     return (
-        <HackHPIWrapper>
             <Box sx={{
                 height: "80vh",
                 width: "100%",
@@ -26,11 +26,10 @@ function LandingImage2() {
                         flexDirection: "column"
                     }}>
 
-                        <img src={"/HackHPI24_white.png"} width={"200rem"}/>
+                        <img src={"/HackHPI24_white.png"} width={"200rem"} alt={"HackHPI Logo"}/>
                         <div>
                             <Countdown/>
                             <TypeAnimation
-                                client:load
                                 preRenderFirstString={true}
                                 sequence={[
                                     500,
@@ -64,7 +63,6 @@ function LandingImage2() {
                     </Box>
                 </Container>
             </Box>
-        </HackHPIWrapper>
     )
 }
 

diff --git a/src/components/Newsletter/Newsletter.jsx b/src/components/Newsletter/Newsletter.jsx
@@ -1,3 +1,4 @@
+'use client'
 import {Box, Container, Grid, Link, Typography} from "@mui/material";
 import {createClient} from "@supabase/supabase-js";
 import {useEffect} from "react";

diff --git a/src/components/Sponsors/Sponsors.jsx b/src/components/Sponsors/Sponsors.jsx
@@ -1,29 +1,25 @@
 import {Box, Container, Grid} from "@mui/material";
 import Starwit from "../../assets/images/sponsors/cropped-logo-starwit-white.png"
 import ESchool from "../../assets/images/sponsors/trpnt_e-school-standalone-white_high.png"
-import {FadeInContainer} from "../FadeInContainer/FadeInContainer.jsx";
 import React from "react";
 import HackHPIWrapper from "../Theme/HackHPIWrapper.jsx";
 
 function Sponsors() {
-    const containerRef = React.useRef(null);
 
     return (
         <HackHPIWrapper>
-            <Box ref={containerRef} sx={{paddingTop: 10, paddingBottom: 10}}>
-                <FadeInContainer containerRef={containerRef}>
-                    <Container maxWidth={"xl"}>
-                        <Grid container sx={{paddingTop: "5rem"}} justifyContent={"center"} spacing={10}>
-                            <Grid item>
-                                <img src={Starwit.src} alt={"Logo of starwit"} style={{height: "5rem"}}/>
-                            </Grid>
-                            <Grid item>
-                                <img src={ESchool.src} alt={"Logo of E-Scool"} style={{height: "5rem"}}/>
-                            </Grid>
+            <Box sx={{paddingTop: 10, paddingBottom: 10}}>
+                <Container maxWidth={"xl"}>
+                    <Grid container sx={{paddingTop: "5rem"}} justifyContent={"center"} spacing={10}>
+                        <Grid item>
+                            <img src={Starwit.src} alt={"Logo of starwit"} style={{height: "5rem"}}/>
                         </Grid>
+                        <Grid item>
+                            <img src={ESchool.src} alt={"Logo of E-Scool"} style={{height: "5rem"}}/>
+                        </Grid>
+                    </Grid>
 
-                    </Container>
-                </FadeInContainer>
+                </Container>
             </Box>
         </HackHPIWrapper>
     )