Added responsive images func to link previews with Picture

.gitignore

@@ -2,6 +2,9 @@
 dist/
 .output/
 
+# generated images
+public/images/
+
 # dependencies
 node_modules/
 

generate-images.js

@@ -11,7 +11,7 @@ const path = require("path");
   fs.readdir(inputDir, (_, files) => {
     files.forEach((file) => {
       Image(`${inputDir}/${file}`, {
-        widths: [300],
+        widths: [320, 640, 960, 1280],
         formats: ["avif", "webp", "jpeg"],
         outputDir,
         filenameFormat: (_, src, width, format) => {

src/components/Anchor.tsx

@@ -4,21 +4,25 @@ interface AnchorProps {
   href: string;
   font?: "sans" | "serif";
   size?: "small" | "base" | "large";
+  img?: string;
+  imgAlt?: string;
   children: React.ReactNode;
 }
 
 export function Anchor({
   href,
   font = "serif",
   size = "base",
+  img,
+  imgAlt,
   children,
 }: AnchorProps) {
   const [previewOpen, setPreviewOpen] = useState(false);
 
   return (
     <span
-      onMouseEnter={() => setPreviewOpen(true)}
-      onMouseLeave={() => setPreviewOpen(false)}
+      onMouseEnter={() => img && setPreviewOpen(true)}
+      onMouseLeave={() => img && setPreviewOpen(false)}
       className="relative"
     >
       <a
@@ -32,12 +36,31 @@ export function Anchor({
         {children}
       </a>
       {previewOpen ? (
-        <div className="absolute left-1/2 -top-200 -translate-x-1/2 -translate-y-16 bg-white h-200 aspect-video rounded-8 shadow-2xl p-4">
-          <img
-            src="/meta-image.jpg"
-            alt="test"
-            className="w-full h-full rounded-4"
-          />
+        <div className="absolute left-1/2 -top-200 -translate-x-1/2 -translate-y-16 bg-white w-320 aspect-video rounded-8 shadow-2xl p-4">
+          <picture>
+            <source
+              type="image/avif"
+              srcSet={`/images/${img}-320w.avif 320w, /images/${img}-640w.avif 640w, /images/${img}-960w.avif 960w, /images/${img}-1280w.avif 1280w`}
+              sizes="320px"
+            />
+            <source
+              type="image/webp"
+              srcSet={`/images/${img}-320w.webp 320w, /images/${img}-640w.webp 640w, /images/${img}-960w.webp 960w, /images/${img}-1280w.webp 1280w`}
+              sizes="320px"
+            />
+            <source
+              type="image/jpeg"
+              srcSet={`/images/${img}-320w.jpeg 320w, /images/${img}-640w.jpeg 640w, /images/${img}-960w.jpeg 960w, /images/${img}-1280w.jpeg 1280w`}
+              sizes="320px"
+            />
+            <img
+              src={`/images/${img}-320w.jpeg`}
+              alt={imgAlt}
+              loading="lazy"
+              decoding="async"
+              className="w-320 aspect-video object-cover"
+            />
+          </picture>
         </div>
       ) : null}
     </span>

src/components/Content.astro

@@ -18,10 +18,24 @@ import { SpotifyWidget } from "./SpotifyWidget";
     <Text>
       I am a <Span>SOFTWARE ENGINEER</Span> and <Span>DESIGNER</Span> passionate
       about building beautiful experiences on the web. I sometimes also do some freelance
-      work on the side, such as for <Anchor href="">WTH 2021</Anchor>
-      and <Anchor href="" client:only="react">SUTD MC</Anchor>. Outside of work,
-      I am a hobbyist
-      <Anchor href="">PHOTOGRAPHER</Anchor> and an absolute fan of good food.
+      work on the side, such as for <Anchor
+        href=""
+        img="test-image-1"
+        imgAlt="test image 1"
+        client:only="react">WTH 2021</Anchor
+      >
+      and <Anchor
+        href=""
+        img="test-image-2"
+        imgAlt="test image 2"
+        client:only="react">SUTD MC</Anchor
+      >. Outside of work, I am a hobbyist
+      <Anchor
+        href=""
+        img="test-image-3"
+        imgAlt="test image 3"
+        client:only="react">PHOTOGRAPHER</Anchor
+      > and an absolute fan of good food.
     </Text>
     <div class="flex flex-col space-y-20">
       <div class="flex space-x-12">