closes #18

bin/newComponent/template/YourComponent/YourComponent.svelte

@@ -1,8 +1,4 @@
-<!--
+<!-- @component `YourComponent` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-YourComponent--default) -->
-  @component The `YourComponent` component
-
-  [Docs](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-YourComponent--default)
--->
 <script lang="ts">
   /** ✏️ DOCUMENT your chart's props using TypeScript and JSDoc comments like below! */
 

src/components/Article/Article.svelte

@@ -1,8 +1,4 @@
-<!-- 
+<!-- @component `Article` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/layout-article--default) -->
-  @component The `Article` component contains all the content of our story and also establishes the dimensions of our article well, the default central trunk of our page layout.
-  
-  [Docs](https://reuters-graphics.github.io/graphics-components/?path=/docs/layout-article--default)
--->
 <script lang="ts">
   /** Set to true for embeddables. */
   export let embedded: boolean = false;

src/components/BeforeAfter/BeforeAfter.svelte

@@ -1,3 +1,4 @@
+<!-- @component `BeforeAfter` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-beforeafter--default) -->
 <script lang="ts">
   import { throttle } from 'lodash-es';
   import { onMount } from 'svelte';
@@ -101,16 +102,16 @@
   const move = (e) => {
     if (sliding && imgOffset) {
       const el = e.touches ? e.touches[0] : e;
-      const figureOffset = figure
+      const figureOffset = figure ?
-        ? parseInt(window.getComputedStyle(figure).marginLeft.slice(0, -2))
+        parseInt(window.getComputedStyle(figure).marginLeft.slice(0, -2)) :
-        : 0;
+        0;
       let x = el.pageX - figureOffset - imgOffset.left;
       x =
-        x < handleMargin
+        x < handleMargin ?
-          ? handleMargin
+          handleMargin :
-          : x > w - handleMargin
+          x > w - handleMargin ?
-          ? w - handleMargin
+            w - handleMargin :
-          : x;
+            x;
       offset = x / w;
     }
   };

src/components/Block/Block.svelte

@@ -1,3 +1,4 @@
+<!-- @component `Block` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/layout-block--default) -->
 <script lang="ts">
   import type { ContainerWidth } from '../@types/global';
 

src/components/BodyText/BodyText.svelte

@@ -1,3 +1,4 @@
+<!-- @component `BodyText` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-bodytext--default) -->
 <script lang="ts">
   /**
    * A markdown text string.

src/components/DatawrapperChart/DatawrapperChart.svelte

@@ -1,3 +1,4 @@
+<!-- @component `DatawrapperChart` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-DatawrapperChart--default) -->
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
   import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';

src/components/FeaturePhoto/FeaturePhoto.svelte

@@ -1,3 +1,4 @@
+<!-- @component `FeaturePhoto` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-FeaturePhoto--default) -->
 <script lang="ts">
   import { onMount } from 'svelte';
   import Block from '../Block/Block.svelte';

src/components/GraphicBlock/GraphicBlock.svelte

@@ -1,3 +1,4 @@
+<!-- @component `GraphicBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-GraphicBlock--default) -->
 <script lang="ts">
   import type { ContainerWidth } from '../@types/global';
 

src/components/Headline/Headline.svelte

@@ -1,3 +1,4 @@
+<!-- @component `Headline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Headline--default) -->
 <script lang="ts">
   /**
    * Headline

src/components/NoteText/NoteText.svelte

@@ -1,3 +1,4 @@
+<!-- @component `NoteText` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-NoteText--default) -->
 <script lang="ts">
   /**
    * A markdown text string.

src/components/PhotoPack/PhotoPack.svelte

@@ -1,3 +1,4 @@
+<!-- @component `PhotoPack` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-PhotoPack--default) -->
 <script lang="ts">
   interface Image {
     src: string;

src/components/PymChild/PymChild.svelte

@@ -1,3 +1,4 @@
+<!-- @component `PymChild` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/utilities-PymChild--default) -->
 <script lang="ts">
   /** Pym.js polling interval */
   export let polling: number = 500;

src/components/ReutersLogo/ReutersLogo.svelte

@@ -1,3 +1,4 @@
+<!-- @component `ReutersLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ReutersLogo--default) -->
 <script lang="ts">
   /** "Kinesis" colour */
   export let logoColour: string = '#FA6400';

src/components/SEO/SEO.svelte

@@ -1,3 +1,4 @@
+<!-- @component `SEO` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SEO--default) -->
 <script lang="ts">
   import analytics from './analytics';
   import publisherTags from './publisherTags';

src/components/Scroller/Scroller.svelte

@@ -1,5 +1,6 @@
+<!-- @component `Scroller` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Scroller--default) -->
 <script lang="ts">
-  import type { ContainerWidth, ScrollerStep } from  '../@types/global';
+  import type { ContainerWidth, ScrollerStep } from '../@types/global';
 
   /**
    * ID of the scroller container
@@ -8,9 +9,9 @@
   export let id: string = '';
   /**
    * An array of step objects that define the steps in your scroller.
-   * 
+   *
    * Each step object in the array can have:
-   * 
+   *
    * - `background` A background component **REQUIRED**
    * - `backgroundProps` An object of props given to the background component
    * - `foreground` Either a markdown-formatted string or a foreground component **REQUIRED**
@@ -25,25 +26,25 @@
   export let backgroundWidth: ContainerWidth = 'fluid';
   
   type ForegroundPosition = 'middle' | 'left' | 'right' | 'left opposite' | 'right opposite';
- 
+
   /**
-   * Position of the foreground. One of: middle, left, right, left opposite or right opposite. 
+   * Position of the foreground. One of: middle, left, right, left opposite or right opposite.
-   * 
+   *
    * "opposite" options push the background to the other side on larger viewports.
-   * 
+   *
    * @type {string}
-   */ 
+   */
   export let foregroundPosition: ForegroundPosition = 'middle';
   /**
    * Whether previous background steps should stack below the current one.
-   * 
+   *
    * - `true` _default_ Background graphics from previous steps will remain visible below the active one, allowing you to stack graphics with transparent backgrounds.
    * - `false` Only the background graphic from the current step will show and backgrounds from previous steps are hidden.
    */
   export let stackBackground: boolean = true;
   /**
    * How many background steps to load before and after the currently active one, effectively lazy-loading them.
-   * 
+   *
    * Setting to `0` disables lazy-loading and loads all backgrounds at once.
    */
   export let preload: number = 1;
@@ -55,11 +56,11 @@
   type EmbeddedLayout = 'fb' | 'bf';
 
   /**
-   * Layout order when `embedded` is `true`. 
+   * Layout order when `embedded` is `true`.
-   * 
+   *
-   * - `fb` _default_ Foreground then background 
+   * - `fb` _default_ Foreground then background
    * - `bf` Background then foreground
-   * 
+   *
    * @type {string}
    */
   export let embeddedLayout: EmbeddedLayout = 'fb';

src/components/SiteFooter/SiteFooter.svelte

@@ -1,3 +1,4 @@
+<!-- @component `SiteFooter` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SiteFooter--default) -->
 <script lang="ts">
   import QuickLinks from './QuickLinks.svelte';
   import CompanyLinks from './CompanyLinks.svelte';

src/components/SiteHeader/SiteHeader.svelte

@@ -1,3 +1,4 @@
+<!-- @component `SiteHeader` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SiteHeader--default) -->
 <script lang="ts">
   import ReutersLogo from '../ReutersLogo/ReutersLogo.svelte';
   import NavBar from './NavBar/index.svelte';

src/components/Spinner/Spinner.svelte

@@ -1,3 +1,4 @@
+<!-- @component `Spinner` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Spinner--default) -->
 <script lang="ts">
   /** Primary colour of the spinner. */
   export let colour: string = '#666';

src/components/Theme/Theme.svelte

@@ -1,3 +1,4 @@
+<!-- @component `Theme` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/theming-Theme--default) -->
 <script context="module" lang="ts">
   import light from './themes/light.js';
   import dark from './themes/dark.js';

src/components/Video/Video.svelte

@@ -1,3 +1,4 @@
+<!-- @component `Video` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Video--default) -->
 <script lang="ts">
   import IntersectionObserver from 'svelte-intersection-observer';
   import Controls from './Controls.svelte';
@@ -163,9 +164,9 @@
                   on:pausePlayEvent="{pausePlayEvent}"
                   paused="{paused}"
                   clickedOnPauseBtn="{clickedOnPauseBtn}"
-                  controlsOpacity="{hoverToSeeControls
+                  controlsOpacity="{hoverToSeeControls ?
-                    ? interactiveControlsOpacity
+                    interactiveControlsOpacity :
-                    : controlsOpacity}"
+                    controlsOpacity}"
                   controlsPosition="{controlsPosition}"
                   widthVideoContainer="{widthVideoContainer}"
                   heightVideoContainer="{heightVideoContainer}"
@@ -196,9 +197,9 @@
               bind:paused
               bind:clientWidth="{widthVideo}"
               bind:clientHeight="{heightVideo}"
-              style="{showControls
+              style="{showControls ?
-                ? 'position: relative'
+                'position: relative' :
-                : 'position: relative'}"
+                'position: relative'}"
             >
               <track kind="captions" />
             </video>

src/components/Visible/Visible.svelte

@@ -1,8 +1,9 @@
+<!-- @component `Visible` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Visible--default) -->
 <script lang="ts">
   import { onMount } from 'svelte';
   /**
-   * Whether to change visibility just once. 
+   * Whether to change visibility just once.
-   * 
+   *
    * Useful for loading expensive images or other media and then keeping them around once they're first loaded.
    */
   export let once: boolean = false;