fix hash discrepancy and iframe centering

Author: David Liu

web/.dockerignore

@@ -1,5 +1,7 @@
 node_modules
 dist
+.output
+.nitro
 .git
 .gitignore
 *.md

web/Dockerfile

@@ -15,6 +15,8 @@ COPY . .
 # Build the application with production mode
 ENV NODE_ENV=production
 ENV NODE_OPTIONS=--max-old-space-size=4096
+# Clean any existing build artifacts to prevent hash mismatches
+RUN rm -rf .output .nitro
 RUN npm run build
 
 # Production stage

web/src/routes/__root.tsx

@@ -12,7 +12,7 @@ import { useEffect } from 'react'
 import * as gtag from '../helpers/gtags.client'
 import { theme } from '../theme'
 
-import appCss from '../styles.css?url'
+import '../styles.css'
 
 // You can add these to your .env file
 const GA_TRACKING_ID = import.meta.env.VITE_GA_TRACKING_ID
@@ -37,10 +37,6 @@ export const Route = createRootRoute({
       },
     ],
     links: [
-      {
-        rel: 'stylesheet',
-        href: appCss,
-      },
       {
         rel: 'icon',
         href: '/favicon.ico',

web/src/styles.css

@@ -162,6 +162,9 @@
   html body .article iframe {
     max-width: 100%;
     align-self: center;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
   }
 
   html body .article p + iframe {

web/vite.config.ts

@@ -16,6 +16,10 @@ const config = defineConfig(({ mode }) => ({
     mode === 'production' ? nitro() : null,
     viteReact(),
   ].filter(Boolean),
+  build: {
+    manifest: true, // Generate manifest.json for asset mapping
+    ssrManifest: true, // Generate SSR manifest
+  },
   ssr: {
     noExternal: ['react-lazy-load-image-component'],
     external: ['three', '@react-three/fiber', '@react-three/drei', 'camera-controls'],