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

Refactor projects page #294

Merged
merged 24 commits into from
Dec 6, 2024
Merged

Refactor projects page #294

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
853d164
Create menu toggle
DinneK Nov 26, 2024
f256c15
Change navigation menu to toggle
DinneK Nov 26, 2024
963c656
Reafactor home main
DinneK Nov 29, 2024
6b675d6
Refactor footer
DinneK Nov 29, 2024
0b130a2
Refactor orgs page
DinneK Nov 29, 2024
c2b0fa7
Add functionality to projects search
DinneK Dec 1, 2024
207edab
Add pagination
DinneK Dec 3, 2024
5e233c9
Fix search to hide org name when org.length === 0
DinneK Dec 3, 2024
a86938f
Fix project filtering
DinneK Dec 3, 2024
eb4a372
Fix check boxes
DinneK Dec 3, 2024
1ae823c
Fix sort functioanlity
DinneK Dec 4, 2024
9953c78
Fix sort functionality
DinneK Dec 4, 2024
e181739
Merge branch 'dev' into Refactor-projects-page
DinneK Dec 4, 2024
d52ddd2
Update app/.eleventy.js
DinneK Dec 4, 2024
10e3cc5
Update app/site/_includes/banner.liquid
DinneK Dec 4, 2024
0c0c458
Update app/site/_includes/project-card.liquid
DinneK Dec 4, 2024
7eb8e40
Update app/site/index.liquid
DinneK Dec 4, 2024
5a878a2
Update app/site/index.liquid
DinneK Dec 4, 2024
0ffd6c5
Update app/src/css/style.css
DinneK Dec 5, 2024
8a82ec3
Update app/src/css/style.css
DinneK Dec 5, 2024
aaf91af
Update app/src/css/style.css
DinneK Dec 5, 2024
f2165a6
fix report link
DinneK Dec 5, 2024
2fe83d7
Add conditional for local and in prod testing
DinneK Dec 5, 2024
0925791
Updated project card url
natalialuzuriaga Dec 6, 2024
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/.eleventy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ module.exports = function (eleventyConfig) {

eleventyConfig.addPassthroughCopy({
"src/img": "assets/img",
"src/js" : "src/js",
"site/img": "assets/img",
"site/_includes/css": "css",
"site/_includes/js": "assets/js",
Expand Down
9 changes: 5 additions & 4 deletions app/site/_data/projects.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ const path = require("path");

module.exports = function () {
const dataDirectory = path.join(__dirname);
var projects = [];
const projects = [];

// Read the list of organization directories
var orgDirectories = fs.readdirSync(dataDirectory);
const orgDirectories = fs.readdirSync(dataDirectory);

// Iterate through organization directories
orgDirectories.forEach((orgDirectory) => {
Expand Down Expand Up @@ -37,7 +37,8 @@ module.exports = function () {
}
});
}

});

return projects;
return projects
};
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 @@ -31,3 +31,4 @@
<link rel="stylesheet" href="{{ site.url }}/css/style.css">

<script type="module" src="{{ "/assets/js/index.js" | url}}"></script>
<script type="module" src="{{ "/src/js/nav.js" | url}}"></script>
6 changes: 4 additions & 2 deletions app/site/_includes/banner.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@
</p>
</div>
</div>
{% comment %} <section
<!-- {% comment %} -->
<section
class="usa-banner"
aria-label="Official website of the United States government"
>
Expand Down Expand Up @@ -100,4 +101,5 @@
</div>
</div>
</div>
</section> {% endcomment %}
</section>
<!-- {% endcomment %} -->
68 changes: 46 additions & 22 deletions app/site/_includes/nav.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,63 @@
<div class="usa-overlay"></div>
<header class="usa-header usa-header--basic">
<div class="usa-nav-container">
<div class="usa-navbar">
<div class="usa-navigation-container">
<div class="usa-nav-bar">
<div class="title">
<img src="{{ "/assets/img/cms-logo.jpg" | url }}" class="logo">
<h1>Metrics Website</h1>
</div>
<div class="usa-logo">
<em class="usa-logo__text">
<a href="{{ "/" | url}}" title="{{site.title}}">{{ site.title }}</a>
</em>
</div>
<button type="button" class="usa-menu-btn">Menu</button>
</div>
<nav aria-label="Primary navigation" class="usa-nav">
<button type="button" class="usa-nav__close">
<img src="{{"/assets/img/usa-icons/close.svg" | url}}" role="img" alt="Close">
<svg class="usa-icon--size-7" 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">
<li class="usa-nav__primary-item">
<a href="{{ "/" | url}}" class="usa-nav-link {% if page.url == "/" %}usa-current{% endif %}">
<span>Home</span>
</a>
</li>
<li class="usa-nav__primary-item">
<a
href="{{ "/organizations/" | url}}"
class="usa-nav-link {% if page.url contains "/organizations/" %}usa-current{% endif %}"
>
<span>Organizations</span>
</a>
</li>
<li class="usa-nav__primary-item">
<a
href="{{ "/projects/" | url}}"
class="usa-nav-link {% if page.url contains "/projects/" %}usa-current{% endif %}"
<button
type="button"
class="usa-accordion__button usa-nav__link"
aria-expanded="false"
aria-controls="basic-nav-section-one"
>
<span>Projects</span>
</a>
<svg
class="usa-icon--size-7 toggle-icon"
aria-hidden="true"
focusable="false"
role="img"
>
<use href="{{ site.baseurl }}/assets/img/sprite.svg#menu">
</svg>
</button>
<ul id="basic-nav-section-one" class="usa-nav__submenu">
<li class="usa-nav__primary-item">
<a href="{{ "/" | url}}" class="usa-nav-link {% if page.url == "/" %}usa-current{% endif %}">
<span>Home</span>
</a>
</li>
<li class="usa-nav__primary-item">
<a
href="{{ "/organizations/" | url}}"
class="usa-nav-link {% if page.url contains "/organizations/" %}usa-current{% endif %}"
>
<span>Organizations</span>
</a>
</li>
<li class="usa-nav__primary-item">
<a
href="{{ "/projects/" | url}}"
class="usa-nav-link {% if page.url contains "/projects/" %}usa-current{% endif %}"
>
<span>Projects</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
Expand Down
100 changes: 54 additions & 46 deletions app/site/_includes/project-card.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,58 @@
{% capture new_link_var %}/{{ repo.owner }}/{{ repo.name }}/{% endcapture %}
<li class="usa-card project-card tablet:grid-col-12" id="{{ repo.name }}" org-name="{{ repo.owner }}">
<div class="usa-card__container">
<div class="usa-card__header">
<h2 class="usa-card__heading">
<a href="{{ base_url }}/{{ repo.owner }}/{{ repo.name }}/" class="text-no-underline">{{ repo.name }}</a>
</h2>
</div>
<div class="usa-card__body">
<div>{{ repo.description }}</div>
</div>
<div class="usa-card__footer">
<span class="star-count" style="margin-right: 15px;">
<svg class="usa-icon" aria-labelledby="star-count-{{repo.name}}-title" role="img">
<title id="github-{{repo.name}}-title"> Star Count</title>
{% lucide "star" %}
</svg>
<span> {{ repo.stargazers_count }} </span>
</span>
<span class="fork-count" style="margin-right: 15px;">
<svg class="usa-icon" aria-labelledby="fork-count-{{repo.name}}-title" role="img">
<title id="github-{{repo.name}}-title"> Fork Count</title>
{% lucide "git-fork" %}
</svg>
<span> {{ repo.forks_count }} </span>
</span>
<span class="issue-count" style="margin-right: 15px;">
<svg class="usa-icon" aria-labelledby="issue-count-{{ repo.name }}-title" role="img">
<title id="github-{{repo.name}}-title"> Issue Count</title>
{% lucide "circle-dot" %}
</svg>
<span> {{ repo.issues_count }} </span>
</span>
<span class="pull-request-count" style="margin-right: 15px;">
<svg class="usa-icon" aria-labelledby="pull-request-count-{{repo.name}}-title" role="img">
<title id="github-{{repo.name}}-title"> Pull Request Count</title>
{% lucide "git-pull-request" %}
</svg>
<span> {{ repo.pull_requests_count }} </span>
</span>
<span class="watchers-count">
<svg class="usa-icon" aria-labelledby="watchers-count-{{repo.name}}-title" role="img">
<title id="github-{{repo.name}}-title"> Watchers Count</title>
{% lucide "eye" %}
</svg>
<span> {{ repo.watchers_count }} </span>
</span>
<li class="usa-card project-card grid-col-12" id="{{ repo.name }}" org-name="{{ repo.owner }}">
<div class="usa-card-outer">
<div class="usa-card-middle">
<a href="{{ base_url }}/{{ repo.owner }}/{{ repo.name }}/" class="text-no-underline">
DinneK marked this conversation as resolved.
Show resolved Hide resolved

<div class="usa-card__container">
<div class="usa-card__header">
<h2 class="usa-card__heading">
{{ repo.name }}
<!-- <a href="{{ base_url }}/{{ repo.owner }}/{{ repo.name }}/" class="text-no-underline">{{ repo.name }}</a> -->
DinneK marked this conversation as resolved.
Show resolved Hide resolved
</h2>
</div>
<div class="usa-card__body">
<div>{{ repo.description }}</div>
</div>
<div class="usa-card__footer">
<span class="star-count" style="margin-right: 15px;">
<svg class="usa-icon" aria-labelledby="star-count-{{repo.name}}-title" role="img">
<title id="github-{{repo.name}}-title"> Star Count</title>
{% lucide "star" %}
</svg>
<span> {{ repo.stargazers_count }} </span>
</span>
<span class="fork-count" style="margin-right: 15px;">
<svg class="usa-icon" aria-labelledby="fork-count-{{repo.name}}-title" role="img">
<title id="github-{{repo.name}}-title"> Fork Count</title>
{% lucide "git-fork" %}
</svg>
<span> {{ repo.forks_count }} </span>
</span>
<span class="issue-count" style="margin-right: 15px;">
<svg class="usa-icon" aria-labelledby="issue-count-{{ repo.name }}-title" role="img">
<title id="github-{{repo.name}}-title"> Issue Count</title>
{% lucide "circle-dot" %}
</svg>
<span> {{ repo.issues_count }} </span>
</span>
<span class="pull-request-count" style="margin-right: 15px;">
<svg class="usa-icon" aria-labelledby="pull-request-count-{{repo.name}}-title" role="img">
<title id="github-{{repo.name}}-title"> Pull Request Count</title>
{% lucide "git-pull-request" %}
</svg>
<span> {{ repo.pull_requests_count }} </span>
</span>
<span class="watchers-count">
<svg class="usa-icon" aria-labelledby="watchers-count-{{repo.name}}-title" role="img">
<title id="github-{{repo.name}}-title"> Watchers Count</title>
{% lucide "eye" %}
</svg>
<span> {{ repo.watchers_count }} </span>
</span>
</div>
</div>
</a>
</div>
</div>
</li>
15 changes: 11 additions & 4 deletions app/site/_layouts/base.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,16 @@
{% include 'assets.liquid' %}
</head>
<body>
{% include 'banner.liquid' %}
{% include 'nav.liquid' %}
{{ content | raw }}
{% include 'footer.liquid' %}
<header>
{% include 'banner.liquid' %}
{% include 'nav.liquid' %}
</header>
<main>
{{ content | raw }}
</main>
<footer>
{% include 'footer.liquid' %}
</footer>
</body>
<!-- <script type="module" src="{{ "/src/js/nav.js" | url}}"></script> -->
</html>
98 changes: 54 additions & 44 deletions app/site/index.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,57 +2,67 @@
layout: base
---
<div class="grid-container">
<div class="title">
<img src="{{ "/assets/img/cms-logo.jpg" | url }}" class="logo">
<h1>Metrics Website</h1>
</div>
<p>
{{ site.description }}
</p>
<ul class="usa-card-group">
<section class="home-page-description">
<div class="description-styling">
<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.
DinneK marked this conversation as resolved.
Show resolved Hide resolved
</p>
<p>
{{ site.description }}
</p>
</section>
<ul class="usa-card-group-home">
<li class="usa-card tablet:grid-col-6">
<div class="usa-card__container">
<div class="usa-card__header">
<h2 class="usa-card__heading">
<svg class="usa-icon" aria-labelledby="organizations" role="img">
<title id="organizations-category"> Organizations </title>
{% lucide "building-2" %}
</svg>
<a href="{{ "/organizations/" | url}}" class="text-no-underline"
>Organizations
<span class="chevrons-right">
<svg class="usa-icon usa-icon--size-2" aria-hidden="true" focusable="false" role="img">
<use xlink:href= {{ "/assets/img/sprite.svg#navigate_far_next" | url }}></use>
<div class="usa-card-outer">
<div class="usa-card-middle">
<a href="{{ "/organizations/" | url}}" class="href-home">
<div class="usa-card__container">
<div class="home-icon-container">
<svg class="usa-icon--size-5" aria-hidden="true" focusable="false" role="img">
<use href="{{ site.baseurl }}/assets/img/sprite.svg#groups"></use>
</svg>
</span>
</a>
</h2>
</div>
<div class="usa-card__body">
<p>View Metrics on our GitHub Organizations</p>
</div>
<div class="usa-card__header">
<h2 class="usa-card__heading-home">
Organizations
</h2>
DinneK marked this conversation as resolved.
Show resolved Hide resolved
<div class="usa-card__body">
<p>View Metrics on our GitHub Organizations</p>
</div>
</div>
</div>
</a>
</div>
</div>
</li>
<li class="usa-card tablet:grid-col-6">
<div class="usa-card__container">
<div class="usa-card__header">
<h2 class="usa-card__heading">
<svg class="usa-icon" aria-labelledby="projects" role="img">
<title id="projects-category"> Projects </title>
{% lucide "folder-git-2" %}
</svg>
<a href="{{ "/projects/" | url}}" class="text-no-underline"
>Projects
<span class="chevrons-right">
<svg class="usa-icon usa-icon--size-2" aria-hidden="true" focusable="false" role="img">
<use xlink:href={{ "/assets/img/sprite.svg#navigate_far_next" | url }} ></use>
<div class="usa-card-outer">
<div class="usa-card-middle">
<a href="{{ "/projects/" | url}}" class="href-home">
<div class="usa-card__container">
<div class="home-icon-container">
<svg class="usa-icon--size-5" aria-hidden="true" focusable="false" role="img">
<use href="{{ site.baseurl }}/assets/img/sprite.svg#folder_open"></use>
</svg>
</span>
</a>
</h2>
</div>
<div class="usa-card__body">
<p>View Metrics on our {{ projects.length }}+ Repositories</p>
</div>
<div class="usa-card__header">
<h2 class="usa-card__heading-home">
Projects
</h2>
<div class="usa-card__body">
<p>View Metrics on our {{ projects.length }}+ Repositories</p>
</div>
</div>
</div>
</a>
</div>
</div>
</li>
Expand Down
Loading
Loading