Fix images cache EACCES error

Dockerfile

@@ -34,6 +34,7 @@ COPY --from=builder /app/node_modules ./node_modules
 COPY --from=builder /app/package.json ./package.json
 
 RUN mkdir -p /app/.yarn && chown -R nextjs:nodejs /app/.yarn
+RUN mkdir -p /app/.next/cache/images && chown -R nextjs:nodejs /app/.next/cache/images
 
 USER nextjs
 EXPOSE 3000

README.md

@@ -1,36 +1,40 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# Portfolio Website v2
 
-## Getting Started
+## Setup
 
-First, run the development server:
+### Domain Records
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+- Create one A record
+
+### Reverse Proxy
+
+- It doesn't matter what reverse proxy you use (Nginx, Apache, Traefik, Caddy, etc)
+- Point the record to the web port (default: 3000)
+
+### [Docker Compose](./docker-compose.yml)
+
+```yaml
+services:
+  portfolio:
+    container_name: portfolio
+    image: git.altaiar.dev/ahmed/portfolio-2:latest
+    network_mode: bridge
+    restart: unless-stopped
+    volumes:
+      - config:/app/public/config
+      - images:/app/public/images
+    ports:
+      - 3000:3000
+
+volumes:
+  config: # Place config.json and resume.pdf here
+  images: # Place images here
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+(Optional) Replace volumes with bind mounts according to your setup
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+## Configuration
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+- The only required field is `name`, a two string array for first and last
+- See [instrumentation.ts](./src/instrumentation.ts#L18-L89) or [config.d.ts](./src/types/config.d.ts) for possible values
+- Validation is performed on container start, and will exit if anything is invalid

docker-compose.yml

@@ -0,0 +1,15 @@
+services:
+  portfolio:
+    container_name: portfolio
+    image: git.altaiar.dev/ahmed/portfolio-2:latest
+    network_mode: bridge
+    restart: unless-stopped
+    volumes:
+      - config:/app/public/config
+      - images:/app/public/images
+    ports:
+      - 3000:3000
+
+volumes:
+  config: # Place config.json and resume.pdf here
+  images: # Place images here

src/components/hooks/useInAppBrowser.ts

@@ -0,0 +1,34 @@
+// https://github.com/f2etw/detect-inapp/blob/master/src/inapp.js
+
+import { findKey } from "lodash";
+
+const BROWSER = {
+  messenger: /\bFB[\w_]+\/(Messenger|MESSENGER)/,
+  facebook: /\bFB[\w_]+\//,
+  twitter: /\bTwitter/i,
+  line: /\bLine\//i,
+  wechat: /\bMicroMessenger\//i,
+  puffin: /\bPuffin/i,
+  miui: /\bMiuiBrowser\//i,
+  instagram: /\bInstagram/i,
+  chrome: /\bCrMo\b|CriOS|Android.*Chrome\/[.0-9]* (Mobile)?/,
+  safari: /Version.*Mobile.*Safari|Safari.*Mobile|MobileSafari/,
+  ie: /IEMobile|MSIEMobile/,
+  firefox:
+    /fennec|firefox.*maemo|(Mobile|Tablet).*Firefox|Firefox.*Mobile|FxiOS/,
+};
+
+export const useInAppBrowser = (): boolean => {
+  const userAgent =
+    navigator.userAgent ||
+    navigator.vendor ||
+    (window as unknown as { opera: string }).opera;
+
+  const rules = ["WebView", "(iPhone|iPod|iPad)(?!.*Safari/)", "Android.*(wv)"];
+  const regex = new RegExp(`(${rules.join("|")})`, "ig");
+
+  return (
+    Boolean(userAgent.match(regex)) &&
+    findKey(BROWSER, (regex) => regex.test(userAgent)) !== undefined
+  );
+};

src/components/scene/Scene.tsx

@@ -32,7 +32,7 @@ import round from "lodash/round";
 import Stack from "@/util/stack";
 import isMobile from "@/util/isMobile";
 import { Canvas } from "@react-three/fiber";
-import { mdiArrowLeftBold } from "@mdi/js";
+import { mdiArrowLeftBold, mdiClose, mdiOpenInNew } from "@mdi/js";
 import { Icon } from "@mdi/react";
 import { PDF } from "../util/PDF";
 import { CellphoneUI } from "../ui/CellphoneUI";
@@ -48,6 +48,7 @@ import { useWindowSize } from "../hooks/useWindowSize";
 import { Info } from "../util/Info";
 import { Loader } from "../ui/Loader";
 import { MobileMenu } from "../ui/MobileMenu";
+import { useInAppBrowser } from "../hooks/useInAppBrowser";
 
 const AnimatedText = threeAnimated(Text);
 const AnimatedCam = threeAnimated(PerspectiveCamera);
@@ -60,10 +61,12 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
   const { width, height } = useWindowSize();
   const config = useConfig();
   const mobile = isMobile();
+  const isInAppBrowser = useInAppBrowser();
 
   // States
   const [fps, setFps] = useState(0);
   const [dpr, setDpr] = useState(2);
+  const [warningDismissed, setWarningDismissed] = useState(false);
   const [pendingView, setPendingView] = useState<View | null>(null);
   const [backHovered, setBackHovered] = useState(false);
   const [backClicked, setBackClicked] = useState(false);
@@ -174,12 +177,38 @@ export function Scene(props: JSX.IntrinsicElements["group"]) {
                   />
                 </AnimatedButton>
               )}
+              {!warningDismissed && isInAppBrowser ? (
+                <div className="absolute top-0 right-0 bg-amber-500 m-3 p-2 rounded-xl flex gap-2 items-center justify-between">
+                  <p className="text-black text-md">
+                    For the best experience, please open this page in a regular
+                    browser
+                  </p>
+                  <button
+                    className="transition-all duration-300 pointer-events-auto hover:scale-110 hover:bg-amber-600 rounded-lg"
+                    onClick={() => setWarningDismissed(true)}
+                  >
+                    <Icon path={mdiClose} color="black" className="size-6" />
+                  </button>
+                </div>
+              ) : null}
               <div className="min-w-12 text-white bottom-0 right-0 absolute m-3 p-1 text-xs text-right text-stroke-2 text-stroke-black paint-sfm">
                 <Info />
                 {fps > 0 && (
-                  <>
+                  <p>
                     {fps.toFixed(0)} fps | {dpr}x
-                  </>
+                  </p>
+                )}
+                {config.fallbackUrl && (
+                  <div className="flex gap-1 justify-end items-center">
+                    <Icon path={mdiOpenInNew} className="h-3" />
+                    <a
+                      href={config.fallbackUrl}
+                      target="_blank"
+                      className="hover:underline pointer-events-auto"
+                    >
+                      fallback
+                    </a>
+                  </div>
                 )}
               </div>
             </div>

src/components/ui/MobileMenu.tsx

@@ -70,9 +70,9 @@ export const MobileMenu = ({
   });
 
   return (
-    <div className="pointer-events-auto">
+    <div className="w-min">
       <AnimatedButton
-        className="m-2"
+        className="m-2 pointer-events-auto"
         onClick={() => setMenuOpen((prev) => !prev)}
       >
         <Icon
@@ -101,7 +101,7 @@ export const MobileMenu = ({
             key={view}
             className={`${
               currentView === view ? "bg-neutral-700/50" : "bg-neutral-500/50"
-            } px-2 py-1 transition-all duration-300 hover:bg-neutral-700/50 hover:scale-110 rounded`}
+            } px-2 py-1 transition-all duration-300 hover:bg-neutral-700/50 hover:scale-110 rounded pointer-events-auto`}
             onClick={() => goToView(view)}
           >
             {label}