Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Project graph revamp #303

Merged
merged 6 commits into from
Jan 6, 2025
Merged

Project graph revamp #303

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e644a50
Fix nav menu
DinneK Dec 23, 2024
703ab32
Change logic in project graphs
DinneK Dec 30, 2024
a1451f6
Add modal functionality
DinneK Jan 2, 2025
9eb2a3b
Add graph info
DinneK Jan 2, 2025
3d6ad7d
Add org modal descriptions
DinneK Jan 2, 2025
2900e66
Add language to home
DinneK Jan 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions app/site/_includes/assets.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,4 @@

<script type="module" src="{{ "/assets/js/index.js" | url}}"></script>
<script type="module" src="{{ "/src/js/nav.js" | url}}"></script>
<script type="module" src="{{ "/src/js/modal.js" | url}}"></script>
32 changes: 23 additions & 9 deletions app/site/_includes/graph-section.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,31 @@
{% assign className = class | default: 'graph-container' %}
{% assign className = class | default: 'graph-container-{{ title | slugify}}' %}
{% assign devPath = 'site/_graphs' | append: path %}
{% assign distPath = baseurl | append: '/assets/img/graphs' | append: path %}
{% assign fileExtension = path | split: '.' | last %}
{% assign modal_description = modal_description %}

{% if devPath | fileExists %}
<div class="{{ className }}">
<h3>{{ title }}</h3>
<figure>
{% if fileExtension == 'svg' %}
<embed type="image/svg+xml" src="{{ distPath }}">
{% else %}
<img src="{{ distPath }}">
{% endif %}
</figure>
<div class="graph-box">
<h3 class="graph-title">{{ title }}</h3>
<figure>
{% if fileExtension == 'svg' %}
<embed type="image/svg+xml" src="{{ distPath }}">
{% else %}
<img src="{{ distPath }}">
{% endif %}
</figure>
<div class="modal-button-styling">
<a
href="#{{ title | slugify }}-modal"
class="usa-button modal-button"
aria-controls="{{ title | slugify }}-modal"
data-open-modal
>
Learn More
</a>
</div>
{% render "modal-content", title: title, modal_description: modal_description %}
</div>
DinneK marked this conversation as resolved.
Show resolved Hide resolved
</div>
{% endif %}
68 changes: 41 additions & 27 deletions app/site/_includes/graph-toggle.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{% assign graphName = name| append: "-graph" %}
{% assign buttonName = name | append: "-button-" %}
{% assign graphsCheck = true %}
{% assign modal_description = modal_description %}

{% comment %} Check for file existence of graphs {% endcomment %}
{% for path in graphs %}
Expand All @@ -13,36 +14,49 @@

{% comment %} Render components accordingly {% endcomment %}
{% if graphsCheck %}
<div class="graph-container">
<h3>{{ title }}</h3>
<ul class="usa-button-group ">
{% for option in options %}
<li class="usa-button-group__item">
<div class="graph-container-{{ title | slugify }}">
<div class="graph-box">
<h3 class="graph-title">{{ title }}</h3>
<ul class="usa-button-group">
{% for option in options %}
<li class="usa-button-group__item">
{% if forloop.first %}
<button type="button" id={{ buttonName | append: forloop.index0 }} class="usa-button" onclick="showGraph({{ forloop.index0 }}, '{{ graphName }}','{{ buttonName }}')">{{ option }}</button>
{% else %}
<button type="button" id={{ buttonName | append: forloop.index0 }} class="usa-button usa-button--outline" onclick="showGraph({{ forloop.index0 }}, '{{ graphName }}','{{ buttonName }}')">{{ option }}</button>
{% endif %}
</li>
{% endfor %}
</ul>
{% for graph in graphs %}
{% if forloop.first %}
<button type="button" id={{ buttonName | append: forloop.index0 }} class="usa-button" onclick="showGraph({{ forloop.index0 }}, '{{ graphName }}','{{ buttonName }}')">{{ option }}</button>
<div class={{ graphName }} id="{{ forloop.index0 }}">
{% else %}
<button type="button" id={{ buttonName | append: forloop.index0 }} class="usa-button usa-button--outline" onclick="showGraph({{ forloop.index0 }}, '{{ graphName }}','{{ buttonName }}')">{{ option }}</button>
<div class={{ graphName }} id="{{ forloop.index0 }}" style="display: none;">
{% endif %}
</li>
{% assign graphPath = graph | strip %}
{% assign distPath = baseurl | append: "/assets/img/graphs" | append: graphPath %}
{% assign fileExtension = graphPath | split: '.' | last %}
<figure>
{% if fileExtension == 'svg' %}
<embed type="image/svg+xml" src="{{ distPath }}" />
{% else %}
<img src="{{ distPath }}"/>
{% endif %}
</figure>
<div class="modal-button-styling">
<a
href="#{{ title | slugify }}-modal"
class="usa-button modal-button"
aria-controls="{{ title | slugify }}-modal"
data-open-modal
>
Learn More
</a>
</div>
{% render "modal-content", title: title, modal_description: modal_description %}
</div>
{% endfor %}
</ul>
{% for graph in graphs %}
{% if forloop.first %}
<div class={{ graphName }} id="{{ forloop.index0 }}">
{% else %}
<div class={{ graphName }} id="{{ forloop.index0 }}" style="display: none;">
{% endif %}
{% assign graphPath = graph | strip %}
{% assign distPath = baseurl | append: "/assets/img/graphs" | append: graphPath %}
{% assign fileExtension = graphPath | split: '.' | last %}
<figure>
{% if fileExtension == 'svg' %}
<embed type="image/svg+xml" src="{{ distPath }}" />
{% else %}
<img src="{{ distPath }}"/>
{% endif %}
</figure>
</div>
{% endfor %}
</div>
</div>
{% endif %}
37 changes: 37 additions & 0 deletions app/site/_includes/modal-content.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<div class="margin-y-3">
<div
class="usa-modal"
id="{{ title | slugify }}-modal"
aria-labelledby="{{ title | slugify }}-modal-heading"
aria-describedby="{{ title | slugify }}-modal-description"
aria-hidden="true"
>
<div class="usa-modal__content">
<div class="usa-modal__main">
<h2 class="usa-modal__heading" id="{{ title | slugify }}-modal-heading">
{{ title }}
</h2>
<div class="usa-prose">
<p id="{{ title | slugify }}-modal-description">
{{ modal_description }}
</p>
</div>
<div class="usa-modal__footer">
<button type="button" class="usa-button modal-button" data-close-modal>
Close
</button>
DinneK marked this conversation as resolved.
Show resolved Hide resolved
</div>
</div>
<button
type="button"
class="usa-button-exit usa-modal__close"
aria-label="Close this window"
data-close-modal
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use href="/assets/img/sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
</div>
DinneK marked this conversation as resolved.
Show resolved Hide resolved
10 changes: 5 additions & 5 deletions app/site/_includes/nav.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,6 @@
</div>
</div>
<nav aria-label="Primary navigation" class="usa-nav nav-styling">
<button type="button" class="usa-nav__close">
<svg class="usa-icon--size-7 button-styling" aria-hidden="true" focusable="false" role="img">
<use href="{{ site.baseurl }}/assets/img/sprite.svg#close"></use>
</svg>
</button>
<ul class="usa-nav__primary usa-accordion usa-nav__primary-navigation">
<li class="usa-nav__primary-item">
<button
Expand All @@ -36,6 +31,11 @@
</svg>
</button>
<ul id="basic-nav-section-one" class="usa-nav__submenu">
<li class="close-icon">
<svg class="usa-icon--size-4 button-styling" aria-hidden="true" focusable="false" role="img">
<use href="{{ site.baseurl }}/assets/img/sprite.svg#close"></use>
</svg>
DinneK marked this conversation as resolved.
Show resolved Hide resolved
</li>
<li class="usa-nav__primary-item">
<a href="{{ "/" | url}}" class="usa-nav-link {% if page.url == "/" %}usa-current{% endif %}">
<span>Home</span>
Expand Down
10 changes: 5 additions & 5 deletions app/site/_layouts/org-report.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@
layout: base
---
<script src="{{ "/assets/js/graphs.js" | url }}"></script>
<div class="grid-container-org-report">
<div class="grid-container-reports">
{% assign organization = organizations | findObject: org %}

<div class="report_heading">
<h1 class=report_heading-title>
<div class="report_heading report_heading-reports">
<h1 class=report_heading-reports-title>
DinneK marked this conversation as resolved.
Show resolved Hide resolved
Report for
<a target="_blank" href="https://github.com/{{ org }}">{{ org }}</a>
<a target="_blank" href="https://github.com/{{ org }}" class="report-link">{{ org }}</a>
<img
src="{{organization.avatar_url}}"
alt="Organization Avatar"
Expand All @@ -17,7 +17,7 @@ layout: base
</h1>
</div>

<div class="report-container">
<div class="report_container">
{% if organization %}
<h2>Organization Stats</h2>
<div class="github-information">
Expand Down
8 changes: 4 additions & 4 deletions app/site/_layouts/repo-report.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,13 @@ layout: base
</script>
<script src="{{ "/assets/js/graphs.js" | url }}"></script>

<div class="grid-container">
<div class="grid-container-reports">
{% assign project = projects | findObject: repo %}

<div class="report_heading">
<h1>
<div class="report_heading report_heading-reports">
<h1 class=report_heading-reports-title>
DinneK marked this conversation as resolved.
Show resolved Hide resolved
Report for
<a target="_blank" href="https://github.com/{{ org }}/{{ repo }}">{{ repo }}</a>
<a target="_blank" href="https://github.com/{{ org }}/{{ repo }}" class="report-link">{{ repo }}</a>
</h1>
</div>

Expand Down
17 changes: 11 additions & 6 deletions app/site/index.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,17 @@ layout: base
<h2>Metrics & Code.JSON</h2>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer venenatis aliquet quam ut cursus. Ut ac orci eros.
Suspendisse sodales nulla id metus egestas, euismod aliquet massa laoreet. Nulla vel blandit neque, ac efficitur augue.
Donec consequat pulvinar lacus, a dignissim sem rhoncus ut. Nunc eu elit dignissim, elementum nunc ut, fermentum nulla.
Proin sed enim vel lorem dictum lacinia quis id justo. Vestibulum ac justo commodo, interdum nisl nec, posuere lacus.
In hac habitasse platea dictumst. Aliquam quis risus at tortor placerat congue ut in mi.
Praesent suscipit lectus sit amet massa.
<strong>Metrics</strong> provides meaningful insights into project performance and code quality,
empowering teams to make informed decisions. By analyzing key data points such as contributor activity,
issue resolution times, code complexity and dependency health, Metrics transforms raw data into actionable visualizations.
With a focus on clarity and accessibility, Metrics enables organizations to monitor progress,
identify improvement opportunities and measure the impact of work.
</p>
<p>
<strong>Code.JSON</strong> serves as a powerful tool for open-source project transparency and compliance.
Code.JSON provides a standerdized metadata format that enables dicoverability, reuse and collaboration on governemnt open-source
projects. Using the <a href="https://github.com/DSACMS/codejson-generator" target="_blank" rel"noopener noreferrer">code.json generator,</a> organizations can effortlessly create and validate their code.json files,
ensuring alignment with federal guidelines while showcasing open-source contributions to the broader community.
</p>
<p>
{{ site.description }}
Expand Down
77 changes: 41 additions & 36 deletions app/site/projects.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,6 @@ layout: base
The Centers for Medicare and Medicaid Services develops and supports many open-source projects found in our various
GitHub Organizations.
</p>


<div class="dashboard-container">
<div class="filters-container">
{% comment %} filter by organization {% endcomment %}
Expand Down Expand Up @@ -109,55 +107,63 @@ layout: base
</div>
</div>
</div>

<div class="outer-search-block">
<div class="search-block">
<div class="search-and-sort">

<section aria-label="Small search component">
<form class="usa-search usa-search--small project-search" role="search" id="search-form">
<label class="usa-sr-only" for="search-input">Search</label>
<input
class="usa-input"
id="search-input"
type="search"
name="search-input"
placeholder="Search"
/>
<button class="usa-button" type="submit">
<img
src="{{ site.baseurl }}/assets/img/usa-icons-bg/search--white.svg"
class="usa-search__submit-icon"
alt="Search"
<div class="search-styling">
<label class="usa-sr-only" for="search-input">Search</label>
<input
class="usa-input"
id="search-input"
type="search"
name="search-input"
placeholder="Search"
/>
</button>
<button class="usa-button" type="submit">
<img
src="{{ site.baseurl }}/assets/img/usa-icons-bg/search--white.svg"
class="usa-search__submit-icon"
alt="Search"
/>
</button>
</div>
</form>
</section>

<div class="sort-dropdown sort-styling">
<form class="usa-form sort-dropdown" id="sort-selection-form">
<label class="usa-label" for="sort-selection"></label>
<select class="usa-select select-sort" id="sort-selection" name="sort-selection">
<option valuer="" disabled selected>Sort By</option>
<option value="name">Project Name</option>
<option value="fisma_level">FISMA Compliance Level</option>
<option value="project_type">Project Type</option>
<option value="stargazers_count">Stars</option>
<option value="maturity_model_tier">Maturity Model Tier</option>
<option value="forks_count">Forks</option>
</select>
<div class="sort-outer">
<select class="usa-select select-sort" id="sort-selection" name="sort-selection">
<option valuer="" disabled selected>Sort By</option>
<option value="name">Project Name</option>
<option value="fisma_level">FISMA Compliance Level</option>
<option value="project_type">Project Type</option>
<option value="stargazers_count">Stars</option>
<option value="maturity_model_tier">Maturity Model Tier</option>
<option value="forks_count">Forks</option>
</select>
<svg class="usa-icon filter-icon" aria-hidden="true" focusable="false" role="img">
<use href="{{ site.baseurl }}/assets/img/sprite.svg#filter_list"></use>
</svg>
</div>
</form>

<form class="usa-form project-search" id="sort-direction-form">
<label class="usa-label" for="sort-direction"></label>
<select class="usa-select select-sort" id="sort-direction" name="sort-direction">
<option valuer="" disabled selected>Sort Direction</option>
<option value="ascending">Ascending</option>
<option value="descending">Descending</option>
</select>
<div class="sort-outer">
<select class="usa-select select-sort" id="sort-direction" name="sort-direction">
<option valuer="" disabled selected>Sort Direction</option>
<option value="ascending">Ascending</option>
<option value="descending">Descending</option>
</select>
<svg class="usa-icon filter-icon" aria-hidden="true" focusable="false" role="img">
<use href="{{ site.baseurl }}/assets/img/sprite.svg#sort_arrow"></use>
</svg>
</div>
</form>
</div>

</div>
<div class="padding-left-05" id="filter-tags"></div>
<div id="content-container">
Expand All @@ -169,7 +175,6 @@ layout: base
{% assign currentPage = pagination.pageNumber | default: 1 | minus: 1 %}
{% assign startIndex = currentPage | times: itemsPerPage %}
{% assign paginatedProjects = projects | slice: startIndex, itemsPerPage %}

{% for project in paginatedProjects %}
{% include "project-card.liquid" %}
{% endfor %}
Expand Down
Loading
Loading