Skip to content

Instantly share code, notes, and snippets.

@simonw

simonw/jina.md Secret

Created October 14, 2024 16:19
Show Gist options
  • Save simonw/053b271e023ed1b834529e2fbd0efc3b to your computer and use it in GitHub Desktop.
Save simonw/053b271e023ed1b834529e2fbd0efc3b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jina.md

URL to Markdown Converter

human (Oct 14, 2024, 09:16 AM)

Build an artifact with no React which provides a URL box and a submit button

When a URL is submitted it hits this CORS-enabled API https://r.jina.ai/https://developers.cloudflare.com/durable-objects/api/storage-api/

That's the URL with r.jina.ai in front

This API returns plain text in markdown format

This should be shown in a textarea with a "Copy to clipboard" button which, when clicked, updates its text to "Copied" for 1.5s

The markdown itself should be rendered below the textarea using the marked library

assistant (Oct 14, 2024, 09:16 AM)

Certainly! I'll create an HTML artifact with JavaScript that fulfills your requirements. This will include a URL input box, a submit button, a textarea to display the raw markdown, a "Copy to clipboard" button, and a rendered markdown section.

URL to Markdown Viewer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL to Markdown Viewer</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        #url-input {
            width: 70%;
            padding: 5px;
        }
        #submit-btn {
            padding: 5px 10px;
        }
        #markdown-raw {
            width: 100%;
            height: 200px;
            margin-top: 20px;
        }
        #copy-btn {
            margin-top: 10px;
        }
        #markdown-rendered {
            margin-top: 20px;
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>URL to Markdown Viewer</h1>
    <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>

I've created an HTML artifact that includes all the requested functionality. Here's a breakdown of the main features:

  1. URL input box and submit button
  2. Textarea to display the raw markdown
  3. "Copy to clipboard" button that changes to "Copied" for 1.5 seconds when clicked
  4. Rendered markdown section using the marked library

The JavaScript code fetches the markdown content from the provided CORS-enabled API (https://r.jina.ai/[URL]) when the submit button is clicked. The raw markdown is displayed in the textarea, and the rendered version is shown below it.

To use this, you would need to host it on a web server or open it directly in a web browser. You can copy the entire HTML content and save it as an .html file, then open it in your browser to test it out.

Let me know if you want any modifications or have any questions about the implementation!

human (Oct 14, 2024, 09:18 AM)

Make sure all inputs have a font size of 16px, and that it looks good on mobile widths

assistant (Oct 14, 2024, 09:18 AM)

Certainly, I'll update the artifact to ensure all inputs have a font size of 16px and improve the layout for mobile devices. I'll add some responsive design elements to make it look good on various screen sizes.

URL to Markdown Viewer (Mobile-Friendly)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL to Markdown Viewer</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script>
    <style>
        body {
            font-family: Arial, 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: 100%;
        }
        #submit-btn, #copy-btn {
            width: 100%;
            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 {
                width: 28%;
                display: inline-block;
                margin-left: 2%;
            }
            #copy-btn {
                width: auto;
            }
        }
    </style>
</head>
<body>
    <h1>URL to Markdown Viewer</h1>
    <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>

I've updated the artifact with the following improvements:

  1. Set the font size to 16px for all inputs, buttons, and the textarea.
  2. Improved the layout for mobile devices:
    • On smaller screens, elements stack vertically and take full width.
    • On larger screens (min-width: 768px), the URL input and submit button are side by side.
  3. Added responsive design with a media query for screens wider than 768px.
  4. Improved overall spacing and sizing of elements for better usability on both mobile and desktop.
  5. Added box-sizing: border-box to ensure padding doesn't affect the overall width of elements.
  6. Improved button styling for better visibility and touch-friendliness on mobile devices.
  7. Made the textarea resizable vertically for better user experience.
  8. Ensured the rendered markdown content wraps properly on smaller screens.

These changes should make the interface more user-friendly on mobile devices while maintaining a good look on desktop screens. The font size of 16px for inputs will also help prevent automatic zooming on mobile devices when users focus on input fields.

Is there anything else you'd like me to adjust or improve in the design?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment