From 0b5eff0ea49146229ca751fe33b567b70c98c3de Mon Sep 17 00:00:00 2001 From: Jacob Edley Date: Mon, 27 Oct 2025 09:51:05 -0500 Subject: [PATCH] include logo svgs in bundle --- .../assets/logos}/logo_2018.svg | 0 .../assets/logos}/logo_2019.svg | 0 .../assets/logos}/logo_2020.svg | 0 .../assets/logos}/logo_2021.svg | 0 .../assets/logos}/logo_2022.svg | 0 .../assets/logos}/logo_2023.svg | 2 +- .../assets/logos}/logo_2024.svg | 2 +- .../assets/logos}/logo_2025.svg | 0 apps/info/src/assets/logos/logo_info.svg | 34 ++++++ apps/info/src/components/AnimatedLogo.tsx | 108 ++++++++++-------- 10 files changed, 97 insertions(+), 49 deletions(-) rename apps/info/{public => src/assets/logos}/logo_2018.svg (100%) rename apps/info/{public => src/assets/logos}/logo_2019.svg (100%) rename apps/info/{public => src/assets/logos}/logo_2020.svg (100%) rename apps/info/{public => src/assets/logos}/logo_2021.svg (100%) rename apps/info/{public => src/assets/logos}/logo_2022.svg (100%) rename apps/info/{public => src/assets/logos}/logo_2023.svg (99%) rename apps/info/{public => src/assets/logos}/logo_2024.svg (98%) rename apps/info/{public => src/assets/logos}/logo_2025.svg (100%) create mode 100644 apps/info/src/assets/logos/logo_info.svg diff --git a/apps/info/public/logo_2018.svg b/apps/info/src/assets/logos/logo_2018.svg similarity index 100% rename from apps/info/public/logo_2018.svg rename to apps/info/src/assets/logos/logo_2018.svg diff --git a/apps/info/public/logo_2019.svg b/apps/info/src/assets/logos/logo_2019.svg similarity index 100% rename from apps/info/public/logo_2019.svg rename to apps/info/src/assets/logos/logo_2019.svg diff --git a/apps/info/public/logo_2020.svg b/apps/info/src/assets/logos/logo_2020.svg similarity index 100% rename from apps/info/public/logo_2020.svg rename to apps/info/src/assets/logos/logo_2020.svg diff --git a/apps/info/public/logo_2021.svg b/apps/info/src/assets/logos/logo_2021.svg similarity index 100% rename from apps/info/public/logo_2021.svg rename to apps/info/src/assets/logos/logo_2021.svg diff --git a/apps/info/public/logo_2022.svg b/apps/info/src/assets/logos/logo_2022.svg similarity index 100% rename from apps/info/public/logo_2022.svg rename to apps/info/src/assets/logos/logo_2022.svg diff --git a/apps/info/public/logo_2023.svg b/apps/info/src/assets/logos/logo_2023.svg similarity index 99% rename from apps/info/public/logo_2023.svg rename to apps/info/src/assets/logos/logo_2023.svg index 5fd6df68..f7249e24 100644 --- a/apps/info/public/logo_2023.svg +++ b/apps/info/src/assets/logos/logo_2023.svg @@ -1,5 +1,5 @@ - + diff --git a/apps/info/public/logo_2024.svg b/apps/info/src/assets/logos/logo_2024.svg similarity index 98% rename from apps/info/public/logo_2024.svg rename to apps/info/src/assets/logos/logo_2024.svg index 2236be55..d3f5e014 100644 --- a/apps/info/public/logo_2024.svg +++ b/apps/info/src/assets/logos/logo_2024.svg @@ -1,4 +1,4 @@ - + diff --git a/apps/info/public/logo_2025.svg b/apps/info/src/assets/logos/logo_2025.svg similarity index 100% rename from apps/info/public/logo_2025.svg rename to apps/info/src/assets/logos/logo_2025.svg diff --git a/apps/info/src/assets/logos/logo_info.svg b/apps/info/src/assets/logos/logo_info.svg new file mode 100644 index 00000000..801703e4 --- /dev/null +++ b/apps/info/src/assets/logos/logo_info.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/info/src/components/AnimatedLogo.tsx b/apps/info/src/components/AnimatedLogo.tsx index 0106991d..95840a72 100644 --- a/apps/info/src/components/AnimatedLogo.tsx +++ b/apps/info/src/components/AnimatedLogo.tsx @@ -1,6 +1,39 @@ import { motion } from "framer-motion"; import { useCallback, useEffect, useRef, useState } from "react"; +import logo2025 from "../assets/logos/logo_2025.svg?raw"; +import logo2024 from "../assets/logos/logo_2024.svg?raw"; +import logo2023 from "../assets/logos/logo_2023.svg?raw"; +import logo2022 from "../assets/logos/logo_2022.svg?raw"; +import logo2021 from "../assets/logos/logo_2021.svg?raw"; +import logo2020 from "../assets/logos/logo_2020.svg?raw"; +import logo2019 from "../assets/logos/logo_2019.svg?raw"; +import logo2018 from "../assets/logos/logo_2018.svg?raw"; +import logoInfo from "../assets/logos/logo_info.svg?raw"; + +const CONSTANT_IMAGES = [ + logo2025, + logo2024, + logo2023, + logo2022, + logo2021, + logo2020, + logo2019, + logo2018 +]; + +const HOVER_IMAGES = [ + logoInfo, + logo2025, + logo2024, + logo2023, + logo2022, + logo2021, + logo2020, + logo2019, + logo2018 +]; + export const AnimatedLogoConstant = () => { const changeImageFnRef = useRef<() => void>(() => {}); const [rotation, setRotation] = useState(0); @@ -9,29 +42,18 @@ export const AnimatedLogoConstant = () => { const [bottomCurrentImage, setBottomCurrentImage] = useState(-1); const intervalRef = useRef(null); - const images = [ - "logo_2025.svg", - "logo_2024.svg", - "logo_2023.svg", - "logo_2022.svg", - "logo_2021.svg", - "logo_2020.svg", - "logo_2019.svg", - "logo_2018.svg" - ]; - // this updates every render so the ref always has a fresh function changeImageFnRef.current = () => { // switch to bottom if (topOpacity) { setRotation((prev) => prev + 360); - setBottomCurrentImage((prev) => (prev + 2) % images.length); // bottom switches by 2 + setBottomCurrentImage((prev) => (prev + 2) % CONSTANT_IMAGES.length); // bottom switches by 2 setTopOpacity((prev) => (prev + 1) % 2); // top fades out } // switch to top else { setRotation((prev) => prev + 360); - setTopCurrentImage((prev) => (prev + 2) % images.length); // top switches by 2 + setTopCurrentImage((prev) => (prev + 2) % CONSTANT_IMAGES.length); // top switches by 2 setTopOpacity((prev) => (prev + 1) % 2); // top fades in } }; @@ -66,27 +88,29 @@ export const AnimatedLogoConstant = () => { return ( <> - - ); @@ -101,30 +125,18 @@ export const AnimatedLogoHover = () => { const [bottomCurrentImage, setBottomCurrentImage] = useState(-1); const intervalRef = useRef(null); - const images = [ - "logo_info.svg", - "logo_2025.svg", - "logo_2024.svg", - "logo_2023.svg", - "logo_2022.svg", - "logo_2021.svg", - "logo_2020.svg", - "logo_2019.svg", - "logo_2018.svg" - ]; - // this updates every render so the ref always has a fresh function changeImageFnRef.current = () => { // switch to bottom if (topOpacity) { setRotation((prev) => prev + 360); - setBottomCurrentImage((prev) => (prev + 2) % images.length); // bottom switches by 2 + setBottomCurrentImage((prev) => (prev + 2) % HOVER_IMAGES.length); // bottom switches by 2 setTopOpacity((prev) => (prev + 1) % 2); // top fades out } // switch to top else { setRotation((prev) => prev + 360); - setTopCurrentImage((prev) => (prev + 2) % images.length); // top switches by 2 + setTopCurrentImage((prev) => (prev + 2) % HOVER_IMAGES.length); // top switches by 2 setTopOpacity((prev) => (prev + 1) % 2); // top fades in } }; @@ -153,29 +165,31 @@ export const AnimatedLogoHover = () => { return ( <> - setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} animate={{ rotate: rotation, opacity: topOpacity }} transition={{ duration: 0.5, ease: "easeInOut" }} - width="100%" - height="100%" style={{ zIndex: 2, - position: "absolute" + position: "absolute", + width: "100%", + height: "100%" }} - src={images[topCurrentImage]} + dangerouslySetInnerHTML={{ __html: HOVER_IMAGES[topCurrentImage] }} /> - );