feat: add S3_FORCE_PATH_STYLE configuration for MinIO compatibility (#100)

* feat: add S3_FORCE_PATH_STYLE configuration for MinIO compatibility

* docs: add S3_FORCE_PATH_STYLE to env example

.env.example

@@ -21,6 +21,7 @@ S3_REGION=
 S3_ENDPOINT=
 S3_ACCESS_KEY_ID=
 S3_SECRET_ACCESS_KEY=
+S3_FORCE_PATH_STYLE=
 NEXT_PUBLIC_STORAGE_URL=
 NEXT_PUBLIC_AVATAR_BUCKET_NAME=
 NEXT_PUBLIC_STORAGE_DOMAIN=

README.md

@@ -162,6 +162,7 @@ pnpm dev
 | `S3_ENDPOINT`                    | S3 endpoint URL                                          | For file uploads   | `https://xxx.r2.cloudflarestorage.com`        |
 | `S3_ACCESS_KEY_ID`               | S3 access key                                            | For file uploads   | `xxx`                                         |
 | `S3_SECRET_ACCESS_KEY`           | S3 secret key                                            | For file uploads   | `xxx`                                         |
+| `S3_FORCE_PATH_STYLE`            | Use path-style URLs for S3                               | For file uploads   | `true`                                        |
 | `NEXT_PUBLIC_STORAGE_URL`        | Storage service URL                                      | For file uploads   | `https://storage.kanbn.com`                   |
 | `NEXT_PUBLIC_STORAGE_DOMAIN`     | Storage domain name                                      | For file uploads   | `kanbn.com`                                   |
 | `NEXT_PUBLIC_AVATAR_BUCKET_NAME` | S3 bucket name for avatars                               | For file uploads   | `avatars`                                     |

apps/web/next.config.js

@@ -31,9 +31,12 @@ const config = {
 
   images: {
     remotePatterns: [
+      
       {
         protocol: "https",
-        hostname: `*.${env("NEXT_PUBLIC_STORAGE_DOMAIN")}`,
+        hostname: process.env.S3_FORCE_PATH_STYLE === "true"
+          ? `${env("NEXT_PUBLIC_STORAGE_DOMAIN")}`
+          : `*.${env("NEXT_PUBLIC_STORAGE_DOMAIN")}`,
       },
       {
         protocol: "http",

apps/web/src/components/Dashboard.tsx

@@ -10,6 +10,7 @@ import {
 import { authClient } from "@kan/auth/client";
 
 import { useClickOutside } from "~/hooks/useClickOutside";
+import { useTheme } from "~/providers/theme";
 import FeedbackButton from "./FeedbackButton";
 import SideNavigation from "./SideNavigation";
 
@@ -24,6 +25,8 @@ export default function Dashboard({
   rightPanel,
   hasRightPanel = false,
 }: DashboardProps) {
+  const theme = useTheme();
+
   const { data: session, isPending: sessionLoading } = authClient.useSession();
   const [isSideNavOpen, setIsSideNavOpen] = useState(false);
   const [isRightPanelOpen, setIsRightPanelOpen] = useState(false);
@@ -65,16 +68,20 @@ export default function Dashboard({
     }
   });
 
+  const isDarkMode = theme.activeTheme === "dark";
+
   return (
     <>
       <style jsx global>{`
         html {
           height: 100vh;
           overflow: hidden;
+          min-width: 320px;
+          background-color: ${!isDarkMode ? "hsl(0deg 0% 97.3%)" : "#161616"};
         }
       `}</style>
-      <div className="h-screen flex-col items-center bg-light-100 dark:bg-dark-50 md:flex md:min-w-[800px]">
-        <div className="m-auto flex h-12 min-h-12 w-full justify-between border-b border-light-600 px-5 py-2 align-middle dark:border-dark-400 md:h-16 md:min-h-16">
+      <div className="flex h-screen flex-col items-center bg-light-100 dark:bg-dark-50 md:min-w-[800px]">
+        <div className="flex h-12 min-h-12 w-full justify-between border-b border-light-600 px-5 py-2 align-middle dark:border-dark-400 md:h-16 md:min-h-16">
           <div className="my-auto flex w-full items-center justify-between">
             <button
               ref={sideNavButtonRef}
@@ -127,10 +134,10 @@ export default function Dashboard({
           </div>
         </div>
 
-        <div className="flex h-full w-full">
+        <div className="flex h-full min-h-0 w-full">
           <div
             ref={sideNavRef}
-            className={`fixed left-0 z-50 h-[calc(100vh-3rem)] transform transition-transform duration-300 ease-in-out md:relative md:h-[calc(100vh-4rem)] md:translate-x-0 ${isSideNavOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"} `}
+            className={`fixed left-0 top-12 z-50 h-[calc(100dvh-3rem)] transform transition-transform duration-300 ease-in-out md:relative md:top-0 md:h-full md:translate-x-0 ${isSideNavOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"} `}
           >
             <SideNavigation
               user={{ email: session?.user.email, image: session?.user.image }}
@@ -138,14 +145,14 @@ export default function Dashboard({
             />
           </div>
 
-          <div className="relative flex w-full overflow-hidden">
-            <div className="w-full overflow-hidden">{children}</div>
+          <div className="relative flex min-h-0 w-full overflow-hidden">
+            <div className="h-full w-full overflow-y-auto">{children}</div>
 
             {/* Mobile Right Panel */}
             {hasRightPanel && rightPanel && (
               <div
                 ref={rightPanelRef}
-                className={`fixed right-0 top-12 z-50 h-[calc(100vh-3rem)] w-80 transform bg-light-200 transition-transform duration-300 ease-in-out dark:bg-dark-100 md:hidden ${
+                className={`fixed right-0 top-12 z-50 h-[calc(100dvh-3rem)] w-80 transform bg-light-200 transition-transform duration-300 ease-in-out dark:bg-dark-100 md:hidden ${
                   isRightPanelOpen ? "translate-x-0" : "translate-x-full"
                 }`}
               >

apps/web/src/components/PageHead.tsx

@@ -4,6 +4,10 @@ export const PageHead = ({ title }: { title: string }) => {
   return (
     <Head>
       <title>{title}</title>
+      <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1, maximum-scale=1"
+      />
     </Head>
   );
 };

apps/web/src/env.ts

@@ -69,6 +69,7 @@ export const env = createEnv({
     S3_SECRET_ACCESS_KEY: z.string().optional(),
     S3_REGION: z.string().optional(),
     S3_ENDPOINT: z.string().optional(),
+    S3_FORCE_PATH_STYLE: z.string().optional(),
     EMAIL_FROM: z.string().optional(),
   },
 

apps/web/src/pages/api/upload/image.ts

@@ -46,6 +46,7 @@ export default async function handler(
     const client = new S3Client({
       region: env.S3_REGION ?? "",
       endpoint: env.S3_ENDPOINT ?? "",
+      forcePathStyle: env.S3_FORCE_PATH_STYLE === "true",
       credentials: {
         accessKeyId: env.S3_ACCESS_KEY_ID ?? "",
         secretAccessKey: env.S3_SECRET_ACCESS_KEY ?? "",
@@ -58,6 +59,7 @@ export default async function handler(
       new PutObjectCommand({
         Bucket: nextRuntimeEnv("NEXT_PUBLIC_AVATAR_BUCKET_NAME") ?? "",
         Key: filename,
+        ACL: "public-read",
       }),
     );
 

apps/web/src/views/card/index.tsx

@@ -189,7 +189,7 @@ export default function CardPage() {
       />
       <div className="flex h-full flex-1 flex-row">
         <div className="flex h-full w-full flex-col overflow-hidden">
-          <div className="h-full max-h-[calc(100vh-4rem)] overflow-y-auto p-6 md:p-8">
+          <div className="h-full max-h-[calc(100dvh-3rem)] overflow-y-auto p-6 md:max-h-[calc(100dvh-4rem)] md:p-8">
             <div className="mb-8 flex w-full items-center justify-between">
               {!card && isLoading && (
                 <div className="flex space-x-2">

apps/web/src/views/settings/index.tsx

@@ -104,7 +104,7 @@ export default function SettingsPage() {
   return (
     <>
       <div className="flex h-full w-full flex-col overflow-hidden">
-        <div className="h-full max-h-[calc(100vh-4rem)] overflow-y-auto">
+        <div className="h-full max-h-[calc(100vdh-3rem)] overflow-y-auto md:max-h-[calc(100vdh-4rem)]">
           <PageHead title={t`Settings | ${workspace.name ?? "Workspace"}`} />
           <div className="m-auto max-w-[1600px] px-5 py-6 md:px-28 md:py-12">
             <div className="mb-8 flex w-full justify-between">

cloud/docker-compose.yml

@@ -36,6 +36,7 @@ services:
       - S3_SECRET_ACCESS_KEY=${S3_SECRET_ACCESS_KEY}
       - S3_REGION=${S3_REGION}
       - S3_ENDPOINT=${S3_ENDPOINT}
+      - S3_FORCE_PATH_STYLE=${S3_FORCE_PATH_STYLE}
       - NEXT_PUBLIC_STORAGE_URL=${NEXT_PUBLIC_STORAGE_URL}
       - NEXT_PUBLIC_AVATAR_BUCKET_NAME=${NEXT_PUBLIC_AVATAR_BUCKET_NAME}
       - NEXT_PUBLIC_STORAGE_DOMAIN=${NEXT_PUBLIC_STORAGE_DOMAIN}

docker-compose.yml

@@ -30,6 +30,7 @@ services:
       - S3_SECRET_ACCESS_KEY=${S3_SECRET_ACCESS_KEY}
       - S3_REGION=${S3_REGION}
       - S3_ENDPOINT=${S3_ENDPOINT}
+      - S3_FORCE_PATH_STYLE=${S3_FORCE_PATH_STYLE}
       - NEXT_PUBLIC_STORAGE_URL=${NEXT_PUBLIC_STORAGE_URL}
       - NEXT_PUBLIC_AVATAR_BUCKET_NAME=${NEXT_PUBLIC_AVATAR_BUCKET_NAME}
       - NEXT_PUBLIC_STORAGE_DOMAIN=${NEXT_PUBLIC_STORAGE_DOMAIN}

packages/auth/src/auth.ts

@@ -181,6 +181,7 @@ export const initAuth = (db: dbClient) => {
                 const client = new S3Client({
                   region: env("S3_REGION") ?? "",
                   endpoint: env("S3_ENDPOINT") ?? "",
+                  forcePathStyle: env("S3_FORCE_PATH_STYLE") === "true",
                   credentials: {
                     accessKeyId: env("S3_ACCESS_KEY_ID") ?? "",
                     secretAccessKey: env("S3_SECRET_ACCESS_KEY") ?? "",

turbo.json

@@ -106,6 +106,7 @@
     "S3_ACCESS_KEY_ID",
     "S3_SECRET_ACCESS_KEY",
     "S3_ENDPOINT",
+    "S3_FORCE_PATH_STYLE",
     "PORT",
     "BETTER_AUTH_SECRET",
     "BETTER_AUTH_TRUSTED_ORIGINS"