Dev

[DinneK]

Working version of dev branch needs to be put into prod!

[github-actions]

Remaining comments which cannot be posted as a review comment to avoid GitHub Rate Limit

prettier

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/css/style.css

Line 392 in 2445c06

border: #E7C000;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/css/style.css

Line 395 in 2445c06

.usa-search--small [type=submit], .usa-search--small .usa-search__submit {

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/css/style.css

Line 415 in 2445c06

border: none

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/css/style.css

Line 420 in 2445c06

background-color: #E0EAF8;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/css/style.css

Line 424 in 2445c06

box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/css/style.css

Line 476 in 2445c06

background-color: #E0EAF8;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/css/style.css

Line 479 in 2445c06

font-weight: 600;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/css/style.css

Line 490 in 2445c06

background-color: #E0EAF8;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/css/style.css

Line 492 in 2445c06

box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/css/style.css

Line 509 in 2445c06

box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/css/style.css

Line 611 in 2445c06

background-color: #E0EAF8;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/css/style.css

Line 615 in 2445c06

box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/css/style.css

Line 631 in 2445c06

margin: 2%

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/css/style.css

Line 648 in 2445c06

box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/css/style.css

Lines 669 to 670 in 2445c06

	background-color: #0A3F8D;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/css/style.css

Line 676 in 2445c06

background-color: #E7C000;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/css/style.css

Line 689 in 2445c06

iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus {

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/css/style.css

Line 715 in 2445c06

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/css/style.css

Line 735 in 2445c06

margin: 2% 0 -15% 3%;;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/css/style.css

Lines 748 to 749 in 2445c06

	}

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modal.js

Lines 2 to 3 in 2445c06

	const modalOpenButtons = document.querySelectorAll("[data-open-modal]");
	const modalCloseButtons = document.querySelectorAll("[data-close-modal]");

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modal.js

Lines 5 to 12 in 2445c06

	const openModal = (id) => {
	const modal = document.getElementById(id);
	if(modal) {
	modal.classList.add("usa-modal--active");
	modal.setAttribute("aria-hidden", "false");
	console.log("Modal is open")
	}
	};

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modal.js

Lines 14 to 20 in 2445c06

	const closeModal = (modal) => {
	if(modal) {
	modal.classList.remove("usa-modal--active");
	modal.setAttribute("aria-hidden", "true");
	console.log("modal is closed")
	}
	};

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modal.js

Lines 22 to 29 in 2445c06

	modalOpenButtons.forEach((button) => {
	button.addEventListener("click", (e) => {
	e.preventDefault();
	e.stopPropagation();
	const id = button.getAttribute("aria-controls");
	openModal(id);
	});
	});

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modal.js

Lines 31 to 37 in 2445c06

	modalCloseButtons.forEach((button) => {
	button.addEventListener("click", (e) => {
	e.stopPropagation();
	const modal = button.closest(".usa-modal");
	closeModal(modal);
	});
	});

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modal.js

Lines 39 to 44 in 2445c06

	document.addEventListener("click", (e) => {
	const activeModal = document.querySelector(".usa-modal.usa-modal--active");
	if(activeModal && !activeModal.contains(e.target)) {
	closeModal(activeModal);
	}
	});

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modal.js

Lines 46 to 51 in 2445c06

	document.addEventListener("keydown", (e) => {
	if(e.key === "Escape") {
	const activeModal = document.querySelector(".usa-modal.usa-modal--active");
	closeModal(activeModal)
	}
	});

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modal.js

Line 54 in 2445c06

document.addEventListener("DOMContentLoaded", operateModal)

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/nav.js

Lines 2 to 5 in 2445c06

	const toggleButton = document.querySelector(".usa-accordion__button");
	const closeButton = document.querySelector(".usa-nav__close");
	const menu = document.querySelector(".usa-nav");
	const menuIcon = document.querySelector(".usa-accordion__button svg use");

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/nav.js

Lines 7 to 9 in 2445c06

	function toggleMenu(e) {
	e.preventDefault();
	const isOpen = menu.classList.toggle("is-visible");

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/nav.js

Lines 11 to 16 in 2445c06

	toggleButton.setAttribute("aria-expanded", isOpen ? "true" : "false");
	menuIcon.setAttribute(
	"href",
	isOpen ? "/assets/img/sprite.svg#close" : "/assets/img/sprite.svg#menu"
	);
	}

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/nav.js

Lines 18 to 23 in 2445c06

	function closeMenu() {
	if(menu.classList.contains("is-visible")) {
	menu.classList.remove("is-visible");
	toggleButton.setAttribute("aria-expanded", "false");
	menuIcon.setAttribute("href", "/assets/img/sprite.svg#menu");
	}

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/nav.js

Line 25 in 2445c06

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/nav.js

Lines 26 to 27 in 2445c06

	if(toggleButton && closeButton && menu) {
	toggleButton.addEventListener("click", toggleMenu);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/nav.js

Lines 29 to 32 in 2445c06

	closeButton.addEventListener("click", (e) => {
	e.preventDefault();
	closeMenu();
	})

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/nav.js

Lines 34 to 41 in 2445c06

	document.addEventListener("click", (e) => {
	if(!menu.contains(e.target) && !toggleButton.contains(e.target)) {
	closeMenu();
	}
	});
	} else {
	console.error("Some elements are not found");
	}

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/nav.js

Line 44 in 2445c06

document.addEventListener("DOMContentLoaded", createNavigation)

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 1 to 10 in 2445c06

	import { reportHeadingTemplate, projectCardTemplate } from "./templates";
	import DOMPurify from 'dompurify';
	const projectsData = document.getElementById('metrics').textContent;
	const orgsData = document.getElementById('org-data').textContent;
	const parsedOrgsData = JSON.parse(orgsData);
	const siteData = JSON.parse(document.getElementById('site-data').textContent);
	const parsedProjectsData = JSON.parse(projectsData);
	const filtersContainer = document.querySelector('.filters-container');
	const templateDiv = document.getElementById('content-container');

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 12 to 17 in 2445c06

	const sortDirection = document.getElementById('sort-direction');
	const sortSelection = document.getElementById('sort-selection');
	let currentPage = 1;
	const itemsPerPage = 10;
	let filteredProjects = [...parsedProjectsData];

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 27 in 2445c06

sortSelection.addEventListener('change', () => {

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 29 to 30 in 2445c06

	document.getElementById("sort-direction-form").hidden = false;
	sortCards();

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 34 to 36 in 2445c06

	sortDirection.addEventListener('change', () => {
	const isDescending = sortDirection.value === 'descending' ? true : false;
	sortCards(isDescending);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 104 to 107 in 2445c06

	if(["maturity_model_tier", "stargazers_count", "forks_count"].includes(selection)) {
	sortByNumberAttribute(targetProjects, selection, isDescending);
	} else {
	sortByStringAttribute(targetProjects, selection, isDescending);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 117 to 124 in 2445c06

	const allProjects = (filteredProjects || parsedProjectsData).map((project) => ({
	...project,
	org: project.owner
	}));
	const startIndex = (currentPage - 1) * itemsPerPage;
	const endIndex = startIndex + itemsPerPage;
	const paginatedProjects = allProjects.slice(startIndex, endIndex);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 127 in 2445c06

if(!acc[curr.org]) {

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 130 in 2445c06

acc[curr.org].push(curr);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 132 in 2445c06

}, {});

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 167 to 183 in 2445c06

	const paginationDiv = document.getElementById('pagination-controls') || document.createElement('div');
	paginationDiv.id = 'pagination-controls';
	paginationDiv.className = 'usa-pagination';
	paginationDiv.innerHTML = '';
	const totalPages = Math.ceil(totalProjectsCount / itemsPerPage);
	const paginationList = document.createElement('ul');
	paginationList.className = 'usa-pagination__list';
	const prevItem = document.createElement('li');
	prevItem.className = 'usa-pagination__item usa-pagination__arrow';
	const prevButton = document.createElement('a');
	prevButton.href = 'javascript:void(0);';
	prevButton.className = 'usa-pagination__link usa-pagination__previous-page';
	prevButton.setAttribute('aria-label', 'Previous page');
	if (currentPage === 1) prevButton.classList.add('usa-pagination__disabled');

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 189 to 190 in 2445c06

	`;
	prevButton.addEventListener('click', () => {

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 192 to 193 in 2445c06

	currentPage--;
	createProjectCards();

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 195 to 197 in 2445c06

	});
	prevItem.appendChild(prevButton);
	paginationList.appendChild(prevItem);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 199 in 2445c06

const pageRange = getPageRange(currentPage, totalPages, 3);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 201 to 202 in 2445c06

	const pageItem = document.createElement('li');
	pageItem.className = 'usa-pagination__item';

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 204 to 206 in 2445c06

	if (page === '...') {
	pageItem.className += ' usa-pagination__overflow';
	pageItem.innerHTML = `<span aria-label="ellipsis indicating non-visible pages">…</span>`;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 208 to 219 in 2445c06

	pageItem.className += ' usa-pagination__page-no';
	const pageButton = document.createElement('a');
	pageButton.href = 'javascript:void(0);';
	pageButton.className = `usa-pagination__button${page === currentPage ? ' usa-current' : ''}`;
	pageButton.textContent = page;
	pageButton.setAttribute('aria-label', `Page ${page}`);
	if (page === currentPage) pageButton.setAttribute('aria-current', 'page');
	pageButton.addEventListener('click', () => {
	currentPage = page;
	createProjectCards();
	});
	pageItem.appendChild(pageButton);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 221 to 230 in 2445c06

	paginationList.appendChild(pageItem);
	});
	const nextItem = document.createElement('li');
	nextItem.className = 'usa-pagination__item usa-pagination__arrow';
	const nextButton = document.createElement('a');
	nextButton.href = 'javascript:void(0);';
	nextButton.className = 'usa-pagination__link usa-pagination__next-page';
	nextButton.setAttribute('aria-label', 'Next page');
	if (currentPage === totalPages) nextButton.classList.add('usa-pagination__disabled');

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 236 to 237 in 2445c06

	`;
	nextButton.addEventListener('click', () => {

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 239 to 240 in 2445c06

	currentPage++;
	createProjectCards();

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 242 to 244 in 2445c06

	});
	nextItem.appendChild(nextButton);
	paginationList.appendChild(nextItem);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 246 in 2445c06

paginationDiv.appendChild(paginationList);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 249 in 2445c06

templateDiv.parentElement.appendChild(paginationDiv);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 254 to 256 in 2445c06

	const range = [];
	const start = Math.max(2, currentPage - visibleRange);
	const end = Math.min(totalPages - 1, currentPage + visibleRange);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 258 in 2445c06

range.push(1);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 260 in 2445c06

if (start > 2) range.push('...');

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 263 in 2445c06

range.push(i);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 266 in 2445c06

if (end < totalPages - 1) range.push('...');

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 268 in 2445c06

if (totalPages > 1) range.push(totalPages);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 270 in 2445c06

return range;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 274 to 278 in 2445c06

	addGlobalEventListener('change', '.usa-checkbox__input', e => {
	// Can use this e.target.name to update selected filters object
	updateFilters();
	updateFilteredProjects()
	}, filtersContainer)

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 318 in 2445c06

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 323 in 2445c06

projectType: []

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 326 to 339 in 2445c06

	document.querySelectorAll('input[name="org-filter"]:checked').forEach(checkbox => {
	selectedFiltersObject.organization.push(checkbox.value);
	});
	document.querySelectorAll('input[name="tier-filter"]:checked').forEach(checkbox => {
	selectedFiltersObject.maturityModelTier.push(checkbox.value);
	});
	document.querySelectorAll('input[name="fisma-level-filter"]:checked').forEach(checkbox => {
	selectedFiltersObject.fismaLevel.push(checkbox.value);
	});
	document.querySelectorAll('input[name="project-type-filter"]:checked').forEach(checkbox => {
	selectedFiltersObject.projectType.push(checkbox.value);
	});
	const allProjects = Object.keys(projects).flatMap((org) => projects[org].map((project) => ({...project, org})))

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 341 to 348 in 2445c06

	const matchesOrg = selectedFiltersObject.organization.length === 0 || selectedFiltersObject.organization.includes(project.org);
	const matchesTier = selectedFiltersObject.maturityModelTier.length === 0 || selectedFiltersObject.maturityModelTier.includes("Tier" + project.maturityModelTier);
	const matchesFisma = selectedFiltersObject.fismaLevel.length === 0 || selectedFiltersObject.fismaLevel.includes(project.fismaLevel);
	const matchesType = selectedFiltersObject.projectType.length === 0 || selectedFiltersObject.projectType.includes(project.projectType);
	return matchesOrg && matchesTier && matchesFisma && matchesType;
	});
	updatePagination(filteredProjects);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 350 in 2445c06

sortCards();

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 354 to 355 in 2445c06

	const totalProjects = (filteredProjects || parsedProjectsData).length;
	const totalPages = Math.ceil(totalProjects / itemsPerPage);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 357 to 358 in 2445c06

	currentPage = Math.min(currentPage, totalPages || 1);
	renderPaginationControls(totalPages);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 362 to 364 in 2445c06

	const startIndex = (currentPage - 1) * itemsPerPage;
	const endIndex = startIndex + itemsPerPage;
	const paginatedProjects = projects.slice(startIndex, endIndex);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 366 in 2445c06

templateDiv.innerHTML = '';

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 369 in 2445c06

if(!acc[curr.owner]) {

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 372 in 2445c06

acc[curr.owner].push(curr);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 374 in 2445c06

}, {});

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 377 to 401 in 2445c06

	const orgProject = findObject(parsedOrgsData, org);
	const orgHeading = reportHeadingTemplate(orgProject);
	const projectSectionsTemplate = document.createElement('div');
	projectSectionsTemplate.className = 'project_section';
	const reportHeading = document.createElement('div');
	reportHeading.className = "report_heading";
	reportHeading.innerHTML = DOMPurify.sanitize(orgHeading);
	projectSectionsTemplate.appendChild(reportHeading);
	const projectCards = document.createElement('ul');
	projectCards.className = "usa-card-group flex-align-stretch";
	groupedByOrg[org].forEach(repoData => {
	repoData.baseurl = siteData.baseurl;
	const projectCard = document.createElement('li');
	projectCard.className = 'usa-card project-card tablet:grid-col-12';
	projectCard.id = repoData.name;
	projectCard.setAttribute('org-name', repoData.owner);
	projectCard.innerHTML = DOMPurify.sanitize(projectCardTemplate(repoData));
	projectCards.appendChild(projectCard);
	});
	projectSectionsTemplate.appendChild(projectCards);
	templateDiv.append(projectSectionsTemplate);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 403 in 2445c06

updateHeadingVisibility();

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 491 to 492 in 2445c06

	const searchForm = document.getElementById('search-form');
	const searchBox = document.getElementById("search-input");

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 497 in 2445c06

e.preventDefault();

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 499 in 2445c06

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 501 to 502 in 2445c06

	const query = searchBox.value.toLowerCase();
	filteredProjects = parsedProjectsData.filter((project) => project.name.toLowerCase().includes(query));

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Lines 1 to 2 in 2445c06

	export const reportHeadingTemplate = function(data) {
	return `

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Lines 14 to 16 in 2445c06

	export function projectCardTemplate(data) {
	const projectUrl = `${data.baseurl}/${ data.owner }/${ data.name }/`;
	const description = data.description !== null ? data.description : "";

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 18 in 2445c06

return `

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 21 in 2445c06

<a href="${ projectUrl }" class="href-home">

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 25 in 2445c06

<h2 class="usa-card__heading">${ data.name }</h2>

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 28 in 2445c06

<div>${ description }</div>

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 36 in 2445c06

<span> ${ data.stargazers_count } </span>

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 43 in 2445c06

<span> ${ data.forks_count } </span>

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 46 in 2445c06

<svg class="usa-icon" aria-labelledby="issue-count-${ data.name }-title" role="img">

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 50 in 2445c06

<span> ${ data.issues_count } </span>

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 57 in 2445c06

<span> ${ data.pull_requests_count } </span>

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 63 in 2445c06

<span> ${ data.watchers_count } </span>

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 73 in 2445c06

[github-actions]

Remaining comments which cannot be posted as a review comment to avoid GitHub Rate Limit

prettier

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/nav.js

Lines 11 to 16 in 5bc12e0

	toggleButton.setAttribute("aria-expanded", isOpen ? "true" : "false");
	menuIcon.setAttribute(
	"href",
	isOpen ? "/assets/img/sprite.svg#close" : "/assets/img/sprite.svg#menu"
	);
	}

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/nav.js

Lines 18 to 23 in 5bc12e0

	function closeMenu() {
	if(menu.classList.contains("is-visible")) {
	menu.classList.remove("is-visible");
	toggleButton.setAttribute("aria-expanded", "false");
	menuIcon.setAttribute("href", "/assets/img/sprite.svg#menu");
	}

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/nav.js

Line 25 in 5bc12e0

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/nav.js

Lines 26 to 27 in 5bc12e0

	if(toggleButton && closeButton && menu) {
	toggleButton.addEventListener("click", toggleMenu);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/nav.js

Lines 29 to 32 in 5bc12e0

	closeButton.addEventListener("click", (e) => {
	e.preventDefault();
	closeMenu();
	})

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/nav.js

Lines 34 to 41 in 5bc12e0

	document.addEventListener("click", (e) => {
	if(!menu.contains(e.target) && !toggleButton.contains(e.target)) {
	closeMenu();
	}
	});
	} else {
	console.error("Some elements are not found");
	}

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/nav.js

Line 44 in 5bc12e0

document.addEventListener("DOMContentLoaded", createNavigation)

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 1 to 10 in 5bc12e0

	import { reportHeadingTemplate, projectCardTemplate } from "./templates";
	import DOMPurify from 'dompurify';
	const projectsData = document.getElementById('metrics').textContent;
	const orgsData = document.getElementById('org-data').textContent;
	const parsedOrgsData = JSON.parse(orgsData);
	const siteData = JSON.parse(document.getElementById('site-data').textContent);
	const parsedProjectsData = JSON.parse(projectsData);
	const filtersContainer = document.querySelector('.filters-container');
	const templateDiv = document.getElementById('content-container');

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 12 to 17 in 5bc12e0

	const sortDirection = document.getElementById('sort-direction');
	const sortSelection = document.getElementById('sort-selection');
	let currentPage = 1;
	const itemsPerPage = 10;
	let filteredProjects = [...parsedProjectsData];

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 27 in 5bc12e0

sortSelection.addEventListener('change', () => {

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 29 to 30 in 5bc12e0

	document.getElementById("sort-direction-form").hidden = false;
	sortCards();

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 34 to 36 in 5bc12e0

	sortDirection.addEventListener('change', () => {
	const isDescending = sortDirection.value === 'descending' ? true : false;
	sortCards(isDescending);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 104 to 107 in 5bc12e0

	if(["maturity_model_tier", "stargazers_count", "forks_count"].includes(selection)) {
	sortByNumberAttribute(targetProjects, selection, isDescending);
	} else {
	sortByStringAttribute(targetProjects, selection, isDescending);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 117 to 124 in 5bc12e0

	const allProjects = (filteredProjects || parsedProjectsData).map((project) => ({
	...project,
	org: project.owner
	}));
	const startIndex = (currentPage - 1) * itemsPerPage;
	const endIndex = startIndex + itemsPerPage;
	const paginatedProjects = allProjects.slice(startIndex, endIndex);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 127 in 5bc12e0

if(!acc[curr.org]) {

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 130 in 5bc12e0

acc[curr.org].push(curr);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 132 in 5bc12e0

}, {});

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 167 to 183 in 5bc12e0

	const paginationDiv = document.getElementById('pagination-controls') || document.createElement('div');
	paginationDiv.id = 'pagination-controls';
	paginationDiv.className = 'usa-pagination';
	paginationDiv.innerHTML = '';
	const totalPages = Math.ceil(totalProjectsCount / itemsPerPage);
	const paginationList = document.createElement('ul');
	paginationList.className = 'usa-pagination__list';
	const prevItem = document.createElement('li');
	prevItem.className = 'usa-pagination__item usa-pagination__arrow';
	const prevButton = document.createElement('a');
	prevButton.href = 'javascript:void(0);';
	prevButton.className = 'usa-pagination__link usa-pagination__previous-page';
	prevButton.setAttribute('aria-label', 'Previous page');
	if (currentPage === 1) prevButton.classList.add('usa-pagination__disabled');

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 189 to 190 in 5bc12e0

	`;
	prevButton.addEventListener('click', () => {

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 192 to 193 in 5bc12e0

	currentPage--;
	createProjectCards();

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 195 to 197 in 5bc12e0

	});
	prevItem.appendChild(prevButton);
	paginationList.appendChild(prevItem);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 199 in 5bc12e0

const pageRange = getPageRange(currentPage, totalPages, 3);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 201 to 202 in 5bc12e0

	const pageItem = document.createElement('li');
	pageItem.className = 'usa-pagination__item';

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 204 to 206 in 5bc12e0

	if (page === '...') {
	pageItem.className += ' usa-pagination__overflow';
	pageItem.innerHTML = `<span aria-label="ellipsis indicating non-visible pages">…</span>`;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 208 to 219 in 5bc12e0

	pageItem.className += ' usa-pagination__page-no';
	const pageButton = document.createElement('a');
	pageButton.href = 'javascript:void(0);';
	pageButton.className = `usa-pagination__button${page === currentPage ? ' usa-current' : ''}`;
	pageButton.textContent = page;
	pageButton.setAttribute('aria-label', `Page ${page}`);
	if (page === currentPage) pageButton.setAttribute('aria-current', 'page');
	pageButton.addEventListener('click', () => {
	currentPage = page;
	createProjectCards();
	});
	pageItem.appendChild(pageButton);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 221 to 230 in 5bc12e0

	paginationList.appendChild(pageItem);
	});
	const nextItem = document.createElement('li');
	nextItem.className = 'usa-pagination__item usa-pagination__arrow';
	const nextButton = document.createElement('a');
	nextButton.href = 'javascript:void(0);';
	nextButton.className = 'usa-pagination__link usa-pagination__next-page';
	nextButton.setAttribute('aria-label', 'Next page');
	if (currentPage === totalPages) nextButton.classList.add('usa-pagination__disabled');

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 236 to 237 in 5bc12e0

	`;
	nextButton.addEventListener('click', () => {

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 239 to 240 in 5bc12e0

	currentPage++;
	createProjectCards();

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 242 to 244 in 5bc12e0

	});
	nextItem.appendChild(nextButton);
	paginationList.appendChild(nextItem);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 246 in 5bc12e0

paginationDiv.appendChild(paginationList);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 249 in 5bc12e0

templateDiv.parentElement.appendChild(paginationDiv);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 254 to 256 in 5bc12e0

	const range = [];
	const start = Math.max(2, currentPage - visibleRange);
	const end = Math.min(totalPages - 1, currentPage + visibleRange);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 258 in 5bc12e0

range.push(1);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 260 in 5bc12e0

if (start > 2) range.push('...');

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 263 in 5bc12e0

range.push(i);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 266 in 5bc12e0

if (end < totalPages - 1) range.push('...');

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 268 in 5bc12e0

if (totalPages > 1) range.push(totalPages);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 270 in 5bc12e0

return range;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 274 to 278 in 5bc12e0

	addGlobalEventListener('change', '.usa-checkbox__input', e => {
	// Can use this e.target.name to update selected filters object
	updateFilters();
	updateFilteredProjects()
	}, filtersContainer)

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 318 in 5bc12e0

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 323 in 5bc12e0

projectType: []

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 326 to 339 in 5bc12e0

	document.querySelectorAll('input[name="org-filter"]:checked').forEach(checkbox => {
	selectedFiltersObject.organization.push(checkbox.value);
	});
	document.querySelectorAll('input[name="tier-filter"]:checked').forEach(checkbox => {
	selectedFiltersObject.maturityModelTier.push(checkbox.value);
	});
	document.querySelectorAll('input[name="fisma-level-filter"]:checked').forEach(checkbox => {
	selectedFiltersObject.fismaLevel.push(checkbox.value);
	});
	document.querySelectorAll('input[name="project-type-filter"]:checked').forEach(checkbox => {
	selectedFiltersObject.projectType.push(checkbox.value);
	});
	const allProjects = Object.keys(projects).flatMap((org) => projects[org].map((project) => ({...project, org})))

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 341 to 348 in 5bc12e0

	const matchesOrg = selectedFiltersObject.organization.length === 0 || selectedFiltersObject.organization.includes(project.org);
	const matchesTier = selectedFiltersObject.maturityModelTier.length === 0 || selectedFiltersObject.maturityModelTier.includes("Tier" + project.maturityModelTier);
	const matchesFisma = selectedFiltersObject.fismaLevel.length === 0 || selectedFiltersObject.fismaLevel.includes(project.fismaLevel);
	const matchesType = selectedFiltersObject.projectType.length === 0 || selectedFiltersObject.projectType.includes(project.projectType);
	return matchesOrg && matchesTier && matchesFisma && matchesType;
	});
	updatePagination(filteredProjects);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 350 in 5bc12e0

sortCards();

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 354 to 355 in 5bc12e0

	const totalProjects = (filteredProjects || parsedProjectsData).length;
	const totalPages = Math.ceil(totalProjects / itemsPerPage);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 357 to 358 in 5bc12e0

	currentPage = Math.min(currentPage, totalPages || 1);
	renderPaginationControls(totalPages);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 362 to 364 in 5bc12e0

	const startIndex = (currentPage - 1) * itemsPerPage;
	const endIndex = startIndex + itemsPerPage;
	const paginatedProjects = projects.slice(startIndex, endIndex);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 366 in 5bc12e0

templateDiv.innerHTML = '';

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 369 in 5bc12e0

if(!acc[curr.owner]) {

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 372 in 5bc12e0

acc[curr.owner].push(curr);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 374 in 5bc12e0

}, {});

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 377 to 401 in 5bc12e0

	const orgProject = findObject(parsedOrgsData, org);
	const orgHeading = reportHeadingTemplate(orgProject);
	const projectSectionsTemplate = document.createElement('div');
	projectSectionsTemplate.className = 'project_section';
	const reportHeading = document.createElement('div');
	reportHeading.className = "report_heading";
	reportHeading.innerHTML = DOMPurify.sanitize(orgHeading);
	projectSectionsTemplate.appendChild(reportHeading);
	const projectCards = document.createElement('ul');
	projectCards.className = "usa-card-group flex-align-stretch";
	groupedByOrg[org].forEach(repoData => {
	repoData.baseurl = siteData.baseurl;
	const projectCard = document.createElement('li');
	projectCard.className = 'usa-card project-card tablet:grid-col-12';
	projectCard.id = repoData.name;
	projectCard.setAttribute('org-name', repoData.owner);
	projectCard.innerHTML = DOMPurify.sanitize(projectCardTemplate(repoData));
	projectCards.appendChild(projectCard);
	});
	projectSectionsTemplate.appendChild(projectCards);
	templateDiv.append(projectSectionsTemplate);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 403 in 5bc12e0

updateHeadingVisibility();

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 491 to 492 in 5bc12e0

	const searchForm = document.getElementById('search-form');
	const searchBox = document.getElementById("search-input");

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 497 in 5bc12e0

e.preventDefault();

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Line 499 in 5bc12e0

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 501 to 502 in 5bc12e0

	const query = searchBox.value.toLowerCase();
	filteredProjects = parsedProjectsData.filter((project) => project.name.toLowerCase().includes(query));

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Lines 1 to 2 in 5bc12e0

	export const reportHeadingTemplate = function(data) {
	return `

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Lines 14 to 16 in 5bc12e0

	export function projectCardTemplate(data) {
	const projectUrl = `${data.baseurl}/${ data.owner }/${ data.name }/`;
	const description = data.description !== null ? data.description : "";

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 18 in 5bc12e0

return `

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 21 in 5bc12e0

<a href="${ projectUrl }" class="href-home">

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 25 in 5bc12e0

<h2 class="usa-card__heading">${ data.name }</h2>

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 28 in 5bc12e0

<div>${ description }</div>

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 36 in 5bc12e0

<span> ${ data.stargazers_count } </span>

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 43 in 5bc12e0

<span> ${ data.forks_count } </span>

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 46 in 5bc12e0

<svg class="usa-icon" aria-labelledby="issue-count-${ data.name }-title" role="img">

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 50 in 5bc12e0

<span> ${ data.issues_count } </span>

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 57 in 5bc12e0

<span> ${ data.pull_requests_count } </span>

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 63 in 5bc12e0

<span> ${ data.watchers_count } </span>

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Line 73 in 5bc12e0

[natalialuzuriaga]

Ran this locally and it all LGTM! Amazing job, so cool to see everything put all together