Optimize template images + disable image optim docker (#313)

* Optimize template images + disable image optim docker

* Fix new name default docker env variable name

* Re-establish template page cache
This commit is contained in:
Julien Nahum 2024-02-06 19:56:14 +01:00 committed by GitHub
parent 2274bd1abd
commit cf32ba22f7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 41 additions and 9 deletions

View File

@ -14,6 +14,7 @@ ADD client/package.json client/package-lock.json ./
RUN npm install
ADD client /app/
RUN cp .env.docker .env
RUN npm run build
# syntax=docker/dockerfile:1.3-labs

View File

@ -10,4 +10,5 @@ NUXT_PUBLIC_GOOGLE_ANALYTICS_CODE=
NUXT_PUBLIC_H_CAPTCHA_SITE_KEY=
NUXT_PUBLIC_PAID_PLANS_ENABLED=false
NUXT_PUBLIC_S3_ENABLED=false
NUXT_PUBLIC_IMAGE_OPTIMIZATION_DISABLED=true
NUXT_API_SECRET=

View File

@ -17,8 +17,8 @@
</div>
<div class="aspect-[4/3] rounded-lg shadow-sm overflow-hidden">
<img class="group-hover:scale-110 transition-all duration-200 h-full object-cover w-full"
:src="template.image_url" alt=""
<NuxtImg class="group-hover:scale-110 transition-all duration-200 h-full object-cover w-full" v-if="template.image_url"
:src="template.image_url" alt="" width="450px"
/>
</div>
<p

View File

@ -0,0 +1,21 @@
import { joinURL } from 'ufo'
import { createOperationsGenerator } from '#image'
const operationsGenerator = createOperationsGenerator()
export const getImage = (
src,
{ modifiers = {}, baseURL } = {}
) => {
if (!baseURL) {
// also support runtime config
baseURL = useRuntimeConfig().public.siteUrl
}
const operations = operationsGenerator(modifiers)
return {
url: joinURL(baseURL, src + (operations ? '?' + operations : '')),
}
}

View File

@ -64,8 +64,17 @@ export default defineNuxtConfig({
}
}
},
image: {
image: runtimeConfig.public.useDummyImageProvider ? {
provider: 'dummy',
providers: {
dummy: {
provider: '~/lib/dummy-image-provider.js',
}
}
} :{
quality: 95,
format: 'webp',
domains: ['images.unsplash.com']
},
sourcemap: true,
vite: {

View File

@ -32,9 +32,9 @@
<section class="pt-12 bg-gray-50 sm:pt-16 border-b pb-[250px] relative">
<div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
<div class="flex flex-col items-center justify-center max-w-4xl gap-8 mx-auto md:gap-12 md:flex-row">
<div class="aspect-[4/3] shrink-0 rounded-lg shadow-sm overflow-hidden group max-w-xs">
<img class="object-cover w-full h-full transition-all duration-200 group-hover:scale-110"
:src="template.image_url" alt="Template cover image"
<div class="aspect-[4/3] shrink-0 rounded-lg shadow-sm overflow-hidden group max-w-sm">
<NuxtImg class="object-cover w-full transition-all duration-200 group-hover:scale-110 h-[240px]"
:src="template.image_url" alt="Template cover image" width="500px" height="380px"
/>
</div>

View File

@ -12,6 +12,7 @@ export default {
s3Enabled: process.env.NUXT_PUBLIC_S3_ENABLED || false,
paidPlansEnabled: process.env.NUXT_PUBLIC_PAID_PLANS_ENABLED || false,
customDomainsEnabled: process.env.NUXT_PUBLIC_CUSTOM_DOMAINS_ENABLED || false,
useDummyImageProvider: process.env.NUXT_PUBLIC_IMAGE_OPTIMIZATION_DISABLED || false,
// Config within public will be also exposed to the client
SENTRY_DSN_PUBLIC: process.env.SENTRY_DSN_PUBLIC,

View File

@ -7,10 +7,9 @@ nvm use 20
cd /app/nuxt/server/
. /app/client/.env
[ "x$NUXT_API_SECRET" != "x" ] || generate-api-secret.sh
sed 's/^/export /' < /app/.nuxt.env > env.sh
. env.sh
eval $(sed 's/^/export /' < /app/client/.env)
node index.mjs