From 4b77d240e4e5ec691b82ff4455c3e8692fa5b7c4 Mon Sep 17 00:00:00 2001 From: Max Litruv Boonzaayer Date: Wed, 29 Jan 2025 11:57:10 +1100 Subject: [PATCH] Add social links and user information to the sidebar; enhance document loading logic and styles --- docs/index.md | 17 ++++++++ index.html | 22 ++++++++++ index.js | 34 +++++++++++---- index.json | 4 ++ styles.css | 119 +++++++++++++++++++++++++++++++++++++++++++++----- 5 files changed, 177 insertions(+), 19 deletions(-) create mode 100644 docs/index.md diff --git a/docs/index.md b/docs/index.md new file mode 100644 index 0000000..4cdfb87 --- /dev/null +++ b/docs/index.md @@ -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) diff --git a/index.html b/index.html index 66f033b..cd61ab6 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ Documentation Viewer +
@@ -21,6 +22,27 @@
diff --git a/index.js b/index.js index a0c28e2..7df66f3 100644 --- a/index.js +++ b/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() diff --git a/index.json b/index.json index 6e300cd..44f1d95 100644 --- a/index.json +++ b/index.json @@ -1,5 +1,9 @@ { "documents": [ + { + "title": "Welcome", + "path": "docs/index.md" + }, { "title": "Blueprint Depth Trace", "path": "docs/Blueprint Penetration Trace.md" diff --git a/styles.css b/styles.css index 685098b..adf7560 100644 --- a/styles.css +++ b/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 {