fixed proxy setup

PROXY_SETUP.md

@@ -9,16 +9,33 @@ When building and deploying on the remote server, you need to build the Docker i
 
 ### For Manual Docker Run Commands
 
+**IMPORTANT:** `VITE_PROXY_SERVER` must be set during Docker BUILD (as a build argument), NOT at runtime. It gets baked into the JavaScript bundle.
+
 Rebuild the Jumble image with the correct proxy URL:
 
 ```bash
+# Build with the correct proxy URL (baked into the JS bundle)
+# Users access via https://jumble.imwald.eu, so proxy must be HTTPS too
 docker build \
-  --build-arg VITE_PROXY_SERVER=http://jumble.imwald.eu:8090 \
+  --build-arg VITE_PROXY_SERVER=https://jumble.imwald.eu:8090 \
   -t silberengel/imwald-jumble:12 \
   .
 
 # Then push to Docker Hub
 docker push silberengel/imwald-jumble:12
+
+# Then on the remote server, pull and restart:
+docker stop imwald-jumble
+docker rm imwald-jumble
+docker pull silberengel/imwald-jumble:12
+
+# Run with the same command (NO env vars needed for proxy - it's already in the bundle)
+docker run -d \
+  --name imwald-jumble \
+  --network jumble-network \
+  -p 0.0.0.0:32768:80 \
+  --restart unless-stopped \
+  silberengel/imwald-jumble:12
 ```
 
 **Note on Docker Network:**
@@ -38,8 +55,8 @@ docker network create jumble-network
 ### 1. Set Environment Variables Before Building
 
 ```bash
-export JUMBLE_PROXY_SERVER_URL="http://jumble.imwald.eu:8090"
+export JUMBLE_PROXY_SERVER_URL="https://jumble.imwald.eu:8090"
-export JUMBLE_SOCIAL_URL="http://jumble.imwald.eu:32768"
+export JUMBLE_SOCIAL_URL="https://jumble.imwald.eu"
 ```
 
 ### 2. Rebuild the Docker Image
@@ -64,12 +81,33 @@ docker-compose up -d
    - What URL is being used to fetch metadata
    - Any errors (CORS, network, etc.)
 
+## Update Proxy Server's ALLOW_ORIGIN
+
+Since users access via `https://jumble.imwald.eu`, you need to update the proxy server's `ALLOW_ORIGIN`:
+
+```bash
+# Stop the proxy container
+docker stop imwald-jumble-proxy
+docker rm imwald-jumble-proxy
+
+# Restart with correct ALLOW_ORIGIN (must match how users access the frontend)
+docker run -d \
+  --name imwald-jumble-proxy \
+  --network jumble-network \
+  -p 0.0.0.0:8090:8080 \
+  -e ALLOW_ORIGIN=https://jumble.imwald.eu \
+  -e ENABLE_PPROF=true \
+  --restart unless-stopped \
+  ghcr.io/danvergara/jumble-proxy-server:latest
+```
+
 ## Important Notes
 
 - The `VITE_PROXY_SERVER` value is baked into the JavaScript bundle during build time
-- You MUST rebuild the Docker image if you change `JUMBLE_PROXY_SERVER_URL`
+- You MUST rebuild the Docker image if you change `VITE_PROXY_SERVER`
-- The proxy server's `ALLOW_ORIGIN` must match the frontend URL (`JUMBLE_SOCIAL_URL`)
+- The proxy server's `ALLOW_ORIGIN` must match the frontend URL users access (`https://jumble.imwald.eu`)
 - Both must use the same protocol (http vs https)
+- If the proxy is accessed via HTTPS on port 8090, make sure HTTPS is configured for that port
 
 ## Troubleshooting
 

src/components/WebPreview/index.tsx

@@ -79,8 +79,13 @@ function stripMarkdown(content: string): string {
 export default function WebPreview({ url, className }: { url: string; className?: string }) {
   const { autoLoadMedia } = useContentPolicy()
   const { isSmallScreen } = useScreenSize()
+  
+  console.log(`[WebPreview] Rendering with URL: ${url}, autoLoadMedia: ${autoLoadMedia}`)
+  
   const { title, description, image } = useFetchWebMetadata(url)
   
+  console.log(`[WebPreview] Metadata received - title: ${title || 'none'}, description: ${description || 'none'}, image: ${image || 'none'}`)
+
   const hostname = useMemo(() => {
     try {
       return new URL(url).hostname

src/hooks/useFetchWebMetadata.tsx

@@ -6,8 +6,22 @@ export function useFetchWebMetadata(url: string) {
   const [metadata, setMetadata] = useState<TWebMetadata>({})
 
   useEffect(() => {
+    if (!url) {
+      console.log('[useFetchWebMetadata] No URL provided')
+      return
+    }
+    
+    console.log(`[useFetchWebMetadata] Fetching metadata for URL: ${url}`)
+    
     // Pass original URL - web service will handle proxy conversion
-    webService.fetchWebMetadata(url).then((metadata) => setMetadata(metadata))
+    webService.fetchWebMetadata(url)
+      .then((metadata) => {
+        console.log(`[useFetchWebMetadata] Received metadata for ${url}:`, metadata)
+        setMetadata(metadata)
+      })
+      .catch((error) => {
+        console.error(`[useFetchWebMetadata] Error fetching metadata for ${url}:`, error)
+      })
   }, [url])
 
   return metadata