Refactor JanDit

[Yoda-Soda]

• Bookshop config removed for new split config
• New visual editing added.
• I've componentised some of the reused components.
• I've removed the bootstrap css and redid it with tailwind.
• I've removed the jquery and created custom react hooks to handle those interactive bits.
• I've moved everything that is not reactive to astro files to fit better as an astro template.
• Added astro image optimisation to all the images.
• I've created an interactive react component to showcase how interactivity should be used and how visual editing would work with react.
• I've redid the nav and made it fully accessible.
• I've also redid the theming so updating the colours in CloudCannon would change how the template looks.

[Tate-CC]

For page building to work fully this will need data-component-key and data-component

Suggested change

	<main id="main-content" tabindex="-1" data-editable="array" data-prop="contentBlocks" data-id-key="_name">
	{
	contentBlocks.map((block: any) => {
	const key = block._name;
	const Component = components[key];
	if (!Component) {
	console.warn(`Unknown component for block key '${key}'`, block);
	return null;
	}
	return (
	<div data-editable="array-item" data-id={block._name}>
	<Component {...block} />
	</div>
	);
	})
	}
	</main>
	<main id="main-content" tabindex="-1" data-editable="array" data-prop="contentBlocks" data-id-key="_name" data-component-key="_name">
	{
	contentBlocks.map((block: any) => {
	const key = block._name;
	const Component = components[key];
	if (!Component) {
	console.warn(`Unknown component for block key '${key}'`, block);
	return null;
	}
	return (
	<div data-editable="array-item" data-id={key} data-component={key}>
	<Component {...block} />
	</div>
	);
	})
	}
	</main>

[aleksandrgordeev]

@Tate-CC This change actually breaks some components when rendered in the Visual Editor. Could you explain what this change is intended to do? I wasn’t able to understand the purpose of the Component Editable Region from the CloudCannon documentation.

[Yoda-Soda]

This will be fixed by Tate in an upcoming release. For now I've pinned the astro version

[Yoda-Soda]

Wow 🤩 thanks Tate. I'll work through your comments and suggestions first thing next week.