Merge pull request #42 from btkcodedev/staging

feat: dockerise, compose, make executable, fix: theme

Dockerfile

@@ -0,0 +1,39 @@
+# Use the official Node.js 16 image as base
+FROM node:18 AS builder
+
+# Set the working directory inside the container
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+COPY package.json package-lock.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application code
+COPY . .
+
+# Build the Next.js application
+RUN npm run build
+
+# Start a new stage from the base image
+FROM node:18-alpine
+
+# Set the working directory inside the container
+WORKDIR /app
+
+# Copy the built application from the previous stage
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/public ./public
+
+# Install `next` globally (if not already installed)
+RUN npm install -g next
+
+# Expose the port Next.js app runs on
+EXPOSE 3000
+
+# Set environment variables
+ENV NODE_ENV production
+
+# Command to run the Next.js application
+CMD ["npx", "serve@latest", "out"]

components/LeftPanel/Bio.tsx

@@ -52,7 +52,7 @@ const Bio = () => {
             backgroundImage: "linear-gradient(to right, #FFA07A, #FF4500)",
             transition: "background 0.5s ease",
           }}
-          href={`${siteConfig.locationLink}`}
+          href={siteConfig.locationLink}
         />
         <RippleButton
           element={<Mail size="14" />}

components/Theme/index.tsx

@@ -13,11 +13,17 @@ export function ThemeToggle() {
     container.classList.add(`theme-${theme}`);
   }, [theme]);
 
+  useEffect(() => {
+    if (theme !== "dark") {
+      setTheme("dark");
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <div
       className="shadow-md bg-white dark:bg-neutral-800 mt-1 px-2 py-2 cursor-pointer flex rounded-lg"
-      placeholder="Change theme"
-      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
     >
       <button className="relative inline-flex justify-center items-center">
         <Sun

components/common/StyledLinkButton/index.tsx

@@ -1,5 +1,4 @@
 "use client";
-import { siteConfig } from "@/config/site-config";
 import { MotionStyle, motion } from "framer-motion";
 import { ReactElement } from "react";
 
@@ -8,7 +7,7 @@ const RippleButton = ({element, buttonText, style, href}: {element: ReactElement
     <motion.a
       whileHover={{ scale: 1.1 }}
       whileTap={{ scale: 0.9 }}
-      href={`${siteConfig.locationLink}`}
+      href={href}
       className="shadow-md flex items-center w-full gap-2 px-4 py-2 text-sm font-medium border rounded-md border-neutral-100 dark:border-neutral-800"
       style={style}
     >

docker-compose.yml

@@ -0,0 +1,15 @@
+version: '3.8'
+
+services:
+  nextjs:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "3000:3000"
+    environment:
+      NODE_ENV: production
+    volumes:
+      - .:/app
+    stdin_open: true
+    tty: true