diff --git a/assets/js/src/projects.js b/assets/js/src/projects.js index d41e1a7b..621951ff 100644 --- a/assets/js/src/projects.js +++ b/assets/js/src/projects.js @@ -1,10 +1,12 @@ import { h, render, Fragment } from "preact"; import { useState, useEffect } from "preact/hooks"; 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 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: import { StarIcon, RepoForkedIcon } from "@primer/octicons-react"; @@ -30,12 +32,12 @@ const RepositoryGrid = () => { // we have data! return ( - + <> {repos.map((repo) => ( // eslint-disable-next-line react/jsx-key ))} - + ); }; @@ -62,26 +64,34 @@ const RepositoryCard = (repo) => ( )} {repo.stars > 0 && ( -
- - {repo.stars.toLocaleString("en-US")} + )} {repo.forks > 0 && ( -
- - {repo.forks.toLocaleString("en-US")} + )} -
+
Updated {dayjs(repo.updatedAt).fromNow()}
@@ -93,8 +103,13 @@ const wrapper = document.querySelector("div#github-cards"); if (typeof window !== "undefined" && wrapper) { // dayjs plugins: https://day.js.org/docs/en/plugin/loading-into-nodejs + dayjs.extend(dayjsAdvancedFormat); dayjs.extend(dayjsLocalizedFormat); + dayjs.extend(dayjsTimezone); dayjs.extend(dayjsRelativeTime); + // https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List + dayjs.tz.setDefault("America/New_York"); + render(, wrapper); } diff --git a/assets/sass/pages/_projects.scss b/assets/sass/pages/_projects.scss index d2544b60..3e791647 100644 --- a/assets/sass/pages/_projects.scss +++ b/assets/sass/pages/_projects.scss @@ -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, span.repo-language-color { margin-right: 0.5em; @@ -72,7 +87,6 @@ div.layout-projects { border-radius: 50%; position: relative; top: 0.175em; - margin-right: 0.5em; } } }