marp-dev-preview 0.0.3 → 0.0.4

package/README.md

@@ -65,6 +65,22 @@ While viewing the presentation in your browser, in addition to the usual browser
 *   <kbd>:&lt;number&gt;</kbd>: Go to the specified slide number.
 *   <kbd>?</kbd>: Toggle the help box displaying key bindings.
 
+## Integration with other tools
+
+The tool can respond to http requests to change slides and to scroll to a slide containing a given text. Any http client can be used to send such requests, e.g.:
+
+```bash
+curl -X POST -H "Content-Type: application/json" -d '{"command": "find", "string": "my awesome text"}' http://localhost:8080/api/command
+```
+would scroll to the first slide containing "my awesome text".
+
+```bash
+curl -X POST -H "Content-Type: application/json" -d '{"command": "goto", "slide": 3}' http://localhost:8080/api/command
+````
+
+would go to slide 3.
+
+
 ## License
 
 This project is licensed under the MIT License - see the `LICENSE` file for details.

package/marp-dev-preview.mjs

@@ -137,21 +137,55 @@ async function renderMarp() {
       </style>
       <script>
         const ws = new WebSocket('ws://localhost:${port + 1}');
-        ws.onmessage = (event) => {
-          if (event.data === 'reload') {
-            window.location.reload();
-          }
-        };
-
-        let lastKey = '';
-        let command = '';
-        let commandMode = false;
 
         document.addEventListener('DOMContentLoaded', () => {
           const slides = Array.from(document.querySelectorAll('section[id]'));
           const commandPrompt = document.getElementById('command-prompt');
 	  const helpBox = document.getElementById('help-box');
 
+          let lastKey = '';
+          let command = '';
+          let commandMode = false;
+
+          function goToSlide(slideNumber) {
+            if (!isNaN(slideNumber) && slideNumber > 0 && slideNumber <= slides.length) {
+              slides[slideNumber - 1].scrollIntoView({ behavior: 'smooth' });
+              return true;
+            }
+            return false;
+          }
+
+	  function findSlideByString(string) {
+	    const lowerString = string.toLowerCase();
+	    let found = false;
+	    for (let i = 0; i < slides.length; i++) {
+	      if (slides[i].textContent.toLowerCase().includes(lowerString)) {
+		slides[i].scrollIntoView({ behavior: 'smooth' });
+		found = true;
+	      }
+	    }
+	    if (!found) {
+	      console.error('No slide contains the string: ' + string);
+	    }
+	  }
+
+          ws.onmessage = (event) => {
+            if (event.data === 'reload') {
+              window.location.reload();
+              return;
+            }
+            try {
+              const data = JSON.parse(event.data);
+              if (data.command === 'goto' && data.slide) {
+                goToSlide(parseInt(data.slide, 10));
+              } else if (data.command === 'find' && data.string) {
+		findSlideByString(data.string);
+	      }
+            } catch (e) {
+              console.error('Failed to parse WebSocket message:', e);
+            }
+          };
+
           function updatePrompt(text, isError = false) {
             if (commandMode) {
               commandPrompt.style.display = 'block';
@@ -167,11 +201,10 @@ async function renderMarp() {
             if (commandMode) {
               if (e.key === 'Enter') {
                 const slideNumber = parseInt(command, 10);
-                if (!isNaN(slideNumber) && slideNumber > 0 && slideNumber <= slides.length) {
-                  slides[slideNumber - 1].scrollIntoView({ behavior: 'smooth' });
+                if (goToSlide(slideNumber)) {
                   commandMode = false;
                   command = '';
-                  updatePrompt(':' + command); // Reset to normal prompt
+                  updatePrompt(':' + command);
                 } else {
                   updatePrompt(\`Error: Slide not found.\`, true); // Pass message and error flag
                   setTimeout(() => {
@@ -250,6 +283,24 @@ const server = http.createServer(async (req, res) => {
 			const html = await renderMarp();
 			res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
 			res.end(html);
+		} else if (req.url === '/api/command' && req.method === 'POST') {
+			let body = '';
+			req.on('data', chunk => {
+				body += chunk.toString();
+			});
+			req.on('end', () => {
+				try {
+					const command = JSON.parse(body);
+					for (const ws of wss.clients) {
+						ws.send(JSON.stringify(command));
+					}
+					res.writeHead(200, { 'Content-Type': 'application/json' });
+					res.end(JSON.stringify({ status: 'ok', command }));
+				} catch (e) {
+					res.writeHead(400, { 'Content-Type': 'application/json' });
+					res.end(JSON.stringify({ status: 'error', message: 'Invalid JSON' }));
+				}
+			});
 		} else {
 			const assetPath = path.join(markdownDir, req.url);
 			const ext = path.extname(assetPath);

package/package.json

@@ -1,24 +1,27 @@
 {
   "name": "marp-dev-preview",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A CLI tool to preview Marp markdown files.",
   "main": "marp-dev-preview.mjs",
   "type": "module",
   "bin": {
-	"mdp":"./marp-dev-preview.mjs"
+    "mdp": "marp-dev-preview.mjs"
   },
   "scripts": {
-	"start": "node marp-dev-preview.mjs"
+    "start": "node marp-dev-preview.mjs"
   },
   "keywords": [
-	"marp",
-	"markdown",
-	"preview",
-	"cli"
-      ],
+    "marp",
+    "markdown",
+    "preview",
+    "cli"
+  ],
   "author": "Roberto Esposito",
   "license": "MIT",
-  "repository": "git@github.com:boborbt/marp-dev-preview.git",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/boborbt/marp-dev-preview.git"
+  },
   "bugs": "https://github.com/boborbt/marp-dev-preview/issues",
   "dependencies": {
     "@marp-team/marp-core": "^4.1.0",