🧹 refactored application

ShafSpecs · Jul 20, 2024 · 2fe15f3 · 2fe15f3
1 parent ff61903
commit 2fe15f3
Show file tree

Hide file tree

Showing 44 changed files with 421 additions and 859 deletions.
diff --git a/.vscode/docs.code-snippets b/.vscode/docs.code-snippets
@@ -8,7 +8,7 @@
       "alternateTitle: $1",
       "order: $3",
       "---",
-      "\n$0",
+      "\n$0"
     ],
     "description": "A new documentation post",
     "scope": "markdown,md,mdx"
@@ -18,9 +18,9 @@
     "body": [
       "$BLOCK_COMMENT_START Do not remove these lines! $BLOCK_COMMENT_END",
       "",
-      "\n$0",
+      "\n$0"
     ],
     "description": "Add necessary doc imports",
     "scope": "markdown,md,mdx"
   }
-}
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,9 +1,4 @@
 {
-  "spellright.language": [
-    "en"
-  ],
-  "spellright.documentTypes": [
-    "latex",
-    "plaintext"
-  ]
-}
+  "spellright.language": ["en"],
+  "spellright.documentTypes": ["latex", "plaintext"]
+}
diff --git a/app/components/ClientHint.tsx b/app/components/ClientHint.tsx
@@ -4,8 +4,7 @@ import { useEffect } from 'react'
 export const clientHints = {
   theme: {
     cookieName: 'CH-prefers-color-scheme',
-    getValueCode:
-      "window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'",
+    getValueCode: "window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'",
     fallback: 'light',
     transform(value: string) {
       return value === 'dark' ? 'dark' : 'light'
@@ -25,10 +24,7 @@ type ClientHintsNames = keyof typeof clientHints
 /**
  * Returns the value of a Client Hint from the provided Cookie string.
  */
-function getClientHintCookieValue(
-  cookieString: string,
-  name: ClientHintsNames
-) {
+function getClientHintCookieValue(cookieString: string, name: ClientHintsNames) {
   const hint = clientHints[name]
 
   if (!hint) {
@@ -59,13 +55,10 @@ export function getHints(request?: Request) {
       const hintName = name as ClientHintsNames
 
       if ('transform' in hint) {
-        acc[hintName] = hint.transform(
-          getClientHintCookieValue(cookieString, hintName) ?? hint.fallback
-        )
+        acc[hintName] = hint.transform(getClientHintCookieValue(cookieString, hintName) ?? hint.fallback)
       } else {
         // @ts-expect-error - No error on here, requires Epic Stack PR fix.
-        acc[hintName] =
-          getClientHintCookieValue(cookieString, hintName) ?? hint.fallback
+        acc[hintName] = getClientHintCookieValue(cookieString, hintName) ?? hint.fallback
       }
 
       return acc

diff --git a/app/components/Progress.tsx b/app/components/Progress.tsx
@@ -1,7 +1,7 @@
 import { useNavigation } from '@remix-run/react'
+import clsx from 'clsx'
 import { useEffect, useRef, useState } from 'react'
 import { useSpinDelay } from 'spin-delay'
-import clsx from 'clsx'
 
 export function Progress() {
   const transition = useNavigation()
@@ -17,9 +17,7 @@ export function Progress() {
     if (!ref.current) return
     if (delayedPending) setAnimationComplete(false)
 
-    const animationPromises = ref.current
-      .getAnimations()
-      .map(({ finished }) => finished)
+    const animationPromises = ref.current.getAnimations().map(({ finished }) => finished)
 
     Promise.allSettled(animationPromises).then(() => {
       if (!delayedPending) setAnimationComplete(true)
@@ -37,10 +35,7 @@ export function Progress() {
         ref={ref}
         className={clsx(
           'h-full w-0 bg-gradient-to-r from-blue-500 to-purple-500 duration-500 ease-in-out',
-          transition.state === 'idle' &&
-            (animationComplete
-              ? 'transition-none'
-              : 'w-full opacity-0 transition-all'),
+          transition.state === 'idle' && (animationComplete ? 'transition-none' : 'w-full opacity-0 transition-all'),
           delayedPending && transition.state === 'submitting' && 'w-5/12',
           delayedPending && transition.state === 'loading' && 'w-9/12'
         )}

diff --git a/app/components/Search.tsx b/app/components/Search.tsx
@@ -1,14 +1,11 @@
-import { KBarPortal, KBarPositioner, KBarAnimator, KBarSearch } from 'kbar'
+import { KBarAnimator, KBarPortal, KBarPositioner, KBarSearch } from 'kbar'
 
 export const Search = () => {
   return (
     <KBarPortal>
       <div className="fixed left-0 top-0 z-[9999] h-screen w-screen overflow-hidden bg-transparent backdrop-blur-xl"></div>
       <KBarPositioner className="fixed left-0 top-0 z-[9999] h-full w-screen bg-[#0003] dark:bg-[#0f172acc]">
-        <KBarAnimator
-          disableCloseOnOuterClick={false}
-          className="w-full max-w-xl overflow-hidden rounded-2xl"
-        >
+        <KBarAnimator disableCloseOnOuterClick={false} className="w-full max-w-xl overflow-hidden rounded-2xl">
           <KBarSearch
             className="box-border h-14 w-full flex-1 border-none px-4 py-3 outline-0"
             maxLength={64}

diff --git a/app/components/ThemeSwitcher.tsx b/app/components/ThemeSwitcher.tsx
@@ -9,15 +9,9 @@ export const ThemeSwitcher = () => {
 
   const themeSwitcher = () => {
     if (theme === 'light') {
-      fetcher.submit(
-        { theme: 'dark' },
-        { method: 'post', action: '/updateTheme' }
-      )
+      fetcher.submit({ theme: 'dark' }, { method: 'post', action: '/updateTheme' })
     } else if (theme === 'dark') {
-      fetcher.submit(
-        { theme: 'light' },
-        { method: 'post', action: '/updateTheme' }
-      )
+      fetcher.submit({ theme: 'light' }, { method: 'post', action: '/updateTheme' })
     }
   }
 
@@ -31,12 +25,8 @@ export const ThemeSwitcher = () => {
       className="flex h-6 w-6 items-center justify-center rounded-lg shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5"
       onClick={toggleTheme}
     >
-      {theme === 'light' && (
-        <SunIcon className="h-4 w-4 fill-sky-400 text-sky-400" />
-      )}
-      {theme === 'dark' && (
-        <MoonIcon className="h-4 w-4 fill-sky-400 text-sky-400" />
-      )}
+      {theme === 'light' && <SunIcon className="h-4 w-4 fill-sky-400 text-sky-400" />}
+      {theme === 'dark' && <MoonIcon className="h-4 w-4 fill-sky-400 text-sky-400" />}
     </button>
   )
 }
diff --git a/app/components/layout/Documentation.tsx b/app/components/layout/Documentation.tsx
@@ -1,15 +1,15 @@
 import { Link, useRouteLoaderData } from '@remix-run/react'
-import { Fragment, useMemo, useRef } from 'react'
-import { getMDXComponent, getMDXExport } from 'mdx-bundler/client'
 import clsx from 'clsx'
-import redent from 'redent'
+import { getMDXComponent, getMDXExport } from 'mdx-bundler/client'
+import { Fragment, useMemo, useRef } from 'react'
 import type { MouseEvent } from 'react'
+import redent from 'redent'
 
-import Info from '~/components/plugins/Info'
-import Warn from '~/components/plugins/Warn'
-import SnippetGroup from '~/components/plugins/Snippet'
 import Editor from '~/components/plugins/Editor'
 import Heading from '~/components/plugins/Heading'
+import Info from '~/components/plugins/Info'
+import SnippetGroup from '~/components/plugins/Snippet'
+import Warn from '~/components/plugins/Warn'
 import { useTableOfContents } from '~/hooks/useTableOfContents'
 
 export function Documentation({
@@ -38,10 +38,7 @@ export function Documentation({
 
   const documentationRef = useRef<HTMLDivElement>(null)
 
-  function scrollIntoView(
-    e: MouseEvent<HTMLAnchorElement, globalThis.MouseEvent>,
-    id: string
-  ) {
+  function scrollIntoView(e: MouseEvent<HTMLAnchorElement, globalThis.MouseEvent>, id: string) {
     if (e.currentTarget.classList.contains('toc-anchor')) {
       e.preventDefault()
 
@@ -71,9 +68,7 @@ export function Documentation({
     return section.children.findIndex(isActive) > -1
   }
 
-  const pageHasSubsections = tableOfContents.some(
-    (section: any) => section.children.length > 0
-  )
+  const pageHasSubsections = tableOfContents.some((section: any) => section.children.length > 0)
 
   return (
     <div
@@ -95,9 +90,7 @@ export function Documentation({
                 </h1>
               </div>
             </div>
-            <p className="mt-2 text-lg text-slate-700 dark:text-slate-400">
-              {frontmatter.description}
-            </p>
+            <p className="mt-2 text-lg text-slate-700 dark:text-slate-400">{frontmatter.description}</p>
           </header>
 
           <main
@@ -111,9 +104,7 @@ export function Documentation({
         <dl className="mt-12 flex border-t border-slate-200 pt-6 dark:border-slate-800">
           {prev && (
             <div>
-              <dt className="font-display text-sm font-medium text-slate-900 dark:text-white">
-                Previous
-              </dt>
+              <dt className="font-display text-sm font-medium text-slate-900 dark:text-white">Previous</dt>
               <dd className="mt-1">
                 <Link
                   className="text-base font-semibold text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
@@ -128,9 +119,7 @@ export function Documentation({
           )}
           {next && (
             <div className="ml-auto text-right">
-              <dt className="font-display text-sm font-medium text-slate-900 dark:text-white">
-                Next
-              </dt>
+              <dt className="font-display text-sm font-medium text-slate-900 dark:text-white">Next</dt>
               <dd className="mt-1">
                 <Link
                   className="text-base font-semibold text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"