Skip to content

Commit a31a615

Browse files
Nick-MazukNick-Mazuk
committed
fix image issues in production
1 parent fc4cb5f commit a31a615

4 files changed

Lines changed: 102 additions & 26 deletions

File tree

‎src/lib/components/home/feature.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
<script lang="ts">
22
import { onDestroy, onMount } from 'svelte'
33
import Image from '../image.svelte'
4+
import type { ImageSource } from '../../lib/images'
45
56
export let title: string
67
export let description: string
78
export let reversed = false
8-
export let images: string[]
9+
export let images: ImageSource[]
910
1011
let currentImage = 0
1112
let interval: NodeJS.Timeout | undefined
@@ -41,7 +42,6 @@
4142
{#each images as image, index}
4243
<Image
4344
source="{image}"
44-
width="{1200}"
4545
alt=""
4646
class="absolute w-full h-full object-cover {transitionClasses} {index ===
4747
currentImage

‎src/lib/components/image.svelte‎

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,15 @@
11
<script lang="ts">
2-
import { onMount } from 'svelte'
2+
import type { ImageSource } from '../lib/images'
3+
import { images } from '../lib/images'
34
4-
export let source: string
5+
export let source: ImageSource
56
let classes = ''
67
export { classes as class }
78
export let alt: string
8-
export let width: number
9-
10-
let sourceOriginal: string
11-
let sourceWebp: string
12-
let sourceAvif: string
13-
onMount(async () => {
14-
sourceOriginal = (await import(`../assets/images/${source}.png?w=${width}`)).default
15-
sourceWebp = (await import(`../assets/images/${source}.png?webp&w=${width}`)).default
16-
sourceAvif = (await import(`../assets/images/${source}.png?avif&w=${width}`)).default
17-
})
189
</script>
1910

2011
<picture>
21-
<source srcset="{sourceAvif}" type="image/avif" />
22-
<source srcset="{sourceWebp}" type="image/webp" />
23-
<img src="{sourceOriginal}" alt="{alt}" class="{classes}" loading="lazy" />
12+
<source srcset="{images[source].avif}" type="image/avif" />
13+
<source srcset="{images[source].webp}" type="image/webp" />
14+
<img src="{images[source].png}" alt="{alt}" class="{classes}" loading="lazy" />
2415
</picture>

‎src/lib/lib/images.ts‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import indeterminateClusters from '$lib/assets/images/indeterminate-clusters.png?width=1200'
2+
import indeterminateClustersWebp from '$lib/assets/images/indeterminate-clusters.png?webp&width=1200'
3+
import indeterminateClustersAvif from '$lib/assets/images/indeterminate-clusters.png?avif&width=1200'
4+
import jeteHarmonic from '$lib/assets/images/jete-harmonic.png?width=1200'
5+
import jeteHarmonicWebp from '$lib/assets/images/jete-harmonic.png?webp&width=1200'
6+
import jeteHarmonicAvif from '$lib/assets/images/jete-harmonic.png?avif&width=1200'
7+
import hairpinsBefore from '$lib/assets/images/hairpins-before.png?width=1200'
8+
import hairpinsBeforeWebp from '$lib/assets/images/hairpins-before.png?webp&width=1200'
9+
import hairpinsBeforeAvif from '$lib/assets/images/hairpins-before.png?avif&width=1200'
10+
import hairpinsAfter from '$lib/assets/images/hairpins-after.png?width=1200'
11+
import hairpinsAfterWebp from '$lib/assets/images/hairpins-after.png?webp&width=1200'
12+
import hairpinsAfterAvif from '$lib/assets/images/hairpins-after.png?avif&width=1200'
13+
import tempoRestBefore from '$lib/assets/images/tempo-multimeasure-rest-before.png?width=1200'
14+
import tempoRestBeforeWebp from '$lib/assets/images/tempo-multimeasure-rest-before.png?webp&width=1200'
15+
import tempoRestBeforeAvif from '$lib/assets/images/tempo-multimeasure-rest-before.png?avif&width=1200'
16+
import tempoRestAfter from '$lib/assets/images/tempo-multimeasure-rest-after.png?width=1200'
17+
import tempoRestAfterWebp from '$lib/assets/images/tempo-multimeasure-rest-after.png?webp&width=1200'
18+
import tempoRestAfterAvif from '$lib/assets/images/tempo-multimeasure-rest-after.png?avif&width=1200'
19+
import measureNumberBefore from '$lib/assets/images/measure-number-before.png?width=1200'
20+
import measureNumberBeforeWebp from '$lib/assets/images/measure-number-before.png?webp&width=1200'
21+
import measureNumberBeforeAvif from '$lib/assets/images/measure-number-before.png?avif&width=1200'
22+
import measureNumberAfter from '$lib/assets/images/measure-number-after.png?width=1200'
23+
import measureNumberAfterWebp from '$lib/assets/images/measure-number-after.png?webp&width=1200'
24+
import measureNumberAfterAvif from '$lib/assets/images/measure-number-after.png?avif&width=1200'
25+
import duplicateArticulationBefore from '$lib/assets/images/duplicate-articulation-before.png?width=1200'
26+
import duplicateArticulationBeforeWebp from '$lib/assets/images/duplicate-articulation-before.png?webp&width=1200'
27+
import duplicateArticulationBeforeAvif from '$lib/assets/images/duplicate-articulation-before.png?avif&width=1200'
28+
import duplicateArticulationAfter from '$lib/assets/images/duplicate-articulation-after.png?width=1200'
29+
import duplicateArticulationAfterWebp from '$lib/assets/images/duplicate-articulation-after.png?webp&width=1200'
30+
import duplicateArticulationAfterAvif from '$lib/assets/images/duplicate-articulation-after.png?avif&width=1200'
31+
32+
export const images = {
33+
indeterminateClusters: {
34+
png: indeterminateClusters,
35+
webp: indeterminateClustersWebp,
36+
avif: indeterminateClustersAvif,
37+
},
38+
jeteHarmonic: {
39+
png: jeteHarmonic,
40+
webp: jeteHarmonicWebp,
41+
avif: jeteHarmonicAvif,
42+
},
43+
hairpinsBefore: {
44+
png: hairpinsBefore,
45+
webp: hairpinsBeforeWebp,
46+
avif: hairpinsBeforeAvif,
47+
},
48+
hairpinsAfter: {
49+
png: hairpinsAfter,
50+
webp: hairpinsAfterWebp,
51+
avif: hairpinsAfterAvif,
52+
},
53+
tempoRestBefore: {
54+
png: tempoRestBefore,
55+
webp: tempoRestBeforeWebp,
56+
avif: tempoRestBeforeAvif,
57+
},
58+
tempoRestAfter: {
59+
png: tempoRestAfter,
60+
webp: tempoRestAfterWebp,
61+
avif: tempoRestAfterAvif,
62+
},
63+
measureNumberBefore: {
64+
png: measureNumberBefore,
65+
webp: measureNumberBeforeWebp,
66+
avif: measureNumberBeforeAvif,
67+
},
68+
measureNumberAfter: {
69+
png: measureNumberAfter,
70+
webp: measureNumberAfterWebp,
71+
avif: measureNumberAfterAvif,
72+
},
73+
duplicateArticulationBefore: {
74+
png: duplicateArticulationBefore,
75+
webp: duplicateArticulationBeforeWebp,
76+
avif: duplicateArticulationBeforeAvif,
77+
},
78+
duplicateArticulationAfter: {
79+
png: duplicateArticulationAfter,
80+
webp: duplicateArticulationAfterWebp,
81+
avif: duplicateArticulationAfterAvif,
82+
},
83+
} as const
84+
85+
export type ImageSource = keyof typeof images

‎src/routes/index.svelte‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
class="relative rounded-xl shadow-xl -mt-64 z-10 aspect-w-2 aspect-h-1 w-full overflow-hidden"
4949
>
5050
<Image
51-
source="indeterminate-clusters"
51+
source="indeterminateClusters"
5252
alt=""
5353
width="{1600}"
5454
class="absolute w-full h-full object-cover"
@@ -58,25 +58,25 @@
5858
<Feature
5959
title="Create advanced notation in a second"
6060
description="String harmonics, jeté, and microtonal transpositions are notoriously difficult in Finale. Now, create this advanced notation in just a second. Literally."
61-
images="{['jete-harmonic']}"
61+
images="{['jeteHarmonic']}"
6262
/>
6363
<Feature
6464
reversed
6565
title="Fix those annoying Finale bugs"
6666
description="No more colliding hairpins and dynamics. No more manually adjusting measure numbers. No more tempo marks that are wider than the multimeasure rest. Fix each of these in just one click."
6767
images="{[
68-
'hairpins-before',
69-
'hairpins-after',
70-
'tempo-multimeasure-rest-before',
71-
'tempo-multimeasure-rest-after',
72-
'measure-number-before',
73-
'measure-number-after',
68+
'hairpinsBefore',
69+
'hairpinsAfter',
70+
'tempoRestBefore',
71+
'tempoRestAfter',
72+
'measureNumberBefore',
73+
'measureNumberAfter',
7474
]}"
7575
/>
7676
<Feature
7777
title="…and do so much more"
7878
description="JW Lua hooks directly into Finale. That means you can do almost anything with JW Lua—fix playback, generate parts, or even see how many notes you wrote. Anything is possible! And as more people write JW Lua scripts, we all benefit."
79-
images="{['duplicate-articulation-before', 'duplicate-articulation-after']}"
79+
images="{['duplicateArticulationBefore', 'duplicateArticulationAfter']}"
8080
/>
8181
</div>
8282
<section class="py-16 bg-primary text-background dark:text-foreground">

0 commit comments

Comments
 (0)