denshooter/oma-memorial
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Dockerfile to add HEIF support dependencies and adjust TimelineSection styles for better layout and image handling

Browse Source
This commit is contained in:
denshooter
2026-02-22 00:27:12 +01:00
parent eb28501b2e
commit 49d8798e11
2 changed files with 33 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Dockerfile
+27 -3
View File
@@ -2,7 +2,29 @@ FROM node:22-alpine AS builder
WORKDIR /app
# Install build dependencies for sharp and libvips with HEIF support
# See: https://sharp.pixelplumbing.com/install#alpine
RUN apk add --no-cache \
build-base \
pkgconf \
# libvips runtime dependencies
libjpeg-turbo-dev \
libpng-dev \
libwebp-dev \
tiff-dev \
libexif-dev \
lcms2-dev \
glib-dev \
# libvips itself and its HEIF support
vips-dev \
libheif-dev \
# Codecs for HEIF
libde265-dev \
x265-dev
COPY package*.json ./
# Tell sharp to use the system-wide libvips we just installed with HEIF support
ENV SHARP_IGNORE_GLOBAL_LIBVIPS=1
RUN npm ci
COPY . .
@@ -25,9 +47,11 @@ COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/public ./public
# Copy sharp native binaries (needed for HEIC→JPEG conversion)
COPY --from=builder /app/node_modules/sharp ./node_modules/sharp
COPY --from=builder /app/node_modules/@img ./node_modules/@img
# Sharp native binaries are no longer copied directly,
# as sharp is built against system libvips and is part of node_modules copied with the standalone app.
# If sharp is needed outside standalone, node_modules would need to be copied.
# COPY --from=builder /app/node_modules/sharp ./node_modules/sharp
# COPY --from=builder /app/node_modules/@img ./node_modules/@img
RUN mkdir -p /app/data/uploads/photos /app/data/uploads/videos /app/data/uploads/music \
&& chown -R nextjs:nodejs /app/data
src/components/TimelineSection.tsx
+6 -6
View File
@@ -58,7 +58,7 @@ export default function TimelineSection({ entries }: TimelineSectionProps) {
<div className="absolute left-5 top-0 bottom-0 w-0.5 bg-gradient-to-b from-warm-gold/40 via-warm-gold/25 to-warm-gold/40 sm:hidden" />
{/* Entries */}
<div className="space-y-12 sm:space-y-16 py-4 relative" style={{ zIndex: 10 }}>
<div className="space-y-8 sm:space-y-12 py-4 relative" style={{ zIndex: 10 }}>
{entries.map((entry, index) => {
const isLeft = index % 2 === 0
const isBirth = index === birthIndex
@@ -75,8 +75,8 @@ export default function TimelineSection({ entries }: TimelineSectionProps) {
transition={{ duration: 0.6, delay: 0.1 }}
className={`relative flex items-start ${
isLeft
? 'pl-10 sm:pl-0 sm:pr-[52%]'
: 'pl-10 sm:pl-[52%]'
? 'pl-10 sm:pl-0 sm:pr-[50%]'
: 'pl-10 sm:pl-[50%]'
}`}
>
{/* Content Card */}
@@ -97,7 +97,7 @@ export default function TimelineSection({ entries }: TimelineSectionProps) {
key={i}
src={`/api/files/${filename.trim()}?w=600`}
alt=""
className="w-full max-h-40 object-cover rounded-lg"
className="w-full max-h-60 object-cover rounded-lg"
loading="lazy"
/>
))}
@@ -185,7 +185,7 @@ export default function TimelineSection({ entries }: TimelineSectionProps) {
animate={{ scale: 1, y: 0 }}
exit={{ scale: 0.9, y: 20 }}
onClick={(e) => e.stopPropagation()}
className="bg-cream rounded-2xl shadow-2xl max-w-2xl w-full max-h-[85vh] overflow-y-auto"
className="bg-cream rounded-2xl shadow-2xl max-w-4xl w-full max-h-[85vh] overflow-y-auto"
>
{/* Header */}
<div className="sticky top-0 bg-cream/95 backdrop-blur-sm border-b border-warm-border p-6 flex items-start justify-between">
@@ -220,7 +220,7 @@ export default function TimelineSection({ entries }: TimelineSectionProps) {
{selectedEntry.media_filenames.split(',').map((filename, i) => (
<img
key={i}
src={`/api/files/${filename.trim()}?w=1200`}
src={`/api/files/${filename.trim()}?w=1600`}
alt=""
className="w-full object-contain rounded-xl"
/>