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 1 commit
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
61 changes: 60 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,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?]
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

should these be keys rather than children? allows for further growth?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

i think it does make sense.

the benefit of having them as children i guess would be if there wasn't a regimented structure, and the FE could receive/render anything (like we do with RichText).

this probably isn't true for the topper

}
```
**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
Expand Down Expand Up @@ -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).
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
83 changes: 83 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,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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
Loading
Loading