diff --git a/404.html b/404.html index a3cf1b6f..06dd8cef 100644 --- a/404.html +++ b/404.html @@ -183,6 +183,7 @@
Contributing + Roadmap Dashboard Dev Status
diff --git a/assets/css/styles.css b/assets/css/styles.css index e16a6104..bc1e0749 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -1 +1 @@ -.admonition{margin:1.5625em 0;overflow:hidden;color:var(--text-col);page-break-inside:avoid;background-color:var(--navbar-col);border-left:0.3rem solid #fc0;border-radius:.1rem}.admonition p{padding:0 1rem}.admonition .admonition-title{color:var(--text-col);background-color:rgba(142,113,0,0.4);font-weight:700;line-height:3rem}.admonition-title::before{margin-right:.5rem;width:1.2rem;height:1.2rem;display:inline-block;content:'';-webkit-mask-size:cover;mask-size:cover;background-color:#fc0;vertical-align:text-bottom}.admonition.attention{border-left-color:#ff5252}.admonition.attention .admonition-title{background-color:#564444}.admonition.attention .admonition-title::before{-webkit-mask:url("/assets/img/icons/exclamation-triangle-solid.svg") no-repeat 50% 50%;mask:url("/assets/img/icons/exclamation-triangle-solid.svg") no-repeat 50% 50%;background-color:#ff5252}.admonition.caution{border-left-color:#ff9100}.admonition.caution .admonition-title{background-color:#564b3c}.admonition.caution .admonition-title::before{-webkit-mask:url("/assets/img/icons/bolt-solid.svg") no-repeat 50% 50%;mask:url("/assets/img/icons/bolt-solid.svg") no-repeat 50% 50%;background-color:#ff9100}.admonition.danger{border-left-color:#ff5252}.admonition.danger .admonition-title{background-color:#564444}.admonition.danger .admonition-title::before{-webkit-mask:url("/assets/img/icons/bolt-solid.svg") no-repeat 50% 50%;mask:url("/assets/img/icons/bolt-solid.svg") no-repeat 50% 50%;background-color:#ff5252}.admonition.error{border-left-color:#ff5252}.admonition.error .admonition-title{background-color:#564444}.admonition.error .admonition-title::before{-webkit-mask:url("/assets/img/icons/times-circle-solid.svg") no-repeat 50% 50%;mask:url("/assets/img/icons/times-circle-solid.svg") no-repeat 50% 50%;background-color:#ff5252}.admonition.hint{border-left-color:#00c953}.admonition.hint .admonition-title{background-color:#294040}.admonition.hint .admonition-title::before{-webkit-mask:url("/assets/img/icons/question-circle-solid.svg") no-repeat 50% 50%;mask:url("/assets/img/icons/question-circle-solid.svg") no-repeat 50% 50%;background-color:#00c953}.admonition.important{border-left-color:#ff9100}.admonition.important .admonition-title{background-color:#433a38}.admonition.important .admonition-title::before{-webkit-mask:url("/assets/img/icons/fire-solid.svg") no-repeat 50% 50%;mask:url("/assets/img/icons/fire-solid.svg") no-repeat 50% 50%;background-color:#ff9100}.admonition.note{border-left-color:#00b0ff}.admonition.note .admonition-title{background-color:#293d52}.admonition.note .admonition-title::before{-webkit-mask:url("/assets/img/icons/pen-solid.svg") no-repeat 50% 50%;mask:url("/assets/img/icons/pen-solid.svg") no-repeat 50% 50%;background-color:#00b0ff}.admonition.seealso{border-left-color:#00b0ff}.admonition.seealso .admonition-title{background-color:#293d52}.admonition.seealso .admonition-title::before{-webkit-mask:url("/assets/img/icons/info-circle-solid.svg") no-repeat 50% 50%;mask:url("/assets/img/icons/info-circle-solid.svg") no-repeat 50% 50%;background-color:#00b0ff}.admonition.tip{border-left-color:#00c953}.admonition.tip .admonition-title{background-color:#294040}.admonition.tip .admonition-title::before{-webkit-mask:url("/assets/img/icons/info-circle-solid.svg") no-repeat 50% 50%;mask:url("/assets/img/icons/info-circle-solid.svg") no-repeat 50% 50%;background-color:#00c953}.admonition.todo .admonition-title::before{-webkit-mask:url("/assets/img/icons/pen-solid.svg") no-repeat 50% 50%;mask:url("/assets/img/icons/pen-solid.svg") no-repeat 50% 50%}.admonition.warning{border-left-color:#ff9100}.admonition.warning .admonition-title{background-color:#564b3c}.admonition.warning .admonition-title::before{-webkit-mask:url("/assets/img/icons/exclamation-triangle-solid.svg") no-repeat 50% 50%;mask:url("/assets/img/icons/exclamation-triangle-solid.svg") no-repeat 50% 50%;background-color:#ff9100}body{font-family:'Open Sans', sans-serif}.box-error,.box-note,.box-warning{color:#18191a}.avatar-img{background-color:var(--navbar-col);border:.05rem;border-color:var(--navbar-border-col);border-style:solid}.card-body,.card-custom,.card-footer,.card-img-top,.cr-picker-button,.cr-picker-submenu{--bs-bg-opacity: 1;background-color:var(--navbar-col) !important}code{color:var(--mid-col);background-color:var(--navbar-col)}.feature{display:inline-flex;align-items:center;justify-content:center;height:3rem;width:3rem;font-size:1.5rem}.widgetbot{display:flex;align-items:center;justify-content:space-around}.pagination .page-item .page-link{background-color:#111111;color:#e4e4e4}.navbar-custom.top-nav-short .avatar-container{width:3.125rem;opacity:1 !important;visibility:visible !important;transition:none !important;-webkit-transition:none !important;-moz-transition:none !important}#nav-search-link{display:none}.hover-zoom{overflow:hidden}.hover-zoom img{transition:all 1.5s ease}.hover-zoom:hover img{transform:scale(1.1)}.icon img,img.icon{max-width:none;height:2.25em}.icon-sm img,img.icon-sm{max-width:none;height:1.25em}.icon-lg img,img.icon-lg{max-width:none;height:3.25em}img.invert{filter:invert(1)}.btn:hover img.invert{filter:invert(0)}.highlight{border-radius:0.5rem}.highlight>pre{border-left:0.4375rem solid var(--text-col)}.highlight pre.lineno{border-right:2px solid var(--text-col)}.admonition .highlight{margin-left:0.5rem;margin-right:1.25rem}.admonition .highlight>pre{border-radius:0.5rem}.tabs{background-color:var(--footer-col);padding:1rem}.tabs .nav-link{color:var(--link-col)}.tabs .nav-link:hover{color:var(--hover-col)}.tabs .nav-link.active{color:var(--text-col);border-color:var(--text-col)}.tab-content{background-color:var(--navbar-col);padding:1rem;margin-top:1rem;border:1px solid var(--page-col);border-radius:0.5rem}table tr:nth-child(2n){background-color:var(--footer-col)} +.admonition{margin:1.5625em 0;overflow:hidden;color:var(--text-col);page-break-inside:avoid;background-color:var(--navbar-col);border-left:0.3rem solid #fc0;border-radius:.1rem}.admonition p{padding:0 1rem}.admonition .admonition-title{color:var(--text-col);background-color:rgba(142,113,0,0.4);font-weight:700;line-height:3rem}.admonition-title::before{margin-right:.5rem;width:1.2rem;height:1.2rem;display:inline-block;content:'';-webkit-mask-size:cover;mask-size:cover;background-color:#fc0;vertical-align:text-bottom}.admonition.attention{border-left-color:#ff5252}.admonition.attention .admonition-title{background-color:#564444}.admonition.attention .admonition-title::before{-webkit-mask:url("/assets/img/icons/exclamation-triangle-solid.svg") no-repeat 50% 50%;mask:url("/assets/img/icons/exclamation-triangle-solid.svg") no-repeat 50% 50%;background-color:#ff5252}.admonition.caution{border-left-color:#ff9100}.admonition.caution .admonition-title{background-color:#564b3c}.admonition.caution .admonition-title::before{-webkit-mask:url("/assets/img/icons/bolt-solid.svg") no-repeat 50% 50%;mask:url("/assets/img/icons/bolt-solid.svg") no-repeat 50% 50%;background-color:#ff9100}.admonition.danger{border-left-color:#ff5252}.admonition.danger .admonition-title{background-color:#564444}.admonition.danger .admonition-title::before{-webkit-mask:url("/assets/img/icons/bolt-solid.svg") no-repeat 50% 50%;mask:url("/assets/img/icons/bolt-solid.svg") no-repeat 50% 50%;background-color:#ff5252}.admonition.error{border-left-color:#ff5252}.admonition.error .admonition-title{background-color:#564444}.admonition.error .admonition-title::before{-webkit-mask:url("/assets/img/icons/times-circle-solid.svg") no-repeat 50% 50%;mask:url("/assets/img/icons/times-circle-solid.svg") no-repeat 50% 50%;background-color:#ff5252}.admonition.hint{border-left-color:#00c953}.admonition.hint .admonition-title{background-color:#294040}.admonition.hint .admonition-title::before{-webkit-mask:url("/assets/img/icons/question-circle-solid.svg") no-repeat 50% 50%;mask:url("/assets/img/icons/question-circle-solid.svg") no-repeat 50% 50%;background-color:#00c953}.admonition.important{border-left-color:#ff9100}.admonition.important .admonition-title{background-color:#433a38}.admonition.important .admonition-title::before{-webkit-mask:url("/assets/img/icons/fire-solid.svg") no-repeat 50% 50%;mask:url("/assets/img/icons/fire-solid.svg") no-repeat 50% 50%;background-color:#ff9100}.admonition.note{border-left-color:#00b0ff}.admonition.note .admonition-title{background-color:#293d52}.admonition.note .admonition-title::before{-webkit-mask:url("/assets/img/icons/pen-solid.svg") no-repeat 50% 50%;mask:url("/assets/img/icons/pen-solid.svg") no-repeat 50% 50%;background-color:#00b0ff}.admonition.seealso{border-left-color:#00b0ff}.admonition.seealso .admonition-title{background-color:#293d52}.admonition.seealso .admonition-title::before{-webkit-mask:url("/assets/img/icons/info-circle-solid.svg") no-repeat 50% 50%;mask:url("/assets/img/icons/info-circle-solid.svg") no-repeat 50% 50%;background-color:#00b0ff}.admonition.tip{border-left-color:#00c953}.admonition.tip .admonition-title{background-color:#294040}.admonition.tip .admonition-title::before{-webkit-mask:url("/assets/img/icons/info-circle-solid.svg") no-repeat 50% 50%;mask:url("/assets/img/icons/info-circle-solid.svg") no-repeat 50% 50%;background-color:#00c953}.admonition.todo .admonition-title::before{-webkit-mask:url("/assets/img/icons/pen-solid.svg") no-repeat 50% 50%;mask:url("/assets/img/icons/pen-solid.svg") no-repeat 50% 50%}.admonition.warning{border-left-color:#ff9100}.admonition.warning .admonition-title{background-color:#564b3c}.admonition.warning .admonition-title::before{-webkit-mask:url("/assets/img/icons/exclamation-triangle-solid.svg") no-repeat 50% 50%;mask:url("/assets/img/icons/exclamation-triangle-solid.svg") no-repeat 50% 50%;background-color:#ff9100}body{font-family:'Open Sans', sans-serif}.box-error,.box-note,.box-warning{color:#18191a}.avatar-img{background-color:var(--navbar-col);border:.05rem;border-color:var(--navbar-border-col);border-style:solid}.card-body,.card-custom,.card-footer,.card-img-top,.cr-picker-button,.cr-picker-submenu{--bs-bg-opacity: 1;background-color:var(--navbar-col) !important}.modal-content{background-color:var(--footer-col) !important}code{color:var(--mid-col);background-color:var(--navbar-col)}.feature{display:inline-flex;align-items:center;justify-content:center;height:3rem;width:3rem;font-size:1.5rem}.widgetbot{display:flex;align-items:center;justify-content:space-around}.pagination .page-item .page-link{background-color:#111111;color:#e4e4e4}.navbar-custom.top-nav-short .avatar-container{width:3.125rem;opacity:1 !important;visibility:visible !important;transition:none !important;-webkit-transition:none !important;-moz-transition:none !important}#nav-search-link{display:none}.hover-zoom{overflow:hidden}.hover-zoom img{transition:all 1.5s ease}.hover-zoom:hover img{transform:scale(1.1)}.icon img,img.icon{max-width:none;height:2.25em}.icon-sm img,img.icon-sm{max-width:none;height:1.25em}.icon-lg img,img.icon-lg{max-width:none;height:3.25em}img.invert{filter:invert(1)}.btn:hover img.invert{filter:invert(0)}.highlight{border-radius:0.5rem}.highlight>pre{border-left:0.4375rem solid var(--text-col)}.highlight pre.lineno{border-right:2px solid var(--text-col)}.admonition .highlight{margin-left:0.5rem;margin-right:1.25rem}.admonition .highlight>pre{border-radius:0.5rem}.tabs{background-color:var(--footer-col);padding:1rem}.tabs .nav-link{color:var(--link-col)}.tabs .nav-link:hover{color:var(--hover-col)}.tabs .nav-link.active{color:var(--text-col);border-color:var(--text-col)}.tab-content{background-color:var(--navbar-col);padding:1rem;margin-top:1rem;border:1px solid var(--page-col);border-radius:0.5rem}table tr:nth-child(2n){background-color:var(--footer-col)} diff --git a/assets/img/banners/roadmap.jpg b/assets/img/banners/roadmap.jpg new file mode 100644 index 00000000..35f196b6 Binary files /dev/null and b/assets/img/banners/roadmap.jpg differ diff --git a/assets/js/projects.js b/assets/js/projects.js index 04f07228..7ad7715c 100644 --- a/assets/js/projects.js +++ b/assets/js/projects.js @@ -1,7 +1,7 @@ // projects section script // get project container -container = document.getElementById("project-container") +let container = document.getElementById("project-container") let org_name = "LizardByte" let base_url = `https://app.${org_name.toLowerCase()}.dev` let cache_repo = "dashboard" diff --git a/assets/js/roadmap.js b/assets/js/roadmap.js new file mode 100644 index 00000000..29cf4f20 --- /dev/null +++ b/assets/js/roadmap.js @@ -0,0 +1,218 @@ +document.addEventListener('DOMContentLoaded', function() { + const issuesList = document.getElementById('issues-container'); + const issueModal = new bootstrap.Modal(document.getElementById('issueModal')); + const issueModalBody = document.getElementById('issueModalBody'); + const issueModalLabel = document.getElementById('issueModalLabel'); + const viewOnGithubBtn = document.getElementById('viewOnGithub'); + + // 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) { + issuesList.innerHTML = '

No roadmap items found.

'; + return; + } + + // Clear loading message + issuesList.innerHTML = ''; + + issues.forEach(issue => { + const issueCol = document.createElement('div'); + issueCol.className = 'col-lg-4 mb-5'; + + const issueEl = document.createElement('div'); + issueEl.className = 'card h-100 shadow border-0 rounded-0'; + issueEl.style.cursor = 'pointer'; + + // Store issue data for modal + issueEl.dataset.issue = JSON.stringify(issue); + + // Click event to show modal + issueEl.addEventListener('click', function() { + const issueData = JSON.parse(this.dataset.issue); + displayIssueInModal(issueData); + }); + + const cardBody = document.createElement('div'); + cardBody.className = 'card-body text-white p-4 rounded-0'; + + // Issue title + const titleEl = document.createElement('h5'); + titleEl.className = 'card-title mb-3 fw-bolder crowdin-ignore'; + const titleText = document.createElement('span'); + titleText.textContent = issue.title; + titleText.className = 'text-decoration-none'; + titleEl.appendChild(titleText); + + // Issue metadata + const metaEl = document.createElement('div'); + metaEl.className = 'd-flex justify-content-between mb-2 small'; + + // Issue number + const numberEl = document.createElement('span'); + numberEl.className = 'badge bg-secondary crowdin-ignore'; + numberEl.textContent = `#${issue.number}`; + + // Issue date + const dateEl = document.createElement('span'); + dateEl.className = 'crowdin-ignore'; + 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 = 'd-flex flex-wrap gap-1 mb-2'; + + // Sort labels alphabetically by name + const sortedLabels = [...issue.labels].sort((a, b) => + a.name.toLowerCase().localeCompare(b.name.toLowerCase()) + ); + + sortedLabels.forEach(label => { + const labelEl = document.createElement('span'); + labelEl.className = 'badge crowdin-ignore'; + 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); + }); + + // Add all elements to the card body + cardBody.appendChild(titleEl); + cardBody.appendChild(metaEl); + cardBody.appendChild(labelsEl); + + issueEl.appendChild(cardBody); + issueCol.appendChild(issueEl); + issuesList.appendChild(issueCol); + }); + + }) + .catch(error => { + issuesList.innerHTML = `

Error loading roadmap items: ${error.message}

`; + }); + + // Function to display issue in modal + function displayIssueInModal(issue) { + // Set modal title + issueModalLabel.textContent = `${issue.title} (#${issue.number})`; + + // Set GitHub link + viewOnGithubBtn.href = issue.html_url; + + // Create modal content + let modalContent = document.createElement('div'); + + // Issue metadata + const metaEl = document.createElement('div'); + metaEl.className = 'd-flex justify-content-between mb-3'; + + // Issue created date + const createdEl = document.createElement('span'); + const createdLabel = document.createElement('strong'); + createdLabel.textContent = 'Created:'; + createdEl.appendChild(createdLabel); + createdEl.appendChild(document.createTextNode(' ')); + + const createdValue = document.createElement('span'); + createdValue.className = 'crowdin-ignore'; + const createdDate = new Date(issue.created_at); + createdValue.textContent = createdDate.toLocaleDateString(); + createdEl.appendChild(createdValue); + + // Issue author + const authorEl = document.createElement('span'); + const authorLabel = document.createElement('strong'); + authorLabel.textContent = 'By:'; + authorEl.appendChild(authorLabel); + authorEl.appendChild(document.createTextNode(' ')); + + const authorValue = document.createElement('span'); + authorValue.className = 'crowdin-ignore'; + authorValue.textContent = issue.user.login; + authorEl.appendChild(authorValue); + + metaEl.appendChild(createdEl); + metaEl.appendChild(authorEl); + modalContent.appendChild(metaEl); + + // Labels + if (issue.labels && issue.labels.length > 0) { + const labelsContainer = document.createElement('div'); + labelsContainer.className = 'mb-3'; + + const labelsTitle = document.createElement('strong'); + labelsTitle.textContent = 'Labels:'; + labelsContainer.appendChild(labelsTitle); + + const labelsEl = document.createElement('div'); + labelsEl.className = 'd-flex flex-wrap gap-1 mt-1'; + + issue.labels.forEach(label => { + const labelEl = document.createElement('span'); + labelEl.className = 'badge crowdin-ignore'; + 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); + }); + + labelsContainer.appendChild(labelsEl); + modalContent.appendChild(labelsContainer); + } + + // Issue body + const bodyContainer = document.createElement('div'); + bodyContainer.className = 'mt-3 p-3 rounded-0'; + + if (issue.body) { + // Create a container with crowdin-ignore class for the entire rendered content + const markdownContainer = document.createElement('div'); + markdownContainer.className = 'crowdin-ignore'; + + // Use Marked to parse the markdown + markdownContainer.innerHTML = marked.parse(issue.body); + + // Add the rendered content to the body container + bodyContainer.appendChild(markdownContainer); + } else { + const noContentMsg = document.createElement('div'); + noContentMsg.textContent = 'No description provided.'; + bodyContainer.appendChild(noContentMsg); + } + + modalContent.appendChild(bodyContainer); + + // Set modal content + issueModalBody.innerHTML = ''; + issueModalBody.appendChild(modalContent); + + // Show modal + issueModal.show(); + } +}); diff --git a/index.html b/index.html index 3bcea880..0f24ddb5 100644 --- a/index.html +++ b/index.html @@ -176,6 +176,7 @@
Contributing + Roadmap Dashboard Dev Status
diff --git a/tags/index.html b/tags/index.html index 9634ad38..2f53afd4 100644 --- a/tags/index.html +++ b/tags/index.html @@ -184,6 +184,7 @@
Contributing + Roadmap Dashboard Dev Status