Skip to content

wip: add demo topper definition #73

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

wip: add demo topper definition #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f76f222
wip: add demo topper definition
adgad Mar 31, 2025
93d8886
wip: try out having the topper fields as properties rather than children
adgad Apr 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 54 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
```
Expand All @@ -176,6 +177,59 @@ interface Root extends Node {

**Root** can be used as the _[root][term-root]_ of a _[tree][term-tree]_.

### `Topper`

```ts
type TopperLayout =
| 'deep-portrait'
| 'deep-landscape'
| 'split-text-left'
| 'full-bleed'
// I think the things below are based on other factors, so maybe shouldn't be published??
// | 'PodcastTopper'
// | 'OpinionTopper'
// | 'BrandedTopper'
// | 'BasicTopper'
// | 'TopperWithFlourish'
// | 'PartnerContentTopper'
```

```ts
interface Topper extends Node {
type: 'topper'
suggestedTopperLayout: TopperLayout
suggestedBackgroundColor: string // this is what editorial select, but can be overridden based on other content properties
headline: Headline
Copy link
Contributor

@umbobabo umbobabo Nov 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Following the idea to let the FE to decide the Headline we can keep this as a string

intro: Intro
visual: CustomCodeComponent | ImageSet // | ClipSet
Copy link
Contributor

@umbobabo umbobabo Nov 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flourish and Picture, that are the two visual supported at the moment, are in reality in two different position in the markup. We can look to unify them and keep them both as Visual or we may need an additional field (That doesn't seem right).

external displayConcept: TeaserConcept
}
```
**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?
Copy link
Contributor

@umbobabo umbobabo Nov 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Currently hardcode in the model .

It maps 121 with an Origami prop so this is potentially an information that other consumers may use too. If that the case, it should not come from our model, however, putting the mapping that is in the model in CAPI doesn't seem right to me, let's discuss

}
```

**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

### `Body`

```ts
Expand Down Expand Up @@ -748,7 +802,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).
Expand Down
1 change: 1 addition & 0 deletions build.bash
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
78 changes: 78 additions & 0 deletions content-tree.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,28 @@ export declare namespace ContentTree {
}
interface Root extends Node {
type: "root";
topper: Topper;
body: Body;
}
type TopperLayout = 'deep-portrait' | 'deep-landscape' | 'split-text-left' | 'full-bleed';
interface Topper extends Node {
type: 'topper';
suggestedTopperLayout: TopperLayout;
suggestedBackgroundColor: string;
headline: Headline;
intro: Intro;
visual: CustomCodeComponent | ImageSet;
displayConcept: TeaserConcept;
}
interface Headline extends Parent {
type: 'headline';
children: Text[];
isLarge: boolean;
}
interface Intro extends Parent {
type: 'intro';
children: [Text] | (Paragraph | List)[];
}
interface Body extends Parent {
type: "body";
version: number;
Expand Down Expand Up @@ -284,8 +304,28 @@ export declare namespace ContentTree {
}
interface Root extends Node {
type: "root";
topper: Topper;
body: Body;
}
type TopperLayout = 'deep-portrait' | 'deep-landscape' | 'split-text-left' | 'full-bleed';
interface Topper extends Node {
type: 'topper';
suggestedTopperLayout: TopperLayout;
suggestedBackgroundColor: string;
headline: Headline;
intro: Intro;
visual: CustomCodeComponent | ImageSet;
displayConcept: TeaserConcept;
}
interface Headline extends Parent {
type: 'headline';
children: Text[];
isLarge: boolean;
}
interface Intro extends Parent {
type: 'intro';
children: [Text] | (Paragraph | List)[];
}
interface Body extends Parent {
type: "body";
version: number;
Expand Down Expand Up @@ -558,8 +598,26 @@ export declare namespace ContentTree {
}
interface Root extends Node {
type: "root";
topper: Topper;
body: Body;
}
type TopperLayout = 'deep-portrait' | 'deep-landscape' | 'split-text-left' | 'full-bleed';
interface Topper extends Node {
type: 'topper';
suggestedTopperLayout: TopperLayout;
suggestedBackgroundColor: string;
headline: Headline;
intro: Intro;
visual: CustomCodeComponent | ImageSet;
}
interface Headline extends Parent {
type: 'headline';
children: Text[];
}
interface Intro extends Parent {
type: 'intro';
children: [Text] | (Paragraph | List)[];
}
interface Body extends Parent {
type: "body";
version: number;
Expand Down Expand Up @@ -819,8 +877,28 @@ export declare namespace ContentTree {
}
interface Root extends Node {
type: "root";
topper: Topper;
body: Body;
}
type TopperLayout = 'deep-portrait' | 'deep-landscape' | 'split-text-left' | 'full-bleed';
interface Topper extends Node {
type: 'topper';
suggestedTopperLayout: TopperLayout;
suggestedBackgroundColor: string;
headline: Headline;
intro: Intro;
visual: CustomCodeComponent | ImageSet;
displayConcept?: TeaserConcept;
}
interface Headline extends Parent {
type: 'headline';
children: Text[];
isLarge?: boolean;
}
interface Intro extends Parent {
type: 'intro';
children: [Text] | (Paragraph | List)[];
}
interface Body extends Parent {
type: "body";
version: number;
Expand Down
165 changes: 165 additions & 0 deletions schemas/content-tree.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -355,6 +355,31 @@
],
"type": "object"
},
"ContentTree.full.Headline": {
"additionalProperties": false,
"properties": {
"children": {
"items": {
"$ref": "#/definitions/ContentTree.full.Text"
},
"type": "array"
},
"data": {},
"isLarge": {
"type": "boolean"
},
"type": {
"const": "headline",
"type": "string"
}
},
"required": [
"children",
"isLarge",
"type"
],
"type": "object"
},
"ContentTree.full.ImageSet": {
"additionalProperties": false,
"properties": {
Expand Down Expand Up @@ -531,6 +556,48 @@
],
"type": "object"
},
"ContentTree.full.Intro": {
"additionalProperties": false,
"properties": {
"children": {
"anyOf": [
{
"items": [
{
"$ref": "#/definitions/ContentTree.full.Text"
}
],
"maxItems": 1,
"minItems": 1,
"type": "array"
},
{
"items": {
"anyOf": [
{
"$ref": "#/definitions/ContentTree.full.Paragraph"
},
{
"$ref": "#/definitions/ContentTree.full.List"
}
]
},
"type": "array"
}
]
},
"data": {},
"type": {
"const": "intro",
"type": "string"
}
},
"required": [
"children",
"type"
],
"type": "object"
},
"ContentTree.full.Layout": {
"additionalProperties": false,
"properties": {
Expand Down Expand Up @@ -1839,6 +1906,100 @@
],
"type": "object"
},
"ContentTree.full.Topper": {
"additionalProperties": false,
"properties": {
"data": {},
"displayConcept": {
"additionalProperties": false,
"properties": {
"apiUrl": {
"type": "string"
},
"directType": {
"type": "string"
},
"id": {
"type": "string"
},
"predicate": {
"type": "string"
},
"prefLabel": {
"type": "string"
},
"type": {
"type": "string"
},
"types": {
"items": {
"type": "string"
},
"type": "array"
},
"url": {
"type": "string"
}
},
"required": [
"apiUrl",
"directType",
"id",
"predicate",
"prefLabel",
"type",
"types",
"url"
],
"type": "object"
},
"headline": {
"$ref": "#/definitions/ContentTree.full.Headline"
},
"intro": {
"$ref": "#/definitions/ContentTree.full.Intro"
},
"suggestedBackgroundColor": {
"type": "string"
},
"suggestedTopperLayout": {
"$ref": "#/definitions/ContentTree.full.TopperLayout"
},
"type": {
"const": "topper",
"type": "string"
},
"visual": {
"anyOf": [
{
"$ref": "#/definitions/ContentTree.full.ImageSet"
},
{
"$ref": "#/definitions/ContentTree.full.CustomCodeComponent"
}
]
}
},
"required": [
"displayConcept",
"headline",
"intro",
"suggestedBackgroundColor",
"suggestedTopperLayout",
"type",
"visual"
],
"type": "object"
},
"ContentTree.full.TopperLayout": {
"enum": [
"deep-landscape",
"deep-portrait",
"full-bleed",
"split-text-left"
],
"type": "string"
},
"ContentTree.full.Tweet": {
"additionalProperties": false,
"properties": {
Expand Down Expand Up @@ -1907,13 +2068,17 @@
"$ref": "#/definitions/ContentTree.full.Body"
},
"data": {},
"topper": {
"$ref": "#/definitions/ContentTree.full.Topper"
},
"type": {
"const": "root",
"type": "string"
}
},
"required": [
"body",
"topper",
"type"
],
"type": "object"
Expand Down
Loading
Loading