Docker tweaks and PDF width fix

Dockerfile

@@ -1,13 +1,9 @@
-# base
-# ----
 FROM node:lts-alpine AS base
 
-RUN corepack enable
+ARG APP_VERSION=dev
+ENV APP_VERSION=${APP_VERSION}
 
-# We tried to make the Dockerfile as lean as possible. In some cases, that means we excluded a dependency your project needs.
+RUN apk add --no-cache openssl && corepack enable
-# By far the most common is Python. If you're running into build errors because `python3` isn't available,
-# add `python3 make gcc \` before the `openssl \` line below and in other stages as necessary:
-RUN apk add openssl
 
 USER node
 WORKDIR /home/node/app
@@ -28,13 +24,8 @@ RUN --mount=type=cache,target=/home/node/.yarn/berry/cache,uid=1000 \
 COPY --chown=node:node redwood.toml .
 COPY --chown=node:node graphql.config.js .
 
-# api build
-# ---------
 FROM base AS api_build
 
-# If your api side build relies on build-time environment variables,
-# specify them here as ARGs. (But don't put secrets in your Dockerfile!)
-
 ARG ADDRESS_PROD
 ARG ADDRESS_DEV
 ARG DOMAIN
@@ -54,8 +45,6 @@ ARG APP_VERSION
 COPY --chown=node:node api api
 RUN yarn rw build api
 
-# web prerender build
-# -------------------
 FROM api_build AS web_build_with_prerender
 
 ARG FIRST_NAME
@@ -68,13 +57,11 @@ ARG API_ADDRESS_PROD
 ARG API_ADDRESS_DEV
 ARG APP_VERSION
 
-ENV APP_VERSION=$APP_VERSION
+ENV APP_VERSION=${APP_VERSION}
 
 COPY --chown=node:node web web
 RUN yarn rw build web
 
-# web build
-# ---------
 FROM base AS web_build
 
 ARG FIRST_NAME
@@ -87,18 +74,17 @@ ARG API_ADDRESS_PROD
 ARG API_ADDRESS_DEV
 ARG APP_VERSION
 
-ENV APP_VERSION=$APP_VERSION
+ENV APP_VERSION=${APP_VERSION}
 
 COPY --chown=node:node web web
 RUN yarn rw build web --no-prerender
 
-# api serve
-# ---------
 FROM node:lts-alpine AS api_serve
 
-RUN corepack enable
+RUN apk add --no-cache openssl && corepack enable
 
-RUN apk add openssl
+RUN mkdir -p /home/node/app/api/files_prod \
+ && chown -R node:node /home/node/app/api/files_prod
 
 USER node
 WORKDIR /home/node/app
@@ -125,19 +111,10 @@ COPY --chown=node:node --from=api_build /home/node/app/node_modules/.prisma /hom
 ARG APP_VERSION
 
 ENV NODE_ENV=production
-ENV APP_VERSION=$APP_VERSION
+ENV APP_VERSION=${APP_VERSION}
-
-# default api serve command
-# ---------
-# If you are using a custom server file, you must use the following
-# command to launch your server instead of the default api-server below.
-# This is important if you intend to configure GraphQL to use Realtime.
 
 CMD [ "./api/dist/server.js" ]
-# CMD [ "node_modules/.bin/rw-server", "api" ]
 
-# web serve
-# ---------
 FROM node:lts-alpine AS web_serve
 
 RUN corepack enable
@@ -163,29 +140,15 @@ COPY --chown=node:node graphql.config.js .
 COPY --chown=node:node --from=web_build /home/node/app/web/dist /home/node/app/web/dist
 
 ARG APP_VERSION
-ENV APP_VERSION=$APP_VERSION
+ENV APP_VERSION=${APP_VERSION}
 
 ENV NODE_ENV=production \
   API_PROXY_TARGET=http://api:8911
 
-# We use the shell form here for variable expansion.
 CMD "node_modules/.bin/rw-web-server" "--api-proxy-target" "$API_PROXY_TARGET"
 
-# console
-# -------
 FROM base AS console
 
-# To add more packages:
-#
-# ```
-# USER root
-#
-# RUN apt-get update && apt-get install -y \
-#     curl
-#
-# USER node
-# ```
-
 COPY --chown=node:node api api
 COPY --chown=node:node web web
 COPY --chown=node:node scripts scripts

README.md

@@ -76,11 +76,6 @@ volumes:
   postgres:
   files:                                                    # For persistent file storage across upgrades
 ```
-## Fix Files Ownership
-The `files` volume in Docker is owned by `root`, since the portfolio container runs under the `node` user, file uploads will fail. Run this command to give ownership to the `node` user:
-```
-sudo docker exec -u root portfolio chown -R node:node /home/node/app/api/files_prod
-```
 ## Logging In
 - Once the container is up and running, head to `/login` (`https://portfolio.example.com/login`), default credentials are below
 - If you would like to change the password, head to `/forgot-password` (`https://portfolio.example.com/forgot-password`), the username is `admin`

web/src/components/PDF/PDF.tsx

@@ -1,8 +1,9 @@
-import { useState } from 'react'
+import { useState, useRef, useEffect } from 'react'
 
 import { mdiOpenInNew } from '@mdi/js'
 import Icon from '@mdi/react'
 import { Document, Page as PdfPage, pdfjs } from 'react-pdf'
+
 import 'react-pdf/dist/Page/AnnotationLayer.css'
 import 'react-pdf/dist/Page/TextLayer.css'
 
@@ -22,9 +23,24 @@ const PDF = ({ url, form = false }: PDFProps) => {
     setNumPages(numPages)
   }
 
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [containerWidth, setContainerWidth] = useState<number>(0)
+
+  useEffect(() => {
+    function updateWidth() {
+      if (containerRef.current) {
+        setContainerWidth(containerRef.current.clientWidth)
+      }
+    }
+    updateWidth()
+    window.addEventListener('resize', updateWidth)
+    return () => window.removeEventListener('resize', updateWidth)
+  }, [])
+
   return (
     <div
-      className="overflow-y-auto flex justify-center"
+      ref={containerRef}
+      className="overflow-auto flex justify-center"
       style={{
         width: 'calc(100vw - 1rem)',
         height: `calc(100vh - ${form ? '8.5rem' : '6rem'})`,
@@ -40,7 +56,11 @@ const PDF = ({ url, form = false }: PDFProps) => {
       </a>
       <Document file={url} onLoadSuccess={onLoadSuccess}>
         {Array.from({ length: numPages }, (_, i) => (
-          <PdfPage key={i} pageNumber={i + 1} width={800} />
+          <PdfPage
+            key={i}
+            pageNumber={i + 1}
+            width={Math.min(containerWidth, 800)}
+          />
         ))}
       </Document>
     </div>

web/src/pages/HomePage/HomePage.tsx

@@ -76,7 +76,7 @@ const HomePage = () => (
             rel="noreferrer"
             className="btn btn-square"
           >
-            {getLogoComponent('github')}
+            {getLogoComponent('gitea')}
           </a>
         </div>
       ) : (