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

docs/app.vue

@@ -29,10 +29,12 @@ onMounted(async () => {
     <TheSearch />
   </ContainerSection>
   <div
-    class="docs-layout flex w-full mt-20 border-t border-t-slate-300 dark:border-t-purple-950"
+    class="docs-layout flex w-full max-w-full mt-20 border-t border-t-slate-300 dark:border-t-purple-950"
   >
     <TheSidebar />
-    <NuxtPage class="mr-auto pt-20 ml-6 min-[1400px]:ml-10" />
+    <NuxtPage
+      class="min-w-0 pr-4 mr-auto pt-20 w-full max-w-[1000px] ml-6 min-[1400px]:ml-10"
+    />
   </div>
   <TheFooter />
 </template>

docs/assets/css/main.css

@@ -25,7 +25,8 @@ html::before {
   z-index: -1;
   inset: 0;
   width: 100dvw;
-  height: 100dvh;
+  height: 150dvh;
+  background-size: cover;
   background-image: radial-gradient(
       circle at 50% 40%,
       rgba(0, 0, 0, 0),
@@ -76,7 +77,7 @@ body {
 }
 
 .jump-list a {
-  @apply block p-4 rounded-lg cursor-pointer bg-transparent duration-500 border border-slate-300 bg-slate-50 hover:bg-white hover:shadow-md transition-all;
+  @apply block p-4 rounded-lg cursor-pointer bg-transparent duration-300 border border-slate-300 bg-slate-50 hover:bg-white hover:shadow-md transition-all;
   @apply dark:border-purple-950 dark:bg-black/10 dark:hover:bg-purple-950 dark:text-gray-200;
 }
 

docs/components/CalloutInfo.vue

@@ -1,6 +1,6 @@
 <template>
   <aside
-    class="bg-sky-200 p-4 rounded-lg text-slate-800 leading-8 mb-8 dark:bg-sky-800 dark:text-sky-50 dark:[&_code]:!border-0 dark:[&_code]:!text-sky-400"
+    class="bg-sky-200 p-4 rounded-lg text-slate-800 leading-normal lg:leading-8 mb-8 dark:bg-sky-800 dark:text-sky-50 dark:[&_code]:!border-0 dark:[&_code]:!text-sky-400"
   >
     <svg
       xmlns="http://www.w3.org/2000/svg"

docs/components/CalloutWarning.vue

@@ -5,7 +5,8 @@
     p-4
     rounded-lg
     text-slate-800
-    leading-8 
+    leading-normal 
+    lg:leading-8
     mb-8
 
     dark:bg-pink-900

docs/components/CodeExample.client.vue

@@ -117,9 +117,14 @@ const stopWatch = watch(el, () => {
       rounded-lg
       my-8
       md:my-12
-      mdl:-mr-8
-      lg:-mr-28
-      xl:-mr-48
+      md:-mr-2
+      min-[850px]:-mr-10
+      min-[900px]:-mr-20
+      min-[1000px]:-mr-40
+      lg:-mr-4
+      min-[1100px]:-mr-[10vw]
+      min-[1200px]:-mr-[16vw]
+      min-[1600px]:-mr-64
       shadow-sm
       bg-[#f9f9f9] ${'' /* --vs-editor-background */}
       after:-z-10
@@ -133,15 +138,17 @@ const stopWatch = watch(el, () => {
       dark:after:bg-purple-900
     `"
   >
-    <div class="md:w-1/2" ref="el"></div>
+    <div class="md:w-2/3 min-[1200px]:w-1/2" ref="el"></div>
     <div
       :class="`
-        md:w-1/2
+        md:w-1/3
+        min-[1200px]:w-1/2
         bg-slate-200
         border
         border-l-slate-300
         font-mono
-        text-sm
+        text-xs
+        md:text-sm
         p-4
         overflow-auto
         rounded-bl-lg
@@ -159,7 +166,7 @@ const stopWatch = watch(el, () => {
       <ul v-if="result">
         <li
           v-for="logs in result"
-          class="text-nowrap h-6 text-slate-800 text-sm empty:hidden md:empty:block dark:text-purple-300"
+          class="text-nowrap h-[21px] text-slate-800 text-sm empty:hidden md:empty:block dark:text-purple-300"
         >
           {{ logs ? logs.join(", ") : "" }}
         </li>

docs/components/FunctionReference.vue

@@ -14,7 +14,8 @@ const props = withDefaults(defineProps<FunctionRef>(), {
       rounded-lg
       p-3
       font-mono
-      text-sm
+      text-xs
+      md:text-sm
       mb-8
       border
       border-slate-300

docs/components/GitHubStars.vue

@@ -9,7 +9,7 @@ const { data, pending, error } = useLazyFetch<{ stargazers_count: number }>(
     <div role="status" class="absolute top-[2.5px]" v-if="pending">
       <svg
         aria-hidden="true"
-        class="block w-4 h-4 text-gray-200 animate-spin fill-black opacity-20"
+        class="block w-3 h-3 sm:w-4 sm:h-4 text-gray-200 animate-spin fill-black opacity-20"
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"

docs/components/ObjectReference.vue

@@ -12,7 +12,8 @@ defineProps<{
       rounded-lg
       p-3
       font-mono
-      text-base
+      text-xs
+      md:text-sm
       mb-8
       border
       border-slate-300

docs/components/PageSection.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page-section max-w-3xl mx-auto my-16">
+  <div class="page-section max-w-3xl mr-auto my-16">
     <slot />
   </div>
 </template>

docs/components/SuperHeader.vue

@@ -20,7 +20,8 @@
       :class="`
         group/logo
         head-message
-        text-sm
+        text-xs
+        md:text-sm
         flex
         transition-all
         text-slate-600
@@ -37,7 +38,9 @@
       <LogoMark
         class="w-3 mr-2 fill-[#FCAB5E] grayscale group-hover/logo:grayscale-0"
       />
-      Made with <span class="text-pink-400 mx-1">♥</span> by the FormKit team.
+      Made with ♥ by
+      <span class="hidden sm:inline sm:mx-[0.5ch]">the</span> FormKit
+      <span class="hidden sm:inline sm:ml-[0.5ch]">team</span>
     </NuxtLink>
     <ul class="flex gap-4">
       <li>
@@ -47,7 +50,7 @@
         >
           <GitHubStars />
           <GitHubLogo
-            class="text-slate-500 opacity-60 group-hover/github:opacity-100 w-5 h-5 dark:text-purple-500"
+            class="text-slate-500 opacity-60 group-hover/github:opacity-100 w-4 h-4 sm:w-5 sm:h-5 dark:text-purple-500"
           />
         </NuxtLink>
       </li>

docs/components/TheFooter.vue

@@ -17,8 +17,9 @@
             to="https://formkit.com"
             class="head-message text-sm flex text-slate-500 hover:text-slate-800 transition-all dark:text-purple-200/75 dark:hover:text-slate-200"
           >
-            <LogoMark class="w-3 mr-2 fill-[#FCAB5E]" /> Made with ♥ by the
-            FormKit team.
+            <LogoMark class="w-3 mr-2 fill-[#FCAB5E]" /> Made with ♥ by
+            <span class="hidden sm:inline sm:mx-[0.5ch]">the</span> FormKit
+            <span class="hidden sm:inline sm:ml-[0.5ch]">team</span>
           </NuxtLink>
         </div>
         <div>
@@ -28,21 +29,21 @@
           <ul class="text-slate-600 mb-8 sm:mr-20 dark:text-slate-200">
             <li class="mb-2">
               <a
-                href="https://formkit.com"
+                href="https://formkit.com?utm_source=tempo&utm_medium=website&utm_campaign=footer"
                 class="border-b-2 border-slate-300 hover:border-slate-500 dark:border-slate-400 dark:hover:border-purple-300"
                 >FormKit</a
               >
             </li>
             <li class="mb-2">
               <a
-                href="https://auto-animate.formkit.com"
+                href="https://auto-animate.formkit.com?utm_source=tempo&utm_medium=website&utm_campaign=footer"
                 class="border-b-2 border-slate-300 hover:border-slate-500 dark:border-slate-400 dark:hover:border-purple-300"
                 >AutoAnimate</a
               >
             </li>
             <li class="mb-2">
               <a
-                href="https://arrowjs.com"
+                href="https://arrow-js.com?utm_source=tempo&utm_medium=website&utm_campaign=footer"
                 class="border-b-2 border-slate-300 hover:border-slate-500 dark:border-slate-400 dark:hover:border-purple-300"
                 >ArrowJS</a
               >
@@ -77,7 +78,7 @@
 
             <li class="mb-2">
               <a
-                href="https://discord.gg/Vhu97pAC76"
+                href="https://discord.formkit.com"
                 class="hover:text-slate-500 flex items-center gap-2 dark:hover:text-purple-300"
               >
                 <svg

docs/components/TheHeader.vue

@@ -10,19 +10,22 @@ onMounted(() => {
 
 <template>
   <ContainerSection>
-    <header class="flex flex-col mb-24">
+    <header class="flex flex-col mb-14 md:mb-20 lg:mb-24">
       <SuperHeader />
       <ClockFont
         chars="tempo"
-        class="text-[10vw] justify-center mb-4 max-w-3xl m-auto text-sky-500 !px-20 !py-16 !rounded-2xl"
+        class="text-[15vw] md:text-[10vw] justify-center mb-4 max-w-2xl m-auto text-sky-500 !px-0 !py-[10%] lg:px-20 lg:py-16 !rounded-2xl"
         :delay="500"
       />
       <h1
         :class="`
           tagline
           text-center
-          text-[6vw]
+          text-[10vw]
+          sm:text-[8vw]
+          md:text-[6vw]
           font-bold
+          leading-none
           max-w-2xl
           m-auto
           opacity-0
@@ -32,8 +35,7 @@ onMounted(() => {
           data-[show]:opacity-100
           data-[show]:translate-y-0
           text-slate-700
-          mb-10
-          md:mb-14
+          mb-14
           lg:leading-none
           lg:text-6xl
           lg:mb-20

docs/components/TheSidebar.vue

@@ -55,21 +55,31 @@ function openDocSearch() {
   <aside
     :class="`
       docs-sidebar
-      flex
+      hidden
+      lg:flex
       flex-col
       border-r
       pt-16
       border-r-slate-300
-      ml-[2%]
       min-[1400px]:ml-[5%]
       min-[1600px]:ml-auto
       dark:border-r-purple-950
       w-full
-      max-w-[250px]
+      max-w-[200px]
+      min-[1400px]:max-w-[250px]
     `"
   >
     <nav
-      class="docs-sidebar-nav sticky pr-5 min-[1400px]:pr-10 pl-5 pt-0 top-2 max-h-[calc(100dvh-0.5rem)] overflow-auto"
+      :class="`
+        docs-sidebar-nav
+        sticky
+        min-[1400px]:pr-10
+        px-2
+        pt-0
+        top-2
+        max-h-[calc(100dvh-0.5rem)]
+        overflow-auto
+      `"
     >
       <div
         :class="`

docs/components/content/Format.vue

@@ -25,7 +25,7 @@ import { format } from "@formkit/tempo"
       ]"
       return="string"
     />
-    <p>Tempo’s <code>format()</code> function output’s dates in two ways:</p>
+    <p>Tempo’s <code>format()</code> function outputs dates in two ways:</p>
     <ul class="jump-list">
       <li>
         <a href="#format-styles">
@@ -53,13 +53,13 @@ import { format } from "@formkit/tempo"
   <PageSection>
     <HeadingSection title="Format styles" size="sm" class="text-sky-500" />
     <p>
-      When displaying a dates to users it’s a good idea to use the formats they
-      are familiar with. Tempo uses <code>Intl.DateTimeFormat</code>’s language
-      sensitive date and time formatting to make this easy. By using a date or
-      time "style" you indicate the level of specificity you’d like to show the
-      date to the end user with, but no further details. It’s then up to the
-      <code>Intl.DateTimeFormat</code> to decide how to most appropriately
-      display the date.
+      When displaying dates to users, it’s a good idea to use the formats they
+      are familiar with. Tempo uses <code>Intl.DateTimeFormat</code>’s
+      language-sensitive date and time formatting to make this easy. By using a
+      date or time "style", you indicate the level of specificity you’d like to
+      show the date to the end user with, but no further details. It’s then up
+      to the <code>Intl.DateTimeFormat</code> to decide how to most
+      appropriately display the date.
     </p>
     <h3 id="date-styles">Date styles</h3>
     <p>

docs/components/content/Introduction.vue

@@ -7,7 +7,7 @@ import { defineProps } from "vue"
     <HeadingSection title="Introduction" class="text-sky-500" />
     <p>
       Tempo is a new library in a proud tradition of JavaScript date and time
-      libraries. Inspired by the likes of moment.js, day.js, and date-fns Tempo
+      libraries. Inspired by the likes of moment.js, day.js, and date-fns, Tempo
       is built from the ground up to be as small and easy to use as possible —
       including first-class support for timezone operations.
     </p>
@@ -16,7 +16,7 @@ import { defineProps } from "vue"
       native <code>Date</code> object — an important distinction from other
       libraries that provide custom date primitives. Under the hood, Tempo mines
       JavaScript's <code>Intl.DateTimeFormat</code> to extract complex data like
-      timezones offsets and locale aware date formats giving you a simple API to
+      timezones offsets and locale aware date formats, giving you a simple API to
       format, parse, and manipulate dates.
     </p>
     <CodeExample file="introduction" />

docs/nuxt.config.ts

@@ -1,3 +1,6 @@
+const description =
+  "An open-source library for handling complex date operations across timezones. The easiest way to work with dates in JavaScript."
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   modules: ["@nuxtjs/tailwindcss", "@vueuse/nuxt", "@nuxtjs/color-mode"],
@@ -15,6 +18,52 @@ export default defineNuxtConfig({
           href: "https://tempo-formkit-dsn.algolia.net",
         },
       ],
+      meta: [
+        {
+          name: "description",
+          content: description,
+        },
+        {
+          name: "og:title",
+          content: "Tempo • Dates by FormKit",
+        },
+        {
+          name: "og:description",
+          content: description,
+        },
+        {
+          name: "og:image",
+          content: "https://tempo.formkit.com/og.png",
+        },
+        {
+          name: "og:url",
+          content: "https://tempo.formkit.com",
+        },
+        {
+          name: "twitter:card",
+          content: "summary_large_image",
+        },
+        {
+          name: "twitter:site",
+          content: "https://tempo.formkit.com",
+        },
+        {
+          name: "twitter:creator",
+          content: "@formkit",
+        },
+        {
+          name: "twitter:title",
+          content: "Tempo • Dates by FormKit",
+        },
+        {
+          name: "twitter:description",
+          content: description,
+        },
+        {
+          name: "twitter:image",
+          content: "https://tempo.formkit.dev/og.png",
+        },
+      ],
     },
   },
   tailwindcss: {