build: added Dockerfile and docker-compose.yaml

.dockerignore

@@ -0,0 +1,2 @@
+.next/
+node_modules/

docker-compose.yaml

@@ -0,0 +1,12 @@
+services:
+  web:
+    build:
+      context: .
+      dockerfile: ./src/Dockerfile
+      target: runner
+    ports:
+      - "3000:3000"
+
+networks:
+  default:
+    name: clipfusion-network

next.config.ts

@@ -1,7 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+    output: "standalone",
 };
 
 export default nextConfig;

public/clipfusion-community-logo.svg

@@ -0,0 +1,106 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="512" height="512" viewBox="0 0 512 512">
+<defs>
+</defs>
+<rect x="0.0" y="0.0" width="51.2" height="51.2" fill="#e77728" />
+<rect x="0.0" y="51.2" width="51.2" height="51.2" fill="#e78523" />
+<rect x="0.0" y="102.4" width="51.2" height="51.2" fill="#e9931f" />
+<rect x="0.0" y="153.60000000000002" width="51.2" height="51.2" fill="#eaa11a" />
+<rect x="0.0" y="204.8" width="51.2" height="51.2" fill="#ebaf16" />
+<rect x="0.0" y="256.0" width="51.2" height="51.2" fill="#ecbd11" />
+<rect x="0.0" y="307.20000000000005" width="51.2" height="51.2" fill="#edcb0d" />
+<rect x="0.0" y="358.40000000000003" width="51.2" height="51.2" fill="#eed908" />
+<rect x="0.0" y="409.6" width="51.2" height="51.2" fill="#efe704" />
+<rect x="0.0" y="460.8" width="51.2" height="51.2" fill="#f0f600" />
+<rect x="51.2" y="0.0" width="51.2" height="51.2" fill="#cd7c36" />
+<rect x="51.2" y="51.2" width="51.2" height="51.2" fill="#d18732" />
+<rect x="51.2" y="102.4" width="51.2" height="51.2" fill="#d5922f" />
+<rect x="51.2" y="153.60000000000002" width="51.2" height="51.2" fill="#d99e2b" />
+<rect x="51.2" y="204.8" width="51.2" height="51.2" fill="#dda928" />
+<rect x="51.2" y="256.0" width="51.2" height="51.2" fill="#e1b424" />
+<rect x="51.2" y="307.20000000000005" width="51.2" height="51.2" fill="#e5bf20" />
+<rect x="51.2" y="358.40000000000003" width="51.2" height="51.2" fill="#e9ca1d" />
+<rect x="51.2" y="409.6" width="51.2" height="51.2" fill="#edd619" />
+<rect x="51.2" y="460.8" width="51.2" height="51.2" fill="#f1e116" />
+<rect x="102.4" y="0.0" width="51.2" height="51.2" fill="#b48144" />
+<rect x="102.4" y="51.2" width="51.2" height="51.2" fill="#bb8a42" />
+<rect x="102.4" y="102.4" width="51.2" height="51.2" fill="#c2923f" />
+<rect x="102.4" y="153.60000000000002" width="51.2" height="51.2" fill="#c99a3c" />
+<rect x="102.4" y="204.8" width="51.2" height="51.2" fill="#d0a339" />
+<rect x="102.4" y="256.0" width="51.2" height="51.2" fill="#d7ab37" />
+<rect x="102.4" y="307.20000000000005" width="51.2" height="51.2" fill="#deb334" />
+<rect x="102.4" y="358.40000000000003" width="51.2" height="51.2" fill="#e5bc31" />
+<rect x="102.4" y="409.6" width="51.2" height="51.2" fill="#ecc42e" />
+<rect x="102.4" y="460.8" width="51.2" height="51.2" fill="#f3cc2c" />
+<rect x="153.60000000000002" y="0.0" width="51.2" height="51.2" fill="#9b8753" />
+<rect x="153.60000000000002" y="51.2" width="51.2" height="51.2" fill="#a58c51" />
+<rect x="153.60000000000002" y="102.4" width="51.2" height="51.2" fill="#af924f" />
+<rect x="153.60000000000002" y="153.60000000000002" width="51.2" height="51.2" fill="#b9974d" />
+<rect x="153.60000000000002" y="204.8" width="51.2" height="51.2" fill="#c39c4b" />
+<rect x="153.60000000000002" y="256.0" width="51.2" height="51.2" fill="#cda249" />
+<rect x="153.60000000000002" y="307.20000000000005" width="51.2" height="51.2" fill="#d7a748" />
+<rect x="153.60000000000002" y="358.40000000000003" width="51.2" height="51.2" fill="#e1ad46" />
+<rect x="153.60000000000002" y="409.6" width="51.2" height="51.2" fill="#ebb244" />
+<rect x="153.60000000000002" y="460.8" width="51.2" height="51.2" fill="#f5b842" />
+<rect x="204.8" y="0.0" width="51.2" height="51.2" fill="#828c61" />
+<rect x="204.8" y="51.2" width="51.2" height="51.2" fill="#8f8f60" />
+<rect x="204.8" y="102.4" width="51.2" height="51.2" fill="#9c915f" />
+<rect x="204.8" y="153.60000000000002" width="51.2" height="51.2" fill="#a9945e" />
+<rect x="204.8" y="204.8" width="51.2" height="51.2" fill="#b6965d" />
+<rect x="204.8" y="256.0" width="51.2" height="51.2" fill="#c3995c" />
+<rect x="204.8" y="307.20000000000005" width="51.2" height="51.2" fill="#cf9b5b" />
+<rect x="204.8" y="358.40000000000003" width="51.2" height="51.2" fill="#dc9e5a" />
+<rect x="204.8" y="409.6" width="51.2" height="51.2" fill="#e9a059" />
+<rect x="204.8" y="460.8" width="51.2" height="51.2" fill="#f6a358" />
+<rect x="256.0" y="0.0" width="51.2" height="51.2" fill="#699270" />
+<rect x="256.0" y="51.2" width="51.2" height="51.2" fill="#799170" />
+<rect x="256.0" y="102.4" width="51.2" height="51.2" fill="#89916f" />
+<rect x="256.0" y="153.60000000000002" width="51.2" height="51.2" fill="#99916f" />
+<rect x="256.0" y="204.8" width="51.2" height="51.2" fill="#a8906f" />
+<rect x="256.0" y="256.0" width="51.2" height="51.2" fill="#b8906f" />
+<rect x="256.0" y="307.20000000000005" width="51.2" height="51.2" fill="#c88f6f" />
+<rect x="256.0" y="358.40000000000003" width="51.2" height="51.2" fill="#d88f6e" />
+<rect x="256.0" y="409.6" width="51.2" height="51.2" fill="#e88f6e" />
+<rect x="256.0" y="460.8" width="51.2" height="51.2" fill="#f88e6e" />
+<rect x="307.20000000000005" y="0.0" width="51.2" height="51.2" fill="#50977e" />
+<rect x="307.20000000000005" y="51.2" width="51.2" height="51.2" fill="#63947f" />
+<rect x="307.20000000000005" y="102.4" width="51.2" height="51.2" fill="#769180" />
+<rect x="307.20000000000005" y="153.60000000000002" width="51.2" height="51.2" fill="#888d80" />
+<rect x="307.20000000000005" y="204.8" width="51.2" height="51.2" fill="#9b8a81" />
+<rect x="307.20000000000005" y="256.0" width="51.2" height="51.2" fill="#ae8782" />
+<rect x="307.20000000000005" y="307.20000000000005" width="51.2" height="51.2" fill="#c18382" />
+<rect x="307.20000000000005" y="358.40000000000003" width="51.2" height="51.2" fill="#d48083" />
+<rect x="307.20000000000005" y="409.6" width="51.2" height="51.2" fill="#e77d84" />
+<rect x="307.20000000000005" y="460.8" width="51.2" height="51.2" fill="#fa7a84" />
+<rect x="358.40000000000003" y="0.0" width="51.2" height="51.2" fill="#379d8d" />
+<rect x="358.40000000000003" y="51.2" width="51.2" height="51.2" fill="#4d968e" />
+<rect x="358.40000000000003" y="102.4" width="51.2" height="51.2" fill="#629090" />
+<rect x="358.40000000000003" y="153.60000000000002" width="51.2" height="51.2" fill="#788a91" />
+<rect x="358.40000000000003" y="204.8" width="51.2" height="51.2" fill="#8e8493" />
+<rect x="358.40000000000003" y="256.0" width="51.2" height="51.2" fill="#a47e94" />
+<rect x="358.40000000000003" y="307.20000000000005" width="51.2" height="51.2" fill="#ba7796" />
+<rect x="358.40000000000003" y="358.40000000000003" width="51.2" height="51.2" fill="#d07197" />
+<rect x="358.40000000000003" y="409.6" width="51.2" height="51.2" fill="#e56b99" />
+<rect x="358.40000000000003" y="460.8" width="51.2" height="51.2" fill="#fb659a" />
+<rect x="409.6" y="0.0" width="51.2" height="51.2" fill="#1ea29b" />
+<rect x="409.6" y="51.2" width="51.2" height="51.2" fill="#36999d" />
+<rect x="409.6" y="102.4" width="51.2" height="51.2" fill="#4f90a0" />
+<rect x="409.6" y="153.60000000000002" width="51.2" height="51.2" fill="#6887a2" />
+<rect x="409.6" y="204.8" width="51.2" height="51.2" fill="#817ea5" />
+<rect x="409.6" y="256.0" width="51.2" height="51.2" fill="#9a75a7" />
+<rect x="409.6" y="307.20000000000005" width="51.2" height="51.2" fill="#b26ba9" />
+<rect x="409.6" y="358.40000000000003" width="51.2" height="51.2" fill="#cb62ac" />
+<rect x="409.6" y="409.6" width="51.2" height="51.2" fill="#e459ae" />
+<rect x="409.6" y="460.8" width="51.2" height="51.2" fill="#fd50b0" />
+<rect x="460.8" y="0.0" width="51.2" height="51.2" fill="#05a8aa" />
+<rect x="460.8" y="51.2" width="51.2" height="51.2" fill="#209bad" />
+<rect x="460.8" y="102.4" width="51.2" height="51.2" fill="#3c90b0" />
+<rect x="460.8" y="153.60000000000002" width="51.2" height="51.2" fill="#5884b3" />
+<rect x="460.8" y="204.8" width="51.2" height="51.2" fill="#7478b6" />
+<rect x="460.8" y="256.0" width="51.2" height="51.2" fill="#8f6cba" />
+<rect x="460.8" y="307.20000000000005" width="51.2" height="51.2" fill="#ab60bd" />
+<rect x="460.8" y="358.40000000000003" width="51.2" height="51.2" fill="#c754c0" />
+<rect x="460.8" y="409.6" width="51.2" height="51.2" fill="#e348c3" />
+<rect x="460.8" y="460.8" width="51.2" height="51.2" fill="#ff3cc7" />
+</svg>

src/Dockerfile

@@ -0,0 +1,50 @@
+FROM node:lts-alpine3.22 AS base
+
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN \
+  if [ -f yarn.lock ]; then yarn run build; \
+  elif [ -f package-lock.json ]; then npm run build; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+
+ENV HOSTNAME="0.0.0.0"
+CMD ["node", "server.js"]

src/components/clipfusion-logo/ClipFusionLogo.tsx

@@ -8,7 +8,7 @@ export const ClipFusionLogo = (props: {
     className?: string
 }): ReactNode => (
     <div className={`flex flex-row items-center gap-2 hover:scale-105 duration-100 ${props.className}`}>
-        <Image width={props.width} height={props.height} src="/clipfusion-logo.svg" alt="ClipFusion Logo"/>
+        <Image width={props.width} height={props.height} src="/clipfusion-community-logo.png" alt="ClipFusion Logo"/>
         {props.children}
     </div>
 );

src/components/dashboard/Dashboard.tsx

@@ -32,7 +32,7 @@ export const Dashboard = (): ReactNode => {
         <Sidebar>
             <SidebarHeader className="flex justify-center items-center">
                 <ClipFusionLogo width="30" height="30">
-                    <p className="font-bold text-xl select-none">ClipFusion</p>
+                    <p className="font-bold text-xl select-none">Community</p>
                 </ClipFusionLogo>
             </SidebarHeader>
             <SidebarContent>