jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-18 13:25:32 -04:00
Code Issues Activity

fresh <PageTitle> look

Browse Source
This commit is contained in:
Jake Jarvis
2025-03-08 13:09:29 -05:00
parent 5cfa86f690
commit 2d6fc82f71
29 changed files with 346 additions and 401 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/projects/page.module.css
View File

@@ -5,16 +5,16 @@
align-items: flex-start;
width: 100%;
line-height: 1.1;
gap: 1em;
}
.card {
flex-grow: 1;
margin: 0.6em;
width: 370px;
padding: 1.2em 1.2em 0.8em 1.2em;
border: 1px solid var(--colors-kindaLight);
border-radius: var(--radii-corner);
font-size: 0.85em;
font-size: 0.9em;
color: var(--colors-mediumDark);
transition: border var(--transitions-fade);
}

159
app/projects/page.tsx
View File

@@ -1,5 +1,4 @@
import { graphql } from "@octokit/graphql";
import Content from "../../components/Content";
import PageTitle from "../../components/PageTitle";
import Link from "../../components/Link";
import RelativeTime from "../../components/RelativeTime";
@@ -111,94 +110,92 @@ export default async function Page() {
return (
<>
<PageTitle>💾 Projects</PageTitle>
<PageTitle canonical="/projects">Projects</PageTitle>
<Content>
<div className={styles.grid}>
{repos?.map((repo) => (
<div key={repo.name} className={styles.card}>
<Link
// @ts-ignore
href={repo.url}
className={styles.name}
>
{repo.name}
</Link>
<div className={styles.grid}>
{repos?.map((repo) => (
<div key={repo.name} className={styles.card}>
<Link
// @ts-ignore
href={repo.url}
className={styles.name}
>
{repo.name}
</Link>
{repo.description && <p className={styles.description}>{repo.description}</p>}
{repo.description && <p className={styles.description}>{repo.description}</p>}
<div className={styles.meta}>
{repo.language && (
<div className={styles.metaItem}>
{repo.language.color && (
<span className={styles.metaLanguage} style={{ backgroundColor: repo.language.color }} />
)}
{repo.language.name}
</div>
)}
{repo.stars && repo.stars > 0 && (
<div className={styles.metaItem}>
<Link
// @ts-ignore
href={`${repo.url}/stargazers`}
title={`${commaNumber(repo.stars)} ${repo.stars === 1 ? "star" : "stars"}`}
plain
className={styles.metaLink}
>
<GoStar className={styles.metaIcon} />
{commaNumber(repo.stars)}
</Link>
</div>
)}
{repo.forks && repo.forks > 0 && (
<div className={styles.metaItem}>
<Link
// @ts-ignore
href={`${repo.url}/network/members`}
title={`${commaNumber(repo.forks)} ${repo.forks === 1 ? "fork" : "forks"}`}
plain
className={styles.metaLink}
>
<GoRepoForked className={styles.metaIcon} />
{commaNumber(repo.forks)}
</Link>
</div>
)}
{/* only use relative "time ago" on client side, since it'll be outdated via SSG and cause hydration errors */}
<div className={styles.meta}>
{repo.language && (
<div className={styles.metaItem}>
<RelativeTime date={repo.updatedAt} verb="Updated" staticFormat="MMM D, YYYY" />
{repo.language.color && (
<span className={styles.metaLanguage} style={{ backgroundColor: repo.language.color }} />
)}
{repo.language.name}
</div>
)}
{repo.stars && repo.stars > 0 && (
<div className={styles.metaItem}>
<Link
// @ts-ignore
href={`${repo.url}/stargazers`}
title={`${commaNumber(repo.stars)} ${repo.stars === 1 ? "star" : "stars"}`}
plain
className={styles.metaLink}
>
<GoStar className={styles.metaIcon} />
{commaNumber(repo.stars)}
</Link>
</div>
)}
{repo.forks && repo.forks > 0 && (
<div className={styles.metaItem}>
<Link
// @ts-ignore
href={`${repo.url}/network/members`}
title={`${commaNumber(repo.forks)} ${repo.forks === 1 ? "fork" : "forks"}`}
plain
className={styles.metaLink}
>
<GoRepoForked className={styles.metaIcon} />
{commaNumber(repo.forks)}
</Link>
</div>
)}
{/* only use relative "time ago" on client side, since it'll be outdated via SSG and cause hydration errors */}
<div className={styles.metaItem}>
<RelativeTime date={repo.updatedAt} verb="Updated" staticFormat="MMM D, YYYY" />
</div>
</div>
))}
</div>
</div>
))}
</div>
<p
style={{
textAlign: "center",
marginBottom: 0,
fontWeight: 500,
}}
>
<Link href={`https://github.com/${config.authorSocial.github}`}>
View more on{" "}
<SiGithub
style={{
display: "inline",
width: "1.2em",
height: "1.2em",
verticalAlign: "-0.2em",
margin: "0 0.15em",
fill: "var(--colors-text)",
}}
/>{" "}
GitHub...
</Link>
</p>
</Content>
<p
style={{
textAlign: "center",
marginBottom: 0,
fontWeight: 500,
}}
>
<Link href={`https://github.com/${config.authorSocial.github}`}>
View more on{" "}
<SiGithub
style={{
display: "inline",
width: "1.2em",
height: "1.2em",
verticalAlign: "-0.2em",
margin: "0 0.15em",
fill: "var(--colors-text)",
}}
/>{" "}
GitHub...
</Link>
</p>
</>
);
}