Add docker support

.env.example

@@ -0,0 +1 @@
+LOCAL_PORT=3000

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

Dockerfile

@@ -0,0 +1,12 @@
+FROM node:alpine AS build
+WORKDIR /app
+COPY package.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+COPY --from=build /app/nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+CMD [ "nginx", "-g", "daemon off;" ]

README.md

@@ -1,6 +1,6 @@
 # BCDigital Code Challenge
 
-My submission to the code challenge from [BCDigial](https://www.bc-digital.ca/)
+My submission to the code challenge from [BCDigital](https://www.bc-digital.ca/)
 
 Landing page for hypthetical client **Great Music LLM**'s event and employee management software
 
@@ -12,3 +12,4 @@ Landing page for hypthetical client **Great Music LLM**'s event and employee man
 - [`prettier`](https://prettier.io/) code formatting
 - [`eslint`](https://eslint.org/) code linting
 - [`husky`](https://typicode.github.io/husky/) and [`lint-staged`](https://github.com/lint-staged/lint-staged) pre-commit hooks for testing/formatting/linting
+- [Docker](https://www.docker.com/) containerization

docker-compose.yml

@@ -0,0 +1,6 @@
+services:
+  nginx:
+    build: .
+    ports:
+      - "${LOCAL_PORT}:80"
+    restart: always

nginx.conf

@@ -0,0 +1,7 @@
+server {
+    location / {
+        root /usr/share/nginx/html;
+        index index.html index.htm;
+        try_files $uri $uri/ /index.html;
+    }
+}

src/components/ui/dot-pattern.tsx

@@ -122,7 +122,7 @@ export function DotPattern({
           <stop offset="100%" stopColor="currentColor" stopOpacity="0" />
         </radialGradient>
       </defs>
-      {dots.map((dot, index) => (
+      {dots.map((dot) => (
         <motion.circle
           key={`${dot.x}-${dot.y}`}
           cx={dot.x}

src/components/ui/marquee.tsx

@@ -46,7 +46,7 @@ export function Marquee({
     <div
       {...props}
       className={cn(
-        "group flex [gap:var(--gap)] overflow-hidden p-2 [--duration:40s] [--gap:1rem]",
+        "group flex gap-(--gap) overflow-hidden p-2 [--duration:40s] [--gap:1rem]",
         {
           "flex-row": !vertical,
           "flex-col": vertical,
@@ -59,11 +59,11 @@ export function Marquee({
         .map((_, i) => (
           <div
             key={i}
-            className={cn("flex shrink-0 justify-around [gap:var(--gap)]", {
+            className={cn("flex shrink-0 justify-around gap-(--gap)", {
               "animate-marquee flex-row": !vertical,
               "animate-marquee-vertical flex-col": vertical,
-              "group-hover:[animation-play-state:paused]": pauseOnHover,
-              "[animation-direction:reverse]": reverse,
+              "group-hover:paused": pauseOnHover,
+              "direction-[reverse]": reverse,
             })}
           >
             {children}