From 3c5a795f1d6f83cc9e8c475558cf07ec7164bb6d Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Fri, 13 Dec 2024 02:37:29 +0000 Subject: [PATCH 01/23] Add color transitions between slides - Add foreground color prop to Slide component - Create shared color utilities - Update slides 1 and 2 with color transitions - Refactor homepage to use shared utilities Co-Authored-By: sahil.lavingia@gmail.com --- app/2025/slides/1.tsx | 3 ++ app/2025/slides/2.tsx | 4 +++ components/Slide.tsx | 4 ++- components/SlideDeck.tsx | 4 ++- components/page.tsx | 67 ++++++---------------------------------- utils/colors.ts | 60 +++++++++++++++++++++++++++++++++++ 6 files changed, 83 insertions(+), 59 deletions(-) create mode 100644 utils/colors.ts diff --git a/app/2025/slides/1.tsx b/app/2025/slides/1.tsx index cfe5974..7df3213 100644 --- a/app/2025/slides/1.tsx +++ b/app/2025/slides/1.tsx @@ -43,3 +43,6 @@ export default function Slide1() { ); } + +Slide1.backgroundColor = "bg-white"; +Slide1.foregroundColor = "text-black"; diff --git a/app/2025/slides/2.tsx b/app/2025/slides/2.tsx index 46069b8..c9cd71d 100644 --- a/app/2025/slides/2.tsx +++ b/app/2025/slides/2.tsx @@ -96,3 +96,7 @@ export default function Slide2() { ); } + +// Add static color properties +Slide2.backgroundColor = "bg-blue-100"; +Slide2.foregroundColor = "text-blue-900"; diff --git a/components/Slide.tsx b/components/Slide.tsx index e51c906..e243dcd 100644 --- a/components/Slide.tsx +++ b/components/Slide.tsx @@ -3,6 +3,7 @@ import { ReactNode } from "react"; interface SlideProps { id: number; backgroundColor?: string; + foregroundColor?: string; // Add foreground color support children: ReactNode; currentSlide?: number; } @@ -10,13 +11,14 @@ interface SlideProps { export function Slide({ id, backgroundColor = "bg-white", + foregroundColor = "text-black", // Default foreground color currentSlide = 1, children, }: SlideProps) { return (
diff --git a/components/SlideDeck.tsx b/components/SlideDeck.tsx index a060cd0..980fd5e 100644 --- a/components/SlideDeck.tsx +++ b/components/SlideDeck.tsx @@ -5,9 +5,10 @@ import { Slide } from "@/components/Slide"; interface SlideDeckProps { slides: React.ReactElement[]; backgroundColor?: string; + foregroundColor?: string; // Add foreground color support } -export function SlideDeck({ slides, backgroundColor = "bg-white" }: SlideDeckProps) { +export function SlideDeck({ slides, backgroundColor = "bg-white", foregroundColor = "text-black" }: SlideDeckProps) { const [touchStart, setTouchStart] = useState(null); const [touchEnd, setTouchEnd] = useState(null); const [currentSlide, setCurrentSlide] = useState(1); @@ -92,6 +93,7 @@ export function SlideDeck({ slides, backgroundColor = "bg-white" }: SlideDeckPro id={currentSlide} currentSlide={currentSlide} backgroundColor={slides[currentSlide - 1].props.backgroundColor || backgroundColor} + foregroundColor={slides[currentSlide - 1].props.foregroundColor || foregroundColor} > {slides[currentSlide - 1]} diff --git a/components/page.tsx b/components/page.tsx index 8531735..5e190f0 100644 --- a/components/page.tsx +++ b/components/page.tsx @@ -14,6 +14,7 @@ import { import { useState, useEffect, useCallback, Suspense } from "react"; import { Logo } from "@/app/components/Logo"; import { useRouter, useSearchParams } from "next/navigation"; +import { generateRandomColors } from "@/utils/colors"; function PageContent() { const [backgroundColor, setBackgroundColor] = useState(""); @@ -23,63 +24,15 @@ function PageContent() { const router = useRouter(); const searchParams = useSearchParams(); - const generateRandomColors = useCallback(() => { - const generateRandomColor = () => - `#${Math.floor(Math.random() * 16777215) - .toString(16) - .padStart(6, "0")}`; - - const getContrastRatio = (color1: string, color2: string) => { - const luminance = (color: string) => { - const rgb = parseInt(color.slice(1), 16); - const r = (rgb >> 16) & 0xff; - const g = (rgb >> 8) & 0xff; - const b = (rgb >> 0) & 0xff; - return 0.2126 * r + 0.7152 * g + 0.0722 * b; - }; - const l1 = luminance(color1); - const l2 = luminance(color2); - return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05); - }; - - let backgroundColor, textColor; - do { - backgroundColor = generateRandomColor(); - textColor = generateRandomColor(); - } while (getContrastRatio(backgroundColor, textColor) < 4.5); - + const generateRandomColorsForPage = useCallback(() => { + const { backgroundColor, textColor } = generateRandomColors(); setBackgroundColor(backgroundColor); setTextColor(textColor); - - // Update URL with new colors router.push(`?bg=${backgroundColor.slice(1)}&txt=${textColor.slice(1)}`); }, [router]); - const setInitialColors = useCallback(() => { - const generateRandomColor = () => - `#${Math.floor(Math.random() * 16777215) - .toString(16) - .padStart(6, "0")}`; - - const getContrastRatio = (color1: string, color2: string) => { - const luminance = (color: string) => { - const rgb = parseInt(color.slice(1), 16); - const r = (rgb >> 16) & 0xff; - const g = (rgb >> 8) & 0xff; - const b = (rgb >> 0) & 0xff; - return 0.2126 * r + 0.7152 * g + 0.0722 * b; - }; - const l1 = luminance(color1); - const l2 = luminance(color2); - return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05); - }; - - let backgroundColor, textColor; - do { - backgroundColor = generateRandomColor(); - textColor = generateRandomColor(); - } while (getContrastRatio(backgroundColor, textColor) < 4.5); - + const setInitialColorsForPage = useCallback(() => { + const { backgroundColor, textColor } = generateRandomColors(); setBackgroundColor(backgroundColor); setTextColor(textColor); }, []); @@ -92,9 +45,9 @@ function PageContent() { setBackgroundColor(`#${bgColor}`); setTextColor(`#${txtColor}`); } else { - setInitialColors(); + setInitialColorsForPage(); } - }, [searchParams, setInitialColors]); + }, [searchParams, setInitialColorsForPage]); useEffect(() => { // Set the background color of the html and body elements @@ -105,7 +58,7 @@ function PageContent() { useEffect(() => { const handleKeyPress = (event: KeyboardEvent) => { if (event.key === "s" || event.key === "S") { - generateRandomColors(); + generateRandomColorsForPage(); } }; @@ -114,7 +67,7 @@ function PageContent() { return () => { window.removeEventListener("keydown", handleKeyPress); }; - }, [generateRandomColors]); + }, [generateRandomColorsForPage]); useEffect(() => { const updateLogoSize = () => { @@ -242,7 +195,7 @@ function PageContent() { onMouseLeave={() => setShowShortcutHint(false)} >
); -} \ No newline at end of file +} + +Slide3.backgroundColor = "bg-gray-50"; +Slide3.foregroundColor = "text-gray-900"; diff --git a/app/2025/slides/4.tsx b/app/2025/slides/4.tsx index 69ccf9e..99a3793 100644 --- a/app/2025/slides/4.tsx +++ b/app/2025/slides/4.tsx @@ -111,3 +111,6 @@ export default function Slide4() { ); } + +Slide4.backgroundColor = "bg-gray-100"; +Slide4.foregroundColor = "text-gray-900"; diff --git a/app/2025/slides/5.tsx b/app/2025/slides/5.tsx index e02cc0d..248deb8 100644 --- a/app/2025/slides/5.tsx +++ b/app/2025/slides/5.tsx @@ -26,4 +26,7 @@ export default function Slide5() { ); -} \ No newline at end of file +} + +Slide5.backgroundColor = "bg-amber-50"; +Slide5.foregroundColor = "text-gray-900"; diff --git a/app/2025/slides/6.tsx b/app/2025/slides/6.tsx index 4bc1471..f77183f 100644 --- a/app/2025/slides/6.tsx +++ b/app/2025/slides/6.tsx @@ -15,4 +15,7 @@ export default function Slide6() { ); -} \ No newline at end of file +} + +Slide6.backgroundColor = "bg-rose-50"; +Slide6.foregroundColor = "text-gray-900"; From ec078dedd00d793d4b6b1b6bc023e7c9a1410760 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Fri, 13 Dec 2024 02:48:07 +0000 Subject: [PATCH 03/23] Add color transitions for slide 7 Co-Authored-By: sahil.lavingia@gmail.com --- app/2025/slides/7.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/2025/slides/7.tsx b/app/2025/slides/7.tsx index d29890a..2ca9cf2 100644 --- a/app/2025/slides/7.tsx +++ b/app/2025/slides/7.tsx @@ -33,3 +33,6 @@ export default function Slide7() { ); } + +Slide7.backgroundColor = "bg-indigo-50"; +Slide7.foregroundColor = "text-gray-900"; From 31e992789a9dbd157e8c14608e701ba19f00a6ab Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Fri, 13 Dec 2024 02:49:15 +0000 Subject: [PATCH 04/23] Add color transitions for slide 8 Co-Authored-By: sahil.lavingia@gmail.com --- app/2025/slides/8.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/2025/slides/8.tsx b/app/2025/slides/8.tsx index 163f090..c70cd30 100644 --- a/app/2025/slides/8.tsx +++ b/app/2025/slides/8.tsx @@ -16,3 +16,6 @@ export default function Slide8() { ); } + +Slide8.backgroundColor = "bg-teal-50"; +Slide8.foregroundColor = "text-gray-900"; From 7d101d55c2900256d0a2b54ec8f96ce2926532e8 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Fri, 13 Dec 2024 02:50:21 +0000 Subject: [PATCH 05/23] Add color transitions for slide 9 Co-Authored-By: sahil.lavingia@gmail.com --- app/2025/slides/9.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/2025/slides/9.tsx b/app/2025/slides/9.tsx index d6e9f58..5e312aa 100644 --- a/app/2025/slides/9.tsx +++ b/app/2025/slides/9.tsx @@ -25,3 +25,6 @@ export default function Slide9() { ); } + +Slide9.backgroundColor = "bg-violet-50"; +Slide9.foregroundColor = "text-gray-900"; From 4ecc29afb3279d6aa545ca902e9981e9f07b127a Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Fri, 13 Dec 2024 02:55:01 +0000 Subject: [PATCH 06/23] Add color transitions for slide 10 Co-Authored-By: sahil.lavingia@gmail.com --- app/2025/slides/10.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/2025/slides/10.tsx b/app/2025/slides/10.tsx index a2c9121..06a6a02 100644 --- a/app/2025/slides/10.tsx +++ b/app/2025/slides/10.tsx @@ -25,3 +25,6 @@ export default function Slide10() { ); } + +Slide10.backgroundColor = "bg-emerald-50"; +Slide10.foregroundColor = "text-gray-900"; From e9b44829fbbee4480cda1203f17200d9fa0a9ea8 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Fri, 13 Dec 2024 02:56:10 +0000 Subject: [PATCH 07/23] Add color transitions for slide 11 Co-Authored-By: sahil.lavingia@gmail.com --- app/2025/slides/11.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/2025/slides/11.tsx b/app/2025/slides/11.tsx index 8140ac9..b2688d7 100644 --- a/app/2025/slides/11.tsx +++ b/app/2025/slides/11.tsx @@ -55,4 +55,7 @@ export default function Slide11() { ); -} \ No newline at end of file +} + +Slide11.backgroundColor = "bg-sky-50"; +Slide11.foregroundColor = "text-gray-900"; From 94509a707ca53592a21f3b7cf7a9d4ca15c2545d Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Fri, 13 Dec 2024 03:01:00 +0000 Subject: [PATCH 08/23] Add color transitions for slide 12 Co-Authored-By: sahil.lavingia@gmail.com --- app/2025/slides/12.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/2025/slides/12.tsx b/app/2025/slides/12.tsx index 81d7666..a066a6f 100644 --- a/app/2025/slides/12.tsx +++ b/app/2025/slides/12.tsx @@ -44,4 +44,7 @@ export default function Slide12() { ); -} \ No newline at end of file +} + +Slide12.backgroundColor = "bg-indigo-50"; +Slide12.foregroundColor = "text-gray-900"; From 1e4d1d163d25a65b2cc14921fe330e84c4219715 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Fri, 13 Dec 2024 03:02:05 +0000 Subject: [PATCH 09/23] Add color transitions for slide 13 Co-Authored-By: sahil.lavingia@gmail.com --- app/2025/slides/13.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/2025/slides/13.tsx b/app/2025/slides/13.tsx index c32aaf5..25d1004 100644 --- a/app/2025/slides/13.tsx +++ b/app/2025/slides/13.tsx @@ -44,3 +44,6 @@ export default function Slide13() { ); } + +Slide13.backgroundColor = "bg-purple-50"; +Slide13.foregroundColor = "text-gray-900"; From bcf48719124710f7c6ff6505c1e4a5344f1fe34c Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Fri, 13 Dec 2024 03:03:09 +0000 Subject: [PATCH 10/23] Add color transitions for slide 14 Co-Authored-By: sahil.lavingia@gmail.com --- app/2025/slides/14.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/2025/slides/14.tsx b/app/2025/slides/14.tsx index 5b47bd5..a671472 100644 --- a/app/2025/slides/14.tsx +++ b/app/2025/slides/14.tsx @@ -46,4 +46,7 @@ export default function Slide14() { ); -} \ No newline at end of file +} + +Slide14.backgroundColor = "bg-slate-50"; +Slide14.foregroundColor = "text-gray-900"; From 77000e48b92df316f97f18cdb6c101547b0bbc3a Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Fri, 13 Dec 2024 03:04:16 +0000 Subject: [PATCH 11/23] Add color transitions for slide 15 Co-Authored-By: sahil.lavingia@gmail.com --- app/2025/slides/15.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/2025/slides/15.tsx b/app/2025/slides/15.tsx index a54ac45..1880bab 100644 --- a/app/2025/slides/15.tsx +++ b/app/2025/slides/15.tsx @@ -26,4 +26,7 @@ export default function Slide15() { ); -} \ No newline at end of file +} + +Slide15.backgroundColor = "bg-cyan-50"; +Slide15.foregroundColor = "text-gray-900"; From 16c7c3b8e830bb27b518fa4abd881fdca199e704 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Fri, 13 Dec 2024 03:09:09 +0000 Subject: [PATCH 12/23] Add color transitions for slide 16 Co-Authored-By: sahil.lavingia@gmail.com --- app/2025/slides/16.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/2025/slides/16.tsx b/app/2025/slides/16.tsx index 2bf0eb0..4f16b6f 100644 --- a/app/2025/slides/16.tsx +++ b/app/2025/slides/16.tsx @@ -52,3 +52,6 @@ export default function Slide16() { ); } + +Slide16.backgroundColor = "bg-fuchsia-50"; +Slide16.foregroundColor = "text-gray-900"; From 3d7f02e28a5607486be0ced3103a7947dc6317fe Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Fri, 13 Dec 2024 03:10:14 +0000 Subject: [PATCH 13/23] Add color transitions for slide 18 Co-Authored-By: sahil.lavingia@gmail.com --- app/2025/slides/18.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/2025/slides/18.tsx b/app/2025/slides/18.tsx index 3e59424..24ff3a9 100644 --- a/app/2025/slides/18.tsx +++ b/app/2025/slides/18.tsx @@ -4,4 +4,7 @@ export default function Slide18() {

Questions?

); -} \ No newline at end of file +} + +Slide18.backgroundColor = "bg-lime-50"; +Slide18.foregroundColor = "text-gray-900"; From e0c7089123b5aeb3a171f5ee975ca3a0b11da130 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Fri, 13 Dec 2024 16:07:58 +0000 Subject: [PATCH 14/23] Remove static color properties from slides and use random color generation Co-Authored-By: sahil.lavingia@gmail.com --- app/2025/page.tsx | 2 +- app/2025/slides/1.tsx | 3 --- app/2025/slides/10.tsx | 3 --- app/2025/slides/11.tsx | 3 --- app/2025/slides/12.tsx | 3 --- app/2025/slides/13.tsx | 3 --- app/2025/slides/14.tsx | 3 --- app/2025/slides/15.tsx | 3 --- app/2025/slides/16.tsx | 3 --- app/2025/slides/18.tsx | 3 --- app/2025/slides/2.tsx | 4 ---- app/2025/slides/3.tsx | 3 --- app/2025/slides/4.tsx | 3 --- app/2025/slides/5.tsx | 3 --- app/2025/slides/6.tsx | 3 --- app/2025/slides/7.tsx | 3 --- app/2025/slides/8.tsx | 3 --- app/2025/slides/9.tsx | 3 --- components/SlideDeck.tsx | 32 ++++++++++++++++++++++++-------- 19 files changed, 25 insertions(+), 61 deletions(-) diff --git a/app/2025/page.tsx b/app/2025/page.tsx index bc15d85..a047b5b 100644 --- a/app/2025/page.tsx +++ b/app/2025/page.tsx @@ -38,5 +38,5 @@ export default function AnnualMeeting() { , ]; - return ; + return ; } diff --git a/app/2025/slides/1.tsx b/app/2025/slides/1.tsx index 7df3213..cfe5974 100644 --- a/app/2025/slides/1.tsx +++ b/app/2025/slides/1.tsx @@ -43,6 +43,3 @@ export default function Slide1() { ); } - -Slide1.backgroundColor = "bg-white"; -Slide1.foregroundColor = "text-black"; diff --git a/app/2025/slides/10.tsx b/app/2025/slides/10.tsx index 06a6a02..a2c9121 100644 --- a/app/2025/slides/10.tsx +++ b/app/2025/slides/10.tsx @@ -25,6 +25,3 @@ export default function Slide10() { ); } - -Slide10.backgroundColor = "bg-emerald-50"; -Slide10.foregroundColor = "text-gray-900"; diff --git a/app/2025/slides/11.tsx b/app/2025/slides/11.tsx index b2688d7..60f8235 100644 --- a/app/2025/slides/11.tsx +++ b/app/2025/slides/11.tsx @@ -56,6 +56,3 @@ export default function Slide11() { ); } - -Slide11.backgroundColor = "bg-sky-50"; -Slide11.foregroundColor = "text-gray-900"; diff --git a/app/2025/slides/12.tsx b/app/2025/slides/12.tsx index a066a6f..ad32da3 100644 --- a/app/2025/slides/12.tsx +++ b/app/2025/slides/12.tsx @@ -45,6 +45,3 @@ export default function Slide12() { ); } - -Slide12.backgroundColor = "bg-indigo-50"; -Slide12.foregroundColor = "text-gray-900"; diff --git a/app/2025/slides/13.tsx b/app/2025/slides/13.tsx index 25d1004..c32aaf5 100644 --- a/app/2025/slides/13.tsx +++ b/app/2025/slides/13.tsx @@ -44,6 +44,3 @@ export default function Slide13() { ); } - -Slide13.backgroundColor = "bg-purple-50"; -Slide13.foregroundColor = "text-gray-900"; diff --git a/app/2025/slides/14.tsx b/app/2025/slides/14.tsx index a671472..bcfecd5 100644 --- a/app/2025/slides/14.tsx +++ b/app/2025/slides/14.tsx @@ -47,6 +47,3 @@ export default function Slide14() { ); } - -Slide14.backgroundColor = "bg-slate-50"; -Slide14.foregroundColor = "text-gray-900"; diff --git a/app/2025/slides/15.tsx b/app/2025/slides/15.tsx index 1880bab..3dfb8d2 100644 --- a/app/2025/slides/15.tsx +++ b/app/2025/slides/15.tsx @@ -27,6 +27,3 @@ export default function Slide15() { ); } - -Slide15.backgroundColor = "bg-cyan-50"; -Slide15.foregroundColor = "text-gray-900"; diff --git a/app/2025/slides/16.tsx b/app/2025/slides/16.tsx index 4f16b6f..2bf0eb0 100644 --- a/app/2025/slides/16.tsx +++ b/app/2025/slides/16.tsx @@ -52,6 +52,3 @@ export default function Slide16() { ); } - -Slide16.backgroundColor = "bg-fuchsia-50"; -Slide16.foregroundColor = "text-gray-900"; diff --git a/app/2025/slides/18.tsx b/app/2025/slides/18.tsx index 24ff3a9..aa7c246 100644 --- a/app/2025/slides/18.tsx +++ b/app/2025/slides/18.tsx @@ -5,6 +5,3 @@ export default function Slide18() { ); } - -Slide18.backgroundColor = "bg-lime-50"; -Slide18.foregroundColor = "text-gray-900"; diff --git a/app/2025/slides/2.tsx b/app/2025/slides/2.tsx index c9cd71d..46069b8 100644 --- a/app/2025/slides/2.tsx +++ b/app/2025/slides/2.tsx @@ -96,7 +96,3 @@ export default function Slide2() { ); } - -// Add static color properties -Slide2.backgroundColor = "bg-blue-100"; -Slide2.foregroundColor = "text-blue-900"; diff --git a/app/2025/slides/3.tsx b/app/2025/slides/3.tsx index 8b9ada8..bd7cac2 100644 --- a/app/2025/slides/3.tsx +++ b/app/2025/slides/3.tsx @@ -126,6 +126,3 @@ export default function Slide3() { ); } - -Slide3.backgroundColor = "bg-gray-50"; -Slide3.foregroundColor = "text-gray-900"; diff --git a/app/2025/slides/4.tsx b/app/2025/slides/4.tsx index 99a3793..69ccf9e 100644 --- a/app/2025/slides/4.tsx +++ b/app/2025/slides/4.tsx @@ -111,6 +111,3 @@ export default function Slide4() { ); } - -Slide4.backgroundColor = "bg-gray-100"; -Slide4.foregroundColor = "text-gray-900"; diff --git a/app/2025/slides/5.tsx b/app/2025/slides/5.tsx index 248deb8..ad6dcd7 100644 --- a/app/2025/slides/5.tsx +++ b/app/2025/slides/5.tsx @@ -27,6 +27,3 @@ export default function Slide5() { ); } - -Slide5.backgroundColor = "bg-amber-50"; -Slide5.foregroundColor = "text-gray-900"; diff --git a/app/2025/slides/6.tsx b/app/2025/slides/6.tsx index f77183f..d0eaad9 100644 --- a/app/2025/slides/6.tsx +++ b/app/2025/slides/6.tsx @@ -16,6 +16,3 @@ export default function Slide6() { ); } - -Slide6.backgroundColor = "bg-rose-50"; -Slide6.foregroundColor = "text-gray-900"; diff --git a/app/2025/slides/7.tsx b/app/2025/slides/7.tsx index 2ca9cf2..d29890a 100644 --- a/app/2025/slides/7.tsx +++ b/app/2025/slides/7.tsx @@ -33,6 +33,3 @@ export default function Slide7() { ); } - -Slide7.backgroundColor = "bg-indigo-50"; -Slide7.foregroundColor = "text-gray-900"; diff --git a/app/2025/slides/8.tsx b/app/2025/slides/8.tsx index c70cd30..163f090 100644 --- a/app/2025/slides/8.tsx +++ b/app/2025/slides/8.tsx @@ -16,6 +16,3 @@ export default function Slide8() { ); } - -Slide8.backgroundColor = "bg-teal-50"; -Slide8.foregroundColor = "text-gray-900"; diff --git a/app/2025/slides/9.tsx b/app/2025/slides/9.tsx index 5e312aa..d6e9f58 100644 --- a/app/2025/slides/9.tsx +++ b/app/2025/slides/9.tsx @@ -25,6 +25,3 @@ export default function Slide9() { ); } - -Slide9.backgroundColor = "bg-violet-50"; -Slide9.foregroundColor = "text-gray-900"; diff --git a/components/SlideDeck.tsx b/components/SlideDeck.tsx index 980fd5e..d80ccfc 100644 --- a/components/SlideDeck.tsx +++ b/components/SlideDeck.tsx @@ -1,28 +1,41 @@ -import { useState, useEffect } from "react"; +import { useState, useEffect, useCallback } from "react"; import { Loader2 } from "lucide-react"; import { Slide } from "@/components/Slide"; +import { generateRandomColors, hexToTailwindBg, hexToTailwindText } from "@/utils/colors"; interface SlideDeckProps { slides: React.ReactElement[]; backgroundColor?: string; - foregroundColor?: string; // Add foreground color support + foregroundColor?: string; } -export function SlideDeck({ slides, backgroundColor = "bg-white", foregroundColor = "text-black" }: SlideDeckProps) { +export function SlideDeck({ slides }: SlideDeckProps) { const [touchStart, setTouchStart] = useState(null); const [touchEnd, setTouchEnd] = useState(null); const [currentSlide, setCurrentSlide] = useState(1); const [typedNumber, setTypedNumber] = useState(""); - const [typingTimeout, setTypingTimeout] = useState( - null - ); + const [typingTimeout, setTypingTimeout] = useState(null); + const [currentColors, setCurrentColors] = useState(() => { + const { backgroundColor: bg, textColor: fg } = generateRandomColors(); + return { backgroundColor: hexToTailwindBg(bg), foregroundColor: hexToTailwindText(fg) }; + }); const totalSlides = slides.length; + const generateNewColors = useCallback(() => { + const { backgroundColor: bg, textColor: fg } = generateRandomColors(); + setCurrentColors({ + backgroundColor: hexToTailwindBg(bg), + foregroundColor: hexToTailwindText(fg) + }); + }, []); + const handleKeyPress = (e: KeyboardEvent) => { if (e.key === "ArrowRight" && currentSlide < totalSlides) { setCurrentSlide(currentSlide + 1); + generateNewColors(); } else if (e.key === "ArrowLeft" && currentSlide > 1) { setCurrentSlide(currentSlide - 1); + generateNewColors(); } else if (/^[0-9]$/.test(e.key)) { if (typingTimeout) { clearTimeout(typingTimeout); @@ -34,6 +47,7 @@ export function SlideDeck({ slides, backgroundColor = "bg-white", foregroundColo const slideNumber = parseInt(newTypedNumber); if (slideNumber > 0 && slideNumber <= totalSlides) { setCurrentSlide(slideNumber); + generateNewColors(); } setTypedNumber(""); }, 750); @@ -59,10 +73,12 @@ export function SlideDeck({ slides, backgroundColor = "bg-white", foregroundColo if (isLeftSwipe && currentSlide < totalSlides) { setCurrentSlide(currentSlide + 1); + generateNewColors(); } if (isRightSwipe && currentSlide > 1) { setCurrentSlide(currentSlide - 1); + generateNewColors(); } setTouchEnd(null); @@ -92,8 +108,8 @@ export function SlideDeck({ slides, backgroundColor = "bg-white", foregroundColo {slides[currentSlide - 1]} From 41d3ba2cc5d9331ba7e8cf35792075b6fc8972bf Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Fri, 13 Dec 2024 16:14:55 +0000 Subject: [PATCH 15/23] Refactor color generation in SlideDeck component for cleaner variable names Co-Authored-By: sahil.lavingia@gmail.com --- components/SlideDeck.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/components/SlideDeck.tsx b/components/SlideDeck.tsx index d80ccfc..5b590c8 100644 --- a/components/SlideDeck.tsx +++ b/components/SlideDeck.tsx @@ -16,16 +16,19 @@ export function SlideDeck({ slides }: SlideDeckProps) { const [typedNumber, setTypedNumber] = useState(""); const [typingTimeout, setTypingTimeout] = useState(null); const [currentColors, setCurrentColors] = useState(() => { - const { backgroundColor: bg, textColor: fg } = generateRandomColors(); - return { backgroundColor: hexToTailwindBg(bg), foregroundColor: hexToTailwindText(fg) }; + const { backgroundColor, textColor } = generateRandomColors(); + return { + backgroundColor: hexToTailwindBg(backgroundColor), + foregroundColor: hexToTailwindText(textColor) + }; }); const totalSlides = slides.length; const generateNewColors = useCallback(() => { - const { backgroundColor: bg, textColor: fg } = generateRandomColors(); + const { backgroundColor, textColor } = generateRandomColors(); setCurrentColors({ - backgroundColor: hexToTailwindBg(bg), - foregroundColor: hexToTailwindText(fg) + backgroundColor: hexToTailwindBg(backgroundColor), + foregroundColor: hexToTailwindText(textColor) }); }, []); From ee488cd88f2aa67f456d84712fc018bbb532329d Mon Sep 17 00:00:00 2001 From: Sahil Lavingia Date: Mon, 30 Dec 2024 11:41:11 -0500 Subject: [PATCH 16/23] cp --- .eslintrc.json | 6 +- .github/workflows/autofix.yml | 40 +++++++ .prettierrc | 7 ++ app/2024/q4/page.tsx | 100 ++++++++--------- app/2025/page.tsx | 12 -- app/2025/slides/1.tsx | 18 +-- app/2025/slides/10.tsx | 27 ----- app/2025/slides/11.tsx | 22 ++-- app/2025/slides/12.tsx | 20 ++-- app/2025/slides/13.tsx | 20 ++-- app/2025/slides/14.tsx | 20 ++-- app/2025/slides/15.tsx | 16 +-- app/2025/slides/16.tsx | 54 --------- app/2025/slides/18.tsx | 7 -- app/2025/slides/2.tsx | 31 ++++-- app/2025/slides/3.tsx | 36 +++--- app/2025/slides/4.tsx | 29 +++-- app/2025/slides/5.tsx | 21 ++-- app/2025/slides/6.tsx | 18 --- app/2025/slides/7.tsx | 29 ++--- app/2025/slides/8.tsx | 18 --- app/2025/slides/9.tsx | 27 ----- app/api/logo/route.tsx | 4 +- app/api/og/route.tsx | 4 +- components.json | 2 +- components/Slide.tsx | 9 +- components/SlideDeck.tsx | 68 +++++------- components/page.tsx | 54 ++++----- components/ui/card.tsx | 41 ++++--- components/ui/chart.tsx | 10 +- components/ui/slider.tsx | 2 +- lib/utils.ts | 6 +- package-lock.json | 200 ++++++++++++++++++++++++++++++++++ package.json | 8 +- tsconfig.json | 21 +--- utils/colors.ts | 2 +- 36 files changed, 558 insertions(+), 451 deletions(-) create mode 100644 .github/workflows/autofix.yml create mode 100644 .prettierrc delete mode 100644 app/2025/slides/10.tsx delete mode 100644 app/2025/slides/16.tsx delete mode 100644 app/2025/slides/18.tsx delete mode 100644 app/2025/slides/6.tsx delete mode 100644 app/2025/slides/8.tsx delete mode 100644 app/2025/slides/9.tsx diff --git a/.eslintrc.json b/.eslintrc.json index 3722418..f8a16da 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,3 +1,7 @@ { - "extends": ["next/core-web-vitals", "next/typescript"] + "extends": ["next/core-web-vitals", "prettier"], + "plugins": ["prettier"], + "rules": { + "prettier/prettier": "error" + } } diff --git a/.github/workflows/autofix.yml b/.github/workflows/autofix.yml new file mode 100644 index 0000000..179e15e --- /dev/null +++ b/.github/workflows/autofix.yml @@ -0,0 +1,40 @@ +name: Auto Fix Code Issues + +on: + pull_request: + types: [opened, synchronize] + +jobs: + autofix: + name: Auto-fix Code Issues + runs-on: ubuntu-latest + permissions: + contents: write + pull-requests: write + + steps: + - uses: actions/checkout@v4 + with: + ref: ${{ github.head_ref }} + token: ${{ secrets.GITHUB_TOKEN }} + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: "20" + cache: "npm" + + - name: Install dependencies + run: npm ci + + - name: Run Prettier + run: npx prettier --write . + + - name: Run ESLint fix + run: npx eslint . --fix --ext .js,.jsx,.ts,.tsx + + - name: Commit changes + uses: stefanzweifel/git-auto-commit-action@v5 + with: + commit_message: "style: auto-fix code formatting and linting issues" + branch: ${{ github.head_ref }} diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..35bfe79 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,7 @@ +{ + "semi": true, + "singleQuote": false, + "tabWidth": 2, + "trailingComma": "es5", + "plugins": ["prettier-plugin-tailwindcss"] +} diff --git a/app/2024/q4/page.tsx b/app/2024/q4/page.tsx index 6224d5e..03c0293 100644 --- a/app/2024/q4/page.tsx +++ b/app/2024/q4/page.tsx @@ -83,7 +83,7 @@ export default function QuarterlyAllHands() { { backgroundColor: "bg-black", content: ( -
+
@@ -97,14 +97,14 @@ export default function QuarterlyAllHands() { { backgroundColor: "bg-white", content: ( -
+
Anti-Work
-

+

Transforming Work and Compensation

@@ -113,8 +113,8 @@ export default function QuarterlyAllHands() { { backgroundColor: "bg-white", content: ( -
-