marp-dev-preview 0.0.2 → 0.0.4

package/README.md

@@ -10,10 +10,18 @@ The tool is mainly intended for slide deck authors who want to preview their sli
 *   Automatic browser reload on file changes.
 *   Custom theme support.
 *   Keyboard navigation for slides.
-*   Also installs and uses the following markdown-it plugins:
+*   Also installs and uses the following markdown-it plugins (it's easy to add more if needed):
     *   `markdown-it-container`
     *   `markdown-it-mark`
     *   `markdown-it-footnote`
+ 
+## Usage via npx
+
+The simplest way to start the previewer is via npx:
+
+```bash
+npx marp-dev-preview --theme-dir <dir containing your themes> <your presentation>.md
+```
 
 ## Installation
 
@@ -31,16 +39,16 @@ npm install marp-dev-preview
 
 ## Usage
 
-To start the preview server, run the `mp` command followed by your markdown file path:
+To start the preview server, run the `mdp` command followed by your markdown file path:
 
 ```bash
-mp <path-to-your-markdown-file.md> [options]
+mdp <path-to-your-markdown-file> [options]
 ```
 
 **Example:**
 
 ```bash
-mp my-slides/presentation.md --port 3000 --theme-dir my-themes
+mdp my-slides/presentation.md --port 3000 --theme-dir my-themes
 ```
 
 ### Options
@@ -57,13 +65,21 @@ 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.
 
-## Development
+## Integration with other tools
 
-If you are contributing to the development of this tool, you can run it locally using:
+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
-npm run preview -- <path-to-your-markdown-file.md>
+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
 

package/{marp-preview.mjs → marp-dev-preview.mjs}

@@ -7,6 +7,9 @@ import chokidar from 'chokidar';
 import { WebSocketServer } from 'ws';
 import yargs from 'yargs';
 import { hideBin } from 'yargs/helpers';
+import markdownItFootnote from 'markdown-it-footnote';
+import markdownItMark from 'markdown-it-mark';
+import markdownItContainer from 'markdown-it-container';
 
 const argv = yargs(hideBin(process.argv))
 	.usage('Usage: $0 <markdown-file> [options]')
@@ -65,7 +68,11 @@ let marp;
 
 async function initializeMarp() {
 	const options = { html: true, linkify: true, };
-	marp = new Marp(options);
+	marp = new Marp(options)
+		.use(markdownItFootnote)
+		.use(markdownItMark)
+		.use(markdownItContainer, 'note');
+
 	if (themeDir) {
 		const themeFiles = await fs.readdir(themeDir);
 		for (const file of themeFiles) {
@@ -130,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';
@@ -160,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(() => {
@@ -243,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,28 @@
 {
   "name": "marp-dev-preview",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "A CLI tool to preview Marp markdown files.",
-  "main": "marp-preview.mjs",
+  "main": "marp-dev-preview.mjs",
   "type": "module",
   "bin": {
-	"mp":"./marp-preview.mjs"
+    "mdp": "marp-dev-preview.mjs"
   },
   "scripts": {
-	"start": "node marp-preview.mjs",
-	"preview": "node marp-preview.mjs"
+    "start": "node marp-dev-preview.mjs"
   },
   "keywords": [
-	"marp",
-	"markdown",
-	"preview",
-	"cli"
-      ],
+    "marp",
+    "markdown",
+    "preview",
+    "cli"
+  ],
   "author": "Roberto Esposito",
-  "licence": "MIT",
+  "license": "MIT",
+  "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",
     "chokidar": "^4.0.3",