Editions crossword article

dotcom-rendering/package.json

@@ -51,7 +51,7 @@
 		"@guardian/ophan-tracker-js": "2.2.5",
 		"@guardian/shimport": "1.0.2",
 		"@guardian/source": "8.0.0",
-		"@guardian/source-development-kitchen": "12.0.0",
+		"@guardian/source-development-kitchen": "13.1.0",
 		"@guardian/support-dotcom-components": "2.9.1",
 		"@guardian/tsconfig": "0.2.0",
 		"@playwright/test": "1.45.3",

dotcom-rendering/scripts/json-schema/gen-schema.js

@@ -7,6 +7,7 @@ const {
 	getNewsletterPageSchema,
 	getTagPageSchema,
 	getBlockSchema,
+	getEditionsCrosswordSchema,
 } = require('./get-schema');
 
 const root = path.resolve(__dirname, '..', '..');
@@ -16,6 +17,7 @@ const frontSchema = getFrontSchema();
 const tagPageSchema = getTagPageSchema();
 const newsletterPageSchema = getNewsletterPageSchema();
 const blockSchema = getBlockSchema();
+const editionsCrosswordSchema = getEditionsCrosswordSchema();
 
 fs.writeFile(
 	`${root}/src/model/article-schema.json`,
@@ -71,3 +73,14 @@ fs.writeFile(
 		}
 	},
 );
+
+fs.writeFile(
+	`${root}/src/model/editions-crossword-schema.json`,
+	editionsCrosswordSchema,
+	'utf8',
+	(err) => {
+		if (err) {
+			console.log(err);
+		}
+	},
+);

dotcom-rendering/scripts/json-schema/get-schema.js

@@ -9,6 +9,7 @@ const program = TJS.getProgramFromFiles(
 		path.resolve(`${root}/src/types/frontend.ts`),
 		path.resolve(`${root}/src/types/tagPage.ts`),
 		path.resolve(`${root}/src/types/newslettersPage.ts`),
+		path.resolve(`${root}/src/types/editionsCrossword.ts`),
 	],
 	{
 		skipLibCheck: true,
@@ -57,10 +58,19 @@ const getBlockSchema = () => {
 	);
 };
 
+const getEditionsCrosswordSchema = () => {
+	return JSON.stringify(
+		TJS.generateSchema(program, 'FEEditionsCrosswords', settings),
+		null,
+		4,
+	);
+};
+
 module.exports = {
 	getArticleSchema,
 	getFrontSchema,
 	getTagPageSchema,
 	getNewsletterPageSchema,
 	getBlockSchema,
+	getEditionsCrosswordSchema,
 };

dotcom-rendering/src/client/main.editionsCrossword.ts

@@ -0,0 +1,21 @@
+import './webpackPublicPath';
+import { startup } from './startup';
+
+/*************************************************************
+ *
+ * The following modules are bundled in the entry chunk,
+ * so they can be run immediately, but we still want to report
+ * on the duration of loading and evaluating them.
+ *
+ *************************************************************/
+
+void startup(
+	'islands',
+	() =>
+		import(/* webpackMode: "eager" */ './islands/islands').then(
+			({ islands }) => islands(),
+		),
+	{
+		priority: 'critical',
+	},
+);

dotcom-rendering/src/components/EditionsCrossword.importable.tsx

@@ -0,0 +1,10 @@
+import type { CrosswordData } from '@guardian/source-development-kitchen/dist/react-components/crossword/@types/crossword';
+import { Crossword } from '@guardian/source-development-kitchen/react-components';
+
+interface EditionsCrosswordProps {
+	data: CrosswordData;
+}
+
+export const EditionsCrossword = ({ data }: EditionsCrosswordProps) => (
+	<Crossword data={data} />
+);

dotcom-rendering/src/components/EditionsCrosswordPage.tsx

@@ -0,0 +1,20 @@
+import { StrictMode } from 'react';
+import { EditionsCrosswordLayout } from '../layouts/EditionsCrosswordLayout';
+import type { FEEditionsCrosswords } from '../types/editionsCrossword';
+
+interface Props {
+	editionsCrosswords: FEEditionsCrosswords;
+}
+
+export const EditionsCrosswordPage = ({ editionsCrosswords }: Props) => {
+	return (
+		<StrictMode>
+			<EditionsCrosswordLayout
+				editionsCrossword={editionsCrosswords.cryptic}
+			/>
+			<EditionsCrosswordLayout
+				editionsCrossword={editionsCrosswords.quick}
+			/>
+		</StrictMode>
+	);
+};

dotcom-rendering/src/layouts/EditionsCrosswordLayout.tsx

@@ -0,0 +1,53 @@
+import { EditionsCrossword } from '../components/EditionsCrossword.importable';
+import { Island } from '../components/Island';
+import type { FEEditionsCrossword } from '../types/editionsCrossword';
+
+interface Props {
+	editionsCrossword: FEEditionsCrossword;
+}
+
+export const EditionsCrosswordLayout = ({ editionsCrossword }: Props) => {
+	const crossword: FEEditionsCrossword = editionsCrossword;
+	if (
+		!crossword.number ||
+		!crossword.name ||
+		!crossword.date ||
+		!crossword.solutionAvailable ||
+		!crossword.pdf
+	) {
+		console.error('Crossword data is missing or incomplete:', crossword);
+		return null;
+	}
+	return (
+		<main data-layout="EditionsCrosswordLayout">
+			<Island priority="critical">
+				<EditionsCrossword
+					data={{
+						id: crossword.name,
+						number: crossword.number,
+						name: crossword.name,
+						date: new Date(crossword.date).getTime(),
+						webPublicationDate: new Date(crossword.date).getTime(),
+						entries: crossword.entries,
+						solutionAvailable: crossword.solutionAvailable,
+						dateSolutionAvailable: new Date(
+							crossword.dateSolutionAvailable,
+						).getTime(),
+						dimensions: crossword.dimensions,
+						crosswordType: crossword.type as
+							| 'cryptic'
+							| 'everyman'
+							| 'prize'
+							| 'quick-cryptic'
+							| 'quick'
+							| 'quiptic'
+							| 'special'
+							| 'speedy'
+							| 'weekend',
+						pdf: crossword.pdf,
+					}}
+				/>
+			</Island>
+		</main>
+	);
+};

dotcom-rendering/src/lib/assets.ts

@@ -62,7 +62,8 @@ export type Build =
 	| 'client.apps'
 	| 'client.web'
 	| 'client.web.variant'
-	| 'client.web.legacy';
+	| 'client.web.legacy'
+	| 'client.editionsCrossword';
 
 type ManifestPath = `./manifest.${Build}.json`;
 
@@ -108,6 +109,9 @@ export const WEB = getScriptRegex('client.web');
 export const WEB_VARIANT_SCRIPT = getScriptRegex('client.web.variant');
 export const WEB_LEGACY_SCRIPT = getScriptRegex('client.web.legacy');
 export const APPS_SCRIPT = getScriptRegex('client.apps');
+export const EDITIONS_CROSSWORD_SCRIPT = getScriptRegex(
+	'client.editionsCrossword',
+);
 
 export const generateScriptTags = (scripts: string[]): string[] =>
 	scripts.filter(isString).map((script) => {
@@ -117,7 +121,8 @@ export const generateScriptTags = (scripts: string[]): string[] =>
 		if (
 			script.match(WEB) ??
 			script.match(WEB_VARIANT_SCRIPT) ??
-			script.match(APPS_SCRIPT)
+			script.match(APPS_SCRIPT) ??
+			script.match(EDITIONS_CROSSWORD_SCRIPT)
 		) {
 			return `<script type="module" src="${script}"></script>`;
 		}

dotcom-rendering/src/model/article-schema.json

@@ -434,6 +434,174 @@
         },
         "isRightToLeftLang": {
             "type": "boolean"
+        },
+        "crossword": {
+            "type": "object",
+            "properties": {
+                "creator": {
+                    "type": "object",
+                    "properties": {
+                        "name": {
+                            "type": "string"
+                        },
+                        "webUrl": {
+                            "type": "string"
+                        }
+                    },
+                    "required": [
+                        "name",
+                        "webUrl"
+                    ]
+                },
+                "crosswordType": {
+                    "enum": [
+                        "cryptic",
+                        "everyman",
+                        "prize",
+                        "quick",
+                        "quick-cryptic",
+                        "quiptic",
+                        "special",
+                        "speedy",
+                        "weekend"
+                    ],
+                    "type": "string"
+                },
+                "date": {
+                    "type": "number"
+                },
+                "dateSolutionAvailable": {
+                    "type": "number"
+                },
+                "dimensions": {
+                    "type": "object",
+                    "properties": {
+                        "cols": {
+                            "type": "number"
+                        },
+                        "rows": {
+                            "type": "number"
+                        }
+                    },
+                    "required": [
+                        "cols",
+                        "rows"
+                    ]
+                },
+                "entries": {
+                    "type": "array",
+                    "items": {
+                        "type": "object",
+                        "properties": {
+                            "clue": {
+                                "type": "string"
+                            },
+                            "direction": {
+                                "enum": [
+                                    "across",
+                                    "down"
+                                ],
+                                "type": "string"
+                            },
+                            "group": {
+                                "type": "array",
+                                "items": {
+                                    "type": "string"
+                                }
+                            },
+                            "humanNumber": {
+                                "type": "string"
+                            },
+                            "id": {
+                                "type": "string"
+                            },
+                            "length": {
+                                "type": "number"
+                            },
+                            "number": {
+                                "type": "number"
+                            },
+                            "position": {
+                                "type": "object",
+                                "properties": {
+                                    "x": {
+                                        "type": "number"
+                                    },
+                                    "y": {
+                                        "type": "number"
+                                    }
+                                },
+                                "required": [
+                                    "x",
+                                    "y"
+                                ]
+                            },
+                            "separatorLocations": {
+                                "type": "object",
+                                "properties": {
+                                    ",": {
+                                        "type": "array",
+                                        "items": {
+                                            "type": "number"
+                                        }
+                                    },
+                                    "-": {
+                                        "type": "array",
+                                        "items": {
+                                            "type": "number"
+                                        }
+                                    }
+                                }
+                            },
+                            "solution": {
+                                "type": "string"
+                            }
+                        },
+                        "required": [
+                            "clue",
+                            "direction",
+                            "group",
+                            "humanNumber",
+                            "id",
+                            "length",
+                            "number",
+                            "position",
+                            "separatorLocations"
+                        ]
+                    }
+                },
+                "id": {
+                    "type": "string"
+                },
+                "name": {
+                    "type": "string"
+                },
+                "number": {
+                    "type": "number"
+                },
+                "pdf": {
+                    "type": "string"
+                },
+                "solutionAvailable": {
+                    "type": "boolean"
+                },
+                "webPublicationDate": {
+                    "type": "number"
+                },
+                "instructions": {
+                    "type": "string"
+                }
+            },
+            "required": [
+                "crosswordType",
+                "date",
+                "dimensions",
+                "entries",
+                "id",
+                "name",
+                "number",
+                "solutionAvailable"
+            ]
         }
     },
     "required": [