wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

docs

Browse source
This commit is contained in:
hobbes7878 2025-04-20 12:22:18 +01:00
parent aca5453b42
commit 1a4f035555
Failed to extract signature
24 changed files with 63 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/Article/Article.mdx
View file

@ -8,7 +8,7 @@ import * as ArticleStories from './Article.stories.svelte';
The `Article` component contains all the contents of our story. 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 ```svelte
<script> <script>
@ -36,7 +36,7 @@ The `Article` component also establishes the widths of columns that contain indi
You can set custom column widths by passing an object to the `columnWidths` prop with pixel values for the `narrower`, `narrow`, `normal`, `wide` and `wider` classes. These can then be used by the `Block` component or other elements housed inside `<Article>`. You can set custom column widths by passing an object to the `columnWidths` prop with pixel values for the `narrower`, `narrow`, `normal`, `wide` and `wider` classes. These can then be used by the `Block` component or other elements housed inside `<Article>`.
> **For most Graphics Kit pages, you shouldn't customise the column widths.** Other Reuters tools, like our AI templates, use our default column widths, so customising those widths here has downstream consequences for graphics made outside Graphics Kit. The main exception is SREP stories. > **For most graphics kit pages, you shouldn't customise the column widths.** Other Reuters tools, like our AI templates, use our default column widths, so customising those widths here has downstream consequences for graphics made outside graphics kit. The main exception is SREP stories.
```svelte ```svelte
<!-- Set custom column widths --> <!-- Set custom column widths -->

4
src/components/BeforeAfter/BeforeAfter.mdx
View file

@ -11,7 +11,7 @@ The `BeforeAfter` component shows a before-and-after comparison of an image.
```svelte ```svelte
<script> <script>
import { BeforeAfter } from '@reuters-graphics/graphics-components'; import { BeforeAfter } from '@reuters-graphics/graphics-components';
import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit... import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
</script> </script>
<BeforeAfter <BeforeAfter
@ -26,7 +26,7 @@ The `BeforeAfter` component shows a before-and-after comparison of an image.
## Using with ArchieML docs ## 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 ```yaml
# ArchieML doc # ArchieML doc

2
src/components/BodyText/BodyText.mdx
View file

@ -30,7 +30,7 @@ Venison shoulder *ham hock ham leberkas*. Flank beef ribs fatback, jerky meatbal
## Using with ArchieML docs ## 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 ```yaml
# ArchieML doc # ArchieML doc

2
src/components/Byline/Byline.mdx
View file

@ -27,7 +27,7 @@ The `Byline` component adds a byline, published and updated datelines to your pa
## Using with ArchieML docs ## 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 ```yaml
# ArchieML doc # ArchieML doc

4
src/components/EndNotes/EndNotes.mdx
View file

@ -35,7 +35,7 @@ The `EndNotes` component adds notes such as sources, clarifiying notes and minor
## Using with ArchieML docs ## 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 ```yaml
# ArchieML doc # ArchieML doc
@ -54,7 +54,7 @@ text: Editor, Copyeditor
... which you'll pass to the `EndNotes` component. ... which you'll pass to the `EndNotes` component.
```svelte ```svelte
<!-- Graphics Kit --> <!-- graphics kit -->
<script> <script>
import { EndNotes } from '@reuters-graphics/graphics-components'; import { EndNotes } from '@reuters-graphics/graphics-components';

4
src/components/FeaturePhoto/FeaturePhoto.mdx
View file

@ -11,7 +11,7 @@ The `FeaturePhoto` component adds a full-width photo.
```svelte ```svelte
<script> <script>
import { FeaturePhoto } from '@reuters-graphics/graphics-components'; import { FeaturePhoto } from '@reuters-graphics/graphics-components';
import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit... import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
</script> </script>
<FeaturePhoto <FeaturePhoto
@ -25,7 +25,7 @@ The `FeaturePhoto` component adds a full-width photo.
## Using with ArchieML docs ## 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 ```yaml
# ArchieML doc # ArchieML doc

2
src/components/Framer/Framer.mdx
View file

@ -6,7 +6,7 @@ import * as FramerStories from './Framer.stories.svelte';
# FeaturePhoto # FeaturePhoto
An embed tool for development in the Graphics Kit. An embed tool for development in the graphics kit.
```svelte ```svelte
<script> <script>

2
src/components/Framer/stories/docs/component.md
View file

@ -1,4 +1,4 @@
An embed tool for development in the Graphics Kit. An embed tool for development in the graphics kit.
```svelte ```svelte
<script> <script>

10
src/components/GraphicBlock/GraphicBlock.mdx
View file

@ -29,7 +29,7 @@ Many other Reuters Graphics components use `GraphicBlock` to wrap graphics with
## Using with ai2svelte and ArchieML docs ## Using with ai2svelte and ArchieML docs
The `GraphicBlock` component is built to handle [ai2svelte](https://github.com/reuters-graphics/ai2svelte) graphics in Graphics Kit. The `GraphicBlock` component is built to handle [ai2svelte](https://github.com/reuters-graphics/ai2svelte) graphics in graphics kit.
You'll likely get your text value from an ArchieML doc... You'll likely get your text value from an ArchieML doc...
@ -64,7 +64,7 @@ To pass your ai2svelte graphic into `GraphicBlock` component, import your ai2sve
// Error handler for missing ai2svelte charts // Error handler for missing ai2svelte charts
import LogBlock from './components/dev/LogBlock.svelte'; import LogBlock from './components/dev/LogBlock.svelte';
// If using with the Graphics Kit // If using with the graphics kit
import { assets } from '$app/paths'; import { assets } from '$app/paths';
// A built-in helper function in Graphis Kit for validating container width // A built-in helper function in Graphis Kit for validating container width
@ -94,7 +94,7 @@ To pass your ai2svelte graphic into `GraphicBlock` component, import your ai2sve
notes={block.notes} notes={block.notes}
ariaDescription={block.altText} ariaDescription={block.altText}
> >
<!-- In Graphics Kit, pass the `assetsPath` prop --> <!-- In graphics kit, pass the `assetsPath` prop -->
<AiChart assetsPath={assets || '/'} /> <AiChart assetsPath={assets || '/'} />
</GraphicBlock> </GraphicBlock>
{/if} {/if}
@ -144,7 +144,7 @@ The `ariaDescription` string will be processed as markdown, so you can add multi
notes="Note: A shakemap represents the ground shaking produced by an earthquake." notes="Note: A shakemap represents the ground shaking produced by an earthquake."
ariaDescription="A map showing the shake intensity produced by the earthquake." ariaDescription="A map showing the shake intensity produced by the earthquake."
> >
<!-- In Graphics Kit, pass the `assetsPath` prop --> <!-- In graphics kit, pass the `assetsPath` prop -->
<AiChart assetsPath={assets || '/'} /> <AiChart assetsPath={assets || '/'} />
</GraphicBlock> </GraphicBlock>
``` ```
@ -165,7 +165,7 @@ Sometimes, instead of a simple sentence, we want to provide a data table or some
description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021." description="The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021."
notes="Note: A shakemap represents the ground shaking produced by an earthquake." notes="Note: A shakemap represents the ground shaking produced by an earthquake."
> >
<!-- In Graphics Kit, pass the `assetsPath` prop --> <!-- In graphics kit, pass the `assetsPath` prop -->
<AiChart assetsPath={assets || '/'} /> <AiChart assetsPath={assets || '/'} />
<!-- Custom ARIA description snippet --> <!-- Custom ARIA description snippet -->

2
src/components/Headline/Headline.mdx
View file

@ -141,7 +141,7 @@ Add a full graphic or any other component in the crown.
> >
<!-- Add a crown graphic --> <!-- Add a crown graphic -->
{#snippet crown()} {#snippet crown()}
<!-- Pass `assetsPath` if in Graphics Kit --> <!-- Pass `assetsPath` if in graphics kit -->
<Map assetsPath={assets || '/'} /> <Map assetsPath={assets || '/'} />
{/snippet} {/snippet}
</Headline> </Headline>

20
src/components/HeroHeadline/HeroHeadline.mdx
View file

@ -18,9 +18,9 @@ To use a photo as the hero, simply pass the image source to the `img` prop.
<!-- App.svelte --> <!-- App.svelte -->
<script> <script>
import { HeroHeadline } from '@reuters-graphics/graphics-components'; import { HeroHeadline } from '@reuters-graphics/graphics-components';
import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit... import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
let { embedded = false } = $props(); // 👈 If using in the Graphics Kit... let { embedded = false } = $props(); // 👈 If using in the graphics kit...
</script> </script>
<HeroHeadline <HeroHeadline
@ -75,9 +75,9 @@ To customise styles, use CSS to target the class passed to `HeroHeadline`.
import QuakeMap from './ai2svelte/graphic.svelte'; // Your ai2svelte component import QuakeMap from './ai2svelte/graphic.svelte'; // Your ai2svelte component
import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit... import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
let { embedded = false } = $props(); // 👈 If using in the Graphics Kit... let { embedded = false } = $props(); // 👈 If using in the graphics kit...
</script> </script>
<HeroHeadline <HeroHeadline
@ -105,7 +105,7 @@ To customise styles, use CSS to target the class passed to `HeroHeadline`.
class="my-0" class="my-0"
ariaDescription="Earthquake impact map" ariaDescription="Earthquake impact map"
> >
<!-- Pass `assetsPath` if in Graphics Kit --> <!-- Pass `assetsPath` if in graphics kit -->
<QuakeMap assetsPath={assets || '/'} /> <QuakeMap assetsPath={assets || '/'} />
</GraphicBlock> </GraphicBlock>
</HeroHeadline> </HeroHeadline>
@ -162,9 +162,9 @@ To add a video as the hero, use the [Video](?path=/docs/components-multimedia-vi
```svelte ```svelte
<script> <script>
import { HeroHeadline, Video } from '@reuters-graphics/graphics-components'; import { HeroHeadline, Video } from '@reuters-graphics/graphics-components';
import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit... import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
let { embedded = false } = $props(); // 👈 If using in the Graphics Kit... let { embedded = false } = $props(); // 👈 If using in the graphics kit...
</script> </script>
<HeroHeadline <HeroHeadline
@ -224,9 +224,9 @@ To use a photo, graphic, video, etc. as an inline hero -- i.e., to make the hero
HeroHeadline, HeroHeadline,
GraphicBlock, GraphicBlock,
} from '@reuters-graphics/graphics-components'; } from '@reuters-graphics/graphics-components';
import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit... import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
let { embedded = false } = $props(); // 👈 If using in the Graphics Kit... let { embedded = false } = $props(); // 👈 If using in the graphics kit...
</script> </script>
<!-- Set `stacked` to `false` --> <!-- Set `stacked` to `false` -->
@ -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" ariaDescription="Earthquake impact map"
notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus" notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
> >
<!-- Pass `assetsPath` if in Graphics Kit --> <!-- Pass `assetsPath` if in graphics kit -->
<CrashMap assetsPath={assets || '/'} /> <CrashMap assetsPath={assets || '/'} />
</GraphicBlock> </GraphicBlock>
</HeroHeadline> </HeroHeadline>

4
src/components/InfoBox/InfoBox.mdx
View file

@ -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. ... which you'll parse out of a ArchieML block object before passing to the `InfoBox` component.
```svelte ```svelte
<!-- Graphics Kit --> <!-- graphics kit -->
<script> <script>
import { InfoBox } from '@reuters-graphics/graphics-components'; import { InfoBox } from '@reuters-graphics/graphics-components';
import content from '$locales/en/content.json'; import content from '$locales/en/content.json';
</script> </script>
# Graphics Kit # Graphics kit
{#each content.blocks as block} {#each content.blocks as block}
{#if block.type === 'info-box'} {#if block.type === 'info-box'}
<InfoBox title={block.title} text={block.text} notes={block.notes} /> <InfoBox title={block.title} text={block.text} notes={block.notes} />

6
src/components/PhotoPack/PhotoPack.mdx
View file

@ -59,7 +59,7 @@ You can define as many layouts for as many images as you like.
## Using with ArchieML docs ## 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 ```yaml
# ArchieML doc # ArchieML doc
@ -95,14 +95,14 @@ gap: 10 # Optional; must be a number.
<!-- App.svelte --> <!-- App.svelte -->
<script> <script>
import { PhotoPack } from '@reuters-graphics/graphics-components'; import { PhotoPack } from '@reuters-graphics/graphics-components';
import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit... import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
import content from '$locales/en/content.json'; import content from '$locales/en/content.json';
</script> </script>
{#each content.blocks as block} {#each content.blocks as block}
{#if block.type === 'photo-pack'} {#if block.type === 'photo-pack'}
<!-- Pass `assets` into the image source in Graphics Kit --> <!-- Pass `assets` into the image source in graphics kit -->
<PhotoPack <PhotoPack
id={block.id} id={block.id}
class={block.class} class={block.class}

4
src/components/SEO/SEO.mdx
View file

@ -35,7 +35,7 @@ The `SEO` component adds essential metadata to pages.
## Using with ArchieML docs ## Using with ArchieML docs
With the Graphics Kit, you'll likely get many of your text values from an ArchieML doc... With the graphics kit, you'll likely get many of your text values from an ArchieML doc...
```yaml ```yaml
# ArchieML doc # ArchieML doc
@ -74,7 +74,7 @@ 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. > **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.
<Canvas of={SEOStories.Demo} /> <Canvas of={SEOStories.Demo} />
``` ```

22
src/components/Scroller/Scroller.mdx
View file

@ -48,7 +48,7 @@ The `Scroller` component creates a basic scrollytelling graphic with layout opti
[Demo](?path=/story/components-graphics-scroller--archie-ml) [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 ```svelte
<!-- App.svelte --> <!-- App.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'; import content from '$locales/en/content.json';
// Graphics Kit only // Graphics kit only
import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit... import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
import { truthy } from '$utils/propValidators'; // 👈 If using in the Graphics Kit... import { truthy } from '$utils/propValidators'; // 👈 If using in the graphics kit...
const aiCharts = { const aiCharts = {
AiMap1, AiMap1,
@ -136,9 +136,9 @@ Then parse the relevant ArchieML block object before passing to the `Scroller` c
{/each} {/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 ## 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. 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 ```svelte
<!-- App.svelte --> <!-- App.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. // Foreground components, which can be ai2svelte or not.
import Foreground1 from './ai2svelte/my-foreground-1.svelte'; import Foreground1 from './ai2svelte/my-foreground-1.svelte';
// Graphics Kit only // Graphics kit only
import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit... import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
import { truthy } from '$utils/propValidators'; // 👈 If using in the Graphics Kit... import { truthy } from '$utils/propValidators'; // 👈 If using in the graphics kit...
// Background ai2svelte graphics components // Background ai2svelte graphics components
const aiCharts = { const aiCharts = {
@ -276,4 +276,4 @@ Then parse the relevant ArchieML block object before passing to the `Scroller` c
{/each} {/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.

2
src/components/SimpleTimeline/SimpleTimeline.mdx
View file

@ -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. ... which you'll pass to the `SimpleTimeline` component.
```svelte ```svelte
<!-- Graphics Kit --> <!-- Graphics kit -->
<script> <script>
import { SimpleTimeline } from '@reuters-graphics/graphics-components'; import { SimpleTimeline } from '@reuters-graphics/graphics-components';
import content from '$locales/en/content.json'; import content from '$locales/en/content.json';

2
src/components/SiteFooter/SiteFooter.mdx
View file

@ -8,7 +8,7 @@ import * as SiteFooterStories from './SiteFooter.stories.svelte';
Reuters dotcom site footer with graphics referrals, ported from [Raptor UI components](https://github.com/tr/rcom-arc_raptor-ui/tree/develop/packages/rcom-raptor-ui_common/src/components/site-footer). Reuters dotcom site footer with graphics referrals, ported from [Raptor UI components](https://github.com/tr/rcom-arc_raptor-ui/tree/develop/packages/rcom-raptor-ui_common/src/components/site-footer).
> **Note:** In the Graphics Kit, you can find this component in `pages/+page.svelte`. Customise it there for the default page. > **Note:** In the graphics kit, you can find this component in `pages/+page.svelte`. Customise it there for the default page.
```svelte ```svelte
<script> <script>

2
src/components/SiteHeader/SiteHeader.mdx
View file

@ -8,7 +8,7 @@ import * as SiteHeaderStories from './SiteHeader.stories.svelte';
Reuters dotcom site header, ported from [Raptor UI components](https://github.com/tr/rcom-arc_raptor-ui/tree/develop/packages/rcom-raptor-ui_common/src/components/site-header). Reuters dotcom site header, ported from [Raptor UI components](https://github.com/tr/rcom-arc_raptor-ui/tree/develop/packages/rcom-raptor-ui_common/src/components/site-header).
> **Note:** In the Graphics Kit, you can find this component in `pages/+page.svelte`. Customise it there for the default page. > **Note:** In the graphics kit, you can find this component in `pages/+page.svelte`. Customise it there for the default page.
```svelte ```svelte
<script> <script>

2
src/components/SiteHeadline/SiteHeadline.mdx
View file

@ -32,7 +32,7 @@ Styles for this headline are intentionally restricted. It is meant to serve as a
## Using with ArchieML docs ## 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 ```yaml
# ArchieML doc # ArchieML doc

6
src/components/Theme/Theme.mdx
View file

@ -20,7 +20,7 @@ Use the [theme builder](?path=/docs/components-theming-theme-builder--docs) to t
</Theme> </Theme>
``` ```
> In Graphics Kit, the `Theme` is set in both `pages/+page.svelte` and in `App.svelte`. > In the graphics kit, the `Theme` is set in both `pages/+page.svelte` and in `App.svelte`.
<Canvas of={ThemeStories.Demo} /> <Canvas of={ThemeStories.Demo} />
@ -58,12 +58,12 @@ Use the [theme builder](?path=/docs/components-theming-theme-builder--docs) to s
## Custom font ## Custom font
To use typefaces other than the defaults provided by the Graphics Kit, download the font files from services such as [Google Fonts](https://fonts.google.com/) or [Adobe Typekit](https://fonts.adobe.com/). Make a folder called `fonts` inside `statics/` and put the font file -- for example, `IndieFlower-Regular.ttf` downloaded from [Google Fonts](https://fonts.google.com/share?selection.family=Indie+Flower) -- in `statics/fonts/`. To use typefaces other than the defaults provided by the graphics kit, download the font files from services such as [Google Fonts](https://fonts.google.com/) or [Adobe Typekit](https://fonts.adobe.com/). Make a folder called `fonts` inside `statics/` and put the font file -- for example, `IndieFlower-Regular.ttf` downloaded from [Google Fonts](https://fonts.google.com/share?selection.family=Indie+Flower) -- in `statics/fonts/`.
Then, declare it as a `@font-face` in `global.scss`: Then, declare it as a `@font-face` in `global.scss`:
```scss ```scss
/* global.scss in Graphics Kit */ /* global.scss in the graphics kit */
@font-face { @font-face {
// If you're unsure of the font-family name, // If you're unsure of the font-family name,
// click on "Get embed code" on the Google font page and check the CSS class. // click on "Get embed code" on the Google font page and check the CSS class.

8
src/components/Video/Video.mdx
View file

@ -31,7 +31,7 @@ The `Video` component adds a video with various controls to your page such as:
## Using with ArchieML docs ## 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 ```yaml
# ArchieML doc # ArchieML doc
@ -51,8 +51,8 @@ loopVideo: true
<!-- App.svelte --> <!-- App.svelte -->
<script> <script>
import { Video } from '@reuters-graphics/graphics-components'; import { Video } from '@reuters-graphics/graphics-components';
import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit... import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
import { truthy } from '$utils/propValidators'; // 👈 If using in the Graphics Kit... import { truthy } from '$utils/propValidators'; // 👈 If using in the graphics kit...
</script> </script>
{#each content.blocks as block} {#each content.blocks as block}
@ -68,7 +68,7 @@ loopVideo: true
{/each} {/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 ## Autoplay controls

2
src/docs/guides/archieml.mdx
View file

@ -163,7 +163,7 @@ For example, we're converting Tom's age into a number with JavaScript's [parseIn
{block.isGood === 'true'} {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 ```svelte
{`${assets}/${block.picture}`} {`${assets}/${block.picture}`}

8
src/docs/guides/graphics-kit.mdx
View file

@ -3,13 +3,13 @@ import { parameters } from '../utils/docsPage.js';
import Highlight from '../docs-components/Highlight/Highlight'; import Highlight from '../docs-components/Highlight/Highlight';
<Meta <Meta
title="Guides/Using with the Graphics Kit" title="Guides/Using with the graphics kit"
parameters={{ ...parameters }} parameters={{ ...parameters }}
/> />
# 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:** **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` ❌ `./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 ```svelte
<script> <script>

2
src/docs/styles/intro.mdx
View file

@ -9,7 +9,7 @@ This library also includes our main SCSS stylesheets with pre-defined classes yo
### Importing our main stylesheet ### Importing our main stylesheet
Import the SCSS directly in your top-level component. (This is done for you in the Graphics Kit.) Import the SCSS directly in your top-level component. (This is done for you in the graphics kit.)
```svelte ```svelte
<!-- pages/index.svelte --> <!-- pages/index.svelte -->