Skip to content

Commit 218b159

Browse files
umbobaboumbobabo
committed
feat: add timeline and event nodes
1 parent 67054db commit 218b159

File tree

5 files changed

+287
-19
lines changed

5 files changed

+287
-19
lines changed

‎README.md‎

Lines changed: 41 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ type BodyBlock =
106106
| Video
107107
| YoutubeVideo
108108
| Text
109+
| Timeline
109110
```
110111
111112
`BodyBlock` nodes are the only things that are valid as the top level of a `Body`.
@@ -736,24 +737,24 @@ interface Table extends Parent {
736737

737738
```ts
738739
type CustomCodeComponentAttributes = {
739-
[key: string]: string | boolean | undefined
740+
[key: string]: string | boolean | undefined
740741
}
741742

742743
interface CustomCodeComponent extends Node {
743-
/** Component type */
744-
type: "custom-code-component"
745-
/** Id taken from the CAPI url */
746-
id: string
747-
/** How the component should be presented in the article page according to the column layout system */
748-
layoutWidth: LayoutWidth
749-
/** Repository for the code of the component in the format "[github org]/[github repo]/[component name]". */
750-
external path: string
751-
/** Semantic version of the code of the component, e.g. "^0.3.5". */
752-
external versionRange: string
753-
/** Last date-time when the attributes for this block were modified, in ISO-8601 format. */
754-
external attributesLastModified: string
755-
/** Configuration data to be passed to the component. */
756-
external attributes: CustomCodeComponentAttributes
744+
/** Component type */
745+
type: "custom-code-component"
746+
/** Id taken from the CAPI url */
747+
id: string
748+
/** How the component should be presented in the article page according to the column layout system */
749+
layoutWidth: LayoutWidth
750+
/** Repository for the code of the component in the format "[github org]/[github repo]/[component name]". */
751+
external path: string
752+
/** Semantic version of the code of the component, e.g. "^0.3.5". */
753+
external versionRange: string
754+
/** Last date-time when the attributes for this block were modified, in ISO-8601 format. */
755+
external attributesLastModified: string
756+
/** Configuration data to be passed to the component. */
757+
external attributes: CustomCodeComponentAttributes
757758
}
758759
```
759760

@@ -762,6 +763,31 @@ interface CustomCodeComponent extends Node {
762763
- 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.
763764
- The data Spark receives from entering a specific ID will be used to render dynamic fields (the `attributes`).
764765

766+
### Timeline
767+
768+
```ts
769+
type TimelineLayoutWidth = Extract<LayoutWidth, "full-width" | "inset-left" | "full-grid">
770+
771+
interface Timeline extends Parent {
772+
type: "timeline"
773+
layoutWidth: TimelineLayoutWidth
774+
children: [Heading, ...TimelineEvent[]]
775+
}
776+
```
777+
778+
**Timeline** nodes display a timeline of events in arbitrary order.
779+
780+
### TimelineEvent
781+
782+
```ts
783+
interface TimelineEvent extends Parent {
784+
type: "timeline-event"
785+
dateLabel: string
786+
children: Paragraph[]
787+
}
788+
```
789+
790+
**TimelineEvent** nodes represents a single event in a timeline.
765791

766792
## License
767793

‎content-tree.d.ts‎

Lines changed: 48 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export declare namespace ContentTree {
2-
type BodyBlock = Paragraph | Heading | ImageSet | Flourish | BigNumber | CustomCodeComponent | Layout | List | Blockquote | Pullquote | ScrollyBlock | ThematicBreak | Table | Recommended | Tweet | Video | YoutubeVideo | Text;
2+
type BodyBlock = Paragraph | Heading | ImageSet | Flourish | BigNumber | CustomCodeComponent | Layout | List | Blockquote | Pullquote | ScrollyBlock | ThematicBreak | Table | Recommended | Tweet | Video | YoutubeVideo | Text | Timeline;
33
type LayoutWidth = "auto" | "in-line" | "inset-left" | "inset-right" | "full-bleed" | "full-grid" | "mid-grid" | "full-width";
44
type Phrasing = Text | Break | Strong | Emphasis | Strikethrough | Link;
55
interface Node {
@@ -278,8 +278,19 @@ export declare namespace ContentTree {
278278
/** Configuration data to be passed to the component. */
279279
attributes: CustomCodeComponentAttributes;
280280
}
281+
type TimelineLayoutWidth = Extract<LayoutWidth, "full-width" | "inset-left">;
282+
interface Timeline extends Parent {
283+
type: "timeline";
284+
layoutWidth: TimelineLayoutWidth;
285+
children: [Heading, ...Event[]];
286+
}
287+
interface Event extends Parent {
288+
type: "event";
289+
dateLabel: string;
290+
children: Paragraph[];
291+
}
281292
namespace full {
282-
type BodyBlock = Paragraph | Heading | ImageSet | Flourish | BigNumber | CustomCodeComponent | Layout | List | Blockquote | Pullquote | ScrollyBlock | ThematicBreak | Table | Recommended | Tweet | Video | YoutubeVideo | Text;
293+
type BodyBlock = Paragraph | Heading | ImageSet | Flourish | BigNumber | CustomCodeComponent | Layout | List | Blockquote | Pullquote | ScrollyBlock | ThematicBreak | Table | Recommended | Tweet | Video | YoutubeVideo | Text | Timeline;
283294
type LayoutWidth = "auto" | "in-line" | "inset-left" | "inset-right" | "full-bleed" | "full-grid" | "mid-grid" | "full-width";
284295
type Phrasing = Text | Break | Strong | Emphasis | Strikethrough | Link;
285296
interface Node {
@@ -558,9 +569,20 @@ export declare namespace ContentTree {
558569
/** Configuration data to be passed to the component. */
559570
attributes: CustomCodeComponentAttributes;
560571
}
572+
type TimelineLayoutWidth = Extract<LayoutWidth, "full-width" | "inset-left">;
573+
interface Timeline extends Parent {
574+
type: "timeline";
575+
layoutWidth: TimelineLayoutWidth;
576+
children: [Heading, ...Event[]];
577+
}
578+
interface Event extends Parent {
579+
type: "event";
580+
dateLabel: string;
581+
children: Paragraph[];
582+
}
561583
}
562584
namespace transit {
563-
type BodyBlock = Paragraph | Heading | ImageSet | Flourish | BigNumber | CustomCodeComponent | Layout | List | Blockquote | Pullquote | ScrollyBlock | ThematicBreak | Table | Recommended | Tweet | Video | YoutubeVideo | Text;
585+
type BodyBlock = Paragraph | Heading | ImageSet | Flourish | BigNumber | CustomCodeComponent | Layout | List | Blockquote | Pullquote | ScrollyBlock | ThematicBreak | Table | Recommended | Tweet | Video | YoutubeVideo | Text | Timeline;
564586
type LayoutWidth = "auto" | "in-line" | "inset-left" | "inset-right" | "full-bleed" | "full-grid" | "mid-grid" | "full-width";
565587
type Phrasing = Text | Break | Strong | Emphasis | Strikethrough | Link;
566588
interface Node {
@@ -824,9 +846,20 @@ export declare namespace ContentTree {
824846
/** How the component should be presented in the article page according to the column layout system */
825847
layoutWidth: LayoutWidth;
826848
}
849+
type TimelineLayoutWidth = Extract<LayoutWidth, "full-width" | "inset-left">;
850+
interface Timeline extends Parent {
851+
type: "timeline";
852+
layoutWidth: TimelineLayoutWidth;
853+
children: [Heading, ...Event[]];
854+
}
855+
interface Event extends Parent {
856+
type: "event";
857+
dateLabel: string;
858+
children: Paragraph[];
859+
}
827860
}
828861
namespace loose {
829-
type BodyBlock = Paragraph | Heading | ImageSet | Flourish | BigNumber | CustomCodeComponent | Layout | List | Blockquote | Pullquote | ScrollyBlock | ThematicBreak | Table | Recommended | Tweet | Video | YoutubeVideo | Text;
862+
type BodyBlock = Paragraph | Heading | ImageSet | Flourish | BigNumber | CustomCodeComponent | Layout | List | Blockquote | Pullquote | ScrollyBlock | ThematicBreak | Table | Recommended | Tweet | Video | YoutubeVideo | Text | Timeline;
830863
type LayoutWidth = "auto" | "in-line" | "inset-left" | "inset-right" | "full-bleed" | "full-grid" | "mid-grid" | "full-width";
831864
type Phrasing = Text | Break | Strong | Emphasis | Strikethrough | Link;
832865
interface Node {
@@ -1105,5 +1138,16 @@ export declare namespace ContentTree {
11051138
/** Configuration data to be passed to the component. */
11061139
attributes?: CustomCodeComponentAttributes;
11071140
}
1141+
type TimelineLayoutWidth = Extract<LayoutWidth, "full-width" | "inset-left">;
1142+
interface Timeline extends Parent {
1143+
type: "timeline";
1144+
layoutWidth: TimelineLayoutWidth;
1145+
children: [Heading, ...Event[]];
1146+
}
1147+
interface Event extends Parent {
1148+
type: "event";
1149+
dateLabel: string;
1150+
children: Paragraph[];
1151+
}
11081152
}
11091153
}

‎schemas/body-tree.schema.json‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,9 @@
122122
},
123123
{
124124
"$ref": "#/definitions/ContentTree.transit.Text"
125+
},
126+
{
127+
"$ref": "#/definitions/ContentTree.transit.Timeline"
125128
}
126129
]
127130
},
@@ -185,6 +188,31 @@
185188
],
186189
"type": "object"
187190
},
191+
"ContentTree.transit.Event": {
192+
"additionalProperties": false,
193+
"properties": {
194+
"children": {
195+
"items": {
196+
"$ref": "#/definitions/ContentTree.transit.Paragraph"
197+
},
198+
"type": "array"
199+
},
200+
"data": {},
201+
"dateLabel": {
202+
"type": "string"
203+
},
204+
"type": {
205+
"const": "event",
206+
"type": "string"
207+
}
208+
},
209+
"required": [
210+
"children",
211+
"dateLabel",
212+
"type"
213+
],
214+
"type": "object"
215+
},
188216
"ContentTree.transit.Flourish": {
189217
"additionalProperties": false,
190218
"properties": {
@@ -1089,6 +1117,44 @@
10891117
],
10901118
"type": "object"
10911119
},
1120+
"ContentTree.transit.Timeline": {
1121+
"additionalProperties": false,
1122+
"properties": {
1123+
"children": {
1124+
"additionalItems": {
1125+
"$ref": "#/definitions/ContentTree.transit.Event"
1126+
},
1127+
"items": [
1128+
{
1129+
"$ref": "#/definitions/ContentTree.transit.Heading"
1130+
}
1131+
],
1132+
"minItems": 1,
1133+
"type": "array"
1134+
},
1135+
"data": {},
1136+
"layoutWidth": {
1137+
"$ref": "#/definitions/ContentTree.transit.TimelineLayoutWidth"
1138+
},
1139+
"type": {
1140+
"const": "timeline",
1141+
"type": "string"
1142+
}
1143+
},
1144+
"required": [
1145+
"children",
1146+
"layoutWidth",
1147+
"type"
1148+
],
1149+
"type": "object"
1150+
},
1151+
"ContentTree.transit.TimelineLayoutWidth": {
1152+
"enum": [
1153+
"full-width",
1154+
"inset-left"
1155+
],
1156+
"type": "string"
1157+
},
10921158
"ContentTree.transit.Tweet": {
10931159
"additionalProperties": false,
10941160
"properties": {

‎schemas/content-tree.schema.json‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,9 @@
147147
},
148148
{
149149
"$ref": "#/definitions/ContentTree.full.Text"
150+
},
151+
{
152+
"$ref": "#/definitions/ContentTree.full.Timeline"
150153
}
151154
]
152155
},
@@ -236,6 +239,31 @@
236239
],
237240
"type": "object"
238241
},
242+
"ContentTree.full.Event": {
243+
"additionalProperties": false,
244+
"properties": {
245+
"children": {
246+
"items": {
247+
"$ref": "#/definitions/ContentTree.full.Paragraph"
248+
},
249+
"type": "array"
250+
},
251+
"data": {},
252+
"dateLabel": {
253+
"type": "string"
254+
},
255+
"type": {
256+
"const": "event",
257+
"type": "string"
258+
}
259+
},
260+
"required": [
261+
"children",
262+
"dateLabel",
263+
"type"
264+
],
265+
"type": "object"
266+
},
239267
"ContentTree.full.Flourish": {
240268
"additionalProperties": false,
241269
"properties": {
@@ -1867,6 +1895,44 @@
18671895
],
18681896
"type": "object"
18691897
},
1898+
"ContentTree.full.Timeline": {
1899+
"additionalProperties": false,
1900+
"properties": {
1901+
"children": {
1902+
"additionalItems": {
1903+
"$ref": "#/definitions/ContentTree.full.Event"
1904+
},
1905+
"items": [
1906+
{
1907+
"$ref": "#/definitions/ContentTree.full.Heading"
1908+
}
1909+
],
1910+
"minItems": 1,
1911+
"type": "array"
1912+
},
1913+
"data": {},
1914+
"layoutWidth": {
1915+
"$ref": "#/definitions/ContentTree.full.TimelineLayoutWidth"
1916+
},
1917+
"type": {
1918+
"const": "timeline",
1919+
"type": "string"
1920+
}
1921+
},
1922+
"required": [
1923+
"children",
1924+
"layoutWidth",
1925+
"type"
1926+
],
1927+
"type": "object"
1928+
},
1929+
"ContentTree.full.TimelineLayoutWidth": {
1930+
"enum": [
1931+
"full-width",
1932+
"inset-left"
1933+
],
1934+
"type": "string"
1935+
},
18701936
"ContentTree.full.Tweet": {
18711937
"additionalProperties": false,
18721938
"properties": {

0 commit comments

Comments
 (0)