From 7eba627c8635cde99e22b752f0e2bfdb9fb09c11 Mon Sep 17 00:00:00 2001
From: Hatter Jiang <jht5945@gmail.com>
Date: Sun, 17 May 2026 15:20:50 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=86=95=20Add=20new=20simple-markdown-rend?=
 =?UTF-8?q?er=20directory?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 simple-markdown-render/index.html | 529 ++++++++++++++++++++++++++++++
 simple-markdown-render/site.json  |   3 +
 2 files changed, 532 insertions(+)
 create mode 100644 simple-markdown-render/index.html
 create mode 100644 simple-markdown-render/site.json
diff --git a/simple-markdown-render/index.html b/simple-markdown-render/index.html
new file mode 100644
index 0000000..38c11b7
--- /dev/null
+++ b/simple-markdown-render/index.html
@@ -0,0 +1,529 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <title>Markdown Renderer</title>
+    <!-- <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> -->
+    <script src="https://cdn.hatter.ink/doc/18837_2D3503C6AA42672F4699D5608BC15B60/marked.min.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        html {
+            height: 100%;
+            overscroll-behavior: auto;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            overflow-x: hidden;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100dvh;
+            min-height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+            padding: calc(env(safe-area-inset-top) + 20px) env(safe-area-inset-right) calc(env(safe-area-inset-bottom) + 20px) env(safe-area-inset-left);
+            margin: 0;
+            overflow-y: auto;
+            overflow-x: hidden;
+            -webkit-overflow-scrolling: touch;
+            max-width: 100%;
+        }
+
+        .container {
+            background: white;
+            border-radius: 16px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            padding: 20px;
+            max-width: 800px;
+            width: 100%;
+            margin: 20px;
+            box-sizing: border-box;
+        }
+
+        h1 {
+            text-align: center;
+            color: #333;
+            margin-bottom: 10px;
+            font-size: 20px;
+            position: relative;
+        }
+
+        .subtitle {
+            text-align: center;
+            color: #666;
+            margin-bottom: 30px;
+        }
+
+        .input-row {
+            display: flex;
+            gap: 8px;
+            margin-bottom: 20px;
+        }
+
+        .url-input {
+            flex: 1;
+            padding: 10px 14px;
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            font-size: 14px;
+            outline: none;
+            transition: border-color 0.2s;
+        }
+
+        .url-input:focus {
+            border-color: #667eea;
+        }
+
+        .submit-btn {
+            padding: 10px 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 14px;
+            cursor: pointer;
+            transition: transform 0.2s;
+            white-space: nowrap;
+        }
+
+        .submit-btn:hover {
+            transform: scale(1.05);
+        }
+
+        .drop-zone {
+            border: 2px dashed #667eea;
+            border-radius: 12px;
+            padding: 10px 20px;
+            text-align: center;
+            background: #f8f9ff;
+            transition: all 0.3s ease;
+            cursor: pointer;
+            margin-bottom: 20px;
+        }
+
+        .drop-zone.drag-over {
+            background: #e8eaff;
+            border-color: #764ba2;
+            transform: scale(1.02);
+        }
+
+        .drop-zone-icon {
+            font-size: 40px;
+            margin-bottom: 10px;
+        }
+
+        .drop-zone-text {
+            color: #555;
+            font-size: 16px;
+        }
+
+        .drop-zone-text strong {
+            color: #667eea;
+        }
+
+        #fileInput {
+            display: none;
+        }
+
+        .loading {
+            text-align: center;
+            color: #667eea;
+            padding: 20px;
+            display: none;
+        }
+
+        .loading.visible {
+            display: block;
+        }
+
+        .spinner {
+            display: inline-block;
+            width: 24px;
+            height: 24px;
+            border: 3px solid #e8eaff;
+            border-top-color: #667eea;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+            margin-right: 8px;
+            vertical-align: middle;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        .error {
+            padding: 15px;
+            background: #ffe6e6;
+            border-radius: 8px;
+            color: #d63031;
+            display: none;
+            margin-bottom: 20px;
+        }
+
+        .error.visible {
+            display: block;
+        }
+
+        .render-output {
+            display: none;
+        }
+
+        .render-output.visible {
+            display: block;
+        }
+
+        .render-output .source-bar {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            background: #f0f4ff;
+            border-radius: 8px 8px 0 0;
+            font-size: 13px;
+            color: #666;
+        }
+
+        .source-bar button {
+            padding: 4px 12px;
+            background: #667eea;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            font-size: 12px;
+            cursor: pointer;
+            margin-left: 4px;
+        }
+
+        .source-bar button:hover {
+            background: #5568d3;
+        }
+
+        .markdown-body {
+            padding: 20px;
+            border: 1px solid #e0e0e0;
+            border-top: none;
+            border-radius: 0 0 8px 8px;
+            line-height: 1.6;
+            color: #333;
+            overflow-wrap: break-word;
+        }
+
+        .markdown-body h1, .markdown-body h2, .markdown-body h3,
+        .markdown-body h4, .markdown-body h5, .markdown-body h6 {
+            margin-top: 24px;
+            margin-bottom: 16px;
+            font-weight: 600;
+            line-height: 1.25;
+        }
+
+        .markdown-body h1 { font-size: 2em; border-bottom: 1px solid #eaecef; padding-bottom: 0.3em; }
+        .markdown-body h2 { font-size: 1.5em; border-bottom: 1px solid #eaecef; padding-bottom: 0.3em; }
+        .markdown-body h3 { font-size: 1.25em; }
+
+        .markdown-body p { margin-bottom: 16px; }
+
+        .markdown-body a { color: #667eea; text-decoration: none; }
+        .markdown-body a:hover { text-decoration: underline; }
+
+        .markdown-body code {
+            padding: 0.2em 0.4em;
+            background: #f6f8fa;
+            border-radius: 3px;
+            font-size: 0.9em;
+        }
+
+        .markdown-body pre {
+            padding: 16px;
+            background: #f6f8fa;
+            border-radius: 6px;
+            overflow-x: auto;
+            margin-bottom: 16px;
+        }
+
+        .markdown-body pre code {
+            padding: 0;
+            background: none;
+            font-size: 0.85em;
+        }
+
+        .markdown-body blockquote {
+            padding: 0 1em;
+            color: #6a737d;
+            border-left: 0.25em solid #dfe2e5;
+            margin: 0 0 16px 0;
+        }
+
+        .markdown-body ul, .markdown-body ol {
+            padding-left: 2em;
+            margin-bottom: 16px;
+        }
+
+        .markdown-body li { margin-bottom: 0.25em; }
+
+        .markdown-body table {
+            border-collapse: collapse;
+            margin-bottom: 16px;
+            width: 100%;
+        }
+
+        .markdown-body th, .markdown-body td {
+            padding: 6px 13px;
+            border: 1px solid #dfe2e5;
+        }
+
+        .markdown-body th {
+            background: #f6f8fa;
+            font-weight: 600;
+        }
+
+        .markdown-body tr:nth-child(2n) {
+            background: #f6f8fa;
+        }
+
+        .markdown-body img {
+            max-width: 100%;
+            height: auto;
+        }
+
+        .markdown-body hr {
+            height: 0.25em;
+            padding: 0;
+            margin: 24px 0;
+            background-color: #e1e4e8;
+            border: 0;
+        }
+
+        .toast {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%) translateY(100px);
+            background: #333;
+            color: white;
+            padding: 10px 20px;
+            border-radius: 8px;
+            font-size: 14px;
+            opacity: 0;
+            transition: all 0.3s ease;
+            z-index: 1000;
+        }
+
+        .toast.visible {
+            transform: translateX(-50%) translateY(0);
+            opacity: 1;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Markdown Renderer</h1>
+        <p class="subtitle">Enter a URL or drop a markdown file</p>
+
+        <div class="input-row">
+            <input type="text" class="url-input" id="urlInput" placeholder="https://example.com/file.md">
+            <button class="submit-btn" id="submitBtn">Render</button>
+        </div>
+
+        <div class="drop-zone" id="dropZone">
+            <div class="drop-zone-icon">&#128196;</div>
+            <p class="drop-zone-text">
+                <strong>Drop file here</strong> or click to browse
+            </p>
+        </div>
+        <input type="file" id="fileInput" accept=".md,.markdown,.txt,.text">
+
+        <div class="loading" id="loading">
+            <span class="spinner"></span> Loading...
+        </div>
+        <div class="error" id="error"></div>
+
+        <div class="render-output" id="renderOutput">
+            <div class="source-bar">
+                <span id="sourceLabel"></span>
+                <div>
+                    <button id="copyMdBtn">Copy Markdown</button>
+                    <button id="rawBtn">View Raw</button>
+                </div>
+            </div>
+            <div class="markdown-body" id="renderedContent"></div>
+        </div>
+    </div>
+
+    <div class="toast" id="toast"></div>
+
+    <script>
+        const urlInput = document.getElementById('urlInput');
+        const submitBtn = document.getElementById('submitBtn');
+        const dropZone = document.getElementById('dropZone');
+        const fileInput = document.getElementById('fileInput');
+        const loading = document.getElementById('loading');
+        const error = document.getElementById('error');
+        const renderOutput = document.getElementById('renderOutput');
+        const renderedContent = document.getElementById('renderedContent');
+        const sourceLabel = document.getElementById('sourceLabel');
+        const copyMdBtn = document.getElementById('copyMdBtn');
+        const rawBtn = document.getElementById('rawBtn');
+        const toast = document.getElementById('toast');
+
+        let currentRawText = '';
+
+        // Extension system: loaders registry
+        // Loaders are functions that take a URL/source and return text content.
+        // Register custom loaders via window.registerLoader(name, fn).
+        const loaders = {};
+
+        // Default HTTP/HTTPS loader with extension hooks
+        const defaultHttpLoader = async (url) => {
+            const response = await fetch(url, {
+                headers: { 'Accept': 'text/markdown, text/plain, */*' }
+            });
+            if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            return await response.text();
+        };
+        loaders['http'] = defaultHttpLoader;
+        loaders['https'] = defaultHttpLoader;
+
+        window.registerLoader = function(name, fn) {
+            loaders[name] = fn;
+        };
+
+        window.getLoaders = function() { return loaders; };
+
+        function resolveLoader(source) {
+            // Check if any registered loader claims this source
+            for (const [name, fn] of Object.entries(loaders)) {
+                if (fn.claims && fn.claims(source)) {
+                    return fn;
+                }
+            }
+            // Try scheme-based resolution
+            const match = source.match(/^([a-zA-Z][a-zA-Z0-9+.-]*):\/\//);
+            if (match && loaders[match[1]]) {
+                return loaders[match[1]];
+            }
+            if (match && loaders['*']) {
+                return loaders['*'];
+            }
+            return defaultHttpLoader;
+        }
+
+        async function loadContent(source) {
+            const loader = resolveLoader(source);
+            return await loader(source);
+        }
+
+        function renderMarkdown(text, source) {
+            currentRawText = text;
+            const html = marked.parse(text);
+            renderedContent.innerHTML = html;
+            sourceLabel.textContent = source || 'Dropped file';
+            renderOutput.classList.add('visible');
+        }
+
+        function showToast(message) {
+            toast.textContent = message;
+            toast.classList.add('visible');
+            setTimeout(() => toast.classList.remove('visible'), 2000);
+        }
+
+        function showError(message) {
+            error.textContent = message;
+            error.classList.add('visible');
+        }
+
+        function hideError() {
+            error.classList.remove('visible');
+        }
+
+        function showLoading() { loading.classList.add('visible'); }
+        function hideLoading() { loading.classList.remove('visible'); }
+        function hideResult() { renderOutput.classList.remove('visible'); }
+
+        async function handleUrl(url) {
+            if (!url) return;
+            hideError();
+            hideResult();
+            showLoading();
+
+            try {
+                const text = await loadContent(url);
+                hideLoading();
+                renderMarkdown(text, url);
+            } catch (err) {
+                hideLoading();
+                showError(`Failed to load: ${err.message}`);
+            }
+        }
+
+        function handleFile(file) {
+            hideError();
+            hideResult();
+            showLoading();
+
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                hideLoading();
+                renderMarkdown(e.target.result, file.name);
+            };
+            reader.onerror = () => {
+                hideLoading();
+                showError('Failed to read file');
+            };
+            reader.readAsText(file);
+        }
+
+        submitBtn.addEventListener('click', () => handleUrl(urlInput.value.trim()));
+        urlInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') handleUrl(urlInput.value.trim());
+        });
+
+        dropZone.addEventListener('click', () => fileInput.click());
+
+        dropZone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            dropZone.classList.add('drag-over');
+        });
+
+        dropZone.addEventListener('dragleave', () => {
+            dropZone.classList.remove('drag-over');
+        });
+
+        dropZone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            dropZone.classList.remove('drag-over');
+            const files = e.dataTransfer.files;
+            if (files.length > 0) handleFile(files[0]);
+        });
+
+        fileInput.addEventListener('change', (e) => {
+            if (e.target.files.length > 0) handleFile(e.target.files[0]);
+        });
+
+        copyMdBtn.addEventListener('click', () => {
+            navigator.clipboard.writeText(currentRawText).then(() => showToast('Copied!'));
+        });
+
+        rawBtn.addEventListener('click', () => {
+            const blob = new Blob([currentRawText], { type: 'text/markdown' });
+            const url = URL.createObjectURL(blob);
+            window.open(url, '_blank');
+        });
+
+        // Handle URL parameter: ?url=...
+        const params = new URLSearchParams(window.location.search);
+        const urlParam = params.get('url');
+        if (urlParam) {
+            urlInput.value = urlParam;
+            handleUrl(urlParam);
+        }
+    </script>
+</body>
+</html>
diff --git a/simple-markdown-render/site.json b/simple-markdown-render/site.json
new file mode 100644
index 0000000..768ca54
--- /dev/null
+++ b/simple-markdown-render/site.json
@@ -0,0 +1,3 @@
+{
+    "path":"simple-markdown-render"
+}
