chore: updated method for tagging on links
88a3b8f7
1 file(s) · +34 −17
| 46 | 46 | </svg> |
|
| 47 | 47 | Back |
|
| 48 | 48 | </a> |
|
| 49 | - | <img src="/feeds.svg" alt="Feeds" id="feeds" class="w-5/6 mx-auto py-4" /> |
|
| 49 | + | <img src="https://blogfeeds.net/feeds.svg" alt="Feeds" id="feeds" class="w-5/6 mx-auto py-4" /> |
|
| 50 | 50 | <p class="text-gray-700 mb-6">To help foster a community around the concept of Blog Feeds, this page acts as an aggregator of thsoe who have a feeds page on their blog. If that's you and you don't see your blog below, then submit the RSS feed below and we'll review it regularly to add it!</p> |
|
| 51 | 51 | ||
| 52 | 52 | <form id="feedForm" class="space-y-4"> |
|
| 91 | 91 | const response = await fetch('https://api.blogfeeds.net'); |
|
| 92 | 92 | const data = await response.json(); |
|
| 93 | 93 | ||
| 94 | + | // If you're reading this, ignore this section 🙄 |
|
| 94 | 95 | if (data.subscriptions && data.subscriptions.length > 0) { |
|
| 95 | - | feedsList.innerHTML = data.subscriptions.map(feed => { |
|
| 96 | - | const blogUrl = new URL(feed.htmlUrl); |
|
| 97 | - | const rootUrl = `${blogUrl.protocol}//${blogUrl.host}`; |
|
| 96 | + | feedsList.innerHTML = ''; |
|
| 97 | + | ||
| 98 | + | data.subscriptions.forEach(feed => { |
|
| 99 | + | const feedCard = document.createElement('div'); |
|
| 100 | + | feedCard.className = 'p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors'; |
|
| 101 | + | ||
| 102 | + | const titleContainer = document.createElement('h3'); |
|
| 103 | + | titleContainer.className = 'font-semibold text-lg mb-1'; |
|
| 104 | + | ||
| 105 | + | const titleLink = document.createElement('a'); |
|
| 106 | + | titleLink.href = feed.htmlUrl; |
|
| 107 | + | titleLink.target = '_blank'; |
|
| 108 | + | titleLink.rel = 'noopener noreferrer'; |
|
| 109 | + | titleLink.className = 'hover:text-blue-600 transition-colors'; |
|
| 110 | + | titleLink.textContent = feed.title; |
|
| 98 | 111 | ||
| 99 | - | return ` |
|
| 100 | - | <div class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"> |
|
| 101 | - | <h3 class="font-semibold text-lg mb-1"> |
|
| 102 | - | <a href="${rootUrl}" target="_blank" class="hover:text-blue-600 transition-colors">${feed.title}</a> |
|
| 103 | - | </h3> |
|
| 104 | - | <a href="${feed.url}" target="_blank" class="text-sm text-gray-600 hover:text-blue-600 transition-colors break-all inline-flex items-center gap-2"> |
|
| 105 | - | <svg class="w-3 h-3 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"> |
|
| 106 | - | <path d="M6.503 20.752c0 1.794-1.456 3.248-3.251 3.248-1.796 0-3.252-1.454-3.252-3.248 0-1.794 1.456-3.248 3.252-3.248 1.795.001 3.251 1.454 3.251 3.248zm-6.503-12.572v4.811c6.05.062 10.96 4.966 11.022 11.009h4.817c-.062-8.71-7.118-15.758-15.839-15.82zm0-3.368c10.58.046 19.152 8.594 19.183 19.188h4.817c-.03-13.231-10.755-23.954-24-24v4.812z"/> |
|
| 107 | - | </svg> |
|
| 108 | - | ${feed.url} |
|
| 109 | - | </a> |
|
| 110 | - | </div> |
|
| 112 | + | // Yes I have to do it this way but I'm not going to explain why. You're just gonna have to trust me on this one. |
|
| 113 | + | const urlLink = document.createElement('a'); |
|
| 114 | + | urlLink.href = feed.url; |
|
| 115 | + | urlLink.target = '_blank'; |
|
| 116 | + | urlLink.rel = 'noopener noreferrer'; |
|
| 117 | + | urlLink.className = 'text-sm text-gray-600 hover:text-blue-600 transition-colors break-all inline-flex items-center gap-2'; |
|
| 118 | + | urlLink.innerHTML = ` |
|
| 119 | + | <svg class="w-3 h-3 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"> |
|
| 120 | + | <path d="M6.503 20.752c0 1.794-1.456 3.248-3.251 3.248-1.796 0-3.252-1.454-3.252-3.248 0-1.794 1.456-3.248 3.252-3.248 1.795.001 3.251 1.454 3.251 3.248zm-6.503-12.572v4.811c6.05.062 10.96 4.966 11.022 11.009h4.817c-.062-8.71-7.118-15.758-15.839-15.82zm0-3.368c10.58.046 19.152 8.594 19.183 19.188h4.817c-.03-13.231-10.755-23.954-24-24v4.812z"/> |
|
| 121 | + | </svg> |
|
| 122 | + | ${feed.url} |
|
| 111 | 123 | `; |
|
| 112 | - | }).join(''); |
|
| 124 | + | ||
| 125 | + | titleContainer.appendChild(titleLink); |
|
| 126 | + | feedCard.appendChild(titleContainer); |
|
| 127 | + | feedCard.appendChild(urlLink); |
|
| 128 | + | feedsList.appendChild(feedCard); |
|
| 129 | + | }); |
|
| 113 | 130 | } else { |
|
| 114 | 131 | feedsList.innerHTML = '<div class="text-center py-8 text-gray-500">No feeds available yet.</div>'; |
|
| 115 | 132 | } |
|