feat(pages): add roadmap page

Author: ReenigneArcher

roadmap.html

@@ -0,0 +1,173 @@
+---
+title: Roadmap
+layout: page
+full-width: true
+---
+
+<div class="roadmap-container">
+    <h1>LizardByte Roadmap</h1>
+    <div id="issues-container">
+        <p>Loading roadmap items...</p>
+    </div>
+</div>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const issuesContainer = document.getElementById('issues-container');
+
+        // GitHub API endpoint for your repository's issues
+        const apiUrl = 'https://api.github.com/repos/LizardByte/roadmap/issues?state=open&labels=planned&per_page=100';
+
+        fetch(apiUrl)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                return response.json();
+            })
+            .then(issues => {
+                if (issues.length === 0) {
+                    issuesContainer.innerHTML = '<p>No roadmap items found.</p>';
+                    return;
+                }
+
+                // Clear loading message
+                issuesContainer.innerHTML = '';
+
+                // Create issues list
+                const issuesList = document.createElement('div');
+                issuesList.className = 'issues-list';
+
+                issues.forEach(issue => {
+                    const issueEl = document.createElement('div');
+                    issueEl.className = 'issue-card';
+
+                    // Issue title with link
+                    const titleEl = document.createElement('h3');
+                    const titleLink = document.createElement('a');
+                    titleLink.href = issue.html_url;
+                    titleLink.textContent = issue.title;
+                    titleLink.target = '_blank';
+                    titleEl.appendChild(titleLink);
+
+                    // Issue metadata
+                    const metaEl = document.createElement('div');
+                    metaEl.className = 'issue-meta';
+
+                    // Issue number
+                    const numberEl = document.createElement('span');
+                    numberEl.className = 'issue-number';
+                    numberEl.textContent = `#${issue.number}`;
+
+                    // Issue date
+                    const dateEl = document.createElement('span');
+                    dateEl.className = 'issue-date';
+                    const createdDate = new Date(issue.created_at);
+                    dateEl.textContent = createdDate.toLocaleDateString();
+
+                    metaEl.appendChild(numberEl);
+                    metaEl.appendChild(dateEl);
+
+                    // Labels
+                    const labelsEl = document.createElement('div');
+                    labelsEl.className = 'issue-labels';
+
+                    issue.labels.forEach(label => {
+                        const labelEl = document.createElement('span');
+                        labelEl.className = 'issue-label';
+                        labelEl.textContent = label.name;
+                        labelEl.style.backgroundColor = `#${label.color}`;
+
+                        // Determine if label text should be dark or light based on background
+                        const r = parseInt(label.color.substring(0, 2), 16);
+                        const g = parseInt(label.color.substring(2, 4), 16);
+                        const b = parseInt(label.color.substring(4, 6), 16);
+                        const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+                        labelEl.style.color = brightness > 125 ? '#000' : '#fff';
+
+                        labelsEl.appendChild(labelEl);
+                    });
+
+                    // Issue body (truncated)
+                    const bodyEl = document.createElement('div');
+                    bodyEl.className = 'issue-body';
+                    bodyEl.textContent = issue.body ? issue.body.substring(0, 200) + (issue.body.length > 200 ? '...' : '') : '';
+
+                    // Add all elements to the issue card
+                    issueEl.appendChild(titleEl);
+                    issueEl.appendChild(metaEl);
+                    issueEl.appendChild(labelsEl);
+                    issueEl.appendChild(bodyEl);
+
+                    issuesList.appendChild(issueEl);
+                });
+
+                issuesContainer.appendChild(issuesList);
+            })
+            .catch(error => {
+                issuesContainer.innerHTML = `<p>Error loading roadmap items: ${error.message}</p>`;
+            });
+    });
+</script>
+
+<style>
+    .roadmap-container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 20px;
+    }
+
+    .issues-list {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+        gap: 20px;
+        margin-top: 20px;
+    }
+
+    .issue-card {
+        border: 1px solid #e1e4e8;
+        border-radius: 6px;
+        padding: 16px;
+        background-color: #fff;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.12);
+        transition: transform 0.2s, box-shadow 0.2s;
+    }
+
+    .issue-card:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 4px 6px rgba(0,0,0,0.16);
+    }
+
+    .issue-card h3 {
+        margin-top: 0;
+        margin-bottom: 10px;
+    }
+
+    .issue-meta {
+        display: flex;
+        justify-content: space-between;
+        font-size: 14px;
+        color: #586069;
+        margin-bottom: 10px;
+    }
+
+    .issue-labels {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+        margin-bottom: 10px;
+    }
+
+    .issue-label {
+        padding: 2px 8px;
+        border-radius: 12px;
+        font-size: 12px;
+        font-weight: 500;
+    }
+
+    .issue-body {
+        font-size: 14px;
+        color: #24292e;
+        line-height: 1.5;
+    }
+</style>