voop 0.1.0 → 0.1.1

package/README.md

@@ -8,6 +8,20 @@ Publish files to the web instantly with a single command.
 
 I use coding agents to create interactive HTML pages instead of static markdown docs. When you can just say "make me a visualization of this data" and get a working HTML page, you need a fast way to share it. This tool lets me go from local file to public URL in one command.
 
+**Markdown files get beautifully rendered too.** Tired of sharing `.md` files that people have to open in a text editor? voop automatically converts markdown to styled HTML pages with:
+- Syntax highlighting for code blocks
+- Mermaid diagram rendering
+- Table of contents sidebar
+- Dark mode support
+- Clean typography
+
+Share docs with your team and they'll see properly formatted content, not raw markdown.
+
+| Raw Markdown | Rendered HTML |
+|:---:|:---:|
+| [![Raw](https://share.yemyat.com/voop-raw-version-d4fda207.png)](https://share.yemyat.com/example-9afa27ba.md) | [![Rendered](https://share.yemyat.com/voop-html-version-09b5b6c8.png)](https://share.yemyat.com/example-20a6d65b.html) |
+| `voop doc.md --raw` | `voop doc.md` |
+
 ## Alternatives
 
 | Tool | Pros | Cons |
@@ -35,15 +49,28 @@ Uses Cloudflare R2 for storage with free egress and global CDN.
 
 ## Install
 
+Run directly without installing:
+
 ```bash
 npx voop <file>
+# or
+bunx voop <file>
 ```
 
 Or install globally:
 
 ```bash
 npm install -g voop
-voop <file>
+# or
+bun install -g voop
+```
+
+## AI Agent Skill
+
+Install the voop skill so AI agents can use voop automatically when you ask to upload files:
+
+```bash
+npx add-skill yemyat/voop
 ```
 
 ## Setup
@@ -76,6 +103,8 @@ Config is stored at `~/.config/voop/config.json`.
 
 ```bash
 voop mypage.html      # Upload a file
+voop docs.md          # Markdown → styled HTML with ToC
+voop docs.md --raw    # Upload raw markdown (no conversion)
 voop --setup          # Reconfigure credentials
 voop --test           # Test R2 connection
 voop --help           # Show help

package/dist/index.js

@@ -4,8 +4,10 @@ import { lookup } from "mime-types";
 import { existsSync, readFileSync, mkdirSync, writeFileSync } from "fs";
 import { basename, extname } from "path";
 import { randomBytes } from "crypto";
-import { spawn } from "child_process";
+import { spawnSync } from "child_process";
 import * as p from "@clack/prompts";
+import { marked } from "marked";
+import { createHtmlTemplate } from "./template.js";
 const CONFIG_PATH = `${process.env.HOME}/.config/voop/config.json`;
 function loadConfig() {
     if (!existsSync(CONFIG_PATH)) {
@@ -122,15 +124,37 @@ async function setup(existingConfig) {
     return config;
 }
 function copyToClipboard(text) {
+    const platform = process.platform;
+    const cmd = platform === "darwin" ? "pbcopy"
+        : platform === "win32" ? "clip"
+            : "xclip";
+    const args = cmd === "xclip" ? ["-selection", "clipboard"] : [];
     try {
-        const proc = spawn("pbcopy", [], { stdio: ["pipe", "ignore", "ignore"] });
-        proc.stdin?.write(text);
-        proc.stdin?.end();
+        const result = spawnSync(cmd, args, { input: text, stdio: ["pipe", "ignore", "ignore"] });
+        if (result.error)
+            return;
         console.log(`(copied)`);
     }
     catch { }
 }
-async function publish(filePath) {
+function convertMarkdownToHtml(markdown, title) {
+    marked.setOptions({
+        gfm: true,
+        breaks: false,
+    });
+    const renderer = new marked.Renderer();
+    renderer.code = ({ text, lang }) => {
+        if (lang === "mermaid") {
+            return `<pre class="mermaid">${text}</pre>`;
+        }
+        const langClass = lang ? ` class="language-${lang}"` : "";
+        const escaped = text.replace(/</g, "&lt;").replace(/>/g, "&gt;");
+        return `<pre><code${langClass}>${escaped}</code></pre>`;
+    };
+    const content = marked.parse(markdown, { renderer });
+    return createHtmlTemplate(title, content);
+}
+async function publish(filePath, raw = false) {
     let config = loadConfig();
     if (!isConfigValid(config)) {
         console.log("No configuration found. Let's set things up first.\n");
@@ -145,12 +169,25 @@ async function publish(filePath) {
         process.exit(1);
     }
     const client = createS3Client(config);
-    const fileContent = readFileSync(filePath);
-    const ext = extname(filePath);
-    const baseName = basename(filePath, ext);
+    const ext = extname(filePath).toLowerCase();
+    const baseName = basename(filePath, extname(filePath));
     const shortId = randomBytes(4).toString("hex");
-    const key = `${baseName}-${shortId}${ext}`;
-    const contentType = lookup(filePath) || "application/octet-stream";
+    const isMarkdown = ext === ".md" || ext === ".markdown";
+    const shouldConvert = isMarkdown && !raw;
+    let fileContent;
+    let key;
+    let contentType;
+    if (shouldConvert) {
+        const markdown = readFileSync(filePath, "utf-8");
+        fileContent = convertMarkdownToHtml(markdown, baseName);
+        key = `${baseName}-${shortId}.html`;
+        contentType = "text/html; charset=utf-8";
+    }
+    else {
+        fileContent = readFileSync(filePath);
+        key = `${baseName}-${shortId}${ext}`;
+        contentType = lookup(filePath) || "application/octet-stream";
+    }
     await client.send(new PutObjectCommand({
         Bucket: config.bucketName,
         Key: key,
@@ -168,15 +205,22 @@ if (args.length === 0 || args[0] === "--help" || args[0] === "-h" || args[0] ===
 voop - Upload files to the web instantly
 
 USAGE
-  voop <file>      Upload a file and get a public URL
-  voop --setup     Configure or reconfigure credentials
-  voop --test      Test connection to R2
-  voop --help      Show this help
+  voop <file>           Upload a file and get a public URL
+  voop <file> --raw     Upload markdown without HTML conversion
+  voop --setup          Configure or reconfigure credentials
+  voop --test           Test connection to R2
+  voop --help           Show this help
+
+MARKDOWN
+  Markdown files (.md) are automatically converted to beautifully
+  rendered HTML pages with syntax highlighting and Mermaid support.
+  Use --raw to upload the original markdown file instead.
 
 EXAMPLES
   voop screenshot.png
+  voop README.md              Uploads as styled HTML
+  voop README.md --raw        Uploads as raw markdown
   voop document.pdf
-  voop index.html
 
 SETUP
   On first run, you'll be guided through an interactive setup.
@@ -207,5 +251,7 @@ else if (args[0] === "--test" || args[0] === "test") {
     process.exit(success ? 0 : 1);
 }
 else {
-    await publish(args[0]);
+    const raw = args.includes("--raw");
+    const filePath = args.find(arg => !arg.startsWith("--")) || args[0];
+    await publish(filePath, raw);
 }

package/dist/template.d.ts

@@ -0,0 +1 @@
+export declare function createHtmlTemplate(title: string, content: string): string;

package/dist/template.js

@@ -0,0 +1,476 @@
+export function createHtmlTemplate(title, content) {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(title)}</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --font-heading: 'Space Grotesk', system-ui, sans-serif;
+      --font-body: 'Source Serif 4', Georgia, serif;
+      --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+      --color-bg: #fafafa;
+      --color-surface: #ffffff;
+      --color-text: #1a1a1a;
+      --color-text-muted: #666666;
+      --color-border: #e5e5e5;
+      --color-accent: #0055ff;
+      --color-code-bg: #f5f5f5;
+      --color-code-text: #1a1a1a;
+      --toc-width: 260px;
+      --max-width: 72ch;
+      --space-xs: 0.25rem;
+      --space-sm: 0.5rem;
+      --space-md: 1rem;
+      --space-lg: 2rem;
+      --space-xl: 4rem;
+      --space-2xl: 6rem;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --color-bg: #0a0a0a;
+        --color-surface: #141414;
+        --color-text: #f0f0f0;
+        --color-text-muted: #888888;
+        --color-border: #2a2a2a;
+        --color-accent: #4d8bff;
+        --color-code-bg: #1e1e1e;
+        --color-code-text: #d4d4d4;
+      }
+    }
+
+    *, *::before, *::after {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    html {
+      font-size: 18px;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      scroll-behavior: smooth;
+    }
+
+    body {
+      font-family: var(--font-body);
+      font-optical-sizing: auto;
+      background: var(--color-bg);
+      color: var(--color-text);
+      line-height: 1.7;
+      min-height: 100dvh;
+    }
+
+    .layout {
+      display: flex;
+      max-width: calc(var(--max-width) + var(--toc-width) + var(--space-2xl));
+      margin: 0 auto;
+    }
+
+    .container {
+      flex: 1;
+      max-width: var(--max-width);
+      padding: var(--space-2xl) var(--space-lg);
+    }
+
+    article {
+      position: relative;
+    }
+
+    /* Table of Contents */
+    .toc {
+      position: sticky;
+      top: var(--space-lg);
+      align-self: flex-start;
+      width: var(--toc-width);
+      max-height: calc(100vh - var(--space-xl));
+      overflow-y: auto;
+      padding: var(--space-lg);
+      margin-top: var(--space-2xl);
+      font-family: var(--font-heading);
+      font-size: 0.8rem;
+      display: none;
+    }
+
+    @media (min-width: 1100px) {
+      .toc {
+        display: block;
+      }
+    }
+
+    .toc-title {
+      font-weight: 600;
+      font-size: 0.7rem;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--color-text-muted);
+      margin-bottom: var(--space-md);
+    }
+
+    .toc-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+
+    .toc-list li {
+      margin-bottom: var(--space-xs);
+    }
+
+    .toc-list a {
+      color: var(--color-text-muted);
+      text-decoration: none;
+      display: block;
+      padding: 2px 0;
+      border-left: 2px solid transparent;
+      padding-left: var(--space-sm);
+      transition: color 0.15s, border-color 0.15s;
+    }
+
+    .toc-list a:hover {
+      color: var(--color-text);
+    }
+
+    .toc-list a.active {
+      color: var(--color-accent);
+      border-left-color: var(--color-accent);
+    }
+
+    .toc-list .toc-h2 { padding-left: var(--space-sm); }
+    .toc-list .toc-h3 { padding-left: calc(var(--space-sm) + 0.75rem); font-size: 0.75rem; }
+    .toc-list .toc-h4 { padding-left: calc(var(--space-sm) + 1.5rem); font-size: 0.7rem; }
+
+    /* Typography */
+    h1, h2, h3, h4, h5, h6 {
+      font-family: var(--font-heading);
+      font-weight: 600;
+      line-height: 1.25;
+      text-wrap: balance;
+      letter-spacing: -0.02em;
+      margin-top: var(--space-xl);
+      margin-bottom: var(--space-md);
+      scroll-margin-top: var(--space-lg);
+    }
+
+    h1 {
+      font-size: 2.5rem;
+      font-weight: 700;
+      margin-top: 0;
+      margin-bottom: var(--space-lg);
+      padding-bottom: var(--space-lg);
+      border-bottom: 3px solid var(--color-text);
+    }
+
+    h2 {
+      font-size: 1.75rem;
+      margin-top: var(--space-2xl);
+      padding-top: var(--space-lg);
+      border-top: 1px solid var(--color-border);
+    }
+
+    h3 { font-size: 1.35rem; }
+    h4 { font-size: 1.15rem; }
+    h5, h6 { font-size: 1rem; }
+
+    p {
+      margin-bottom: var(--space-md);
+      text-wrap: pretty;
+    }
+
+    a {
+      color: var(--color-accent);
+      text-decoration: underline;
+      text-underline-offset: 2px;
+      text-decoration-thickness: 1px;
+      transition: text-decoration-thickness 0.15s ease;
+    }
+
+    a:hover {
+      text-decoration-thickness: 2px;
+    }
+
+    strong {
+      font-weight: 600;
+    }
+
+    em {
+      font-style: italic;
+    }
+
+    /* Lists */
+    ul, ol {
+      margin-bottom: var(--space-md);
+      padding-left: var(--space-lg);
+    }
+
+    li {
+      margin-bottom: var(--space-xs);
+    }
+
+    li > ul, li > ol {
+      margin-top: var(--space-xs);
+      margin-bottom: 0;
+    }
+
+    /* Code - custom theme that works for both light and dark */
+    code {
+      font-family: var(--font-mono);
+      font-size: 0.85em;
+      background: var(--color-code-bg);
+      color: var(--color-code-text);
+      padding: 0.15em 0.4em;
+      border-radius: 4px;
+    }
+
+    pre {
+      background: var(--color-code-bg) !important;
+      border-radius: 6px;
+      padding: var(--space-md);
+      overflow-x: auto;
+      margin-bottom: var(--space-lg);
+      border: 1px solid var(--color-border);
+    }
+
+    pre code {
+      background: none;
+      padding: 0;
+      font-size: 0.875rem;
+      line-height: 1.6;
+      color: var(--color-code-text);
+    }
+
+    /* Syntax highlighting - works in both modes */
+    .token.comment, .token.prolog, .token.doctype, .token.cdata { color: #6a9955; }
+    .token.punctuation { color: var(--color-code-text); }
+    .token.property, .token.tag, .token.constant, .token.symbol, .token.deleted { color: #4fc1ff; }
+    .token.boolean, .token.number { color: #b5cea8; }
+    .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #ce9178; }
+    .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: #d4d4d4; }
+    .token.atrule, .token.attr-value, .token.keyword { color: #c586c0; }
+    .token.function { color: #dcdcaa; }
+    .token.class-name { color: #4ec9b0; }
+    .token.regex, .token.important, .token.variable { color: #d16969; }
+
+    @media (prefers-color-scheme: light) {
+      .token.comment, .token.prolog, .token.doctype, .token.cdata { color: #008000; }
+      .token.punctuation { color: #393a34; }
+      .token.property, .token.tag, .token.constant, .token.symbol, .token.deleted { color: #36acaa; }
+      .token.boolean, .token.number { color: #36acaa; }
+      .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #9a050f; }
+      .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: #393a34; }
+      .token.atrule, .token.attr-value, .token.keyword { color: #0000ff; }
+      .token.function { color: #393a34; }
+      .token.class-name { color: #2b91af; }
+      .token.regex, .token.important, .token.variable { color: #d16969; }
+    }
+
+    /* Blockquotes */
+    blockquote {
+      font-style: italic;
+      border-left: 4px solid var(--color-text);
+      margin: var(--space-lg) 0;
+      padding: var(--space-md) var(--space-lg);
+      background: var(--color-surface);
+    }
+
+    blockquote p:last-child {
+      margin-bottom: 0;
+    }
+
+    /* Tables */
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: var(--space-lg) 0;
+      font-family: var(--font-heading);
+      font-size: 0.9rem;
+    }
+
+    th, td {
+      text-align: left;
+      padding: var(--space-sm) var(--space-md);
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    th {
+      font-weight: 600;
+      background: var(--color-surface);
+      border-bottom-width: 2px;
+    }
+
+    tr:hover td {
+      background: var(--color-surface);
+    }
+
+    /* Images */
+    img {
+      max-width: 100%;
+      height: auto;
+      border-radius: 6px;
+      margin: var(--space-lg) 0;
+    }
+
+    /* Horizontal Rule */
+    hr {
+      border: none;
+      border-top: 1px solid var(--color-border);
+      margin: var(--space-xl) 0;
+    }
+
+    /* Task Lists */
+    ul.contains-task-list {
+      list-style: none;
+      padding-left: 0;
+    }
+
+    .task-list-item {
+      display: flex;
+      align-items: baseline;
+      gap: var(--space-sm);
+    }
+
+    .task-list-item input[type="checkbox"] {
+      margin: 0;
+      accent-color: var(--color-accent);
+    }
+
+    /* Mermaid */
+    .mermaid {
+      text-align: center;
+      margin: var(--space-lg) 0;
+      background: var(--color-surface);
+      padding: var(--space-md);
+      border-radius: 6px;
+      border: 1px solid var(--color-border);
+    }
+
+    /* Footer */
+    .footer {
+      margin-top: var(--space-2xl);
+      padding-top: var(--space-lg);
+      border-top: 1px solid var(--color-border);
+      font-family: var(--font-heading);
+      font-size: 0.75rem;
+      color: var(--color-text-muted);
+      text-align: right;
+    }
+
+    .footer a {
+      color: var(--color-text-muted);
+      text-decoration: none;
+    }
+
+    .footer a:hover {
+      color: var(--color-text);
+    }
+
+    /* Print styles */
+    @media print {
+      body { font-size: 12pt; }
+      .layout { display: block; }
+      .container { max-width: none; padding: 0; }
+      .toc, .footer { display: none; }
+    }
+  </style>
+</head>
+<body>
+  <div class="layout">
+    <div class="container">
+      <article>
+        ${content}
+      </article>
+      <footer class="footer">
+        Published with <a href="https://github.com/yemyat/voop" target="_blank" rel="noopener">voop</a>
+      </footer>
+    </div>
+    <nav class="toc" aria-label="Table of contents">
+      <div class="toc-title">On this page</div>
+      <ul class="toc-list" id="toc-list"></ul>
+    </nav>
+  </div>
+  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
+  <script type="module">
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+    const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    mermaid.initialize({
+      startOnLoad: true,
+      theme: isDark ? 'dark' : 'neutral',
+      securityLevel: 'loose',
+      fontFamily: 'Space Grotesk, system-ui, sans-serif',
+    });
+
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      window.location.reload();
+    });
+  </script>
+  <script>
+    (function() {
+      const article = document.querySelector('article');
+      const tocList = document.getElementById('toc-list');
+      const headings = Array.from(article.querySelectorAll('h1, h2, h3, h4'));
+      
+      headings.forEach((heading, index) => {
+        if (!heading.id) {
+          heading.id = 'heading-' + index;
+        }
+        
+        const li = document.createElement('li');
+        const a = document.createElement('a');
+        a.href = '#' + heading.id;
+        a.textContent = heading.textContent;
+        a.className = 'toc-' + heading.tagName.toLowerCase();
+        li.appendChild(a);
+        tocList.appendChild(li);
+      });
+
+      const tocLinks = tocList.querySelectorAll('a');
+      
+      function updateActiveLink() {
+        const scrollTop = window.scrollY;
+        const windowHeight = window.innerHeight;
+        const docHeight = document.documentElement.scrollHeight;
+        const isAtBottom = scrollTop + windowHeight >= docHeight - 50;
+        
+        let activeIndex = 0;
+        
+        if (isAtBottom) {
+          activeIndex = headings.length - 1;
+        } else {
+          for (let i = headings.length - 1; i >= 0; i--) {
+            const heading = headings[i];
+            const rect = heading.getBoundingClientRect();
+            if (rect.top <= 100) {
+              activeIndex = i;
+              break;
+            }
+          }
+        }
+        
+        tocLinks.forEach((link, i) => {
+          link.classList.toggle('active', i === activeIndex);
+        });
+      }
+
+      window.addEventListener('scroll', updateActiveLink, { passive: true });
+      updateActiveLink();
+    })();
+  </script>
+</body>
+</html>`;
+}
+function escapeHtml(text) {
+    const map = {
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        "'": '&#039;'
+    };
+    return text.replace(/[&<>"']/g, c => map[c]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "voop",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Publish files to the web instantly with a single command using Coudflare R2",
   "author": "Ye Myat Min",
   "license": "MIT",
@@ -37,6 +37,7 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.940.0",
     "@clack/prompts": "^0.11.0",
+    "marked": "^17.0.1",
     "mime-types": "^3.0.2"
   }
 }