fix: fixed styling issues in Safari (#19)

* fix: fixed styling issues in Safari * fix: add margin-end to code block for spacing * docs: update `id` for correct anchoring * chore: revert `nuxt.config.ts` nitro configuration * chore: remove `debug` mode --------- Co-authored-by: Justin Schroeder <justin@formkit.com>
formkit · Feb 26, 2024 · 1104cff · 1104cff
1 parent 88ae6cb
commit 1104cff
Show file tree

Hide file tree

Showing 10 changed files with 97 additions and 70 deletions.
diff --git a/docs/app.vue b/docs/app.vue
@@ -26,13 +26,9 @@ onMounted(async () => {
 
 <template>
   <TheHeader />
-  <div
-    class="docs-layout flex w-full max-w-full mt-20 border-t border-t-slate-300 dark:border-t-purple-950"
-  >
+  <div 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="min-w-0 pr-4 mr-auto pt-20 w-full max-w-[1000px] 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>
diff --git a/docs/assets/css/main.css b/docs/assets/css/main.css
@@ -19,16 +19,15 @@ html.dark body {
   @apply selection:bg-fuchsia-600;
 }
 html body::before {
-  @apply opacity-100;
+  @apply h-lvh w-screen opacity-100;
   @apply contrast-[300%];
   @apply mix-blend-overlay;
   @apply brightness-[100%];
+  @apply inset-0;
   content: "";
   position: fixed;
   inset: 0;
   z-index: -1;
-  width: 100vw;
-  height: 100vh;
   background-size: cover;
   background-image: radial-gradient(
       circle at 50% 40%,
@@ -42,6 +41,19 @@ html.dark body::before {
   @apply mix-blend-multiply;
   @apply contrast-[150%];
   @apply brightness-[70%];
+  @apply inset-0;
+}
+
+.DocSearch-Reset {
+  @apply text-white;
+}
+
+.DocSearch-SearchBar {
+  @apply grid grid-cols-[minmax(0,1fr)_auto];
+}
+
+.DocSearch-SearchBar form {
+  @apply grid grid-cols-[auto_0_minmax(0,1fr)_auto];
 }
 
 .monaco-editor,
@@ -137,7 +149,7 @@ html.dark body::before {
 }
 
 .page-section table code {
-  @apply rounded bg-slate-100 p-1 font-mono min-[1400px]:text-base;
+  @apply me-2 rounded bg-slate-100 p-1 font-mono min-[1400px]:text-base;
   @apply dark:bg-purple-950 dark:text-slate-100;
 }
 .page-section table tr:nth-child(odd) code {

diff --git a/docs/components/CodeExample.client.vue b/docs/components/CodeExample.client.vue
@@ -155,13 +155,13 @@ const stopWatch = watch(el, () => {
       min-[1600px]:-mr-64
       shadow-sm
       bg-[#f9f9f9] ${'' /* --vs-editor-background */}
-      after:-z-10
-      after:absolute
-      after:-inset-px
-      after:bg-sky-600/50
-      after:rounded-lg
+              after:-z-10
+              after:absolute
+              after:-inset-px
+              after:bg-sky-600/50
+              after:rounded-lg
 
-      dark:bg-[#180626] ${'' /* --vs-editor-background */}
+              dark:bg-[#180626] ${'' /* --vs-editor-background */}
       dark:after:-inset-px
       dark:after:bg-purple-900
     `">
@@ -190,7 +190,7 @@ const stopWatch = watch(el, () => {
       `">
       <ul v-if="result">
         <li v-for="logs in result"
-          class="text-nowrap h-[21px] 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 whitespace-nowrap">
           {{ logs ? logs.join(", ") : "" }}
         </li>
       </ul>
@@ -199,7 +199,7 @@ const stopWatch = watch(el, () => {
       </div>
     </div>
     <div
-      class="sensible-error bg-red-600 text-white font-mono font-sm p-2 text-xs relative -top-3 -mb-10 h-9 leading-0 z-50 w-auto rounded-lg border border-red-400 shadow-md"
+      class="sensible-error bg-red-600 text-white font-mono font-sm p-2 text-xs relative -top-3 -mb-10 min-h-9 leading-0 z-50 w-auto rounded-lg border border-red-400 shadow-md flex items-center"
       v-if="sensibleError">
       {{ sensibleError }}
     </div>

diff --git a/docs/components/CodeExample.server.vue b/docs/components/CodeExample.server.vue
@@ -6,12 +6,13 @@ code.value = value.default
 </script>
 
 <template>
-  <div class="chrome"></div>
+  <div class="chrome" :style="{
+    height: `${Math.min(1000, code.split('\n').length * 21)}px`
+  }"></div>
 </template>
 
 <style scoped>
 .chrome {
   width: 500px;
-  height: 300px;
 }
 </style>
diff --git a/docs/components/TheSidebar.vue b/docs/components/TheSidebar.vue
@@ -15,10 +15,10 @@ onMounted(() => {
       document.querySelectorAll("h3:not([data-sidebar-exclude=true])")
     ) as HTMLElement[]) || []
 
-  // add ids to all headings based on their text content
+  // add ids to all headings based on their text content if id is not already present
   const headings = Array.from(document.querySelectorAll("h2, h3"))
   headings.forEach((heading) => {
-    const id = heading.textContent?.toLowerCase().replace(/\s/g, "-")
+    const id = heading?.id ?? heading.textContent?.toLowerCase().replace(/\s/g, "-")
     if (id) {
       heading.id = id
     }

diff --git a/docs/components/content/Data.vue b/docs/components/content/Data.vue
@@ -3,6 +3,7 @@ import type { FunctionRef, ObjectRef } from "../../src/types"
 const fns: Record<
   string,
   {
+    name: string
     description: string
     return: string
     arguments: FunctionRef["arguments"]
@@ -12,6 +13,7 @@ const fns: Record<
   }
 > = {
   ap: {
+    name: "ap",
     description: "Returns either am or pm but in any given locale.",
     return: "Date",
     arguments: [
@@ -27,6 +29,7 @@ const fns: Record<
     example: "ap",
   },
   dayOfYear: {
+    name: "day-of-year",
     description: `Gets the day of the year a given date is. For example, August 1st is the 213th day of the year on non-leap years and 214th on leap years.`,
     arguments: [
       {
@@ -37,6 +40,7 @@ const fns: Record<
     return: "number",
   },
   formatStr: {
+    name: "format-str",
     description:
       "This little gem of a function returns the token format for a given format style.",
     arguments: [
@@ -53,6 +57,7 @@ const fns: Record<
     example: "format-str",
   },
   fourDigitYear: {
+    name: "four-digit-year",
     description:
       "Converts a 2 digit year into a 4 digit year. This function assumes years 20 years into the future belong to the current century, and the past 80 are in the past century.",
     arguments: [
@@ -64,6 +69,7 @@ const fns: Record<
     return: "number",
   },
   iso8601: {
+    name: "iso-8601",
     description:
       "Validates that a given date passes “acceptable” levels of ISO 8601 compatibility and can be utilized within Tempo. This allows incomplete dates but must include at least the year and month. Does not require the <code>T</code> separator.",
     arguments: [
@@ -75,6 +81,7 @@ const fns: Record<
     return: "string",
   },
   monthDays: {
+    name: "month-days",
     description: "Returns the number of days in a given month.",
     arguments: [
       {
@@ -85,6 +92,7 @@ const fns: Record<
     return: "number",
   },
   nearestDay: {
+    name: "nearest-day",
     description:
       "Performs a bidirectional search for the nearest date that passes a given search function. It stops searching when it finds a result or when it reaches the constraint bounds (on both sides).",
     arguments: [
@@ -104,6 +112,7 @@ const fns: Record<
     return: "Date | null",
   },
   offset: {
+    name: "offset",
     description:
       "Returns the offset between two (IANA) timezones on a given date. The results are ISO 8601 compatible string offsets like -0800 or +0530.",
     arguments: [
@@ -125,6 +134,7 @@ const fns: Record<
     return: "string",
   },
   parseParts: {
+    name: "parse-parts",
     description:
       'Given a date string like "2019/12/31" and the parts (like those returned from the <a href="#parts"><code>parts</code> function</a>) this function returns the parts with the appropriate values extracted from the date string and added to a <code>value</code> property.',
     arguments: [
@@ -151,6 +161,7 @@ const fns: Record<
     example: "parseParts",
   },
   parts: {
+    name: "parts",
     description:
       'Given a format and locale, this function produces an array of "parts". Similar to <code>Intl.DateTimeFormat.formatToParts()</code> but it accepts style formats and token formats and returns parts with granular data such as the part’s token and a regex to match for it.',
     arguments: [
@@ -209,6 +220,7 @@ const fns: Record<
     return: "Part[]",
   },
   range: {
+    name: "range",
     description:
       "Returns an array of options for a given token in a given locale. For example, the token <code>MMMM</code> in the locale <code>en-US</code> would return <code>['January', 'February', 'March', ...]</code>.",
     arguments: [
@@ -231,6 +243,7 @@ const fns: Record<
     example: "range",
   },
   yearDays: {
+    name: "year-days",
     description:
       "Returns the number of days in a given year. Leap years and century years cause this to not always be 365.",
     arguments: [
@@ -253,7 +266,7 @@ const fns: Record<
       data that is commonly needed to build applications.
     </p>
     <div v-for="(def, fn) in fns">
-      <h3 :id="fn">{{ fn }}</h3>
+      <h3 :id="def?.name">{{ fn }}</h3>
       <FunctionReference :function="fn" :arguments="def.arguments" :return="def.return" />
       <p v-html="def.description" />
       <CodeExample v-if="def.example" :file="def.example" />