Get things mostly production ready

package.json

@@ -10,14 +10,18 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/check": "^0.9.3",
-    "@astrojs/node": "^8.3.3",
-    "@astrojs/tailwind": "^5.1.0",
-    "astro": "^4.15.6",
-    "tailwindcss": "^3.4.11",
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/node": "^8.3.4",
+    "@astrojs/tailwind": "^5.1.1",
+    "@tailwindcss/typography": "^0.5.15",
+    "astro": "^4.15.11",
+    "dompurify": "^3.1.7",
+    "jsdom": "^25.0.1",
+    "tailwindcss": "^3.4.13",
     "typescript": "^5.6.2"
   },
   "devDependencies": {
+    "@types/dompurify": "^3.0.5",
     "prettier": "^3.3.3",
     "prettier-plugin-astro": "^0.14.1"
   }

src/components/Box.astro

@@ -1,53 +1,66 @@
 ---
 // Props for the Box component
 interface Props {
+  itemCenter?: boolean;
   title?: string;
+  titleColor?: string;
   date?: string;
+  dateColor?: string;
   text?: string;
-  button?:{
+  textColor?: string;
+  button?: {
     text: string;
     link: string;
     color?: string;
     border?: boolean;
-  }
+  };
   backgroundColor?: string;
 }
-const { title, date, text, button, backgroundColor = 'bg-white' } = Astro.props;
-
-const borderProps = button?.border ? 'border-white border' : '';
+const {
+  itemCenter = false,
+  title,
+  titleColor = "text-white",
+  date,
+  dateColor = "text-white",
+  text,
+  textColor = "text-white",
+  button,
+  backgroundColor = "bg-white",
+} = Astro.props;
+const itemCenterProps = itemCenter ? "items-center" : "items-start";
+const borderProps = button?.border ? "border-white border" : "";
 ---
 
-<!-- <div class={`${backgroundColor} p-4 rounded-xl flex flex-col space-y-2 sm:max-w-xs`}>
-  {title && <h2 class="text-xl font-bold text-white">{title}</h2>}
-  {date && <p class="text-white">{date}</p>}
-  {text && <p class="text-white">{text}</p>}
-  <a href={button?.link} class={`${button?.color} ${borderProps} inline-block text-white px-4 py-2 rounded-full content-center`}>
-    {button?.text}
-  </a>
-</div> -->
-
-<div class={`${backgroundColor} p-4 rounded-xl flex flex-col space-y-2 sm:max-w-xs`}>
-  {title && (
-    <div class="flex flex-col items-start space-y-2">
-      <h2 class="text-xl font-bold text-white">{title}</h2>
-      {date && <p class="text-white">{date}</p>}
-      {text && <p class="text-white">{text}</p>}
-      {button && (
-        <a href={button.link} class={`${button?.color} ${borderProps} inline-block text-white px-4 py-2 rounded-full content-center`}>
-          {button.text}
-        </a>
-      )}
-    </div>
-  )}
+<div class={`${backgroundColor} p-4 rounded-xl flex flex-col space-y-2 `}>
+  {
+    title && (
+      <div class={`flex flex-col ${itemCenterProps} space-y-2`}>
+        <h2 class={`text-2xl font-bold ${titleColor}`}>{title}</h2>
+        {date && <p class={`${dateColor}`}>{date}</p>}
+        {text && <p class={`${textColor}`}>{text}</p>}
+        {button && (
+          <a
+            href={button.link}
+            class={`${button?.color} ${borderProps} inline-block text-white px-4 py-2 rounded-full content-center`}>
+            {button.text}
+          </a>
+        )}
+      </div>
+    )
+  }
 
-  {text && !title && (
-    <div class="flex items-center justify-between w-full">
-      <p class="text-white">{text}</p>
-      {button && (
-        <a href={button.link} class={`${button?.color} ${borderProps} inline-block text-white px-4 py-2 rounded-full content-center`}>
-          {button.text}
-        </a>
-      )}
-    </div>
-  )}
-</div>
+  {
+    text && !title && (
+      <div class="flex items-center justify-between w-full">
+        <p class={`${textColor}`}>{text}</p>
+        {button && (
+          <a
+            href={button.link}
+            class={`${button?.color} ${borderProps} inline-block text-white px-4 py-2 rounded-full content-center`}>
+            {button.text}
+          </a>
+        )}
+      </div>
+    )
+  }
+</div>

src/components/Footer.astro

@@ -1,74 +1,61 @@
+---
+import BrandSnapchat from "./icons/BrandSnapchat.astro";
+import BrandDiscord from "./icons/BrandDiscord.astro";
+import BrandFacebook from "./icons/BrandFacebook.astro";
+import BrandTwitter from "./icons/BrandTwitter.astro";
+import BrandInstagram from "./icons/BrandInstagram.astro";
+import BrandTwitch from "./icons/BrandTwitch.astro";
+import BrandYoutube from "./icons/BrandYoutube.astro";
+---
 
 <footer
-    class="flex flex-col gap-5 items-center mx-auto sm:flex-col sm:items-start max-w-7xl px-5 py-5 w-full"
->
-<div class="sm:flex sm:flex-row sm:gap-10">
+  class="flex flex-col gap-5 items-center mx-auto sm:flex-col sm:items-start max-w-7xl px-5 py-5 w-full">
+  <div class="sm:flex gap-10">
     <div>
-
-    <a href="/" class="flex gap-x-4 items-center">
+      <a href="/" class="flex items-center">
         <img
-        src="/images/tglogo-color.png"
-        alt="The Gathering logo"
-        width={150}
-        class="aspect-thumbnail object-cover sm:w-72"
+          src="/images/tglogo-color.png"
+          alt="The Gathering logo"
+          width={150}
+          class="aspect-thumbnail object-cover min-w-full"
         />
-    </a>
-    <div class="flex flex-row gap-4 justify-center pt-2">
-        <a href="/" class="flex gap-x-4 items-center">
-            <img
-            src="/images/icons/twitter.png"
-            alt="The Gathering logo"
-            width={24}
-            class="aspect-thumbnail object-cover"
-            />
+      </a>
+      <div class="flex flex-row gap-2 justify-center p-2">
+        <a href="https://www.facebook.com/gatheringorg">
+          <BrandFacebook />
+        </a>
+        <a href="https://twitter.com/gatheringorg">
+          <BrandTwitter />
+        </a>
+        <a href="https://discord.gg/gathering">
+          <BrandDiscord />
+        </a>
+        <a href="https://www.instagram.com/gatheringorg">
+          <BrandInstagram />
         </a>
-        <a href="/" class="flex gap-x-4 items-center">
-            <img
-            src="/images/icons/instagram.png"
-            alt="The Gathering logo"
-            width={24}
-            class="aspect-thumbnail object-cover"
-            />
+        <a href="https://www.snapchat.com/add/gatheringorg">
+          <BrandSnapchat />
         </a>
-        <a href="/" class="flex gap-x-4 items-center">
-            <img
-            src="/images/icons/facebook.png"
-            alt="The Gathering logo"
-            width={24}
-            class="aspect-thumbnail object-cover"
-            />
+        <a href="https://www.twitch.tv/team/thegathering">
+          <BrandTwitch />
         </a>
-        <a href="/" class="flex gap-x-4 items-center">
-            <img
-            src="/images/icons/discord.png"
-            alt="The Gathering logo"
-            width={24}
-            class="aspect-thumbnail object-cover"
-            />
+        <a href="https://www.youtube.com/@gatheringorg">
+          <BrandYoutube />
         </a>
+      </div>
     </div>
-</div>
-<div class="sm:flex sm:gap-10">
-    <ul class="text-white flex flex-col gap-2 items-center sm:items-start">
-        <li><a href="#" class="">Tickets</a></li>
-        <li><a href="#" class="">Schedule</a></li>
-        <li><a href="#" class="">Competitions</a></li>
-        <li><a href="/news" class="">News</a></li>
-        <li><a href="/faq" class="">FAQ</a></li>
-        <li><a href="/about" class="">About the Gathering</a></li>
-    </ul>
-    <ul class="text-white size flex flex-col gap-2 items-center sm:items-start">
+    <div class="sm:flex sm:gap-10">
+      <ul
+        class="text-white size flex flex-col gap-2 items-center sm:items-start">
         <li><a href="https://archive.gathering.org/" class="">Archives</a></li>
         <li><a href="https://tech.gathering.org/" class="">Tech Blog</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="flex justify-center w-full">
+    <ul
+      class="text-white text-sm flex flex-col sm:flex-row gap-2 items-center sm:items-start">
+      <li>The Gathering 2025 - <a href="https://www.kandu.no/">KANDU</a></li>
     </ul>
-</div>
-</div>
-<div class="flex justify-center w-full">
-    <ul class="text-white text-sm flex flex-col sm:flex-row gap-2 items-center sm:items-start">
-        <li><a href="#" class="">Statement of Availability</a></li>
-        <li><a href="#" class="">Admin - Info:Redaksjonen - info[at]tg[dot]no</a></li>
-        <li><a href="#" class="">Adjust cookie and data settings</a></li>
-        <li>The Gathering 2025 - <a href="https://www.kandu.no/">KANDU</a></li>
-    </ul>
-</div>
-</footer>
+  </div>
+</footer>

src/components/H1.astro

@@ -1,8 +1,9 @@
 ---
 type Props = {
-	text: string;
+  text: string;
+  color?: string;
 };
-const { text } = Astro.props;
+const { text, color = "text-white" } = Astro.props;
 ---
 
-<h1 class="text-6xl text-white font-bold mb-2">{text}</h1>
+<h1 class=`text-6xl ${color} font-bold mb-2`>{text}</h1>

src/components/H2.astro

@@ -1,8 +1,9 @@
 ---
 type Props = {
-	text: string;
+  text: string;
+  color?: string;
 };
-const { text } = Astro.props;
+const { text, color = "text-white" } = Astro.props;
 ---
 
-<h2 class="text-4xl text-white font-bold mb-2">{text}</h2>
+<h2 class=`text-4xl ${color} font-bold mb-2`>{text}</h2>

src/components/Header.astro

@@ -19,10 +19,4 @@
             class="aspect-thumbnail object-cover"
         />
     </a>
-		<ul class="flex gap-x-8 text-white font-bold">
-			<li><a href="/news" class="">News</a></li>
-			<li><a href="/about" class="">About</a></li>
-			<li><a href="/faq" class="">FAQ</a></li>
-		</ul>
-
 </header>

src/components/Hero.astro

@@ -1,5 +1,5 @@
 ---
-import Box from './Box.astro';
+import Box from "./Box.astro";
 
 // Props for the Hero component
 interface Props {
@@ -13,40 +13,25 @@ const { image } = Astro.props;
   <!-- Hero Image -->
   <img src={image} alt="Hero Image" class="w-full h-full object-cover" />
 
-  <!-- Overlay for Desktop -->
-  <div class="hidden absolute bottom-4 right-4 sm:flex sm:flex-col space-y-4 sm:bottom-8 sm:right-8">
+  <div
+    class="md:absolute md:bottom-4 md:right-4 flex flex-col space-y-4 p-4 md:p-0">
     <!-- Box 1: Title, Date, Button -->
     <Box
       title="Welcome to the Gathering - Reborn"
       date="27. - 31 March"
       button={{ text: "Tickets", link: "#", color: "bg-orange-500" }}
       backgroundColor="bg-blue-500"
     />
-
     <!-- Box 2: Text, Button -->
     <Box
       text="On Main Stage: Opening Ceremony"
-      button={{ text: "Scheduel", link: "#", color: "bg-orange-500", border: true }}
+      button={{
+        text: "Scheduel",
+        link: "#",
+        color: "bg-orange-500",
+        border: true,
+      }}
       backgroundColor="bg-orange-500"
     />
   </div>
-
-  <!-- Mobile Layout: Stack boxes vertically -->
-  <div class="sm:hidden flex flex-col space-y-4 p-4 m">
-    <!-- Box 1 -->
-    <Box
-      title="Welcome to the Gathering - Reborn"
-      date="27. - 31 March"
-      button={{ text: "Tickets", link: "#", color: "bg-orange-500" }}
-      backgroundColor="bg-blue-500"
-    />
-
-    <!-- Box 2 -->
-    <Box
-    text="On Main Stage: Opening Ceremony"
-    button={{ text: "Scheduel", link: "#", color: "bg-orange-500", border: true }}
-    backgroundColor="bg-orange-500"
-  />
-  </div>
 </section>
-