marp-dev-preview 0.0.3 → 0.0.5

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

@@ -12,54 +12,54 @@ import markdownItMark from 'markdown-it-mark';
 import markdownItContainer from 'markdown-it-container';
 
 const argv = yargs(hideBin(process.argv))
-	.usage('Usage: $0 <markdown-file> [options]')
-	.positional('markdown-file', {
-		describe: 'Path to the markdown file to preview',
-		type: 'string'
-	})
-	.option('theme-dir', {
-		alias: 't',
-		describe: 'Directory for custom themes',
-		type: 'string'
-	})
-	.option('port', {
-		alias: 'p',
-		describe: 'Port to listen on',
-		type: 'number',
-		default: 8080
-	})
-	.config('config', 'Path to a JSON config file')
-	.default('config', '.mp-config.json')
-	.demandCommand(1, 'You must provide a markdown file.')
-	.argv;
+  .usage('Usage: $0 <markdown-file> [options]')
+  .positional('markdown-file', {
+    describe: 'Path to the markdown file to preview',
+    type: 'string'
+  })
+  .option('theme-dir', {
+    alias: 't',
+    describe: 'Directory for custom themes',
+    type: 'string'
+  })
+  .option('port', {
+    alias: 'p',
+    describe: 'Port to listen on',
+    type: 'number',
+    default: 8080
+  })
+  .config('config', 'Path to a JSON config file')
+  .default('config', '.mp-config.json')
+  .demandCommand(1, 'You must provide a markdown file.')
+  .argv;
 
 const markdownFile = argv._[0]
 const themeDir = argv.themeDir;
 const port = argv.port;
 
 if (!markdownFile) {
-	console.error('Error: You must provide a path to a markdown file.');
-	process.exit(1);
+  console.error('Error: You must provide a path to a markdown file.');
+  process.exit(1);
 }
 
 const markdownDir = path.dirname(markdownFile);
 
 const mimeTypes = {
-	'.html': 'text/html',
-	'.js': 'text/javascript',
-	'.css': 'text/css',
-	'.json': 'application/json',
-	'.png': 'image/png',
-	'.jpg': 'image/jpeg',
-	'.gif': 'image/gif',
-	'.svg': 'image/svg+xml',
-	'.wav': 'audio/wav',
-	'.mp4': 'video/mp4',
-	'.woff': 'application/font-woff',
-	'.ttf': 'application/font-ttf',
-	'.eot': 'application/vnd.ms-fontobject',
-	'.otf': 'application/font-otf',
-	'.wasm': 'application/wasm'
+  '.html': 'text/html',
+  '.js': 'text/javascript',
+  '.css': 'text/css',
+  '.json': 'application/json',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+  '.wav': 'audio/wav',
+  '.mp4': 'video/mp4',
+  '.woff': 'application/font-woff',
+  '.ttf': 'application/font-ttf',
+  '.eot': 'application/vnd.ms-fontobject',
+  '.otf': 'application/font-otf',
+  '.wasm': 'application/wasm'
 };
 
 const wss = new WebSocketServer({ port: port + 1 });
@@ -67,28 +67,28 @@ const wss = new WebSocketServer({ port: port + 1 });
 let marp;
 
 async function initializeMarp() {
-	const options = { html: true, linkify: true, };
-	marp = new Marp(options)
-		.use(markdownItFootnote)
-		.use(markdownItMark)
-		.use(markdownItContainer, 'note');
+  const options = { html: true, linkify: true, };
+  marp = new Marp(options)
+    .use(markdownItFootnote)
+    .use(markdownItMark)
+    .use(markdownItContainer, 'note');
 
-	if (themeDir) {
-		const themeFiles = await fs.readdir(themeDir);
-		for (const file of themeFiles) {
-			if (path.extname(file) === '.css') {
-				const css = await fs.readFile(path.join(themeDir, file), 'utf8');
-				marp.themeSet.add(css);
-			}
-		}
-	}
+  if (themeDir) {
+    const themeFiles = await fs.readdir(themeDir);
+    for (const file of themeFiles) {
+      if (path.extname(file) === '.css') {
+	const css = await fs.readFile(path.join(themeDir, file), 'utf8');
+	marp.themeSet.add(css);
+      }
+    }
+  }
 }
 
 
 async function renderMarp() {
-	const md = await fs.readFile(markdownFile, 'utf8');
-	const { html, css } = marp.render(md);
-	return `
+  const md = await fs.readFile(markdownFile, 'utf8');
+  const { html, css } = marp.render(md);
+  return `
     <!DOCTYPE html>
     <html>
     <head>
@@ -137,21 +137,58 @@ 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 && !found; 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);
+	      return false; 
+	    }
+
+	    return true;
+	  }
+
+          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 +204,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(() => {
@@ -245,51 +281,69 @@ async function renderMarp() {
 }
 
 const server = http.createServer(async (req, res) => {
+  try {
+    if (req.url === '/') {
+      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 {
-		if (req.url === '/') {
-			const html = await renderMarp();
-			res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
-			res.end(html);
-		} else {
-			const assetPath = path.join(markdownDir, req.url);
-			const ext = path.extname(assetPath);
-			const contentType = mimeTypes[ext] || 'application/octet-stream';
+	  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);
+      const contentType = mimeTypes[ext] || 'application/octet-stream';
 
-			try {
-				const content = await fs.readFile(assetPath);
-				res.writeHead(200, { 'Content-Type': contentType });
-				res.end(content);
-			} catch (error) {
-				if (error.code === 'ENOENT') {
-					res.writeHead(404);
-					res.end('Not Found');
-				} else {
-					throw error;
-				}
-			}
-		}
-	} catch (error) {
-		console.error(error);
-		res.writeHead(500);
-		res.end('Internal Server Error');
+      try {
+	const content = await fs.readFile(assetPath);
+	res.writeHead(200, { 'Content-Type': contentType });
+	res.end(content);
+      } catch (error) {
+	if (error.code === 'ENOENT') {
+	  res.writeHead(404);
+	  res.end('Not Found');
+	} else {
+	  throw error;
 	}
+      }
+    }
+  } catch (error) {
+    console.error(error);
+    res.writeHead(500);
+    res.end('Internal Server Error');
+  }
 });
 
 chokidar.watch(markdownFile).on('change', () => {
-	console.log(`File ${markdownFile} changed, reloading...`);
-	for (const ws of wss.clients) {
-		ws.send('reload');
-	}
+  console.log(`File ${markdownFile} changed, reloading...`);
+  for (const ws of wss.clients) {
+    ws.send('reload');
+  }
 });
 
 initializeMarp().then(() => {
-	server.listen(port, () => {
-		console.log(`Server listening on http://localhost:${port} for ${markdownFile}`);
-		if (themeDir) {
-			console.log(`Using custom themes from ${themeDir}`);
-		}
-	});
+  server.listen(port, () => {
+    console.log(`Server listening on http://localhost:${port} for ${markdownFile}`);
+    if (themeDir) {
+      console.log(`Using custom themes from ${themeDir}`);
+    }
+  });
 }).catch(error => {
-	console.error("Failed to initialize Marp:", error);
-	process.exit(1);
+    console.error("Failed to initialize Marp:", error);
+    process.exit(1);
 });

package/package.json

@@ -1,24 +1,27 @@
 {
   "name": "marp-dev-preview",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "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",