roadmap: add roadmap page to website

[ReenigneArcher]

Is there an existing issue for this item?

• I have searched the existing issues

Repositories

LizardByte/LizardByte.github.io, LizardByte/roadmap

Languages/Skills/Technologies

JavaScript, CSS, HTML, Rest API

Description

Add a rendering of the roadmap on the website. This could be done on LizardByte.github.io or the roadmap repo directly.

Here is an AI generated preview, that can be improved upon.

---
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>

The code should be split out into html, js, and css files where appropriate. The styling should also match the main index page wherever possible.

Estimated Effort

effort:Small

Priority

priority:Low

Target Milestone

1-3 months

Dependencies

No response