feat: docker (#5)

Co-authored-by: zeon-neon[bot] <136533918+zeon-neon[bot]@users.noreply.github.com>

.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+.github
+scripts

.github/workflows/build-docker.yml

@@ -0,0 +1,22 @@
+name: publish
+on:
+  push:
+    branches:
+      - "main"
+  workflow_dispatch:
+
+jobs:
+  publish-docker-image:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v1
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.MY_TOKEN }}
+      - name: Build the Docker image
+        run: |
+          docker build . --tag ghcr.io/neongamerbot-qk/saahildcom:latest
+          docker push ghcr.io/neongamerbot-qk/saahildcom:latest

Dockerfile

@@ -0,0 +1,14 @@
+FROM node:20-alpine as builder
+WORKDIR /app
+COPY package*.json .
+COPY yarn*.lock .
+RUN yarn install
+COPY . .
+RUN yarn build
+
+#Stage 2
+FROM nginx:1.19.0
+WORKDIR /usr/share/nginx/html
+RUN rm -rf ./*
+COPY --from=builder /app/build .
+ENTRYPOINT ["nginx", "-g", "daemon off;"]

docker-compose.yml

@@ -0,0 +1,7 @@
+name: <your project name>
+services:
+    <to-change-here>:
+        ports:
+            - 3000:80
+        container_name: saahildcom
+        image: <to-change-here>:latest

src/components/AboutPage/index.tsx

@@ -1,50 +1,47 @@
-import { mdiBullet } from "@mdi/js";
+import { mdiBullet } from '@mdi/js'
-import Icon from "@mdi/react";
+import Icon from '@mdi/react'
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react'
 
 export default function AboutPage () {
-  const [currentGrade, setCurrentGrade] = useState<string>("0th");
+  const [currentGrade, setCurrentGrade] = useState<string>("0th")
   useEffect(() => {
-    let year: number = new Date().getFullYear();
+    let year:number = new Date().getFullYear()
     if (year > 2027) {
-      let result = year - 2027;
+let result = year - 2027
       switch(result) {
 case 0:
-          setCurrentGrade(`12th`);
+  setCurrentGrade(`12th`)
   break;
   default: 
-          setCurrentGrade(`Collage Student`);
+setCurrentGrade(`Collage Student`)
   break;
       }
     } else {
-      setCurrentGrade(`${Math.abs(2027 - 2024 - 13)}th`);
+      setCurrentGrade(`${Math.abs((2027 - 2024) - 13)}th`)
     }
-  });
+  })
-  return (
+  return <div className={'hero min-h-screen md:ml-0 ml-2'}>
-    <div className={"hero min-h-screen md:ml-0 ml-2"}>
+    <div className='container'>
-      <div className="container">
+      <h1 className='text-3xl font-bold'>
-        <h1 className="text-3xl font-bold">
+Some info about <span className='text-highlight'>me</span>
-          Some info about <span className="text-highlight">me</span>
       </h1>
       <div>
-          <blockquote className="mb-0 blockquote">
+        <blockquote className='mb-0 blockquote'>
-            <p style={{ textAlign: "justify" }}>
+          <p style={{ textAlign: 'justify' }}>
-              Hi Everyone, I am{" "}
+            Hi Everyone, I am{' '}
-              <span className="text-highlight ">Saahil dutta, </span>
+            <span className='text-highlight '>Saahil dutta, </span>
-              from <span className="text-highlight "> USA </span>
+            from <span className='text-highlight '> USA </span>
             <br />I am a {currentGrade} grader in KCD.
             <br />
             <br />
             Apart from coding, some other activities that I love to do!
           </p>
           <ul>
-              <li className="about-activity">
+            <li className='about-activity'>
-                <Icon path={mdiBullet} className="inline-block" size={1} />{" "}
+              <Icon path={mdiBullet} className='inline-block'size={1} /> Playing Games
-                Playing Games
             </li>
-              <li className="about-activity">
+            <li className='about-activity'>
-                <Icon path={mdiBullet} className="inline-block" size={1} />{" "}
+              <Icon path={mdiBullet} className='inline-block' size={1} /> Eating different types of food
-                Eating different types of food
             </li>
             {/* <li className="about-activity">
               <ImPointRight className="inline-block"/> Traveling