Optimize images with parcel
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

This commit is contained in:
Isaac Mills 2025-07-15 08:27:30 -06:00
parent 6d2c248f6e
commit 7b78e54571
Signed by: fnmain
GPG key ID: B67D7410F33A0F61
8 changed files with 277 additions and 12 deletions

10
src/components/img.html Normal file
View file

@ -0,0 +1,10 @@
<script props>
module.exports = {
src: props.src
}
</script>
<picture>
<source srcset="{{src}}?as=avif" type="image/avif" />
<source srcset="{{src}}?as=webp" type="image/webp" />
<img src="{{src}}" attributes />
</picture>

View file

@ -10,7 +10,7 @@
<a href="/src/who_we_are.html#{{person}}" hx-get="/partials/who_we_are.html" hx-push-url="/who_we_are.html#{{person}}"
hx-swap="innerHtml show:#{{person}}:top">
<div class="figure">
<img src="/assets/{{person}}.jpg" class="person">
<x-img src="/assets/{{person}}.jpg" class="person">
</div>
</a>
<svg height="4rem" width="4rem" viewBox="0 0 4 4" style="min-width: 4rem;">

View file

@ -17,7 +17,7 @@
</x-interest>
<x-interest class="project-alt" person="richard">
<fill:img>
<img src="/assets/dancerush.png">
<x-img src="/assets/dancerush.png">
</fill:img>
<fill:title>
<markdown>
@ -37,7 +37,7 @@
</x-interest>
<x-interest person="tyson">
<fill:img>
<img src="/assets/rimworld.jpg">
<x-img src="/assets/rimworld.jpg">
</fill:img>
<fill:title>
<markdown>
@ -69,7 +69,7 @@
</x-interest>
<x-interest person="tyson">
<fill:img>
<img src="/assets/h1000.webp">
<x-img src="/assets/h1000.webp">
</fill:img>
<fill:title>
<markdown>
@ -95,7 +95,7 @@
</x-interest>
<x-interest class="project-alt" person="isaac">
<fill:person>
<img src="/assets/isaac.jpg" class="person">
<x-img src="/assets/isaac.jpg" class="person">
</fill:person>
<fill:description>
<markdown>

View file

@ -6,7 +6,7 @@
</x-section-head>
<x-project id="richard">
<fill:img>
<img src="/assets/richard.jpg" class="person">
<x-img src="/assets/richard.jpg" class="person">
</fill:img>
<fill:title>
<markdown>
@ -38,7 +38,7 @@
</x-project>
<x-project class="project-alt" id="tyson">
<fill:img>
<img src="/assets/tyson.jpg" class="person">
<x-img src="/assets/tyson.jpg" class="person">
</fill:img>
<fill:title>
<markdown>
@ -70,7 +70,7 @@
</x-project>
<x-project id="gunnar">
<fill:img>
<img src="/assets/gunnar.jpg" class="person">
<x-img src="/assets/gunnar.jpg" class="person">
</fill:img>
<fill:title>
<markdown>
@ -108,7 +108,7 @@
</x-project>
<x-project class="project-alt" id="khayden">
<fill:img>
<img src="/assets/khayden.jpg" class="person">
<x-img src="/assets/khayden.jpg" class="person">
</fill:img>
<fill:title>
<markdown>
@ -138,7 +138,7 @@
</x-project>
<x-project id="isaac">
<fill:img>
<img src="/assets/isaac.jpg" class="person">
<x-img src="/assets/isaac.jpg" class="person">
</fill:img>
<fill:title>
<markdown>

View file

@ -236,7 +236,10 @@ blockquote {
}
.figure {
&>* {
img,
p,
svg {
width: 80%;
}