Skip to content
Reuters graphics kit

Adding more pages

You can add additional pages — whether for dotcom or embeddable graphics — to your project in the pages/ directory.

Making pages is generally described in SvelteKit’s docs, except the graphics kit uses a pages/ directory for pages instead of SvelteKit’s default src/routes/.

SvelteKit: Routing

Adding pages

  • Directorypages
    • +page.svelte Project homepage
    • Directoryanother
      • +page.svelte New page

Add new pages at least one directory below your project homepage.

Required metadata

Be sure you new page includes required metadata, usually provided by the SEO component from the Reuters graphics components library. Your new page should have unique title and description for SEO and share metadata as well as, preferrably, a unique share image.

It’s probably a good idea to include this metadata in a separate ArchieML doc.

pages/another/+page.svelte
<script>
import { SEO } from '@reuters-graphics/graphics-components';
import pkg from '$pkg';
import { page } from '$app/state';
import { asset } from '$app/paths';


// A separate RNGS.io story doc
import { story as content } from '$locales/en/anotherPage.json';
</script>


<SEO
  baseUrl={__BASE_URL__}
  pageUrl={page.url}
  seoTitle={content.seoTitle}
  seoDescription={content.seoDescription}
  shareTitle={content.shareTitle}
  shareDescription={content.shareDescription}
  shareImgPath={asset('/another-page-share.jpg')}
  shareImgAlt={content.shareImgAlt}
  publishTime={pkg?.reuters?.graphic?.published}
  updateTime={pkg?.reuters?.graphic?.updated}
  authors={pkg?.reuters?.graphic?.authors}
/>

__BASE_URL__ is the fully specified base URL for your project. It’s injected at build time in vite.config.ts and available as a global anywhere in your app — no import needed. The SEO component uses it to build canonical and share URLs with the correct origin.

Adding embeds

Embeddable graphics should be created in an embeds/ directory and then must be two more folders deep. The first must be named after a valid language code and the second must be a slug identifying the embed, for example, embeds/en/map/ below.

  • Directorypages
    • Directoryembeds
      • Directoryen Language code
        • Directorypage
          • +page.svelte
        • Directorymap Embed slug
          • +page.svelte New embeddable page

Required metadata

Embed pages have their own metadata component: the EmbedMetadata component from the Reuters graphics components library. Use it on embed pages instead of the SEO component, which is meant for full, standalone pages.

EmbedMetadata renders only what an embed needs — a canonical link, an og:image and a noindex, nofollow, noarchive robots metatag so search engines don’t surface the embed on its own — and it mounts the PymChild component for you, so you don’t need to add it separately.

pages/embeds/en/map/+page.svelte
<script lang="ts">
  import { EmbedMetadata } from '@reuters-graphics/graphics-components';
  import { page } from '$app/state';
  import { asset } from '$app/paths';
  // ...
</script>


<EmbedMetadata
  baseUrl={__BASE_URL__}
  pageUrl={page.url}
  previewImgPath={asset('/another-page-share.jpg')}
  polling={500}
/>


<!-- ... -->