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 { assets } from '$app/paths';


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


<SEO
  baseUrl={import.meta.env.BASE_URL}
  pageUrl={page.url}
  seoTitle={content.seoTitle}
  seoDescription={content.seoDescription}
  shareTitle={content.shareTitle}
  shareDescription={content.shareDescription}
  shareImgPath="{assets}/another-page-share.jpg"
  shareImgAlt={content.shareImgAlt}
  publishTime={pkg?.reuters?.graphic?.published}
  updateTime={pkg?.reuters?.graphic?.updated}
  authors={pkg?.reuters?.graphic?.authors}
/>

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 must have a canonical link element and should have a robots metatag with noindex, nofollow to tell search engines not to surface the page in search results.

//
<script lang="ts">
  import { SEO } from '@reuters-graphics/graphics-components';
  import { page } from '$app/state';
  import { assets } from '$app/paths';
  import { PymChild } from '@reuters-graphics/graphics-components';
  // ...
</script>


<SEO
  baseUrl={import.meta.env.BASE_URL}
  pageUrl={page.url}
  shareImgPath="{assets}/another-page-share.jpg"
/>


<svelte:head>
  <meta name="robots" content="noindex, nofollow" />
</svelte:head>


<!-- ... -->


<PymChild polling={500} />