@3sln/deck 0.0.8 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3sln/deck",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "A Vite plugin for building scalable, zero-config, Markdown-based component playgrounds and documentation sites.",
   "type": "module",
   "author": "Ray Stubbs",

package/src/deck-demo.js

@@ -8,6 +8,33 @@ import {stylesheet as highlightStylesheet, highlight} from './highlight.js';
 
 const {reconcile, h, div, button, pre, code, span, label, input, p} = dodo;
 
+function getLanguageFromPath(path) {
+  if (!path) return 'plaintext';
+  const extension = path.split('.').pop().toLowerCase();
+  switch (extension) {
+    case 'js':
+    case 'mjs':
+      return 'javascript';
+    case 'cljs':
+    case 'clj':
+    case 'cljd':
+      return 'clojure';
+    case 'css':
+      return 'css';
+    case 'html':
+    case 'xml':
+      return 'xml';
+    case 'md':
+      return 'markdown';
+    case 'json':
+      return 'json';
+    case 'sh':
+      return 'bash';
+    default:
+      return 'plaintext';
+  }
+}
+
 const {ObservableSubject, watch, zip, map, dedup} = reactiveFactory({dodo});
 const {withContainerSize} = resizeFactory({dodo});
 
@@ -132,6 +159,8 @@ function propertyControl(engine, name) {
 function createEngine(src, canonicalSrc) {
   const abortController = new AbortController();
   const sourceCode$ = new ObservableSubject('Loading...');
+  const textSrc = canonicalSrc || src;
+  const lang = getLanguageFromPath(textSrc);
 
   const demoState = new DemoState({
     activePanelIds: {},
@@ -160,7 +189,7 @@ function createEngine(src, canonicalSrc) {
         reconcile(container, [
           watch(sourceCode$, text =>
             pre(
-              code({className: 'language-javascript'}, text).on({
+              code({className: `language-${lang}`}, text).on({
                 $update: el => {
                   delete el.dataset.highlighted;
                   highlight(el);

package/src/highlight.js

@@ -3,6 +3,7 @@ import javascript from 'highlight.js/lib/languages/javascript';
 import xml from 'highlight.js/lib/languages/xml';
 import clojure from 'highlight.js/lib/languages/clojure';
 import css from 'highlight.js/lib/languages/css';
+import json from 'highlight.js/lib/languages/json';
 import githubStyle from 'highlight.js/styles/github.css?inline';
 import githubDarkStyle from 'highlight.js/styles/github-dark.css?inline';
 import {css as createSheet} from '@3sln/bones/style';
@@ -11,6 +12,7 @@ hljs.registerLanguage('javascript', javascript);
 hljs.registerLanguage('xml', xml); // For HTML
 hljs.registerLanguage('css', css);
 hljs.registerLanguage('clojure', clojure);
+hljs.registerLanguage('json', json);
 
 export const stylesheet = createSheet`
   /* Light Theme */

package/src/main.js

@@ -321,7 +321,6 @@ export async function renderDeck({target, initialCardsData, pinnedCardPaths}) {
 
   const syncNav = () => {
     const {q, c} = history.getQueryParams();
-    console.log('q', q);
     engine.dispatch(new SelectCard(c));
     engine.dispatch(new SetSearchQuery(q));
   };