feat(svelte-ui): copy font files from remix-ui

nicholaschiang · Nov 29, 2024 · b66d88e · b66d88e
1 parent 0dba644
commit b66d88e
Show file tree

Hide file tree

Showing 36 changed files with 498 additions and 7 deletions.
diff --git a/svelte-ui/src/app.css b/svelte-ui/src/app.css
@@ -1,3 +1,14 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
+
+@layer base {
+  /* optimize legibility; see https://rauno.me/interfaces */
+  body,
+  html {
+    text-rendering: optimizeLegibility;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    -moz-text-size-adjust: none;
+  }
+}
diff --git a/svelte-ui/src/app.html b/svelte-ui/src/app.html
@@ -4,6 +4,79 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <link rel="preload" href="/fonts/inter.css" as="style" />
+    <link rel="preload" href="/fonts/hack-subset.css" as="style" />
+    <link rel="preload" href="/fonts/bodoni-moda.css" as="style" />
+
+    <link rel="stylesheet" href="/fonts/inter.css" />
+    <link rel="stylesheet" href="/fonts/hack-subset.css" />
+    <link rel="stylesheet" href="/fonts/bodoni-moda.css" />
+
+    <link
+      rel="preload"
+      href="/fonts/inter-latin-ext.woff2"
+      crossorigin="anonymous"
+      type="font/woff2"
+      as="font"
+    />
+    <link
+      rel="preload"
+      href="/fonts/inter-latin.woff2"
+      crossorigin="anonymous"
+      type="font/woff2"
+      as="font"
+    />
+    <link
+      rel="preload"
+      href="/fonts/hack-regular-subset.woff2"
+      crossorigin="anonymous"
+      type="font/woff2"
+      as="font"
+    />
+    <link
+      rel="preload"
+      href="/fonts/hack-regular-subset.woff2"
+      crossorigin="anonymous"
+      type="font/woff2"
+      as="font"
+    />
+    <link
+      rel="preload"
+      href="/fonts/hack-bold-subset.woff2"
+      crossorigin="anonymous"
+      type="font/woff2"
+      as="font"
+    />
+    <link
+      rel="preload"
+      href="/fonts/hack-italic-subset.woff2"
+      crossorigin="anonymous"
+      type="font/woff2"
+      as="font"
+    />
+    <link
+      rel="preload"
+      href="/fonts/hack-bolditalic-subset.woff2"
+      crossorigin="anonymous"
+      type="font/woff2"
+      as="font"
+    />
+    <link
+      rel="preload"
+      href="/fonts/bodoni-moda-latin-ext.woff2"
+      crossorigin="anonymous"
+      type="font/woff2"
+      as="font"
+    />
+    <link
+      rel="preload"
+      href="/fonts/bodoni-moda-latin.woff2"
+      crossorigin="anonymous"
+      type="font/woff2"
+      as="font"
+    />
+
     %sveltekit.head%
   </head>
   <body

diff --git a/svelte-ui/src/lib/components/Header.svelte b/svelte-ui/src/lib/components/Header.svelte
@@ -2,7 +2,7 @@
   let { children } = $props()
 </script>
 <header
-  class="flex h-10 items-center gap-2 border-b border-gray-200 px-6 dark:border-gray-800 text-lg lowercase sticky top-0 bg-white/80 dark:bg-gray-950/80 backdrop-blur-xl z-10"
+  class="flex h-10 items-center gap-2 border-b border-gray-200 px-6 dark:border-gray-800 tracking-tighter text-lg lowercase sticky top-0 bg-white/80 dark:bg-gray-950/80 backdrop-blur-xl z-10"
 >
   {@render children()}
 </header>
diff --git a/svelte-ui/src/lib/formatTiming.ts b/svelte-ui/src/lib/formatTiming.ts
@@ -0,0 +1,3 @@
+export function formatTiming(time: number) {
+  return `${time.toLocaleString(undefined, { maximumFractionDigits: 2 })}ms`;
+}
diff --git a/svelte-ui/src/routes/+page.svelte b/svelte-ui/src/routes/+page.svelte
@@ -2,6 +2,7 @@
   import { Search } from "lucide-svelte"
   import { formatDate } from "$lib/formatDate"
   import { formatLocation } from "$lib/formatLocation"
+  import { formatTiming } from "$lib/formatTiming"
   import { PARAM, DEFAULT_SEARCH } from "$lib/constants"
 
   import Header from "$lib/components/Header.svelte"
@@ -12,7 +13,8 @@
   let value = $state("")
 
   $effect(() => {
-    value = new URLSearchParams(window.location.search).get(PARAM) ?? DEFAULT_SEARCH
+    value =
+      new URLSearchParams(window.location.search).get(PARAM) ?? DEFAULT_SEARCH
   })
 
   type Collection = Awaited<typeof data.data>["collections"][number]
@@ -35,20 +37,20 @@
     <input
       name={PARAM}
       type="search"
-      class="w-0 grow border-0 bg-transparent px-0 focus:ring-0"
+      class="w-0 grow border-0 text-base bg-transparent px-0 tracking-tighter focus:ring-0"
       placeholder="Search..."
       oninput={() => form.requestSubmit()}
       bind:value
     />
   </form>
-  <div class="flex flex-col gap-2">
+  <div class="text-base tracking-tighter">
     {#await data.data}
       <p>Loading...</p>
     {:then data}
       <p>
-        Found {data.collections.length} results
+        Found {data.collections.length.toLocaleString()} results
         <span class="text-gray-400 dark:text-gray-500"
-          >({data.time.toFixed(2)}ms)</span
+          >({formatTiming(data.time)})</span
         >
       </p>
     {:catch error}

diff --git a/svelte-ui/src/routes/collections/[collectionId]/+page.svelte b/svelte-ui/src/routes/collections/[collectionId]/+page.svelte
@@ -4,6 +4,7 @@
   import { formatSeasonName } from "$lib/formatSeasonName"
   import { formatLevelName } from "$lib/formatLevelName"
   import { formatLocation } from "$lib/formatLocation"
+  import { formatTiming } from "$lib/formatTiming"
 
   import Header from "$lib/components/Header.svelte"
   import Subtitle from "$lib/components/Subtitle.svelte"
@@ -38,7 +39,7 @@
           >)</span
         >
       {/if}
-      <span>({data.time.toFixed(2)}ms)</span>
+      <span>({formatTiming(data.time)})</span>
     </div>
   {/await}
 </Header>

diff --git a/svelte-ui/static/fonts/bodoni-moda-latin-ext.woff2 b/svelte-ui/static/fonts/bodoni-moda-latin-ext.woff2
diff --git a/svelte-ui/static/fonts/bodoni-moda-latin.woff2 b/svelte-ui/static/fonts/bodoni-moda-latin.woff2
diff --git a/svelte-ui/static/fonts/bodoni-moda.css b/svelte-ui/static/fonts/bodoni-moda.css
@@ -0,0 +1,19 @@
+/* latin-ext */
+@font-face {
+  font-family: 'Bodoni Moda';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/fonts/bodoni-moda-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Bodoni Moda';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/fonts/bodoni-moda-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/svelte-ui/static/fonts/hack-bold-subset.woff b/svelte-ui/static/fonts/hack-bold-subset.woff
diff --git a/svelte-ui/static/fonts/hack-bold-subset.woff2 b/svelte-ui/static/fonts/hack-bold-subset.woff2
diff --git a/svelte-ui/static/fonts/hack-bold.woff b/svelte-ui/static/fonts/hack-bold.woff
diff --git a/svelte-ui/static/fonts/hack-bold.woff2 b/svelte-ui/static/fonts/hack-bold.woff2
diff --git a/svelte-ui/static/fonts/hack-bolditalic-subset.woff b/svelte-ui/static/fonts/hack-bolditalic-subset.woff
diff --git a/svelte-ui/static/fonts/hack-bolditalic-subset.woff2 b/svelte-ui/static/fonts/hack-bolditalic-subset.woff2
diff --git a/svelte-ui/static/fonts/hack-bolditalic.woff b/svelte-ui/static/fonts/hack-bolditalic.woff
diff --git a/svelte-ui/static/fonts/hack-bolditalic.woff2 b/svelte-ui/static/fonts/hack-bolditalic.woff2
diff --git a/svelte-ui/static/fonts/hack-italic-subset.woff b/svelte-ui/static/fonts/hack-italic-subset.woff
diff --git a/svelte-ui/static/fonts/hack-italic-subset.woff2 b/svelte-ui/static/fonts/hack-italic-subset.woff2
diff --git a/svelte-ui/static/fonts/hack-italic.woff b/svelte-ui/static/fonts/hack-italic.woff
diff --git a/svelte-ui/static/fonts/hack-italic.woff2 b/svelte-ui/static/fonts/hack-italic.woff2
diff --git a/svelte-ui/static/fonts/hack-regular-subset.woff b/svelte-ui/static/fonts/hack-regular-subset.woff
diff --git a/svelte-ui/static/fonts/hack-regular-subset.woff2 b/svelte-ui/static/fonts/hack-regular-subset.woff2
diff --git a/svelte-ui/static/fonts/hack-regular.woff b/svelte-ui/static/fonts/hack-regular.woff
diff --git a/svelte-ui/static/fonts/hack-regular.woff2 b/svelte-ui/static/fonts/hack-regular.woff2
diff --git a/svelte-ui/static/fonts/hack-subset.css b/svelte-ui/static/fonts/hack-subset.css
@@ -0,0 +1,41 @@
+/*!
+ *  Hack typeface https://github.com/source-foundry/Hack
+ *  License: https://github.com/source-foundry/Hack/blob/master/LICENSE.md
+ */
+/* FONT PATHS
+ * -------------------------- */
+@font-face {
+  font-family: 'Hack';
+  src: url('/fonts/hack-regular-subset.woff2?sha=3114f1256') format('woff2'),
+    url('/fonts/hack-regular-subset.woff?sha=3114f1256') format('woff');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Hack';
+  src: url('/fonts/hack-bold-subset.woff2?sha=3114f1256') format('woff2'),
+    url('/fonts/hack-bold-subset.woff?sha=3114f1256') format('woff');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Hack';
+  src: url('/fonts/hack-italic-subset.woff2?sha=3114f1256') format('woff2'),
+    url('/fonts/hack-italic-subset.woff?sha=3114f1256') format('woff');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Hack';
+  src: url('/fonts/hack-bolditalic-subset.woff2?sha=3114f1256') format('woff2'),
+    url('/fonts/hack-bolditalic-subset.woff?sha=3114f1256') format('woff');
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
diff --git a/svelte-ui/static/fonts/hack.css b/svelte-ui/static/fonts/hack.css
@@ -0,0 +1,41 @@
+/*!
+ *  Hack typeface https://github.com/source-foundry/Hack
+ *  License: https://github.com/source-foundry/Hack/blob/master/LICENSE.md
+ */
+/* FONT PATHS
+ * -------------------------- */
+@font-face {
+  font-family: 'Hack';
+  src: url('/fonts/hack-regular.woff2?sha=3114f1256') format('woff2'),
+    url('/fonts/hack-regular.woff?sha=3114f1256') format('woff');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Hack';
+  src: url('/fonts/hack-bold.woff2?sha=3114f1256') format('woff2'),
+    url('/fonts/hack-bold.woff?sha=3114f1256') format('woff');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Hack';
+  src: url('/fonts/hack-italic.woff2?sha=3114f1256') format('woff2'),
+    url('/fonts/hack-italic.woff?sha=3114f1256') format('woff');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Hack';
+  src: url('/fonts/hack-bolditalic.woff2?sha=3114f1256') format('woff2'),
+    url('/fonts/hack-bolditalic.woff?sha=3114f1256') format('woff');
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
diff --git a/svelte-ui/static/fonts/inter-cyrillic-ext.woff2 b/svelte-ui/static/fonts/inter-cyrillic-ext.woff2
diff --git a/svelte-ui/static/fonts/inter-cyrillic.woff2 b/svelte-ui/static/fonts/inter-cyrillic.woff2
diff --git a/svelte-ui/static/fonts/inter-greek-ext.woff2 b/svelte-ui/static/fonts/inter-greek-ext.woff2
diff --git a/svelte-ui/static/fonts/inter-greek.woff2 b/svelte-ui/static/fonts/inter-greek.woff2
diff --git a/svelte-ui/static/fonts/inter-latin-ext.woff2 b/svelte-ui/static/fonts/inter-latin-ext.woff2
diff --git a/svelte-ui/static/fonts/inter-latin.woff2 b/svelte-ui/static/fonts/inter-latin.woff2
diff --git a/svelte-ui/static/fonts/inter-vietnamese.woff2 b/svelte-ui/static/fonts/inter-vietnamese.woff2