add plausible as feature, add image service/proxy as feature

Author: genox

packages/ssr-daisyui/.env.example

@@ -2,3 +2,4 @@ NODE_ENV=development
 INSTANCE_NAME=localhost
 ORIGIN=http://localhost:5173
 PLAUSIBLE_HOST=https://plausible.io
+API_URL=http://localhost:3000/api

packages/ssr-daisyui/Dockerfile

@@ -1,19 +1,16 @@
-FROM node:22-alpine AS base
-RUN corepack enable
+FROM node:24-alpine AS base
 
 # Install dependencies
 FROM base AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat
-
 WORKDIR /app
 
 COPY .yarnrc.yml ./
 COPY package.json yarn.lock ./
 
-RUN yarn --version
-RUN yarn install --immutable
-
+RUN corepack enable
+RUN yarn --immutable
 
 # Build the application
 FROM base AS builder
@@ -28,6 +25,7 @@ COPY --from=deps /app/package.json ./package.json
 COPY --from=deps /app/yarn.lock ./yarn.lock
 COPY . .
 
+RUN corepack enable
 RUN yarn build
 RUN yarn workspaces focus --production
 RUN yarn cache clean --all
@@ -55,4 +53,4 @@ HEALTHCHECK --interval=10s --timeout=3s --start-period=5s --retries=10 \
 
 EXPOSE 3000
 
-CMD ["npm", "run", "start"]
+CMD ["npm", "run", "start"]

packages/ssr-daisyui/app/components/theme/footer.tsx

@@ -17,11 +17,15 @@ export const Footer: React.FC = () => {
 			items: [
 				{
 					name: t('menu.home.name', 'Home'),
-					path: (lang: string) => href('/:lang?/home', { lang }),
+					path: (lang: string) => href('/:lang/home', { lang }),
 				},
 				{
 					name: t('menu.form.name', 'Example Form'),
-					path: (lang: string) => href('/:lang?/form', { lang }),
+					path: (lang: string) => href('/:lang/form', { lang }),
+				},
+				{
+					name: t('menu.images.name', 'Image Examples'),
+					path: (lang: string) => href('/:lang/images', { lang }),
 				},
 			],
 			section: t('menu.footer.section.products', 'Products'),
@@ -30,11 +34,15 @@ export const Footer: React.FC = () => {
 			items: [
 				{
 					name: t('menu.home.name', 'Home'),
-					path: (lang: string) => href('/:lang?/home', { lang }),
+					path: (lang: string) => href('/:lang/home', { lang }),
 				},
 				{
 					name: t('menu.form.name', 'Example Form'),
-					path: (lang: string) => href('/:lang?/form', { lang }),
+					path: (lang: string) => href('/:lang/form', { lang }),
+				},
+				{
+					name: t('menu.images.name', 'Image Examples'),
+					path: (lang: string) => href('/:lang/images', { lang }),
 				},
 			],
 			section: t('menu.footer.section.company', 'Company'),
@@ -43,11 +51,15 @@ export const Footer: React.FC = () => {
 			items: [
 				{
 					name: t('menu.home.name', 'Home'),
-					path: (lang: string) => href('/:lang?/home', { lang }),
+					path: (lang: string) => href('/:lang/home', { lang }),
 				},
 				{
 					name: t('menu.form.name', 'Example Form'),
-					path: (lang: string) => href('/:lang?/form', { lang }),
+					path: (lang: string) => href('/:lang/form', { lang }),
+				},
+				{
+					name: t('menu.images.name', 'Image Examples'),
+					path: (lang: string) => href('/:lang/images', { lang }),
 				},
 			],
 			section: t('menu.footer.section.resources', 'Resources'),
@@ -112,10 +124,10 @@ export const Footer: React.FC = () => {
 						})}
 					</div>
 					<div className="flex flex-wrap gap-x-6 gap-y-2">
-						<Link className="hover:underline" to={href('/:lang?/legal', { lang })}>
+						<Link className="hover:underline" to={href('/:lang/legal', { lang })}>
 							{t('theme.footer.legalLink', 'Legal information')}
 						</Link>
-						<Link className="hover:underline" to={href('/:lang?/privacy', { lang })}>
+						<Link className="hover:underline" to={href('/:lang/privacy', { lang })}>
 							{t('theme.footer.privacyLink', 'Privacy Policy')}
 						</Link>
 					</div>

packages/ssr-daisyui/app/components/theme/header/nav-drawer.tsx

@@ -19,11 +19,15 @@ export const NavDrawer: React.FC = () => {
 	const menu: MenuItem[] = [
 		{
 			name: t('menu.home.name', 'Home'),
-			path: (lang: string) => href('/:lang?/home', { lang }),
+			path: (lang: string) => href('/:lang/home', { lang }),
 		},
 		{
 			name: t('menu.form.name', 'Example Form'),
-			path: (lang: string) => href('/:lang?/form', { lang }),
+			path: (lang: string) => href('/:lang/form', { lang }),
+		},
+		{
+			name: t('menu.images.name', 'Image Examples'),
+			path: (lang: string) => href('/:lang/images', { lang }),
 		},
 	]
 

packages/ssr-daisyui/app/components/ui/language-switcher.tsx

@@ -10,12 +10,24 @@ export const LanguageSwitcher: React.FC = () => {
 	const { t } = useTranslation()
 	const location = useLocation()
 
+	const getLocalizedPath = (targetLang: string) => {
+		const segments = location.pathname.split('/')
+		// Check if the first segment (after empty string from leading /) is a supported language
+		if (segments[1] && i18nConfig.supportedLngs.includes(segments[1])) {
+			// Replace the language segment
+			segments[1] = targetLang
+			return segments.join('/')
+		}
+		// If no language in path, assume we're at root and redirect to home with language
+		return `/${targetLang}/home`
+	}
+
 	return (
 		<div className="flex gap-2" title={t('language.switcher.title', 'Change Language')}>
 			{i18nConfig.supportedLngs
 				.filter((each) => each !== lang)
 				.map((each) => (
-					<Link key={each} reloadDocument={true} to={location.pathname.replace(lang, each)}>
+					<Link key={each} reloadDocument={true} to={getLocalizedPath(each)}>
 						<Button size="xs" variant="ghost">
 							{each.toUpperCase()}
 						</Button>

packages/ssr-daisyui/app/features/image-service/components/image/helper/create-optimized-url.ts

@@ -0,0 +1,35 @@
+// Create optimized image URL for our API (Astro-compatible)
+
+export function createOptimizedUrl(
+	src: string,
+	fit?: string,
+	format?: string,
+	height?: number,
+	quality?: number,
+	width?: number,
+): string {
+	const searchParams = new URLSearchParams()
+
+	// Process the source URL (proxy if needed)
+	const processedSrc = src
+	searchParams.set('src', processedSrc)
+
+	// Add transformation parameters using Astro-compatible parameter names
+	if (width) {
+		searchParams.set('w', width.toString())
+	}
+	if (height) {
+		searchParams.set('h', height.toString())
+	}
+	if (format) {
+		searchParams.set('f', format)
+	}
+	if (quality) {
+		searchParams.set('q', quality.toString())
+	}
+	if (fit) {
+		searchParams.set('fit', fit)
+	}
+
+	return `/api/image?${searchParams.toString()}`
+}

packages/ssr-daisyui/app/features/image-service/components/image/helper/generate-src-set.ts

@@ -0,0 +1,31 @@
+// Generate srcset for responsive images (unpic-style)
+import { createOptimizedUrl } from './create-optimized-url.ts'
+
+export function generateSrcSet(
+	src: string,
+	baseWidth: number,
+	fit?: string,
+	format?: string,
+	height?: number,
+	quality?: number,
+): string {
+	// For container-based responsive images, generate a minimal srcset
+	// Only include 1x and 2x variants of the exact target size
+	const widths = [baseWidth]
+
+	// Add 2x variant for high-DPI displays, but cap at reasonable maximums
+	const highDpiWidth = Math.min(baseWidth * 2, 2560)
+	if (highDpiWidth > baseWidth) {
+		widths.push(highDpiWidth)
+	}
+
+	return widths
+		.map((w) => {
+			const aspectRatio = height && baseWidth ? height / baseWidth : undefined
+			const scaledHeight = aspectRatio ? Math.round(w * aspectRatio) : undefined
+
+			const url = createOptimizedUrl(src, fit, format, scaledHeight, quality, w)
+			return `${url} ${w}w`
+		})
+		.join(', ')
+}

packages/ssr-daisyui/app/features/image-service/components/image/helper/get-image-url.ts

@@ -0,0 +1,26 @@
+import { isNumber } from 'es-toolkit/compat'
+
+import { type Media } from '~/types/media.ts'
+
+export function getImageUrl(src: Media | null | number | string | undefined): null | string {
+	// Handle null/undefined
+	if (!src) return null
+
+	// Handle string paths
+	if (typeof src === 'string') {
+		return src
+	}
+
+	// Handle media objects
+	if (typeof src === 'object') {
+		return src.url || src.filename || null
+	}
+
+	// Handle ID numbers (can't resolve without API call)
+	if (isNumber(src)) {
+		console.warn('Image: Cannot render media ID without full media object')
+		return null
+	}
+
+	return null
+}

packages/ssr-daisyui/app/features/image-service/components/image/image.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useRef, useState } from 'react'
+
+import { cn } from '~/lib/utils.ts'
+
+import { type ImageProps } from '../../types'
+import { createOptimizedUrl } from './helper/create-optimized-url.ts'
+import { generateSrcSet } from './helper/generate-src-set.ts'
+import { getImageUrl } from './helper/get-image-url.ts'
+
+export function Image({
+	alt,
+	className,
+	disableSrcSet = false,
+	fit,
+	format = 'webp',
+	height,
+	priority = false,
+	quality = 75,
+	sizes,
+	src,
+	width,
+	...imgProps
+}: ImageProps) {
+	const [isLoaded, setIsLoaded] = useState(false)
+	const imgRef = useRef<HTMLImageElement>(null)
+
+	// Extract URL from various src types
+	const imageUrl = getImageUrl(src)
+
+	// Extract alt text from media object if available and alt prop not provided
+	let altText = alt
+	if (!alt && typeof src === 'object' && src && 'altText' in src) {
+		altText = src.altText || ''
+	}
+
+	// Use dimensions from media object if not specified
+	const imageWidth =
+		width ||
+		(typeof src === 'object' && src && 'width' in src && typeof src.width === 'number'
+			? src.width
+			: undefined)
+	const imageHeight =
+		height ||
+		(typeof src === 'object' && src && 'height' in src && typeof src.height === 'number'
+			? src.height
+			: undefined)
+
+	// Create the main optimized URL
+	const optimizedSrc = imageUrl
+		? createOptimizedUrl(imageUrl, fit, format, imageHeight, quality, imageWidth)
+		: ''
+
+	// Generate responsive srcset if width is provided
+	const srcSet =
+		!disableSrcSet && imageWidth && imageUrl
+			? generateSrcSet(imageUrl, imageWidth, fit, format, imageHeight, quality)
+			: undefined
+
+	// Check if image is already loaded (e.g., from cache)
+	useEffect(() => {
+		if (imgRef.current && imgRef.current.complete && imgRef.current.naturalHeight > 0) {
+			setIsLoaded(true)
+		}
+	}, [optimizedSrc])
+
+	if (!imageUrl) {
+		return null
+	}
+
+	return (
+		<img
+			{...imgProps}
+			alt={altText}
+			className={cn(
+				'transition-opacity duration-300 ease-in-out',
+				isLoaded ? 'opacity-100' : 'opacity-0',
+				className,
+			)}
+			decoding="async"
+			height={imageHeight}
+			loading={priority ? 'eager' : 'lazy'}
+			onLoad={(e) => {
+				setIsLoaded(true)
+				imgProps.onLoad?.(e)
+			}}
+			ref={imgRef}
+			sizes={sizes}
+			src={optimizedSrc}
+			srcSet={srcSet}
+			width={imageWidth}
+		/>
+	)
+}