perf: bundle icons (#62)

Fixes #61
CostasAK · Jul 27, 2024 · 67d2196 · 67d2196
1 parent ca3ae9d
commit 67d2196
Show file tree

Hide file tree

Showing 27 changed files with 37 additions and 171 deletions.
diff --git a/index.html b/index.html
@@ -71,7 +71,7 @@
     <link type="application/json+oembed" href="/oembed.json?v=1" />
 
     <!-- Preconnects -->
-    <link rel="preconnect" href="https://xivapi.com" crossorigin="" />
+    <!-- <link rel="preconnect" href="https://xivapi.com" crossorigin="" /> -->
   </head>
   <body>
     <div id="root" class="flex h-dvh flex-col"></div>

diff --git a/src/assets/chat_messengericon_dutyroulette.png b/src/assets/chat_messengericon_dutyroulette.png
diff --git a/src/assets/chat_messengericon_goldsaucer.png b/src/assets/chat_messengericon_goldsaucer.png
diff --git a/src/assets/chat_messengericon_raids.png b/src/assets/chat_messengericon_raids.png
diff --git a/src/assets/chat_messengericon_thehunt.png b/src/assets/chat_messengericon_thehunt.png
diff --git a/src/assets/chat_messengericon_treasurehunt.png b/src/assets/chat_messengericon_treasurehunt.png
diff --git a/src/assets/chat_messengericon_weeklybingo.png b/src/assets/chat_messengericon_weeklybingo.png
diff --git a/src/assets/checkbox-checked_hover.png → src/assets/checkbox/checked-hover.png b/src/assets/checkbox-checked_hover.png → src/assets/checkbox/checked-hover.png
diff --git a/src/assets/checkbox-checked.png → src/assets/checkbox/checked.png b/src/assets/checkbox-checked.png → src/assets/checkbox/checked.png
diff --git a/src/assets/checkbox-unchecked_hover.png → src/assets/checkbox/unchecked-hover.png b/src/assets/checkbox-unchecked_hover.png → src/assets/checkbox/unchecked-hover.png
diff --git a/src/assets/checkbox-unchecked.png → src/assets/checkbox/unchecked.png b/src/assets/checkbox-unchecked.png → src/assets/checkbox/unchecked.png
diff --git a/src/assets/dot2.png b/src/assets/dot2.png
diff --git a/src/assets/dot2_12x12.png b/src/assets/dot2_12x12.png
diff --git a/src/assets/dot3.png b/src/assets/dot3.png
diff --git a/src/assets/dot3_12x12.png b/src/assets/dot3_12x12.png
diff --git a/src/assets/lodestone/maintenance.png b/src/assets/lodestone/maintenance.png
diff --git a/src/assets/lodestone/new.png b/src/assets/lodestone/new.png
diff --git a/src/assets/lodestone/notice.png b/src/assets/lodestone/notice.png
diff --git a/src/assets/lodestone/status.png b/src/assets/lodestone/status.png
diff --git a/src/assets/lodestone/topic.png b/src/assets/lodestone/topic.png
diff --git a/src/assets/lodestone/updates.png b/src/assets/lodestone/updates.png
diff --git a/src/assets/spinner.webp b/src/assets/spinner.webp
diff --git a/src/components/page-spinner.tsx b/src/components/page-spinner.tsx
@@ -1,160 +1,7 @@
 import { cn } from "@/utils/cn";
 import { type ClassValue } from "clsx";
-import type { SVGProps } from "react";
 
-export function SvgSpinners12DotsScaleRotate(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="1em"
-      height="1em"
-      viewBox="0 0 24 24"
-      {...props}
-    >
-      <g>
-        <circle cx={12} cy={3} r={1} fill="currentColor">
-          <animate
-            id="svgSpinners12DotsScaleRotate0"
-            attributeName="r"
-            begin="0;svgSpinners12DotsScaleRotate2.end-0.5s"
-            calcMode="spline"
-            dur="0.6s"
-            keySplines=".27,.42,.37,.99;.53,0,.61,.73"
-            values="1;2;1"
-          ></animate>
-        </circle>
-        <circle cx={16.5} cy={4.21} r={1} fill="currentColor">
-          <animate
-            id="svgSpinners12DotsScaleRotate1"
-            attributeName="r"
-            begin="svgSpinners12DotsScaleRotate0.begin+0.1s"
-            calcMode="spline"
-            dur="0.6s"
-            keySplines=".27,.42,.37,.99;.53,0,.61,.73"
-            values="1;2;1"
-          ></animate>
-        </circle>
-        <circle cx={7.5} cy={4.21} r={1} fill="currentColor">
-          <animate
-            id="svgSpinners12DotsScaleRotate2"
-            attributeName="r"
-            begin="svgSpinners12DotsScaleRotate4.begin+0.1s"
-            calcMode="spline"
-            dur="0.6s"
-            keySplines=".27,.42,.37,.99;.53,0,.61,.73"
-            values="1;2;1"
-          ></animate>
-        </circle>
-        <circle cx={19.79} cy={7.5} r={1} fill="currentColor">
-          <animate
-            id="svgSpinners12DotsScaleRotate3"
-            attributeName="r"
-            begin="svgSpinners12DotsScaleRotate1.begin+0.1s"
-            calcMode="spline"
-            dur="0.6s"
-            keySplines=".27,.42,.37,.99;.53,0,.61,.73"
-            values="1;2;1"
-          ></animate>
-        </circle>
-        <circle cx={4.21} cy={7.5} r={1} fill="currentColor">
-          <animate
-            id="svgSpinners12DotsScaleRotate4"
-            attributeName="r"
-            begin="svgSpinners12DotsScaleRotate6.begin+0.1s"
-            calcMode="spline"
-            dur="0.6s"
-            keySplines=".27,.42,.37,.99;.53,0,.61,.73"
-            values="1;2;1"
-          ></animate>
-        </circle>
-        <circle cx={21} cy={12} r={1} fill="currentColor">
-          <animate
-            id="svgSpinners12DotsScaleRotate5"
-            attributeName="r"
-            begin="svgSpinners12DotsScaleRotate3.begin+0.1s"
-            calcMode="spline"
-            dur="0.6s"
-            keySplines=".27,.42,.37,.99;.53,0,.61,.73"
-            values="1;2;1"
-          ></animate>
-        </circle>
-        <circle cx={3} cy={12} r={1} fill="currentColor">
-          <animate
-            id="svgSpinners12DotsScaleRotate6"
-            attributeName="r"
-            begin="svgSpinners12DotsScaleRotate8.begin+0.1s"
-            calcMode="spline"
-            dur="0.6s"
-            keySplines=".27,.42,.37,.99;.53,0,.61,.73"
-            values="1;2;1"
-          ></animate>
-        </circle>
-        <circle cx={19.79} cy={16.5} r={1} fill="currentColor">
-          <animate
-            id="svgSpinners12DotsScaleRotate7"
-            attributeName="r"
-            begin="svgSpinners12DotsScaleRotate5.begin+0.1s"
-            calcMode="spline"
-            dur="0.6s"
-            keySplines=".27,.42,.37,.99;.53,0,.61,.73"
-            values="1;2;1"
-          ></animate>
-        </circle>
-        <circle cx={4.21} cy={16.5} r={1} fill="currentColor">
-          <animate
-            id="svgSpinners12DotsScaleRotate8"
-            attributeName="r"
-            begin="svgSpinners12DotsScaleRotatea.begin+0.1s"
-            calcMode="spline"
-            dur="0.6s"
-            keySplines=".27,.42,.37,.99;.53,0,.61,.73"
-            values="1;2;1"
-          ></animate>
-        </circle>
-        <circle cx={16.5} cy={19.79} r={1} fill="currentColor">
-          <animate
-            id="svgSpinners12DotsScaleRotate9"
-            attributeName="r"
-            begin="svgSpinners12DotsScaleRotate7.begin+0.1s"
-            calcMode="spline"
-            dur="0.6s"
-            keySplines=".27,.42,.37,.99;.53,0,.61,.73"
-            values="1;2;1"
-          ></animate>
-        </circle>
-        <circle cx={7.5} cy={19.79} r={1} fill="currentColor">
-          <animate
-            id="svgSpinners12DotsScaleRotatea"
-            attributeName="r"
-            begin="svgSpinners12DotsScaleRotateb.begin+0.1s"
-            calcMode="spline"
-            dur="0.6s"
-            keySplines=".27,.42,.37,.99;.53,0,.61,.73"
-            values="1;2;1"
-          ></animate>
-        </circle>
-        <circle cx={12} cy={21} r={1} fill="currentColor">
-          <animate
-            id="svgSpinners12DotsScaleRotateb"
-            attributeName="r"
-            begin="svgSpinners12DotsScaleRotate9.begin+0.1s"
-            calcMode="spline"
-            dur="0.6s"
-            keySplines=".27,.42,.37,.99;.53,0,.61,.73"
-            values="1;2;1"
-          ></animate>
-        </circle>
-        <animateTransform
-          attributeName="transform"
-          dur="6s"
-          repeatCount="indefinite"
-          type="rotate"
-          values="360 12 12;0 12 12"
-        ></animateTransform>
-      </g>
-    </svg>
-  );
-}
+import spinner from "@/assets/spinner.webp";
 
 interface PageSpinnerProps {
   className?: ClassValue;
@@ -168,7 +15,7 @@ export function PageSpinner({ className }: PageSpinnerProps) {
         className,
       )}
     >
-      <SvgSpinners12DotsScaleRotate /> Loading...
+      <img src={spinner} alt="" className="size-[1em]" /> Loading...
     </div>
   );
 }
diff --git a/src/components/timer.tsx b/src/components/timer.tsx
@@ -15,10 +15,14 @@ import { cva } from "class-variance-authority";
 import { ClassValue } from "class-variance-authority/types";
 import { ReactNode } from "react";
 
+import lodestoneMaintenance from "@/assets/lodestone/maintenance.png";
+import lodestoneTopic from "@/assets/lodestone/topic.png";
+import lodestoneUpdates from "@/assets/lodestone/updates.png";
+
 const iconUrls = {
-  maintenance: "https://xivapi.com/img-misc/lodestone/maintenance.png",
-  event: "https://xivapi.com/img-misc/lodestone/topic.png",
-  reset: "https://xivapi.com/img-misc/lodestone/updates.png",
+  maintenance: lodestoneMaintenance,
+  event: lodestoneTopic,
+  reset: lodestoneUpdates,
 };
 
 type TimerIconProps = {

diff --git a/src/index.css b/src/index.css
@@ -23,9 +23,15 @@ img[src$=".png"] {
     @apply box-content;
   }
   ul {
-    @apply list-inside list-disc;
+    @apply list-image-dot2 pl-6;
+  }
+  ul > ul {
+    @apply list-image-dot3;
   }
   ol {
     @apply list-inside list-decimal;
   }
+  li + li {
+    @apply mt-2;
+  }
 }
diff --git a/src/routes/checklist.tsx b/src/routes/checklist.tsx
@@ -1,3 +1,9 @@
+import chatMessengerIconDutyroulette from "@/assets/chat_messengericon_dutyroulette.png";
+import chatMessengerIconGoldsaucer from "@/assets/chat_messengericon_goldsaucer.png";
+import chatMessengerIconRaids from "@/assets/chat_messengericon_raids.png";
+import chatMessengerIconThehunt from "@/assets/chat_messengericon_thehunt.png";
+import chatMessengerIconTreasurehunt from "@/assets/chat_messengericon_treasurehunt.png";
+import chatMessengerIconWeeklybingo from "@/assets/chat_messengericon_weeklybingo.png";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
@@ -17,13 +23,12 @@ import { useLocalStorage } from "@uidotdev/usehooks";
 import { useEffect, useState } from "react";
 
 const icons = {
-  collectables:
-    "https://xivapi.com/img-misc/chat_messengericon_treasurehunt.png",
-  raid: "https://xivapi.com/img-misc/chat_messengericon_raids.png",
-  roulette: "https://xivapi.com/img-misc/chat_messengericon_dutyroulette.png",
-  hunts: "https://xivapi.com/img-misc/chat_messengericon_thehunt.png",
-  goldsaucer: "https://xivapi.com/img-misc/chat_messengericon_goldsaucer.png",
-  others: "https://xivapi.com/img-misc/chat_messengericon_weeklybingo.png",
+  collectables: chatMessengerIconTreasurehunt,
+  raid: chatMessengerIconRaids,
+  roulette: chatMessengerIconDutyroulette,
+  hunts: chatMessengerIconThehunt,
+  goldsaucer: chatMessengerIconGoldsaucer,
+  others: chatMessengerIconWeeklybingo,
 };
 
 const resets = {

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -32,11 +32,15 @@ module.exports = {
     },
     extend: {
       backgroundImage: {
-        "checkbox-checked": "url(/src/assets/checkbox-checked.png)",
-        "checkbox-checked-hover": "url(/src/assets/checkbox-checked_hover.png)",
-        "checkbox-unchecked": "url(/src/assets/checkbox-unchecked.png)",
+        "checkbox-checked": "url(/src/assets/checkbox/checked.png)",
+        "checkbox-checked-hover": "url(/src/assets/checkbox/checked-hover.png)",
+        "checkbox-unchecked": "url(/src/assets/checkbox/unchecked.png)",
         "checkbox-unchecked-hover":
-          "url(/src/assets/checkbox-unchecked_hover.png)",
+          "url(/src/assets/checkbox/unchecked-hover.png)",
+      },
+      listStyleImage: {
+        dot2: "url(/src/assets/dot2_12x12.png)",
+        dot3: "url(/src/assets/dot3_12x12.png)",
       },
       boxShadow: {
         tab: "0px 1px 0px 0px rgba(255,255,255,0.1) inset,1px 0px 0px 0px rgba(255,255,255,0.1) inset,-1px 0px 0px 0px rgba(0,0,0,0.1) inset",