metadata-checker.html•3.35 kB
<!DOCTYPE html>
<html>
<head>
<title>Metadata Checker</title>
<style>
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; }
.container { max-width: 1200px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
h1 { color: #5277C3; margin-top: 0; }
h2 { color: #1C3E5A; margin-top: 20px; }
pre { background-color: #E6F0FA; padding: 15px; border-radius: 4px; overflow-x: auto; }
button { background-color: #5277C3; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; font-weight: 500; }
button:hover { background-color: #1C3E5A; }
.meta-list { margin-top: 10px; }
.meta-item { margin-bottom: 5px; }
</style>
</head>
<body>
<div class="container">
<h1>MCP-NixOS Metadata Checker</h1>
<button id="checkMetadata">Check Metadata</button>
<h2>General Metadata</h2>
<div id="generalMetadata" class="meta-list"></div>
<h2>Open Graph Metadata</h2>
<div id="ogMetadata" class="meta-list"></div>
<h2>Twitter Card Metadata</h2>
<div id="twitterMetadata" class="meta-list"></div>
<h2>Link Tags</h2>
<div id="linkTags" class="meta-list"></div>
</div>
<script>
document.getElementById('checkMetadata').addEventListener('click', async () => {
try {
// Fetch the page content
const response = await fetch('http://localhost:3000');
const html = await response.text();
// Create a DOM parser
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
// Extract metadata
const metaTags = doc.querySelectorAll('meta');
const linkTags = doc.querySelectorAll('link');
// Clear previous results
document.getElementById('generalMetadata').innerHTML = '';
document.getElementById('ogMetadata').innerHTML = '';
document.getElementById('twitterMetadata').innerHTML = '';
document.getElementById('linkTags').innerHTML = '';
// Process meta tags
metaTags.forEach(tag => {
const metaItem = document.createElement('div');
metaItem.className = 'meta-item';
metaItem.textContent = tag.outerHTML;
if (tag.getAttribute('property') && tag.getAttribute('property').startsWith('og:')) {
document.getElementById('ogMetadata').appendChild(metaItem);
} else if (tag.getAttribute('name') && tag.getAttribute('name').startsWith('twitter:')) {
document.getElementById('twitterMetadata').appendChild(metaItem);
} else {
document.getElementById('generalMetadata').appendChild(metaItem);
}
});
// Process link tags
linkTags.forEach(tag => {
const linkItem = document.createElement('div');
linkItem.className = 'meta-item';
linkItem.textContent = tag.outerHTML;
document.getElementById('linkTags').appendChild(linkItem);
});
} catch (error) {
console.error('Error fetching metadata:', error);
alert('Error fetching metadata. See console for details.');
}
});
</script>
</body>
</html>