deployn/astro-deploy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: use image optimization for Directus

Browse Source
This commit is contained in:
Jewgeni Lewash 2024-03-05 22:49:42 +01:00
parent 9e7cbd144f
commit 5cb2237187
2 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
astro.config.mjs
View File

@ -6,10 +6,14 @@ import sitemap from '@astrojs/sitemap';
import tailwind from '@astrojs/tailwind'; import tailwind from '@astrojs/tailwind';
import icon from 'astro-icon'; import icon from 'astro-icon';
const SITE_URL = process.env.SITE_URL || 'https://astro.deployn.de'; const SITE_URL = process.env.SITE_URL || 'https://astro.deployn.de';
const DIRECTUS_URL = process.env.DIRECTUS_URL || 'https://directus.astro.deployn.de';
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
site: SITE_URL, site: SITE_URL,
image: {
domains: [DIRECTUS_URL.replace('https://', '')],
},
integrations: [ integrations: [
alpinejs(), alpinejs(),
icon(), icon(),

7
src/pages/recipes.astro
View File

@ -2,6 +2,8 @@
import directus from '@/lib/directus.ts'; import directus from '@/lib/directus.ts';
import { readItems } from '@directus/sdk'; import { readItems } from '@directus/sdk';
import { Image } from 'astro:assets';
const DIRECTUS_URL = process.env.DIRECTUS_URL || 'https://directus.astro.deployn.de'; const DIRECTUS_URL = process.env.DIRECTUS_URL || 'https://directus.astro.deployn.de';
import BaseLayout from '@/layouts/BaseLayout.astro'; import BaseLayout from '@/layouts/BaseLayout.astro';
@ -26,9 +28,10 @@ const recipes = await directus.request(
{ {
recipes.map((recipe) => ( recipes.map((recipe) => (
<li class="overflow-hidden rounded-lg bg-white shadow dark:bg-zinc-800"> <li class="overflow-hidden rounded-lg bg-white shadow dark:bg-zinc-800">
<img <Image
class="h-48 w-full object-cover" class="h-48 w-full object-cover"
src={`${DIRECTUS_URL}/assets/${recipe.image}?width=250`} src={`${DIRECTUS_URL}/assets/${recipe.image}`}
inferSize
alt={recipe.name} alt={recipe.name}
/> />
<div class="p-6"> <div class="p-6">