mirror of
https://github.com/Mabbs/mabbs.github.io
synced 2025-07-20 02:42:02 +00:00
Update 5 files
- /.github/PULL_REQUEST_TEMPLATE.yml - /assets/js/rss-feed-preview.js - /links.md - /sitemap.xsl - /.github/PULL_REQUEST_TEMPLATE.md
This commit is contained in:
mayx
parent
e3cf4e5b9e
commit
3ef5ec378d
@ -2,235 +2,196 @@
|
|||||||
* RSS/Atom Feed Preview for Links Table
|
* RSS/Atom Feed Preview for Links Table
|
||||||
*/
|
*/
|
||||||
|
|
||||||
(function() {
|
(function () {
|
||||||
const existingPreviews = document.querySelectorAll('#rss-feed-preview');
|
if (window.rssFeedPreviewInitialized)
|
||||||
existingPreviews.forEach(el => el.remove());
|
return;
|
||||||
|
window.rssFeedPreviewInitialized = true;
|
||||||
|
|
||||||
const CORS_PROXY = 'https://cors-anywhere.mayx.eu.org/?';
|
var CORS_PROXY = 'https://cors-anywhere.mayx.eu.org/?';
|
||||||
|
|
||||||
const createPreviewElement = () => {
|
var $previewEl = $('<div>', {
|
||||||
const existingPreview = document.getElementById('rss-feed-preview');
|
id: 'rss-feed-preview'
|
||||||
if (existingPreview) {
|
}).css({
|
||||||
return existingPreview;
|
position: 'fixed',
|
||||||
}
|
display: 'none',
|
||||||
|
width: '300px',
|
||||||
|
maxHeight: '400px',
|
||||||
|
overflowY: 'auto',
|
||||||
|
backgroundColor: 'white',
|
||||||
|
border: '1px solid #ccc',
|
||||||
|
borderRadius: '5px',
|
||||||
|
padding: '10px',
|
||||||
|
fontSize: '14px',
|
||||||
|
lineHeight: '1.4',
|
||||||
|
zIndex: 1000,
|
||||||
|
boxShadow: '0 2px 10px rgba(0,0,0,0.1)'
|
||||||
|
});
|
||||||
|
|
||||||
const previewEl = document.createElement('div');
|
$('body').append($previewEl);
|
||||||
previewEl.id = 'rss-feed-preview';
|
|
||||||
previewEl.style.cssText = `
|
|
||||||
position: fixed;
|
|
||||||
display: none;
|
|
||||||
width: 300px;
|
|
||||||
max-height: 400px;
|
|
||||||
overflow-y: auto;
|
|
||||||
background-color: white;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 10px;
|
|
||||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
||||||
z-index: 1000;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.4;
|
|
||||||
`;
|
|
||||||
document.body.appendChild(previewEl);
|
|
||||||
return previewEl;
|
|
||||||
};
|
|
||||||
|
|
||||||
const parseRSS = (xmlText) => {
|
function escapeHTML(str) {
|
||||||
const parser = new DOMParser();
|
return String(str).replace(/[&<>"']/g, function (c) {
|
||||||
const xml = parser.parseFromString(xmlText, 'text/xml');
|
return {
|
||||||
|
|
||||||
const rssItems = xml.querySelectorAll('item');
|
|
||||||
if (rssItems.length > 0) {
|
|
||||||
return Array.from(rssItems).slice(0, 5).map(item => {
|
|
||||||
return {
|
|
||||||
title: item.querySelector('title')?.textContent || 'No title',
|
|
||||||
date: item.querySelector('pubDate')?.textContent || 'No date',
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const atomItems = xml.querySelectorAll('entry');
|
|
||||||
if (atomItems.length > 0) {
|
|
||||||
return Array.from(atomItems).slice(0, 5).map(item => {
|
|
||||||
return {
|
|
||||||
title: item.querySelector('title')?.textContent || 'No title',
|
|
||||||
date: item.querySelector('updated')?.textContent || 'No date',
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
const checkFeed = async (url) => {
|
|
||||||
try {
|
|
||||||
const response = await fetch(CORS_PROXY + url);
|
|
||||||
if (!response.ok) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const text = await response.text();
|
|
||||||
return parseRSS(text);
|
|
||||||
} catch (error) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const findFeedUrl = async (siteUrl, linkElement) => {
|
|
||||||
if (linkElement && linkElement.hasAttribute('data-feed')) {
|
|
||||||
const dataFeedUrl = linkElement.getAttribute('data-feed');
|
|
||||||
if (dataFeedUrl) {
|
|
||||||
const feedItems = await checkFeed(dataFeedUrl);
|
|
||||||
if (feedItems) {
|
|
||||||
return { url: dataFeedUrl, items: feedItems };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
const escapeHTML = (str) => {
|
|
||||||
return String(str).replace(/[&<>"'/]/g, (c) => ({
|
|
||||||
'&': '&',
|
'&': '&',
|
||||||
'<': '<',
|
'<': '<',
|
||||||
'>': '>',
|
'>': '>',
|
||||||
'"': '"',
|
'"': '"',
|
||||||
"'": ''',
|
"'": '''
|
||||||
'/': '/'
|
}[c];
|
||||||
}[c]));
|
});
|
||||||
};
|
}
|
||||||
|
|
||||||
const renderFeedItems = (previewEl, items, siteName) => {
|
function parseRSS(xmlText) {
|
||||||
if (!items || items.length === 0) {
|
var xml;
|
||||||
previewEl.innerHTML = '<p>No feed items found.</p>';
|
try {
|
||||||
return;
|
xml = $.parseXML(xmlText);
|
||||||
}
|
} catch (e) {
|
||||||
|
return [];
|
||||||
let html = `<h3>Latest from ${siteName}</h3><ul style="list-style: none; padding: 0; margin: 0;">`;
|
|
||||||
|
|
||||||
items.forEach(item => {
|
|
||||||
const safeTitle = escapeHTML(item.title);
|
|
||||||
const safeDate = escapeHTML(new Date(item.date).toLocaleDateString());
|
|
||||||
html += `
|
|
||||||
<li style="margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #eee;">
|
|
||||||
<div style="color: #24292e; font-weight: bold;">
|
|
||||||
${safeTitle}
|
|
||||||
</div>
|
|
||||||
<div style="color: #586069; font-size: 12px; margin: 3px 0;">
|
|
||||||
${safeDate}
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
`;
|
|
||||||
});
|
|
||||||
|
|
||||||
html += '</ul>';
|
|
||||||
previewEl.innerHTML = html;
|
|
||||||
};
|
|
||||||
|
|
||||||
const positionPreview = (previewEl, event) => {
|
|
||||||
const viewportWidth = window.innerWidth;
|
|
||||||
const viewportHeight = window.innerHeight;
|
|
||||||
|
|
||||||
let left = event.clientX + 20;
|
|
||||||
let top = event.clientY + 20;
|
|
||||||
|
|
||||||
const rect = previewEl.getBoundingClientRect();
|
|
||||||
|
|
||||||
if (left + rect.width > viewportWidth) {
|
|
||||||
left = event.clientX - rect.width - 20;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (top + rect.height > viewportHeight) {
|
|
||||||
top = event.clientY - rect.height - 20;
|
|
||||||
}
|
|
||||||
|
|
||||||
left = Math.max(10, left);
|
|
||||||
top = Math.max(10, top);
|
|
||||||
|
|
||||||
previewEl.style.left = `${left}px`;
|
|
||||||
previewEl.style.top = `${top}px`;
|
|
||||||
};
|
|
||||||
|
|
||||||
const initFeedPreview = () => {
|
|
||||||
const previewEl = createPreviewElement();
|
|
||||||
|
|
||||||
const tableLinks = document.querySelectorAll('main table tbody tr td a');
|
|
||||||
|
|
||||||
const feedCache = {};
|
|
||||||
|
|
||||||
let currentLink = null;
|
|
||||||
let loadingTimeout = null;
|
|
||||||
|
|
||||||
tableLinks.forEach(link => {
|
|
||||||
link.addEventListener('mouseenter', async (event) => {
|
|
||||||
currentLink = link;
|
|
||||||
const url = link.getAttribute('href');
|
|
||||||
const siteName = link.textContent;
|
|
||||||
|
|
||||||
previewEl.innerHTML = '<p>Checking for RSS/Atom feed...</p>';
|
|
||||||
previewEl.style.display = 'block';
|
|
||||||
positionPreview(previewEl, event);
|
|
||||||
|
|
||||||
if (loadingTimeout) {
|
|
||||||
clearTimeout(loadingTimeout);
|
|
||||||
}
|
|
||||||
|
|
||||||
loadingTimeout = setTimeout(async () => {
|
|
||||||
if (feedCache[url]) {
|
|
||||||
renderFeedItems(previewEl, feedCache[url].items, siteName);
|
|
||||||
positionPreview(previewEl, event); // Reposition after content is loaded
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const feedData = await findFeedUrl(url, link);
|
|
||||||
|
|
||||||
if (currentLink === link) {
|
|
||||||
if (feedData) {
|
|
||||||
feedCache[url] = feedData;
|
|
||||||
renderFeedItems(previewEl, feedData.items, siteName);
|
|
||||||
positionPreview(previewEl, event); // Reposition after content is loaded
|
|
||||||
} else {
|
|
||||||
previewEl.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, 300);
|
|
||||||
});
|
|
||||||
|
|
||||||
link.addEventListener('mousemove', (event) => {
|
|
||||||
if (previewEl.style.display === 'block') {
|
|
||||||
window.requestAnimationFrame(() => {
|
|
||||||
positionPreview(previewEl, event);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
link.addEventListener('mouseleave', () => {
|
|
||||||
if (loadingTimeout) {
|
|
||||||
clearTimeout(loadingTimeout);
|
|
||||||
loadingTimeout = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
currentLink = null;
|
|
||||||
previewEl.style.display = 'none';
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('click', (event) => {
|
|
||||||
if (!previewEl.contains(event.target)) {
|
|
||||||
previewEl.style.display = 'none';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!window.rssFeedPreviewInitialized) {
|
|
||||||
window.rssFeedPreviewInitialized = true;
|
|
||||||
|
|
||||||
if (document.readyState === 'loading') {
|
|
||||||
document.addEventListener('DOMContentLoaded', initFeedPreview);
|
|
||||||
} else {
|
|
||||||
initFeedPreview();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
})();
|
|
||||||
|
|
||||||
|
var $xml = $(xml);
|
||||||
|
var $items = $xml.find('item');
|
||||||
|
if (!$items.length)
|
||||||
|
$items = $xml.find('entry');
|
||||||
|
|
||||||
|
var result = [];
|
||||||
|
$items.slice(0, 5).each(function () {
|
||||||
|
var $el = $(this);
|
||||||
|
result.push({
|
||||||
|
title: $el.find('title').text() || 'No title',
|
||||||
|
date: $el.find('pubDate, updated').text() || 'No date'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkFeed(url, callback) {
|
||||||
|
$.ajax({
|
||||||
|
url: CORS_PROXY + url,
|
||||||
|
type: 'GET',
|
||||||
|
dataType: 'text',
|
||||||
|
success: function (data) {
|
||||||
|
var items = parseRSS(data);
|
||||||
|
callback(items);
|
||||||
|
},
|
||||||
|
error: function () {
|
||||||
|
callback(null);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderFeedItems(items, siteName) {
|
||||||
|
if (!items || !items.length) {
|
||||||
|
$previewEl.html('<p>No feed items found.</p>');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var html = '<h3>Latest from ' + escapeHTML(siteName) + '</h3><ul style="list-style:none; padding:0; margin:0;">';
|
||||||
|
for (var i = 0; i < items.length; i++) {
|
||||||
|
var item = items[i];
|
||||||
|
var dateStr = new Date(item.date).toLocaleDateString();
|
||||||
|
html += '<li style="margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid #eee;">' +
|
||||||
|
'<div style="color:#24292e; font-weight:bold;">' + escapeHTML(item.title) + '</div>' +
|
||||||
|
'<div style="color:#586069; font-size:12px; margin:3px 0;">' + escapeHTML(dateStr) + '</div>' +
|
||||||
|
'</li>';
|
||||||
|
}
|
||||||
|
html += '</ul>';
|
||||||
|
$previewEl.html(html);
|
||||||
|
}
|
||||||
|
|
||||||
|
function positionPreview(e) {
|
||||||
|
e = e || window.event;
|
||||||
|
|
||||||
|
var x = e.clientX;
|
||||||
|
var y = e.clientY;
|
||||||
|
|
||||||
|
var offsetWidth = $previewEl.outerWidth();
|
||||||
|
var offsetHeight = $previewEl.outerHeight();
|
||||||
|
|
||||||
|
var left = x + 20;
|
||||||
|
var top = y + 20;
|
||||||
|
|
||||||
|
if (left + offsetWidth > $(window).width()) {
|
||||||
|
left = x - offsetWidth - 20;
|
||||||
|
}
|
||||||
|
if (top + offsetHeight > $(window).height()) {
|
||||||
|
top = y - offsetHeight - 20;
|
||||||
|
}
|
||||||
|
|
||||||
|
$previewEl.css({
|
||||||
|
left: Math.max(10, left),
|
||||||
|
top: Math.max(10, top)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
var cache = {};
|
||||||
|
var currentLink = null;
|
||||||
|
var timeout = null;
|
||||||
|
|
||||||
|
$('main table tbody tr td a').each(function () {
|
||||||
|
var $link = $(this);
|
||||||
|
|
||||||
|
$link.on('mouseenter', function (e) {
|
||||||
|
currentLink = this;
|
||||||
|
var siteName = $link.text();
|
||||||
|
var url = $link.attr('data-feed');
|
||||||
|
if (!url)
|
||||||
|
return;
|
||||||
|
|
||||||
|
$previewEl.html('<p>Checking for RSS/Atom feed...</p>').show();
|
||||||
|
positionPreview(e);
|
||||||
|
|
||||||
|
if (timeout)
|
||||||
|
clearTimeout(timeout);
|
||||||
|
timeout = setTimeout(function () {
|
||||||
|
if (cache[url]) {
|
||||||
|
renderFeedItems(cache[url], siteName);
|
||||||
|
positionPreview(e);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (url) {
|
||||||
|
checkFeed(url, function (items) {
|
||||||
|
if (currentLink === $link[0] && items) {
|
||||||
|
cache[url] = items;
|
||||||
|
renderFeedItems(items, siteName);
|
||||||
|
positionPreview(e);
|
||||||
|
} else {
|
||||||
|
$previewEl.hide();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
$previewEl.hide();
|
||||||
|
}
|
||||||
|
}, 300);
|
||||||
|
});
|
||||||
|
|
||||||
|
$link.on('mousemove', function (e) {
|
||||||
|
if ($previewEl.is(':visible'))
|
||||||
|
positionPreview(e);
|
||||||
|
});
|
||||||
|
|
||||||
|
$link.on('mouseleave', function () {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
timeout = null;
|
||||||
|
currentLink = null;
|
||||||
|
$previewEl.hide();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).on('click', function (e) {
|
||||||
|
if (!$(e.target).closest('#rss-feed-preview').length) {
|
||||||
|
$previewEl.hide();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.readyState === 'complete' || document.readyState === 'interactive') {
|
||||||
|
init();
|
||||||
|
} else {
|
||||||
|
$(document).ready(init);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|||||||
2
links.md
2
links.md
@ -29,6 +29,4 @@ tags: [links]
|
|||||||
头像：<https://avatars0.githubusercontent.com/u/17966333>
|
头像：<https://avatars0.githubusercontent.com/u/17966333>
|
||||||
Logo：<https://mabbs.github.io/favicon.ico>
|
Logo：<https://mabbs.github.io/favicon.ico>
|
||||||
|
|
||||||
<!--[if !IE]> -->
|
|
||||||
<script src="/assets/js/rss-feed-preview.js"></script>
|
<script src="/assets/js/rss-feed-preview.js"></script>
|
||||||
<!-- <![endif]-->
|
|
||||||
@ -11,7 +11,7 @@ title: Sitemap
|
|||||||
<li>
|
<li>
|
||||||
<a>
|
<a>
|
||||||
<xsl:attribute name="href"><xsl:value-of select="sm:loc" /></xsl:attribute>
|
<xsl:attribute name="href"><xsl:value-of select="sm:loc" /></xsl:attribute>
|
||||||
<xsl:value-of select="sm:loc" />
|
<xsl:value-of select="sm:loc" />
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</xsl:for-each>
|
</xsl:for-each>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user