feat: typescript support and AsciinemaPlayer component

Adds support for typescript and the AsciinemaPlayer component.

docusaurus.config.js

@@ -38,8 +38,11 @@ const config = {
         theme: {
           //  It looks like Docosaurus doesn't yet support directly importing
           //  this style in the EmailSignupForm component, so as a workaround
-          //  it is imported here.
-          customCss: [require.resolve( 'react-mailchimp-email-signup-form/dist/esm/index.css')],
+          //  it is imported here, along with other stylesheets we need.
+          customCss: [
+            require.resolve('react-mailchimp-email-signup-form/dist/esm/index.css'),
+            require.resolve('asciinema-player/dist/bundle/asciinema-player.css'),
+          ],
         },
         gtag: {
           trackingID: 'G-8HZFMZV9Z4',

makefile

@@ -16,6 +16,7 @@ serve:
 # folder as if we don't have them we should definitely not deploy.
 .PHONY: build
 build:
+	npx tsc # test for typescript types...
 	mkdir -p ./static/downloads
 	./scripts/build-samples.sh
 	cp ./artifacts/samples.zip  ./static/downloads/effective-shell-samples.zip

package.json

@@ -35,5 +35,11 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "^2.0.0-beta.18",
+    "@tsconfig/docusaurus": "^1.0.5",
+    "asciinema-player": "^3.0.0-rc.1",
+    "typescript": "^4.6.3"
   }
 }

src/components/AsciinemaPlayer/AsciinemaPlayer.tsx

@@ -0,0 +1,43 @@
+// @ts-check
+// This react component is based on the excellent code at:
+//  https://github.com/asciinema/asciinema-player/issues/72
+// Props to https://github.com/dunnkers
+
+import React, { useEffect, useRef } from 'react';
+import * as AsciinemaPlayerLibrary from 'asciinema-player';
+
+type AsciinemaPlayerProps = {
+    src: string;
+    style: React.CSSProperties;
+    // START asciinemaOptions
+    cols: string;
+    rows: string;
+    autoPlay: boolean
+    preload: boolean;
+    loop: boolean | number;
+    startAt: number | string;
+    speed: number;
+    idleTimeLimit: number;
+    theme: string;
+    poster: string;
+    fit: string;
+    fontSize: string;
+    // END asciinemaOptions
+};
+
+const AsciinemaPlayer: React.FC<AsciinemaPlayerProps> = ({
+    src,
+    style,
+    ...asciinemaOptions
+}) => {
+    const ref = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const currentRef = ref.current;
+        AsciinemaPlayerLibrary.create(src, currentRef, asciinemaOptions);
+    }, [src]);
+
+    return <div ref={ref} style={style} />;
+};
+
+export default AsciinemaPlayer;

tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@tsconfig/docusaurus/tsconfig.json"
+}