refactor(docs): update video cover

Also adds responsive-loader support for images.

12 files changed, 331 insertions, 168 deletions

diff --git a/subprojects/docs/package.json b/subprojects/docs/package.json
index d928c5b1..853e3e46 100644
--- a/subprojects/docs/package.json
+++ b/subprojects/docs/package.json
@@ -49,6 +49,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "remark-smartypants": "^2.1.0",
+    "responsive-loader": "^3.1.2",
+    "sharp": "^0.33.3",
     "swc-loader": "^0.2.6",
     "terser-webpack-plugin": "^5.3.10",
     "unified": "^11.0.4",
diff --git a/subprojects/docs/src/components/Video/cover-background.png b/subprojects/docs/src/components/Video/cover-background.png
new file mode 100644
index 00000000..11369ae3
--- /dev/null
+++ b/subprojects/docs/src/components/Video/cover-background.png
diff --git a/subprojects/docs/src/components/Video/cover-background.png.license b/subprojects/docs/src/components/Video/cover-background.png.license
new file mode 100644
index 00000000..50ad65f2
--- /dev/null
+++ b/subprojects/docs/src/components/Video/cover-background.png.license
@@ -0,0 +1,9 @@
+SPDX-FileCopyrightText: 2024 The Refinery Authors <https://refinery.tools/>
+
+SPDX-License-Identifier: EPL-2.0
+
+Modified image based on "Low Angle Shot of Manufacturing Plant under Blue Sky"
+available under the CC-1.0 license at
+https://www.pexels.com/photo/low-angle-shot-of-manufacturing-plant-under-blue-sky-257700/
+Original image "Bulgaria, Vratsa, Abandoned image. Free for use." by "2427999" also available at
+https://pixabay.com/photos/bulgaria-vratsa-abandoned-industry-1351947/
diff --git a/subprojects/docs/src/components/Video/cover.svg b/subprojects/docs/src/components/Video/cover.svg
new file mode 100644
index 00000000..b263c8b3
--- /dev/null
+++ b/subprojects/docs/src/components/Video/cover.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720"><path fill="#fff" fill-opacity=".4" d="M0 95h1280v530H0z"/><path class="videocolor" fill-opacity=".702" d="M0 171h1205v378H0z"/><path fill="#CA1243" d="M1261 95h19v530h-19z"/><path class="videocolor" d="M0 171h19v378H0z"/><g class="videotitle"><path fill-rule="evenodd" d="M1143 387.09v26.293c-69.4 3.985-192.57 26.695-256 95.615v-31.074c64.343-63.744 180.16-88.046 256-90.834M887 211c55.152 64.14 162.7 91.63 256 98.004V335.3c-93.3 6.374-200.85 33.866-256 98.003v-30.676c22.983-34.262 96.979-66.532 153.51-80.476-56.535-13.944-130.53-46.214-153.51-80.475z"/><text font-size="72" font-weight="800" transform="translate(31 439)">Video</text><text font-size="72" font-weight="800" transform="translate(31 525)">introduction</text></g><path class="videoplay" fill-rule="evenodd" d="M593.12 284.23v151.53l131.07-75.765zm46.879-85.227c88.918 0 161 72.082 161 161s-72.082 161-161 161-161-72.082-161-161 72.082-161 161-161"/></svg>
diff --git a/subprojects/docs/src/components/Video/cover.svg.license b/subprojects/docs/src/components/Video/cover.svg.license
new file mode 100644
index 00000000..b80566a0
--- /dev/null
+++ b/subprojects/docs/src/components/Video/cover.svg.license
@@ -0,0 +1,3 @@
+SPDX-FileCopyrightText: 2024 The Refinery Authors <https://refinery.tools/>
+
+SPDX-License-Identifier: EPL-2.0
diff --git a/subprojects/docs/src/components/Video/index.module.css b/subprojects/docs/src/components/Video/index.module.css
new file mode 100644
index 00000000..209c5d64
--- /dev/null
+++ b/subprojects/docs/src/components/Video/index.module.css
@@ -0,0 +1,75 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The Refinery Authors
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+:global(.videocolor) {
+  fill: var(--ifm-color-primary);
+}
+
+[data-theme='dark'] :global(.videocolor) {
+  fill: var(--ifm-color-primary-darker);
+}
+
+.video__container {
+  position: relative;
+  width: 100%;
+  height: auto;
+  aspect-ratio: 560/315;
+  box-shadow: var(--ifm-global-shadow-lw);
+  transition: box-shadow var(--ifm-button-transition-duration) var(--ifm-transition-timing-default);
+}
+
+.video__container:hover,
+.video__container:focus-within {
+  box-shadow: var(--ifm-global-shadow-md);
+}
+
+.video,
+.video__button,
+.video__image,
+.video__svg,
+.video__svg > svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.video__svg text {
+  font-family: var(--ifm-font-family-base);
+}
+
+.video__button {
+  margin: 0;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+  background-size: cover;
+}
+
+.video__cover {
+  z-index: 1;
+}
+
+:global(.videoplay) {
+  fill: rgb(255 255 255 / 40%);
+  transition: fill var(--ifm-button-transition-duration) var(--ifm-transition-timing-default);
+}
+
+.video__container:hover :global(.videoplay),
+.video__container:focus-within :global(.videoplay) {
+  fill: rgb(255 255 255 / 70%);
+}
+
+:global(.videotitle) * {
+  fill: #303846;
+  transition: fill var(--ifm-button-transition-duration) var(--ifm-transition-timing-default);
+}
+
+.video__container:hover :global(.videotitle) *,
+.video__container:focus-within :global(.videotitle) * {
+  fill: #21252b;
+}
diff --git a/subprojects/docs/src/components/Video/index.tsx b/subprojects/docs/src/components/Video/index.tsx
new file mode 100644
index 00000000..bd36eaa4
--- /dev/null
+++ b/subprojects/docs/src/components/Video/index.tsx
@@ -0,0 +1,62 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The Refinery Authors
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import { useState } from 'react';
+
+import coverBackground from './cover-background.png?sizes[]=1920&sizes[]=1288&sizes[]=1108&&sizes[]=644&sizes[]=322&placeholder=true&rl';
+import Cover from './cover.svg';
+import styles from './index.module.css';
+
+export default function Video() {
+  const [started, setStarted] = useState(false);
+  return (
+    <>
+      <h2 className="sr-only">Check out the intro video</h2>
+      <div className="container">
+        <div className={styles['video__container']}>
+          {started ? (
+            <iframe
+              width="560"
+              height="315"
+              src="https://www.youtube-nocookie.com/embed/Qy_3udNsWsM?autoplay=1"
+              title="YouTube video player"
+              frameBorder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              referrerPolicy="strict-origin-when-cross-origin"
+              allowFullScreen
+              className={styles['video']}
+            />
+          ) : (
+            <button
+              type="button"
+              aria-label="Video introduction"
+              title="Play video (requires acceping cookies from YouTube)"
+              onClick={() => setStarted(true)}
+              className={styles['video__button']}
+              style={{
+                backgroundImage: `url("${coverBackground.placeholder}")`,
+              }}
+            >
+              <img
+                alt=""
+                src={coverBackground.src}
+                srcSet={coverBackground.srcSet}
+                width={coverBackground.width}
+                height={coverBackground.height}
+                sizes="(min-width: 1440px) 1288px, (min-width: 1140px) 1108px, calc(100vw - 32px)"
+                loading="lazy"
+                className={styles['video__image']}
+              />
+              <div className={styles['video__svg']}>
+                <Cover />
+              </div>
+            </button>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/subprojects/docs/src/pages/index.tsx b/subprojects/docs/src/pages/index.tsx
index 7caf5727..6b65c32b 100644
--- a/subprojects/docs/src/pages/index.tsx
+++ b/subprojects/docs/src/pages/index.tsx
@@ -7,12 +7,11 @@
 import Link from '@docusaurus/Link';
 import Layout from '@theme/Layout';
 import clsx from 'clsx';
-import { useState } from 'react';
 
 import styles from './index.module.css';
-import videoCover from './video-cover.webp?url';
 
 import Features from '@site/src/components/Features';
+import Video from '@site/src/components/Video';
 
 function Hero() {
   return (
@@ -62,52 +61,6 @@ function Hero() {
   );
 }
 
-function Video() {
-  const [started, setStarted] = useState(false);
-  return (
-    <section className={clsx(styles['section'], styles['section--video'])}>
-      <h2 className="sr-only">Check out the intro video</h2>
-      <div className="container">
-        <div className={styles['video__container']}>
-          {started ? (
-            <iframe
-              width="560"
-              height="315"
-              src="https://www.youtube-nocookie.com/embed/Qy_3udNsWsM?autoplay=1"
-              title="YouTube video player"
-              frameBorder="0"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-              referrerPolicy="strict-origin-when-cross-origin"
-              allowFullScreen
-              className={styles['video']}
-            />
-          ) : (
-            <button
-              type="button"
-              title="Play video (requires acceping cookies from YouTube)"
-              onClick={() => setStarted(true)}
-              className={styles['video__button']}
-            >
-              <h2>Modeling with Graphs</h2>
-              <p>
-                Graph based models are widely used in software engineering for
-                systems models, the analysis of data structures, databases, and
-                AI test environments.
-              </p>
-              <p>
-                Testing, benchmarking or design-space exploration scnearios rely
-                on the automated generation of consistent models!
-              </p>
-              <img src={videoCover} alt="" className={styles['video__cover']} />
-              <div className={styles['video__play']} />
-            </button>
-          )}
-        </div>
-      </div>
-    </section>
-  );
-}
-
 function Publication({
   doi,
   pdf,
@@ -153,113 +106,110 @@ Publication.defaultProps = {
 
 function Publications() {
   return (
-    <div className={styles['section']}>
-      <div className="container">
-        <h2 className={styles['section__title']}>Related publications</h2>
-        <div className="row">
-          <div className="col col--6">
-            <h3>Tool demonstration</h3>
-            <ul>
-              <Publication
-                doi="10.1145/3639478.3640045"
-                pdf="pathname:///papers/icse24-demo.pdf"
-                video="https://youtu.be/Qy_3udNsWsM"
-              >
-                K. Marussy, A. Ficsor, O. Semeráth, D. Varró: &ldquo;Refinery:
-                Graph Solver as a Service&rdquo;{' '}
-                <em>ICSE 2024 Demonstrations</em>
-              </Publication>
-            </ul>
-            <h3>Partial model specification language</h3>
-            <ul>
-              <Publication
-                doi="10.5381/jot.2020.19.3.a12"
-                pdf="https://www.jot.fm/issues/issue_2020_03/article12.pdf"
-                video="https://www.youtube.com/watch?v=ggTbv_s5t2A"
-              >
-                K. Marussy, O. Semeráth, A. Babikian, D. Varró:{' '}
-                <em>
-                  A Specification Language for Consistent Model Generation based
-                  on Partial Models.
-                </em>{' '}
-                J. Object Technol. <b>19</b>(3): 3:1-22 (2020)
-              </Publication>
-            </ul>
-            <h3>Diverse and realistic graph generation</h3>
-            <ul>
-              <Publication
-                doi="10.1007/s10009-019-00530-6"
-                pdf="https://link.springer.com/content/pdf/10.1007/s10009-019-00530-6.pdf?pdf=button"
-              >
-                O. Semeráth, R. Farkas, G. Bergmann, D. Varró:{' '}
-                <em>
-                  Diversity of graph models and graph generators in mutation
-                  testing.
-                </em>{' '}
-                Int. J. Softw. Tools Technol. Transf. <b>22</b>(1): 57-78 (2020)
-              </Publication>
-              <Publication
-                doi="10.1007/s10270-021-00884-z"
-                pdf="https://link.springer.com/content/pdf/10.1007/s10270-021-00884-z.pdf?pdf=button"
-              >
-                O. Semeráth, A. Babikian, B. Chen, C. Li, K. Marussy, G.
-                Szárnyas, D. Varró:{' '}
-                <em>
-                  Automated generation of consistent, diverse and structurally
-                  realistic graph models.
-                </em>{' '}
-                Softw. Syst. Model. <b>20</b>(5): 1713-1734 (2021)
-              </Publication>
-            </ul>
-          </div>
-          <div className="col col--6">
-            <h3>Consistent graph generation techniques</h3>
-            <ul>
-              <Publication
-                doi="10.1145/3180155.3180186"
-                pdf="https://dl.acm.org/doi/pdf/10.1145/3180155.3180186"
-              >
-                O. Semeráth, A. Nagy, D. Varró: &ldquo;A graph solver for the
-                automated generation of consistent domain-specific
-                models.&rdquo; <em>ICSE 2018:</em> 969-980
-              </Publication>
-              <Publication
-                doi="10.1109/TSE.2020.3025732"
-                pdf="https://ieeexplore.ieee.org/stamp/stamp.jsp?tp=&arnumber=9201551"
-              >
-                K. Marussy, O. Semeráth, D. Varró:{' '}
-                <em>
-                  Automated Generation of Consistent Graph Models With
-                  Multiplicity Reasoning.
-                </em>{' '}
-                IEEE Trans. Softw. Eng. <b>48</b>(5): 1610-1629 (2022)
-              </Publication>
-              <Publication
-                doi="10.1007/s10270-021-00918-6"
-                pdf="https://link.springer.com/content/pdf/10.1007/s10270-021-00918-6.pdf?pdf=button"
-              >
-                A. Babikian, O. Semeráth, A. Li, K. Marussy, D. Varró:{' '}
-                <em>
-                  Automated generation of consistent models using qualitative
-                  abstractions and exploration strategies.
-                </em>{' '}
-                Softw. Syst. Model. <b>21</b>(5): 1763-1787 (2022)
-              </Publication>
-            </ul>
-            <h3>Correctness proofs</h3>
-            <ul>
-              <Publication
-                doi="10.1007/978-3-319-75396-6_16"
-                pdf="https://inf.mit.bme.hu/sites/default/files/publications/fmhe-model-generation.pdf"
-              >
-                D. Varró, O. Semeráth, G. Szárnyas, Á. Horváth: &ldquo;Towards
-                the Automated Generation of Consistent, Diverse, Scalable and
-                Realistic Graph Models.&rdquo;{' '}
-                <em>Graph Transformation, Specifications, and Nets</em> 2018:
-                285-312
-              </Publication>
-            </ul>
-          </div>
+    <div className="container">
+      <h2 className={styles['section__title']}>Related publications</h2>
+      <div className="row">
+        <div className="col col--6">
+          <h3>Tool demonstration</h3>
+          <ul>
+            <Publication
+              doi="10.1145/3639478.3640045"
+              pdf="pathname:///papers/icse24-demo.pdf"
+              video="https://youtu.be/Qy_3udNsWsM"
+            >
+              K. Marussy, A. Ficsor, O. Semeráth, D. Varró: &ldquo;Refinery:
+              Graph Solver as a Service&rdquo; <em>ICSE 2024 Demonstrations</em>
+            </Publication>
+          </ul>
+          <h3>Partial model specification language</h3>
+          <ul>
+            <Publication
+              doi="10.5381/jot.2020.19.3.a12"
+              pdf="https://www.jot.fm/issues/issue_2020_03/article12.pdf"
+              video="https://www.youtube.com/watch?v=ggTbv_s5t2A"
+            >
+              K. Marussy, O. Semeráth, A. Babikian, D. Varró:{' '}
+              <em>
+                A Specification Language for Consistent Model Generation based
+                on Partial Models.
+              </em>{' '}
+              J. Object Technol. <b>19</b>(3): 3:1-22 (2020)
+            </Publication>
+          </ul>
+          <h3>Diverse and realistic graph generation</h3>
+          <ul>
+            <Publication
+              doi="10.1007/s10009-019-00530-6"
+              pdf="https://link.springer.com/content/pdf/10.1007/s10009-019-00530-6.pdf?pdf=button"
+            >
+              O. Semeráth, R. Farkas, G. Bergmann, D. Varró:{' '}
+              <em>
+                Diversity of graph models and graph generators in mutation
+                testing.
+              </em>{' '}
+              Int. J. Softw. Tools Technol. Transf. <b>22</b>(1): 57-78 (2020)
+            </Publication>
+            <Publication
+              doi="10.1007/s10270-021-00884-z"
+              pdf="https://link.springer.com/content/pdf/10.1007/s10270-021-00884-z.pdf?pdf=button"
+            >
+              O. Semeráth, A. Babikian, B. Chen, C. Li, K. Marussy, G. Szárnyas,
+              D. Varró:{' '}
+              <em>
+                Automated generation of consistent, diverse and structurally
+                realistic graph models.
+              </em>{' '}
+              Softw. Syst. Model. <b>20</b>(5): 1713-1734 (2021)
+            </Publication>
+          </ul>
+        </div>
+        <div className="col col--6">
+          <h3>Consistent graph generation techniques</h3>
+          <ul>
+            <Publication
+              doi="10.1145/3180155.3180186"
+              pdf="https://dl.acm.org/doi/pdf/10.1145/3180155.3180186"
+            >
+              O. Semeráth, A. Nagy, D. Varró: &ldquo;A graph solver for the
+              automated generation of consistent domain-specific models.&rdquo;{' '}
+              <em>ICSE 2018:</em> 969-980
+            </Publication>
+            <Publication
+              doi="10.1109/TSE.2020.3025732"
+              pdf="https://ieeexplore.ieee.org/stamp/stamp.jsp?tp=&arnumber=9201551"
+            >
+              K. Marussy, O. Semeráth, D. Varró:{' '}
+              <em>
+                Automated Generation of Consistent Graph Models With
+                Multiplicity Reasoning.
+              </em>{' '}
+              IEEE Trans. Softw. Eng. <b>48</b>(5): 1610-1629 (2022)
+            </Publication>
+            <Publication
+              doi="10.1007/s10270-021-00918-6"
+              pdf="https://link.springer.com/content/pdf/10.1007/s10270-021-00918-6.pdf?pdf=button"
+            >
+              A. Babikian, O. Semeráth, A. Li, K. Marussy, D. Varró:{' '}
+              <em>
+                Automated generation of consistent models using qualitative
+                abstractions and exploration strategies.
+              </em>{' '}
+              Softw. Syst. Model. <b>21</b>(5): 1763-1787 (2022)
+            </Publication>
+          </ul>
+          <h3>Correctness proofs</h3>
+          <ul>
+            <Publication
+              doi="10.1007/978-3-319-75396-6_16"
+              pdf="https://inf.mit.bme.hu/sites/default/files/publications/fmhe-model-generation.pdf"
+            >
+              D. Varró, O. Semeráth, G. Szárnyas, Á. Horváth: &ldquo;Towards the
+              Automated Generation of Consistent, Diverse, Scalable and
+              Realistic Graph Models.&rdquo;{' '}
+              <em>Graph Transformation, Specifications, and Nets</em> 2018:
+              285-312
+            </Publication>
+          </ul>
         </div>
       </div>
     </div>
@@ -270,11 +220,15 @@ export default function Home() {
   return (
     <Layout>
       <Hero />
-      <div className={styles['section']}>
+      <section className={styles['section']}>
         <Features />
-      </div>
-      <Video />
-      <Publications />
+      </section>
+      <section className={clsx(styles['section'], styles['section--video'])}>
+        <Video />
+      </section>
+      <section className={styles['section']}>
+        <Publications />
+      </section>
     </Layout>
   );
 }
diff --git a/subprojects/docs/src/pages/video-cover.webp b/subprojects/docs/src/pages/video-cover.webp
deleted file mode 100644
index 50ebe1ab..00000000
--- a/subprojects/docs/src/pages/video-cover.webp
+++ /dev/null
diff --git a/subprojects/docs/src/pages/video-cover.webp.license b/subprojects/docs/src/pages/video-cover.webp.license
deleted file mode 100644
index ff75bc7c..00000000
--- a/subprojects/docs/src/pages/video-cover.webp.license
+++ /dev/null
@@ -1,3 +0,0 @@
-SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
-
-SPDX-License-Identifier: EPL-2.0
diff --git a/subprojects/docs/src/plugins/loadersPlugin.ts b/subprojects/docs/src/plugins/loadersPlugin.ts
index 325d7f67..8b52667c 100644
--- a/subprojects/docs/src/plugins/loadersPlugin.ts
+++ b/subprojects/docs/src/plugins/loadersPlugin.ts
@@ -1,15 +1,19 @@
 /*
- * SPDX-FileCopyrightText: 2024 The Refinery Authors
+ * Copyright (c) 2016, Jeremy Stucki
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) 2024 The Refinery Authors
  *
- * SPDX-License-Identifier: EPL-2.0
+ * SPDX-License-Identifier: BSD-3-Clause AND MIT AND EPL-2.0
  */
 
 import type { Plugin } from '@docusaurus/types';
+// @ts-expect-error No typings available for `responsive-loader`.
+import sharp from 'responsive-loader/sharp';
 
 export default function loadersPlugin(): Plugin {
   return {
     name: 'refinery-loaders-plugin',
-    configureWebpack(config) {
+    configureWebpack(config, isServer) {
       let svgoDisabled = false;
       const rules = [...(config.module?.rules ?? [])];
       rules.forEach((rule) => {
@@ -38,6 +42,8 @@ export default function loadersPlugin(): Plugin {
         ) {
           return;
         }
+        // Skip SVGR when importing SVG files with ?url.
+        svgLoader.resourceQuery = { not: /[?&]url$/ };
         const {
           use: [loader],
         } = svgLoader;
@@ -48,6 +54,7 @@ export default function loadersPlugin(): Plugin {
         ) {
           return;
         }
+
         loader.options = {
           ...(typeof loader.options === 'object' ? loader.options : {}),
           svgo: true,
@@ -78,7 +85,31 @@ export default function loadersPlugin(): Plugin {
           'module.rules': 'replace',
         },
         module: {
-          rules,
+          rules: [
+            // Configuration based on
+            // https://github.com/dazuaz/responsive-loader/blob/ef2c806fcd36f06f6be8a0b97e09f40c3d86d3ac/README.md
+            {
+              test: /\.(png|jpe?g)$/,
+              resourceQuery: /[?&]rl$/,
+              use: [
+                {
+                  loader: 'responsive-loader',
+                  options: {
+                    /* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment --
+                     * No typings available for `responsive-loader`.
+                     */
+                    adapter: sharp,
+                    format: 'webp',
+                    // See
+                    // https://github.com/facebook/docusaurus/blob/c745021b01a8b88d34e1d772278d7171ad8acdf5/packages/docusaurus-plugin-ideal-image/src/index.ts#L62-L66
+                    emitFile: !isServer,
+                    name: 'assets/images/[name].[hash:hex:7].[width].[ext]',
+                  },
+                },
+              ],
+            },
+            ...rules,
+          ],
         },
       };
     },
diff --git a/subprojects/docs/src/types.d.ts b/subprojects/docs/src/types.d.ts
index 0d1b2226..658763e7 100644
--- a/subprojects/docs/src/types.d.ts
+++ b/subprojects/docs/src/types.d.ts
@@ -1,10 +1,39 @@
 /*
- * SPDX-FileCopyrightText: 2024 The Refinery Authors
+ * Copyright (c) 2016, Jeremy Stucki
+ * Copyright (c) 2024 The Refinery Authors
  *
- * SPDX-License-Identifier: EPL-2.0
+ * SPDX-License-Identifier: BSD-3-Clause AND EPL-2.0
+ *
+ * Typings for `ResponsiveImageOutput` copied from
+ * https://github.com/dazuaz/responsive-loader/blob/ef2c806fcd36f06f6be8a0b97e09f40c3d86d3ac/README.md
  */
 
 declare module '*?url' {
   const url: string;
   export default url;
 }
+
+declare module '*&url' {
+  const url: string;
+  export default url;
+}
+
+interface ResponsiveImageOutput {
+  src: string;
+  srcSet: string;
+  placeholder: string | undefined;
+  images: { path: string; width: number; height: number }[];
+  width: number;
+  height: number;
+  toString: () => string;
+}
+
+declare module '*?rl' {
+  const src: ResponsiveImageOutput;
+  export default src;
+}
+
+declare module '*&rl' {
+  const src: ResponsiveImageOutput;
+  export default src;
+}