Merge pull request #74 from COS301-SE-2024/feat/frontend/containerizi…

…ng-and-ci/cd-landing-page

feat: Remove unused files and update dependencies

.github/workflows/deploy-landing-page.yml

@@ -2,7 +2,10 @@ name: Deploy Landing page
 
 on:
   push:
-    branches: ["not-yet-specified"]
+    branches: ["develop"]
+    paths: [
+      "frontend/occupi/**",
+    ]
 
   workflow_dispatch:
 
@@ -11,32 +14,82 @@ defaults:
     working-directory: frontend/occupi
 
 jobs:
-  deploy:
+  # Build job
+  build-test:
     runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest # or "latest", "canary", <sha>
+
+      - name: Install dependencies with Bun
+        run: bun install
+
+      - name: Build with Next.js
+        run: bun run build
+
+  build-push-docker:
+    name: Build and Push Landing Page Docker Image
+    runs-on: ubuntu-latest
+    needs: build-test
 
     steps:
     - name: Checkout code
       uses: actions/checkout@v4
 
-    - name: Setup Bun
-      uses: oven-sh/setup-bun@v1
-      with:
-        bun-version: latest # or "latest", "canary", <sha>
-
-    - name: Install dependencies
-      run: bun install
+    - name: Set up QEMU
+      uses: docker/setup-qemu-action@v3
 
-    - name: Build Next.js app
-      run: bun run build
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v3
 
-    - name: Export static files (if needed)
-      run: bun export
+    - name: Login to DockerHub
+      uses: docker/login-action@v3
+      with:
+        username: ${{ secrets.DOCKER_USERNAME }}
+        password: ${{ secrets.DOCKER_PASSWORD }}
 
-    - name: Add SSH key
-      uses: webfactory/[email protected]
+    - name: Build and push Docker image
+      uses: docker/build-push-action@v5
       with:
-        ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}
+        context: frontend/occupi
+        file: frontend/occupi/Dockerfile
+        platforms: linux/amd64,linux/arm64
+        push: true
+        tags: ${{ secrets.DOCKER_USERNAME }}/occupi:latest
 
-    - name: Deploy to server
-      run: |
-        rsync -avz --delete-after frontend/occupi/out ${{ secrets.DEPLOY_SERVER }}:${{ secrets.DEPLOY_PATH }}
+  deploy:
+          name: Deploy Landing Page
+          runs-on: ubuntu-latest
+          needs: build-push-docker
+
+          steps:
+              - name: Checkout code
+                uses: actions/checkout@v4
+
+              - name: Copy files to VM
+                uses: appleboy/[email protected]
+                with:
+                      host: ${{ secrets.VM_IP }}
+                      username: ${{ secrets.VM_USERNAME }}
+                      key: ${{ secrets.VM_SSH_KEY }}
+                      source: "frontend/occupi/docker-compose.yml,frontend/occupi/Dockerfile"
+                      target: "/home/${{ secrets.VM_USERNAME }}/occupi"
+
+              # SSH to VM and run commands
+              - name: SSH to VM
+                uses: appleboy/ssh-action@master
+                with:
+                  host: ${{ secrets.VM_IP }}
+                  username: ${{ secrets.VM_USERNAME }}
+                  key: ${{ secrets.VM_SSH_KEY }}
+                  script: |
+                      cd /home/${{ secrets.VM_USERNAME }}/occupi/frontend/occupi
+                      echo "${{ secrets.DOCKER_PASSWORD }}" | docker login -u ${{ secrets.DOCKER_USERNAME }} --password-stdin
+                      DOCKER_USERNAME=${{ secrets.DOCKER_USERNAME }} docker compose -f docker-compose.yml down
+                      DOCKER_USERNAME=${{ secrets.DOCKER_USERNAME }} docker compose -f docker-compose.yml pull
+                      DOCKER_USERNAME=${{ secrets.DOCKER_USERNAME }} docker compose -f docker-compose.yml up -d

documentation/occupi-docs/theme.config.jsx

@@ -5,14 +5,14 @@ export default {
             <meta name="viewport" content="width=device-width, initial-scale=1.0" />
             <meta property="og:title" content="occupi" />
             <meta property="og:description" content="This is occupi-s documentation site" />
-            <link rel="icon" type="image/svg+xml" href="https://raw.githubusercontent.com/COS301-SE-2024/occupi/5f614e7d881c9d4f65ec2cf6ea60bf5542eb77a7/presentation/Occupi/image_2024-05-21_213821107.svg" />
+            <link rel="icon" type="image/svg+xml" href="https://raw.githubusercontent.com/COS301-SE-2024/occupi/5614db6d7821bb21b94125c83bc5a46126c5acac/frontend/occupi-web/public/occupi.svg" />
         </>
     ),
     logo: (
         <>
             <img 
                 style={{height: "30px"}}
-                src="https://raw.githubusercontent.com/COS301-SE-2024/occupi/5f614e7d881c9d4f65ec2cf6ea60bf5542eb77a7/presentation/Occupi/image_2024-05-21_213821107.svg" 
+                src="https://raw.githubusercontent.com/COS301-SE-2024/occupi/5614db6d7821bb21b94125c83bc5a46126c5acac/frontend/occupi-web/public/occupi.svg" 
                 />
             <span style={{ marginLeft: '.4em', fontWeight: 800 }}>
                 occupi-docs

frontend/occupi/.eslintrc.json

@@ -1,3 +1,4 @@
 {
-  "extends": "next/core-web-vitals"
-}
+  "extends": "next/core-web-vitals",
+  "rules": { "react/no-unescaped-entities": 0 }
+}

frontend/occupi/.gitignore

@@ -4,7 +4,6 @@
 /node_modules
 /.pnp
 .pnp.js
-.yarn/install-state.gz
 
 # testing
 /coverage
@@ -24,13 +23,10 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
 # local env files
 .env*.local
 
 # vercel
 .vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts

frontend/occupi/Dockerfile

@@ -0,0 +1,23 @@
+# Use the official bun image as a base
+FROM oven/bun:latest
+
+# Set the current working directory inside the container
+WORKDIR /app
+
+# copy bun.lockb package.json 
+COPY bun.lockb package.json ./
+
+# install dependencies
+RUN bun install
+
+# copy the source code into the container
+COPY . .
+
+# Build the next.js application
+RUN bun run build
+
+# Expose the port the app runs on
+EXPOSE 5000
+
+# Command to run the executable
+CMD ["bun", "start"]

frontend/occupi/README.md

@@ -1,29 +1,38 @@
-# Welcome to Occupi's landing page 👋
-
-//place landing page renderings here
-
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
 ## Getting Started
 
-1. We use bun as our package manager. Please download it at <a href="https://bun.sh/docs/installation">bun</a>.
-2. First, install dependencies:
+First, run the development server:
 
 ```bash
-bun install
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
 ```
 
-3. Next, run the development server:
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-```bash
-bun dev
-```
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
 
-4. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:
 
 - [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.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+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.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.