refactor: Rename all images to dash-case (#39)

* refactor: rename all images to dash-case * refactor: add `logos` folder in `images`
compsci-adl · Jan 24, 2024 · 43fcd97 · 43fcd97
1 parent ebd4d02
commit 43fcd97
Show file tree

Hide file tree

Showing 20 changed files with 25 additions and 30 deletions.
diff --git a/public/images/greyDuckOutline.svg → public/images/grey-duck-outline.svg b/public/images/greyDuckOutline.svg → public/images/grey-duck-outline.svg
diff --git a/public/images/cyberPanel.jpg → public/images/home/cyber-panel.jpg b/public/images/cyberPanel.jpg → public/images/home/cyber-panel.jpg
diff --git a/public/images/duckCTF.jpg → public/images/home/duck-ctf.jpg b/public/images/duckCTF.jpg → public/images/home/duck-ctf.jpg
diff --git a/public/images/pizza.jpg → public/images/home/pizza.jpg b/public/images/pizza.jpg → public/images/home/pizza.jpg
diff --git a/public/logo/logo-text.svg → public/images/logos/logo-text.svg b/public/logo/logo-text.svg → public/images/logos/logo-text.svg
diff --git a/public/images/logo.png → public/images/logos/logo.png b/public/images/logo.png → public/images/logos/logo.png
diff --git a/public/logo/logo.svg → public/images/logos/logo.svg b/public/logo/logo.svg → public/images/logos/logo.svg
diff --git a/public/images/rectangleGrid.svg → public/images/rectangle-grid.svg b/public/images/rectangleGrid.svg → public/images/rectangle-grid.svg
diff --git a/public/images/squareGrid.svg → public/images/square-grid.svg b/public/images/squareGrid.svg → public/images/square-grid.svg
diff --git a/public/images/whiteDuckOutline.svg → public/images/white-duck-outline.svg b/public/images/whiteDuckOutline.svg → public/images/white-duck-outline.svg
diff --git a/public/images/whiteDuck.svg → public/images/white-duck.svg b/public/images/whiteDuck.svg → public/images/white-duck.svg
diff --git a/public/images/yellowDuck.svg → public/images/yellow-duck.svg b/public/images/yellowDuck.svg → public/images/yellow-duck.svg
diff --git a/public/images/yellowStar.svg → public/images/yellow-star.svg b/public/images/yellowStar.svg → public/images/yellow-star.svg
diff --git a/public/images/yellowTriangle.svg → public/images/yellow-triangle.svg b/public/images/yellowTriangle.svg → public/images/yellow-triangle.svg
diff --git a/src/app/(account)/join-us/ProgressBar.tsx b/src/app/(account)/join-us/ProgressBar.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image';
 
 function Duck({ filled, index }: { filled?: boolean; index: number }) {
-    const duckImageName = filled ? 'yellowDuck.svg' : 'greyDuckOutline.svg';
+    const duckImageName = filled ? 'yellow-duck.svg' : 'grey-duck-outline.svg';
     const duckImageAlt = filled ? 'Yellow Duck' : 'Grey Duck Outline';
 
     return (

diff --git a/src/app/(home)/ImageCarousel.tsx b/src/app/(home)/ImageCarousel.tsx
@@ -2,27 +2,22 @@
 
 import FancyRectangle from '@/components/FancyRectangle';
 import Image from 'next/image';
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
-interface CarouselImage {
-    src: string;
-    alt: string;
-}
-
-const images: CarouselImage[] = [
+const IMAGES = [
     {
-        src: '/images/duckCTF.jpg',
+        src: '/images/home/duck-ctf.jpg',
         alt: 'DuckCTF',
     },
     {
-        src: '/images/pizza.jpg',
+        src: '/images/home/pizza.jpg',
         alt: 'Pizza',
     },
     {
-        src: '/images/cyberPanel.jpg',
+        src: '/images/home/cyber-panel.jpg',
         alt: 'Cyber Panel',
     },
-];
+] as const;
 
 export default function ImageCarousel() {
     const [currentImageIndex, setCurrentImageIndex] = useState(0);
@@ -32,7 +27,7 @@ export default function ImageCarousel() {
         setIsTransitioning(true);
         setTimeout(() => {
             setCurrentImageIndex((prevIndex) =>
-                prevIndex === images.length - 1 ? 0 : prevIndex + 1
+                prevIndex === IMAGES.length - 1 ? 0 : prevIndex + 1
             );
             setIsTransitioning(false);
         }, 500);
@@ -53,8 +48,8 @@ export default function ImageCarousel() {
                         }`}
                     >
                         <Image
-                            src={images[currentImageIndex].src}
-                            alt={images[currentImageIndex].alt}
+                            src={IMAGES[currentImageIndex].src}
+                            alt={IMAGES[currentImageIndex].alt}
                             width={2132}
                             height={1600}
                             className="h-full w-full object-cover"

diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
@@ -14,7 +14,7 @@ export default function HomePage() {
                         <div>
                             {/* Grid */}
                             <Image
-                                src="/images/squareGrid.svg"
+                                src="/images/square-grid.svg"
                                 alt="Square Grid"
                                 width={500}
                                 height={500}
@@ -69,7 +69,7 @@ export default function HomePage() {
                     <div className="relative z-10 mt-4 flex flex-row items-center text-2xl font-black lg:text-3xl">
                         <h3 className="">First-Year Perks</h3>
                         <Image
-                            src="/images/yellowStar.svg"
+                            src="/images/yellow-star.svg"
                             alt="Yellow Star"
                             className="ml-4 h-10"
                             width={50}
@@ -91,7 +91,7 @@ export default function HomePage() {
                 <section>
                     {/* <Grid /> */}
                     <Image
-                        src="/images/squareGrid.svg"
+                        src="/images/square-grid.svg"
                         alt="Square Grid"
                         width={500}
                         height={500}
@@ -175,7 +175,7 @@ export default function HomePage() {
                 <section>
                     <div className="relative z-10 mt-12 flex flex-row items-center text-2xl font-black md:text-4xl lg:mt-20 lg:text-5xl">
                         <Image
-                            src="/images/yellowTriangle.svg"
+                            src="/images/yellow-triangle.svg"
                             alt="Yellow Triangle"
                             className="mb-12 mr-4"
                             width={30}
@@ -214,7 +214,7 @@ export default function HomePage() {
                     <div className="mb-[3em] md:mb-[8.75em] lg:md:mb-[11.3em]">
                         {/* <Grid /> */}
                         <Image
-                            src="/images/rectanglegrid.svg"
+                            src="/images/rectangle-grid.svg"
                             alt="Rectangle Grid"
                             width={500}
                             height={500}
@@ -225,45 +225,45 @@ export default function HomePage() {
                     <div className="relative z-10 ml-[2.5em] flex w-fit flex-col md:ml-[4.4em]">
                         <div className="relative mb-2 flex flex-row justify-end">
                             <Image
-                                src="/images/whiteDuckOutline.svg"
+                                src="/images/white-duck-outline.svg"
                                 alt="White Duck Outline"
                                 className="ml-4 h-8 md:h-10"
                                 height={50}
                                 width={50}
                             />
 
                             <Image
-                                src="/images/whiteDuckOutline.svg"
+                                src="/images/white-duck-outline.svg"
                                 alt="White Duck"
                                 className="ml-4 h-8 md:h-10"
                                 height={50}
                                 width={50}
                             />
 
                             <Image
-                                src="/images/whiteDuck.svg"
+                                src="/images/white-duck.svg"
                                 alt="White Duck"
                                 className="ml-4 h-8 md:h-10"
                                 height={50}
                                 width={50}
                             />
 
                             <Image
-                                src="/images/whiteDuck.svg"
+                                src="/images/white-duck.svg"
                                 alt="White Duck"
                                 className="ml-4 h-8 md:h-10"
                                 height={50}
                                 width={50}
                             />
                             <Image
-                                src="/images/whiteDuck.svg"
+                                src="/images/white-duck.svg"
                                 alt="White Duck"
                                 className="ml-4 h-8 md:h-10"
                                 height={50}
                                 width={50}
                             />
                             <Image
-                                src="/images/whiteDuck.svg"
+                                src="/images/white-duck.svg"
                                 alt="White Duck"
                                 className="ml-4 h-8 md:h-10"
                                 height={50}

diff --git a/src/app/contact/Form.tsx b/src/app/contact/Form.tsx
@@ -14,14 +14,14 @@ export default function Form({ className }: { className?: string }) {
     return (
         <div className={`${className} relative`}>
             <Image
-                src="/images/whiteDuck.svg"
+                src="/images/white-duck.svg"
                 alt="Duck"
                 width={60}
                 height={60}
                 className="absolute right-[25px] top-[-48px] hidden md:block"
             />
             <Image
-                src="/images/whiteDuck.svg"
+                src="/images/white-duck.svg"
                 alt="Duck"
                 width={60}
                 height={60}

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
@@ -5,7 +5,7 @@ import Sponsorship from './Sponsorship';
 
 export default function ContactPage() {
     return (
-        <div className="h-full bg-[url('/images/rectangleGrid.svg')] bg-repeat-y md:bg-[length:90%_90%] md:bg-center md:bg-no-repeat">
+        <div className="h-full bg-[url('/images/rectangle-grid.svg')] bg-repeat-y md:bg-[length:90%_90%] md:bg-center md:bg-no-repeat">
             <div className="grid grid-cols-1 gap-8 md:grid-cols-2 md:gap-10">
                 <div className="grid-flow-dense justify-self-center md:col-span-2">
                     <Title colour="yellow">Contact</Title>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -53,7 +53,7 @@ export default function Header() {
                         <div className="flex flex-row items-center">
                             <Link href="/" className="flex flex-row items-center">
                                 <Image
-                                    src="/logo/logo.svg"
+                                    src="/images/logos/logo.svg"
                                     alt="Computer Science Club Logo"
                                     className="h-full w-[3rem] md:w-[1.62rem] lg:w-[2.2rem]"
                                     width={100}