Docker tweaks and PDF width fix

.gitea/workflows/ci-dev.yml

@@ -1,30 +0,0 @@
-version: "1"
-name: Publish Development Docker Image
-on:
-  push:
-    tags:
-      - "v[0-9]+\\.[0-9]+\\.[0-9]+-dev"
-
-jobs:
-  build:
-    name: Publish Development Docker Image
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v2
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
-
-      - name: Login to Registry
-        run: echo "${{ secrets.ACCESS_TOKEN }}" | docker login git.altaiar.dev -u "${{ secrets.USERNAME }}" --password-stdin
-
-      - name: Build & Tag Image
-        run: |
-          docker build --build-arg APP_VERSION=${{ gitea.ref_name }} -t git.altaiar.dev/${{ gitea.repository }}:${{ gitea.ref_name }} .
-          docker tag git.altaiar.dev/${{ gitea.repository }}:${{ gitea.ref_name }} git.altaiar.dev/${{ gitea.repository }}:dev
-
-      - name: Push Images
-        run: |
-          docker push git.altaiar.dev/${{ gitea.repository }}:${{ gitea.ref_name }}
-          docker push git.altaiar.dev/${{ gitea.repository }}:dev

.gitea/workflows/ci.yml

@@ -1,28 +1,36 @@
 version: "1"
 name: Publish Docker Image
+
 on:
   push:
     tags:
-      - "v[0-9]+\\.[0-9]+\\.[0-9]+"
+      - "*"
 
 jobs:
   build:
     name: Publish Docker Image
     runs-on: ubuntu-latest
+
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
+        uses: docker/setup-buildx-action@v3
 
       - name: Login to Registry
-        run: echo "${{ secrets.ACCESS_TOKEN }}" | docker login git.altaiar.dev -u "${{ secrets.USERNAME }}" --password-stdin
+        run: echo "${{ secrets.ACCESS_TOKEN }}" \
+          | docker login git.altaiar.dev -u "${{ secrets.USERNAME }}" --password-stdin
 
       - name: Build & Tag Image
         run: |
-          docker build --build-arg APP_VERSION=${{ gitea.ref_name }} -t git.altaiar.dev/${{ gitea.repository }}:${{ gitea.ref_name }} .
-          docker tag git.altaiar.dev/${{ gitea.repository }}:${{ gitea.ref_name }} git.altaiar.dev/${{ gitea.repository }}:latest
+          docker build \
+            --build-arg APP_VERSION=${{ gitea.ref_name }} \
+            --label org.opencontainers.image.version=${{ gitea.ref_name }} \
+            -t git.altaiar.dev/${{ gitea.repository }}:${{ gitea.ref_name }} .
+          docker tag \
+            git.altaiar.dev/${{ gitea.repository }}:${{ gitea.ref_name }} \
+            git.altaiar.dev/${{ gitea.repository }}:latest
 
       - name: Push Images
         run: |

Dockerfile

@@ -1,15 +1,9 @@
-# base
-# ----
-FROM node:20-bookworm-slim AS 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.
-# 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 apt-get update && apt-get install -y \
-  openssl \
-  && rm -rf /var/lib/apt/lists/*
+RUN apk add --no-cache openssl && corepack enable
 
 USER node
 WORKDIR /home/node/app
@@ -30,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
@@ -56,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
@@ -70,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
@@ -89,20 +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:20-bookworm-slim AS api_serve
+FROM node:lts-alpine AS api_serve
 
-RUN corepack enable
+RUN apk add --no-cache openssl && corepack enable
 
-RUN apt-get update && apt-get install -y \
-  openssl \
-  && rm -rf /var/lib/apt/lists/*
+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
@@ -129,20 +111,11 @@ 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
-
-# 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.
+ENV APP_VERSION=${APP_VERSION}
 
 CMD [ "./api/dist/server.js" ]
-# CMD [ "node_modules/.bin/rw-server", "api" ]
 
-# web serve
-# ---------
-FROM node:20-bookworm-slim AS web_serve
+FROM node:lts-alpine AS web_serve
 
 RUN corepack enable
 
@@ -167,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`

api/package.json

@@ -5,12 +5,12 @@
   "dependencies": {
     "@fastify/cors": "^9.0.1",
     "@fastify/rate-limit": "^9.1.0",
-    "@redwoodjs/api": "8.4.0",
-    "@redwoodjs/api-server": "8.4.0",
-    "@redwoodjs/auth-dbauth-api": "8.4.0",
-    "@redwoodjs/graphql-server": "8.4.0",
-    "@tus/file-store": "^2.0.0",
-    "@tus/server": "^2.0.0",
+    "@redwoodjs/api": "8.6.1",
+    "@redwoodjs/api-server": "8.6.1",
+    "@redwoodjs/auth-dbauth-api": "8.6.1",
+    "@redwoodjs/graphql-server": "8.6.1",
+    "@tus/file-store": "1.4.0",
+    "@tus/server": "1.7.0",
     "countries-list": "^3.1.1",
     "graphql-scalars": "^1.23.0",
     "nodemailer": "^6.9.14"

api/src/lib/cors.ts

@@ -2,10 +2,17 @@ import type { FastifyReply } from 'fastify'
 
 import { isProduction } from '@redwoodjs/api/logger'
 
-export const setCorsHeaders = (res: FastifyReply) => {
+export const setCorsHeaders = (
+  res: FastifyReply,
+  isPublic: boolean = false
+) => {
   res.raw.setHeader(
     'Access-Control-Allow-Origin',
-    isProduction ? process.env.ADDRESS_PROD : process.env.ADDRESS_DEV
+    isPublic
+      ? '*'
+      : isProduction
+        ? process.env.ADDRESS_PROD
+        : process.env.ADDRESS_DEV
   )
   res.raw.setHeader(
     'Access-Control-Allow-Methods',
@@ -16,4 +23,9 @@ export const setCorsHeaders = (res: FastifyReply) => {
     'Origin, X-Requested-With, Content-Type, Accept, Authorization, Tus-Resumable, Upload-Length, Upload-Metadata, Upload-Offset'
   )
   res.raw.setHeader('Access-Control-Allow-Credentials', 'true')
+  res.raw.setHeader(
+    'Access-Control-Expose-Headers',
+    'Upload-Offset, Upload-Length, Upload-Metadata, Tus-Version,' +
+      'Tus-Resumable, Tus-Max-Size, Tus-Extension, Tus-Checksum-Algorithm'
+  )
 }

api/src/lib/tus.ts

@@ -19,16 +19,22 @@ interface User {
   resetTokenExpiresAt: Date | null
 }
 
-export const handleTusUpload = async (
+export const handleTusUpload = (
   req: FastifyRequest,
   res: FastifyReply,
   tusHandler: Server,
   isPublicEndpoint: boolean
 ) => {
+  res.hijack()
+
+  if (req.method === 'GET' && isPublicEndpoint) {
+    setCorsHeaders(res)
+  }
+
   if (isProduction) {
     if (req.method === 'OPTIONS') handleOptionsRequest(res)
     else if (isPublicEndpoint && req.method === 'GET')
-      await tusHandler.handle(req.raw, res.raw)
+      void tusHandler.handle(req.raw, res.raw)
     else if (['GET', 'POST', 'HEAD', 'PATCH'].includes(req.method)) {
       if (req.headers.cookie) handleAuthenticatedRequest(req, res, tusHandler)
       else {
@@ -40,8 +46,8 @@ export const handleTusUpload = async (
       res.raw.end('Method not allowed')
     }
   } else {
-    setCorsHeaders(res)
-    await tusHandler.handle(req.raw, res.raw)
+    setCorsHeaders(res, isPublicEndpoint)
+    void tusHandler.handle(req.raw, res.raw)
   }
 }
 

api/src/server.ts

@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import Cors from '@fastify/cors'
 import RateLimit from '@fastify/rate-limit'
+import { FileStore } from '@tus/file-store'
+import { Server } from '@tus/server'
 
 import { isProduction } from '@redwoodjs/api/logger'
 import { createServer } from '@redwoodjs/api-server'
@@ -15,8 +17,6 @@ enum Theme {
 
 ;(async () => {
   const { countries } = await import('countries-list')
-  const { FileStore } = await import('@tus/file-store')
-  const { Server } = await import('@tus/server')
 
   if (!Object.keys(countries).includes(process.env.COUNTRY))
     throw new Error(
@@ -65,12 +65,14 @@ enum Theme {
     (_request, _payload, done) => done(null)
   )
 
-  server.all('/files', (req, res) =>
+  server.all('/files', (req, res) => {
+    res.hijack()
     handleTusUpload(req, res, tusServer, false)
-  )
-  server.all('/files/*', (req, res) =>
+  })
+  server.all('/files/*', (req, res) => {
+    res.hijack()
     handleTusUpload(req, res, tusServer, true)
-  )
+  })
 
   await server.start()
 })()

api/tsconfig.json

@@ -4,8 +4,8 @@
     "allowJs": true,
     "esModuleInterop": true,
     "target": "ES2023",
-    "module": "NodeNext",
-    "moduleResolution": "nodenext",
+    "module": "Node16",
+    "moduleResolution": "node16",
     "skipLibCheck": false,
     "rootDirs": [
       "./src",

package.json

@@ -7,9 +7,9 @@
     ]
   },
   "devDependencies": {
-    "@redwoodjs/auth-dbauth-setup": "8.4.0",
-    "@redwoodjs/core": "8.4.0",
-    "@redwoodjs/project-config": "8.4.0",
+    "@redwoodjs/auth-dbauth-setup": "8.6.1",
+    "@redwoodjs/core": "8.6.1",
+    "@redwoodjs/project-config": "8.6.1",
     "prettier-plugin-tailwindcss": "0.4.1"
   },
   "eslintConfig": {

web/package.json

@@ -14,11 +14,11 @@
     "@icons-pack/react-simple-icons": "^10.0.0",
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.6.1",
-    "@redwoodjs/auth-dbauth-web": "8.4.0",
-    "@redwoodjs/forms": "8.4.0",
-    "@redwoodjs/router": "8.4.0",
-    "@redwoodjs/web": "8.4.0",
-    "@redwoodjs/web-server": "8.4.0",
+    "@redwoodjs/auth-dbauth-web": "8.6.1",
+    "@redwoodjs/forms": "8.6.1",
+    "@redwoodjs/router": "8.6.1",
+    "@redwoodjs/web": "8.6.1",
+    "@redwoodjs/web-server": "8.6.1",
     "@tailwindcss/typography": "^0.5.15",
     "@tiptap/extension-link": "^2.8.0",
     "@tiptap/extension-text-style": "^2.8.0",
@@ -41,10 +41,11 @@
     "react": "18.3.1",
     "react-colorful": "^5.6.1",
     "react-dom": "18.3.1",
-    "react-html-parser": "^2.0.2"
+    "react-html-parser": "^2.0.2",
+    "react-pdf": "^9.2.1"
   },
   "devDependencies": {
-    "@redwoodjs/vite": "8.4.0",
+    "@redwoodjs/vite": "8.6.1",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@types/react-html-parser": "^2",

web/src/components/PDF/PDF.tsx

@@ -1,7 +1,16 @@
-import { useState } from 'react'
+import { useState, useRef, useEffect } from 'react'
 
-import { mdiAlertOutline } from '@mdi/js'
+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'
+
+pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+  'pdfjs-dist/build/pdf.worker.min.mjs',
+  import.meta.url
+).toString()
 
 interface PDFProps {
   url: string
@@ -9,29 +18,52 @@ interface PDFProps {
 }
 
 const PDF = ({ url, form = false }: PDFProps) => {
-  const [error, setError] = useState<boolean>(false)
+  const [numPages, setNumPages] = useState<number>(0)
+  function onLoadSuccess({ numPages }: { numPages: number }) {
+    setNumPages(numPages)
+  }
 
-  return error ? (
-    <div role="alert" className="alert alert-warning">
-      <Icon path={mdiAlertOutline} className="size-7" />
-      <span>
-        Could not load PDF, this is common in in-app browsers, try opening this
-        page in a regular browser
-      </span>
-    </div>
-  ) : (
-    <iframe
-      src={url}
-      title="PDF"
-      content="application/pdf"
+  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
+      ref={containerRef}
+      className="overflow-auto flex justify-center"
       style={{
         width: 'calc(100vw - 1rem)',
         height: `calc(100vh - ${form ? '8.5rem' : '6rem'})`,
       }}
-      className="rounded-xl"
-      onError={() => setError(true)}
-      onLoad={() => setError(false)}
-    />
+    >
+      <a
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="fixed top-20 left-0 z-10 m-2 p-2 rounded-xl btn btn-square btn-ghost shadow-lg"
+      >
+        <Icon path={mdiOpenInNew} size={1} className="text-gray-600" />
+      </a>
+      <Document file={url} onLoadSuccess={onLoadSuccess}>
+        {Array.from({ length: numPages }, (_, i) => (
+          <PdfPage
+            key={i}
+            pageNumber={i + 1}
+            width={Math.min(containerWidth, 800)}
+          />
+        ))}
+      </Document>
+    </div>
   )
 }
 

web/src/components/Uploader/Uploader.tsx

@@ -53,7 +53,7 @@ const Uploader = ({
       onBeforeUpload: (files) => {
         for (const [key, file] of Object.entries(files)) {
           instance.setFileMeta(key, {
-            name: `${new Date().getTime().toString()}.${file.extension}`,
+            name: new Date().getTime().toString(),
             type: file.type,
             contentType: file.type,
           })
@@ -68,7 +68,7 @@ const Uploader = ({
         removeFingerprintOnSuccess: true,
       })
       .use(Compressor, {
-        mimeType: type === 'image' ? 'image/webp' : 'application/pdf',
+        mimeType: 'image/webp',
       })
 
     if (type === 'image')

web/src/pages/HomePage/HomePage.tsx

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