fix: correct use of dependencies rather than dev dependencies

.all-contributorsrc

@@ -1,6 +1,7 @@
 {
   "files": [
-    "README.md"
+    "README.md",
+    "docs/xx-appendices/thanks.md"
   ],
   "imageSize": 100,
   "commit": false,

.github/workflows/pull-request.yaml

@@ -10,6 +10,15 @@ jobs:
     - name: Checkout
       uses: actions/checkout@v2
 
+    # Check typescript compiles properly.
+    - name: Check TypeScript
+      run: make typescript-check
+
+    # Fixup Git URLs, see:
+    # https://stackoverflow.com/questions/70663523/the-unauthenticated-git-protocol-on-port-9418-is-no-longer-supported
+    - name: Fix up git URLs
+      run: echo -e '[url "https://github.com/"]\n  insteadOf = "git://github.com/"' >> ~/.gitconfig
+
     # Run the build - this will fail if there are broken links etc.
     - name: Build
       run: make build

.github/workflows/release-please.yaml

@@ -30,6 +30,12 @@ jobs:
         uses: actions/checkout@v2
         if: ${{ steps.release.outputs.release_created }}
 
+      # Fixup Git URLs, see:
+      # https://stackoverflow.com/questions/70663523/the-unauthenticated-git-protocol-on-port-9418-is-no-longer-supported
+      - name: Fix up git URLs
+        run: echo -e '[url "https://github.com/"]\n  insteadOf = "git://github.com/"' >> ~/.gitconfig
+        if: ${{ steps.release.outputs.release_created }}
+
       # Run the build - this will fail if there are broken links etc.
       - name: Build
         run: make build

README.md

@@ -56,19 +56,25 @@ This section contains information on how to built, use and edit the site. To hel
 
 To setup dependencies, run:
 
-```sh
+```bash
 make setup
 ```
 
+To test that TypeScript types compile, run:
+
+```bash
+make typescript-check
+```
+
 To serve the site locally, run:
 
-```sh
+```bash
 make serve
 ```
 
 To build the site, run:
 
-```sh
+```bash
 make build
 ```
 

makefile

@@ -10,6 +10,11 @@ setup:
 serve:
 	npm start
 
+# Check typescript types.
+typescript-check:
+	npm install
+	npm run ts:check
+
 # Build the site, including the downloads directory. This requires that we also
 # run the 'build-samples.sh' script to zip and tar the effective shell samples.
 # The build recipe also tests that the samples files are created in the downloads

package.json

@@ -11,18 +11,24 @@
     "clear": "docusaurus clear",
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
-    "write-heading-ids": "docusaurus write-heading-ids"
+    "write-heading-ids": "docusaurus write-heading-ids",
+    "ts:check": "tsc"
   },
   "dependencies": {
     "@cmfcmf/docusaurus-search-local": "^0.10.0",
-    "@docusaurus/core": "2.0.0-beta.15",
-    "@docusaurus/preset-classic": "2.0.0-beta.15",
+    "@docusaurus/core": "2.0.0-beta.18",
+    "@docusaurus/module-type-aliases": "^2.0.0-beta.18",
+    "@docusaurus/preset-classic": "2.0.0-beta.18",
     "@mdx-js/react": "^1.6.21",
+    "@tsconfig/docusaurus": "^1.0.5",
+    "@types/react": "^17.0.43",
+    "asciinema-player": "^3.0.0-rc.1",
     "clsx": "^1.1.1",
     "prism-react-renderer": "^1.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-mailchimp-email-signup-form": "^2.0.2"
+    "react-mailchimp-email-signup-form": "^2.0.2",
+    "typescript": "^4.6.3"
   },
   "browserslist": {
     "production": [
@@ -35,11 +41,5 @@
       "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

@@ -4,7 +4,8 @@
 // Props to https://github.com/dunnkers
 
 import React, { useEffect, useRef } from 'react';
-import * as AsciinemaPlayerLibrary from 'asciinema-player';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 
 type AsciinemaPlayerProps = {
     src: string;
@@ -30,14 +31,26 @@ const AsciinemaPlayer: React.FC<AsciinemaPlayerProps> = ({
     style,
     ...asciinemaOptions
 }) => {
-    const ref = useRef<HTMLDivElement>(null);
+  return (
+    <BrowserOnly>
+      {
+        () => {
+          if (!ExecutionEnvironment.canUseDOM) {
+              return <div>ASCII Cinema Player Unavailable</div>;
+          }
+          const AsciinemaPlayerLibrary = require('asciinema-player');
+          const ref = useRef<HTMLDivElement>(null);
 
-    useEffect(() => {
-        const currentRef = ref.current;
-        AsciinemaPlayerLibrary.create(src, currentRef, asciinemaOptions);
-    }, [src]);
+          useEffect(() => {
+            const currentRef = ref.current;
+            AsciinemaPlayerLibrary.create(src, currentRef, asciinemaOptions);
+          }, [src]);
 
-    return <div ref={ref} style={style} />;
+          return <div ref={ref} style={style} />;
+        }
+      }
+    </BrowserOnly>
+  )
 };
 
 export default AsciinemaPlayer;