@knowcode/doc-builder
Version:
Reusable documentation builder for markdown-based sites with Vercel deployment support
115 lines (108 loc) • 3.84 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Not Found - Redirecting...</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #f7f7f5;
color: #37352f;
}
.container {
text-align: center;
padding: 2rem;
max-width: 600px;
}
h1 {
font-size: 3rem;
margin: 0 0 1rem 0;
color: #37352f;
}
p {
font-size: 1.125rem;
line-height: 1.6;
color: #6b6b6b;
margin: 0 0 2rem 0;
}
a {
color: #0366d6;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.emoji {
font-size: 4rem;
margin-bottom: 1rem;
}
.loading {
display: none;
color: #0366d6;
margin-top: 1rem;
}
.redirect-message {
display: none;
background-color: #e8f4fd;
border: 1px solid #c3e0f7;
padding: 1rem;
border-radius: 8px;
margin-top: 1rem;
}
</style>
</head>
<body>
<div class="container">
<div class="emoji">🔍</div>
<h1>404</h1>
<p id="message">The page you're looking for doesn't exist.</p>
<div id="redirect-message" class="redirect-message">
Redirecting to the correct page...
</div>
<p id="loading" class="loading">Redirecting...</p>
<p>
<a href="/" id="home-link">Go to Home</a>
</p>
</div>
<script>
// Check if the URL ends with .md
const pathname = window.location.pathname;
if (pathname.endsWith('.md')) {
// Convert .md to .html
const htmlPath = pathname.replace(/\.md$/, '.html');
// Show redirect message
document.getElementById('message').textContent = 'Found a markdown link. Redirecting to the HTML version...';
document.getElementById('redirect-message').style.display = 'block';
document.getElementById('loading').style.display = 'block';
// Redirect after a brief delay to show the message
setTimeout(() => {
window.location.replace(htmlPath);
}, 500);
} else {
// For true 404s, show the standard message
document.getElementById('message').textContent = "The page you're looking for doesn't exist.";
// Also check if we can suggest a similar page
// Remove common suffixes and try to find a match
const basePath = pathname
.replace(/\.(html|htm|php|asp|aspx)$/, '')
.replace(/\/$/, '');
if (basePath && basePath !== pathname) {
document.getElementById('message').innerHTML =
`The page you're looking for doesn't exist.<br>
<small>Did you mean <a href="${basePath}.html">${basePath}.html</a>?</small>`;
}
}
// Update home link to use the correct base URL
const baseUrl = window.location.origin;
document.getElementById('home-link').href = baseUrl;
</script>
</body>
</html>