Educative Threads



Educational Links

Educational Links Hub

Enter URL (Twitter thread or long-form article):Title (optional):Select Link Type: Twitter Thread Long Form Article Add Link

<script>
    const addButton = document.getElementById('add-link-button');
    const linksContainer = document.getElementById('links-container');

    // Function to create a Twitter embed
    function createTwitterEmbed(url, title) {
        const container = document.createElement('div');
        container.classList.add('link-item');

        const linkTitle = document.createElement('div');
        linkTitle.className = 'link-title';
        linkTitle.textContent = title || 'Twitter Thread';
        container.appendChild(linkTitle);

        const linkType = document.createElement('div');
        linkType.className = 'link-type';
        linkType.textContent = 'Twitter Thread';
        container.appendChild(linkType);

        const embedContainer = document.createElement('div');
        embedContainer.className = 'embed-container twitter-thread';

        // Create blockquote for Twitter embed
        const blockquote = document.createElement('blockquote');
        blockquote.className = 'twitter-tweet';
        blockquote.setAttribute('data-dnt', 'true');

        const a = document.createElement('a');
        a.href = url;
        blockquote.appendChild(a);

        embedContainer.appendChild(blockquote);
        container.appendChild(embedContainer);

        // Twitter widgets script to render the embed
        if (window.twttr && window.twttr.widgets) {
            window.twttr.widgets.load(embedContainer);
        } else {
            // Load Twitter widgets.js if not loaded yet
            const script = document.createElement('script');
            script.setAttribute('src', 'https://platform.twitter.com/widgets.js');
            script.setAttribute('async', '');
            script.onload = () => {
                window.twttr.widgets.load(embedContainer);
            };
            document.body.appendChild(script);
        }

        return container;
    }

    // Function to create an article embed (simple link preview)
    function createArticleEmbed(url, title) {
        const container = document.createElement('div');
        container.classList.add('link-item');

        const linkTitle = document.createElement('a');
        linkTitle.className = 'link-title';
        linkTitle.href = url;
        linkTitle.target = '_blank';
        linkTitle.rel = 'noopener noreferrer';
        linkTitle.textContent = title || url;
        container.appendChild(linkTitle);

        const linkType = document.createElement('div');
        linkType.className = 'link-type';
        linkType.textContent = 'Long Form Article';
        container.appendChild(linkType);

        // For simplicity, just display a clickable card with link
        return container;
    }

    addButton.addEventListener('click', () => {
        const urlInput = document.getElementById('link-url');
        const titleInput = document.getElementById('link-title');
        const typeSelect = document.getElementById('link-type');

        const url = urlInput.value.trim();
        const title = titleInput.value.trim();
        const type = typeSelect.value;

        if (!url) {
            alert('Please enter a URL');
            return;
        }

        // Basic URL validation
        try {
            new URL(url);
        } catch {
            alert('Please enter a valid URL');
            return;
        }

        let linkElement;
        if (type === 'twitter') {
            // Validate Twitter URL pattern for a tweet
            if (!url.match(/^https:\/\/twitter\.com\/.*\/status\/\d+/)) {
                alert('Please enter a valid Twitter thread URL (tweet URL)');
                return;
            }
            linkElement = createTwitterEmbed(url, title);
        } else {
            linkElement = createArticleEmbed(url, title);
        }

        linksContainer.appendChild(linkElement);

        // Clear inputs
        urlInput.value = '';
        titleInput.value = '';
    });
</script>



Educational Links

Educational Links Hub

Enter URL (Twitter thread or long-form article):Title (optional):Select Link Type: Twitter Thread Long Form Article Add Link

<script>
    const addButton = document.getElementById('add-link-button');
    const linksContainer = document.getElementById('links-container');

    // Function to create a Twitter embed
    function createTwitterEmbed(url, title) {
        const container = document.createElement('div');
        container.classList.add('link-item');

        const linkTitle = document.createElement('div');
        linkTitle.className = 'link-title';
        linkTitle.textContent = title || 'Twitter Thread';
        container.appendChild(linkTitle);

        const linkType = document.createElement('div');
        linkType.className = 'link-type';
        linkType.textContent = 'Twitter Thread';
        container.appendChild(linkType);

        const embedContainer = document.createElement('div');
        embedContainer.className = 'embed-container twitter-thread';

        // Create blockquote for Twitter embed
        const blockquote = document.createElement('blockquote');
        blockquote.className = 'twitter-tweet';
        blockquote.setAttribute('data-dnt', 'true');

        const a = document.createElement('a');
        a.href = url;
        blockquote.appendChild(a);

        embedContainer.appendChild(blockquote);
        container.appendChild(embedContainer);

        // Twitter widgets script to render the embed
        if (window.twttr && window.twttr.widgets) {
            window.twttr.widgets.load(embedContainer);
        } else {
            // Load Twitter widgets.js if not loaded yet
            const script = document.createElement('script');
            script.setAttribute('src', 'https://platform.twitter.com/widgets.js');
            script.setAttribute('async', '');
            script.onload = () => {
                window.twttr.widgets.load(embedContainer);
            };
            document.body.appendChild(script);
        }

        return container;
    }

    // Function to create an article embed (simple link preview)
    function createArticleEmbed(url, title) {
        const container = document.createElement('div');
        container.classList.add('link-item');

        const linkTitle = document.createElement('a');
        linkTitle.className = 'link-title';
        linkTitle.href = url;
        linkTitle.target = '_blank';
        linkTitle.rel = 'noopener noreferrer';
        linkTitle.textContent = title || url;
        container.appendChild(linkTitle);

        const linkType = document.createElement('div');
        linkType.className = 'link-type';
        linkType.textContent = 'Long Form Article';
        container.appendChild(linkType);

        // For simplicity, just display a clickable card with link
        return container;
    }

    addButton.addEventListener('click', () => {
        const urlInput = document.getElementById('link-url');
        const titleInput = document.getElementById('link-title');
        const typeSelect = document.getElementById('link-type');

        const url = urlInput.value.trim();
        const title = titleInput.value.trim();
        const type = typeSelect.value;

        if (!url) {
            alert('Please enter a URL');
            return;
        }

        // Basic URL validation
        try {
            new URL(url);
        } catch {
            alert('Please enter a valid URL');
            return;
        }

        let linkElement;
        if (type === 'twitter') {
            // Validate Twitter URL pattern for a tweet
            if (!url.match(/^https:\/\/twitter\.com\/.*\/status\/\d+/)) {
                alert('Please enter a valid Twitter thread URL (tweet URL)');
                return;
            }
            linkElement = createTwitterEmbed(url, title);
        } else {
            linkElement = createArticleEmbed(url, title);
        }

        linksContainer.appendChild(linkElement);

        // Clear inputs
        urlInput.value = '';
        titleInput.value = '';
    });
</script>