jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-15 05:45:33 -04:00
Code Issues Activity

separate repository grid styles/logic from the card component

Browse Source
This commit is contained in:
Jake Jarvis
2021-12-31 15:28:28 -05:00
parent d0e00b197c
commit a6499fd5bb
10 changed files with 64 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/page-header/Header.module.scss
View File

@@ -20,6 +20,6 @@
@media screen and (max-width: 800px) {
.header {
padding: 0.5em 1.25em;
padding: 0.75em 1.25em;
}
}

16
components/page-header/Menu.module.scss
View File

@@ -43,12 +43,16 @@
}
@media screen and (max-width: 800px) {
.item {
margin-left: 1.75em;
.menu {
max-width: 380px;
justify-content: space-between;
flex-grow: 1;
}
.item {
.icon {
width: 1.75em;
height: 1.75em;
width: 1.8em;
height: 1.8em;
}
// hide text next to emojis on mobile
@@ -56,8 +60,4 @@
display: none;
}
}
.theme_toggle {
margin-left: 1.4em;
}
}

6
components/projects/RepositoryCard.module.scss → components/projects/RepoCard.module.scss
View File

@@ -1,8 +1,6 @@
.card {
flex-grow: 1;
width: 416px; // magic number
width: 100%;
padding: 1em 1.2em;
margin: 0.6em;
border: 1px solid;
border-radius: 0.5em;
font-size: 0.85em;
@@ -15,7 +13,7 @@
}
.description {
margin: 0.25em 0 0.75em;
margin: 0.4em 0 0.7em;
line-height: 1.7;
}

4
components/projects/RepositoryCard.tsx → components/projects/RepoCard.tsx
View File

@@ -1,7 +1,7 @@
import { intlFormat, formatDistanceToNowStrict, parseISO } from "date-fns";
import { StarIcon, RepoForkedIcon } from "@primer/octicons-react";
import styles from "./RepositoryCard.module.scss";
import styles from "./RepoCard.module.scss";
type Props = {
name: string;
@@ -16,7 +16,7 @@ type Props = {
updatedAt: string;
};
export default function RepositoryCard({ name, url, description, language, stars, forks, updatedAt }: Props) {
export default function RepoCard({ name, url, description, language, stars, forks, updatedAt }: Props) {
return (
<div className={styles.card}>
<a className={styles.name} href={url} target="_blank" rel="noopener noreferrer">

12
components/projects/RepositoryGrid.module.scss
View File

@@ -1,12 +0,0 @@
.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
align-items: flex-start;
width: 100%;
}
.view_more {
text-align: center;
margin-bottom: 0;
}

21
components/projects/RepositoryGrid.tsx
View File

@@ -1,21 +0,0 @@
import RepositoryCard from "./RepositoryCard";
import styles from "./RepositoryGrid.module.scss";
export default function RepositoryGrid({ repos }) {
return (
<>
<div className={styles.grid}>
{repos.map((repo) => (
<RepositoryCard key={repo.name} {...repo} />
))}
</div>
<p className={styles.view_more}>
<a href="https://github.com/jakejarvis?tab=repositories" target="_blank" rel="noopener noreferrer">
View more on GitHub...
</a>
</p>
</>
);
}

2
pages/contact.tsx
View File

@@ -7,7 +7,7 @@ import { MailIcon, LockIcon } from "../components/icons";
export default function Contact() {
return (
<Layout>
<Container title="✉️ Contact Me">
<Container title="Contact Me">
<PageTitle
title={
<>

15
pages/feed.atom.ts
View File

@@ -3,16 +3,13 @@ import { buildFeed } from "../lib/build-feed";
import type { GetServerSideProps } from "next";
export const getServerSideProps: GetServerSideProps = async (context) => {
if (context && context.res) {
const { res } = context;
const notes = getAllNotes(["title", "date", "image", "slug", "description"]);
const feed = buildFeed(notes);
const notes = getAllNotes(["title", "date", "image", "slug", "description"]);
const feed = buildFeed(notes);
res.setHeader("content-type", "application/atom+xml");
res.write(feed.atom1());
res.end();
}
const { res } = context;
res.setHeader("content-type", "application/atom+xml");
res.write(feed.atom1());
res.end();
return {
props: {},

15
pages/feed.xml.ts
View File

@@ -3,16 +3,13 @@ import { buildFeed } from "../lib/build-feed";
import type { GetServerSideProps } from "next";
export const getServerSideProps: GetServerSideProps = async (context) => {
if (context && context.res) {
const { res } = context;
const notes = getAllNotes(["title", "date", "image", "slug", "description"]);
const feed = buildFeed(notes);
const notes = getAllNotes(["title", "date", "image", "slug", "description"]);
const feed = buildFeed(notes);
res.setHeader("content-type", "application/rss+xml");
res.write(feed.rss2());
res.end();
}
const { res } = context;
res.setHeader("content-type", "application/rss+xml");
res.write(feed.rss2());
res.end();
return {
props: {},

41
pages/projects.tsx
View File

@@ -2,14 +2,14 @@ import { graphql } from "@octokit/graphql";
import Layout from "../components/Layout";
import Container from "../components/Container";
import PageTitle from "../components/page/PageTitle";
import RepositoryGrid from "../components/projects/RepositoryGrid";
import RepoCard from "../components/projects/RepoCard";
import { ProjectsIcon } from "../components/icons";
import type { GetStaticProps } from "next";
export default function Projects({ repos }) {
return (
<Layout>
<Container title="👨‍💻 Projects">
<Container title="Projects">
<PageTitle
title={
<>
@@ -17,7 +17,42 @@ export default function Projects({ repos }) {
</>
}
/>
<RepositoryGrid repos={repos} />
<div>
{repos.map((repo) => (
<div key={repo.name} className="repo_card">
<RepoCard {...repo} />
</div>
))}
<style jsx>{`
div {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
width: 100%;
}
div .repo_card {
flex-grow: 1;
margin: 0.5em;
width: 400px;
}
`}</style>
</div>
<p>
<a href="https://github.com/jakejarvis?tab=repositories" target="_blank" rel="noopener noreferrer">
View more on GitHub...
</a>
<style jsx>{`
p {
text-align: center;
margin-bottom: 0;
}
`}</style>
</p>
</Container>
</Layout>
);