From 5825ed29ad96c1496eeec094b0cec51b2e5e5fff Mon Sep 17 00:00:00 2001 From: Justin Schroeder Date: Thu, 8 Feb 2024 14:17:42 -0500 Subject: [PATCH] docs: adds tiemzone docs --- docs/assets/css/main.css | 8 +++- docs/components/CalloutInfo.vue | 2 +- docs/components/CalloutWarning.vue | 20 +++++++++ docs/components/content/Introduction.vue | 10 +++-- docs/components/content/Modify.vue | 2 +- docs/components/content/Timezones.vue | 54 +++++++++++++++++++++++- docs/examples/applyOffset.ts | 12 ++++++ docs/examples/offset.ts | 18 ++++++++ docs/examples/removeOffset.ts | 12 ++++++ 9 files changed, 129 insertions(+), 9 deletions(-) create mode 100644 docs/components/CalloutWarning.vue create mode 100644 docs/examples/applyOffset.ts create mode 100644 docs/examples/offset.ts create mode 100644 docs/examples/removeOffset.ts diff --git a/docs/assets/css/main.css b/docs/assets/css/main.css index 8b22d43..ffdaf3f 100644 --- a/docs/assets/css/main.css +++ b/docs/assets/css/main.css @@ -2,6 +2,10 @@ @tailwind components; @tailwind utilities; +html { + @apply scroll-smooth; +} + body { @apply bg-body; } @@ -28,11 +32,11 @@ body { } .page-section > ul { - @apply pl-8 text-base text-slate-800 leading-7; + @apply pl-8 text-base text-slate-800 leading-7 mb-8; } .page-section > ul > li { - @apply mb-4; + @apply mb-4 last:mb-0; } .jump-list a { diff --git a/docs/components/CalloutInfo.vue b/docs/components/CalloutInfo.vue index 307ca0c..9739b88 100644 --- a/docs/components/CalloutInfo.vue +++ b/docs/components/CalloutInfo.vue @@ -1,5 +1,5 @@ diff --git a/docs/components/content/Introduction.vue b/docs/components/content/Introduction.vue index 2552b8a..df972ee 100644 --- a/docs/components/content/Introduction.vue +++ b/docs/components/content/Introduction.vue @@ -11,10 +11,12 @@ import { defineProps } from "vue" is built from the ground up to be as small and easy to use as possible.

- Under the hood, Tempo mines JavaScript's - Intl.DateTimeFormat to extract complex data like timezones - offsets and locale aware date formats giving you a simple API to format, - parse, and manipulates dates. + Tempo is best thought of as a collection of utilities for working with + Date objects — an important distinction from other libraries + that provide custom date primitives. Under the hood, Tempo mines + JavaScript's Intl.DateTimeFormat to extract complex data like + timezones offsets and locale aware date formats giving you a simple API to + format, parse, and manipulates dates.

diff --git a/docs/components/content/Modify.vue b/docs/components/content/Modify.vue index f55e5a6..e40f75a 100644 --- a/docs/components/content/Modify.vue +++ b/docs/components/content/Modify.vue @@ -168,7 +168,7 @@ const fns = { ], }, removeOffset: { - description: `Returns a new Date object with the inverse of the specified timezone offset removed. This can be helpful to normalize time information across timezones.`, + description: `Returns a new Date object with the inverse of the specified offset applied. This can be helpful to normalize time information across timezones.`, return: "Date", arguments: [ { diff --git a/docs/components/content/Timezones.vue b/docs/components/content/Timezones.vue index 6a2d07d..9367c12 100644 --- a/docs/components/content/Timezones.vue +++ b/docs/components/content/Timezones.vue @@ -3,6 +3,58 @@ diff --git a/docs/examples/applyOffset.ts b/docs/examples/applyOffset.ts new file mode 100644 index 0000000..15804c8 --- /dev/null +++ b/docs/examples/applyOffset.ts @@ -0,0 +1,12 @@ +import { offset, applyOffset } from "@formkit/tempo" + +// 💡 Pickup at 9:30 in Europe/Lisbon + +// Notice that the time has no offset, thus it is "local": +const d = "2025-03-25 09:30" + +// Lisbon is at UTC+0: +const lisbonOffset = offset(d, "Europe/Lisbon") + +// Apply the offset to the time: +applyOffset(d, lisbonOffset) diff --git a/docs/examples/offset.ts b/docs/examples/offset.ts new file mode 100644 index 0000000..bb2eb58 --- /dev/null +++ b/docs/examples/offset.ts @@ -0,0 +1,18 @@ +import { offset } from "@formkit/tempo" + +const date = new Date() + +// Your browser’s offset to UTC +offset(date) +// Your browser’s offset to Hawaii +offset(date, "Pacific/Honolulu") +// Your Hawaii’s offset to UTC +offset(date, "UTC", "Pacific/Honolulu") +// The offset from London to New York today +offset(date, "Europe/London", "America/New_York") +// The offset from Moscow to Kolkata, India +offset(date, "Europe/Moscow", "Asia/Kolkata") + +// 👀 Dates matter due to DST: +offset("2023-10-25", "Europe/London", "America/New_York") +offset("2023-10-30", "Europe/London", "America/New_York") diff --git a/docs/examples/removeOffset.ts b/docs/examples/removeOffset.ts new file mode 100644 index 0000000..a0cbe51 --- /dev/null +++ b/docs/examples/removeOffset.ts @@ -0,0 +1,12 @@ +import { format, offset, removeOffset } from "@formkit/tempo" + +// rendered at: +const d = new Date() + +// local time: +format(d, "HH:mm") + +const offsetToBerlin = offset(d, "Europe/Berlin") +const adjusted = removeOffset(d, offsetToBerlin) +// The time in Berlin +format(adjusted, "HH:mm")