deploy: 3de20dd

404.html

@@ -0,0 +1,25 @@
+---
+permalink: /404.html
+layout: default
+---
+
+<style type="text/css" media="screen">
+  .container {
+    margin: 10px auto;
+    max-width: 600px;
+    text-align: center;
+  }
+  h1 {
+    margin: 30px 0;
+    font-size: 4em;
+    line-height: 1;
+    letter-spacing: -1px;
+  }
+</style>
+
+<div class="container">
+  <h1>404</h1>
+
+  <p><strong>Page not found :(</strong></p>
+  <p>The requested page could not be found.</p>
+</div>

assets/script.js

@@ -0,0 +1,149 @@
+document.querySelectorAll('nav ul.nav-list .nav-item').forEach(item => {
+    item.addEventListener('click', function (event) {
+        const parent = item.parentElement;
+        parent.classList.toggle('active');
+        event.stopPropagation();
+    });
+});
+
+document.querySelectorAll('nav ul.nav-list a').forEach(link => {
+    link.addEventListener('click', function (event) {
+        event.preventDefault();
+        const url = link.getAttribute('href');
+        fetch(url)
+            .then(response => response.text())
+            .then(text => {
+                renderMarkdown(text, url);
+                highlightCurrentCategory(link);
+            })
+            .catch(error => console.error('Error fetching the markdown file:', error));
+    });
+});
+
+let currentLanguage = 'js'; // Default language
+
+function renderMarkdown(text, url) {
+    const container = document.getElementById('markdown-content');
+    const titleContainer = document.getElementById('document-title');
+
+    // Extract and set the document title
+    const titleMatch = text.match(/^#\s(.+)/m);
+    if (titleMatch) {
+        titleContainer.textContent = titleMatch[1];
+    } else {
+        titleContainer.textContent = 'Document';
+    }
+
+    // Process the markdown content
+    const lines = text.split('\n');
+    const finalText = [];
+    let inCodeGroup = false;
+    let groupContent = '';
+
+    lines.forEach(line => {
+        if (line.trim() === '{{group:code}}') {
+            inCodeGroup = true;
+            groupContent = '';
+        } else if (line.trim() === '{{endgroup}}') {
+            inCodeGroup = false;
+            finalText.push(renderCodeGroup(groupContent));
+        } else if (inCodeGroup) {
+            groupContent += line + '\n';
+        } else {
+            finalText.push(line);
+        }
+    });
+
+    container.innerHTML = marked.parse(finalText.join('\n'));
+
+    // Generate TOC from custom anchors
+    const tocContainer = document.querySelector('.toc');
+    tocContainer.innerHTML = '';
+    const anchorRegex = /{{anchor:([^}]+)}}/g;
+    let match;
+    while ((match = anchorRegex.exec(text)) !== null) {
+        const label = match[1].trim();
+        const anchorId = label.toLowerCase().replace(/\s+/g, '-');
+        const anchorLink = document.createElement('a');
+        anchorLink.href = `#${anchorId}`;
+        anchorLink.textContent = label;
+        anchorLink.addEventListener('click', function () {
+            document.querySelectorAll('.toc li a').forEach(a => a.classList.remove('active'));
+            anchorLink.classList.add('active');
+        });
+        const listItem = document.createElement('li');
+        listItem.appendChild(anchorLink);
+        tocContainer.appendChild(listItem);
+
+        const anchorElement = document.createElement('a');
+        anchorElement.id = anchorId;
+        container.innerHTML = container.innerHTML.replace(match[0], anchorElement.outerHTML);
+    }
+
+    // Highlight code blocks
+    document.querySelectorAll('pre code').forEach(block => {
+        hljs.highlightElement(block);
+    });
+
+    // Initialize code group visibility
+    document.querySelectorAll('.code-group').forEach(group => {
+        const selector = group.querySelector('.language-selector');
+        selector.value = currentLanguage; // Set the current global language
+        selector.addEventListener('change', function () {
+            currentLanguage = this.value; // Update the global language
+            updateCodeGroupVisibility();
+        });
+        updateCodeGroupVisibility();
+    });
+}
+
+function renderCodeGroup(groupContent) {
+    const languages = ['js', 'node', 'python'];
+    const languageOptions = languages.map(lang => `<option value="${lang}">${lang.toUpperCase()}</option>`).join('');
+    let result = `<div class="code-group"><select class="language-selector">${languageOptions}</select>\n`;
+
+    languages.forEach(lang => {
+        const regex = new RegExp(`^\\s*\\\`\\\`\\\`${lang}([\\s\\S]*?)\\\`\\\`\\\``, 'm');
+        const match = groupContent.match(regex);
+        if (match) {
+            result += `<pre><code class="language-${lang}" style="display: none;">${match[1].trim()}</code></pre>\n`;
+        }
+    });
+
+    result += `<div class="language-warning" style="display: none;"></div></div>`;
+    return result;
+}
+
+function updateCodeGroupVisibility() {
+    document.querySelectorAll('.code-group').forEach(group => {
+        const codeBlocks = group.querySelectorAll('pre code');
+        let languageFound = false;
+
+        codeBlocks.forEach(block => {
+            if (block.className.includes(`language-${currentLanguage}`)) {
+                block.style.display = 'block';
+                languageFound = true;
+            } else {
+                block.style.display = 'none';
+            }
+        });
+
+        const warning = group.querySelector('.language-warning');
+        if (languageFound) {
+            warning.style.display = 'none';
+        } else {
+            warning.style.display = 'block';
+            warning.textContent = `${currentLanguage.toUpperCase()} does not support this feature.`;
+        }
+    });
+
+    document.querySelectorAll('.language-selector').forEach(selector => {
+        selector.value = currentLanguage;
+    });
+}
+
+function highlightCurrentCategory(link) {
+    document.querySelectorAll('nav ul.nav-list > li').forEach(item => item.classList.remove('active'));
+    const parentLi = link.closest('li');
+    parentLi.classList.add('active');
+}

assets/styles.css

@@ -0,0 +1,177 @@
+body {
+    font-family: 'Raleway', sans-serif;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
+header {
+    background-color: #333;
+    color: #fff;
+    padding: 10px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+header .title {
+    display: flex;
+    align-items: center;
+}
+
+header .title img {
+    height: 40px;
+    margin-right: 10px;
+}
+
+header .categories a {
+    color: #fff;
+    margin-right: 20px;
+    text-decoration: none;
+}
+
+.container {
+    display: flex;
+    flex: 1;
+}
+
+nav {
+    width: 250px;
+    background-color: #1b1b1b;
+    color: #fff;
+    overflow-y: auto;
+    flex-shrink: 0;
+}
+
+nav ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+nav ul li {
+    padding: 10px;
+    border-bottom: 1px solid gold;
+}
+
+nav ul li a {
+    color: #fff;
+    text-decoration: none;
+}
+
+nav ul li span {
+    display: block;
+    cursor: pointer;
+}
+
+nav ul li.active > ul {
+    display: block;
+}
+
+nav ul li.active span::after {
+    content: ' ▼';
+}
+
+nav ul li span::after {
+    content: ' ▶';
+}
+
+nav ul li a:hover, nav ul li a.active {
+    color: #ffcc00;
+}
+
+nav ul li.active {
+    background-color: #ffcc00;
+    color: #000;
+}
+
+nav ul.nav-list > li.active {
+    background-color: #ff6600;
+}
+
+main {
+    flex-grow: 1;
+    padding: 20px;
+    overflow-y: auto;
+}
+
+main h2 {
+    background-color: #333;
+    color: #fff;
+    padding: 10px;
+}
+
+main .content-body {
+    background-color: #f1f1f1;
+    padding: 20px;
+}
+
+main .breadcrumb {
+    margin-bottom: 10px;
+}
+
+main .code-block {
+    background-color: #333;
+    color: #fff;
+    padding: 10px;
+    margin-top: 10px;
+    font-family: 'Roboto Mono', monospace;
+}
+
+footer {
+    background-color: #333;
+    color: #fff;
+    padding: 10px 20px;
+    text-align: center;
+}
+
+footer a {
+    color: #ffcc00;
+    text-decoration: none;
+}
+
+.language-selector {
+    margin-bottom: 10px;
+}
+
+.code-container {
+    margin-bottom: 20px;
+}
+
+.warning {
+    background-color: #f8d7da;
+    padding: 10px;
+    border-left: 5px solid #f5c2c7;
+}
+
+.note {
+    background-color: #d1ecf1;
+    padding: 10px;
+    border-left: 5px solid #bee5eb;
+}
+
+.toc {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.toc li {
+    padding: 5px 10px;
+}
+
+.toc li a {
+    color: #fff;
+    text-decoration: none;
+}
+
+.toc li a:hover, .toc li a.active {
+    color: #ffcc00;
+}
+
+.toc li a.active {
+    background-color: #ffcc00;
+    color: #000;
+}