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

feature(translated-content): add github contributor profile list UI #11755

Closed
wants to merge 2 commits into from
Closed

feature(translated-content): add github contributor profile list UI #11755

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
37f1d8b
feature(translated-content): add github contributor profile list
hochan222 Sep 6, 2024
475f52a
remove: log
hochan222 Sep 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
26 changes: 26 additions & 0 deletions client/src/document/organisms/article-footer/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,32 @@
margin-top: 0.25rem;
}

.contributors-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
}

.contributor-item {
transition: transform 0.2s ease-in-out;
}

.contributor-item:hover {
transform: translateY(-5px);
}

.contributor-card {
color: #333;
text-decoration: none;
}

.contributor-avatar {
border-radius: 50%;
box-shadow: 5px 5px 5px rgb(128, 128, 128);
height: 40px;
margin-bottom: 10px;
width: 40px;
}

.last-modified-date {
margin-bottom: 0;
margin-top: 2rem;
Expand Down
62 changes: 61 additions & 1 deletion client/src/document/organisms/article-footer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
import { useState } from "react";
import useSWR from "swr";
import { Button } from "../../../ui/atoms/button";
import { OnGitHubLink } from "../../on-github";
import { ReactComponent as ArticleFooterSVG } from "../../../assets/article-footer/article-footer.svg";
import "./index.scss";
import { useGleanClick } from "../../../telemetry/glean-context";
import { ARTICLE_FOOTER, THUMBS } from "../../../telemetry/constants";
import { DEFAULT_LOCALE } from "../../../../../libs/constants";
import { WRITER_MODE } from "../../../env";

Check warning on line 10 in client/src/document/organisms/article-footer/index.tsx

View workflow job for this annotation

GitHub Actions / lint 

'WRITER_MODE' is defined but never used

Check warning on line 10 in client/src/document/organisms/article-footer/index.tsx

View workflow job for this annotation

GitHub Actions / build 

'WRITER_MODE' is defined but never used

Check warning on line 10 in client/src/document/organisms/article-footer/index.tsx

View workflow job for this annotation

GitHub Actions / build 

'WRITER_MODE' is defined but never used

Check warning on line 10 in client/src/document/organisms/article-footer/index.tsx

View workflow job for this annotation

GitHub Actions / lighthouse 

'WRITER_MODE' is defined but never used
import { Loading } from "../../../ui/atoms/loading";

export function LastModified({ value, locale }) {
if (!value) {
Expand All @@ -28,6 +31,62 @@
);
}

export function Contributors({ url }) {
const contributorJSONUrl = `https://api.github.com/repos/mdn/translated-content/commits?path=files/${url}/index.md`;

const { error, data = [] } = useSWR<any>(contributorJSONUrl, async (url) => {
const response = await fetch(url);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should provide GitHub Token when available: https://docs.github.com/en/actions/security-for-github-actions/security-guides/automatic-token-authentication#example-2-calling-the-rest-api

Ref: Rate limits for the REST API

Copy link
Member Author

@hochan222 hochan222 Sep 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for comment.

The current structure is one that is called on every page. There are limitations in calling the GitHub API, so caching(server..?) or other ways seem to be necessary.

For this reason I have created a discussion below regarding this!

if (!response.ok) {
const text = await response.text();
throw new Error(`${response.status} on ${url}: ${text}`);
}
return await response.json();
});

if (error) {
return null;
} else if (!data) {
return <Loading />;
}

const uniqueContributors = Array.from(
new Set(data.map((commit) => commit.author.login))
).map((login) => {
const commit = data.find((c) => c.author.login === login);
return {
id: login,
profile: commit.author.html_url,
avatar: commit.author.avatar_url,
};
}) as Array<{ id: string; profile: string; avatar: string }>;

return (
<section className="contributors-container">
<header>
<h6>{uniqueContributors.length} Contributors</h6>
</header>
<ul className="contributors-grid">
{[...uniqueContributors].map(({ id, profile, avatar }) => (
<li key={id} className="contributor-item">
<a
className="contributor-card"
href={profile}
target="_blank"
rel="noopener noreferrer"
>
<img
className="contributor-avatar"
src={avatar}
alt={`${id}'s avatar`}
/>
</a>
</li>
))}
</ul>
</section>
);
}

export function Authors({ url }) {
return (
<a href={`${url}/contributors.txt`} rel="nofollow">
Expand Down Expand Up @@ -133,11 +192,12 @@
</fieldset>

<Contribute locale={doc.locale} />
{doc.isActive && <OnGitHubLink doc={doc} />}
<p className="last-modified-date">
<LastModified value={doc.modified} locale={doc.locale} /> by{" "}
<Authors url={doc.mdn_url} />.
</p>
{doc.isActive && <OnGitHubLink doc={doc} />}
<Contributors url={doc.source.folder} />
</div>
</aside>
);
Expand Down
Loading