Fix PDF once and for all

.gitea/workflows/ci-dev.yml

@@ -0,0 +1,30 @@
+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,10 +1,9 @@
 version: "1"
 name: Publish Docker Image
-
 on:
   push:
     tags:
-      - "*"
+      - "v[0-9]+\\.[0-9]+\\.[0-9]+"
 
 jobs:
   build:
@@ -22,7 +21,7 @@ jobs:
 
       - name: Build & Tag Image
         run: |
-          docker build -t git.altaiar.dev/${{ gitea.repository }}:${{ gitea.ref_name }} .
+          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
 
       - name: Push Images

Dockerfile

@@ -1,6 +1,6 @@
 # base
 # ----
-FROM node:20-bookworm-slim as base
+FROM node:20-bookworm-slim AS base
 
 RUN corepack enable
 
@@ -32,7 +32,7 @@ COPY --chown=node:node graphql.config.js .
 
 # api build
 # ---------
-FROM base as 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!)
@@ -51,13 +51,14 @@ ARG EMAIL_FROM
 ARG EMAIL_TO
 ARG FIRST_NAME
 ARG LAST_NAME
+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
+FROM api_build AS web_build_with_prerender
 
 ARG FIRST_NAME
 ARG LAST_NAME
@@ -67,13 +68,16 @@ ARG CITY
 ARG DEFAULT_THEME
 ARG API_ADDRESS_PROD
 ARG API_ADDRESS_DEV
+ARG 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
+FROM base AS web_build
 
 ARG FIRST_NAME
 ARG LAST_NAME
@@ -83,13 +87,16 @@ ARG CITY
 ARG DEFAULT_THEME
 ARG API_ADDRESS_PROD
 ARG API_ADDRESS_DEV
+ARG 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:20-bookworm-slim AS api_serve
 
 RUN corepack enable
 
@@ -119,7 +126,10 @@ COPY --chown=node:node --from=api_build /home/node/app/api/dist /home/node/app/a
 COPY --chown=node:node --from=api_build /home/node/app/api/db /home/node/app/api/db
 COPY --chown=node:node --from=api_build /home/node/app/node_modules/.prisma /home/node/app/node_modules/.prisma
 
+ARG APP_VERSION
+
 ENV NODE_ENV=production
+ENV APP_VERSION=$APP_VERSION
 
 # default api serve command
 # ---------
@@ -132,7 +142,7 @@ CMD [ "./api/dist/server.js" ]
 
 # web serve
 # ---------
-FROM node:20-bookworm-slim as web_serve
+FROM node:20-bookworm-slim AS web_serve
 
 RUN corepack enable
 
@@ -156,6 +166,9 @@ 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 NODE_ENV=production \
   API_PROXY_TARGET=http://api:8911
 
@@ -164,7 +177,7 @@ CMD "node_modules/.bin/rw-web-server" "--api-proxy-target" "$API_PROXY_TARGET"
 
 # console
 # -------
-FROM base as console
+FROM base AS console
 
 # To add more packages:
 #

README.md

@@ -16,6 +16,7 @@ services:
   portfolio:
     container_name: portfolio
     image: git.altaiar.dev/ahmed/portfolio:latest
+    restart: unless-stopped
     environment:
       - NODE_ENV=production
       - API_PROXY_TARGET=http://localhost:8911
@@ -44,7 +45,8 @@ services:
       - 8910:8910                                           # Web
       - 8911:8911                                           # API
     depends_on:
-      - db
+      db:
+        condition: service_healthy
     volumes:
       - files:/home/node/app/api/files_prod
     command: >
@@ -54,14 +56,19 @@ services:
       yarn rw prisma db seed &&
       yarn rw serve"
 
-
   db:
     container_name: portfolio-db
     image: postgres:16-bookworm
     environment:
       - POSTGRES_USER=redwood
-      - POSTGRES_PASSWORD=changeme
+      - POSTGRES_PASSWORD=changeme                          # Change to a more secure password
       - POSTGRES_DB=portfolio
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -d DATABASE_URL"]     # Replace DATABASE_URL with the database URL from the portfolio container
+      interval: 10s
+      timeout: 5s
+      retries: 5
     volumes:
       - postgres:/var/lib/postgresql/data
 

api/package.json

@@ -9,8 +9,8 @@
     "@redwoodjs/api-server": "8.4.0",
     "@redwoodjs/auth-dbauth-api": "8.4.0",
     "@redwoodjs/graphql-server": "8.4.0",
-    "@tus/file-store": "^1.4.0",
+    "@tus/file-store": "^2.0.0",
-    "@tus/server": "^1.7.0",
+    "@tus/server": "^2.0.0",
     "countries-list": "^3.1.1",
     "graphql-scalars": "^1.23.0",
     "nodemailer": "^6.9.14"

api/src/lib/tus.ts

@@ -19,7 +19,7 @@ interface User {
   resetTokenExpiresAt: Date | null
 }
 
-export const handleTusUpload = (
+export const handleTusUpload = async (
   req: FastifyRequest,
   res: FastifyReply,
   tusHandler: Server,
@@ -28,7 +28,7 @@ export const handleTusUpload = (
   if (isProduction) {
     if (req.method === 'OPTIONS') handleOptionsRequest(res)
     else if (isPublicEndpoint && req.method === 'GET')
-      tusHandler.handle(req.raw, res.raw)
+      await tusHandler.handle(req.raw, res.raw)
     else if (['GET', 'POST', 'HEAD', 'PATCH'].includes(req.method)) {
       if (req.headers.cookie) handleAuthenticatedRequest(req, res, tusHandler)
       else {
@@ -41,7 +41,7 @@ export const handleTusUpload = (
     }
   } else {
     setCorsHeaders(res)
-    tusHandler.handle(req.raw, res.raw)
+    await tusHandler.handle(req.raw, res.raw)
   }
 }
 

api/src/server.ts

@@ -1,8 +1,6 @@
 /* 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'
@@ -17,6 +15,8 @@ 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(
@@ -28,6 +28,8 @@ enum Theme {
       'Invalid DEFAULT_THEME environment variable, please select either light or dark'
     )
 
+  logger.info(`Portfolio ${process.env.APP_VERSION}`)
+
   const server = await createServer({
     logger,
     configureApiServer: async (server) => {
@@ -52,7 +54,10 @@ enum Theme {
     datastore: new FileStore({
       directory: `./files_${isProduction ? 'prod' : 'dev'}`,
     }),
-    onResponseError: (_req, res, _err) => logger.error(res),
+    onResponseError(_, err) {
+      logger.error(err)
+      return { status_code: 500, body: 'Internal Server Error' }
+    },
   })
 
   server.addContentTypeParser(

api/tsconfig.json

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

docker-compose.yml

@@ -4,6 +4,7 @@ services:
   portfolio:
     container_name: portfolio
     image: git.altaiar.dev/ahmed/portfolio:latest
+    restart: unless-stopped
     environment:
       - NODE_ENV=production
       - API_PROXY_TARGET=http://localhost:8911
@@ -32,7 +33,8 @@ services:
       - 8910:8910                                           # Web
       - 8911:8911                                           # API
     depends_on:
-      - db
+      db:
+        condition: service_healthy
     volumes:
       - files:/home/node/app/api/files_prod
     command: >
@@ -42,14 +44,19 @@ services:
       yarn rw prisma db seed &&
       yarn rw serve"
 
-
   db:
     container_name: portfolio-db
     image: postgres:16-bookworm
     environment:
       - POSTGRES_USER=redwood
-      - POSTGRES_PASSWORD=changeme
+      - POSTGRES_PASSWORD=changeme                          # Change to a more secure password
       - POSTGRES_DB=portfolio
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -d DATABASE_URL"]     # Replace DATABASE_URL with the database URL from the portfolio container
+      interval: 10s
+      timeout: 5s
+      retries: 5
     volumes:
       - postgres:/var/lib/postgresql/data
 

redwood.toml

@@ -9,7 +9,7 @@
   title = "${FIRST_NAME} ${LAST_NAME}"
   port = 8910
   apiUrl = "/api"
-  includeEnvironmentVariables = ["FIRST_NAME", "LAST_NAME", "COUNTRY", "STATE", "CITY", "DEFAULT_THEME", "API_ADDRESS_PROD", "API_ADDRESS_DEV"]
+  includeEnvironmentVariables = ["FIRST_NAME", "LAST_NAME", "COUNTRY", "STATE", "CITY", "DEFAULT_THEME", "API_ADDRESS_PROD", "API_ADDRESS_DEV", "APP_VERSION"]
 [generate]
   tests = false
   stories = false

web/package.json

@@ -41,7 +41,8 @@
     "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",

web/src/components/PDF/PDF.tsx

@@ -1,7 +1,14 @@
+import { mdiOpenInNew } from '@mdi/js';
+import Icon from '@mdi/react';
 import { useState } from 'react'
+import { Document, Page as PdfPage, pdfjs } from "react-pdf";
+import "react-pdf/dist/Page/AnnotationLayer.css";
+import "react-pdf/dist/Page/TextLayer.css";
 
-import { mdiAlertOutline } from '@mdi/js'
+pdfjs.GlobalWorkerOptions.workerSrc = new URL(
-import Icon from '@mdi/react'
+  "pdfjs-dist/build/pdf.worker.min.mjs",
+  import.meta.url
+).toString();
 
 interface PDFProps {
   url: string
@@ -9,28 +16,33 @@ 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 ? (
+  return (
-    <div role="alert" className="alert alert-warning">
+    <div
-      <Icon path={mdiAlertOutline} className="size-7" />
+      className="overflow-y-auto flex justify-center"
-      <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"
       style={{
         width: 'calc(100vw - 1rem)',
         height: `calc(100vh - ${form ? '8.5rem' : '6rem'})`,
       }}
-      className="rounded-xl"
+    >
-      onError={() => setError(true)}
+      <a
-      onLoad={() => setError(false)}
+        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={800} />
+        ))}
+      </Document>
+    </div>
   )
 }