grimshaw's picture
I want you to develop me a website that takes basic markdown as input and uses openrouter to create brilliantly designed html slideshow. The website must have full pptxgenjs functionality and be able to export directly to fully featured and editable pptx files
46a3f1c verified
Raw
History Blame Contribute Delete
3.3 kB
document.addEventListener('DOMContentLoaded', function() {
// Sample markdown content
const sampleMarkdown = `# Welcome to Markdown Slides
## Create Beautiful Presentations
- Write in simple markdown
- Generate professional slides
- Export to PowerPoint
---
## Features
1. **Easy to Use** - Just write markdown
2. **Powerful** - Supports all markdown features
3. **Flexible** - Customize your slides
---
## Get Started
\`\`\`markdown
# Slide Title
- Bullet point 1
- Bullet point 2
\`\`\`
`;
// DOM Elements
const markdownInput = document.getElementById('markdown-input');
const generateBtn = document.getElementById('generate-btn');
const exportBtn = document.getElementById('export-btn');
const slidesPreview = document.getElementById('slides-preview');
const sampleBtn = document.getElementById('sample-btn');
// Load sample markdown
sampleBtn.addEventListener('click', () => {
markdownInput.value = sampleMarkdown;
generateSlides();
});
// Generate slides from markdown
generateBtn.addEventListener('click', generateSlides);
// Export to PPTX
exportBtn.addEventListener('click', exportToPPTX);
function generateSlides() {
const markdown = markdownInput.value.trim();
if (!markdown) return;
// Split markdown by slide separators (---)
const slides = markdown.split(/\n---\n/);
let html = '';
slides.forEach((slide, index) => {
const content = marked.parse(slide);
html += `
<div class="slide">
<div class="slide-title">Slide ${index + 1}</div>
<div class="slide-content">${content}</div>
</div>
`;
});
slidesPreview.innerHTML = html;
exportBtn.disabled = false;
}
function exportToPPTX() {
const markdown = markdownInput.value.trim();
if (!markdown) return;
const slides = markdown.split(/\n---\n/);
const pptx = new PptxGenJS();
slides.forEach(slide => {
const content = marked.parse(slide);
// Create a new slide
const pptxSlide = pptx.addSlide();
// Extract title (first line)
const lines = slide.split('\n');
const title = lines[0].replace(/^#\s+/, '');
// Add title and content
pptxSlide.addText(title, {
x: 0.5, y: 0.5, w: 9, h: 1,
fontSize: 24,
bold: true,
color: '4F46E5'
});
// Add content (remove title from content)
const contentWithoutTitle = lines.slice(1).join('\n');
const htmlContent = marked.parse(contentWithoutTitle);
pptxSlide.addText(htmlContent, {
x: 0.5, y: 1.5, w: 9, h: 5,
fontSize: 18,
color: '4B5563'
});
});
// Download the presentation
pptx.writeFile({ fileName: 'MarkdownSlides.pptx' });
}
// Initialize with sample if empty
if (!markdownInput.value) {
markdownInput.value = sampleMarkdown;
generateSlides();
}
});