Add ucla-opensource page

components/Navbar.tsx

@@ -18,6 +18,9 @@ function Navbar(): JSX.Element {
           <Link href="/projects">
             <a>projects</a>
           </Link>
+          <Link href="/ucla-opensource">
+            <a>ucla-opensource</a>
+          </Link>
           <Link href="/contribute">
             <a>contribute</a>
           </Link>

components/ProjectGrid.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import ProjectCard from '../components/ProjectCard';
+import {Project, GitHubColors} from '../util';
+
+export interface ProjectsProps {
+  projects: Project[];
+  githubColors: GitHubColors
+}
+
+function ProjectGrid({projects, githubColors}: ProjectsProps): JSX.Element {
+  return (
+    <div className="row same-height-grid">
+      {projects.length > 0
+        ? projects.map((project, i) => {
+          return (
+            <div className="col-4" key={project.name}>
+              <ProjectCard project={project} vertical preload={i < 3} githubColors={githubColors} />
+            </div>
+          );
+        })
+        : <h2>No results found</h2>
+      }
+    </div>
+  );
+}
+
+export default ProjectGrid;

pages/projects.tsx

@@ -2,15 +2,9 @@ import { GetStaticProps } from 'next';
 import { NextSeo } from 'next-seo';
 import React, { useState } from 'react';
 import Layout from '../components/Layout';
-import ProjectCard from '../components/ProjectCard';
+import ProjectGrid, {ProjectsProps} from '../components/ProjectGrid';
 import SearchFilter from '../components/SearchFilter/SearchFilter';
-import { getProjects, Project, GitHubColors, getGithubColors } from '../util';
-
-
-interface ProjectsProps {
-  projects: Project[];
-  githubColors: GitHubColors
-}
+import { getProjects, getGithubColors } from '../util';
 
 function Projects({ projects, githubColors }: ProjectsProps): JSX.Element {
 
@@ -46,18 +40,7 @@ function Projects({ projects, githubColors }: ProjectsProps): JSX.Element {
           setFilteredProjects={setFilteredProjects}
         />
         <hr/>
-        <div className="row same-height-grid">
-          {filteredProjects.length > 0
-            ? filteredProjects.map((project, i) => {
-              return (
-                <div className="col-4" key={project.name}>
-                  <ProjectCard project={project} vertical preload={i < 3} githubColors={githubColors} />
-                </div>
-              );
-            })
-            : <h2>No results found</h2>
-          }
-        </div>
+        <ProjectGrid projects={filteredProjects} githubColors = {githubColors}/>
       </div>
     </Layout>
   );

pages/ucla-opensource.tsx

@@ -0,0 +1,67 @@
+import { GetStaticProps } from 'next';
+import { NextSeo } from 'next-seo';
+import React, { useState } from 'react';
+import Layout from '../components/Layout';
+import ProjectGrid from '../components/ProjectGrid';
+import SearchFilter from '../components/SearchFilter/SearchFilter';
+import { getUclaOpenSource, Project, GitHubColors, getGithubColors } from '../util';
+
+
+interface ProjectsProps {
+  projects: Project[];
+  githubColors: GitHubColors
+}
+
+function Projects({ projects, githubColors }: ProjectsProps): JSX.Element {
+
+  // projects is a master list of all the projects that we fetched, filteredProjects is the one that we render
+  // to the user
+  const [filteredProjects, setFilteredProjects] = useState(projects);
+
+  return (
+    <Layout>
+      <div className="container">
+        <NextSeo
+          title="ucla-opensource | open source at UCLA"
+          description="a heads-up overview of open source projects at UCLA"
+          openGraph={{
+            images: [{
+              url: 'https://opensource.uclaacm.com/logo.png',
+              width: 1200,
+              height: 1200,
+              alt: 'The ACM at UCLA logo',
+            }],
+            site_name: 'open source at UCLA',
+          }}
+        />
+        <h1>
+          ucla-opensource
+        </h1>
+        <p>
+          a (work-in-progress) heads-up overview of open source projects at UCLA.
+        </p>
+        <hr />
+        <SearchFilter
+          projects={projects}
+          setFilteredProjects={setFilteredProjects}
+        />
+        <hr/>
+        <ProjectGrid projects={filteredProjects} githubColors = {githubColors}/>
+      </div>
+    </Layout>
+  );
+}
+
+export default Projects;
+
+export const getStaticProps: GetStaticProps<ProjectsProps> = async () => {
+  const projects = await getUclaOpenSource();
+  const githubColors = await getGithubColors();
+  return {
+    props: {
+      projects,
+      githubColors: githubColors,
+    },
+    revalidate: 3600,
+  };
+};

util/projectRequest.ts

@@ -1,44 +1,43 @@
 import { Octokit } from '@octokit/core';
 import { paginateRest } from '@octokit/plugin-paginate-rest';
+// import {EndpointOptions} from '@octokit/types';
 import githubColorsFixture from '../data/githubColors.json';
-import { Project, ACMCommitteeTopics, GitHubColors } from './types';
+import { Project, ACMCommitteeTopics, GitHubColors, GitHubRepo } from './types';
 
-export async function getProjects(): Promise<Project[]> {
+async function getGithubRepos(request: string, defaultUseUclaLogo: boolean): Promise<Project[]> {
   const PaginatedOctokit = Octokit.plugin(paginateRest);
   const octokit = new PaginatedOctokit();
-  const projectsResponse = await octokit.paginate('GET /orgs/{org}/repos', {
-    org: 'uclaacm',
+
+  const response: GitHubRepo[] = await octokit.paginate('GET /search/repositories?q=ucla-opensource+in:topics', {
     per_page: 100,
   });
 
-  const filteredData = projectsResponse.filter((repo) => !repo.archived);
+  const filteredData = response.filter((repo) => !repo.archived);
   const sortedData = filteredData.sort(
     (a, b) =>
       new Date(b.updated_at as string).getTime() - new Date(a.updated_at as string).getTime(),
   );
-  return sortedData.map((repo) =>
-    repo.homepage
-      ? {
-        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,
-      }
-      : {
-        name: repo.name,
-        description: repo.description ?? '',
-        repo: repo.html_url ?? '',
-        lang: repo.language ?? '',
-        topics: repo.topics ?? [],
-        image: getImageFromTopics(repo.topics).image,
-        alt: getImageFromTopics(repo.topics).alt,
-      },
+  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, defaultUseUclaLogo).image,
+    alt: getImageFromTopics(repo.topics, defaultUseUclaLogo).alt,
+  }),
   );
 }
+
+export async function getUclaOpenSource(): Promise<Project[]> {
+  return getGithubRepos('GET /search/repositories?q=ucla-opensource+in:topics', true);
+}
+
+export async function getProjects(): Promise<Project[]> {
+  return getGithubRepos('GET /orgs/uclaacm/repos', false);
+}
+
 export async function getGithubColors(): Promise<GitHubColors> {
   const githubColorsResponse = await fetch(
     'https://raw.githubusercontent.com/ozh/github-colors/master/colors.json',
@@ -100,16 +99,19 @@ function topicToImg(topic: string): ImageInfo | false {
   }
 }
 
-export function getImageFromTopics(topics: string[] | undefined): ImageInfo {
+export function getImageFromTopics(topics: string[] | undefined, defaultUseUclaLogo: boolean): ImageInfo {
   if (topics) {
     for (const topic of topics) {
       const committeeImg = topicToImg(topic);
       if (committeeImg) return committeeImg;
     }
   }
   //return acm logo if no committee topics
-  return {
-    image: '/logo.png',
-    alt: "ACM @ UCLA's Logo",
-  } as ImageInfo;
+  return defaultUseUclaLogo ? {
+    image: '/ucla-logo.jpeg',
+    alt: 'UCLA Bruin Logo'}
+    : {
+      image: '/logo.png',
+      alt: "ACM @ UCLA's Logo",
+    };
 }

util/types.ts

@@ -37,3 +37,5 @@ export type GitHubEvent =
   Endpoints['GET /orgs/{org}/events']['response']['data'][number];
 
 export type GitHubEventPayload = GitHubEvent['payload'];
+
+export type GitHubRepo = Endpoints['GET /orgs/{org}/repos']['response']['data'][number];