Add stimulus controller for syntax highlight preview

Controller depends on name value of syntax highlight and for link tags
to have a data attribute specifying its name. On connect, controller
will look for all link tags with a syntax highlight data attribute and
will disabled non-current links which will ensure the browser disables
the corresponding CSS.

Author: rossta

app/javascript/controllers/index.js

@@ -16,6 +16,7 @@ import AnalyticsCustomEvent from './analytics/custom-event';
 import TableOfContents from './table-of-contents';
 
 import FrameForm from './forms/frame';
+import SyntaxHighlightPreview from './syntax-highlight/preview';
 
 application.register('analytics', AnalyticsCustomEvent);
 application.register('code-example', CodeExample);
@@ -28,3 +29,4 @@ application.register('pwa-web-push-demo', PwaWebPushDemo);
 application.register('table-of-contents', TableOfContents);
 
 application.register('frame-form', FrameForm);
+application.register('syntax-highlight-preview', SyntaxHighlightPreview);

app/javascript/controllers/syntax-highlight/preview.js

@@ -0,0 +1,23 @@
+import { Controller } from '@hotwired/stimulus';
+import debug from '../../utils/debug';
+
+const console = debug('app:javascript:controllers:syntax-highlight:preview');
+
+export default class extends Controller {
+  static values = {
+    name: String,
+  };
+
+  connect() {
+    console.log('connect', this.nameValue);
+    const name = this.nameValue;
+    document
+      .querySelectorAll('link[rel="stylesheet"][data-syntax-highlight]')
+      .forEach((link) => {
+        console.log('link', link, {
+          disabling: name !== link.dataset.syntaxHighlight,
+        });
+        link.disabled = name !== link.dataset.syntaxHighlight;
+      });
+  }
+}