Create jina-reader.html

simonw · web-flow · commit 7acfb0dedf57 · 2024-10-14T09:24:12.000-07:00
https://gist.github.com/simonw/053b271e023ed1b834529e2fbd0efc3b
diff --git a/jina-reader.html b/jina-reader.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Jina Reader</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script>
+    <style>
+        body {
+            font-family: Helvetica, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            box-sizing: border-box;
+        }
+        h1 {
+            font-size: 24px;
+            margin-bottom: 20px;
+        }
+        #url-input, #submit-btn, #markdown-raw, #copy-btn {
+            font-size: 16px;
+            padding: 10px;
+            margin-bottom: 10px;
+            box-sizing: border-box;
+        }
+        #url-input {
+            width: 70%;
+        }
+        #submit-btn, #copy-btn {
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            cursor: pointer;
+        }
+        #submit-btn:hover, #copy-btn:hover {
+            background-color: #45a049;
+        }
+        #markdown-raw {
+            width: 100%;
+            height: 200px;
+            margin-top: 20px;
+            resize: vertical;
+        }
+        #markdown-rendered {
+            margin-top: 20px;
+            border: 1px solid #ccc;
+            padding: 10px;
+            overflow-wrap: break-word;
+        }
+        @media (min-width: 768px) {
+            #url-input {
+                width: 70%;
+                display: inline-block;
+            }
+            #submit-btn {
+                display: inline-block;
+                margin-left: 2%;
+            }
+            #copy-btn {
+                width: auto;
+            }
+        }
+    </style>
+</head>
+<body>
+    <h1>Jina Reader</h1>
+    <p>An interface for the <a href="https://jina.ai/reader/">Jina Reader API</a>.</p>
+    <input type="text" id="url-input" placeholder="Enter URL">
+    <button id="submit-btn">Submit</button>
+    <textarea id="markdown-raw" readonly></textarea>
+    <button id="copy-btn">Copy to clipboard</button>
+    <div id="markdown-rendered"></div>
+
+    <script>
+        const urlInput = document.getElementById('url-input');
+        const submitBtn = document.getElementById('submit-btn');
+        const markdownRaw = document.getElementById('markdown-raw');
+        const copyBtn = document.getElementById('copy-btn');
+        const markdownRendered = document.getElementById('markdown-rendered');
+
+        submitBtn.addEventListener('click', async () => {
+            const url = urlInput.value;
+            if (!url) return;
+
+            try {
+                const response = await fetch(`https://r.jina.ai/${url}`);
+                const markdown = await response.text();
+                markdownRaw.value = markdown;
+                markdownRendered.innerHTML = marked.parse(markdown);
+            } catch (error) {
+                console.error('Error fetching markdown:', error);
+                markdownRaw.value = 'Error fetching markdown. Please try again.';
+                markdownRendered.innerHTML = '';
+            }
+        });
+
+        copyBtn.addEventListener('click', () => {
+            markdownRaw.select();
+            document.execCommand('copy');
+            
+            const originalText = copyBtn.textContent;
+            copyBtn.textContent = 'Copied';
+            
+            setTimeout(() => {
+                copyBtn.textContent = originalText;
+            }, 1500);
+        });
+    </script>
+</body>
+</html>
