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

Landing page changes #172

Merged
merged 5 commits into from
May 31, 2024
Merged

Landing page changes #172

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0f8f6ca
Changes:
AudreyW05 May 13, 2024
542e433
Changes:
AudreyW05 May 21, 2024
7ec5704
Changes:
AudreyW05 May 30, 2024
ec7d1d1
Merge branch 'main' into landing-page-changes
AudreyW05 May 30, 2024
008bcfa
Changes:
AudreyW05 May 30, 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
11 changes: 6 additions & 5 deletions components/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,17 @@ function Layout(props: LayoutProps): JSX.Element {
<Head>
<meta charSet="UTF-8" />
<meta name="title" content="opensource at acm at ucla" />
<meta name="description" content="open source at acm at ucla!"/>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<meta name="description" content="open source at acm at ucla!" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1"
/>

<title>open source at acm at ucla</title>
<link rel="icon" href="/logo.png" />
</Head>
<Navbar />
<main>
{props.children}
</main>
<main>{props.children}</main>
<Footer />
</>
);
Expand Down
49 changes: 18 additions & 31 deletions pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,38 +28,30 @@ export default function Home({
title="open source at ACM at UCLA"
description="at the largest computer science community at UCLA, we care about open-source"
openGraph={{
images: [{
url: 'https://opensource.uclaacm.com/logo.png',
width: 1200,
height: 1200,
alt: 'The ACM at UCLA logo',
}],
images: [
{
url: 'https://opensource.uclaacm.com/logo.png',
width: 1200,
height: 1200,
alt: 'The ACM at UCLA logo',
},
],
site_name: 'open source at ACM at UCLA',
}}
/>
<h1>
open source at{' '}
<ELink link="https://uclaacm.com">
ACM at UCLA
</ELink>
</h1>
<h1>open source at UCLA</h1>
<hr />
<p className="knockout-description">
at the largest computer science community at UCLA,
<br /> <b>we care about open-source.</b>
maintained by <ELink link="https://uclaacm.com">ACM at UCLA</ELink>,
the largest computer science community at UCLA
</p>
<div className="row">
<div className="col-6">
<div className="card">
<div className="card-body">
<Link href="/projects">

<h3>Projects &rarr;</h3>
<p>
All of our projects are open-source! Literally, all of
them.
</p>

<p>Check out current UCLA open source projects!</p>
</Link>
</div>
</div>
Expand All @@ -69,7 +61,7 @@ export default function Home({
<div className="card-body">
<ELink link="https://dev-pathways.netlify.app/">
<h3>Learning &rarr;</h3>
<p>Pick up the skills to write great software.</p>
<p>Pick up the skills to write great software!</p>
</ELink>
</div>
</div>
Expand All @@ -91,10 +83,8 @@ export default function Home({
<div className="card">
<div className="card-body">
<Link href="/contribute">

<h3>Contribute &rarr;</h3>
<p>Make your first pull request with us!</p>

</Link>
</div>
</div>
Expand All @@ -104,7 +94,8 @@ export default function Home({

<h2>featured project</h2>
<ProjectCard
project={randomProject ? randomProject : projects[projNumToDisplay]} preload={true}
project={randomProject ? randomProject : projects[projNumToDisplay]}
preload={true}
githubColors={githubColors}
/>
<h2>what we&apos;ve been doing recently...</h2>
Expand All @@ -116,15 +107,12 @@ export default function Home({
))}
<p>
see more activity{' '}
<ELink link="https://github.com/uclaacm/">
on our org
</ELink>
!
<ELink link="https://github.com/uclaacm/">on our org</ELink>!
</p>
</div>
</div>
</div >
</Layout >
</div>
</Layout>
);
}

Expand All @@ -141,7 +129,6 @@ export const getStaticProps: GetStaticProps = async () => {
});
const recentEvents = eventResponse.data;


const githubColors = await getGithubColors();

const projects = await getProjects();
Expand Down
43 changes: 24 additions & 19 deletions pages/projects.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,12 @@ import ProjectCard from '../components/ProjectCard';
import SearchFilter from '../components/SearchFilter/SearchFilter';
import { getProjects, Project, GitHubColors, getGithubColors } from '../util';


interface ProjectsProps {
projects: Project[];
githubColors: GitHubColors
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);
Expand All @@ -25,38 +23,45 @@ function Projects({ projects, githubColors }: ProjectsProps): JSX.Element {
title="projects | open source at ACM at UCLA"
description="a heads-up overview of the projects that power ACM at UCLA"
openGraph={{
images: [{
url: 'https://opensource.uclaacm.com/logo.png',
width: 1200,
height: 1200,
alt: 'The ACM at UCLA logo',
}],
images: [
{
url: 'https://opensource.uclaacm.com/logo.png',
width: 1200,
height: 1200,
alt: 'The ACM at UCLA logo',
},
],
site_name: 'open source at ACM at UCLA',
}}
/>
<h1>
projects
</h1>
<h1>projects</h1>
<p>
a (work-in-progress) heads-up overview of the projects that power ACM at UCLA.
an overview of all open-source projects affiliated with UCLA,
extending beyond those managed by ACM at UCLA.
</p>
<hr />
<SearchFilter
projects={projects}
setFilteredProjects={setFilteredProjects}
/>
<hr/>
<hr />
<div className="row same-height-grid">
{filteredProjects.length > 0
? filteredProjects.map((project, i) => {
{filteredProjects.length > 0 ? (
filteredProjects.map((project, i) => {
return (
<div className="col-4" key={project.name}>
<ProjectCard project={project} vertical preload={i < 3} githubColors={githubColors} />
<ProjectCard
project={project}
vertical
preload={i < 3}
githubColors={githubColors}
/>
</div>
);
})
: <h2>No results found</h2>
}
) : (
<h2>No results found</h2>
)}
</div>
</div>
</Layout>
Expand Down
Loading