md-slides 1.0.0

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "md-slides",
+  "version": "1.0.0",
+  "description": "Convert Markdown to beautiful presentation slides. Zero config, developer-friendly.",
+  "type": "module",
+  "main": "src/index.js",
+  "bin": {
+    "slides": "src/cli.js"
+  },
+  "scripts": {
+    "test": "node test/test.js"
+  },
+  "keywords": [
+    "markdown",
+    "slides",
+    "presentation",
+    "cli",
+    "reveal",
+    "deck"
+  ],
+  "author": "Deepankar Rawat <dprrwt>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dprrwt/md-slides"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "chokidar": "^3.6.0",
+    "commander": "^12.1.0",
+    "highlight.js": "^11.10.0",
+    "marked": "^14.1.0",
+    "open": "^10.1.0",
+    "ws": "^8.18.0"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/cli.js

@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+
+import { Command } from 'commander';
+import { initProject } from './commands/init.js';
+import { buildSlides } from './commands/build.js';
+import { previewSlides } from './commands/preview.js';
+import { exportSlides } from './commands/export.js';
+import { createRequire } from 'module';
+
+const require = createRequire(import.meta.url);
+const pkg = require('../package.json');
+
+const program = new Command();
+
+program
+  .name('slides')
+  .description('Convert Markdown to beautiful presentation slides')
+  .version(pkg.version);
+
+program
+  .command('init [name]')
+  .description('Create a new presentation from template')
+  .option('-t, --theme <theme>', 'Theme: dark, light, minimal, neon', 'dark')
+  .action((name, options) => {
+    initProject(name || 'presentation', options);
+  });
+
+program
+  .command('build [file]')
+  .description('Build slides to static HTML')
+  .option('-o, --output <dir>', 'Output directory', 'dist')
+  .option('-t, --theme <theme>', 'Theme override')
+  .action((file, options) => {
+    buildSlides(file || 'slides.md', options);
+  });
+
+program
+  .command('preview [file]')
+  .alias('dev')
+  .description('Live preview with hot reload')
+  .option('-p, --port <port>', 'Port number', '3000')
+  .option('-t, --theme <theme>', 'Theme override')
+  .action((file, options) => {
+    previewSlides(file || 'slides.md', options);
+  });
+
+program
+  .command('export [file]')
+  .description('Export to PDF')
+  .option('-o, --output <file>', 'Output file', 'slides.pdf')
+  .action((file, options) => {
+    exportSlides(file || 'slides.md', options);
+  });
+
+program.parse();

package/src/commands/build.js

@@ -0,0 +1,42 @@
+import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'fs';
+import { join, resolve, basename } from 'path';
+import { parseSlides } from '../parser.js';
+import { renderHTML } from '../renderer.js';
+
+export function buildSlides(file, options = {}) {
+  const { output = 'dist', theme } = options;
+  const filePath = resolve(file);
+
+  if (!existsSync(filePath)) {
+    console.log(`\n  ❌ File not found: ${file}\n`);
+    process.exit(1);
+  }
+
+  const content = readFileSync(filePath, 'utf-8');
+  const slidesData = parseSlides(content);
+  
+  const buildOptions = {
+    theme: theme || slidesData.metadata.theme || 'dark',
+    title: slidesData.metadata.title || basename(file, '.md'),
+    author: slidesData.metadata.author || '',
+    liveReload: false,
+  };
+
+  const html = renderHTML(slidesData, buildOptions);
+
+  // Create output directory
+  const outputDir = resolve(output);
+  mkdirSync(outputDir, { recursive: true });
+
+  const outputFile = join(outputDir, 'index.html');
+  writeFileSync(outputFile, html);
+
+  console.log(`
+  ✅ Built ${slidesData.slides.length} slides → ${outputFile}
+
+  Theme: ${buildOptions.theme}
+  Title: ${buildOptions.title}
+
+  Open in browser or deploy to GitHub Pages.
+  `);
+}

package/src/commands/export.js

@@ -0,0 +1,18 @@
+import { readFileSync, existsSync } from 'fs';
+import { resolve, basename } from 'path';
+
+export function exportSlides(file, options = {}) {
+  console.log(`
+  📄 PDF Export
+
+  For now, use the browser's Print to PDF:
+  
+  1. Run: slides preview ${file}
+  2. Open the URL in Chrome
+  3. Press Ctrl+P (or Cmd+P)
+  4. Select "Save as PDF"
+  5. Set Layout to "Landscape"
+  
+  Native PDF export coming in a future version.
+  `);
+}

package/src/commands/init.js

@@ -0,0 +1,100 @@
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
+import { join } from 'path';
+
+function getSampleSlides(theme) {
+  return [
+    '---',
+    'title: My Presentation',
+    'author: Your Name',
+    'theme: ' + theme,
+    '---',
+    '',
+    '# Hello, World 👋',
+    '',
+    'Welcome to **md-slides**',
+    '',
+    '---',
+    '',
+    '## What is md-slides?',
+    '',
+    'A Markdown-to-slides converter that just works.',
+    '',
+    '- Write in **Markdown**',
+    '- Present in the **browser**',
+    '- Deploy anywhere as **static HTML**',
+    '',
+    '<!-- notes: This is the intro slide. Mention how easy it is to get started. -->',
+    '',
+    '---',
+    '',
+    '## Code Highlighting',
+    '',
+    '```javascript',
+    '// Syntax highlighting works out of the box',
+    'function fibonacci(n) {',
+    '  if (n <= 1) return n;',
+    '  return fibonacci(n - 1) + fibonacci(n - 2);',
+    '}',
+    '',
+    'console.log(fibonacci(10)); // 55',
+    '```',
+    '',
+    '---',
+    '',
+    '## Keyboard Shortcuts',
+    '',
+    '| Key | Action |',
+    '|-----|--------|',
+    '| ← → | Navigate slides |',
+    '| S | Toggle speaker notes |',
+    '| F | Fullscreen |',
+    '| Home / End | First / Last slide |',
+    '',
+    '---',
+    '',
+    '> "The best presentations are the ones you barely have to think about making."',
+    '',
+    '---',
+    '',
+    '<!-- layout: center -->',
+    '',
+    '# Thank You! 🎉',
+    '',
+    '**@yourhandle** · yourwebsite.com',
+  ].join('\n');
+}
+
+export function initProject(name, options = {}) {
+  const dir = join(process.cwd(), name);
+  const theme = options.theme || 'dark';
+
+  if (existsSync(dir)) {
+    console.log('\n  Warning: Directory "' + name + '" already exists.\n');
+    process.exit(1);
+  }
+
+  mkdirSync(dir, { recursive: true });
+  
+  // Create slides.md
+  writeFileSync(join(dir, 'slides.md'), getSampleSlides(theme));
+
+  // Create .gitignore
+  writeFileSync(join(dir, '.gitignore'), 'dist/\nnode_modules/\n');
+
+  console.log([
+    '',
+    '  ✨ Created presentation: ' + name + '/',
+    '',
+    '  Files:',
+    '    slides.md    Your presentation',
+    '    .gitignore   Ignores dist/',
+    '',
+    '  Next steps:',
+    '    cd ' + name,
+    '    slides preview    Live preview with hot reload',
+    '    slides build      Build to dist/',
+    '',
+    '  Edit slides.md and separate slides with ---',
+    '',
+  ].join('\n'));
+}

package/src/commands/preview.js

@@ -0,0 +1,85 @@
+import { readFileSync, existsSync, watch } from 'fs';
+import { resolve, basename } from 'path';
+import { createServer } from 'http';
+import { WebSocketServer } from 'ws';
+import { parseSlides } from '../parser.js';
+import { renderHTML } from '../renderer.js';
+
+export function previewSlides(file, options = {}) {
+  const { port = '3000', theme } = options;
+  const filePath = resolve(file);
+  const httpPort = parseInt(port);
+  const wsPort = httpPort + 1;
+
+  if (!existsSync(filePath)) {
+    console.log(`\n  ❌ File not found: ${file}\n`);
+    process.exit(1);
+  }
+
+  function buildHTML() {
+    const content = readFileSync(filePath, 'utf-8');
+    const slidesData = parseSlides(content);
+    return renderHTML(slidesData, {
+      theme: theme || slidesData.metadata.theme || 'dark',
+      title: slidesData.metadata.title || basename(file, '.md'),
+      author: slidesData.metadata.author || '',
+      liveReload: true,
+    });
+  }
+
+  let html = buildHTML();
+
+  // HTTP server
+  const server = createServer((req, res) => {
+    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+    res.end(html);
+  });
+
+  // WebSocket for live reload
+  const wss = new WebSocketServer({ port: wsPort });
+
+  // Watch for file changes
+  let debounce = null;
+  watch(filePath, () => {
+    if (debounce) clearTimeout(debounce);
+    debounce = setTimeout(() => {
+      try {
+        html = buildHTML();
+        wss.clients.forEach(client => {
+          if (client.readyState === 1) {
+            client.send('reload');
+          }
+        });
+        console.log('  🔄 Rebuilt — reloading...');
+      } catch (err) {
+        console.log(`  ⚠️  Build error: ${err.message}`);
+      }
+    }, 150);
+  });
+
+  server.listen(httpPort, () => {
+    const url = `http://localhost:${httpPort}`;
+    console.log(`
+  🎬 Live preview running
+
+  URL:   ${url}
+  File:  ${filePath}
+
+  Watching for changes...
+  Press Ctrl+C to stop.
+    `);
+
+    // Try to open browser
+    import('open').then(({ default: open }) => {
+      open(url).catch(() => {});
+    });
+  });
+
+  server.on('error', (err) => {
+    if (err.code === 'EADDRINUSE') {
+      console.log(`\n  ❌ Port ${httpPort} is in use. Try: slides preview -p ${httpPort + 10}\n`);
+      process.exit(1);
+    }
+    throw err;
+  });
+}

package/src/parser.js

@@ -0,0 +1,178 @@
+/**
+ * Markdown Slides Parser
+ * 
+ * Parses markdown into slide objects with frontmatter support.
+ * Slide separator: --- (horizontal rule)
+ * Speaker notes: <!--notes: ... -->
+ */
+
+import { marked } from 'marked';
+import hljs from 'highlight.js';
+
+// Configure marked with syntax highlighting
+marked.setOptions({
+  highlight: (code, lang) => {
+    if (lang && hljs.getLanguage(lang)) {
+      return hljs.highlight(code, { language: lang }).value;
+    }
+    return hljs.highlightAuto(code).value;
+  },
+  gfm: true,
+  breaks: false,
+});
+
+/**
+ * Parse frontmatter from markdown content
+ * Supports YAML-like key: value pairs between --- delimiters at the start
+ */
+export function parseFrontmatter(content) {
+  const frontmatterRegex = /^---\s*\n([\s\S]*?)\n---\s*\n/;
+  const match = content.match(frontmatterRegex);
+  
+  if (!match) {
+    return { metadata: {}, body: content };
+  }
+  
+  const metadata = {};
+  const lines = match[1].split('\n');
+  
+  for (const line of lines) {
+    const colonIndex = line.indexOf(':');
+    if (colonIndex > 0) {
+      const key = line.slice(0, colonIndex).trim();
+      const value = line.slice(colonIndex + 1).trim();
+      metadata[key] = value;
+    }
+  }
+  
+  return {
+    metadata,
+    body: content.slice(match[0].length),
+  };
+}
+
+/**
+ * Parse slide-level directives from comment syntax
+ * <!-- class: classname -->
+ * <!-- background: #hex or url -->
+ * <!-- transition: fade|slide|zoom -->
+ */
+function parseSlideDirectives(slideContent) {
+  const directives = {};
+  const directiveRegex = /<!--\s*(class|background|transition|layout|align):\s*(.*?)\s*-->/g;
+  let match;
+  
+  while ((match = directiveRegex.exec(slideContent)) !== null) {
+    directives[match[1]] = match[2];
+  }
+  
+  // Remove directive comments from content
+  const cleanContent = slideContent.replace(directiveRegex, '').trim();
+  
+  return { directives, cleanContent };
+}
+
+/**
+ * Extract speaker notes from <!-- notes: ... --> blocks
+ */
+function extractNotes(slideContent) {
+  const notesRegex = /<!--\s*notes:\s*([\s\S]*?)\s*-->/;
+  const match = slideContent.match(notesRegex);
+  
+  if (!match) {
+    return { notes: '', content: slideContent };
+  }
+  
+  return {
+    notes: match[1].trim(),
+    content: slideContent.replace(notesRegex, '').trim(),
+  };
+}
+
+/**
+ * Detect slide layout from content structure
+ */
+function detectLayout(htmlContent) {
+  const hasH1 = /<h1[^>]*>/.test(htmlContent);
+  const hasH2 = /<h2[^>]*>/.test(htmlContent);
+  const hasOnlyHeading = /^<h[12][^>]*>.*<\/h[12]>\s*$/s.test(htmlContent.trim());
+  const hasImage = /<img[^>]*>/.test(htmlContent);
+  const hasCode = /<pre><code/.test(htmlContent);
+  const hasList = /<[uo]l>/.test(htmlContent);
+  const hasBlockquote = /<blockquote>/.test(htmlContent);
+  
+  if (hasOnlyHeading) return 'center';
+  if (hasH1 && !hasH2) return 'title';
+  if (hasBlockquote && !hasCode && !hasList) return 'quote';
+  if (hasCode) return 'code';
+  if (hasImage) return 'image';
+  return 'default';
+}
+
+/**
+ * Parse markdown content into an array of slide objects
+ */
+export function parseSlides(content) {
+  const { metadata, body } = parseFrontmatter(content);
+  
+  // Split on --- that's on its own line (not inside code blocks)
+  const rawSlides = splitSlides(body);
+  
+  const slides = rawSlides.map((raw, index) => {
+    const { notes, content: withoutNotes } = extractNotes(raw);
+    const { directives, cleanContent } = parseSlideDirectives(withoutNotes);
+    const html = marked.parse(cleanContent);
+    const layout = directives.layout || detectLayout(html);
+    
+    return {
+      index,
+      raw: cleanContent,
+      html,
+      notes,
+      layout,
+      directives,
+    };
+  });
+  
+  return { metadata, slides };
+}
+
+/**
+ * Split markdown into slides by --- separator
+ * Respects code blocks (doesn't split inside ```)
+ */
+function splitSlides(content) {
+  const lines = content.split('\n');
+  const slides = [];
+  let current = [];
+  let inCodeBlock = false;
+  
+  for (const line of lines) {
+    // Track code block state
+    if (line.trim().startsWith('```')) {
+      inCodeBlock = !inCodeBlock;
+    }
+    
+    // Check for slide separator (--- on its own line, not in code block)
+    if (!inCodeBlock && /^---\s*$/.test(line.trim()) && current.length > 0) {
+      const slideContent = current.join('\n').trim();
+      if (slideContent) {
+        slides.push(slideContent);
+      }
+      current = [];
+      continue;
+    }
+    
+    current.push(line);
+  }
+  
+  // Don't forget the last slide
+  const lastSlide = current.join('\n').trim();
+  if (lastSlide) {
+    slides.push(lastSlide);
+  }
+  
+  return slides;
+}
+
+export default { parseSlides, parseFrontmatter };