diff --git a/src/components/BeforeAfter/BeforeAfter.mdx b/src/components/BeforeAfter/BeforeAfter.mdx new file mode 100644 index 00000000..3ce6f1e3 --- /dev/null +++ b/src/components/BeforeAfter/BeforeAfter.mdx @@ -0,0 +1,111 @@ +import { Meta, Canvas } from '@storybook/blocks'; + +import * as BeforeAfterStories from './BeforeAfter.stories.svelte'; + + + +# BeforeAfter + +The `BeforeAfter` component shows a before-and-after comparison of an image. + +```svelte + + + +``` + + + +## Using with ArchieML docs + +With the Graphics Kit, you'll likely get your text value from an ArchieML doc... + +```yaml +# ArchieML doc +[blocks] + +type: before-after +beforeSrc: images/before-after/myrne-before.jpg +beforeAlt: Satellite image of Russian base at Myrne taken on July 7, 2020. +afterSrc: images/before-after/myrne-after.jpg +afterAlt: Satellite image of Russian base at Myrne taken on Oct. 20, 2020. + +[] +``` + +... which you'll parse out of a ArchieML block object before passing to the `BeforeAfter` component. + +```svelte + +{#each content.blocks as block} + {#if block.type === 'before-after'} + + {/if} +{/each} +``` + + + +## Adding text + +To add text overlays and captions, use [snippets](https://svelte.dev/docs/svelte/snippet) for `beforeOverlay`, `afterOverlay` and `caption`. You can style the snippets to match your page design, like in [this demo](./?path=/story/components-multimedia-beforeafter--with-overlays). + +> 💡**NOTE:** The text in the overlays are used as [ARIA descriptions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) for your before and after images. You must always use the `beforeAlt` / `afterAlt` props to label your image for visually impaired readers, but these ARIA descriptions provide additional information or context that the reader might need. + +```svelte + + + {#snippet beforeOverlay()} +
+

July 7, 2020

+

Initially, this site was far smaller.

+
+ {/snippet} + + + {#snippet afterOverlay()} +
+

Oct. 20, 2020

+

But then forces built up.

+
+ {/snippet} + + + {#snippet caption()} +

Photos by MAXAR Technologies, 2021.

+ {/snippet} +
+ + +``` + + diff --git a/src/components/BeforeAfter/BeforeAfter.stories.svelte b/src/components/BeforeAfter/BeforeAfter.stories.svelte index d2f79821..74ef3be3 100644 --- a/src/components/BeforeAfter/BeforeAfter.stories.svelte +++ b/src/components/BeforeAfter/BeforeAfter.stories.svelte @@ -1,19 +1,10 @@ - - - - - + -
-

July 7, 2020

-

Initially, this site was far smaller.

-
-
-

Oct. 20, 2020

-

But then forces built up.

-
-

Photos by MAXAR Technologies, 2021.

+ {#snippet beforeOverlay()} +
+

July 7, 2020

+

Initially, this site was far smaller.

+
+ {/snippet} + {#snippet afterOverlay()} +
+

Oct. 20, 2020

+

But then forces built up.

+
+ {/snippet} + {#snippet caption()} +

Photos by MAXAR Technologies, 2021.

+ {/snippet}
-
- - - -
-

- On July 7, 2020, the base contained only a few transport vehicles. -

-
-
- -
-

- But by October, tanks and artillery could be seen. -

-

- In total, over 50 pieces of heavy machinery and 200 personnel are now - based here. -

-
-
-

Photos by MAXAR Technologies, 2021.

-
- diff --git a/src/components/BeforeAfter/stories/myrne-after.jpg b/src/components/BeforeAfter/images/myrne-after.jpg similarity index 100% rename from src/components/BeforeAfter/stories/myrne-after.jpg rename to src/components/BeforeAfter/images/myrne-after.jpg diff --git a/src/components/BeforeAfter/stories/myrne-before.jpg b/src/components/BeforeAfter/images/myrne-before.jpg similarity index 100% rename from src/components/BeforeAfter/stories/myrne-before.jpg rename to src/components/BeforeAfter/images/myrne-before.jpg diff --git a/src/components/BeforeAfter/stories/docs/ariaDescriptions.md b/src/components/BeforeAfter/stories/docs/ariaDescriptions.md deleted file mode 100644 index 7e87edd3..00000000 --- a/src/components/BeforeAfter/stories/docs/ariaDescriptions.md +++ /dev/null @@ -1,35 +0,0 @@ -Use text elements in your overlays as [ARIA descriptions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) for your images by setting an ID on text elements within each overlay with the `description` [slot prop](https://svelte.dev/tutorial/slot-props). - -> **💡 TIP:** You must always use the `beforeAlt` / `afterAlt` props to label your image for visually impaired readers, but you can use these descriptions to provide more information or context that the reader might also need. - -```svelte - -
-

July 7, 2020

-

Initially, this site was far smaller.

-
-
-

Oct. 20, 2020

-

But then forces built up.

-
-

Photos by MAXAR Technologies, 2021.

-
- - -``` diff --git a/src/components/BeforeAfter/stories/docs/component.md b/src/components/BeforeAfter/stories/docs/component.md deleted file mode 100644 index 6998143a..00000000 --- a/src/components/BeforeAfter/stories/docs/component.md +++ /dev/null @@ -1,15 +0,0 @@ -A before and after image comparison component. - -```svelte - - - -``` diff --git a/src/components/BeforeAfter/stories/docs/withOverlays.md b/src/components/BeforeAfter/stories/docs/withOverlays.md deleted file mode 100644 index 4a6028d6..00000000 --- a/src/components/BeforeAfter/stories/docs/withOverlays.md +++ /dev/null @@ -1,33 +0,0 @@ -Add overlays with the `beforeOverlay` and `afterOverlay` slots and a caption to the `caption` slot, then style these elements to match your page design as below. - -```svelte - -
-

July 7, 2020

-

Initially, this site was far smaller.

-
-
-

Oct. 20, 2020

-

But then forces built up.

-
-

Photos by MAXAR Technologies, 2021.

-
- - -``` diff --git a/src/components/Byline/Byline.svelte b/src/components/Byline/Byline.svelte index fa8e2558..4d932679 100644 --- a/src/components/Byline/Byline.svelte +++ b/src/components/Byline/Byline.svelte @@ -17,12 +17,10 @@ publishTime: string; /** * Update time as a datetime string. - * @type {string} */ updateTime: string; /** * Alignment of the byline. - * @type {string} */ align?: 'left' | 'center'; /** diff --git a/src/utils/index.ts b/src/utils/index.ts index 0760531d..7110e4f1 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,9 +1,15 @@ import slugify from 'slugify'; +/** Helper function to generate a random 4-character string */ +export const random4 = () => + Math.floor((1 + Math.random()) * 0x10000) + .toString(16) + .substring(1); + /** * Custom function that returns an author page URL. */ export const getAuthorPageUrl = (author: string): string => { const authorSlug = slugify(author.trim(), { lower: true }); return `https://www.reuters.com/authors/${authorSlug}/`; -}; +}; \ No newline at end of file