Skip to content
Reuters graphics kit

Project structure

Main directories

  • Directorylocales
    • … Text content from ArchieML docs
  • Directorymedia-assets
    • … Statics for media clients
  • Directorypages
    • … Publishable pages and embeds
  • Directoryproject-files
    • … Adobe Illustrator files
  • Directorysrc
    • … Editable components and code

locales/

  • Directorylocales
    • Directoryen
      • content.json

The locales/ directory contains JSON files with text values for pages and graphics, usually downloaded from ArchieML docs.

media-assets/

  • Directorymedia-assets
    • Directoryen
      • Directorychart
        • chart.jpg
        • chart.eps

The media-assets/ directory is used to package static assets for clients, namely JPG and EPS files.

pages/

  • Directorypages
    • Directoryembed-previewer
      • +page.svelte A page to preview embeds
    • Directoryembeds
      • Directoryen
        • Directorypage
          • +page.svelte Embeddable version of project homepage
        • Directorymap
          • +page.svelte Embeddable graphic
    • +layout.ts
    • +page.svelte Project homepage

The pages/ directory includes the filesystem-based routes for your project, which are the public pages readers will see or clients embed.

SvelteKit: Routing

project-files/

  • Directoryproject-files
    • ai2html.ait Template for graphics
    • dotcom.ait Template for dotcom homepage images
    • sharecard.ait Template for social share images

The project-files/ directory includes files used to make graphics components and images, usually Adobe Illustrator templates and files.

src/

  • Directorysrc
    • Directorylib
      • Directorycomponents Project components
        • …
      • Directorystyles Stylesheets
        • global.scss
      • App.svelte
    • Directorystatics Static assets
      • Directoryimages
        • reuters-graphics.jpg

The src/ directory includes the component code, stylesheets and other static assets for your pages.

Project type

The graphics kit can be used to publish any of the three types of projects we make:

  • dotcom pages-only,
  • embeds-only
  • dotcom pages and embeds (pages+)

By default, the graphics kit is configured for pages+ projects. You can, however, reconfigure your project to be dotcom or embeds-only.

Dotcom pages only

To remove embeds from your published project, update the graphics kit publisher’s publisher.config.ts in the root of your project:

publisher.config.ts
import { defineConfig } from '@reuters-graphics/graphics-kit-publisher';


export default defineConfig({
  packLocations: {
    embeds: false,
  },
  // other config values ...
});

Embeds-only or pages+

You can switch between embeds-only or pages+ projects using one of our kit mods, which will update several files in your project for the correct project type.