Markdown Links Resolver

import { createApp, h, nextTick, onMounted, ref } from "https://esm.sh/vue@3.4.21"; function useMarkdownResolver() { const markdown = ref(""); const processedMarkdown = ref(""); const copyButtonText = ref("Copy to Clipboard"); const outputRef = ref(null); const textareaRef = ref(null); const isAutoProcessing = ref(false); onMounted(() => { // Autofocus textarea when component mounts textareaRef.value?.focus(); }); const processMarkdown = async () => { if (!markdown.value.trim()) return; try { isAutoProcessing.value = true; const response = await fetch("/resolve-links", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ markdown: markdown.value }), }); if (!response.ok) throw new Error("Failed to resolve links"); const { processedText } = await response.json(); processedMarkdown.value = processedText; } catch (error) { console.error("Error processing markdown:", error); } finally { isAutoProcessing.value = false; } }; const handlePaste = async (event: ClipboardEvent) => { // Ensure the paste event is captured await nextTick(); // Explicitly get the pasted text const pastedText = event.clipboardData?.getData("text/plain") || ""; // Update markdown and trigger processing markdown.value = pastedText; // Only auto-process if there's content if (pastedText.trim()) { await processMarkdown(); } }; const copyToClipboard = async () => { try { // Wait for next tick to ensure ref is updated await nextTick(); // Use a more reliable method to get text content const textToCopy = processedMarkdown.value; if (textToCopy) { await navigator.clipboard.writeText(textToCopy); copyButtonText.value = "Copied"; setTimeout(() => { copyButtonText.value = "Copy to Clipboard"; }, 2000); } } catch (err) { console.error("Failed to copy:", err); } }; return { markdown, processedMarkdown, copyButtonText, outputRef, textareaRef, isAutoProcessing, processMarkdown, copyToClipboard, handlePaste, }; } function client() { const RootComponent = { setup() { const appData = useMarkdownResolver(); return () => h("div", { class: "app-container" }, [ h("h1", { class: "app-title" }, "Markdown Links Resolver"), h("div", { class: "content-container" }, [ // Input Column h("div", { class: "input-column" }, [ h("textarea", { ref: (el: HTMLTextAreaElement) => { appData.textareaRef.value = el; }, value: appData.markdown.value, onInput: (e: Event) => { appData.markdown.value = (e.target as HTMLTextAreaElement).value; }, onPaste: appData.handlePaste, placeholder: "Paste your markdown with links here", class: "markdown-textarea", }), h("button", { onClick: appData.processMarkdown, class: `resolve-button ${appData.isAutoProcessing.value ? 'processing' : ''}`, }, appData.isAutoProcessing.value ? "Processing ..." : "Resolve Links"), ]), // Output Column h("div", { class: "output-column" }, [ h("textarea", { ref: (el: HTMLTextAreaElement) => { appData.outputRef.value = el; }, readonly: true, value: appData.processedMarkdown.value, placeholder: "Processed markdown will appear here", class: `processed-textarea ${appData.processedMarkdown.value ? 'has-content' : 'empty'}`, }), h("button", { onClick: appData.copyToClipboard, disabled: !appData.processedMarkdown.value, class: `copy-button ${appData.processedMarkdown.value ? 'active' : 'disabled'}`, }, appData.copyButtonText.value), ]), ]), h("a", { href: import.meta.url.replace("esm.town", "val.town"), target: "_top", class: "source-link", }, "view source"), ]); }, }; const app = createApp(RootComponent); app.mount("#root"); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { // Handle link resolution endpoint if (request.method === "POST" && new URL(request.url).pathname === "/resolve-links") { try { const { markdown } = await request.json(); // Combine multiple link extraction methods const linkRegexes = [ // Markdown links /\[([^\]]+)\]$([^)]+)$/g, // Plain URLs /(https?:\/\/[^\s]+)/g, ]; const links: Array<{ original: string; href: string }> = []; linkRegexes.forEach(regex => { let match; while ((match = regex.exec(markdown)) !== null) { links.push({ original: match[0], href: match[2] || match[1], // Support both markdown and plain URL formats }); } }); // Resolve each link const resolvedLinks = await Promise.all( links.map(async (link) => { const resolvedHref = await resolveRedirect(link.href); return { original: link.original, resolvedHref, }; }), ); // Replace links in markdown let processedText = markdown; resolvedLinks.forEach(({ original, resolvedHref }) => { // Escape special regex characters const escapedOriginal = original.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // Replace the link, supporting both markdown and plain URL formats processedText = processedText.replace( new RegExp(escapedOriginal, "g"), original.includes("](") ? original.replace(original.split("(")[1].split(")")[0], resolvedHref) : resolvedHref, ); }); return new Response(JSON.stringify({ processedText }), { headers: { "Content-Type": "application/json" }, }); } catch (error) { return new Response(JSON.stringify({ error: error instanceof Error ? error.message : String(error) }), { status: 500, headers: { "Content-Type": "application/json" }, }); } } // Serve the main HTML return new Response( ` Markdown Links Resolver

`, { headers: { "content-type": "text/html" }, }, ); } async function resolveRedirect(url: string): Promise { const fetchOptions = { headers: { "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36", } }; try { // Method 1: Fetch with manual redirect handling try { const response = await fetch(url, { ...fetchOptions, method: "HEAD", redirect: "manual" }); // Check for redirect status codes if ([301, 302, 303, 307, 308].includes(response.status)) { return response.headers.get("location") || url; } } catch {} // Method 2: Full GET request for stubborn redirects try { const fullResponse = await fetch(url, { ...fetchOptions, method: "GET", redirect: "follow" }); // Return the final URL after all redirects return fullResponse.url || url; } catch {} // Fallback return url; } catch { return url; } }

argimko