added sidebar and related components

10 files changed, 223 insertions, 4 deletions

diff --git a/src/components/LeftSidebarComponent.astro b/src/components/LeftSidebarComponent.astro
new file mode 100644
index 0000000..0580d09
--- /dev/null
+++ b/src/components/LeftSidebarComponent.astro
@@ -0,0 +1,31 @@
+---
+import NavigationComponent from './NavigationComponent.astro';
+import NavigationComponentLink from './NavigationComponentLink.astro';
+---
+
+<aside class="w-1/6">
+    <NavigationComponent title="Navigation">
+        <NavigationComponentLink href="/">Home</NavigationComponentLink>
+        <NavigationComponentLink href="/districts">Districts</NavigationComponentLink>
+        <NavigationComponentLink href="/guides">Guides</NavigationComponentLink>
+        <NavigationComponentLink href="/thoughts">Thoughts</NavigationComponentLink>
+        <NavigationComponentLink href="/faq">FAQ</NavigationComponentLink>
+    </NavigationComponent>
+
+    <img 
+        id="sidebar-image" 
+        src="/images/internal/sidebar/default.gif"
+        alt="Left Sidebar Image" 
+        class="w-full h-auto rounded-xl pointer-events-none select-none" 
+    />
+
+    <NavigationComponent title="Resources" variation="alternate">
+        <NavigationComponentLink href="/resources/avatars">Avatars</NavigationComponentLink>
+        <NavigationComponentLink href="/resources/backgrounds">Tiled Backgrounds</NavigationComponentLink>
+        <NavigationComponentLink href="/resources/blinkies">Blinkies</NavigationComponentLink>
+        <NavigationComponentLink href="/resources/flags">Flags</NavigationComponentLink>
+        <NavigationComponentLink href="/resources/stamps">Stamps</NavigationComponentLink>
+    </NavigationComponent>
+</aside>
+
+<script src="../scripts/sidebarImage.ts"></script>
diff --git a/src/components/NavigationComponent.astro b/src/components/NavigationComponent.astro
new file mode 100644
index 0000000..9987c2f
--- /dev/null
+++ b/src/components/NavigationComponent.astro
@@ -0,0 +1,29 @@
+---
+const { title, variation, bordered = true } = Astro.props;
+---
+
+<section class="saira uppercase my-4">
+    <div class="text-xl flex flex-row gap-2 justify-center items-center">
+        <div class={`${
+            variation === "alternate" ? "bg-pagodapink" : "bg-pagodapurple"
+        }
+        rounded-l-2xl px-4 h-6`}></div>
+        <div>{title}</div>
+        <div class={`${
+            variation === "alternate" ? "bg-pagodapurple" : "bg-pagodapink"
+        } ${
+            bordered ? "rounded-tr-2xl" : "rounded-r-2xl"
+        }
+        flex-grow h-6`}></div>
+    </div>
+    <div class={`
+    ${
+        bordered ? variation === "alternate" ? "border-pagodapurple bg-pagodapurple" : "border-pagodapink bg-pagodapink" : ""
+    }
+    ${
+        bordered ? "border-r-8 border-b-2 border-solid relative bottom-1" : ""
+    }
+    rounded-br ml-8`}>
+        <slot />
+    </div>
+</section>
\ No newline at end of file
diff --git a/src/components/NavigationComponentLink.astro b/src/components/NavigationComponentLink.astro
new file mode 100644
index 0000000..30fa456
--- /dev/null
+++ b/src/components/NavigationComponentLink.astro
@@ -0,0 +1,8 @@
+---
+const { href } = Astro.props;
+---
+
+<div class="text-pagodagreen group hover:text-pagodagreen-shine bg-black py-1 flex flex-row gap-2 justify-end transition-all ease-in-out hover:gap-4 duration-300 font-semibold first:rounded-tr-xl">
+    <a href={href}><slot /></a>
+    <span class="text-black group-hover:text-pagodapink-shine">▎</span>
+</div>
\ No newline at end of file
diff --git a/src/components/RightNavigationComponent.astro b/src/components/RightNavigationComponent.astro
new file mode 100644
index 0000000..fcf0c39
--- /dev/null
+++ b/src/components/RightNavigationComponent.astro
@@ -0,0 +1,29 @@
+---
+const { title, variation, bordered = true } = Astro.props;
+---
+
+<section class="saira uppercase my-4">
+    <div class="text-xl flex flex-row gap-2 justify-center items-center">
+        <div class={`${
+            variation === "alternate" ? "bg-pagodapink" : "bg-pagodapurple"
+        }
+        rounded-tl-2xl px-4 h-6`}></div>
+        <div>{title}</div>
+        <div class={`${
+            variation === "alternate" ? "bg-pagodapurple" : "bg-pagodapink"
+        } ${
+            bordered ? "rounded-r-2xl" : "rounded-tr-2xl"
+        }
+        flex-grow h-6`}></div>
+    </div>
+    <div class={`
+    ${
+        bordered ? variation === "alternate" ? "border-pagodapink bg-pagodapink" : "border-pagodapurple bg-pagodapurple" : ""
+    }
+    ${
+        bordered ? "border-l-8 border-b-2 border-solid relative bottom-1" : ""
+    }
+    rounded-bl mr-8`}>
+        <slot />
+    </div>
+</section>
\ No newline at end of file
diff --git a/src/components/RightNavigationComponentLink.astro b/src/components/RightNavigationComponentLink.astro
new file mode 100644
index 0000000..cda2cb7
--- /dev/null
+++ b/src/components/RightNavigationComponentLink.astro
@@ -0,0 +1,7 @@
+---
+const { href } = Astro.props;
+---
+<div class="text-pagodagreen group hover:text-pagodapurple-shine bg-black p-1 flex flex-row gap-2 justify-start transition-all ease-in-out hover:gap-4 duration-300 font-semibold first:rounded-tl-xl">
+    <span class="text-black group-hover:text-pagodapurple-shine">▎</span>
+    <a href={href}><slot /></a>
+</div>
diff --git a/src/components/RightSidebarComponent.astro b/src/components/RightSidebarComponent.astro
new file mode 100644
index 0000000..1a19686
--- /dev/null
+++ b/src/components/RightSidebarComponent.astro
@@ -0,0 +1,19 @@
+---
+import SearchComponent from './SearchComponent.astro';
+import RightNavigationComponent from './RightNavigationComponent.astro';
+import RightNavigationComponentLink from './RightNavigationComponentLink.astro';
+---
+
+<aside class="w-1/6">
+    <img src="/images/internal/search.webp" alt="Search Image" class="h-32 mt-4 relative ml-20 pointer-events-none select-none" />
+    <SearchComponent />
+    <RightNavigationComponent title="Pagoda Services">
+        <RightNavigationComponentLink href="/services/ad">Advertisement</RightNavigationComponentLink>
+        <RightNavigationComponentLink href="/services/blogs">Blogs</RightNavigationComponentLink>
+        <RightNavigationComponentLink href="/services/comments">Comments</RightNavigationComponentLink>
+        <RightNavigationComponentLink href="/services/counter">Counter</RightNavigationComponentLink>
+        <RightNavigationComponentLink href="/services/guestbook">Guestbook</RightNavigationComponentLink>
+        <RightNavigationComponentLink href="/services/journals">Journals</RightNavigationComponentLink>
+        <RightNavigationComponentLink href="/services/webring">Webring</RightNavigationComponentLink>
+    </RightNavigationComponent>
+</aside>
\ No newline at end of file
diff --git a/src/components/SearchComponent.astro b/src/components/SearchComponent.astro
new file mode 100644
index 0000000..9a269d8
--- /dev/null
+++ b/src/components/SearchComponent.astro
@@ -0,0 +1,31 @@
+<div class="saira uppercase mb-4 relative bottom-1">
+    <div class="text-xl flex flex-row gap-2 justify-center items-center">
+        <div class="flex-grow h-6 bg-pagodapurple rounded-tl-2xl"></div>
+        <div>Site Search</div>
+    </div>
+    <div class="bg-pagodapurple rounded-br-2xl relative bottom-1 pl-2 pr-1 pt-1 pb-1">
+        <form action="/search" method="GET" class="flex flex-col gap-1">
+            <div class="flex flex-row gap-2 items-center">
+                <label for="search" class="text-white w-1/4">Query:</label>
+                <input type="text" id="search" name="q" class="w-3/4 bg-black text-white border-2 border-pagodapurple rounded-lg px-2 py-1 focus:outline-none focus:border-pagodapink" placeholder="Search..." required />
+            </div>
+            <div class="flex flex-row gap-2 items-center">
+                <label for="category" class="text-white w-1/4">In:</label>
+                <select id="category" name="category" class="w-3/4 bg-black text-white border-2 border-pagodapurple rounded-lg px-2 py-1 focus:outline-none focus:border-pagodapink">
+                    <option value="all">All</option>
+                    <option value="avatars">Avatars</option>
+                    <option value="backgrounds">Tiled Backgrounds</option>
+                    <option value="blinkies">Blinkies</option>
+                    <option value="districts">Districts</option>
+                    <option value="flags">Flags</option>
+                    <option value="guides">Guides</option>
+                    <option value="stamps">Stamps</option>
+                    <option value="thoughts">Thoughts</option>
+                </select>
+            </div>
+            <div class="flex flex-row items-center">
+                <button type="submit" class="bg-pagodapink text-white rounded-lg px-4 py-1 hover:bg-pagodagreen font-bold hover:text-black transition duration-300 cursor-pointer">Search</button>
+            </div>
+        </form>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 890934e..bbb2cec 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,4 +1,6 @@
 ---
+import LeftSidebar from "../components/LeftSidebarComponent.astro";
+import RightSidebar from "../components/RightSidebarComponent.astro";
 import "../styles/global.css";
 
 const { title } = Astro.props;
@@ -9,16 +11,23 @@ const { title } = Astro.props;
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/png" href="/images/internal/favicon.png" />
     <meta name="generator" content={Astro.generator} />
+    <link rel="icon" type="image/png" href="/images/internal/favicon.png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="true">
+    <link href="https://fonts.googleapis.com/css2?family=Saira+Extra+Condensed:wght@100;200;300;400;500;600;700;800;900&amp;family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&amp;display=swap" rel="stylesheet">
     <title>Pagoda — {title || "default"}</title>
   </head>
   <body>
-    <nav class="navigation py-4 min-w-[960px]">
+    <nav class="navigation py-4 min-w-[1080px]">
       <img src="/images/internal/pagoda.webp" alt="Pagoda" class="w-64 m-auto select-none pointer-events-none" />
     </nav>
-    <main class="w-[960px] m-auto p-4 border-x-1 border-b-1 border-gray-800 rounded-b-md">
-      <slot />
+    <main class="w-[1080px] m-auto flex flex-row gap-4">
+      <LeftSidebar />
+      <div class="w-2/3">
+        <slot />
+      </div>
+      <RightSidebar />
     </main>
   </body>
 </html>
diff --git a/src/scripts/sidebarImage.ts b/src/scripts/sidebarImage.ts
new file mode 100644
index 0000000..456059e
--- /dev/null
+++ b/src/scripts/sidebarImage.ts
@@ -0,0 +1,30 @@
+document.addEventListener("DOMContentLoaded", (): void => {
+  const currentMinute: number = Math.floor(Date.now() / 60000);
+  const sidebarImagePathPrefix: string = "/images/internal/sidebar";
+
+  type ImageRule = {
+    divisor: number;
+    filename: string;
+  };
+
+  const imageRules: ImageRule[] = [
+    { divisor: 7, filename: "7.gif" },
+    { divisor: 5, filename: "5.gif" },
+    { divisor: 3, filename: "3.gif" },
+    { divisor: 2, filename: "2.gif" },
+  ];
+
+  const matchedRule: ImageRule | undefined = imageRules.find(
+    (rule: ImageRule): boolean => currentMinute % rule.divisor === 0
+  );
+
+  const imageName: string = matchedRule ? matchedRule.filename : "default.gif";
+  const sidebarImage: string = `${sidebarImagePathPrefix}/${imageName}`;
+
+  const imageElement: HTMLImageElement | null = document.getElementById(
+    "sidebar-image"
+  ) as HTMLImageElement;
+  if (imageElement) {
+    imageElement.src = sidebarImage;
+  }
+});
diff --git a/src/styles/global.css b/src/styles/global.css
index 1e7c57b..0fd7e6f 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,10 +1,32 @@
 @import "tailwindcss";
 
+@theme {
+    --color-pagodapurple: #8853e7;
+    --color-pagodapurple-shine: #d4c5ff;
+    --color-pagodagreen: #91d027;
+    --color-pagodagreen-shine: #cff294;
+    --color-pagodapink: #e42b8f;
+    --color-pagodapink-shine: #ffc8f0;
+    --color-arcadia: #5882ce;
+    --color-arles: #9a7570;
+    --color-hollywood: #a9562d;
+    --color-oxford: #312630;
+    --color-petsburg: #417958;
+    --color-purgatory: #5c518e;
+    --color-silicon-valley: #427571;
+    --color-silver-lake: #39516c;
+    --color-stratford-upon-avon: #ab5742;
+    --color-tokyo: #a25373;
+}
+
+
 :root {
     /* page prefers dark mode */
     color-scheme: dark;
+    font-family: IBM Plex Sans, sans-serif;
 }
 
+
 body {
     background-image: url('/images/internal/background.webp');
     background-repeat: repeat;
@@ -13,4 +35,8 @@ body {
 .navigation {
     background-image: url('/images/internal/banner_backdrop.webp');
     background-repeat: repeat-x;
+}
+
+.saira {
+    font-family: Saira Extra Condensed, sans-serif;
 }
\ No newline at end of file