feat(changelog): quality improvement

changelogs/enhanced-screenshot-quality/index.mdx

@@ -0,0 +1,18 @@
+---
+title: "Enhanced Screenshot Quality: Crisp, Clear, and Fast"
+description: Experience Argos' improved screenshot quality with lossless PNG, sharp rendering, and fast AVIF compression for superior visual testing.
+slug: enhanced-screenshot-quality
+date: 2024-06-13
+---
+
+![Before and after quality improvements](/assets/changelogs/enhanced-screenshot-quality/quality-comparison.png)
+
+We are excited to announce major improvements to the quality of screenshots in Argos, ensuring your visual testing results are clearer and more accessible than ever.
+
+### Key Enhancements
+
+- **Lossless PNG Compression:** Preserve the highest quality and detail in your screenshots with no artifacts.
+- **Sharp Display:** Using [`image-rendering: pixelated`](https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering) at 1.5x zoom level for clear visuals even when zoomed in.
+- **Fast Rendering with AVIF:** Optimized images for fast loading and efficient rendering without compromising quality.
+
+Experience the difference in screenshot quality today and elevate your visual testing with Argos.

components/Zoom.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import mediumZoom from "medium-zoom";
+import * as React from "react";
+
+export function Zoom(props: { children: React.ReactElement }) {
+  const ref = React.useRef<HTMLImageElement>(null);
+
+  React.useEffect(() => {
+    if (ref.current) {
+      mediumZoom(ref.current, {
+        margin: 24,
+        background: "rgba(0, 0, 0, 0.9)",
+      });
+    }
+  }, []);
+
+  return React.cloneElement(props.children, { ref });
+}

lib/changelog-api.tsx

@@ -10,6 +10,8 @@ import remarkFrontmatter from "remark-frontmatter";
 import remarkGfm from "remark-gfm";
 import { z } from "zod";
 
+import { Zoom } from "@/components/Zoom";
+
 const FrontmatterSchema = z.object({
   title: z.string(),
   description: z.string(),
@@ -45,14 +47,16 @@ export async function getDocMdxSource(filepath: string) {
     components: {
       img: ({ src, height, width, alt }) => {
         return (
-          <Image
-            className="rounded-md"
-            src={src as string}
-            height={height as number}
-            width={width as number}
-            alt={alt as string}
-            sizes="(max-width: 576px) 100vw, 576px"
-          />
+          <Zoom>
+            <Image
+              className="rounded-md"
+              src={src as string}
+              height={height as number}
+              width={width as number}
+              alt={alt as string}
+              sizes="(max-width: 576px) 100vw, 576px"
+            />
+          </Zoom>
         );
       },
     },

package.json

@@ -29,6 +29,7 @@
     "framer-motion": "^11.2.6",
     "gray-matter": "^4.0.3",
     "lucide-react": "^0.379.0",
+    "medium-zoom": "^1.1.0",
     "next": "^14.2.3",
     "next-mdx-remote": "^4.4.1",
     "next-plausible": "^3.12.0",