feat(Docs) Lightbox for images

Author: sergical

app/globals.css

@@ -180,3 +180,62 @@ body {
   content: "Step " counter(onboarding-step) ": ";
   font-weight: inherit;
 }
+
+/* Lightbox animations */
+@keyframes dialog-content-show {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes dialog-content-hide {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+}
+
+@keyframes dialog-overlay-show {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes dialog-overlay-hide {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* Target only image lightbox dialog content */
+.image-lightbox-content[data-state="open"] {
+  animation: dialog-content-show 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.image-lightbox-content[data-state="closed"] {
+  animation: dialog-content-hide 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Target only image lightbox dialog overlay */
+.image-lightbox-overlay[data-state="open"] {
+  animation: dialog-overlay-show 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.image-lightbox-overlay[data-state="closed"] {
+  animation: dialog-overlay-hide 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}

next.config.ts

@@ -52,6 +52,9 @@ if (
 const nextConfig = {
   pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx', 'mdx'],
   trailingSlash: true,
+  images: {
+    contentDispositionType: 'inline', // "open image in new tab" instead of downloading
+  },
   serverExternalPackages: ['rehype-preset-minify'],
   outputFileTracingExcludes,
   webpack: (config, options) => {
@@ -71,7 +74,7 @@ const nextConfig = {
     DEVELOPER_DOCS_: process.env.NEXT_PUBLIC_DEVELOPER_DOCS,
   },
   redirects,
-  rewrites: async () => [
+  rewrites: () => [
     {
       source: '/:path*.md',
       destination: '/md-exports/:path*.md',

package.json

@@ -49,6 +49,7 @@
     "@popperjs/core": "^2.11.8",
     "@prettier/plugin-xml": "^3.3.1",
     "@radix-ui/colors": "^3.0.0",
+    "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-icons": "^1.3.2",