jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-21 11:01:17 -04:00
Code Issues Activity

dayjs timezone detection & link to stars/forks on GitHub from /projects

Browse Source
This commit is contained in:
Jake Jarvis
2021-11-24 17:30:23 -05:00
parent 74519b9266
commit 3d445c5c8d
2 changed files with 48 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
assets/js/src/projects.js
View File

@@ -1,10 +1,12 @@
import { h, render, Fragment } from "preact"; import { h, render, Fragment } from "preact";
import { useState, useEffect } from "preact/hooks"; import { useState, useEffect } from "preact/hooks";
import fetch from "unfetch"; import fetch from "unfetch";
import dayjs from "dayjs";
import dayjsLocalizedFormat from "dayjs/plugin/localizedFormat.js";
import dayjsRelativeTime from "dayjs/plugin/relativeTime.js";
import { parse as parseEmoji } from "imagemoji"; import { parse as parseEmoji } from "imagemoji";
import dayjs from "dayjs";
import dayjsAdvancedFormat from "dayjs/plugin/advancedFormat.js";
import dayjsLocalizedFormat from "dayjs/plugin/localizedFormat.js";
import dayjsTimezone from "dayjs/plugin/timezone.js";
import dayjsRelativeTime from "dayjs/plugin/relativeTime.js";
// shared react components: // shared react components:
import { StarIcon, RepoForkedIcon } from "@primer/octicons-react"; import { StarIcon, RepoForkedIcon } from "@primer/octicons-react";
@@ -30,12 +32,12 @@ const RepositoryGrid = () => {
// we have data! // we have data!
return ( return (
<Fragment> <>
{repos.map((repo) => ( {repos.map((repo) => (
// eslint-disable-next-line react/jsx-key // eslint-disable-next-line react/jsx-key
<RepositoryCard {...repo} /> <RepositoryCard {...repo} />
))} ))}
</Fragment> </>
); );
}; };
@@ -62,26 +64,34 @@ const RepositoryCard = (repo) => (
)} )}
{repo.stars > 0 && ( {repo.stars > 0 && (
<div <div class="repo-meta-item">
class="repo-meta-item" <a
title={`${repo.stars.toLocaleString("en-US")} ${repo.stars === 1 ? "star" : "stars"}`} href={`${repo.url}/stargazers`}
> title={`${repo.stars.toLocaleString("en-US")} ${repo.stars === 1 ? "star" : "stars"}`}
<StarIcon size={16} fill="currentColor" /> target="_blank"
<span>{repo.stars.toLocaleString("en-US")}</span> rel="noopener noreferrer"
>
<StarIcon size={16} fill="currentColor" />
<span>{repo.stars.toLocaleString("en-US")}</span>
</a>
</div> </div>
)} )}
{repo.forks > 0 && ( {repo.forks > 0 && (
<div <div class="repo-meta-item">
class="repo-meta-item" <a
title={`${repo.forks.toLocaleString("en-US")} ${repo.forks === 1 ? "fork" : "forks"}`} href={`${repo.url}/network/members`}
> title={`${repo.forks.toLocaleString("en-US")} ${repo.forks === 1 ? "fork" : "forks"}`}
<RepoForkedIcon size={16} fill="currentColor" /> target="_blank"
<span>{repo.forks.toLocaleString("en-US")}</span> rel="noopener noreferrer"
>
<RepoForkedIcon size={16} fill="currentColor" />
<span>{repo.forks.toLocaleString("en-US")}</span>
</a>
</div> </div>
)} )}
<div class="repo-meta-item" title={dayjs(repo.updatedAt).format("lll Z")}> <div class="repo-meta-item" title={dayjs(repo.updatedAt).format("lll z")}>
<span>Updated {dayjs(repo.updatedAt).fromNow()}</span> <span>Updated {dayjs(repo.updatedAt).fromNow()}</span>
</div> </div>
</div> </div>
@@ -93,8 +103,13 @@ const wrapper = document.querySelector("div#github-cards");
if (typeof window !== "undefined" && wrapper) { if (typeof window !== "undefined" && wrapper) {
// dayjs plugins: https://day.js.org/docs/en/plugin/loading-into-nodejs // dayjs plugins: https://day.js.org/docs/en/plugin/loading-into-nodejs
dayjs.extend(dayjsAdvancedFormat);
dayjs.extend(dayjsLocalizedFormat); dayjs.extend(dayjsLocalizedFormat);
dayjs.extend(dayjsTimezone);
dayjs.extend(dayjsRelativeTime); dayjs.extend(dayjsRelativeTime);
// https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List
dayjs.tz.setDefault("America/New_York");
render(<RepositoryGrid />, wrapper); render(<RepositoryGrid />, wrapper);
} }

16
assets/sass/pages/_projects.scss
View File

@@ -60,6 +60,21 @@ div.layout-projects {
) )
); );
a {
background: none !important;
padding: 0;
color: inherit;
&:hover {
// octicon will inherit this
@include themes.themed(
(
color: "links",
)
);
}
}
.octicon, .octicon,
span.repo-language-color { span.repo-language-color {
margin-right: 0.5em; margin-right: 0.5em;
@@ -72,7 +87,6 @@ div.layout-projects {
border-radius: 50%; border-radius: 50%;
position: relative; position: relative;
top: 0.175em; top: 0.175em;
margin-right: 0.5em;
} }
} }
} }