Fix runtime mode deployment

Dockerfile

@@ -6,7 +6,17 @@ RUN if [ -f package-lock.json ]; then npm ci; else npm install; fi
 
 FROM node:20-alpine AS builder
 WORKDIR /app
+ARG NEXT_PUBLIC_SITE_URL=https://example.com
+ARG NEXT_PUBLIC_SITE_MODE=coming-soon
+ARG NEXT_PUBLIC_CONTACT_EMAIL=
+ARG NEXT_PUBLIC_LINKEDIN_URL=
+ARG NEXT_PUBLIC_GITHUB_URL=
 ENV NEXT_TELEMETRY_DISABLED=1
+ENV NEXT_PUBLIC_SITE_URL=$NEXT_PUBLIC_SITE_URL
+ENV NEXT_PUBLIC_SITE_MODE=$NEXT_PUBLIC_SITE_MODE
+ENV NEXT_PUBLIC_CONTACT_EMAIL=$NEXT_PUBLIC_CONTACT_EMAIL
+ENV NEXT_PUBLIC_LINKEDIN_URL=$NEXT_PUBLIC_LINKEDIN_URL
+ENV NEXT_PUBLIC_GITHUB_URL=$NEXT_PUBLIC_GITHUB_URL
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 RUN npm run build
@@ -17,6 +27,16 @@ ENV NODE_ENV=production
 ENV PORT=3000
 ENV HOSTNAME=0.0.0.0
 ENV NEXT_TELEMETRY_DISABLED=1
+ARG NEXT_PUBLIC_SITE_URL=https://example.com
+ARG NEXT_PUBLIC_SITE_MODE=coming-soon
+ARG NEXT_PUBLIC_CONTACT_EMAIL=
+ARG NEXT_PUBLIC_LINKEDIN_URL=
+ARG NEXT_PUBLIC_GITHUB_URL=
+ENV NEXT_PUBLIC_SITE_URL=$NEXT_PUBLIC_SITE_URL
+ENV NEXT_PUBLIC_SITE_MODE=$NEXT_PUBLIC_SITE_MODE
+ENV NEXT_PUBLIC_CONTACT_EMAIL=$NEXT_PUBLIC_CONTACT_EMAIL
+ENV NEXT_PUBLIC_LINKEDIN_URL=$NEXT_PUBLIC_LINKEDIN_URL
+ENV NEXT_PUBLIC_GITHUB_URL=$NEXT_PUBLIC_GITHUB_URL
 RUN addgroup -S nextjs && adduser -S nextjs -G nextjs
 
 COPY --from=builder /app/public ./public

components/BottomNav.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import type { CommonContent } from "@/content/types";
 import { type Locale } from "@/lib/i18n";
 import { isComingSoonMode } from "@/lib/site";
@@ -11,6 +12,8 @@ type BottomNavProps = {
 };
 
 export default function BottomNav({ locale, common }: BottomNavProps) {
+  const pathname = usePathname();
+
   if (isComingSoonMode()) {
     return (
       <nav aria-label={common.navLabel} className="bottom-nav">
@@ -28,27 +31,35 @@ export default function BottomNav({ locale, common }: BottomNavProps) {
     );
   }
 
+  const normalizedPath = pathname !== "/" && pathname.endsWith("/") ? pathname.slice(0, -1) : pathname;
   const homePath = `/${locale}`;
   const aboutPath = `/${locale}/about`;
   const contactPath = `/${locale}/contact`;
+  const isHome = normalizedPath === homePath;
+  const isAbout = normalizedPath === aboutPath || normalizedPath.startsWith(`${aboutPath}/`);
+  const isContact = normalizedPath === contactPath || normalizedPath.startsWith(`${contactPath}/`);
 
   return (
     <nav aria-label={common.navLabel} className="bottom-nav">
       <div className="container bottom-nav-inner">
         <div className="bottom-nav-links">
-          <Link href={homePath} className="active" aria-current="page">
+          <Link href={homePath} className={isHome ? "active" : undefined} aria-current={isHome ? "page" : undefined}>
             <span aria-hidden className="nav-icon">
               ○
             </span>
             {common.nav.home}
           </Link>
-          <Link href={aboutPath}>
+          <Link href={aboutPath} className={isAbout ? "active" : undefined} aria-current={isAbout ? "page" : undefined}>
             <span aria-hidden className="nav-icon">
               □
             </span>
             {common.nav.about}
           </Link>
-          <Link href={contactPath}>
+          <Link
+            href={contactPath}
+            className={isContact ? "active" : undefined}
+            aria-current={isContact ? "page" : undefined}
+          >
             <span aria-hidden className="nav-icon">
               ◇
             </span>

docker-compose.yml

@@ -5,6 +5,12 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
+      args:
+        NEXT_PUBLIC_SITE_URL: ${NEXT_PUBLIC_SITE_URL:-https://example.com}
+        NEXT_PUBLIC_SITE_MODE: ${NEXT_PUBLIC_SITE_MODE:-coming-soon}
+        NEXT_PUBLIC_CONTACT_EMAIL: ${NEXT_PUBLIC_CONTACT_EMAIL:-}
+        NEXT_PUBLIC_LINKEDIN_URL: ${NEXT_PUBLIC_LINKEDIN_URL:-}
+        NEXT_PUBLIC_GITHUB_URL: ${NEXT_PUBLIC_GITHUB_URL:-}
     container_name: ${CONTAINER_NAME:-diyaa}
     ports:
       - "${APP_PORT:-30002}:3000"
@@ -15,6 +21,11 @@ services:
       PORT: 3000
       HOSTNAME: 0.0.0.0
       NEXT_TELEMETRY_DISABLED: ${NEXT_TELEMETRY_DISABLED:-1}
+      NEXT_PUBLIC_SITE_URL: ${NEXT_PUBLIC_SITE_URL:-https://example.com}
+      NEXT_PUBLIC_SITE_MODE: ${NEXT_PUBLIC_SITE_MODE:-coming-soon}
+      NEXT_PUBLIC_CONTACT_EMAIL: ${NEXT_PUBLIC_CONTACT_EMAIL:-}
+      NEXT_PUBLIC_LINKEDIN_URL: ${NEXT_PUBLIC_LINKEDIN_URL:-}
+      NEXT_PUBLIC_GITHUB_URL: ${NEXT_PUBLIC_GITHUB_URL:-}
     healthcheck:
       test: ["CMD-SHELL", "wget -q --spider http://127.0.0.1:3000/api/health || exit 1"]
       interval: 10s