marp-dev-preview 0.1.0 → 0.1.5

package/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}

package/README.md

@@ -1,52 +1,62 @@
 # marp-dev-preview
 
-A CLI tool to preview Marp markdown files with live reloading and navigation features.
+A lightweight CLI tool for previewing **Marp markdown slide decks** with live reloading, navigation, and development-focused features.  
 
-The tool is mainly intended for slide deck authors who want to preview their slides in a web browser during development. In fact, while marp-cli provides a `-s` option to serve the slides, it is mainly intended for presenting the slides, not for development. This tool fills that gap by providing a live preview server presenting the slides similarly to how they are presented in the marp vs-code extension. 
+Unlike the `marp-cli -s` option—which is primarily meant for presenting—this tool is designed specifically for **authoring and iterating** on slides. It provides a live preview server similar to the Marp VS Code extension, but in a terminal-friendly, editor-agnostic way.  
 
-## Features
+Originally built as a dependency for the [marp-dev-preview.nvim](https://github.com/boborbt/marp-dev-preview.nvim) NeoVim plugin, it can also be used **standalone** or as a dependency in other projects.
 
-*   Live preview of Marp markdown files, with position syncing.
-*   API to reload the slides using incremental updates.
-*   Automatic browser reload on file changes.
-*   Custom theme support.
-*   Keyboard navigation for slides.
-*   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:
+## ✨ Features
+
+- **Live preview** of Marp markdown files, with position syncing  
+- **Incremental updates API** for fast reloads  
+- **Automatic browser reload** on file changes  
+- **Custom theme support** (CSS-based themes)  
+- **Keyboard navigation** for slides  
+- Includes several **markdown-it plugins** (easy to extend):
+  - `markdown-it-container`
+  - `markdown-it-mark`
+  - `markdown-it-footnote`
+
+---
+
+## 🚦 Quick Start (via `npx`)
+
+The simplest way to run the previewer:  
 
 ```bash
-npx marp-dev-preview --theme-dir <dir containing your themes> <your presentation>.md
+npx marp-dev-preview --theme-dir <themes-dir> <presentation.md>
 ```
 
-## Installation
+---
 
-To install the package globally (recommended for CLI tools):
+## 📦 Installation
+
+Global install (recommended for CLI use):  
 
 ```bash
 npm install -g marp-dev-preview
 ```
 
-Alternatively, you can install it as a local dependency in your project:
+Or as a local project dependency:  
 
 ```bash
 npm install marp-dev-preview
 ```
 
-## Usage
+---
+
+## ▶️ Usage
 
-To start the preview server, run the `mdp` command followed by your markdown file path:
+Start the preview server with:  
 
 ```bash
-mdp <path-to-your-markdown-file> [options]
+mdp <path-to-markdown-file> [options]
 ```
 
-**Example:**
+**Example:**  
 
 ```bash
 mdp my-slides/presentation.md --port 3000 --theme-dir my-themes
@@ -54,34 +64,59 @@ mdp my-slides/presentation.md --port 3000 --theme-dir my-themes
 
 ### Options
 
-*   `-t, --theme-dir <path>`: Specify a directory for custom Marp themes (e.g., CSS files).
-*   `-p, --port <number>`: Specify the port for the preview server to listen on (default: `8080`).
+- `-t, --theme-dir <path>` — Path to custom Marp themes (CSS files)  
+- `-p, --port <number>` — Port for the preview server (default: `8080`)  
 
-## Keyboard Shortcuts
+---
 
-While viewing the presentation in your browser, in addition to the usual browser controls (page-up, page-down, home, end, etc.), you can use the following key bindings:
+## ⌨️ Keyboard Shortcuts
 
-*   <kbd>gg</kbd>: Go to the first slide.
-*   <kbd>G</kbd>: Go to the last slide.
-*   <kbd>:&lt;number&gt;</kbd>: Go to the specified slide number.
-*   <kbd>?</kbd>: Toggle the help box displaying key bindings.
+In addition to normal browser navigation keys (`Page Up`, `Page Down`, `Home`, `End`), the following bindings are available:
 
-## Integration with other tools
+- **Ctrl+f** — Forward one page  
+- **Ctrl+b** — Backward one page  
+- **Ctrl+d** — Forward half a page  
+- **Ctrl+u** — Backward half a page  
+- **gg** — First slide  
+- **G** — Last slide  
+- **:number** — Jump to slide `{number}`  
+- **?** — Toggle help overlay  
 
-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".
+## 🔗 Integration with Other Tools
 
-```bash
-curl -X POST -H "Content-Type: application/json" -d '{"command": "goto", "slide": 3}' http://localhost:8080/api/command
-````
+The preview server exposes a simple **HTTP API** for controlling slides.  
+
+- Reload the document (the server will parse the received markdown content and incrementally update the presentation). 
+
+    ```bash
+    curl -X POST \
+         -H "Content-Type: text/markdown" \
+         -d "$(cat file-with-updated-content.md)" \ 
+         http://localhost:8080/api/reload
+    ```
+
+- Go to the first slide containing `"my awesome text"`:  
+    ```bash
+    curl -X POST \
+        -H "Content-Type: application/json" \
+        -d '{"command": "find", "string": "my awesome text"}' \
+        http://localhost:8080/api/command
+    ```
+
+- Jump directly to slide 3:  
+
+    ```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
+## 📄 License
 
-This project is licensed under the MIT License - see the `LICENSE` file for details.
+Licensed under the [MIT License](./LICENSE).  

package/args.mjs

@@ -0,0 +1,32 @@
+import yargs from 'yargs';
+import { hideBin } from 'yargs/helpers';
+
+export function parseArgs() {
+  return 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
+    })
+    .option('verbose', {
+      alias: 'v',
+      describe: 'Enable verbose logging',
+      type: 'boolean',
+      default: false
+    })
+    .config('config', 'Path to a JSON config file')
+    .default('config', '.mp-config.json')
+    .demandCommand(1, 'You must provide a markdown file.')
+    .argv;
+}

package/args.test.mjs

@@ -0,0 +1,90 @@
+import { parseArgs } from './args.mjs';
+
+const mockArgv = {};
+const defaultValues = {};
+
+jest.mock('yargs', () => {
+  const yargsMock = jest.fn(() => yargsMock);
+  yargsMock.usage = jest.fn().mockReturnThis();
+  yargsMock.positional = jest.fn().mockReturnThis();
+  yargsMock.option = jest.fn().mockImplementation((name, options) => {
+    if (options.default !== undefined) {
+      defaultValues[name] = options.default;
+    }
+    return yargsMock;
+  });
+  yargsMock.config = jest.fn().mockReturnThis();
+  yargsMock.default = jest.fn().mockImplementation((name, value) => {
+    defaultValues[name] = value;
+    return yargsMock;
+  });
+  yargsMock.demandCommand = jest.fn().mockReturnThis();
+  Object.defineProperty(yargsMock, 'argv', {
+    get: () => ({
+      ...defaultValues,
+      ...mockArgv,
+    }),
+  });
+  return yargsMock;
+});
+
+jest.mock('yargs/helpers', () => ({
+  hideBin: jest.fn(() => ['node', 'marp-dev-preview.mjs']),
+}));
+
+describe('Args', () => {
+  beforeEach(() => {
+    // Reset mockArgv before each test
+    for (const key in mockArgv) {
+      delete mockArgv[key];
+    }
+    // Reset hideBin mock
+    require('yargs/helpers').hideBin.mockReturnValue(['node', 'marp-dev-preview.mjs']);
+  });
+
+  it('should return default port if not specified', () => {
+    mockArgv._ = ['test.md'];
+    const argv = parseArgs();
+    expect(argv.port).toBe(8080);
+  });
+
+  it('should return specified port', () => {
+    mockArgv._ = ['test.md'];
+    mockArgv.port = 3000;
+    const argv = parseArgs();
+    expect(argv.port).toBe(3000);
+  });
+
+  it('should return default verbose as false', () => {
+    mockArgv._ = ['test.md'];
+    const argv = parseArgs();
+    expect(argv.verbose).toBe(false);
+  });
+
+  it('should return verbose as true if specified', () => {
+    mockArgv._ = ['test.md'];
+    mockArgv.verbose = true;
+    const argv = parseArgs();
+    expect(argv.verbose).toBe(true);
+  });
+
+  it('should capture markdown file positional argument', () => {
+    mockArgv._ = ['my-presentation.md'];
+    const argv = parseArgs();
+    expect(argv._[0]).toBe('my-presentation.md');
+  });
+
+  it('should return theme-dir if specified', () => {
+    mockArgv._ = ['test.md'];
+    mockArgv.themeDir = '/path/to/themes';
+    const argv = parseArgs();
+    expect(argv.themeDir).toBe('/path/to/themes');
+  });
+
+  it('should handle config file path', () => {
+    mockArgv._ = ['test.md'];
+    mockArgv.config = './my-config.json';
+    const argv = parseArgs();
+    expect(argv.config).toBe('./my-config.json');
+  });
+});

package/client.js

@@ -133,6 +133,24 @@ document.addEventListener('DOMContentLoaded', () => {
       command = '';
       lastKey = '';
       updatePrompt(':' + command);
+    } else if (e.key === 'j') {
+      window.scrollBy({ top: window.innerHeight * 0.1, behavior: 'smooth' });
+      lastKey = '';
+    } else if (e.key === 'k') {
+      window.scrollBy({ top: -window.innerHeight * 0.1, behavior: 'smooth' });
+      lastKey = '';
+    } else if (e.key === 'u' && e.ctrlKey) {
+      window.scrollBy({ top: -window.innerHeight * 0.5, behavior: 'smooth' });
+      lastKey = '';
+    } else if (e.key === 'd' && e.ctrlKey) {
+      window.scrollBy({ top: window.innerHeight * 0.5, behavior: 'smooth' });
+      lastKey = '';
+    } else if (e.key === 'f' && e.ctrlKey) {
+      window.scrollBy({ top: window.innerHeight * 0.9, behavior: 'smooth' });
+      lastKey = '';
+    } else if (e.key === 'b' && e.ctrlKey) {
+      window.scrollBy({ top: -window.innerHeight * 0.9, behavior: 'smooth' });
+      lastKey = '';
     } else if (e.key === '?') {
       helpBox.style.display = helpBox.style.display === 'none' ? 'block' : 'none';
       lastKey = ''; // Reset lastKey to prevent unintended 'gg'

package/jest.config.mjs

@@ -0,0 +1,11 @@
+export default {
+  transform: {
+    '^.+\.m?js'
+: 'babel-jest',
+  },
+  testEnvironment: 'node',
+  moduleFileExtensions: ['js', 'mjs'],
+  transformIgnorePatterns: [
+    '/node_modules/(?!yargs|yargs-parser)/',
+  ],
+};

package/marp-dev-preview.mjs

@@ -1,46 +1,36 @@
 #!/usr/bin/env node
-import { Marp } from '@marp-team/marp-core';
 import { promises as fs } from 'fs';
-import http from 'http';
 import path from 'path';
 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';
-import morphdom from 'morphdom';
 import { fileURLToPath } from 'url';
 
+/* Sub-modules */
+import { createServer } from './server.mjs';
+import { initializeMarp, renderMarp as renderMarpInternal } from './marp-utils.mjs';
+import { parseArgs } from './args.mjs';
+
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-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;
+const argv = parseArgs();
 
 const markdownFile = argv._[0]
 const themeDir = argv.themeDir;
 const port = argv.port;
+const verbose = argv.verbose;
+
+if (argv.version) {
+  const pkg = JSON.parse(await fs.readFile(path.join(__dirname, 'package.json'), 'utf8'));
+  console.log(`marp-dev-preview version ${pkg.version}`);
+  process.exit(0);
+}
+
+if (verbose) {
+  console.debug = console.log;
+} else {
+  console.debug = () => { };
+}
 
 if (!markdownFile) {
   console.error('Error: You must provide a path to a markdown file.');
@@ -49,50 +39,11 @@ if (!markdownFile) {
 
 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'
-};
-
 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');
-
-  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);
+  const { html, css } = renderMarpInternal(md);
   const customCss = `
 	svg[data-marpit-svg] {
 	  margin-bottom:20px !important;
@@ -153,11 +104,16 @@ async function renderMarp() {
       </div>
       <div id="help-box">
         <h3>Key Bindings</h3>
+        <p>In addition to standard key bindings (e.g., Space, Page Down, Arrow Down, Page Up, Arrow Up), the following key bindings are available:</p>
 	<table>
 	<tr><th>Key</th><th>Action</th></tr> 
         <tr><td><kbd>gg</kbd> or <kbd>Home</kbd></td><td>Go to first slide</td></tr>
         <tr><td><kbd>G</kbd> or <kbd>End</kbd></td><td>Go to last slide</td></tr>
         <tr><td><kbd>:&lt;number&gt</kbd></td><td>Go to the given slide number</td></tr> 
+        <tr><td><kbd>^f</kbd></td><td>Forward one page</td></tr>
+        <tr><td><kbd>^b</kbd></td><td>Back one page</td></tr>
+        <tr><td><kbd>^d</kbd></td><td>Forward half a page</td></tr>
+        <tr><td><kbd>^u</kbd></td><td>Back half a page</td></tr>
         <tr><td><kbd>?</kbd></td><td>Show/hide help</td></tr>
 	</table>
       </div>
@@ -167,78 +123,9 @@ 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 === '/client.js') {
-      const clientJs = await fs.readFile(path.join(__dirname, 'client.js'), 'utf8');
-      res.writeHead(200, { 'Content-Type': 'text/javascript' });
-      res.end(clientJs);
-    } else if (req.url === '/api/reload' && req.method === 'POST') {
-      let body = '';
-      req.on('data', chunk => {
-        body += chunk.toString();
-      });
-      req.on('end', async () => {
-	console.debug("Reload request received");
-        const success = await reload(body);
-        if (success) {
-          res.writeHead(200, { 'Content-Type': 'application/json' });
-          res.end(JSON.stringify({ status: 'ok' }));
-        } else {
-          res.writeHead(500, { 'Content-Type': 'application/json' });
-          res.end(JSON.stringify({ status: 'error', message: 'Failed to render markdown' }));
-        }
-      });
-    } 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);
-      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');
-  }
-});
-
 async function reload(markdown) {
   try {
-    const { html, css } = marp.render(markdown);
+    const { html, css } = renderMarpInternal(markdown);
     const message = JSON.stringify({
       type: 'update',
       html: html,
@@ -255,18 +142,16 @@ async function reload(markdown) {
 }
 
 chokidar.watch(markdownFile).on('change', async () => {
-  console.log(`File ${markdownFile} changed, updating...`);
+  console.debug(`File ${markdownFile} changed, updating...`);
   const md = await fs.readFile(markdownFile, 'utf8');
   await reload(md);
 });
 
-initializeMarp().then(() => {
-  server.listen(port, () => {
-    console.log(`Server listening on http://localhost:${port} for ${markdownFile}`);
-    if (themeDir) {
-      console.log(`Using custom themes from ${themeDir}`);
-    }
-  });
+initializeMarp(themeDir).then(() => {
+  createServer(port, markdownFile, markdownDir, renderMarp, reload, wss, __dirname);
+  if (themeDir) {
+    console.log(`Using custom themes from ${themeDir}`);
+  }
 }).catch(error => {
   console.error("Failed to initialize Marp:", error);
   process.exit(1);

package/marp-dev-preview.test.mjs

@@ -0,0 +1,24 @@
+import { createServer } from './server.mjs';
+import http from 'http';
+
+jest.mock('http', () => ({
+  createServer: jest.fn(() => ({
+    listen: jest.fn(),
+  })),
+}));
+
+describe('Server', () => {
+  it('should create a server', () => {
+    const port = 8080;
+    const markdownFile = 'test.md';
+    const markdownDir = '.';
+    const renderMarp = jest.fn();
+    const reload = jest.fn();
+    const wss = { clients: [] };
+    const __dirname = '.';
+
+    createServer(port, markdownFile, markdownDir, renderMarp, reload, wss, __dirname);
+
+    expect(http.createServer).toHaveBeenCalled();
+  });
+});

package/marp-utils.mjs

@@ -0,0 +1,33 @@
+
+import { Marp } from '@marp-team/marp-core';
+import { promises as fs } from 'fs';
+import path from 'path';
+import markdownItFootnote from 'markdown-it-footnote';
+import markdownItMark from 'markdown-it-mark';
+import markdownItContainer from 'markdown-it-container';
+
+let marp;
+
+export async function initializeMarp(themeDir) {
+  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);
+      }
+    }
+  }
+  return marp;
+}
+
+export function renderMarp(markdown) {
+  const { html, css } = marp.render(markdown);
+  return { html, css };
+}

package/marp-utils.test.mjs

@@ -0,0 +1,29 @@
+import { initializeMarp, renderMarp } from './marp-utils.mjs';
+import { Marp } from '@marp-team/marp-core';
+
+jest.mock('@marp-team/marp-core', () => ({
+  Marp: jest.fn(() => ({
+    use: jest.fn().mockReturnThis(),
+    render: jest.fn(() => ({ html: '', css: '' })),
+    themeSet: {
+      add: jest.fn(),
+    },
+  })),
+}));
+
+describe('Marp Utils', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should initialize Marp', async () => {
+    await initializeMarp();
+    expect(Marp).toHaveBeenCalled();
+  });
+
+  it('should render markdown', async () => {
+    const marp = await initializeMarp();
+    renderMarp('# Hello');
+    expect(marp.render).toHaveBeenCalledWith('# Hello');
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "marp-dev-preview",
-  "version": "0.1.0",
+  "version": "0.1.5",
   "description": "A CLI tool to preview Marp markdown files.",
   "main": "marp-dev-preview.mjs",
   "type": "module",
@@ -8,7 +8,8 @@
     "mdp": "marp-dev-preview.mjs"
   },
   "scripts": {
-    "start": "node marp-dev-preview.mjs"
+    "start": "node marp-dev-preview.mjs",
+    "test": "jest"
   },
   "keywords": [
     "marp",
@@ -32,5 +33,12 @@
     "morphdom": "^2.7.7",
     "ws": "^8.18.3",
     "yargs": "^18.0.0"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.28.3",
+    "babel-jest": "^30.1.2",
+    "jest": "^30.1.3",
+    "jest-esm-transformer": "^1.0.0",
+    "ts-jest": "^29.4.1"
   }
 }

package/server.mjs

@@ -0,0 +1,99 @@
+
+import http from 'http';
+import { promises as fs } from 'fs';
+import path from 'path';
+
+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'
+};
+
+export function createServer(port, markdownFile, markdownDir, renderMarp, reload, wss, __dirname) {
+  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 === '/client.js') {
+        const clientJs = await fs.readFile(path.join(__dirname, 'client.js'), 'utf8');
+        res.writeHead(200, { 'Content-Type': 'text/javascript' });
+        res.end(clientJs);
+      } else if (req.url === '/api/reload' && req.method === 'POST') {
+        let body = '';
+        req.on('data', chunk => {
+          body += chunk.toString();
+        });
+        req.on('end', async () => {
+          console.debug("Reload request received");
+          const success = await reload(body);
+          if (success) {
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ status: 'ok' }));
+          } else {
+            res.writeHead(500, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify({ status: 'error', message: 'Failed to render markdown' }));
+          }
+        });
+      } 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);
+        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');
+    }
+  });
+
+  server.listen(port, () => {
+    console.log(`Server listening on http://localhost:${port} for ${markdownFile}`);
+  });
+
+  return server;
+}