(docs) add preview images in source + css var commands

docs/package.json

@@ -20,6 +20,7 @@
     "@docusaurus/preset-classic": "3.5.2",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
+    "path-browserify": "^1.0.1",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"

docs/src/components/Terminal/index.tsx

@@ -16,9 +16,13 @@ const replReady = () => {
 
 import { initTerminal, destroyTerminal } from './terminal';
 
+import github from './github';
+import echo from './echo';
+import source from './source';
+
 const terminal_scripts = [
   'https://cdn.jsdelivr.net/npm/jquery',
-  'https://cdn.jsdelivr.net/combine/gh/jcubic/jquery.terminal@devel/js/jquery.terminal.min.js,npm/js-polyfills/keyboard.js,npm/jquery.terminal/js/less.js'
+  'https://cdn.jsdelivr.net/combine/gh/jcubic/jquery.terminal@devel/js/jquery.terminal.min.js,npm/js-polyfills/keyboard.js,gh/jcubic/jquery.terminal@99526e255/js/less.js,npm/jquery.terminal/js/xml_formatting.js'
 ];
 
 function command(term: RefObject<JQueryTerminal>) {
@@ -44,7 +48,17 @@ export default function Interpreter(): JSX.Element {
   useLayoutEffect(() => {
     (function loop() {
       if (replReady() && styleReady()) {
-        term.current = initTerminal();
+        term.current = initTerminal({
+          github,
+          source,
+          echo,
+          size(num: string) {
+            this.css('--size', num);
+          },
+          rows(num: string) {
+            this.css('--rows', num);
+          }
+        });
         set_show_commands(true);
       } else {
         setTimeout(loop, 100);

docs/src/components/Terminal/source.ts

@@ -1,4 +1,5 @@
 import type { JQueryTerminal, JQueryStatic } from 'jquery.terminal';
+import path from 'path-browserify';
 
 import data from '@site/dir.json';
 
@@ -11,20 +12,31 @@ function alow_data() {
 
 const root = 'https://cdn.jsdelivr.net/gh/jcubic/jquery.terminal@docusaurus';
 
+function is_image(path_name: string) {
+  const ext = path.extname(path_name);
+  return ['.jpeg', '.jpg', '.svg', '.png'].includes(ext);
+}
+
 export default function source(this: JQueryTerminal) {
   alow_data();
   let pending = false;
   const display = async (node: JQuery<HTMLSpanElement>) => {
     if (!pending) {
-      const path = node.data('path');
+      const full_path = node.data('path');
       node.addClass('pending');
       pending = true;
-      const url = [root, path].join('');
-      const res = await fetch(url);
-      const text = await res.text();
+      const url = [root, full_path].join('');
+      let text: string;
+      if (is_image(full_path)) {
+        const name = path.basename(full_path);
+        text = `<img class="less" src="${url}" alt="file ${name}"/>`;
+      } else {
+        const res = await fetch(url);
+        text = await res.text();
+      }
       pending = false;
       node.removeClass('pending');
-      this.less(text);
+      this.less(text, { formatters: true });
     }
   };
   this.off('.source');

docs/src/components/Terminal/terminal.ts

@@ -1,12 +1,8 @@
 import type { JQueryTerminal } from 'jquery.terminal';
 
-import github from './github';
-import echo from './echo';
-import source from './source';
-
 import styles from './styles.module.css';
 
-export function initTerminal() {
+export function initTerminal(interpreter: JQueryTerminal.Interpreter) {
   const $ = (globalThis as any).$;
   const $term = $(`.${styles.term}`);
   $term.empty();
@@ -15,11 +11,7 @@ export function initTerminal() {
     return scroll.apply(term, args);
   };
 
-  const term = $term.terminal({
-    github,
-    source,
-    echo
-  }, {
+  const term = $term.terminal(interpreter, {
     processArguments: false,
     checkArity: false,
     completion: true,