dockerbuils

.eslintrc.json

@@ -1,3 +1,4 @@
 {
-  "extends": "next/core-web-vitals"
+	"extends": "next/core-web-vitals",
+	"rules": { "react-hooks/exhaustive-deps": "warn" }
 }

docker-build.yml

@@ -0,0 +1,52 @@
+name: Docker Build
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Step 1: Checkout the code from the repository
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      # Step 2: Set up Node.js and install Yarn
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install Yarn
+        run: corepack enable && corepack prepare yarn@stable --activate
+
+      # Step 3: Install dependencies and build the Next.js app
+      - name: Install dependencies
+        run: yarn install
+      - name: Build Next.js app
+        run: yarn build
+
+      # Step 4: Set up Docker Buildx
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      # Step 5: Build Docker image
+      - name: Build Docker image
+        run: docker build -t webxr .
+
+      # Step 6: Test the Docker container
+      - name: Run Docker container
+        run: docker run -d -p 3000:3000 --name webxr webxr
+      - name: Test if container is running
+        run: |
+          sleep 5 # Wait for the container to start
+          curl -f http://localhost:3000 || exit 1
+
+      # Step 7: Cleanup
+      - name: Stop and remove Docker container
+        run: docker stop webxr && docker rm webxr

src/app/layout.tsx

@@ -29,29 +29,13 @@ export const metadata: Metadata = {
 		title: 'WebXR | MyriadFlow',
 		description:
 			'The future of shopping is here! MyriadFlow lets you chat with lifelike AI brand ambassadors about your favorite products, all within a captivating VR experience.',
-		images: [
-			{
-				url: '/metaimg.png', // Path to the image in the public folder
-				width: 1200,
-				height: 630,
-				alt: 'MyriadFlow WebXR',
-			},
-		],
 	},
 	twitter: {
 		card: 'summary_large_image',
 		site: '@MyriadFlow',
 		title: 'WebXR | MyriadFlow',
 		description:
 			'The future of shopping is here! MyriadFlow lets you chat with lifelike AI brand ambassadors about your favorite products, all within a captivating VR experience.',
-		images: [
-			{
-				url: '/metaimg.png', // Path to the image in the public folder
-				width: 1200,
-				height: 630,
-				alt: 'MyriadFlow WebXR',
-			},
-		],
 	},
 }
 

src/components/header.tsx

@@ -148,7 +148,13 @@ const Header = ({
 			>
 				<div className='container mx-auto flex justify-between items-center'>
 					<a href='/' className='flex items-center'>
-						<img src={'/logo.png'} className='w-32 md:w-48' alt='Logo' />
+						<img
+							src={'/logo.png'}
+							height={128}
+							width={128}
+							className='w-32 md:w-48'
+							alt='Logo'
+						/>
 					</a>
 					<div
 						className={`items-center space-x-8 text-lg font-bold hidden ${
@@ -188,25 +194,29 @@ const Header = ({
 											onClick={() => setIsProfileMenuOpen(!isProfileMenuOpen)}
 											className='focus:outline-none'
 										>
-											<img
+											<Image
 												src={
 													profileImage
 														? `${process.env.NEXT_PUBLIC_GATEWAY_URL}/ipfs/${profileImage}`
 														: '/profile.png'
 												}
 												alt='Profile'
+												height={40}
+												width={40}
 												className='w-10 h-10 rounded-full'
 											/>
 										</button>
 										{isProfileMenuOpen && (
 											<div className='absolute sm:right-0 mt-2 p-2 sm:p-4 bg-white text-black rounded-lg shadow-lg w-64'>
 												<div className='flex items-center mb-4'>
-													<img
+													<Image
 														src={
 															profileImage
 																? `${process.env.NEXT_PUBLIC_GATEWAY_URL}/ipfs/${profileImage}`
 																: '/profile.png'
 														}
+														height={40}
+														width={40}
 														alt='Profile'
 														className='w-10 h-10 rounded-full mr-2'
 													/>
@@ -336,7 +346,13 @@ const Header = ({
 								onClick={() => setIsDropdownOpen(false)}
 								className='absolute top-4 right-4 text-xl text-gray-700'
 							>
-								<img src='/close.png' alt='Close' className='w-12 h-12' />
+								<Image
+									src='/close.png'
+									alt='Close'
+									height={48}
+									width={48}
+									className='w-12 h-12'
+								/>
 							</button>
 							<Link
 								href='https://myriadflow.com'