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

fix dayjs defaults

Browse Source
This commit is contained in:
jake
2022-06-12 11:58:58 -04:00
parent bde473041a
commit cef74d4e97
4 changed files with 19 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/RelativeTime/RelativeTime.tsx
+3 -3
View File
@@ -1,5 +1,5 @@
import { useHasMounted } from "../../hooks/use-has-mounted"; import { useHasMounted } from "../../hooks/use-has-mounted";
import { formatDate, formatDateISO, formatTimeAgo } from "../../lib/helpers/format-date"; import { formatDate, formatTimeAgo } from "../../lib/helpers/format-date";
export type RelativeTimeProps = { export type RelativeTimeProps = {
date: string | number | Date; date: string | number | Date;
@@ -14,9 +14,9 @@ const RelativeTime = ({ date, verb, staticFormat, className }: RelativeTimeProps
const hasMounted = useHasMounted(); const hasMounted = useHasMounted();
return ( return (
<time dateTime={formatDateISO(date)} title={formatDate(date)} className={className}> <time dateTime={formatDate(date)} title={formatDate(date, "MMM D, YYYY, h:mm A z")} className={className}>
{verb && `${verb} `} {verb && `${verb} `}
{hasMounted ? formatTimeAgo(date, true) : `on ${formatDate(date, staticFormat)}`} {hasMounted ? formatTimeAgo(date, { suffix: true }) : `on ${formatDate(date, staticFormat)}`}
</time> </time>
); );
}; };
components/Time/Time.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import { formatDate, formatDateISO } from "../../lib/helpers/format-date"; import { formatDate } from "../../lib/helpers/format-date";
export type TimeProps = { export type TimeProps = {
date: string | number | Date; date: string | number | Date;
@@ -8,7 +8,7 @@ export type TimeProps = {
const Time = ({ date, format = "MMM D", className }: TimeProps) => { const Time = ({ date, format = "MMM D", className }: TimeProps) => {
return ( return (
<time dateTime={formatDateISO(date)} title={formatDate(date)} className={className}> <time dateTime={formatDate(date)} title={formatDate(date, "MMM D, YYYY, h:mm A z")} className={className}>
{formatDate(date, format)} {formatDate(date, format)}
</time> </time>
); );
lib/helpers/format-date.ts
+12 -19
View File
@@ -7,6 +7,8 @@ import dayjsAdvancedFormat from "dayjs/plugin/advancedFormat";
import "dayjs/locale/en"; import "dayjs/locale/en";
import { timeZone } from "../config"; import { timeZone } from "../config";
// normalize timezone and locale across the site, both server and client side, to prevent hydration errors by returning
// an instance of dayjs with these defaults set.
const IsomorphicDayJs = (date?: dayjs.ConfigType): dayjs.Dayjs => { const IsomorphicDayJs = (date?: dayjs.ConfigType): dayjs.Dayjs => {
// plugins // plugins
dayjs.extend(dayjsUtc); dayjs.extend(dayjsUtc);
@@ -15,28 +17,19 @@ const IsomorphicDayJs = (date?: dayjs.ConfigType): dayjs.Dayjs => {
dayjs.extend(dayjsLocalizedFormat); dayjs.extend(dayjsLocalizedFormat);
dayjs.extend(dayjsAdvancedFormat); dayjs.extend(dayjsAdvancedFormat);
// defaults return dayjs.tz(date, timeZone).locale("en");
dayjs.locale("en");
dayjs.tz.setDefault(timeZone);
return dayjs(date);
}; };
// normalize timezone across the site, both server and client side, to prevent hydration errors. // simple wrapper around dayjs.format()
// format defaults to "Apr 4, 2022, 3:04 PM EDT", see https://day.js.org/docs/en/parse/string-format#list-of-all-available-parsing-tokens // date defaults to now, format defaults to ISO 8601 (e.g. 2022-04-07T21:53:33-04:00)
export const formatDate = (date?: dayjs.ConfigType, formatStr = "MMM D, YYYY, h:mm A z") => { export const formatDate = (date?: dayjs.ConfigType, formatStr?: string) => {
return IsomorphicDayJs(date).tz(timeZone).format(formatStr); return IsomorphicDayJs(date).format(formatStr);
}; };
// returns a timezone-less, machine-readable string. // returns the human-friendly difference between now and given date (e.g. "5 minutes", "9 months", etc.)
export const formatDateISO = (date?: dayjs.ConfigType) => { // set `{ suffix: true }` to include the "... ago" or "in ..." for past/future
return IsomorphicDayJs(date).toISOString(); export const formatTimeAgo = (date: dayjs.ConfigType, options?: { suffix?: boolean }) => {
};
// returns "5 minutes ago", "1 year ago", "in 9 months", etc.
// set `suffix = false` to exclude the "in" or "ago"
export const formatTimeAgo = (date: dayjs.ConfigType, suffix = true) => {
return IsomorphicDayJs().isBefore(date) return IsomorphicDayJs().isBefore(date)
? IsomorphicDayJs(date).toNow(!suffix) ? IsomorphicDayJs(date).toNow(!options?.suffix)
: IsomorphicDayJs(date).fromNow(!suffix); : IsomorphicDayJs(date).fromNow(!options?.suffix);
}; };
lib/helpers/parse-notes.ts
+2 -2
View File
@@ -5,7 +5,7 @@ import matter from "gray-matter";
import { marked } from "marked"; import { marked } from "marked";
import removeMarkdown from "remove-markdown"; import removeMarkdown from "remove-markdown";
import pMap from "p-map"; import pMap from "p-map";
import { formatDateISO } from "./format-date"; import { formatDate } from "./format-date";
import { baseUrl } from "../config"; import { baseUrl } from "../config";
import { NOTES_DIR } from "../config/constants"; import { NOTES_DIR } from "../config/constants";
@@ -45,7 +45,7 @@ export const getNoteData = async (
}), }),
slug, slug,
permalink: `${baseUrl}/notes/${slug}/`, permalink: `${baseUrl}/notes/${slug}/`,
date: formatDateISO(data.date), // validate/normalize the date string provided from front matter date: formatDate(data.date), // validate/normalize the date string provided from front matter
}, },
content, content,
}; };