Skip to content

Commit

Permalink
Merge pull request #52 from Financial-Times/custom-code-component
Browse files Browse the repository at this point in the history 
Custom code component
  • Loading branch information
@rosalie-baxter
rosalie-baxter authored May 22, 2024
2 parents be989a6 + d3f1f41 commit 896ba40
Show file tree
Hide file tree
Showing 5 changed files with 338 additions and 4 deletions.
45 changes: 45 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ type BodyBlock =
| Heading
| ImageSet
| BigNumber
| CustomCodeComponent
| Layout
| List
| Blockquote
Expand All @@ -107,6 +108,21 @@ type BodyBlock =
`BodyBlock` nodes are the only things that are valid as the top level of a `Body`.
### `LayoutWidth`
```ts
type LayoutWidth =
| "auto"
| "inline"
| "inset-left"
| "inset-right"
| "full-bleed"
| "full-grid"
| "mid-grid"
```
`LayoutWidth` defines how the component should be presented in the article page according to the column layout system.
### `Phrasing`
```ts
Expand Down Expand Up @@ -700,6 +716,35 @@ interface Table extends Parent {

**Table** represents 2d data.

### CustomCodeComponent

```ts
interface CustomCodeComponent extends Parent {
type: "custom-code-component"
/** Repository for the code of the component in the format "[github org]/[github repo]/[component name]". */
path: string
/** Semantic version of the code of the component, e.g. "^0.3.5". */
versionRange: string
/** Last date-time where the attributes for this block were modified, in ISO-8601 format. */
attributesLastModified: string
/** A unique identifier for this instance */
id: string
/** How the component should be presented in the article page according to the column layout system */
layoutWidth: LayoutWidth
/** Configuration data to be passed to the component. */
attributes: {
[key: string]: string | boolean | undefined
}
children: (ImageSet | Paragraph | CustomCodeComponent)[]
}
```

- The **CustomCodeComponent*** allows for more experimental forms of journalism, allowing editors to provide properties via Spark.
- The component itself lives off-platform, and an example might be a git repository with a standard structure. This structure would include the rendering instructions, and the data structure that is expected to be provided to the component for it to render if necessary.
- 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
84 changes: 80 additions & 4 deletions content-tree.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
export declare namespace ContentTree {
type BodyBlock = Paragraph | Heading | ImageSet | BigNumber | Layout | List | Blockquote | Pullquote | ScrollyBlock | ThematicBreak | Table | Recommended | Tweet | Video | YoutubeVideo;
type BodyBlock = Paragraph | Heading | ImageSet | BigNumber | CustomCodeComponent | Layout | List | Blockquote | Pullquote | ScrollyBlock | ThematicBreak | Table | Recommended | Tweet | Video | YoutubeVideo;
type LayoutWidth = "auto" | "inline" | "inset-left" | "inset-right" | "full-bleed" | "full-grid" | "mid-grid";
type Phrasing = Text | Break | Strong | Emphasis | Strikethrough | Link;
interface Node {
type: string;
Expand Down Expand Up @@ -251,8 +252,27 @@ export declare namespace ContentTree {
children: [TableCaption, TableBody, TableFooter] | [TableCaption, TableBody] | [TableBody, TableFooter] | [TableBody];
columnSettings: TableColumnSettings[];
}
interface CustomCodeComponent extends Parent {
type: "custom-code-component";
/** Repository for the code of the component in the format "[github org]/[github repo]/[component name]". */
path: string;
/** Semantic version of the code of the component, e.g. "^0.3.5". */
versionRange: string;
/** Last date-time where the attributes for this block were modified, in ISO-8601 format. */
attributesLastModified: string;
/** A unique identifier for this instance */
id: string;
/** How the component should be presented in the article page according to the column layout system */
layoutWidth: LayoutWidth;
/** Configuration data to be passed to the component. */
attributes: {
[key: string]: string | boolean | undefined;
};
children: (ImageSet | Paragraph | CustomCodeComponent)[];
}
namespace full {
type BodyBlock = Paragraph | Heading | ImageSet | BigNumber | Layout | List | Blockquote | Pullquote | ScrollyBlock | ThematicBreak | Table | Recommended | Tweet | Video | YoutubeVideo;
type BodyBlock = Paragraph | Heading | ImageSet | BigNumber | CustomCodeComponent | Layout | List | Blockquote | Pullquote | ScrollyBlock | ThematicBreak | Table | Recommended | Tweet | Video | YoutubeVideo;
type LayoutWidth = "auto" | "inline" | "inset-left" | "inset-right" | "full-bleed" | "full-grid" | "mid-grid";
type Phrasing = Text | Break | Strong | Emphasis | Strikethrough | Link;
interface Node {
type: string;
Expand Down Expand Up @@ -504,9 +524,28 @@ export declare namespace ContentTree {
children: [TableCaption, TableBody, TableFooter] | [TableCaption, TableBody] | [TableBody, TableFooter] | [TableBody];
columnSettings: TableColumnSettings[];
}
interface CustomCodeComponent extends Parent {
type: "custom-code-component";
/** Repository for the code of the component in the format "[github org]/[github repo]/[component name]". */
path: string;
/** Semantic version of the code of the component, e.g. "^0.3.5". */
versionRange: string;
/** Last date-time where the attributes for this block were modified, in ISO-8601 format. */
attributesLastModified: string;
/** A unique identifier for this instance */
id: string;
/** How the component should be presented in the article page according to the column layout system */
layoutWidth: LayoutWidth;
/** Configuration data to be passed to the component. */
attributes: {
[key: string]: string | boolean | undefined;
};
children: (ImageSet | Paragraph | CustomCodeComponent)[];
}
}
namespace transit {
type BodyBlock = Paragraph | Heading | ImageSet | BigNumber | Layout | List | Blockquote | Pullquote | ScrollyBlock | ThematicBreak | Table | Recommended | Tweet | Video | YoutubeVideo;
type BodyBlock = Paragraph | Heading | ImageSet | BigNumber | CustomCodeComponent | Layout | List | Blockquote | Pullquote | ScrollyBlock | ThematicBreak | Table | Recommended | Tweet | Video | YoutubeVideo;
type LayoutWidth = "auto" | "inline" | "inset-left" | "inset-right" | "full-bleed" | "full-grid" | "mid-grid";
type Phrasing = Text | Break | Strong | Emphasis | Strikethrough | Link;
interface Node {
type: string;
Expand Down Expand Up @@ -753,9 +792,28 @@ export declare namespace ContentTree {
children: [TableCaption, TableBody, TableFooter] | [TableCaption, TableBody] | [TableBody, TableFooter] | [TableBody];
columnSettings: TableColumnSettings[];
}
interface CustomCodeComponent extends Parent {
type: "custom-code-component";
/** Repository for the code of the component in the format "[github org]/[github repo]/[component name]". */
path: string;
/** Semantic version of the code of the component, e.g. "^0.3.5". */
versionRange: string;
/** Last date-time where the attributes for this block were modified, in ISO-8601 format. */
attributesLastModified: string;
/** A unique identifier for this instance */
id: string;
/** How the component should be presented in the article page according to the column layout system */
layoutWidth: LayoutWidth;
/** Configuration data to be passed to the component. */
attributes: {
[key: string]: string | boolean | undefined;
};
children: (ImageSet | Paragraph | CustomCodeComponent)[];
}
}
namespace loose {
type BodyBlock = Paragraph | Heading | ImageSet | BigNumber | Layout | List | Blockquote | Pullquote | ScrollyBlock | ThematicBreak | Table | Recommended | Tweet | Video | YoutubeVideo;
type BodyBlock = Paragraph | Heading | ImageSet | BigNumber | CustomCodeComponent | Layout | List | Blockquote | Pullquote | ScrollyBlock | ThematicBreak | Table | Recommended | Tweet | Video | YoutubeVideo;
type LayoutWidth = "auto" | "inline" | "inset-left" | "inset-right" | "full-bleed" | "full-grid" | "mid-grid";
type Phrasing = Text | Break | Strong | Emphasis | Strikethrough | Link;
interface Node {
type: string;
Expand Down Expand Up @@ -1007,5 +1065,23 @@ export declare namespace ContentTree {
children: [TableCaption, TableBody, TableFooter] | [TableCaption, TableBody] | [TableBody, TableFooter] | [TableBody];
columnSettings: TableColumnSettings[];
}
interface CustomCodeComponent extends Parent {
type: "custom-code-component";
/** Repository for the code of the component in the format "[github org]/[github repo]/[component name]". */
path: string;
/** Semantic version of the code of the component, e.g. "^0.3.5". */
versionRange: string;
/** Last date-time where the attributes for this block were modified, in ISO-8601 format. */
attributesLastModified: string;
/** A unique identifier for this instance */
id: string;
/** How the component should be presented in the article page according to the column layout system */
layoutWidth: LayoutWidth;
/** Configuration data to be passed to the component. */
attributes: {
[key: string]: string | boolean | undefined;
};
children: (ImageSet | Paragraph | CustomCodeComponent)[];
}
}
}
71 changes: 71 additions & 0 deletions schemas/body-tree.schema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,9 @@
{
"$ref": "#/definitions/ContentTree.transit.BigNumber"
},
{
"$ref": "#/definitions/ContentTree.transit.CustomCodeComponent"
},
{
"$ref": "#/definitions/ContentTree.transit.Layout"
},
Expand Down Expand Up @@ -114,6 +117,62 @@
},
"type": "object"
},
"ContentTree.transit.CustomCodeComponent": {
"properties": {
"attributes": {
"additionalProperties": {
"type": [
"string",
"boolean"
]
},
"description": "Configuration data to be passed to the component.",
"type": "object"
},
"attributesLastModified": {
"description": "Last date-time where the attributes for this block were modified, in ISO-8601 format.",
"type": "string"
},
"children": {
"items": {
"anyOf": [
{
"$ref": "#/definitions/ContentTree.transit.Paragraph"
},
{
"$ref": "#/definitions/ContentTree.transit.ImageSet"
},
{
"$ref": "#/definitions/ContentTree.transit.CustomCodeComponent"
}
]
},
"type": "array"
},
"data": {},
"id": {
"description": "A unique identifier for this instance",
"type": "string"
},
"layoutWidth": {
"$ref": "#/definitions/ContentTree.transit.LayoutWidth",
"description": "How the component should be presented in the article page according to the column layout system"
},
"path": {
"description": "Repository for the code of the component in the format \"[github org]/[github repo]/[component name]\".",
"type": "string"
},
"type": {
"const": "custom-code-component",
"type": "string"
},
"versionRange": {
"description": "Semantic version of the code of the component, e.g. \"^0.3.5\".",
"type": "string"
}
},
"type": "object"
},
"ContentTree.transit.Emphasis": {
"properties": {
"children": {
Expand Down Expand Up @@ -273,6 +332,18 @@
},
"type": "object"
},
"ContentTree.transit.LayoutWidth": {
"enum": [
"auto",
"full-bleed",
"full-grid",
"inline",
"inset-left",
"inset-right",
"mid-grid"
],
"type": "string"
},
"ContentTree.transit.Link": {
"properties": {
"children": {
Expand Down
71 changes: 71 additions & 0 deletions schemas/content-tree.schema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,9 @@
{
"$ref": "#/definitions/ContentTree.full.BigNumber"
},
{
"$ref": "#/definitions/ContentTree.full.CustomCodeComponent"
},
{
"$ref": "#/definitions/ContentTree.full.Layout"
},
Expand Down Expand Up @@ -133,6 +136,62 @@
},
"type": "object"
},
"ContentTree.full.CustomCodeComponent": {
"properties": {
"attributes": {
"additionalProperties": {
"type": [
"string",
"boolean"
]
},
"description": "Configuration data to be passed to the component.",
"type": "object"
},
"attributesLastModified": {
"description": "Last date-time where the attributes for this block were modified, in ISO-8601 format.",
"type": "string"
},
"children": {
"items": {
"anyOf": [
{
"$ref": "#/definitions/ContentTree.full.Paragraph"
},
{
"$ref": "#/definitions/ContentTree.full.ImageSet"
},
{
"$ref": "#/definitions/ContentTree.full.CustomCodeComponent"
}
]
},
"type": "array"
},
"data": {},
"id": {
"description": "A unique identifier for this instance",
"type": "string"
},
"layoutWidth": {
"$ref": "#/definitions/ContentTree.full.LayoutWidth",
"description": "How the component should be presented in the article page according to the column layout system"
},
"path": {
"description": "Repository for the code of the component in the format \"[github org]/[github repo]/[component name]\".",
"type": "string"
},
"type": {
"const": "custom-code-component",
"type": "string"
},
"versionRange": {
"description": "Semantic version of the code of the component, e.g. \"^0.3.5\".",
"type": "string"
}
},
"type": "object"
},
"ContentTree.full.Emphasis": {
"properties": {
"children": {
Expand Down Expand Up @@ -530,6 +589,18 @@
},
"type": "object"
},
"ContentTree.full.LayoutWidth": {
"enum": [
"auto",
"full-bleed",
"full-grid",
"inline",
"inset-left",
"inset-right",
"mid-grid"
],
"type": "string"
},
"ContentTree.full.Link": {
"properties": {
"children": {
Expand Down
Loading

0 comments on commit 896ba40

Please sign in to comment.