@reuters-graphics/graphics-components 3.10.1 → 4.0.0

package/dist/components/Analytics/GTM.svelte.d.ts

@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Gtm: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const GTM: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type Gtm = InstanceType<typeof Gtm>;
-export default Gtm;
+type GTM = InstanceType<typeof GTM>;
+export default GTM;

package/dist/components/BlogPost/BlogPost.svelte

@@ -10,9 +10,10 @@
      */
     slugTitle: string;
     /**
-     * Base path prepended to the copied URL, e.g. "/graphics", usually gotten from base store in SvelteKit.
+     * SvelteKit's `resolve` function from `$app/paths`, used to build the post's
+     * canonical URL against your project's base path. Defaults to an identity function.
      */
-    base: string;
+    resolve?(pathname: string): string;
     /** Array of author names, which will be slugified to create links to Reuters author pages */
     authors: string[];
     /** Publish time as a datetime string. */
@@ -33,7 +34,7 @@
   let {
     title = 'Reuters Graphics blog post',
     slugTitle = 'Reuters Graphics blog post',
-    base = '',
+    resolve = (pathname: string) => pathname,
     authors = [],
     publishTime = '',
     updateTime = '',
@@ -54,14 +55,14 @@
   <PostHeadline
     hed={title}
     sluggableHed={slugTitle}
-    {base}
+    {resolve}
     {authors}
     {publishTime}
     {updateTime}
     {id}
     {cls}
   />
-  <a href="{base}/{shortPubDate}/{slugify(slugTitle)}/" hidden>
+  <a href={resolve(`/${shortPubDate}/${slugify(slugTitle)}/`)} hidden>
     {title}
   </a>
   {@render children?.()}

package/dist/components/BlogPost/BlogPost.svelte.d.ts

@@ -9,9 +9,10 @@ interface Props {
      */
     slugTitle: string;
     /**
-     * Base path prepended to the copied URL, e.g. "/graphics", usually gotten from base store in SvelteKit.
+     * SvelteKit's `resolve` function from `$app/paths`, used to build the post's
+     * canonical URL against your project's base path. Defaults to an identity function.
      */
-    base: string;
+    resolve?(pathname: string): string;
     /** Array of author names, which will be slugified to create links to Reuters author pages */
     authors: string[];
     /** Publish time as a datetime string. */

package/dist/components/BlogPost/CopyLink.svelte

@@ -9,8 +9,11 @@
     publishedDate?: string;
     /** The heading of the post. */
     hed?: string;
-    /** Base path prepended to the copied URL, e.g. "/graphics". */
-    base: string;
+    /**
+     * SvelteKit's `resolve` function from `$app/paths`, used to build the copied URL
+     * against your project's base path. Defaults to an identity function.
+     */
+    resolve?(pathname: string): string;
     /** The ARIA label for the copy link button. */
     ariaLabel?: string;
     /** The message to display before copying the link. */
@@ -22,7 +25,7 @@
   let {
     publishedDate = '',
     hed = '',
-    base = '',
+    resolve = (pathname: string) => pathname,
     ariaLabel = 'Copy link to this post',
     copyMessageBefore = 'Copy link',
     copyMessageAfter = 'Copied',
@@ -44,7 +47,7 @@
       e.preventDefault();
       clicked = true;
       navigator.clipboard.writeText(
-        `${window.location.origin}${base}/${publishDate}/${slugify(hed)}/`
+        `${window.location.origin}${resolve(`/${publishDate}/${slugify(hed)}/`)}`
       );
       setTimeout(() => {
         clicked = false;

package/dist/components/BlogPost/CopyLink.svelte.d.ts

@@ -3,8 +3,11 @@ interface Props {
     publishedDate?: string;
     /** The heading of the post. */
     hed?: string;
-    /** Base path prepended to the copied URL, e.g. "/graphics". */
-    base: string;
+    /**
+     * SvelteKit's `resolve` function from `$app/paths`, used to build the copied URL
+     * against your project's base path. Defaults to an identity function.
+     */
+    resolve?(pathname: string): string;
     /** The ARIA label for the copy link button. */
     ariaLabel?: string;
     /** The message to display before copying the link. */

package/dist/components/BlogPost/PostHeadline.svelte

@@ -16,8 +16,11 @@
      * published links to the post.
      */
     sluggableHed: string;
-    /** Base path prepended to the copied URL, e.g. "/graphics". */
-    base: string;
+    /**
+     * SvelteKit's `resolve` function from `$app/paths`, used to build the copied URL
+     * against your project's base path. Defaults to an identity function.
+     */
+    resolve?(pathname: string): string;
     /** Array of author names, which will be slugified to create links to Reuters author pages */
     authors: string[];
     /** Publish time as a datetime string. */
@@ -33,7 +36,7 @@
   let {
     hed = 'Reuters Graphics blog post',
     sluggableHed = 'Reuters Graphics blog post',
-    base = '',
+    resolve = (pathname: string) => pathname,
     authors = [],
     publishTime = '',
     updateTime = '',
@@ -105,7 +108,7 @@
               <CopyLink
                 hed={sluggableHed}
                 publishedDate={publishTime}
-                {base}
+                {resolve}
               /></span
             >
           </a>

package/dist/components/BlogPost/PostHeadline.svelte.d.ts

@@ -8,8 +8,11 @@ interface Props {
      * published links to the post.
      */
     sluggableHed: string;
-    /** Base path prepended to the copied URL, e.g. "/graphics". */
-    base: string;
+    /**
+     * SvelteKit's `resolve` function from `$app/paths`, used to build the copied URL
+     * against your project's base path. Defaults to an identity function.
+     */
+    resolve?(pathname: string): string;
     /** Array of author names, which will be slugified to create links to Reuters author pages */
     authors: string[];
     /** Publish time as a datetime string. */

package/dist/components/BlogPost/utils.d.ts

@@ -1,6 +1,7 @@
 /**
  * Converts a date string to a short date format.
  * @param d - The date string to be converted.
- * @returns The short date format string.
+ * @returns The short date format string (`YYYY-MM-DD`), or an empty string if
+ * `d` is missing or not a valid date.
  */
 export declare const getShortDate: (d: string) => string;

package/dist/components/BlogPost/utils.js

@@ -1,6 +1,12 @@
 /**
  * Converts a date string to a short date format.
  * @param d - The date string to be converted.
- * @returns The short date format string.
+ * @returns The short date format string (`YYYY-MM-DD`), or an empty string if
+ * `d` is missing or not a valid date.
  */
-export const getShortDate = (d) => new Date(d).toISOString().split('T')[0];
+export const getShortDate = (d) => {
+    const date = new Date(d);
+    if (Number.isNaN(date.getTime()))
+        return '';
+    return date.toISOString().split('T')[0];
+};

package/dist/components/BlogTOC/BlogTOC.svelte

@@ -19,8 +19,11 @@
 
   interface Props {
     posts: Post[];
-    /** Base path prepended to post links, e.g. "/graphics". */
-    base: string;
+    /**
+     * SvelteKit's `resolve` function from `$app/paths`, used to build post links
+     * against your project's base path. Defaults to an identity function.
+     */
+    resolve?(pathname: string): string;
     /** The label for the table of contents toggle button. */
     label?: string;
     /** The maximum height of the table of contents list in pixels. */
@@ -29,7 +32,7 @@
 
   let {
     posts,
-    base = '',
+    resolve = (pathname: string) => pathname,
     label = 'Show all articles',
     maxHeight = 300,
   }: Props = $props();
@@ -51,7 +54,7 @@
           const existing = acc.find((entry) => entry.dateKey === dateKey);
           const event = {
             title: post.title,
-            titleLink: `${base}/#${slugify(post.slugTitle)}`,
+            titleLink: `${resolve('/')}#${slugify(post.slugTitle)}`,
           };
           if (existing) {
             existing.events.push(event);

package/dist/components/BlogTOC/BlogTOC.svelte.d.ts

@@ -5,13 +5,16 @@ interface Post {
 }
 interface Props {
     posts: Post[];
-    /** Base path prepended to post links, e.g. "/graphics". */
-    base: string;
+    /**
+     * SvelteKit's `resolve` function from `$app/paths`, used to build post links
+     * against your project's base path. Defaults to an identity function.
+     */
+    resolve?(pathname: string): string;
     /** The label for the table of contents toggle button. */
     label?: string;
     /** The maximum height of the table of contents list in pixels. */
     maxHeight?: number;
 }
-declare const BlogToc: import("svelte").Component<Props, {}, "">;
-type BlogToc = ReturnType<typeof BlogToc>;
-export default BlogToc;
+declare const BlogTOC: import("svelte").Component<Props, {}, "">;
+type BlogTOC = ReturnType<typeof BlogTOC>;
+export default BlogTOC;

package/dist/components/BlogTOC/TOCList.svelte.d.ts

@@ -17,6 +17,6 @@ interface Props {
     id?: string;
     class?: string;
 }
-declare const TocList: import("svelte").Component<Props, {}, "listHeight">;
-type TocList = ReturnType<typeof TocList>;
-export default TocList;
+declare const TOCList: import("svelte").Component<Props, {}, "listHeight">;
+type TOCList = ReturnType<typeof TOCList>;
+export default TOCList;

package/dist/components/Headpile/Headpile.svelte

@@ -28,9 +28,9 @@
        * Headshot image src. Be sure to prefix the image
        *
        * ```typescript
-       * import { assets } from '$app/paths';
+       * import { asset } from '$app/paths';
        *
-       * const imgSrc = `${assets}/images/my-image.jpg`;
+       * const imgSrc = asset('/images/my-image.jpg');
        * ```
        */
       img: string;

package/dist/components/Headpile/Headpile.svelte.d.ts

@@ -24,9 +24,9 @@ interface Props {
          * Headshot image src. Be sure to prefix the image
          *
          * ```typescript
-         * import { assets } from '$app/paths';
+         * import { asset } from '$app/paths';
          *
-         * const imgSrc = `${assets}/images/my-image.jpg`;
+         * const imgSrc = asset('/images/my-image.jpg');
          * ```
          */
         img: string;

package/dist/components/LanguageButton/LanguageButton.svelte

@@ -5,8 +5,11 @@
     locale: string | undefined;
     /** Whether the article is embedded */
     embedded?: boolean;
-    /** The base URL for the article */
-    base?: string;
+    /**
+     * SvelteKit's `resolve` function from `$app/paths`, used to build locale links
+     * against your project's base path. Defaults to an identity function.
+     */
+    resolve?(pathname: string): string;
     /** Options for the language toggle button */
     buttonOptions?: {
       locale: string;
@@ -19,7 +22,7 @@
   let {
     locale = 'en',
     embedded = false,
-    base,
+    resolve = (pathname: string) => pathname,
     buttonOptions = {
       locale: 'es',
       label: 'Leer en español',
@@ -37,16 +40,16 @@
     if (embedded) {
       if (locale === translationLocale) {
         // If we're in the non-English article, link to the English article
-        return `${base}/embeds/en/page/`;
+        return resolve('/embeds/en/page/');
       } else {
-        return `${base}/embeds/${translationLocale}/page/`;
+        return resolve(`/embeds/${translationLocale}/page/`);
       }
     } else {
       if (locale === translationLocale) {
         // If we're in the non-English article, link to the English article
-        return `${base}/`;
+        return resolve('/');
       } else {
-        return `${base}/${translationLocale}/`;
+        return resolve(`/${translationLocale}/`);
       }
     }
   };

package/dist/components/LanguageButton/LanguageButton.svelte.d.ts

@@ -3,8 +3,11 @@ interface Props {
     locale: string | undefined;
     /** Whether the article is embedded */
     embedded?: boolean;
-    /** The base URL for the article */
-    base?: string;
+    /**
+     * SvelteKit's `resolve` function from `$app/paths`, used to build locale links
+     * against your project's base path. Defaults to an identity function.
+     */
+    resolve?(pathname: string): string;
     /** Options for the language toggle button */
     buttonOptions?: {
         locale: string;

package/dist/components/SEO/SEO.svelte.d.ts

@@ -49,6 +49,6 @@ interface Props {
     authors?: GraphicAuthor[];
 }
 /** `SEO` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytic-seo--docs) */
-declare const Seo: import("svelte").Component<Props, {}, "">;
-type Seo = ReturnType<typeof Seo>;
-export default Seo;
+declare const SEO: import("svelte").Component<Props, {}, "">;
+type SEO = ReturnType<typeof SEO>;
+export default SEO;

package/dist/components/Video/Video.svelte

@@ -196,8 +196,8 @@
 {/snippet}
 
 <svelte:window
-  on:click={setInteractedWithDom}
-  on:touchstart={setInteractedWithDom}
+  onclick={setInteractedWithDom}
+  ontouchstart={setInteractedWithDom}
 />
 
 <GraphicBlock

package/dist/llm-docs/components/BeforeAfter.md

@@ -76,13 +76,13 @@ The `BeforeAfter` component shows a before-and-after comparison of an image.
 ```svelte
 <script>
   import { BeforeAfter } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+  import { asset } from '$app/paths'; // 👈 If using in the graphics kit...
 </script>
 
 <BeforeAfter
-  beforeSrc={`${assets}/images/before-after/myrne-before.jpg`}
+  beforeSrc={asset('/images/before-after/myrne-before.jpg')}
   beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
-  afterSrc={`${assets}/images/before-after/myrne-after.jpg`}
+  afterSrc={asset('/images/before-after/myrne-after.jpg')}
   afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
 />
 ```
@@ -111,9 +111,9 @@ afterAlt: Satellite image of Russian base at Myrne taken on Oct. 20, 2020.
 {#each content.blocks as block}
   {#if block.type === 'before-after'}
     <BeforeAfter
-      beforeSrc={`${assets}/${block.beforeSrc}`}
+      beforeSrc={asset(`/${block.beforeSrc}`)}
       beforeAlt={block.beforeAlt}
-      afterSrc={`${assets}/${block.afterSrc}`}
+      afterSrc={asset(`/${block.afterSrc}`)}
       afterAlt={block.afterAlt}
     />
   {/if}

package/dist/llm-docs/components/BlogPost.md

@@ -10,7 +10,6 @@
 |------|------|---------|:--------:|-------------|
 | `title` | `string` | `'Reuters Graphics blog post'` |  | Title of the blog post |
 | `slugTitle` | `string` | `'Reuters Graphics blog post'` |  | A sluggable title of the blog post.  **Important:** Do not change this title after publishing the post. Changes will break published links to the post. |
-| `base` | `string` | `''` |  | Base path prepended to the copied URL, e.g. "/graphics", usually gotten from base store in SvelteKit. |
 | `authors` | `string[]` | `[]` |  | Array of author names, which will be slugified to create links to Reuters author pages |
 | `publishTime` | `string` | `''` |  | Publish time as a datetime string. |
 | `updateTime` | `string` | `''` |  | Update time as a datetime string. |
@@ -30,7 +29,6 @@
   authors={['John Smith', 'Jane Doe']}
   publishTime="2024-10-01T18:30:00Z"
   updateTime="2024-10-01T21:45:00Z"
-  base=""
 >
   <BodyText
     text="Iran launched a barrage of ballistic missiles at Israel on Tuesday in its first direct attack on Israeli territory, marking a significant escalation in the conflict gripping the Middle East."
@@ -50,7 +48,7 @@ The `BlogPost` component renders a single entry in a graphics blog page, includi
 ```svelte
 <script>
   import { BlogPost } from '@reuters-graphics/graphics-components';
-  import { base } from '$app/paths';
+  import { resolve } from '$app/paths';
 </script>
 
 <BlogPost
@@ -59,7 +57,7 @@ The `BlogPost` component renders a single entry in a graphics blog page, includi
   authors={['John Smith', 'Jane Doe']}
   publishTime="2024-10-01T18:30:00Z"
   updateTime="2024-10-01T21:45:00Z"
-  {base}
+  {resolve}
 >
   <!-- Post body content goes here -->
 </BlogPost>

package/dist/llm-docs/components/BlogTOC.md

@@ -9,7 +9,6 @@
 | Prop | Type | Default | Required | Description |
 |------|------|---------|:--------:|-------------|
 | `posts` | `Post[]` | — | ✓ | — |
-| `base` | `string` | `''` |  | Base path prepended to post links, e.g. "/graphics". |
 | `label` | `string` | `'Show all articles'` |  | The label for the table of contents toggle button. |
 | `maxHeight` | `number` | `300` |  | The maximum height of the table of contents list in pixels. |
 
@@ -34,7 +33,7 @@
   ]}
 />
 
-<BlogTOC {posts} base="" />
+<BlogTOC {posts} />
 
 <BlogPost
   title="Iran fires ballistic missiles at Israel in major escalation"
@@ -42,7 +41,6 @@
   authors={['John Smith', 'Jane Doe']}
   publishTime="2024-10-01T18:30:00Z"
   updateTime="2024-10-01T21:45:00Z"
-  base=""
 >
   <BodyText
     text="Iran launched a barrage of ballistic missiles at Israel on Tuesday in its first direct attack on Israeli territory, marking a significant escalation in the conflict gripping the Middle East."
@@ -62,7 +60,7 @@ The `BlogTOC` component renders a collapsible table of contents for a graphics b
 ```svelte
 <script>
   import { BlogTOC } from '@reuters-graphics/graphics-components';
-  import { base } from '$app/paths';
+  import { resolve } from '$app/paths';
 </script>
 
 <BlogTOC
@@ -78,11 +76,11 @@ The `BlogTOC` component renders a collapsible table of contents for a graphics b
       publishTime: '2024-10-02T09:15:00Z',
     },
   ]}
-  {base}
+  {resolve}
 />
 ```
 
-The `base` prop should be set to your SvelteKit `base` path (e.g. `"/graphics"`) so that post links resolve correctly.
+Pass SvelteKit's `resolve` function (from `$app/paths`) so that post links resolve correctly against your project's base path.
 
 Each post in the `posts` array must have:
 

package/dist/llm-docs/components/EmbedPreviewerLink.md

@@ -28,7 +28,7 @@ The `EmbedPreviewerLink` component is a tool for previewing the embeds in develo
 <script>
   import { EmbedPreviewerLink } from '@reuters-graphics/graphics-components';
 
-  import { dev } from '$app/env';
+  import { dev } from '$app/environment';
 </script>
 
 <EmbedPreviewerLink {dev} />

package/dist/llm-docs/components/FeaturePhoto.md

@@ -45,11 +45,11 @@ The `FeaturePhoto` component adds a full-width photo.
 ```svelte
 <script>
   import { FeaturePhoto } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+  import { asset } from '$app/paths'; // 👈 If using in the graphics kit...
 </script>
 
 <FeaturePhoto
-  src={`${assets}/images/myImage.jpg`}
+  src={asset('/images/myImage.jpg')}
   altText="Some alt text"
   caption="A caption"
 />
@@ -80,7 +80,7 @@ caption: Carcharodon carcharias - REUTERS
   import { FeaturePhoto } from '@reuters-graphics/graphics-components';
 
   import content from '$locales/en/content.json';
-  import { assets } from '$app/paths';
+  import { asset } from '$app/paths';
 </script>
 
 {#each content.blocks as block}
@@ -89,7 +89,7 @@ caption: Carcharodon carcharias - REUTERS
   {:else if block.type === 'photo'}
     <FeaturePhoto
       width={block.width}
-      src={`${assets}/${block.src}`}
+      src={asset(`/${block.src}`)}
       altText={block.altText}
       caption={block.caption}
     />

package/dist/llm-docs/components/GraphicBlock.md

@@ -177,7 +177,7 @@ To pass your ai2svelte graphic into `GraphicBlock` component, import your ai2sve
   import LogBlock from './components/dev/LogBlock.svelte';
 
   // If using with the graphics kit
-  import { assets } from '$app/paths';
+  import { asset } from '$app/paths';
 
   // A built-in helper function in Graphis Kit for validating container width
   import { containerWidth } from '$utils/propValidators';
@@ -207,7 +207,7 @@ To pass your ai2svelte graphic into `GraphicBlock` component, import your ai2sve
         ariaDescription={block.altText}
       >
         <!-- In graphics kit, pass the `assetsPath` prop -->
-        <AiChart assetsPath={assets || '/'} />
+        <AiChart assetsPath={asset('/').replace(/\/$/, '')} />
       </GraphicBlock>
     {/if}
   {/if}
@@ -253,7 +253,7 @@ The `ariaDescription` string will be processed as markdown, so you can add multi
   ariaDescription="A map showing the shake intensity produced by the earthquake."
 >
   <!-- In graphics kit, pass the `assetsPath` prop -->
-  <AiChart assetsPath={assets || '/'} />
+  <AiChart assetsPath={asset('/').replace(/\/$/, '')} />
 </GraphicBlock>
 ```
 
@@ -272,7 +272,7 @@ Sometimes, instead of a simple sentence, we want to provide a data table or some
   notes="Note: A shakemap represents the ground shaking produced by an earthquake."
 >
   <!-- In graphics kit, pass the `assetsPath` prop -->
-  <AiChart assetsPath={assets || '/'} />
+  <AiChart assetsPath={asset('/').replace(/\/$/, '')} />
 
   <!-- Custom ARIA description snippet -->
   {#snippet ariaDescription()}

package/dist/llm-docs/components/Headline.md

@@ -198,7 +198,7 @@ To add a crown image, use the `crown` [snippet](https://svelte.dev/docs/svelte/s
 ```svelte
 <script>
   import { Headline } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths';
+  import { asset } from '$app/paths';
 </script>
 
 <Headline
@@ -225,7 +225,7 @@ Add a full graphic or any other component in the crown.
 ```svelte
 <script>
   import { Headline } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths'; // If in Graphis Kit
+  import { asset } from '$app/paths'; // If in Graphis Kit
 
   import Map from './ai2svelte/graphic.svelte'; // Import the crown graphic component
 </script>
@@ -242,7 +242,7 @@ Add a full graphic or any other component in the crown.
   <!-- Add a crown graphic -->
   {#snippet crown()}
     <!-- Pass `assetsPath` if in graphics kit -->
-    <Map assetsPath={assets || '/'} />
+    <Map assetsPath={asset('/').replace(/\/$/, '')} />
   {/snippet}
 </Headline>
 ```

package/dist/llm-docs/components/Headpile.md

@@ -12,7 +12,7 @@
 | `id` | `string` | — | ✓ | Add an id to target with custom CSS. |
 | `width` | `Extract<ContainerWidth, 'normal' \| 'wide'>` | `'normal'` |  | Width of the container. |
 | `colour` | `string` | `'#cccccc'` |  | Default background colour to be used as a mount behind the headshot. |
-| `figures` | `{       /**        * Headshot image src. Be sure to prefix the image        *        * ```typescript        * import { assets } from '$app/paths';        *        * const imgSrc = `${assets}/images/my-image.jpg`;        * ```        */       img: string;       /**        * Figure name.        */       name: string;       /**        * Figure role or title.        */       role?: string;       /**        * Text describing the person.        */       text: string;       /**        * Background colour to be used as a mount behind the headshot.        */       colour?: string;     }[]` | — | ✓ | Individual figures -- i.e., people -- for the headpile. |
+| `figures` | `{       /**        * Headshot image src. Be sure to prefix the image        *        * ```typescript        * import { asset } from '$app/paths';        *        * const imgSrc = asset('/images/my-image.jpg');        * ```        */       img: string;       /**        * Figure name.        */       name: string;       /**        * Figure role or title.        */       role?: string;       /**        * Text describing the person.        */       text: string;       /**        * Background colour to be used as a mount behind the headshot.        */       colour?: string;     }[]` | — | ✓ | Individual figures -- i.e., people -- for the headpile. |
 
 ## Examples
 
@@ -33,19 +33,19 @@ It's designed to be used with headshots that have had their background removed,
 ```svelte
 <script>
   import { Headpile } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+  import { asset } from '$app/paths'; // 👈 If using in the graphics kit...
 </script>
 
 <Headpile
   figures={[
     {
-      img: `${assets}/images/person-A.jpg`,
+      img: asset('/images/person-A.jpg'),
       name: 'General Abdel Fattah al-Burhan',
       role: "Sudan's Sovereign Council Chief and military commander",
       text: 'Burhan was little known in public life until taking part in the coup ...',
     },
     {
-      img: `${assets}/images/person-B.jpg`,
+      img: asset('/images/person-B.jpg'),
       name: 'General Mohamed Hamdan Dagalo',
       role: 'Leader of the Sudanese paramilitary Rapid Support Forces (RSF)',
       text: 'Popularly known as Hemedti, Dagalo rose from lowly beginnings ...',