chore: lighthouse audit fixes

docs/assets/css/main.css

@@ -90,7 +90,7 @@ html.dark::before {
   @apply mb-2;
 }
 
-.page-section h4 {
+.page-section h3 {
   @apply text-lg font-bold mb-3 dark:text-gray-100;
 }
 .page-section table {

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">
-      <h4>{{ fn }}</h4>
+      <h3>{{ 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>
-    <h4>Date styles</h4>
+    <h3>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" />
 
-    <h4>Time styles</h4>
+    <h3>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" />
-    <h4>Format options</h4>
+    <h3>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"
         },
       ]"
     />
-    <h4>Timezone</h4>
+    <h3>Timezone</h3>
     <p>
       The <code>tz</code> option allows you to format the provided date from the
       perspective of any given timezone.
     </p>
     [CODE EXAMPLE HERE]
-    <h4>Part filter</h4>
+    <h3>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>
     [CODE EXAMPLE HERE]
-    <h4>Genitive case</h4>
+    <h3>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/Installation.vue

@@ -14,26 +14,46 @@ import { defineProps } from "vue"
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
       <CopyCode>
         <div class="flex items-center">
-          <img src="~/assets/pnpm.svg" aria-hidden class="w-4 mr-3" />pnpm add
-          @formkit/tempo
+          <img
+            src="~/assets/pnpm.svg"
+            loading="lazy"
+            aria-hidden
+            class="w-4 mr-3"
+            alt="pnpm"
+          />pnpm add @formkit/tempo
         </div>
       </CopyCode>
       <CopyCode>
         <div class="flex items-center">
-          <img src="~/assets/npm.svg" aria-hidden class="w-4 mr-3" />npm install
-          @formkit/tempo
+          <img
+            src="~/assets/npm.svg"
+            loading="lazy"
+            aria-hidden
+            class="w-4 mr-3"
+            alt="npm"
+          />npm install @formkit/tempo
         </div>
       </CopyCode>
       <CopyCode>
         <div class="flex items-center">
-          <img src="~/assets/yarn.svg" aria-hidden class="w-4 mr-3" />yarn add
-          @formkit/tempo
+          <img
+            src="~/assets/yarn.svg"
+            loading="lazy"
+            aria-hidden
+            class="w-4 mr-3"
+            alt="yarn"
+          />yarn add @formkit/tempo
         </div>
       </CopyCode>
       <CopyCode>
         <div class="flex items-center">
-          <img src="~/assets/bun.svg" aria-hidden class="w-4 mr-3" />bun install
-          @formkit/tempo
+          <img
+            src="~/assets/bun.svg"
+            loading="lazy"
+            aria-hidden
+            class="w-4 mr-3"
+            alt="bun"
+          />bun install @formkit/tempo
         </div>
       </CopyCode>
     </div>

docs/components/content/Modify.vue

@@ -266,7 +266,7 @@ const fns: Record<
       do not change the date argument).
     </p>
     <div v-for="(def, fn) in fns">
-      <h4>{{ fn }}</h4>
+      <h3>{{ fn }}</h3>
       <FunctionReference
         :function="fn"
         :arguments="def.arguments"

docs/components/content/Parse.vue

@@ -73,7 +73,7 @@ const parseOptionsProperties = [
       that not a standardized format (like ISO 8601)
     </CalloutInfo>
     <CodeExample file="parse-basic" />
-    <h4>Parsing options</h4>
+    <h3>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>
-    <h4>partFilter</h4>
+    <h3>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" />
-    <h4>dateOverflow</h4>
+    <h3>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

@@ -28,27 +28,27 @@
       region.
     </p>
     <HeadingSection title="Using timezones" size="sm" class="text-sky-500" />
-    <h4>Creating timezone dates</h4>
+    <h3>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" />
-    <h4>Formatting timezones</h4>
+    <h3>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" />
-    <h4>Calculating offsets</h4>
+    <h3>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" />
-    <h4>Removing offsets</h4>
+    <h3>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
@@ -63,7 +63,7 @@
       <code>offset</code> function is useful for formatting and display purposes
       but actually represents a fundamentally different absolute moment in time.
     </CalloutWarning>
-    <h4>Applying offsets</h4>
+    <h3>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

docs/nuxt.config.ts

@@ -6,6 +6,7 @@ export default defineNuxtConfig({
       title: "Tempo • Dates by FormKit",
       htmlAttrs: {
         class: "dark:bg-slate-900 dark:text-white",
+        lang: "en",
       },
     },
   },