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:
parent
2274bd1abd
commit
cf32ba22f7
|
@ -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
|
||||
|
|
|
@ -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=
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 : '')),
|
||||
}
|
||||
}
|
|
@ -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: {
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue