Skip to content
Graphics Kit publisher

Building pages

The publisher can work with almost any page builder as long as it outputs files in a pattern the publisher can match to editions for the graphics server. (See Config > Pack locations.)

Directory-based pages

After being built, each page must reside in its own folder and be named index.html. For example, you cannot have about.html; instead, you should have about/index.html.

  • Directorydist
    • about.html ❌ Not allowed!
  • Directorydist
    • Directoryabout
      • index.html ✅ OK

Base paths

You’ll likely want to specify a base path for your pages in your page builder, which will let you build canonical link elements and fully specified paths to your static asses.

<html>
  <head>
    <link rel="canonical" href="https://www.reuters.com/graphics/.../" />
    <link href="https://www.reuters.com/.../styles.css" rel="stylesheet" />
  </head>
  <body></body>
</html>

You can use the getBasePath utility to get the appropriate base path from URLs saved to your package.json by the publisher. The util takes a mode parameter you can use to get different base paths depending on the verion of the project you’re building, either dev, test, preview or prod.

svelte.config.js
import { getBasePath } from '@reuters-graphics/graphics-kit-publisher';


const mode =
  process.env.PREVIEW ? 'preview'
  : process.env.NODE_ENV === 'production' ? 'prod'
  : 'dev';


const basePath = getBasePath(mode, {
  trailingSlash: false,
  rootRelative: true,
});
// e.g., "/graphics/ROOT-SLUG/WILD/asdjuspodfg"
const assetsPath = getBasePath(mode, 'cdn', {
  trailingSlash: false,
  rootRelative: false,
});
// e.g., "https://www.reuters.com/graphics/ROOT-SLUG/WILD/asdjuspodfg/cdn"


/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    paths: {
      base: basePath,
      assets: assetsPath,
    },
  },
};


export default config;

Preview pages

Before calling your preview build script, the publisher generates a unique URL and saves it to your package.json, which you can then use to satisfy page builders’ base path requirements:

package.json
{
  "scripts": {
    "build:preview": "PREVIEW=true vite build"
  },
  "reuters": {
    "graphic": {
      "preview": "https://graphics.thomsonreuters.com/testfiles/2025/your-project/"
    }
  }
}
import { getBasePath } from '@reuters-graphics/graphics-kit-publisher';


const basePath = getBasePath('preview');
// '/testfiles/2025/your-project'

Production pages

You’ll get base URLs from the graphics server for production pages.

The publisher saves these URLs with other pack metadata in your project’s package.json after uploading archives to the graphics server.

But the publisher also needs to see your built files to know which archives to upload.

To get around this issue, the publisher may build your project twice. The first build will be without fully specifed base path URLs. That lets the publisher detect what archives need to be created by scanning your built files.

In short, the uploading process looks like this:

  1. The publisher creates a graphic pack in the graphics server.

  2. Builds a version of the project without base path URLs.

  3. Scans the built files to determine what archives should be uploaded.

  4. Uploads dummy files for any archives found to get a URL from the graphics server and saves those URLs to package.json.

  5. Builds the production version of the project, which can now use the saved URLs to configure the project’s base path and create canonical links in the built pages.

  6. Updates the dummy archives in the graphics server with the real files.

Preview images

Interactive edition pages must have an image to represent them in the graphics server and on Reuters Connect.

If your image is included in the assets generated by your page builder (i.e., is not hosted somewhere else), you can include an og:image tag directly in the page:

<html>
  <head>
    <link rel="canonical" href="https://www.reuters.com/graphics/.../" />
    <meta
      property="og:image"
      content="https://www.reuters.com/graphics/.../share.jpg"
    />
  </head>
  <body></body>
</html>

Alternatively, your page builder can output the image in the same directory as your page and name it either _gfxpreview.png or _gfxpreview.jpg.

  • Directorydist
    • Directoryembeds
      • Directoryen
        • Directorypage
          • index.html
          • _gfxpreview.jpg