Draft: Moving code over to next JS

.github/workflows/deploy.yml

@@ -0,0 +1,99 @@
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Deploy Next.js site to Pages
+
+# on:
+#   # Runs on pushes targeting the default branch
+#   pull_request:
+#     branches:
+#        - main
+#   # Allows you to run this workflow manually from the Actions tab
+#   workflow_dispatch:
+
+on: [push]
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+defaults:
+  run:
+    working-directory: ./
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=yarn" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager"
+            exit 1
+          fi
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "lts/*"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Restore cache
+        uses: actions/cache@v4
+        with:
+          path: ./.next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
+
+      - name: Install dependencies
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+
+      - name: Build with Next.js
+        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./out
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/workflows/node.js.yml

@@ -3,7 +3,7 @@
 
 name: Node.js CI
 
-on: [push]
+# on: [push]
 
 jobs:
   build:

.gitignore

@@ -3,20 +3,39 @@
 # dependencies
 /node_modules
 /.pnp
-.pnp.js
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
 
 # testing
 /coverage
 
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
 # misc
-**/.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.DS_Store
+*.pem
 
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
 
-/build
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+    "recommendations": [
+        "dbaeumer.vscode-eslint",
+        "bradlc.vscode-tailwindcss"
+    ]
+}

.vscode/launch.json

@@ -10,6 +10,16 @@
             "name": "Launch Chrome against localhost",
             "url": "http://localhost:3000",
             "webRoot": "${workspaceFolder}"
+        },
+        {
+            "name": "Next.js: debug server-side",
+            "type": "node-terminal",
+            "request": "launch",
+            "command": "npm run dev",
+            "sourceMaps": true,
+            "sourceMapPathOverrides": {
+                "/turbopack/[project]/*": "${webRoot}/*"
+            }
         }
     ]
 }

.vscode/settings.json

@@ -2,6 +2,10 @@
     "cSpell.words": [
         "browserslist",
         "camelcase",
-        "linebreak"
-    ]
+        "linebreak",
+        "rocksat"
+    ],
+    "files.associations": {
+        "*.css": "tailwindcss"
+    }
 }

README.md

@@ -1,81 +1,36 @@
-# Temple Robotics Website
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 
-This is the github pages repository used for hosting the Temple Robotics website. This website uses react for a single page static website, using the database located at `public/db.json` to fetch events.
+## Getting Started
 
-## Adding Events
+First, run the development server:
 
-The event database is located [here](public/db.json). Add an event by appending to the array. Events will need to be removed manually, as gh-pages cannot host a dynamic webpage. An example `json` can be seen below.
-
-The date format: `mm/dd/yyyy`
-The only other accepted format is an empty string, meaning the date has not been decided yet
-
-**Important:** Make sure to increment the id
-
-```ts
-[
- {
-    title: 'Title of the event',
-    description: 'Description of the event',
-    date: new Date('2025-01-22T17:00:00'),
-    location: 'The ideas hub (second floor of the engineering building)',
-    weekly: true,
-    endDate: new Date(semesterEnd)
- },
- {
-    title: 'Title of the event 2',
-    description: 'Description of the event 2',
-    date: new Date('2025-01-22T14:00:00'),
-    location: 'The ideas hub (second floor of the engineering building)',
-    weekly: true,
-    endDate: new Date(semesterEnd)
- }
-]
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
 ```
 
-## Changing Data
-
-There is information on changing certain data in [this README](./src/data/README.md). This includes things such as changing the photo galleries or adding new photos to them, adding to the home carousel, adding to the rocksat table, etc.
-
-## Getting the Environment Setup
-Make sure to install git lfs before cloning to properly run videos
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-https://docs.github.com/en/repositories/working-with-files/managing-large-files/installing-git-large-file-storage
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
 
-It should be pretty simple getting the website set up on vscode. First you will need to download [Node.js](https://nodejs.org/en/).
+## Learn More
 
-Once the newest version of `Node.js` is installed, you can install the node packages with npm as follows
+To learn more about Next.js, take a look at the following resources:
 
-```shell
-    npm i
-
-```
-
-Your environment should now be set up!
-
-## Using the Environment
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-Once the environment is set up, there are a few commands once should know for deploying locally and to the gh-pages branch.
-
-```sh
-    npm start # Start the website locally at http://localhost:3000/website-2.0
-    npm run deploy # Deploy the website to gh-pages. This should do all the work for you!
-```
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
 
-## VScode Extensions Being Used
+## Deploy on Vercel
 
-I use the following extensions in my environment:
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-- [Paste Image](https://marketplace.visualstudio.com/items?itemName=mushan.vscode-paste-image)
-- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
-- [CSS Formatter](https://marketplace.visualstudio.com/items?itemName=aeschli.vscode-css-formatter)
-- [CSS Modules](https://marketplace.visualstudio.com/items?itemName=clinyong.vscode-css-modules)
-- [CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)
-- [CSS-in-JS](https://marketplace.visualstudio.com/items?itemName=paulmolluzzo.convert-css-in-js)
-- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-- [HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)
-- [Open In Browser](https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser)
-- [Paste Image](https://marketplace.visualstudio.com/items?itemName=mushan.vscode-paste-image)
-- [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
-- [React Native Tools](https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native)
-- [vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components)
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

app/ballooning/page.tsx

@@ -0,0 +1,6 @@
+import BallooningPage from '@components/ballooning/BallooningPage'
+import React from 'react'
+
+export default function Robotics (): React.ReactElement {
+	return (<BallooningPage/>)
+}

app/events/page.tsx

@@ -0,0 +1,6 @@
+import EventsPage from '@components/events/EventsPage'
+import React from 'react'
+
+export default function Robotics (): React.ReactElement {
+	return (<EventsPage/>)
+}