wip: add demo topper definition

Author: adgad

README.md

@@ -168,6 +168,7 @@ Its content is limited to only other content-tree content.
 ```ts
 interface Root extends Node {
 	type: "root"
+	topper: Topper
 	body: Body
 }
 ```
@@ -176,6 +177,65 @@ interface Root extends Node {
 
 **Root** can be used as the _[root][term-root]_ of a _[tree][term-tree]_.
 
+### `Topper`
+
+```ts
+type TopperType =
+| 'DeepPortraitTopper'
+| 'DeepLandscapeTopper'
+| 'SplitTextTopper'
+| 'FullBleedTopper'
+| 'PodcastTopper'
+| 'OpinionTopper'
+| 'BrandedTopper'
+| 'BasicTopper'
+| 'TopperWithFlourish'
+| 'PartnerContentTopper'
+```
+
+```ts
+interface Topper extends Parent {
+	type: 'topper'
+	topperType: TopperType
+	backgroundColor: string // maybe a type? is this external??
+	children: [Headline, Intro, TopperVisual?]
+}
+```
+**Topper** represents the topper of an article
+
+### Headline
+
+```ts
+interface Headline extends Parent {
+	type: 'headline'
+	children: Text[]
+	external isLarge: boolean //is this external? it's based on some business logic, partly derived by topper type? should it be external?
+}
+```
+
+**Headline** represents the title of the article as displayed on the article page
+
+
+### Intro
+
+```ts
+interface Intro extends Parent {
+	type: 'intro'
+	children: [Text] | (Paragraph | List)[]
+}
+```
+The article **Intro** can be either a one-line standfirst, or a longer summary
+
+### TopperVisual
+
+```ts
+interface TopperVisual extends Parent {
+	type: 'topper-visual'
+	children: [CustomCodeComponent] | [ImageSet] // | ClipSet
+}
+```
+**TopperVisual** contains the visual element of the topper, which can be an image, clip, or custom component
+
 ### `Body`
 
 ```ts
@@ -748,7 +808,6 @@ interface CustomCodeComponent extends Node {
 - The basic interface in Spark to make reference to this system above (eg. the git repo URL or a public S3 bucket), and provide some data for it if necessary. This will be the Custom Component storyblock.
 - The data Spark receives from entering a specific ID will be used to render dynamic fields (the `attributes`).
 
-
 ## License
 
 This software is published by the Financial Times under the [MIT licence](mit).

build.bash

@@ -4,5 +4,6 @@ tsc -d content-tree.ts
 typescript-json-schema --noExtraProps --required content-tree.ts ContentTree.full.Root > schemas/content-tree.schema.json
 typescript-json-schema --noExtraProps --required content-tree.ts ContentTree.transit.Root > schemas/transit-tree.schema.json
 typescript-json-schema --noExtraProps --required content-tree.ts ContentTree.transit.Body > schemas/body-tree.schema.json
+typescript-json-schema --noExtraProps --required content-tree.ts ContentTree.transit.Topper > schemas/topper-tree.schema.json
 rm content-tree.ts
 rm content-tree.js

content-tree.d.ts

@@ -11,8 +11,29 @@ export declare namespace ContentTree {
     }
     interface Root extends Node {
         type: "root";
+        topper: Topper;
         body: Body;
     }
+    type TopperType = 'DeepPortraitTopper' | 'DeepLandscapeTopper' | 'SplitTextTopper' | 'FullBleedTopper' | 'PodcastTopper' | 'OpinionTopper' | 'BrandedTopper' | 'BasicTopper' | 'TopperWithFlourish' | 'PartnerContentTopper';
+    interface Topper extends Parent {
+        type: 'topper';
+        topperType: TopperType;
+        backgroundColor: string;
+        children: [Headline, Intro, TopperVisual?];
+    }
+    interface Headline extends Parent {
+        type: 'headline';
+        children: Text[];
+        isLarge: boolean;
+    }
+    interface Intro extends Parent {
+        type: 'intro';
+        children: [Text] | (Paragraph | List)[];
+    }
+    interface TopperVisual extends Parent {
+        type: 'topper-visual';
+        children: [CustomCodeComponent] | [ImageSet];
+    }
     interface Body extends Parent {
         type: "body";
         version: number;
@@ -284,8 +305,29 @@ export declare namespace ContentTree {
         }
         interface Root extends Node {
             type: "root";
+            topper: Topper;
             body: Body;
         }
+        type TopperType = 'DeepPortraitTopper' | 'DeepLandscapeTopper' | 'SplitTextTopper' | 'FullBleedTopper' | 'PodcastTopper' | 'OpinionTopper' | 'BrandedTopper' | 'BasicTopper' | 'TopperWithFlourish' | 'PartnerContentTopper';
+        interface Topper extends Parent {
+            type: 'topper';
+            topperType: TopperType;
+            backgroundColor: string;
+            children: [Headline, Intro, TopperVisual?];
+        }
+        interface Headline extends Parent {
+            type: 'headline';
+            children: Text[];
+            isLarge: boolean;
+        }
+        interface Intro extends Parent {
+            type: 'intro';
+            children: [Text] | (Paragraph | List)[];
+        }
+        interface TopperVisual extends Parent {
+            type: 'topper-visual';
+            children: [CustomCodeComponent] | [ImageSet];
+        }
         interface Body extends Parent {
             type: "body";
             version: number;
@@ -558,8 +600,28 @@ export declare namespace ContentTree {
         }
         interface Root extends Node {
             type: "root";
+            topper: Topper;
             body: Body;
         }
+        type TopperType = 'DeepPortraitTopper' | 'DeepLandscapeTopper' | 'SplitTextTopper' | 'FullBleedTopper' | 'PodcastTopper' | 'OpinionTopper' | 'BrandedTopper' | 'BasicTopper' | 'TopperWithFlourish' | 'PartnerContentTopper';
+        interface Topper extends Parent {
+            type: 'topper';
+            topperType: TopperType;
+            backgroundColor: string;
+            children: [Headline, Intro, TopperVisual?];
+        }
+        interface Headline extends Parent {
+            type: 'headline';
+            children: Text[];
+        }
+        interface Intro extends Parent {
+            type: 'intro';
+            children: [Text] | (Paragraph | List)[];
+        }
+        interface TopperVisual extends Parent {
+            type: 'topper-visual';
+            children: [CustomCodeComponent] | [ImageSet];
+        }
         interface Body extends Parent {
             type: "body";
             version: number;
@@ -819,8 +881,29 @@ export declare namespace ContentTree {
         }
         interface Root extends Node {
             type: "root";
+            topper: Topper;
             body: Body;
         }
+        type TopperType = 'DeepPortraitTopper' | 'DeepLandscapeTopper' | 'SplitTextTopper' | 'FullBleedTopper' | 'PodcastTopper' | 'OpinionTopper' | 'BrandedTopper' | 'BasicTopper' | 'TopperWithFlourish' | 'PartnerContentTopper';
+        interface Topper extends Parent {
+            type: 'topper';
+            topperType: TopperType;
+            backgroundColor: string;
+            children: [Headline, Intro, TopperVisual?];
+        }
+        interface Headline extends Parent {
+            type: 'headline';
+            children: Text[];
+            isLarge?: boolean;
+        }
+        interface Intro extends Parent {
+            type: 'intro';
+            children: [Text] | (Paragraph | List)[];
+        }
+        interface TopperVisual extends Parent {
+            type: 'topper-visual';
+            children: [CustomCodeComponent] | [ImageSet];
+        }
         interface Body extends Parent {
             type: "body";
             version: number;