Update static build to include README documentation

Author: adamjarling

.gitignore

@@ -3,6 +3,7 @@ dist
 node_modules
 public/script.js
 public/script.js.map
+public/index.html
 static
 
 # OS

README.md

@@ -1,4 +1,5 @@
-![image](https://user-images.githubusercontent.com/7376450/154114970-a68a6b14-91b8-48ea-a76a-5d2cd2f342c7.png)
+<!-- ![image](https://user-images.githubusercontent.com/7376450/154114970-a68a6b14-91b8-48ea-a76a-5d2cd2f342c7.png) -->
+<img src="https://user-images.githubusercontent.com/7376450/154114970-a68a6b14-91b8-48ea-a76a-5d2cd2f342c7.png" class="clover-screenshot" alt="Clover screenshot" />
 
 # Clover IIIF
 
@@ -30,7 +31,7 @@ Clover IIIF is a UI component that renders a multicanvas IIIF viewer intended fo
 
 ---
 
-## Installation
+<h2 id="installation">Installation</h2>
 
 Install the component from your command line using `npm install`,
 
@@ -46,7 +47,7 @@ yarn add @samvera/clover-iiif
 
 ---
 
-## Basic Usage
+<h2 id="basic-usage">Basic Usage</h2>
 
 Add the CloverIIIF component to your `jsx` or `tsx` code.
 
@@ -67,7 +68,7 @@ return <CloverIIIF manifestId={manifestId} />;
 
 ---
 
-## Active Canvas
+<h2 id="active-canvas">Active Canvas</h2>
 
 Example on using `canvasIdCallback` to return to your consuming application the active canvas ID. This will return as a string.
 
@@ -91,7 +92,7 @@ return (
 
 ---
 
-## Configuring Captions
+<h2 id="configuring-captions">Configuring Captions</h2>
 
 WebVTT content resources are the source for both content mapped closed captioning `<track/>` elements in the HTML 5 video player and to the navigator panel adjacent to it. You may ignore these resources as tracks if they are not intended for closed captioning or subtitling by string values matching the label of the content resource. This is a manual option within the viewer as there is no defined way for a manifest to prescribe motivation for these resources beyond `supplementing`.
 
@@ -134,7 +135,7 @@ export default function App() {
 
 ---
 
-## Custom Theme
+<h2 id="custom-theme">Custom Theme</h2>
 
 You may choose to override the base theme by setting optional colors and fonts. Naming conventions for colors are limited to those shown in the config example below.
 
@@ -181,7 +182,7 @@ return <CloverIIIF manifestId={manifestId} customTheme={customTheme} />;
 
 ---
 
-## Reference
+<h2 id="reference">Reference</h2>
 
 | Prop                          | Type       | Required | Default |
 | ----------------------------- | ---------- | -------- | ------- |
@@ -218,7 +219,7 @@ const options = {
 
 ---
 
-## Manifest Requirements
+<h2 id="manifest-requirements">Manifest Requirements</h2>
 
 The manifest provided to `manifestId`:
 
@@ -229,7 +230,7 @@ The manifest provided to `manifestId`:
 
 ---
 
-## Development
+<h2 id="development">Development</h2>
 
 Clover IIIF is built with:
 
@@ -271,6 +272,6 @@ npm run build:static
 tsc
 ```
 
-## License
+<h2 id="license">License</h2>
 
 This project is available under the [MIT License](https://github.com/samvera-labs/clover-iiif/blob/main/LICENSE).

build-static.js

@@ -1,18 +1,25 @@
 const { build } = require("esbuild");
 const envFilePlugin = require("esbuild-envfile-plugin");
 const fs = require("fs-extra");
+const { buildHTML } = require("./utils/html.js");
 
 const { OUT_DIR } = process.env;
 
 const filterFunc = (src, dest) => {
-  console.log("copying: ", src);
-  return !src.includes("script.js");
+  const dontCopyFiles = ["script.js", "index.html"];
+  const shouldCopy = !dontCopyFiles.some((file) => src.includes(file));
+
+  if (shouldCopy) {
+    console.log("copying: ", src);
+  }
+
+  return shouldCopy;
 };
 
 async function emptyDir() {
   try {
     await fs.emptyDir(OUT_DIR);
-    console.log("/static directory emptied");
+    console.log("/static directory emptied\n");
   } catch (err) {
     console.error(err);
   }
@@ -21,16 +28,32 @@ async function emptyDir() {
 async function copyFiles() {
   try {
     await fs.copy("public", OUT_DIR, { filter: filterFunc });
-    console.log("Success copying files");
+
+    // Copy highlight.js package styles for markdown code highlighting
+    await fs.copy(
+      "./node_modules/highlight.js/styles/default.css",
+      `./${OUT_DIR}/default.css`,
+      { overwrite: true },
+    );
+    console.log("\nSuccess copying files");
   } catch (err) {
-    console.error("Error copying files: ", err);
+    console.error("\nError copying files: ", err);
   }
 }
 
 (async () => {
   await emptyDir();
   await copyFiles();
 
+  /**
+   * Build the /static HTML file
+   */
+  fs.writeFile("./static/index.html", await buildHTML(true), (error) => {
+    if (error) {
+      console.error("Error writing index.html file: ", error);
+    }
+  });
+
   await build({
     bundle: true,
     entryPoints: ["src/dev.tsx"],

package-lock.json

@@ -42,8 +42,10 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.26.0",
     "fs-extra": "^10.0.1",
+    "highlight.js": "^11.5.0",
     "jest": "^27.2.1",
     "live-server": "^1.2.1",
+    "markdown-it": "^12.3.2",
     "prettier": "^2.4.1",
     "rimraf": "^3.0.2",
     "ts-jest": "^27.0.5",