Add HeroImage component (#81)

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "build": "vite-ssg build",
     "dev": "TAILWIND_MODE=watch vite --port 3333 --open",
+    "lens": "lens",
     "lint": "eslint .",
     "preview": "vite preview",
     "preview-https": "serve dist",
@@ -60,6 +61,7 @@
     "vue-router": "4.0.16"
   },
   "devDependencies": {
+    "@tidaltheory/lens": "0.4.0",
     "@typescript-eslint/eslint-plugin": "5.30.3",
     "@typescript-eslint/parser": "5.30.3",
     "@vitejs/plugin-vue": "2.3.3",

src/components/HeroImage.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+function reveal(event: any) {
+	;(event.target as HTMLElement).classList.toggle('opacity-0')
+}
+</script>
+
+<template>
+	<picture>
+		<source
+			srcset="/cosmos-v.ea9ba4ce.avif"
+			type="image/avif"
+			media="(min-width: 768px)"
+		/>
+		<source
+			srcset="/cosmos-v.ea9ba4ce.webp"
+			type="image/webp"
+			media="(min-width: 768px)"
+		/>
+		<source
+			srcset="/cosmos-v.ea9ba4ce.jpg"
+			type="image/jpeg"
+			media="(min-width: 768px)"
+		/>
+		<source srcset="/cosmos-h.69935d14.avif" type="image/avif" />
+		<source srcset="/cosmos-h.69935d14.webp" type="image/webp" />
+		<img
+			class="h-full max-h-full w-full object-cover opacity-0"
+			src="/cosmos-h.69935d14.jpg"
+			loading="lazy"
+			decoding="async"
+			@load.once="reveal"
+		/>
+	</picture>
+</template>

src/layouts/default.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import HeroImage from '~/components/HeroImage.vue'
 import SlugblasterText from '~/components/SlugblasterText.vue'
 </script>
 
@@ -10,9 +11,10 @@ import SlugblasterText from '~/components/SlugblasterText.vue'
 		<router-view />
 		<div class="relative row-start-1 md:col-start-2">
 			<div
-				class="sticky top-0 h-full bg-black bg-cover bg-right"
-				:class="$style.image"
-			></div>
+				class="sticky top-0 h-full bg-black bg-cover bg-right md:h-screen"
+			>
+				<hero-image class="opacity-90" />
+			</div>
 		</div>
 
 		<div class="fixed -top-[13vw] w-full">
@@ -32,8 +34,4 @@ import SlugblasterText from '~/components/SlugblasterText.vue'
 	grid-template-rows: 25vh auto;
 	@apply md:grid-rows-1;
 }
-
-.image {
-	background-image: url('/cosmos.jpg');
-}
 </style>