jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-06-29 23:45:58 -04:00
Code Issues Activity

date-fns -> dayjs (much smaller), numeral -> toLocaleString

Browse Source
This commit is contained in:
Jake Jarvis
2021-10-30 12:09:53 -04:00
parent 302a88d6ff
commit 25c0f2d59d
4 changed files with 18 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/src/counter.js
+1 -2
View File
@@ -1,5 +1,4 @@
import fetch from "cross-fetch";
import numeral from "numeral";
import canonicalUrl from "get-canonical-url";
import urlParse from "url-parse";
@@ -31,7 +30,7 @@ if (wrapper && canonical) {
.then((response) => response.json())
.then((data) => {
// pretty number and units
const hitsComma = numeral(data.hits).format("0,0");
const hitsComma = data.hits.toLocaleString("en-US");
const hitsPlural = data.hits === 1 ? "view" : "views";
wrapper.title = `${hitsComma} ${hitsPlural}`;
assets/js/src/projects.js
+12 -13
View File
@@ -2,8 +2,9 @@ import fetch from "cross-fetch";
import { render } from "lit-html";
import { html } from "lit-html/static.js";
import { ifDefined } from "lit-html/directives/if-defined.js";
import numeral from "numeral";
import { format, formatDistanceToNowStrict, parseJSON } from "date-fns";
import dayjs from "dayjs";
import dayjsLocalizedFormat from "dayjs/plugin/localizedFormat.js";
import dayjsRelativeTime from "dayjs/plugin/relativeTime.js";
import twemoji from "twemoji";
// API endpoint (sort by stars, limit to 12)
@@ -14,6 +15,9 @@ const PROJECTS_ENDPOINT = "/api/projects/?top&limit=12";
const wrapper = document.getElementById("github-cards");
if (wrapper) {
dayjs.extend(dayjsLocalizedFormat);
dayjs.extend(dayjsRelativeTime);
// this is a total sh*tshow, but safer than setting one big string via innerHTML :)
// TODO: consider making this a real LitElement?
const template = (repo) => html`
@@ -34,7 +38,7 @@ if (wrapper) {
${repo.stars > 0
? html`<div
class="repo-meta-item"
title="${numeral(repo.stars).format("0,0")} ${repo.stars === 1 ? "star" : "stars"}"
title="${repo.stars.toLocaleString("en-US")} ${repo.stars === 1 ? "star" : "stars"}"
>
<svg viewBox="0 0 16 16" height="16" width="16">
<path
@@ -42,13 +46,13 @@ if (wrapper) {
d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"
></path>
</svg>
<span>${numeral(repo.stars).format("0,0")}</span>
<span>${repo.stars.toLocaleString("en-US")}</span>
</div>`
: null}
${repo.forks > 0
? html`<div
class="repo-meta-item"
title="${numeral(repo.forks).format("0,0")} ${repo.forks === 1 ? "fork" : "forks"}"
title="${repo.forks.toLocaleString("en-US")} ${repo.forks === 1 ? "fork" : "forks"}"
>
<svg viewBox="0 0 16 16" height="16" width="16">
<path
@@ -56,17 +60,12 @@ if (wrapper) {
d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"
></path>
</svg>
<span>${numeral(repo.forks).format("0,0")}</span>
<span>${repo.forks.toLocaleString("en-US")}</span>
</div>`
: null}
<div
class="repo-meta-item"
title="${format(parseJSON(repo.updatedAt), "MMM d, yyyy, h:mm aa z")}"
>
<span>
Updated ${formatDistanceToNowStrict(parseJSON(repo.updatedAt), { addSuffix: true })}
</span>
<div class="repo-meta-item" title="${dayjs(repo.updatedAt).format("lll Z")}">
<span>Updated ${dayjs(repo.updatedAt).fromNow()}</span>
</div>
</div>
`;