Move CheerpX for Flash docs to its own product section (#41)

public/_redirects

@@ -10,3 +10,13 @@
 /cheerpx2 /cheerpx
 /cheerpx3 /cheerpx
 /docs /#ecosystem
+/cheerpx/for-flash /cheerpx-for-flash
+/cheerpx/for-flash/Bridge-Tutorial /cheerpx-for-flash/native-bridge/tutorial
+/cheerpx/for-flash/Changelog /cheerpx-for-flash/changelog
+/cheerpx/for-flash/Chrome-Extension /cheerpx-for-flash/extension
+/cheerpx/for-flash/Frequently-Asked-Questions /cheerpx-for-flash/faq
+/cheerpx/for-flash/Getting-Started /cheerpx-for-flash/getting-started
+/cheerpx/for-flash/How-It-Works /cheerpx-for-flash/how
+/cheerpx/for-flash/Native-Bridge /cheerpx-for-flash/native-bridge
+/cheerpx/for-flash/Troubleshooting /cheerpx-for-flash/troubleshooting
+/cheerpx/for-flash/Tutorial /cheerpx-for-flash/getting-started/tutorial

src/components/Footer.astro

@@ -53,6 +53,7 @@ const sections: Section[] = [
 			{ text: "Cheerp", href: "/cheerp" },
 			{ text: "CheerpJ", href: "/cheerpj" },
 			{ text: "CheerpX", href: "/cheerpx" },
+			{ text: "CheerpX for Flash", href: "/cheerpx-for-flash" },
 		],
 	},
 ];

src/components/landing-page/ClientCarousel.svelte

@@ -42,22 +42,25 @@
 	}
 </script>
 
-<div class="w-full relative mx-auto 2xl:max-w-screen-2xl opacity-0 transition-opacity" class:opacity-100={typeof repeatWidth === "number"}>
+<div
+	class="w-full relative mx-auto 2xl:max-w-screen-2xl opacity-0 transition-opacity"
+	class:opacity-100={typeof repeatWidth === "number"}
+>
 	<ul
 		class="client-carousel whitespace-nowrap mx-auto 2xl:!animate-none 2xl:overflow-x-hidden"
 		aria-label="Clients"
 		style:--repeat-width={repeatWidth + "px"}
-		style:animation-name={typeof repeatWidth === "undefined" ? "unset" : "client-carousel"}
+		style:animation-name={typeof repeatWidth === "undefined"
+			? "unset"
+			: "client-carousel"}
 	>
 		{#each clientImages2x as { src, alt }, i}
-			<li
-				class="inline-block px-8"
-			>
+			<li class="inline-block px-8">
 				<img
 					src={src.src}
-					alt={alt}
+					{alt}
 					decoding="async"
-					class="opacity-50 h-16 grayscale contrast-0"
+					class="opacity-80 h-16 grayscale contrast-0"
 					bind:this={imgEls[i]}
 					on:load={() => loadedImagesCount++}
 				/>

src/components/landing-page/Hero.astro

@@ -7,7 +7,9 @@ import ClientCarousel from "./ClientCarousel.svelte";
 import Icon from "astro-icon";
 ---
 
-<header class="min-h-[calc(100vh-48px)] flex flex-col items-center">
+<header
+	class="min-h-[calc(100vh-48px)] flex flex-col items-center bg-gradient-to-b to-[#e6275544] from-stone-950"
+>
 	<div class="grow"></div>
 
 	<div

src/content/blog/announcing-cheerpx-for-flash-a-solution-to-extend-the-life-of-flash-applications-post-2020.md

@@ -37,7 +37,7 @@ Work on CheerpX is still ongoing, and the tool is not released at present.
 
 ### CheerpX for Flash
 
-[CheerpX for Flash](/cheerpx/for-flash) is a special embodiment of [CheerpX](/cheerpx), a WebAssembly virtualization solution to run Linux executables in-browser.
+[CheerpX for Flash](/cheerpx-for-flash) is a special embodiment of [CheerpX](/cheerpx), a WebAssembly virtualization solution to run Linux executables in-browser.
 
 CheerpX for Flash uses the CheerpX technology to run an ‘emulated’ (virtualized) version of the Adobe Flash Player, without having to install it on the client browser, and therefore compatibly with the deprecation of Flash post-2020.
 

src/content/docs/cheerpx/for-flash/Frequently-Asked-Questions.md → src/content/docs/cheerpx-for-flash/01-faq.md

@@ -1,5 +1,5 @@
 ---
-title: CheerpX for Flash FAQs
+title: Frequently asked questions
 ---
 
 ## Which browsers/operating systems are supported by CheerpX for Flash?
@@ -40,11 +40,11 @@ CheerpX for Flash is hosted by you, and is supported by any major HTTP server. A
 
 ## How is CheerpX for Flash integrated on a page?
 
-From the browsers standpoint, you simply need to provide access to one of our JS files using a standard `<script>` tag. You point the script tag to the relevant HTTP server, and the browser will do the rest. In the event that you are not able to add a line of Javascript to the HTML page hosting your flash content, we can also ship custom [Chrome extensions](/cheerpx/for-flash/Chrome-Extension), which will dynamically inject CheerpX on any page (although you then have to configure the end-user machine to have this extension correctly installed).
+From the browsers standpoint, you simply need to provide access to one of our JS files using a standard `<script>` tag. You point the script tag to the relevant HTTP server, and the browser will do the rest. In the event that you are not able to add a line of Javascript to the HTML page hosting your flash content, we can also ship custom [Chrome extensions](/cheerpx-for-flash/extension), which will dynamically inject CheerpX on any page (although you then have to configure the end-user machine to have this extension correctly installed).
 
 ## How does all this work?
 
-In essence, CheerpX is a Flash player HTML 'emulator', that runs via a JIT compilation engine, entirely in the browser tab, through WASM. To read this in more detail take a look at our [diagrams](/cheerpx/for-flash/How-It-Works), or read more on our [website](https://leaningtech.com/cheerpx-for-flash).
+In essence, CheerpX is a Flash player HTML 'emulator', that runs via a JIT compilation engine, entirely in the browser tab, through WASM. To read this in more detail take a look at our [diagrams](/cheerpx-for-flash/how), or read more on our [website](https://leaningtech.com/cheerpx-for-flash).
 
 ## What if I need support?
 
@@ -72,7 +72,7 @@ As with any virtualization, performance hits are inevitable. We strive to improv
 
 ## What happens if performance isn't good enough for me?
 
-We always work with our customers to try find the best solution for them. This may come in different forms, whether the incremental increases in performance are sufficient, or whether targeted performance profiling is necessary. If all else fails, we offer a 'Native Bridge' server side component, which vastly improves performance. You can read more about the native bridge [here](/cheerpx/for-flash/Native-Bridge).
+We always work with our customers to try find the best solution for them. This may come in different forms, whether the incremental increases in performance are sufficient, or whether targeted performance profiling is necessary. If all else fails, we offer a 'Native Bridge' server side component, which vastly improves performance. You can read more about the native bridge [here](/cheerpx-for-flash/native-bridge).
 
 ## Do I need a high end machine for this to work?
 

src/content/docs/cheerpx/for-flash/Tutorial.md → src/content/docs/cheerpx-for-flash/10-getting-started/01-tutorial.md

@@ -40,7 +40,7 @@ Now, lets add CheerpX to our server. Simply copy the `ppdeploy` folder we prepar
 
 Confirm that you can now reference your build of CheerpX, by heading to your browser and searching `localhost/cheerpx/ppdeploy/pp.js`. This should resolve, and show a Javascript file.
 
-Congratulations, you're now successfully hosting CheerpX for Flash. With some other HTTP server, you may encounter some trouble serving all of our files. For more information, check out our [troubleshooting page](/cheerpx/for-flash/Troubleshooting).
+Congratulations, you're now successfully hosting CheerpX for Flash. With some other HTTP server, you may encounter some trouble serving all of our files. For more information, check out our [troubleshooting page](/cheerpx-for-flash/troubleshooting).
 
 # Set up a sample page
 
@@ -139,4 +139,4 @@ For further information, take a look at the official [Chromium documentation](ht
 
 # The end!
 
-Congratulations, you have successfully installed CheerpX for Flash, and added it to an HTML page. You can now view Flash content in a Flashless browser! For more information, please read our in-depth [Getting Started](/cheerpx/for-flash/Getting-Started) page, or our [How It Works](/cheerpx/for-flash/How-It-Works) page.
+Congratulations, you have successfully installed CheerpX for Flash, and added it to an HTML page. You can now view Flash content in a Flashless browser! For more information, please read our in-depth [Getting Started](/cheerpx-for-flash/getting-started) page, or our [How It Works](/cheerpx-for-flash/how) page.

src/content/docs/cheerpx/for-flash/Getting-Started.md → src/content/docs/cheerpx-for-flash/10-getting-started/index.md

@@ -1,22 +1,24 @@
 ---
-title: Getting Started
+title: Getting started
 ---
 
 This page will help you get started with CheerpX for Flash and give you a brief insight into how to run Flash content in a normal modern browser.
 
-To start, you need to have joined the Enterprise Evaluation Programme, or purchased a license for CheerpX to receive our releases. You should receive these via email each time we have a new release. If you want to enquire about the EEP feel free to [contact us](https://leaningtech.com/contact-us).
+## Prerequisites
+
+To start, you need to have joined the Enterprise Evaluation Programme (EEP), or purchased a license for CheerpX to receive our releases. You should receive these via email each time we have a new release. If you want to enquire about the EEP feel free to [contact us](https://leaningtech.com/contact-us).
 
 You also need to make sure you have agreed to Adobe's free evaluation license, and received your custom build of `libHCSFP_CX.so` from Adobe/Harman. Feel free to get in touch with Harman, tell them that you're planning to use CheerpX, and ask them for the `libHCSFP_CX.so` file. They will provide you with a build to use alongside CheerpX.
 
 Make sure you have downloaded the latest CheerpX release, and unzipped this. The contents of the zip should look like this:
 
 <p align="center"><img src="https://leaningtech.com/wp-content/uploads/2021/04/cheerpx_contents.png" width="700"></p>
 
-Open the `ppfp/` folder and drop the `libHSCFP.so` file into there.
+Open the `ppfp/` folder and drop the `libHCSFP_CX.so` file into there.
 
 You now have CheerpX ready to be installed on a HTTP server!
 
-# Installing CheerpX for Flash
+## Installing CheerpX for Flash
 
 This part of the installation procedure may have some discrepancy, depending on your method of serving CheerpX for Flash.
 
@@ -26,29 +28,37 @@ Simply configure a server of your choice, and place the CheerpX directory into i
 
 Double check your server is correctly serving the files before proceeding.
 
-We tend to find that with most major hosting methods, this is sufficient, but in certain scenario's, additional steps have to be taken to correctly configure the HTTP server. We have detailed some of these common problems on our [troubleshooting](/cheerpx/for-flash/Troubleshooting) page.
+We tend to find that with most major hosting methods, this is sufficient, but in certain scenario's, additional steps have to be taken to correctly configure the HTTP server. We have detailed some of these common problems on our [troubleshooting](/cheerpx-for-flash/troubleshooting) page.
 
-# How to integrate CheerpX for Flash
+## How to integrate CheerpX for Flash
 
 In most scenarios, our customers are able to add some simple Javascript to the HTML page that is embedding the flash content. The process is extremely straightforward, and involves two simple steps:
 
-- Referencing the pp.js script that we are hosting on our HTTP server, like so:
+1. Include the `pp.js` script that we are hosting on our HTTP server:
 
-  `<script src="https://mydomain.com/cheerpx/pp.js"></script>`
+```html
+<script src="https://mydomain.com/cheerpx/pp.js"></script>
+```
 
-- Calling the ppInit() function within the pp.js file:
+2. Call the `ppInit()` function to initialise CheerpX for Flash:
 
-  `<script>window.onload = (event) => { ppInit() }</script>`
+```html
+<script>
+	window.onload = (event) => {
+		ppInit();
+	};
+</script>
+```
 
-Here, I am calling the init function on the load of the window, although it is up to your discretion to decide the best way to initialize CheerpX in your own environment.
+Here, we are calling the init function once the window finishes loading, although it is up to your discretion to decide the best way to initialize CheerpX in your own environment.
 
-And that's it! As long as the user is accessing the page from a WASM enabled browser, they should now experience seamless, flash content, close to the experience before the end-of-life of Flash.
+And that's it! As long as the user is accessing the page from a WebAssembly-enabled browser, they should now experience seamless Flash content, close to the experience before the end-of-life of Flash.
 
 ---
 
-In some scenarios, a customer cannot edit the HTML of the page directly. If this is your case, we can offer one other workaround, which involves configuring and installing a custom [chrome extension](/cheerpx/for-flash/Chrome-Extension). This extension does not contain CheerpX for Flash, it simply dynamically adds the same Javascript outlined above, as soon as a user navigates to the page.
+In some scenarios, a customer cannot edit the HTML of the page directly. If this is your case, we can offer one other workaround, which involves configuring and installing a custom [chrome extension](/cheerpx-for-flash/extension). This extension does not contain CheerpX for Flash, it simply dynamically adds the same JavaScript outlined above, as soon as a user navigates to the page.
 
-# Basic HTML page for testing
+## Basic HTML page for testing
 
 ```html
 <!doctype html>
@@ -80,8 +90,8 @@ You can now serve this web page on a simple http server - this could be the same
 
 ---
 
-Take a look at our dedicated [troubleshooting page](/cheerpx/for-flash/Troubleshooting) for a more detailed overview of how to troubleshoot any issues you may encounter.
+Take a look at our dedicated [troubleshooting page](/cheerpx-for-flash/troubleshooting) for a more detailed overview of how to troubleshoot any issues you may encounter.
 
-For further information on setting up and configuring CheerpX for Flash, take a look at [our tutorial](/cheerpx/for-flash/Tutorial).
+For further information on setting up and configuring CheerpX for Flash, take a look at [our tutorial](/cheerpx-for-flash/getting-started/tutorial).
 
-For further information on how things work, and the infrastructure requried to run CheerpX for Flash, take a look at [how it works](/cheerpx/for-flash/How-It-Works).
+For further information on how things work, and the infrastructure requried to run CheerpX for Flash, take a look at [how it works](/cheerpx-for-flash/how).

src/content/docs/cheerpx/for-flash/Native-Bridge.md → src/content/docs/cheerpx-for-flash/20-native-bridge/index.md

@@ -1,5 +1,5 @@
 ---
-title: CheerpX for Flash - Native Bridge
+title: Native Bridge
 ---
 
 In a small number of use cases, our customer could have the following scenario:

src/content/docs/cheerpx/for-flash/Bridge-Tutorial.md → src/content/docs/cheerpx-for-flash/20-native-bridge/tutorial.md

@@ -1,8 +1,8 @@
 ---
-title: Bridge Tutorial
+title: Native Bridge tutorial
 ---
 
-When CheerpX has a performance drop off too large for a customer, we will offer our Native Bridge extension. To read more about the Native Bridge, read our [feature page](/cheerpx/for-flash/Native-Bridge).
+When CheerpX has a performance drop off too large for a customer, we will offer our Native Bridge extension. To read more about the Native Bridge, read our [feature page](/cheerpx-for-flash/native-bridge).
 
 # Setup the image
 

src/content/docs/cheerpx/for-flash/Chrome-Extension.md → src/content/docs/cheerpx-for-flash/30-extension.md

@@ -1,5 +1,5 @@
 ---
-title: CheerpX for Flash - Chrome Extension
+title: Chrome extension
 ---
 
 In a small number of use cases, our customer could have the following scenario:

src/content/docs/cheerpx/for-flash/How-It-Works.md → src/content/docs/cheerpx-for-flash/50-how.md

@@ -1,5 +1,5 @@
 ---
-title: How CheerpX for Flash works
+title: How it works
 ---
 
 CheerpX is designed to be simple. Our aim is to take as much complexity away from the customers and end user as possible, hence why end users don't need to do anything to use CheerpX for Flash.
@@ -32,7 +32,7 @@ If you are looking to integrate CheerpX for Flash on your applications, the proc
 
 All the computation takes place directly in the end users browser tab, and as long as they are using a WASM compliant browser, things should work right off the bat.
 
-For a more detailed look at how to integrate CheerpX for Flash, take a look at our [tutorial](/cheerpx/for-flash/Tutorial).
+For a more detailed look at how to integrate CheerpX for Flash, take a look at our [tutorial](/cheerpx-for-flash/getting-started/tutorial).
 
 ---
 

src/content/docs/cheerpx/for-flash/index.md → src/content/docs/cheerpx-for-flash/index.mdx

@@ -3,17 +3,24 @@ title: CheerpX for Flash
 description: Run Flash content in the browser without the Flash Player
 ---
 
+import LinkButton from "@/components/LinkButton.astro";
+
 **Latest release:** ![Latest version](https://img.shields.io/badge/2022--05--19-v35-green)
 
 CheerpX for Flash is a solution for organisations to support Flash applications running on modern browsers (Chrome, Edge, Firefox) without using the Adobe Flash plugin. CheerpX for Flash is a pure HTML5/JavaScript/WebAssembly solution that is added to existing, unmodified Flash applications, to transform them into HTML5 pages.
 
 This allows end users to access existing Flash content with standard browsers, and doesn't require any modification to the original Flash source code to work. CheerpX for Flash is added to existing Flash pages via either a single line of JavaScript, or a via a browser extension (for dynamically generated Flash pages).
 
-[**Main project link**](https://leaningtech.com/cheerpx-for-flash/)
+[Product page](https://leaningtech.com/cheerpx-for-flash/)
 
 ## What is CheerpX for Flash?
 
-<p align="center"><img src="https://leaningtech.com/wp-content/uploads/2021/02/treeFlash.gif" width="450"></p>
+<p align="center">
+	<img
+		src="https://leaningtech.com/wp-content/uploads/2021/02/treeFlash.gif"
+		width="450"
+	/>
+</p>
 
 **CheerpX for Flash is constituted of three components:**
 
@@ -43,16 +50,17 @@ CheerpX is currently in active development, and is used by organisations worldwi
 
 To learn more about how you can test CheerpX for Flash, [speak to our team](https://leaningtech.com/contact-us/?subject=CheerpX%20for%20Flash%20information%20request#mailus).
 
-If you have already spoken to us and are beginning to test CheerpX, please refer to the following pages:
+If you have already spoken to us and are beginning to test CheerpX, get started by clicking the link below.
 
-1. [CheerpX Tutorial](/cheerpx/for-flash/Tutorial)
-2. [Getting Started](/cheerpx/for-flash/Getting-Started)
-3. [How Things Work](/cheerpx/for-flash/How-It-Works)
-4. [CheerpX Native Bridge](/cheerpx/for-flash/Native-Bridge)
-5. [Chrome Extension](/cheerpx/for-flash/Chrome-Extension)
+<LinkButton
+	label="Get started"
+	type="primary"
+	href="/cheerpx-for-flash/getting-started"
+	iconRight="mi:arrow-right"
+/>
 
 ## Bugs and Questions
 
 If you are testing CheerpX for Flash, or using it in production, please report any bugs on your dedicated Asana portal. Feel free to @ an engineer, sometimes the notifications will slip through the cracks.
 
-For any further questions, please [get in touch](https://leaningtech.com/contact-us/?subject=CheerpX%20for%20Flash%20information%20request#mailus) with us or read our [FAQ](/cheerpx/for-flash/Frequently-Asked-Questions).
+For any further questions, please [get in touch](https://leaningtech.com/contact-us/?subject=CheerpX%20for%20Flash%20information%20request#mailus) with us or read our [FAQ](/cheerpx-for-flash/faq).

src/lib/nav.ts

@@ -25,7 +25,12 @@ export type NavEntry = NavDirectory | NavFile;
 /** https://diataxis.fr */
 export type Mode = "guides" | "tutorials" | "reference" | "explanation";
 
-export type Product = "cheerp" | "cheerpj2" | "cheerpj3" | "cheerpx";
+export type Product =
+	| "cheerp"
+	| "cheerpj2"
+	| "cheerpj3"
+	| "cheerpx"
+	| "cheerpx-for-flash";
 
 export function isMode(value: unknown): value is Mode {
 	return (
@@ -41,7 +46,8 @@ export function isProduct(value: unknown): value is Product {
 		value === "cheerp" ||
 		value === "cheerpj2" ||
 		value === "cheerpj3" ||
-		value === "cheerpx"
+		value === "cheerpx" ||
+		value === "cheerpx-for-flash"
 	);
 }