Enhance documentation viewer with code highlighting and update metadata handling

This commit is contained in:
2025-02-04 14:50:29 +11:00
parent 36333e8821
commit 2d640e5248
7 changed files with 150 additions and 70 deletions

View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>Documentation Viewer</title>
<title>Litruv</title>
<meta name="description" content="Documentation for Litruv's tools and projects">
<meta property="og:type" content="article">
@@ -12,44 +12,10 @@
<meta name="twitter:card" content="summary">
<meta name="twitter:description" content="Documentation for Litruv's tools and projects">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-tomorrow.min.css">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css">
<script>
function getRandomString(length) {
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let result = '';
for (let i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * characters.length));
}
return result;
}
function addRandomMetaTags() {
const ogTitle = document.createElement('meta');
ogTitle.setAttribute('property', 'og:title');
ogTitle.content = getRandomString(10);
document.head.appendChild(ogTitle);
const ogImage = document.createElement('meta');
ogImage.setAttribute('property', 'og:image');
ogImage.content = `https://example.com/${getRandomString(10)}.jpg`;
document.head.appendChild(ogImage);
const twitterTitle = document.createElement('meta');
twitterTitle.setAttribute('name', 'twitter:title');
twitterTitle.content = getRandomString(10);
document.head.appendChild(twitterTitle);
const twitterImage = document.createElement('meta');
twitterImage.setAttribute('name', 'twitter:image');
twitterImage.content = `https://example.com/${getRandomString(10)}.jpg`;
document.head.appendChild(twitterImage);
}
document.addEventListener('DOMContentLoaded', addRandomMetaTags);
</script>
</head>
<body>
<div class="container">
@@ -103,17 +69,10 @@
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/marked@4.3.0/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>
window.addEventListener('error', function(e) {
if (e.target.src && e.target.src.includes('marked.min.js')) {
const script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js';
document.body.appendChild(script);
}
}, true);
hljs.highlightAll();
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/autoloader/prism-autoloader.min.js"></script>
<script src="index.js"></script>
</body>
</html>