Add ucla-opensource page #125
Conversation
There was a problem hiding this comment.
Thanks for doing this Amy! There's a couple linked issues that I put similar to what Matt left for my PR, and aside from that we can probably change the default image with each ucla-opensource project as well as clean up some code smells by making the project display its own function. Great work though!
pages/ucla-opensource.tsx
Outdated
| setFilteredProjects={setFilteredProjects} | ||
| /> | ||
| <hr/> | ||
| <div className="row same-height-grid"> |
There was a problem hiding this comment.
This grid of projects is pretty much exactly the same as the projects page. Maybe we can export the grid as a React component which takes in an array of projects and shows them on the screen? That way, if we want to edit the layout of the ucla-opensource page or the projects page, it'll be easier to handle the differences between them!
| @@ -3,6 +3,43 @@ import { paginateRest } from '@octokit/plugin-paginate-rest'; | |||
| import githubColorsFixture from '../data/githubColors.json'; | |||
| import { Project, ACMCommitteeTopics, GitHubColors } from './types'; | |||
|
|
|||
| export async function getUclaOpenSource(): Promise<Project[]> { | |||
| const PaginatedOctokit = Octokit.plugin(paginateRest); | |||
| const octokit = new PaginatedOctokit(); | |||
There was a problem hiding this comment.
Similar comment to this pr!
| const octokit = new PaginatedOctokit(); | |
| const octokit = new Octokit.plugin(paginateRest); |
instead of
const PaginatedOctokit = Octokit.plugin(paginateRest);
const octokit = new PaginatedOctokit();
util/projectRequest.ts
Outdated
| (a, b) => | ||
| new Date(b.updated_at as string).getTime() - new Date(a.updated_at as string).getTime(), | ||
| ); | ||
| return sortedData.map((repo) => |
There was a problem hiding this comment.
Similar issue to this pr!
This entire function can be replaced by
| return sortedData.map((repo) => | |
| return sortedData.map((repo) => ({ | |
| name: repo.name, | |
| description: repo.description ?? '', | |
| link: repo.homepage ?? '', | |
| repo: repo.html_url, | |
| lang: repo.language ?? '', | |
| topics: repo.topics ?? [], | |
| image: getImageFromTopics(repo.topics).image, | |
| alt: getImageFromTopics(repo.topics).alt, | |
| }) |
| ucla-opensource | ||
| </h1> | ||
| <p> | ||
| a (work-in-progress) heads-up overview of open source projects at UCLA. |
There was a problem hiding this comment.
maybe call it a collection of open source projects at UCLA instead of an overview?
util/projectRequest.ts
Outdated
| repo: repo.html_url, | ||
| lang: repo.language ?? '', | ||
| topics: repo.topics ?? [], | ||
| image: getImageFromTopics(repo.topics).image, |
There was a problem hiding this comment.
For our placeholder image, maybe we can use the UCLA logo instead of the ACM logo as these are projects by UCLA students? down the line, we can do stuff like grabbing the social media preview image for each project and displaying that, but that can be a stretch goal for later
Adds a ucla-opensource page containing repositories tagged with topic 'ucla-opensource'. Closes #124
