Merge branch 'main' of github.com:formkit/tempo

docs/components/HeadingSection.vue

@@ -11,6 +11,7 @@ const isInView = useElementVisibility(heading)
   <h2
     class="text-2xl data-[size=sm]:text-base mb-8"
     ref="heading"
+    :id="title.toLowerCase().replace(/ /g, '-')"
     :data-size="size"
   >
     <span class="sr-only">{{ title }}</span>

docs/components/content/Data.vue

@@ -182,7 +182,7 @@ const fns: Record<
       data that is commonly needed to build applications.
     </p>
     <div v-for="(def, fn) in fns">
-      <h3>{{ fn }}</h3>
+      <h3 :id="fn">{{ fn }}</h3>
       <FunctionReference
         :function="fn"
         :arguments="def.arguments"

docs/components/content/Format.vue

@@ -61,7 +61,7 @@ import { format } from "@formkit/tempo"
       <code>Intl.DateTimeFormat</code> to decide how to most appropriately
       display the date.
     </p>
-    <h3>Date styles</h3>
+    <h3 id="date-styles">Date styles</h3>
     <p>
       When using the <code>format()</code> function, the second argument can be
       any of the following date styles, or an object with a date property (ex:
@@ -119,7 +119,7 @@ import { format } from "@formkit/tempo"
     </table>
     <CodeExample file="format-styles-date" />
 
-    <h3>Time styles</h3>
+    <h3 id="time-styles">Time styles</h3>
     <p>
       To use a time style format you must provide an object as the second
       argument of the <code>format()</code> function with a time property. You
@@ -319,7 +319,7 @@ import { format } from "@formkit/tempo"
       </tbody>
     </table>
     <CodeExample file="format-tokens" />
-    <h3>Format options</h3>
+    <h3 id="format-options">Format options</h3>
     <p>
       The <code>format()</code> function can accept an object of options as its
       argument to provide more control over the output.
@@ -371,21 +371,21 @@ import { format } from "@formkit/tempo"
         },
       ]"
     />
-    <h3>Timezone</h3>
+    <h3 id="format-timezone">Timezone</h3>
     <p>
       The <code>tz</code> option allows you to format the provided date from the
       “perspective” of any given timezone.
     </p>
     <CodeExample file="format-tz" />
-    <h3>Part filter</h3>
+    <h3 id="format-part-filter">Part filter</h3>
     <p>
       The <code>partFilter</code> option allows you to filter out parts of the
       formatted date. The function is called with each "part" of the formatted
       date and should return a boolean indicating whether or not to include that
       part in final formatted string.
     </p>
     <CodeExample file="format-part-filter" />
-    <h3>Genitive case</h3>
+    <h3 id="format-genitive">Genitive case</h3>
     <p>
       Some languages have a genitive case for months and weekdays. When the
       genitive option is set to true, the month and weekday names will be in the

docs/components/content/Parse.vue

@@ -73,7 +73,7 @@ const parseOptionsProperties = [
       that not a standardized format (like ISO 8601)
     </CalloutInfo>
     <CodeExample file="parse-basic" />
-    <h3>Parsing options</h3>
+    <h3 id="parse-options">Parsing options</h3>
     <p>
       The <code>parse</code> function can accept an object of options as its
       argument:
@@ -84,15 +84,15 @@ const parseOptionsProperties = [
       are familiar, but what is <code>partFilter</code> and
       <code>dataOverflow</code>?
     </p>
-    <h3>partFilter</h3>
+    <h3 id="parse-part-filter">partFilter</h3>
     <p>
       The <code>partFilter</code> option gives you fine grained control over
       which pieces and parts of a date you’d like to include in the resulting
       <code>Date</code> object (remember, missing "parts" will default to the
       today’s date at midnight local).
     </p>
     <CodeExample file="part-filter" />
-    <h3>dateOverflow</h3>
+    <h3 id="dateOverflow">dateOverflow</h3>
     <p>
       The <code>dateOverflow</code> option determines how an “out of range” date
       should be parsed (ex: February 30th). Options are

docs/components/content/Timezones.vue

@@ -24,27 +24,27 @@
       region.
     </p>
     <HeadingSection title="Using timezones" size="sm" class="text-sky-500" />
-    <h3>Creating timezone dates</h3>
+    <h3 id="timezones-dates">Creating timezone dates</h3>
     <p>
       The most basic timezone aware function is <code>tzDate</code> which allows
       you to create a new Date object at in a particular timezone.
     </p>
     <CodeExample file="tzDate" />
-    <h3>Formatting timezones</h3>
+    <h3 id="timezones-format">Formatting timezones</h3>
     <p>
       The <code>format</code> function can accept a <code>tz</code> option to
       format a date in a specific timezone.
     </p>
     <CodeExample file="tzFormat" />
-    <h3>Calculating offsets</h3>
+    <h3 id="timezones-offsets">Calculating offsets</h3>
     <p>
       Tempo uses the <code>Intl.DateTimeFormat</code> API to extract timezone
       information, that makes working with timezones as simple as possible. The
       <code>offset()</code> function calculates the amount of offset between any
       two timezones (given in <code>+-HHmm</code>).
     </p>
     <CodeExample file="offset" />
-    <h3>Removing offsets</h3>
+    <h3 id="timezones-remove-offset">Removing offsets</h3>
     <p>
       To display the time of a <code>Date</code> object in a specific timezone
       you only need to remove the relative offset. Since Tempo operates with
@@ -59,7 +59,7 @@
       <code>offset</code> function is useful for formatting and display purposes
       but actually represents a fundamentally different absolute moment in time.
     </CalloutWarning>
-    <h3>Applying offsets</h3>
+    <h3 id="timezones-apply-offsets">Applying offsets</h3>
     <p>
       If you are creating a car rental booking app you want the pickup time to
       always be relative to the local time of the pickup location. The