feat: The first available version.

asciiplayer/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "wp-asciiplayer-adapter",
+  "version": "0.1.0",
+  "description": "asciinema-player for wordpress.",
+  "main": "dist/bundle.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "bundle": "npx webpack"
+  },
+  "keywords": [
+    "wordpress",
+    "asciicast",
+    "asciicast-player"
+  ],
+  "author": "LamGC",
+  "license": "GPL-3.0-only",
+  "dependencies": {
+    "asciinema-player": "^3.4.0"
+  },
+  "devDependencies": {
+    "css-loader": "^6.8.1",
+    "mini-css-extract-plugin": "^2.7.6",
+    "webpack": "^5.85.0",
+    "webpack-cli": "^5.1.3"
+  }
+}

asciiplayer/src/index.js

@@ -0,0 +1,52 @@
+import * as AsciinemaPlayer from "asciinema-player";
+import "asciinema-player/dist/bundle/asciinema-player.css";
+import "../styles/default-player.css";
+
+const defaultOpts = {
+    preload: true,
+    fit: "width"
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    const containers = document.getElementsByClassName("asciiplayer-container");
+    for (const container of containers) {
+        const castSource = container.dataset["apSrc"];
+        const containerStyle = container.dataset["apStyle"];
+        if (!castSource) {
+            console.warn(`asciiplayer: container ${container.id} has no data-ap-src attribute, skip.`);
+            continue;
+        }
+        let encodedOptions = container.dataset["apOpts"];
+        let options = defaultOpts;
+        if (encodedOptions) {
+            try {
+                options = mergeOptions(defaultOpts, JSON.parse(decodeURIComponent(encodedOptions)));
+            } catch (err) {
+                console.error("asciiplayer: failed to parse data-ap-options, skip.", err);
+                continue;
+            }
+        }
+        if (containerStyle) {
+            container.setAttribute("style", containerStyle);
+            delete container.dataset["apStyle"];
+        }
+        // noinspection JSCheckFunctionSignatures - create 中会判断是否为三个函数.
+        AsciinemaPlayer.create(castSource, container, options);
+    }
+});
+
+/**
+ *
+ * @param defaults {Object}
+ * @param opts {Object}
+ */
+function mergeOptions(defaults, opts) {
+    let result = {};
+    for (const key of Object.keys(defaults)) {
+        result[key] = defaults[key];
+    }
+    for (const key of Object.keys(opts)) {
+        result[key] = opts[key];
+    }
+    return result;
+}

asciiplayer/styles/default-player.css

@@ -0,0 +1,3 @@
+.asciiplayer-container {
+    margin: 0 auto;
+}

asciiplayer/webpack.config.js

@@ -0,0 +1,24 @@
+import path from 'path';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+
+export default {
+  entry: './src/index.js',
+  mode: "production",
+  output: {
+    path: path.resolve('./dist'),
+    filename: 'bundle.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+      },
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: 'styles.css'
+    })
+  ]
+};