generated from nhcarrigan/template
feat: add contribute view (#44)
### Explanation Also throw a couple new game screenshots in ### Issue _No response_ ### Attestations - [x] I have read and agree to the [Code of Conduct](https://docs.nhcarrigan.com/community/coc/) - [x] I have read and agree to the [Community Guidelines](https://docs.nhcarrigan.com/community/guide/). - [x] My contribution complies with the [Contributor Covenant](https://docs.nhcarrigan.com/dev/covenant/). ### Dependencies - [x] I have pinned the dependencies to a specific patch version. ### Style - [x] I have run the linter and resolved any errors. - [x] My pull request uses an appropriate title, matching the conventional commit standards. - [x] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request. ### Tests - [ ] My contribution adds new code, and I have added tests to cover it. - [ ] My contribution modifies existing code, and I have updated the tests to reflect these changes. - [x] All new and existing tests pass locally with my changes. - [ ] Code coverage remains at or above the configured threshold. ### Documentation _No response_ ### Versioning _No response_ Reviewed-on: https://codeberg.org/nhcarrigan/portfolio/pulls/44 Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com> Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>
This commit is contained in:
Naomi the Technomancer
@@ -4,7 +4,7 @@
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
import { NextResponse } from "next/server";
|
||||
import { getCodebergData } from "../../../lib/codeberg";
|
||||
import { getCodebergActivty } from "../../../lib/codeberg";
|
||||
import { getGithubData } from "../../../lib/github";
|
||||
|
||||
/**
|
||||
@@ -13,7 +13,7 @@ import { getGithubData } from "../../../lib/github";
|
||||
* @returns The formatted data.
|
||||
*/
|
||||
export async function GET(): Promise<NextResponse> {
|
||||
const codeberg = await getCodebergData();
|
||||
const codeberg = await getCodebergActivty();
|
||||
const github = await getGithubData();
|
||||
|
||||
const normalised: Array<{
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
* @copyright nhcarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
import { NextResponse } from "next/server";
|
||||
import { getCodebergIssues } from "../../../lib/codeberg";
|
||||
|
||||
/**
|
||||
* GET route handler for the activity API.
|
||||
* Loads recent activity from Codeberg and GitHub.
|
||||
* @returns The formatted data.
|
||||
*/
|
||||
export async function GET(): Promise<NextResponse> {
|
||||
const issues = await getCodebergIssues();
|
||||
const normalised = issues.map((issue) => {
|
||||
return {
|
||||
body: issue.body,
|
||||
labels: issue.labels.map((label) => {
|
||||
return label.name;
|
||||
}),
|
||||
number: issue.number,
|
||||
title: issue.title,
|
||||
url: issue.html_url,
|
||||
};
|
||||
});
|
||||
return NextResponse.json(normalised);
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
/**
|
||||
* @copyright nhcarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
"use client";
|
||||
import { type JSX, useEffect, useState } from "react";
|
||||
import { Issue } from "../../components/issue";
|
||||
import { Rule } from "../../components/rule";
|
||||
|
||||
/**
|
||||
* Renders the /contribute page.
|
||||
* @returns A React Component.
|
||||
*/
|
||||
const ContributeComponent = (): JSX.Element => {
|
||||
const [ issues, setIssues ] = useState<
|
||||
Array<{
|
||||
labels: Array<string>;
|
||||
number: number;
|
||||
title: string;
|
||||
url: string;
|
||||
body: string;
|
||||
}>
|
||||
>([]);
|
||||
|
||||
useEffect(() => {
|
||||
void fetch("/api/contribute").
|
||||
then(async(data) => {
|
||||
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
|
||||
return (await data.json()) as Array<{
|
||||
labels: Array<string>;
|
||||
number: number;
|
||||
title: string;
|
||||
url: string;
|
||||
body: string;
|
||||
}>;
|
||||
}).
|
||||
then((data) => {
|
||||
setIssues(data);
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (issues.length === 0) {
|
||||
return (
|
||||
<main className="w-[95%] text-center
|
||||
max-w-4xl m-auto mt-16 mb-16 rounded-lg">
|
||||
<h1 className="text-5xl">{`Open for Contribution~!`}</h1>
|
||||
<section>
|
||||
<p className="text-3xl">{`Loading...`}</p>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="w-[95%] text-center
|
||||
max-w-4xl m-auto mt-16 mb-16 rounded-lg">
|
||||
<h1 className="text-5xl">{`Open for Contribution~!`}</h1>
|
||||
<section>
|
||||
<p className="mb-2">{`Heya! This page lists issues across all of our projects that are currently open for contribution.
|
||||
We'd love to have you work on one!`}</p>
|
||||
<Rule />
|
||||
<ol className="relative border-s border-[--primary] w-4/5 m-auto">
|
||||
{issues.map((act) => {
|
||||
return (
|
||||
<Issue key={act.url} {...act} />
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContributeComponent;
|
||||
@@ -0,0 +1,70 @@
|
||||
/**
|
||||
* @copyright nhcarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
import type { JSX } from "react";
|
||||
|
||||
interface IssueProperties {
|
||||
labels: Array<string>;
|
||||
number: number;
|
||||
title: string;
|
||||
url: string;
|
||||
body: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the view for a Codeberg issue.
|
||||
* @param properties - The issue to render.
|
||||
* @returns A JSX element.
|
||||
*/
|
||||
export const Issue = (properties: IssueProperties): JSX.Element => {
|
||||
const { labels, number, title, url, body } = properties;
|
||||
return (
|
||||
<div className="p-6 mb-2 bg-[--foreground] text-[--background]
|
||||
border border-gray-200 rounded-lg shadow">
|
||||
<h2 className="mb-2 text-2xl font-bold tracking-tight">{`#${number.toString()} ${title}`}</h2>
|
||||
{labels.map((label) => {
|
||||
return (
|
||||
<span
|
||||
className="inline-flex items-center bg-pink-100
|
||||
text-pink-800 text-xsfont-medium px-2.5 py-0.5
|
||||
rounded-full dark:bg-pink-900 dark:text-pink-300"
|
||||
key={label}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
<p className="mb-3 font-normal text-gray-700 dark:text-gray-400">
|
||||
{body}
|
||||
</p>
|
||||
<a
|
||||
className="inline-flex items-center px-3 py-2 text-sm
|
||||
font-medium text-center text-[--foreground] bg-[--background]
|
||||
rounded-lg focus:ring-4 focus:outline-none focus:ring-blue-300
|
||||
dark:focus:ring-blue-800"
|
||||
href={url}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
{`View Issue`}
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="rtl:rotate-180 w-3.5 h-3.5 ms-2"
|
||||
fill="none"
|
||||
viewBox="0 0 14 10"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M1 5h12m0 0L9 1m4 4L9 9"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -133,4 +133,28 @@ export const Games: Array<{
|
||||
name: "V Rising",
|
||||
url: "https://store.steampowered.com/app/1604030/V_Rising/",
|
||||
},
|
||||
{
|
||||
alt: "Digital illustration of a female character in a flowing teal dress standing on a hillside overlooking a fantasy landscape with distant buildings and fields.",
|
||||
img: "aow-3.jpg",
|
||||
name: "Age of Wonders 3",
|
||||
url: "https://store.steampowered.com/app/226840/Age_of_Wonders_III/",
|
||||
},
|
||||
{
|
||||
alt: "Digital illustration of a character in a white and pink dress with bell sleeves and a crown, walking on a dirt path through a forested area with tall grass and flowers.",
|
||||
img: "bannerlord.jpg",
|
||||
name: "Mount & Blade II: Bannerlord",
|
||||
url: "https://store.steampowered.com/app/261550/Mount__Blade_II_Bannerlord/",
|
||||
},
|
||||
{
|
||||
alt: "3D render of an anime-style character with pale skin and light hair, wearing a short purple dress with a textured pattern, standing against a plain gray background.",
|
||||
img: "codevein.jpg",
|
||||
name: "Code Vein",
|
||||
url: "https://store.steampowered.com/app/678960/CODE_VEIN/",
|
||||
},
|
||||
{
|
||||
alt: "Digital artwork of a fantasy character with white hair in a long white dress holding a staff, standing against a backdrop of cloudy skies and distant ruins.",
|
||||
img: "fallen-enchantress.jpg",
|
||||
name: "Fallen Enchantress: Legendary Heroes",
|
||||
url: "https://store.steampowered.com/app/228260/Fallen_Enchantress_Legendary_Heroes/",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -24,6 +24,7 @@ export const NavItems = [
|
||||
{ href: "/ask", text: "Ask Me Anything!" },
|
||||
{ href: "/play", text: "Play with Naomi" },
|
||||
{ href: "/tech", text: "Technologies" },
|
||||
{ href: "/contribute", text: "Contribute to our Projects" },
|
||||
].sort((a, b) => {
|
||||
return a.text.localeCompare(b.text);
|
||||
});
|
||||
|
||||
+8
-4
@@ -43,10 +43,14 @@ export const Play: Array<{
|
||||
},
|
||||
{
|
||||
android: "https://play.google.com/store/apps/details?id=com.yoozoo.jgame.us",
|
||||
ios: "https://apps.apple.com/us/app/echocalypse-scarlet-covenant/id6446244975",
|
||||
name: "Echocalypse: Scarlet Covenant",
|
||||
server: "Aurora (3054310105)",
|
||||
userId: "17754",
|
||||
guild: {
|
||||
id: "100021",
|
||||
name: "NHC",
|
||||
},
|
||||
ios: "https://apps.apple.com/us/app/echocalypse-scarlet-covenant/id6446244975",
|
||||
name: "Echocalypse: Scarlet Covenant",
|
||||
server: "Aurora (3054310105)",
|
||||
userId: "17754",
|
||||
},
|
||||
{
|
||||
android: "https://play.google.com/store/apps/details?id=jp.pokemon.pokemonsleep",
|
||||
|
||||
+110
-14
@@ -163,33 +163,118 @@ interface Comment {
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
interface Issue {
|
||||
id: number;
|
||||
url: string;
|
||||
html_url: string;
|
||||
number: number;
|
||||
user: Owner;
|
||||
original_author: string;
|
||||
original_author_id: number;
|
||||
title: string;
|
||||
body: string;
|
||||
ref: string;
|
||||
assets: Array<unknown>;
|
||||
labels: Array<Label>;
|
||||
milestone: unknown;
|
||||
assignee: unknown;
|
||||
assignees: unknown;
|
||||
state: string;
|
||||
is_locked: boolean;
|
||||
comments: number;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
closed_at: unknown;
|
||||
due_date: unknown;
|
||||
pull_request?: PullRequest;
|
||||
repository: Repo;
|
||||
pin_order: number;
|
||||
}
|
||||
|
||||
interface Label {
|
||||
id: number;
|
||||
name: string;
|
||||
exclusive: boolean;
|
||||
is_archived: boolean;
|
||||
color: string;
|
||||
description: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
interface PullRequest {
|
||||
merged: boolean;
|
||||
merged_at: unknown;
|
||||
draft: boolean;
|
||||
html_url: string;
|
||||
}
|
||||
|
||||
class Codeberg {
|
||||
private cache: Array<ActivityData>;
|
||||
private lastUpdate: Date | null = null;
|
||||
private activityCache: Array<ActivityData>;
|
||||
private readonly issueCache: Array<Issue>;
|
||||
private lastUpdate: Date | null = null;
|
||||
public constructor() {
|
||||
this.cache = [];
|
||||
this.activityCache = [];
|
||||
this.issueCache = [];
|
||||
}
|
||||
|
||||
public async getActivities(): Promise<Array<ActivityData>> {
|
||||
public async getActivitiesWithCache(): Promise<Array<ActivityData>> {
|
||||
// Stale after 6 hours
|
||||
if (this.lastUpdate && Date.now()
|
||||
- this.lastUpdate.getTime() < 6 * 60 * 60 * 1000) {
|
||||
return this.cache;
|
||||
return this.activityCache;
|
||||
}
|
||||
return await this.refreshData().then(() => {
|
||||
return this.cache;
|
||||
return await this.getActivities().then(() => {
|
||||
return this.activityCache;
|
||||
});
|
||||
}
|
||||
|
||||
private async refreshData(): Promise<Codeberg> {
|
||||
const response = await
|
||||
/* istanbul ignore next -- @preserve */
|
||||
public async getIssuesWithCache(): Promise<Array<Issue>> {
|
||||
// Stale after 6 hours
|
||||
if (this.lastUpdate && Date.now()
|
||||
- this.lastUpdate.getTime() < 6 * 60 * 60 * 1000) {
|
||||
return this.issueCache;
|
||||
}
|
||||
return await this.getIssues().then(() => {
|
||||
return this.issueCache;
|
||||
});
|
||||
}
|
||||
|
||||
/* istanbul ignore next -- @preserve */
|
||||
private async getIssues(): Promise<void> {
|
||||
const repositoryRequest
|
||||
= await fetch("https://codeberg.org/api/v1/orgs/nhcarrigan/repos");
|
||||
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
|
||||
const repositoryData = await repositoryRequest.json() as Array<Repo>;
|
||||
for (const repo of repositoryData) {
|
||||
const issueRequest
|
||||
// eslint-disable-next-line no-await-in-loop
|
||||
= await fetch(`https://codeberg.org/api/v1/repos/nhcarrigan/${repo.name}/issues`);
|
||||
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions, no-await-in-loop
|
||||
const issueData = await issueRequest.json() as Array<Issue>;
|
||||
for (const issue of issueData) {
|
||||
const isHelpWanted = issue.labels.some((label) => {
|
||||
return label.name === "help wanted";
|
||||
});
|
||||
const isFirsstTimer = issue.labels.some((label) => {
|
||||
return label.name === "good first issue";
|
||||
});
|
||||
if (isHelpWanted || isFirsstTimer) {
|
||||
this.issueCache.push(issue);
|
||||
}
|
||||
}
|
||||
}
|
||||
this.lastUpdate = new Date();
|
||||
}
|
||||
|
||||
private async getActivities(): Promise<void> {
|
||||
const activityRequest = await
|
||||
// eslint-disable-next-line stylistic/max-len
|
||||
fetch("https://codeberg.org/api/v1/users/naomi-lgbt/activities/feeds?only-performed-by=true");
|
||||
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
|
||||
const data = await response.json() as Array<ActivityData>;
|
||||
this.cache = data;
|
||||
const activityData = await activityRequest.json() as Array<ActivityData>;
|
||||
this.activityCache = activityData;
|
||||
this.lastUpdate = new Date();
|
||||
return this;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -199,6 +284,17 @@ const instantiated = new Codeberg();
|
||||
* Fetches and caches the Codeberg activity.
|
||||
* @returns An array of activity objects.
|
||||
*/
|
||||
export const getCodebergData = async(): Promise<Array<ActivityData>> => {
|
||||
return await instantiated.getActivities();
|
||||
const getCodebergActivty = async(): Promise<Array<ActivityData>> => {
|
||||
return await instantiated.getActivitiesWithCache();
|
||||
};
|
||||
|
||||
/**
|
||||
* Fetches and caches the Codeberg issues.
|
||||
* @returns An array of issue objects, filtered for help wanted and good first issues.
|
||||
*/
|
||||
const getCodebergIssues = async(): Promise<Array<Issue>> => {
|
||||
/* istanbul ignore next -- @preserve */
|
||||
return await instantiated.getIssuesWithCache();
|
||||
};
|
||||
|
||||
export { getCodebergActivty, getCodebergIssues };
|
||||
|
||||
Reference in New Issue
Block a user