From 9b555434b4d10dd30e7a851b72a6babe42f30f2e Mon Sep 17 00:00:00 2001 From: MinamiFunakoshiTR Date: Wed, 5 Mar 2025 14:05:34 -0800 Subject: [PATCH 01/51] makes byline mdx, deletes old md --- .vscode/settings.json | 4 +- src/app.html | 20 ++-- src/components/AdSlot/AdSlot.svelte | 2 +- src/components/AdSlot/InlineAd.mdx | 6 +- src/components/AdSlot/LeaderboardAd.svelte | 2 +- src/components/AdSlot/ResponsiveAd.svelte | 2 +- src/components/Article/Article.mdx | 4 +- .../{stories/docs/component.md => Byline.mdx} | 15 ++- .../DatawrapperChart.stories.svelte | 10 +- .../EmbedPreviewerLink.svelte | 1 - src/components/EndNotes/EndNotes.svelte | 8 +- src/components/Framer/Resizer/index.svelte | 34 ++++--- .../stories/ai2svelte/ai-chart.svelte | 1 - src/components/Markdown/Markdown.svelte | 7 +- src/components/PymChild/PymChild.svelte | 2 - .../ReutersGraphicsLogo.svelte | 9 +- src/components/ReutersLogo/ReutersLogo.svelte | 9 +- src/components/SEO/SEO.svelte | 99 +++++++++---------- src/components/Scroller/Embedded/index.svelte | 8 +- .../basic/InteractiveForeground.svelte | 4 +- src/components/SearchInput/SearchInput.svelte | 13 ++- src/components/SiteFooter/SiteFooter.svelte | 5 +- .../SiteHeader/MobileMenu/index.svelte | 8 +- .../NavBar/NavDropdown/SectionDropdown.svelte | 7 +- src/components/SiteHeader/NavBar/index.svelte | 36 +++---- src/components/SiteHeader/SiteHeader.svelte | 4 +- src/components/Table/Pagination.svelte | 37 +++---- src/components/Table/Select.svelte | 17 ++-- src/components/Table/SortArrow.svelte | 7 +- src/components/Video/Controls.svelte | 4 +- 30 files changed, 187 insertions(+), 198 deletions(-) rename src/components/Byline/{stories/docs/component.md => Byline.mdx} (59%) diff --git a/.vscode/settings.json b/.vscode/settings.json index fbaef8e1..a8ef4c90 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -12,7 +12,7 @@ "editor.wordWrap": "on" }, "[svelte]": { - "editor.defaultFormatter": "svelte.svelte-vscode" - }, + "editor.defaultFormatter": "svelte.svelte-vscode" + }, "typescript.tsdk": "node_modules/typescript/lib" } diff --git a/src/app.html b/src/app.html index 7bf73d49..61516813 100644 --- a/src/app.html +++ b/src/app.html @@ -1,11 +1,11 @@ - + - - - - %sveltekit.head% - - - %sveltekit.body% - - \ No newline at end of file + + + + %sveltekit.head% + + + %sveltekit.body% + + diff --git a/src/components/AdSlot/AdSlot.svelte b/src/components/AdSlot/AdSlot.svelte index 4fed36b9..c80e6925 100644 --- a/src/components/AdSlot/AdSlot.svelte +++ b/src/components/AdSlot/AdSlot.svelte @@ -55,7 +55,7 @@ }); -
+
diff --git a/src/components/InfoBox/InfoBox.svelte b/src/components/InfoBox/InfoBox.svelte index f52a6fe8..52d915a8 100644 --- a/src/components/InfoBox/InfoBox.svelte +++ b/src/components/InfoBox/InfoBox.svelte @@ -13,7 +13,7 @@ /** * Contents of the note as a markdown string */ - text: string; + text?: string; /** * Additional footnotes */ From f03ef9e2dc5d67d5def10333ecd52ec99bb20b64 Mon Sep 17 00:00:00 2001 From: MinamiFunakoshiTR Date: Mon, 10 Mar 2025 09:51:01 -0700 Subject: [PATCH 09/51] updates dependencies, adds examples to docs --- src/components/Byline/Byline.mdx | 8 +++++--- src/components/Byline/Byline.stories.svelte | 2 +- src/components/Byline/Byline.svelte | 4 ++-- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/Byline/Byline.mdx b/src/components/Byline/Byline.mdx index a5c8a071..31352eb9 100644 --- a/src/components/Byline/Byline.mdx +++ b/src/components/Byline/Byline.mdx @@ -6,7 +6,7 @@ import * as BylineStories from './Byline.stories.svelte'; # Byline -Easily add a byline and dateline to your story. +The `Byline` component adds a byline, published and updated datelines to your page. ```svelte # Graphics Kit {#each content.blocks as block} - {#if block.type === 'text'} - + {#if block.type === 'info-box'} + {/if} {/each} ``` -## Theme + -Switch the theme prop to `dark` for a dark page infobox. +## Lists +Use markdown to add lists to `InfoBox`. + +```svelte + + + +``` + + ## Customisation -Use [snippets](https://svelte.dev/docs/svelte/snippet), which are the Svelte 5 version of slots, to customise the content as needed, e.g. adding tables, icons and thumbnail images, like in this [example](/story/components-text-elements-infobox--customised). +Use [snippets](https://svelte.dev/docs/svelte/snippet) to customise the `InfoBox`, such as adding tables, icons and thumbnail images. ```svelte {#snippet header()} -

COVID-19 deaths

+

Global video game market

{/snippet} {#snippet body()} - - - + + - - - + + - - - + + - - - + +
CountryInfectionsDeathsYearMarket size ($bln)
United States1,000,000100,0002024274.63
United Kingdom500,00050,0002023281.77
Italy250,00025,0002022249.55
{/snippet} {#snippet updated()} - Note: This is dummy data + Source: Precedence Research {/snippet} ``` + + diff --git a/src/components/InfoBox/InfoBox.stories.svelte b/src/components/InfoBox/InfoBox.stories.svelte index 34033a82..fa8a23a5 100644 --- a/src/components/InfoBox/InfoBox.stories.svelte +++ b/src/components/InfoBox/InfoBox.stories.svelte @@ -35,47 +35,43 @@ - + {#snippet header()} -

COVID-19 deaths

+

Global video game market

{/snippet} {#snippet body()} - - - + + - - - + + - - - + + - - - + +
CountryInfectionsDeathsYearMarket size ($bln)
United States1,000,000100,0002024274.63
United Kingdom500,00050,0002023281.77
Italy250,00025,0002022249.55
{/snippet} {#snippet footer()} - Note: This is dummy data + Source: Precedence Research {/snippet} From 28d8f17e68d69bc2bfb93921bb62afa1e714f3f5 Mon Sep 17 00:00:00 2001 From: MinamiFunakoshiTR Date: Mon, 10 Mar 2025 11:01:33 -0700 Subject: [PATCH 14/51] tweak --- src/components/EndNotes/EndNotes.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/EndNotes/EndNotes.mdx b/src/components/EndNotes/EndNotes.mdx index f5633ac0..b6f64b5b 100644 --- a/src/components/EndNotes/EndNotes.mdx +++ b/src/components/EndNotes/EndNotes.mdx @@ -63,3 +63,5 @@ text: Editor, Copyeditor ``` + + From f1020c6161675711b01f7a8e7482a0472275d551 Mon Sep 17 00:00:00 2001 From: MinamiFunakoshiTR Date: Mon, 10 Mar 2025 11:27:28 -0700 Subject: [PATCH 15/51] set up markdown --- .../docs/component.md => Markdown.mdx} | 14 ++++++-- .../Markdown/Markdown.stories.svelte | 33 ++++--------------- 2 files changed, 18 insertions(+), 29 deletions(-) rename src/components/Markdown/{stories/docs/component.md => Markdown.mdx} (84%) diff --git a/src/components/Markdown/stories/docs/component.md b/src/components/Markdown/Markdown.mdx similarity index 84% rename from src/components/Markdown/stories/docs/component.md rename to src/components/Markdown/Markdown.mdx index 5ba4ae0a..be7b5a37 100644 --- a/src/components/Markdown/stories/docs/component.md +++ b/src/components/Markdown/Markdown.mdx @@ -1,15 +1,23 @@ -The Markdown component renders markdown into HTML. That's it! +import { Meta, Canvas } from '@storybook/blocks'; ---- +import * as MarkdownStories from './Markdown.stories.svelte'; + + + +# Markdown + +The `Markdown` component renders a markdown string into HTML. ```svelte - + ``` + + ... well, almost. Owing to a weird quirk of Svelte's [`@html`](https://svelte.dev/docs/special-tags#html) directive (see [this issue](https://github.com/reuters-graphics/graphics-components/issues/148)), if you want your resulting HTML to be dynamic — e.g., update after a SvelteKit app [hydrates](https://kit.svelte.dev/docs/glossary#hydration) — then you may need to set the included `$staticMarkdown` store to `false` in the browser. diff --git a/src/components/Markdown/Markdown.stories.svelte b/src/components/Markdown/Markdown.stories.svelte index 99464d60..5c55660a 100644 --- a/src/components/Markdown/Markdown.stories.svelte +++ b/src/components/Markdown/Markdown.stories.svelte @@ -1,35 +1,16 @@ - - - - From dc06946fe146e3f88ba2bcfbd3302a9e3d757990 Mon Sep 17 00:00:00 2001 From: MinamiFunakoshiTR Date: Mon, 10 Mar 2025 11:46:48 -0700 Subject: [PATCH 16/51] migrates reuters graphics logo --- .../ReutersGraphicsLogo.mdx | 21 ++++++++++++++++ .../ReutersGraphicsLogo.stories.svelte | 24 ++++--------------- .../ReutersGraphicsLogo.svelte | 9 +++---- .../stories/docs/component.md | 11 --------- 4 files changed, 30 insertions(+), 35 deletions(-) create mode 100644 src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.mdx delete mode 100644 src/components/ReutersGraphicsLogo/stories/docs/component.md diff --git a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.mdx b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.mdx new file mode 100644 index 00000000..6e7c817b --- /dev/null +++ b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.mdx @@ -0,0 +1,21 @@ +import { Meta, Canvas } from '@storybook/blocks'; + +import * as ReutersGraphicsLogoStories from './ReutersGraphicsLogo.stories.svelte'; + + + +# ReutersGraphicsLogo + +The `ReutersGraphicsLogo` component contains the Reuters Graphics team logo. + +> Generally, used only for internal tools. For public pages, use the [ReutersLogo](./?path=/docs/components-logos-reuterslogo--docs) component. + +```svelte + + + +``` + + diff --git a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte index c5243444..787cc903 100644 --- a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte +++ b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte @@ -1,26 +1,10 @@ - - - - - + diff --git a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte index 6fe397dc..cb6e31bc 100644 --- a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte +++ b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte @@ -1,8 +1,5 @@ Generally, only used for internal tools. For public pages, use the [ReutersLogo](./?path=/docs/components-logos-reuterslogo--docs) component. - -```svelte - - - -``` From b901bb3c369e15e95154ddb4ad5a4cda6e992f36 Mon Sep 17 00:00:00 2001 From: MinamiFunakoshiTR Date: Mon, 10 Mar 2025 15:55:13 -0700 Subject: [PATCH 17/51] migrates reuters logo --- src/components/ReutersLogo/ReutersLogo.mdx | 19 +++++++++ .../ReutersLogo/ReutersLogo.stories.svelte | 23 ++--------- src/components/ReutersLogo/ReutersLogo.svelte | 40 +++++++++---------- .../ReutersLogo/stories/docs/component.md | 9 ----- 4 files changed, 43 insertions(+), 48 deletions(-) create mode 100644 src/components/ReutersLogo/ReutersLogo.mdx delete mode 100644 src/components/ReutersLogo/stories/docs/component.md diff --git a/src/components/ReutersLogo/ReutersLogo.mdx b/src/components/ReutersLogo/ReutersLogo.mdx new file mode 100644 index 00000000..e4d3b63e --- /dev/null +++ b/src/components/ReutersLogo/ReutersLogo.mdx @@ -0,0 +1,19 @@ +import { Meta, Canvas } from '@storybook/blocks'; + +import * as ReutersLogoStories from './ReutersLogo.stories.svelte'; + + + +# ReutersLogo + +The `ReutersLogo` component contains the official Reuters logo. + +```svelte + + + +``` + + diff --git a/src/components/ReutersLogo/ReutersLogo.stories.svelte b/src/components/ReutersLogo/ReutersLogo.stories.svelte index 87499cf6..5ab6725f 100644 --- a/src/components/ReutersLogo/ReutersLogo.stories.svelte +++ b/src/components/ReutersLogo/ReutersLogo.stories.svelte @@ -1,30 +1,15 @@ - - - - - + diff --git a/src/components/ReutersLogo/ReutersLogo.svelte b/src/components/ReutersLogo/ReutersLogo.svelte index 49a4a00f..aadffaee 100644 --- a/src/components/ReutersLogo/ReutersLogo.svelte +++ b/src/components/ReutersLogo/ReutersLogo.svelte @@ -1,8 +1,5 @@ - - - + + diff --git a/src/components/ReutersLogo/stories/docs/component.md b/src/components/ReutersLogo/stories/docs/component.md deleted file mode 100644 index 18cd0d66..00000000 --- a/src/components/ReutersLogo/stories/docs/component.md +++ /dev/null @@ -1,9 +0,0 @@ -The official Reuters logo. - -```svelte - - - -``` From 929dca2fd8d5d3a46400fa3e4a614d2673df8eb7 Mon Sep 17 00:00:00 2001 From: MinamiFunakoshiTR Date: Mon, 10 Mar 2025 16:04:31 -0700 Subject: [PATCH 18/51] migrated stories, mdx --- .../docs/component.md => SimpleTimeline.mdx} | 14 ++++++++-- .../SimpleTimeline.stories.svelte | 27 +++++-------------- .../SimpleTimeline/SimpleTimeline.svelte | 11 ++++---- 3 files changed, 24 insertions(+), 28 deletions(-) rename src/components/SimpleTimeline/{stories/docs/component.md => SimpleTimeline.mdx} (52%) diff --git a/src/components/SimpleTimeline/stories/docs/component.md b/src/components/SimpleTimeline/SimpleTimeline.mdx similarity index 52% rename from src/components/SimpleTimeline/stories/docs/component.md rename to src/components/SimpleTimeline/SimpleTimeline.mdx index 74a12385..0bfb9c78 100644 --- a/src/components/SimpleTimeline/stories/docs/component.md +++ b/src/components/SimpleTimeline/SimpleTimeline.mdx @@ -1,4 +1,12 @@ -A simple, clean text timeline. +import { Meta, Canvas } from '@storybook/blocks'; + +import * as SimpleTimelineStories from './SimpleTimeline.stories.svelte'; + + + +# SimpleTimeline + +The `SimpleTimeline` component creates a basic timeline with dates, titles and descriptions of events. ```svelte - + ``` + + diff --git a/src/components/SimpleTimeline/SimpleTimeline.stories.svelte b/src/components/SimpleTimeline/SimpleTimeline.stories.svelte index 94510714..fecd2df2 100644 --- a/src/components/SimpleTimeline/SimpleTimeline.stories.svelte +++ b/src/components/SimpleTimeline/SimpleTimeline.stories.svelte @@ -1,25 +1,18 @@ - - - diff --git a/src/components/SimpleTimeline/SimpleTimeline.svelte b/src/components/SimpleTimeline/SimpleTimeline.svelte index beed4001..b9ccb2c4 100644 --- a/src/components/SimpleTimeline/SimpleTimeline.svelte +++ b/src/components/SimpleTimeline/SimpleTimeline.svelte @@ -1,4 +1,3 @@ - + + +``` + + + +# Multiple events + +You can add multiple events to a single date by adding objects to the `events` array. + +```svelte + + + +``` + + diff --git a/src/components/SimpleTimeline/SimpleTimeline.stories.svelte b/src/components/SimpleTimeline/SimpleTimeline.stories.svelte index fecd2df2..bcf8d850 100644 --- a/src/components/SimpleTimeline/SimpleTimeline.stories.svelte +++ b/src/components/SimpleTimeline/SimpleTimeline.stories.svelte @@ -49,20 +49,9 @@ }, ], }, - { - date: 'Feb. 27', - events: [ - { - title: 'Russians push into Kharkiv', - titleLink: - 'https://www.reuters.com/world/europe/western-allies-expel-key-russian-banks-global-system-ukraine-fights-2022-02-27/', - }, - { - title: - 'Human rights groups and Ukrainian ambassador accuse Russia of using cluster and vacuum bombs', - }, - ], - }, + ]; + + const datesMultipleEvents = [ { date: 'Feb. 25', events: [ @@ -95,3 +84,12 @@ dates, }} /> + + diff --git a/src/components/SimpleTimeline/SimpleTimeline.svelte b/src/components/SimpleTimeline/SimpleTimeline.svelte index b9ccb2c4..fb427e14 100644 --- a/src/components/SimpleTimeline/SimpleTimeline.svelte +++ b/src/components/SimpleTimeline/SimpleTimeline.svelte @@ -1,5 +1,10 @@ From 2e37d39fda984b9f401f54bd9e164e3fb90337a8 Mon Sep 17 00:00:00 2001 From: MinamiFunakoshiTR Date: Tue, 11 Mar 2025 12:12:23 -0700 Subject: [PATCH 20/51] updates seo --- src/components/BodyText/BodyText.mdx | 2 +- src/components/SEO/SEO.mdx | 77 ++++++++++++ src/components/SEO/SEO.stories.svelte | 48 ++------ src/components/SEO/SEO.svelte | 121 +++++++++---------- src/components/SEO/stories/docs/archieML.md | 36 ------ src/components/SEO/stories/docs/component.md | 26 ---- 6 files changed, 143 insertions(+), 167 deletions(-) create mode 100644 src/components/SEO/SEO.mdx delete mode 100644 src/components/SEO/stories/docs/archieML.md delete mode 100644 src/components/SEO/stories/docs/component.md diff --git a/src/components/BodyText/BodyText.mdx b/src/components/BodyText/BodyText.mdx index 9cd25312..1395c3a2 100644 --- a/src/components/BodyText/BodyText.mdx +++ b/src/components/BodyText/BodyText.mdx @@ -33,7 +33,7 @@ Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatbal With the graphics kit, you'll likely get your text value from an ArchieML doc. ```yaml -# Archie ML doc +# ArchieML doc [blocks] type: text diff --git a/src/components/SEO/SEO.mdx b/src/components/SEO/SEO.mdx new file mode 100644 index 00000000..44cd57bd --- /dev/null +++ b/src/components/SEO/SEO.mdx @@ -0,0 +1,77 @@ +import { Meta } from '@storybook/blocks'; + +import * as SEOStories from './SEO.stories.svelte'; + + + +# SEO + +The `SEO` component adds essential metadata to pages. + +```svelte + + + +``` + +## Using with ArchieML docs + +With the Graphics Kit, you'll likely get your text values from an ArchieML doc... + +```yaml +# ArchieML doc +slug: ROOT-SLUG/WILD +seoTitle: Page title for search +seoDescription: Page description for search +shareTitle: Page title for social media +shareDescription: Page description for social media +shareImgPath: images/reuters-graphics.jpg +shareImgAlt: Alt text for share image. +``` + +... which you'll pass to the `SEO` component. + +```svelte + + + +``` + +> **Note:** For _reasons_, we can't document the value of `VITE_BASE_URL` below. It's `import` + `.meta.env.BASE_URL` (concatenate all that) in the Graphics Kit and other Vite-based rigs. diff --git a/src/components/SEO/SEO.stories.svelte b/src/components/SEO/SEO.stories.svelte index e09205b5..d8fba939 100644 --- a/src/components/SEO/SEO.stories.svelte +++ b/src/components/SEO/SEO.stories.svelte @@ -1,49 +1,21 @@ - - - - - - + }} +> + View page source to see the SEO metadata. + diff --git a/src/components/SEO/SEO.svelte b/src/components/SEO/SEO.svelte index c18ae2b8..6afeb156 100644 --- a/src/components/SEO/SEO.svelte +++ b/src/components/SEO/SEO.svelte @@ -1,85 +1,72 @@ - - -``` - -> **Note:** For _reasons_, we can't document the value of `VITE_BASE_URL` below. It's `import` + `.meta.env.BASE_URL` (concatenate all that) in the Graphics Kit and other Vite-based rigs. - diff --git a/src/components/SEO/stories/docs/component.md b/src/components/SEO/stories/docs/component.md deleted file mode 100644 index 0b5c0aa2..00000000 --- a/src/components/SEO/stories/docs/component.md +++ /dev/null @@ -1,26 +0,0 @@ -The `SEO` component adds essential metadata to published pages. - -```svelte - - - -``` From b6f585f7c0faf474fe112944e6b58bdf6683a4e4 Mon Sep 17 00:00:00 2001 From: MinamiFunakoshiTR Date: Tue, 11 Mar 2025 12:34:27 -0700 Subject: [PATCH 21/51] cleaned up docs --- src/components/SEO/SEO.mdx | 7 +++++-- src/components/SEO/SEO.stories.svelte | 17 +++++++++++------ src/components/SEO/SEO.svelte | 27 ++++----------------------- 3 files changed, 20 insertions(+), 31 deletions(-) diff --git a/src/components/SEO/SEO.mdx b/src/components/SEO/SEO.mdx index 44cd57bd..437f26f7 100644 --- a/src/components/SEO/SEO.mdx +++ b/src/components/SEO/SEO.mdx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/blocks'; +import { Meta, Canvas } from '@storybook/blocks'; import * as SEOStories from './SEO.stories.svelte'; @@ -21,7 +21,7 @@ The `SEO` component adds essential metadata to pages. seoTitle="A title for Google" seoDescription="A description for Google" shareTitle="A title for Twitter/Facebook" - shareDecription="A description for Twitter/Facebook" + shareDescription="A description for Twitter/Facebook" shareImgPath="https://graphics.reuters.com/world-coronavirus-tracker-and-maps/assets/images/share.jpg" shareImgAlt="An image showing global COVID infection rates" publishTime="2020-09-15T00:00:00.000Z" @@ -75,3 +75,6 @@ shareImgAlt: Alt text for share image. ``` > **Note:** For _reasons_, we can't document the value of `VITE_BASE_URL` below. It's `import` + `.meta.env.BASE_URL` (concatenate all that) in the Graphics Kit and other Vite-based rigs. + + +``` diff --git a/src/components/SEO/SEO.stories.svelte b/src/components/SEO/SEO.stories.svelte index d8fba939..967bd0dd 100644 --- a/src/components/SEO/SEO.stories.svelte +++ b/src/components/SEO/SEO.stories.svelte @@ -8,14 +8,19 @@ }); +
View page source to see the SEO metadata.
- View page source to see the SEO metadata. - +/> diff --git a/src/components/SEO/SEO.svelte b/src/components/SEO/SEO.svelte index 6afeb156..a9018264 100644 --- a/src/components/SEO/SEO.svelte +++ b/src/components/SEO/SEO.svelte @@ -7,61 +7,43 @@ interface Props { /** - * Base url for the page, which in [Vite-based projects](https://vitejs.dev/guide/build.html#public-base-path) - * is globally available as `import.meta.env.BASE_URL`. - * @requiredx - * @type {string} + * Base url for the page, which in [Vite-based projects](https://vitejs.dev/guide/build.html#public-base-path) is globally available as `import.meta.env.BASE_URL`. */ - baseUrl?: string; + baseUrl: string; /** * [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object for the page. - * @required - * @type {URL} */ - pageUrl?: URL | null; + pageUrl: URL | null; /** * SEO title - * @required - * @type {string} */ seoTitle: string; /** * SEO description - * @required - * @type {string} */ seoDescription: string; /** * Share title - * @required - * @type {string} */ shareTitle: string; /** * Share description - * @required - * @type {string} */ shareDescription: string; /** * Share image path. **Must be an absolute path.** - * @required - * @type {string} */ shareImgPath: string; /** * Share image alt text, up to 420 characters. - * @type {string} */ shareImgAlt?: string; /** * Publish time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString) - * @type {string} */ publishTime?: string; /** * Updated time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString) - * @type {string} */ updateTime?: string; /** @@ -71,7 +53,7 @@ } let { - baseUrl = '', + baseUrl, pageUrl = null, seoTitle, seoDescription, @@ -83,7 +65,6 @@ updateTime = '', authors = [], }: Props = $props(); - const getOrigin = (baseUrl: string) => { try { return new URL(baseUrl).origin; From 0d81047a5e5dcd15fa7d202cfdea89c329746b39 Mon Sep 17 00:00:00 2001 From: hobbes7878 Date: Wed, 12 Mar 2025 10:51:38 +0000 Subject: [PATCH 22/51] don't need a demo for this one --- .../EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte index afdc73a2..80f2fa4a 100644 --- a/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte +++ b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte @@ -10,6 +10,7 @@ Date: Wed, 12 Mar 2025 11:24:35 +0000 Subject: [PATCH 23/51] small cleanup for oxford comma and our standard lorem ipsum --- src/components/InfoBox/InfoBox.mdx | 6 +++--- src/components/InfoBox/InfoBox.stories.svelte | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/InfoBox/InfoBox.mdx b/src/components/InfoBox/InfoBox.mdx index 6d58ae91..9c23d192 100644 --- a/src/components/InfoBox/InfoBox.mdx +++ b/src/components/InfoBox/InfoBox.mdx @@ -6,7 +6,7 @@ import * as InfoBoxStories from './InfoBox.stories.svelte'; # InfoBox -The `InfoBox` component creates a stylised text box that provides additional information that needs to be visually separate from the main content flow, such as methodology, detailed notes about data, and extra context. +The `InfoBox` component creates a stylised text box that provides additional information that needs to be visually separate from the main content flow, such as methodology, detailed notes about data and extra context. ```svelte - + ``` ... well, almost. -Owing to a weird quirk of Svelte's [`@html`](https://svelte.dev/docs/special-tags#html) directive (see [this issue](https://github.com/reuters-graphics/graphics-components/issues/148)), if you want your resulting HTML to be dynamic — e.g., update after a SvelteKit app [hydrates](https://kit.svelte.dev/docs/glossary#hydration) — then you may need to set the included `$staticMarkdown` store to `false` in the browser. +Owing to a weird quirk of Svelte's [`@html`](https://svelte.dev/docs/special-tags#html) directive (see [this issue](https://github.com/reuters-graphics/graphics-components/issues/148)), if you want your resulting HTML to be dynamic — e.g., update after a SvelteKit app [hydrates](https://kit.svelte.dev/docs/glossary#hydration) — then you may need to set the included `staticMarkdown` rune to `{ static: false }` in the browser. -For example, if you're refreshing some data with markdown strings in a SvelteKit project using a [load function](https://kit.svelte.dev/docs/load), set the store to reflect the [`building`](https://kit.svelte.dev/docs/modules#$app-environment-building) variable, which will correctly [prerender](https://kit.svelte.dev/docs/glossary#prerendering) your markdown content AND update it after fresh data is fetched in the browser. +For example, if you're refreshing some data with markdown strings in a SvelteKit project using a [load function](https://kit.svelte.dev/docs/load), set the rune to reflect the [`building`](https://kit.svelte.dev/docs/modules#$app-environment-building) variable, which will correctly [prerender](https://kit.svelte.dev/docs/glossary#prerendering) your markdown content AND update it after fresh data is fetched in the browser. ```javascript // +layout.js @@ -31,8 +31,8 @@ import { building } from '$app/environment'; /** @type {import('./$types').LayoutLoad} */ export const load = async () => { - // Set the staticMarkdown store with the value of building. - staticMarkdown.set(building); + // Set the staticMarkdown rune with the value of building. + staticMarkdown.static = building; // Now this content will correctly refresh when a reader loads your page. const resp = await fetch( @@ -44,4 +44,4 @@ export const load = async () => { }; ``` -If you're not updating your markdown content as above, you can safely leave the `$staticMarkdown` store alone and your page will do the right thing. +If you're not updating your markdown content as above, you can safely leave the `staticMarkdown` rune alone and your page will do the right thing. diff --git a/src/components/Markdown/Markdown.stories.svelte b/src/components/Markdown/Markdown.stories.svelte index 5c55660a..e2041319 100644 --- a/src/components/Markdown/Markdown.stories.svelte +++ b/src/components/Markdown/Markdown.stories.svelte @@ -11,6 +11,6 @@ diff --git a/src/components/Markdown/Markdown.svelte b/src/components/Markdown/Markdown.svelte index 5f503e4f..084a647c 100644 --- a/src/components/Markdown/Markdown.svelte +++ b/src/components/Markdown/Markdown.svelte @@ -2,11 +2,11 @@ {#if source} - {#if $staticMarkdown} -
- {@html markdown} -
- {:else} -
- {/if} + {#key source} + {#if staticMarkdown.static} +
+ {@html markdown} +
+ {:else} +
+ {/if} + {/key} {/if} +``` + + + +## Adding ARIA descriptions + +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/BeforeAfter.stories.svelte b/src/components/BeforeAfter/BeforeAfter.stories.svelte index d2f79821..4b4ed935 100644 --- a/src/components/BeforeAfter/BeforeAfter.stories.svelte +++ b/src/components/BeforeAfter/BeforeAfter.stories.svelte @@ -1,19 +1,10 @@ - - - - - +
@@ -81,19 +64,19 @@ - + -
+

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

-
+

diff --git a/src/components/BeforeAfter/BeforeAfter.svelte b/src/components/BeforeAfter/BeforeAfter.svelte index e6229af5..293bb582 100644 --- a/src/components/BeforeAfter/BeforeAfter.svelte +++ b/src/components/BeforeAfter/BeforeAfter.svelte @@ -1,73 +1,92 @@ - {#if beforeSrc && beforeAlt && afterSrc && afterAlt} -

- +
+
+ {afterAlt} - + {beforeAlt} - {#if $$slots.beforeOverlay} + {#if beforeOverlay}
- + {@render beforeOverlay()}
{/if} - {#if $$slots.afterOverlay} + {#if afterOverlay}
- + {@render afterOverlay()}
{/if}
- {#if $$slots.caption} - -