From 9b555434b4d10dd30e7a851b72a6babe42f30f2e Mon Sep 17 00:00:00 2001 From: MinamiFunakoshiTR Date: Wed, 5 Mar 2025 14:05:34 -0800 Subject: [PATCH 01/12] 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 08/12] 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 0d81047a5e5dcd15fa7d202cfdea89c329746b39 Mon Sep 17 00:00:00 2001 From: hobbes7878 Date: Wed, 12 Mar 2025 10:51:38 +0000 Subject: [PATCH 11/12] 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 12/12] 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