mirror of
https://github.com/litruv/Docs-Viewer.git
synced 2026-07-24 02:36:07 +10:00
Add social links and user information to the sidebar; enhance document loading logic and styles
This commit is contained in:
17
docs/index.md
Normal file
17
docs/index.md
Normal file
@@ -0,0 +1,17 @@
|
||||
---
|
||||
title: Welcome
|
||||
---
|
||||
Welcome to the Documentation
|
||||
|
||||
Here you'll find documentation for various tools and projects I've created. Select a document from the sidebar to get started.
|
||||
|
||||
## Available Documentation
|
||||
|
||||
- **Blueprint Depth Trace** - A Blueprint Function Library for depth-based line traces in Unreal Engine
|
||||
- More documentation coming soon...
|
||||
|
||||
## Getting Help
|
||||
|
||||
If you need help or have questions:
|
||||
- Open an issue on [GitHub](https://github.com/Litruv)
|
||||
- Join the discussion on [Discord](https://discord.gg/b8ctQBaaax)
|
||||
22
index.html
22
index.html
@@ -6,6 +6,7 @@
|
||||
<title>Documentation Viewer</title>
|
||||
<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">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
@@ -21,6 +22,27 @@
|
||||
<div class="content-container">
|
||||
<nav class="sidebar left-sidebar">
|
||||
<div id="file-index"></div>
|
||||
<div class="subtitle">
|
||||
<span class="name">Litruv</span>
|
||||
<span class="role">Dev/Tech Artist @MatesMedia</span>
|
||||
</div>
|
||||
<div class="social-links">
|
||||
<a href="https://github.com/Litruv" target="_blank" title="GitHub - Litruv">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
<a href="https://www.youtube.com/c/Litruv" target="_blank" title="YouTube - Litruv">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
<a href="https://steamcommunity.com/id/Litruv" target="_blank" title="Steam - Litruv">
|
||||
<i class="fab fa-steam"></i>
|
||||
</a>
|
||||
<a href="https://discordapp.com/users/220772082055774210" target="_blank" title="Discord - @Litruv">
|
||||
<i class="fab fa-discord"></i>
|
||||
</a>
|
||||
<a href="https://bsky.app/profile/lit.mates.dev" target="_blank" title="Bluesky - lit.mates.dev">
|
||||
<i class="fa-brands fa-bluesky"></i>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="content">
|
||||
<div id="document-content"></div>
|
||||
|
||||
34
index.js
34
index.js
@@ -39,6 +39,7 @@ async function loadIndex() {
|
||||
|
||||
link.href = `?${fileName}`;
|
||||
link.textContent = doc.title;
|
||||
link.dataset.path = doc.path; // Add path as data attribute for comparison
|
||||
link.onclick = (e) => {
|
||||
e.preventDefault();
|
||||
loadDocument(doc.path);
|
||||
@@ -47,7 +48,7 @@ async function loadIndex() {
|
||||
fileIndex.appendChild(link);
|
||||
});
|
||||
|
||||
// Handle initial URL load
|
||||
// Handle initial URL load or load index.md by default
|
||||
const queryString = window.location.search;
|
||||
if (queryString) {
|
||||
const fileParam = queryString.substring(1); // Remove the leading '?'
|
||||
@@ -67,6 +68,12 @@ async function loadIndex() {
|
||||
} else {
|
||||
console.warn('No matching document found for:', fileParam); // Debug log
|
||||
}
|
||||
} else {
|
||||
// Load index.md by default when no document is specified
|
||||
const defaultDoc = data.documents.find(doc => doc.path === 'docs/index.md');
|
||||
if (defaultDoc) {
|
||||
await loadDocument(defaultDoc.path);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load index:', error);
|
||||
@@ -97,24 +104,27 @@ window.addEventListener('popstate', async () => {
|
||||
});
|
||||
|
||||
function extractMetadata(content) {
|
||||
const lines = content.split('\n');
|
||||
const lines = content.trim().split('\n');
|
||||
let metadata = {};
|
||||
let contentStart = 0;
|
||||
|
||||
// Check if the file starts with a metadata section
|
||||
if (lines[0] === '---') {
|
||||
// Check if the file starts with a metadata section (accounting for whitespace)
|
||||
if (lines[0].trim() === '---') {
|
||||
let endMetadata = -1;
|
||||
|
||||
// Find the closing '---'
|
||||
for (let i = 1; i < lines.length; i++) {
|
||||
if (lines[i] === '---') {
|
||||
if (lines[i].trim() === '---') {
|
||||
endMetadata = i;
|
||||
break;
|
||||
}
|
||||
// Parse key-value pairs
|
||||
const match = lines[i].match(/^([\w-]+):\s*(.*)$/);
|
||||
if (match) {
|
||||
metadata[match[1]] = match[2].trim();
|
||||
// Parse key-value pairs (ignore empty lines)
|
||||
const line = lines[i].trim();
|
||||
if (line) {
|
||||
const match = line.match(/^([\w-]+):\s*(.*)$/);
|
||||
if (match) {
|
||||
metadata[match[1]] = match[2].trim();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -123,6 +133,7 @@ function extractMetadata(content) {
|
||||
}
|
||||
}
|
||||
|
||||
// Trim any leading/trailing whitespace from the content
|
||||
return {
|
||||
metadata,
|
||||
content: lines.slice(contentStart).join('\n').trim()
|
||||
@@ -131,6 +142,11 @@ function extractMetadata(content) {
|
||||
|
||||
async function loadDocument(path) {
|
||||
try {
|
||||
// Update active state in sidebar
|
||||
document.querySelectorAll('#file-index a').forEach(link => {
|
||||
link.classList.toggle('active', link.dataset.path === path);
|
||||
});
|
||||
|
||||
const [response, marked] = await Promise.all([
|
||||
fetch(path),
|
||||
initializeMarked()
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
{
|
||||
"documents": [
|
||||
{
|
||||
"title": "Welcome",
|
||||
"path": "docs/index.md"
|
||||
},
|
||||
{
|
||||
"title": "Blueprint Depth Trace",
|
||||
"path": "docs/Blueprint Penetration Trace.md"
|
||||
|
||||
119
styles.css
119
styles.css
@@ -72,6 +72,72 @@ body {
|
||||
.left-sidebar {
|
||||
width: var(--doc-sidebar-width);
|
||||
border-right: 1px solid var(--ifm-border-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#file-index {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#file-index a {
|
||||
color: var(--ifm-color-content);
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: 0.4rem 1.2rem;
|
||||
font-size: 0.875rem;
|
||||
border-left: 2px solid transparent;
|
||||
}
|
||||
|
||||
#file-index a:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
color: var(--ifm-color-primary);
|
||||
border-left: 2px solid var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
#file-index a.active {
|
||||
color: var(--ifm-color-primary);
|
||||
background-color: rgba(33, 150, 243, 0.1);
|
||||
border-left: 2px solid var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
.social-links {
|
||||
padding: 1rem 1rem 0.5rem;
|
||||
border-top: 1px solid var(--ifm-border-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.social-links a {
|
||||
color: var(--ifm-color-content-secondary);
|
||||
font-size: 1.2rem;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.social-links a:hover {
|
||||
color: var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
padding: 0 1rem 1rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--ifm-color-content-secondary);
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.subtitle .name {
|
||||
color: var(--ifm-color-content);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.subtitle .role {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.right-sidebar {
|
||||
@@ -118,7 +184,7 @@ body {
|
||||
.markdown-content {
|
||||
line-height: 1.7;
|
||||
font-size: 1rem;
|
||||
max-width: 75ch;
|
||||
max-width: 130ch;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@@ -126,6 +192,7 @@ body {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: left; /* Explicitly set left alignment */
|
||||
}
|
||||
|
||||
.markdown-content h2 {
|
||||
@@ -133,12 +200,14 @@ body {
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown-content h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown-content a {
|
||||
@@ -161,22 +230,47 @@ body {
|
||||
}
|
||||
|
||||
.markdown-content table {
|
||||
border-collapse: collapse;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
margin: 1em 0;
|
||||
font-size: 0.9rem;
|
||||
border-color: var(--ifm-border-color);
|
||||
}
|
||||
|
||||
.markdown-content th,
|
||||
.markdown-content td {
|
||||
border: 1px solid var(--ifm-border-color);
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.markdown-content th {
|
||||
background-color: var(--ifm-background-surface-color);
|
||||
background-color: rgba(255, 255, 255, 0.15); /* Change header background to 15% white */
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--ifm-border-color);
|
||||
text-align: left; /* Add this line to left-align table headers */
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.markdown-content th:first-child {
|
||||
border-top-left-radius: 10px;
|
||||
}
|
||||
|
||||
.markdown-content th:last-child {
|
||||
border-top-right-radius: 10px;
|
||||
}
|
||||
|
||||
.markdown-content td {
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--ifm-border-color);
|
||||
padding: 0.75rem;
|
||||
background-color: rgba(255, 255, 255, 0.03); /* Lighter background for cells */
|
||||
}
|
||||
|
||||
.markdown-content tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.markdown-content tr:last-child td:first-child {
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
|
||||
.markdown-content tr:last-child td:last-child {
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
.markdown-content code:not([class*="language-"]) {
|
||||
@@ -298,6 +392,11 @@ body {
|
||||
.content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
background: var(--ifm-background-surface-color);
|
||||
border-color: var(--ifm-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.title-text {
|
||||
|
||||
Reference in New Issue
Block a user