diff --git a/src/components/Article/Article.mdx b/src/components/Article/Article.mdx index be645601..8015229e 100644 --- a/src/components/Article/Article.mdx +++ b/src/components/Article/Article.mdx @@ -8,7 +8,7 @@ import * as ArticleStories from './Article.stories.svelte'; The `Article` component contains all the contents of our story. -> 📌 In most cases, **you don't need to mess with the `Article` component** because it's already set up in the Graphics Kit. +> 📌 In most cases, **you don't need to mess with the `Article` component** because it's already set up in the graphics kit. ```svelte + diff --git a/src/components/Framer/stories/docs/component.md b/src/components/Framer/stories/docs/component.md index 01ad9baf..05f26772 100644 --- a/src/components/Framer/stories/docs/component.md +++ b/src/components/Framer/stories/docs/component.md @@ -1,4 +1,4 @@ -An embed tool for development in the Graphics Kit. +An embed tool for development in the graphics kit. ```svelte - + @@ -162,9 +162,9 @@ To add a video as the hero, use the [Video](?path=/docs/components-multimedia-vi ```svelte @@ -247,7 +247,7 @@ To use a photo, graphic, video, etc. as an inline hero -- i.e., to make the hero ariaDescription="Earthquake impact map" notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus" > - + diff --git a/src/components/InfoBox/InfoBox.mdx b/src/components/InfoBox/InfoBox.mdx index 9c23d192..1704e587 100644 --- a/src/components/InfoBox/InfoBox.mdx +++ b/src/components/InfoBox/InfoBox.mdx @@ -43,13 +43,13 @@ notes: [Read more about our methodology](https://www.reuters.com/world-coronavir ... which you'll parse out of a ArchieML block object before passing to the `InfoBox` component. ```svelte - + -# Graphics Kit +# Graphics kit {#each content.blocks as block} {#if block.type === 'info-box'} diff --git a/src/components/PhotoPack/PhotoPack.mdx b/src/components/PhotoPack/PhotoPack.mdx index dd1fecc5..c6fefd49 100644 --- a/src/components/PhotoPack/PhotoPack.mdx +++ b/src/components/PhotoPack/PhotoPack.mdx @@ -59,7 +59,7 @@ You can define as many layouts for as many images as you like. ## Using with ArchieML docs -With the Graphics Kit, you'll likely get your text value from an ArchieML doc... +With the graphics kit, you'll likely get your text value from an ArchieML doc... ```yaml # ArchieML doc @@ -95,14 +95,14 @@ gap: 10 # Optional; must be a number. {#each content.blocks as block} {#if block.type === 'photo-pack'} - + ``` -> **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. +> **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/Scroller/Scroller.mdx b/src/components/Scroller/Scroller.mdx index dcb8c042..31c9de51 100644 --- a/src/components/Scroller/Scroller.mdx +++ b/src/components/Scroller/Scroller.mdx @@ -48,7 +48,7 @@ The `Scroller` component creates a basic scrollytelling graphic with layout opti [Demo](?path=/story/components-graphics-scroller--archie-ml) -In your Graphics Kit project, import your ai2svelte graphics in `App.svelte` and add them to the `aiCharts` object: +In your graphics kit project, import your ai2svelte graphics in `App.svelte` and add them to the `aiCharts` object: ```svelte @@ -59,9 +59,9 @@ In your Graphics Kit project, import your ai2svelte graphics in `App.svelte` and import content from '$locales/en/content.json'; - // Graphics Kit only - import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit... - import { truthy } from '$utils/propValidators'; // 👈 If using in the Graphics Kit... + // Graphics kit only + import { assets } from '$app/paths'; // 👈 If using in the graphics kit... + import { truthy } from '$utils/propValidators'; // 👈 If using in the graphics kit... const aiCharts = { AiMap1, @@ -136,9 +136,9 @@ Then parse the relevant ArchieML block object before passing to the `Scroller` c {/each} ``` -> **Note:** Some props, like `stackBackground`, expect boolean values. If you're using the Graphics Kit, use the `truthy()` util function to convert a string value to a boolean. +> **Note:** Some props, like `stackBackground`, expect boolean values. If you're using the graphics kit, use the `truthy()` util function to convert a string value to a boolean. -> **Note:** In Graphics Kit, the image source paths in ai2svelte components have to be fixed by passing `assets` to each step object, like in the example above. +> **Note:** In the graphics kit, the image source paths in ai2svelte components have to be fixed by passing `assets` to each step object, like in the example above. ## Custom foreground @@ -182,7 +182,7 @@ If you're customising your own foreground component, remember to add alt text th You can use custom foreground components with ArchieML with a few additional steps. -In your Graphics Kit project's `App.svelte`, import your custom foregroud components and add them to a `foregroundComponents` object, just as you import ai2svelte background graphics and add them to the `aiCharts` object: +In your graphics kit project's `App.svelte`, import your custom foregroud components and add them to a `foregroundComponents` object, just as you import ai2svelte background graphics and add them to the `aiCharts` object: ```svelte @@ -197,9 +197,9 @@ In your Graphics Kit project's `App.svelte`, import your custom foregroud compon // Foreground components, which can be ai2svelte or not. import Foreground1 from './ai2svelte/my-foreground-1.svelte'; - // Graphics Kit only - import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit... - import { truthy } from '$utils/propValidators'; // 👈 If using in the Graphics Kit... + // Graphics kit only + import { assets } from '$app/paths'; // 👈 If using in the graphics kit... + import { truthy } from '$utils/propValidators'; // 👈 If using in the graphics kit... // Background ai2svelte graphics components const aiCharts = { @@ -276,4 +276,4 @@ Then parse the relevant ArchieML block object before passing to the `Scroller` c {/each} ``` -> **Note:** You only need to pass `foregroundProps: { assetsPath: assets || '/' }` in Graphics Kit if your foreground components are ai2svelte graphicss. +> **Note:** You only need to pass `foregroundProps: { assetsPath: assets || '/' }` in the graphics kit if your foreground components are ai2svelte graphicss. diff --git a/src/components/SimpleTimeline/SimpleTimeline.mdx b/src/components/SimpleTimeline/SimpleTimeline.mdx index 205bf945..7ff74758 100644 --- a/src/components/SimpleTimeline/SimpleTimeline.mdx +++ b/src/components/SimpleTimeline/SimpleTimeline.mdx @@ -66,7 +66,7 @@ titleLink: https://www.reuters.com/world/us-house-vote-40-billion-ukraine-aid-pa ... which you'll pass to the `SimpleTimeline` component. ```svelte - + {#each content.blocks as block} @@ -68,7 +68,7 @@ loopVideo: true {/each} ``` -> **Note:** Some props, like `loopVideo`, expect boolean values. If you're using the Graphics Kit, you can use the `truthy()` util function to convert a string value to a boolean. +> **Note:** Some props, like `loopVideo`, expect boolean values. If you're using the graphics kit, you can use the `truthy()` util function to convert a string value to a boolean. ## Autoplay controls diff --git a/src/docs/guides/archieml.mdx b/src/docs/guides/archieml.mdx index 91b88c46..80b69c57 100644 --- a/src/docs/guides/archieml.mdx +++ b/src/docs/guides/archieml.mdx @@ -163,7 +163,7 @@ For example, we're converting Tom's age into a number with JavaScript's [parseIn {block.isGood === 'true'} ``` -**Especially note** how we're using the `assets` module we talked about in ["Using with the Graphics Kit"](./?path=/docs/guides-using-with-the-graphics-kit--docs) to turn the _relative_ path to Tom's profile pic in our ArchieML doc into an _absolute_ path that will have the full `https://reuters.com...` bit attached. +**Especially note** how we're using the `assets` module we talked about in ["Using with the graphics kit"](./?path=/docs/guides-using-with-the-graphics-kit--docs) to turn the _relative_ path to Tom's profile pic in our ArchieML doc into an _absolute_ path that will have the full `https://reuters.com...` bit attached. ```svelte {`${assets}/${block.picture}`} diff --git a/src/docs/guides/graphics-kit.mdx b/src/docs/guides/graphics-kit.mdx index dd24c69b..698f9d87 100644 --- a/src/docs/guides/graphics-kit.mdx +++ b/src/docs/guides/graphics-kit.mdx @@ -3,13 +3,13 @@ import { parameters } from '../utils/docsPage.js'; import Highlight from '../docs-components/Highlight/Highlight'; -# Using with the Graphics Kit +# Using with the graphics kit -Our graphics components are designed to work seemlessly with the [Graphics Kit](https://github.com/reuters-graphics/bluprint_graphics-kit) as well as just about any Svelte-based page builder. +Our graphics components are designed to work seemlessly with the [graphics kit](https://github.com/reuters-graphics/bluprint_graphics-kit) as well as just about any Svelte-based page builder. **There is, however, one gotcha to watch out for:** @@ -19,7 +19,7 @@ When working with multimedia files like images or videos, components expect all ❌ `./myImage.jpg` -In the Graphics Kit, that means you'll need to prefix relative paths with the special [`assets`](https://svelte.dev/docs/kit/$app-paths#assets) SvelteKit module that contains the root URL for your project. Many examples in these docs show how to do it. But it's also easy enough to demo again here! +In the graphics kit, that means you'll need to prefix relative paths with the special [`assets`](https://svelte.dev/docs/kit/$app-paths#assets) SvelteKit module that contains the root URL for your project. Many examples in these docs show how to do it. But it's also easy enough to demo again here! ```svelte