展示HN:mdto.page – 立即将Markdown转换为可分享的网页
Show HN: mdto.page – Turn Markdown into a shareable webpage instantly

原始链接: https://mdto.page

这段代码片段处理文本内容的预览和上传(可能是一个网页)到服务器。 “预览”按钮在 iframe 中渲染内容,显示实时预览。包含错误处理,以捕获和显示预览加载期间的任何问题。 “上传”按钮通过 POST 请求将内容发送到 `/upload` 端点。它可选地包含 Turnstile token 以提高安全性(可能是一个 CAPTCHA)。上传成功后,代码接收到一个唯一的 URL(“slug”),并显示一个成功视图,其中包含指向新创建页面的链接。 上传期间的错误处理会重置 Turnstile widget(如果存在),并向用户提醒任何失败。上传按钮包含加载状态管理,以在过程中提供视觉反馈。代码还管理显示不同的视图(上传 vs. 成功),并在上传请求期间处理过期/主题设置。

## mdto.page: 快速 Markdown 网页 Hacker News 用户 hjinco 发布了 **mdto.page**,一个用于快速将 Markdown 文件分享为网页的工具。该服务旨在保持简洁:用户上传 Markdown 文件,即可获得一个公开、可分享的 URL – 无需账户或静态站点生成器。 主要功能包括即时发布和可自定义的链接过期时间(1 天到 30 天),非常适合临时分享。目前免费使用,创建者欢迎反馈。 Hacker News 上的讨论提到了类似的工具,如 mdview.io 和 Markdeep。有人担心潜在的滥用,hjinco 回应说已经实施了 Cloudflare Turnstile 来防止机器人上传,这也阻止了直接 `curl` 访问 – 需要使用网页界面。用户还询问了示例页面,随后提供了展示可用主题的页面。
相关文章

原文

`; // Write to iframe const iframeDoc = previewIframe.contentDocument || previewIframe.contentWindow.document; iframeDoc.open(); iframeDoc.write(previewHtml); iframeDoc.close(); // Show iframe, hide loading previewLoading.style.display = 'none'; previewIframe.style.display = 'block'; } catch (error) { previewLoading.textContent = `Error loading preview: ${error.message}`; console.error('Preview error:', error); } } previewButton.addEventListener('click', renderPreview); uploadButton.addEventListener('click', async () => { if (!selectedFile) return; // Get Turnstile token (optional in development) let turnstileToken = null; if (typeof turnstile !== 'undefined') { turnstileToken = turnstile.getResponse(); } uploadButton.classList.add('loading'); uploadButton.disabled = true; try { const text = await selectedFile.text(); // Build headers - include token only if available const headers = { 'Content-Type': 'text/plain' }; if (turnstileToken) { headers['X-Turnstile-Token'] = turnstileToken; } const response = await fetch(`/upload?expiration=${expirationDays}&theme=${selectedTheme}`, { method: 'POST', headers: headers, body: text, }); const data = await response.json(); if (response.ok && data.slug) { const viewUrl = `${window.location.origin}/${data.slug}`; // Setup Success View urlInput.value = viewUrl; openLinkBtn.href = viewUrl; // Switch Views uploadView.style.display = 'none'; successView.style.display = 'flex'; // Trigger reflow void successView.offsetWidth; successView.classList.add('visible'); } else { // Reset Turnstile widget on validation failure if (typeof turnstile !== 'undefined') { turnstile.reset(); } throw new Error(data.error || 'Failed to create page'); } } catch (error) { // Reset Turnstile widget on error if (typeof turnstile !== 'undefined') { turnstile.reset(); } alert(`Failed to create page: ${error.message}`); uploadButton.disabled = false; } finally { uploadButton.classList.remove('loading'); } }); GitHub

联系我们 contact @ memedata.com