rp-markdown-docs
Version:
A modern, beautiful documentation generator that converts markdown files into interactive HTML documentation sites
85 lines (73 loc) • 2.58 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{TITLE}}</title>
<meta name="description" content="{{DESCRIPTION}}">
<base href="{{BASE_URL}}">
<!-- Preload critical resources -->
<link rel="preload" href="{{BASE_URL}}assets/app.css" as="style">
<link rel="preload" href="{{BASE_URL}}assets/app.js" as="script">
<!-- Stylesheets -->
<link rel="stylesheet" href="{{BASE_URL}}assets/app.css">
<link rel="stylesheet" href="{{BASE_URL}}assets/prism.css">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="{{BASE_URL}}assets/favicon.svg">
<!-- Meta tags for SEO -->
<meta property="og:title" content="{{TITLE}}">
<meta property="og:description" content="{{DESCRIPTION}}">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<!-- Theme color -->
<meta name="theme-color" content="#8B5CF6">
<style>
/* Critical CSS for initial render - Dark Fantasy Theme */
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #0F0F23;
color: #E0E7FF;
}
.loading {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
flex-direction: column;
background: linear-gradient(135deg, #0F0F23 0%, #1E1E3F 100%);
}
.spinner {
width: 40px;
height: 40px;
border: 3px solid #3730A3;
border-top: 3px solid #8B5CF6;
border-radius: 50%;
animation: spin 1s linear infinite;
box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.dark {
background: #0F0F23;
color: #E0E7FF;
}
</style>
</head>
<body>
<div id="root">
<div class="loading">
<div class="spinner"></div>
<p style="margin-top: 1rem; color: #737373;">Loading documentation...</p>
</div>
</div>
<!-- Configuration -->
<script>
window.__DOCS_CONFIG__ = {{CONFIG}};
</script>
<!-- Application -->
<script src="{{BASE_URL}}assets/app.js"></script>
</body>
</html>