diff --git a/bin/newComponent/template/YourComponent/YourComponent.svelte b/bin/newComponent/template/YourComponent/YourComponent.svelte
index 5c78fc25..84337bc2 100644
--- a/bin/newComponent/template/YourComponent/YourComponent.svelte
+++ b/bin/newComponent/template/YourComponent/YourComponent.svelte
@@ -1,8 +1,4 @@
-<!--
-  @component The `YourComponent` component
-
-  [Docs](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-YourComponent--default)
--->
+<!-- @component `YourComponent` [Read the 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! */
 
diff --git a/src/components/Article/Article.svelte b/src/components/Article/Article.svelte
index 7724ef4a..eb18572e 100644
--- a/src/components/Article/Article.svelte
+++ b/src/components/Article/Article.svelte
@@ -1,8 +1,4 @@
-<!-- 
-  @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)
--->
+<!-- @component `Article` [Read the 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;
diff --git a/src/components/BeforeAfter/BeforeAfter.svelte b/src/components/BeforeAfter/BeforeAfter.svelte
index b5d940e6..d2e12e99 100644
--- a/src/components/BeforeAfter/BeforeAfter.svelte
+++ b/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
-        ? parseInt(window.getComputedStyle(figure).marginLeft.slice(0, -2))
-        : 0;
+      const figureOffset = figure ?
+        parseInt(window.getComputedStyle(figure).marginLeft.slice(0, -2)) :
+        0;
       let x = el.pageX - figureOffset - imgOffset.left;
       x =
-        x < handleMargin
-          ? handleMargin
-          : x > w - handleMargin
-          ? w - handleMargin
-          : x;
+        x < handleMargin ?
+          handleMargin :
+          x > w - handleMargin ?
+            w - handleMargin :
+            x;
       offset = x / w;
     }
   };
diff --git a/src/components/Block/Block.svelte b/src/components/Block/Block.svelte
index 0484fb2c..dcd0652d 100644
--- a/src/components/Block/Block.svelte
+++ b/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';
 
diff --git a/src/components/BodyText/BodyText.svelte b/src/components/BodyText/BodyText.svelte
index 8e1e9574..96eeec09 100644
--- a/src/components/BodyText/BodyText.svelte
+++ b/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.
diff --git a/src/components/DatawrapperChart/DatawrapperChart.svelte b/src/components/DatawrapperChart/DatawrapperChart.svelte
index 94d2fa3d..87637907 100644
--- a/src/components/DatawrapperChart/DatawrapperChart.svelte
+++ b/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';
diff --git a/src/components/FeaturePhoto/FeaturePhoto.svelte b/src/components/FeaturePhoto/FeaturePhoto.svelte
index 0cac478b..bb348d36 100644
--- a/src/components/FeaturePhoto/FeaturePhoto.svelte
+++ b/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';
diff --git a/src/components/GraphicBlock/GraphicBlock.svelte b/src/components/GraphicBlock/GraphicBlock.svelte
index fdd60852..57ab7531 100644
--- a/src/components/GraphicBlock/GraphicBlock.svelte
+++ b/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';
 
diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index 08a0599b..35ddfe31 100644
--- a/src/components/Headline/Headline.svelte
+++ b/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
diff --git a/src/components/NoteText/NoteText.svelte b/src/components/NoteText/NoteText.svelte
index 4a10d120..64aaf01f 100644
--- a/src/components/NoteText/NoteText.svelte
+++ b/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.
diff --git a/src/components/PhotoPack/PhotoPack.svelte b/src/components/PhotoPack/PhotoPack.svelte
index 94da1fee..0ac5c88d 100644
--- a/src/components/PhotoPack/PhotoPack.svelte
+++ b/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;
diff --git a/src/components/PymChild/PymChild.svelte b/src/components/PymChild/PymChild.svelte
index a0232ba2..2ade8f1d 100644
--- a/src/components/PymChild/PymChild.svelte
+++ b/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;
diff --git a/src/components/ReutersLogo/ReutersLogo.svelte b/src/components/ReutersLogo/ReutersLogo.svelte
index 0ba74528..e00511bf 100644
--- a/src/components/ReutersLogo/ReutersLogo.svelte
+++ b/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';
diff --git a/src/components/SEO/SEO.svelte b/src/components/SEO/SEO.svelte
index da6f994f..a2793515 100644
--- a/src/components/SEO/SEO.svelte
+++ b/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';
diff --git a/src/components/Scroller/Scroller.svelte b/src/components/Scroller/Scroller.svelte
index 97292905..a74670d9 100644
--- a/src/components/Scroller/Scroller.svelte
+++ b/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`. 
-   * 
-   * - `fb` _default_ Foreground then background 
+   * Layout order when `embedded` is `true`.
+   *
+   * - `fb` _default_ Foreground then background
    * - `bf` Background then foreground
-   * 
+   *
    * @type {string}
    */
   export let embeddedLayout: EmbeddedLayout = 'fb';
diff --git a/src/components/SiteFooter/SiteFooter.svelte b/src/components/SiteFooter/SiteFooter.svelte
index ae4555dd..883aad3c 100644
--- a/src/components/SiteFooter/SiteFooter.svelte
+++ b/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';
diff --git a/src/components/SiteHeader/SiteHeader.svelte b/src/components/SiteHeader/SiteHeader.svelte
index 0823093c..e8108954 100644
--- a/src/components/SiteHeader/SiteHeader.svelte
+++ b/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';
diff --git a/src/components/Spinner/Spinner.svelte b/src/components/Spinner/Spinner.svelte
index 3e05d118..d72ba3c1 100644
--- a/src/components/Spinner/Spinner.svelte
+++ b/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';
diff --git a/src/components/Theme/Theme.svelte b/src/components/Theme/Theme.svelte
index 7d78dadb..3950b26a 100644
--- a/src/components/Theme/Theme.svelte
+++ b/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';
diff --git a/src/components/Video/Video.svelte b/src/components/Video/Video.svelte
index 469cf1f5..ef802918 100644
--- a/src/components/Video/Video.svelte
+++ b/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
-                    ? interactiveControlsOpacity
-                    : controlsOpacity}"
+                  controlsOpacity="{hoverToSeeControls ?
+                    interactiveControlsOpacity :
+                    controlsOpacity}"
                   controlsPosition="{controlsPosition}"
                   widthVideoContainer="{widthVideoContainer}"
                   heightVideoContainer="{heightVideoContainer}"
@@ -196,9 +197,9 @@
               bind:paused
               bind:clientWidth="{widthVideo}"
               bind:clientHeight="{heightVideo}"
-              style="{showControls
-                ? 'position: relative'
-                : 'position: relative'}"
+              style="{showControls ?
+                'position: relative' :
+                'position: relative'}"
             >
               <track kind="captions" />
             </video>
diff --git a/src/components/Visible/Visible.svelte b/src/components/Visible/Visible.svelte
index c13209e0..3db72380 100644
--- a/src/components/Visible/Visible.svelte
+++ b/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;