feat: add facebook feed

src/components/PageTitle/PageTitle.tsx

@@ -3,23 +3,6 @@ import { Helmet } from "react-helmet-async";
 const DEFAULT_TITLE = "UpLine";
 const TITLE_SEPARATOR = " - ";
 
-/**
- * Utility function to build title from parts
- */
-export function buildTitle(title?: string, prefix?: string): string {
-  const parts = [DEFAULT_TITLE];
-
-  if (title) {
-    parts.unshift(title);
-  }
-
-  if (prefix) {
-    parts.unshift(prefix);
-  }
-
-  return parts.join(TITLE_SEPARATOR);
-}
-
 /**
  * Component to set the page title and meta tags using Helmet
  */
@@ -31,7 +14,6 @@ interface PageTitleProps {
 
 export function PageTitle({ title, prefix, description }: PageTitleProps) {
   const fullTitle = buildTitle(title, prefix);
-
   return (
     <Helmet>
       <title>{fullTitle}</title>
@@ -43,3 +25,44 @@ export function PageTitle({ title, prefix, description }: PageTitleProps) {
     </Helmet>
   );
 }
+
+/**
+ * Get environment prefix based on current hostname
+ */
+function getEnvironmentPrefix(): string | undefined {
+  if (typeof window === "undefined") return undefined;
+
+  const hostname = window.location.hostname;
+
+  if (hostname === "localhost" || hostname === "127.0.0.1") {
+    return "DEV";
+  }
+
+  if (!hostname.includes("getupline.com")) {
+    return "STAG";
+  }
+
+  return undefined;
+}
+
+/**
+ * Utility function to build title from parts
+ */
+function buildTitle(title?: string, prefix?: string): string {
+  const parts = [DEFAULT_TITLE];
+
+  if (title) {
+    parts.unshift(title);
+  }
+
+  if (prefix) {
+    parts.unshift(prefix);
+  }
+
+  const envPrefix = getEnvironmentPrefix();
+  if (envPrefix) {
+    parts.unshift(envPrefix);
+  }
+
+  return parts.join(TITLE_SEPARATOR);
+}

src/lib/__tests__/slug.test.ts

@@ -0,0 +1,117 @@
+import { describe, expect, it } from "vitest";
+import { generateSlug, isValidSlug, sanitizeSlug } from "../slug";
+
+describe("generateSlug", () => {
+  it("converts basic text to lowercase slug", () => {
+    expect(generateSlug("Hello World")).toBe("hello-world");
+    expect(generateSlug("Test String")).toBe("test-string");
+  });
+
+  it("handles special characters", () => {
+    expect(generateSlug("Hello & World!")).toBe("hello-world");
+    expect(generateSlug("Test@#$%String")).toBe("test-string");
+    expect(generateSlug("Special (chars) [here]")).toBe("special-chars-here");
+  });
+
+  it("handles multiple spaces and whitespace", () => {
+    expect(generateSlug("  Multiple   Spaces  ")).toBe("multiple-spaces");
+    expect(generateSlug("\t\nTabs and\r\nNewlines\t")).toBe(
+      "tabs-and-newlines",
+    );
+  });
+
+  it("collapses multiple hyphens", () => {
+    expect(generateSlug("Test---Multiple--Hyphens")).toBe(
+      "test-multiple-hyphens",
+    );
+    expect(generateSlug("A----B----C")).toBe("a-b-c");
+  });
+
+  it("removes leading and trailing hyphens", () => {
+    expect(generateSlug("-Leading Hyphen")).toBe("leading-hyphen");
+    expect(generateSlug("Trailing Hyphen-")).toBe("trailing-hyphen");
+    expect(generateSlug("--Both Sides--")).toBe("both-sides");
+  });
+
+  it("handles numbers correctly", () => {
+    expect(generateSlug("Test 123 Numbers")).toBe("test-123-numbers");
+    expect(generateSlug("2024 Festival Edition")).toBe("2024-festival-edition");
+  });
+
+  it("handles edge cases", () => {
+    expect(generateSlug("")).toBe("");
+    expect(generateSlug("   ")).toBe("");
+    expect(generateSlug("---")).toBe("");
+    expect(generateSlug("@#$%")).toBe("");
+  });
+
+  it("handles unicode characters", () => {
+    expect(generateSlug("Café Münchën")).toBe("caf-m-nch-n");
+    expect(generateSlug("测试 Test")).toBe("test");
+  });
+
+  it("preserves existing hyphens appropriately", () => {
+    expect(generateSlug("Pre-existing-hyphens")).toBe("pre-existing-hyphens");
+    expect(generateSlug("Mix of-hyphens and spaces")).toBe(
+      "mix-of-hyphens-and-spaces",
+    );
+  });
+});
+
+describe("isValidSlug", () => {
+  it("validates correct slugs", () => {
+    expect(isValidSlug("hello-world")).toBe(true);
+    expect(isValidSlug("test-123")).toBe(true);
+    expect(isValidSlug("simple")).toBe(true);
+    expect(isValidSlug("2024-festival")).toBe(true);
+    expect(isValidSlug("a-b-c-d")).toBe(true);
+  });
+
+  it("rejects invalid slugs", () => {
+    expect(isValidSlug("")).toBe(false);
+    expect(isValidSlug("-leading-hyphen")).toBe(false);
+    expect(isValidSlug("trailing-hyphen-")).toBe(false);
+    expect(isValidSlug("UPPERCASE")).toBe(false);
+    expect(isValidSlug("with spaces")).toBe(false);
+    expect(isValidSlug("special!chars")).toBe(false);
+    expect(isValidSlug("multiple--hyphens")).toBe(false);
+  });
+
+  it("handles edge cases", () => {
+    expect(isValidSlug("a")).toBe(true);
+    expect(isValidSlug("1")).toBe(true);
+    expect(isValidSlug("-")).toBe(false);
+    expect(isValidSlug("--")).toBe(false);
+  });
+});
+
+describe("sanitizeSlug", () => {
+  it("is an alias for generateSlug", () => {
+    const testCases = [
+      "Hello World",
+      "Special!@#Characters",
+      "  Multiple   Spaces  ",
+      "2024-Festival-Edition",
+    ];
+
+    testCases.forEach((testCase) => {
+      expect(sanitizeSlug(testCase)).toBe(generateSlug(testCase));
+    });
+  });
+
+  it("produces valid slugs", () => {
+    const inputs = [
+      "Random Input!",
+      "123 Test Case",
+      "Special @#$ Characters",
+      "   Whitespace   ",
+    ];
+
+    inputs.forEach((input) => {
+      const result = sanitizeSlug(input);
+      if (result !== "") {
+        expect(isValidSlug(result)).toBe(true);
+      }
+    });
+  });
+});

src/pages/EditionView/EditionView.tsx

@@ -1,5 +1,5 @@
 import { AppHeader } from "@/components/layout/AppHeader";
-import { MainTabNavigation } from "./MainTabNavigation";
+import { MainTabNavigation } from "./TabNavigation/TabNavigation";
 import ErrorBoundary from "@/components/ErrorBoundary";
 import { useFestivalEdition } from "@/contexts/FestivalEditionContext";
 import { Outlet } from "react-router-dom";

src/pages/EditionView/TabNavigation/DesktopTabButton.tsx

@@ -0,0 +1,26 @@
+import { cn } from "@/lib/utils";
+import { NavLink } from "react-router-dom";
+import { TabButtonProps } from "./types";
+
+export function DesktopTabButton({ config, basePath }: TabButtonProps) {
+  return (
+    <NavLink
+      key={config.key}
+      to={`${basePath}/${config.key}`}
+      className={({ isActive }) =>
+        cn(
+          `
+          flex items-center justify-center gap-2
+          px-6 py-3 rounded-lg
+          transition-all duration-200 active:scale-95`,
+          isActive
+            ? "bg-purple-600 text-white shadow-lg"
+            : "text-purple-200 hover:text-white hover:bg-white/10",
+        )
+      }
+    >
+      <config.icon className="h-5 w-5" />
+      <span className="font-medium">{config.label}</span>
+    </NavLink>
+  );
+}

src/pages/EditionView/TabNavigation/MobileTabButton.tsx

@@ -0,0 +1,29 @@
+import { NavLink } from "react-router-dom";
+import { TabButtonProps } from "./types";
+
+export function MobileTabButton({ config, basePath }: TabButtonProps) {
+  return (
+    <NavLink
+      key={config.key}
+      to={`${basePath}/${config.key}`}
+      className={({ isActive }) => `
+        flex-1 flex flex-col items-center justify-center
+        py-2 px-1 transition-colors duration-200 min-h-16
+        ${isActive ? "text-purple-400" : "text-gray-400 active:text-purple-300"}
+      `}
+    >
+      {({ isActive }) => (
+        <>
+          <config.icon
+            className={`h-6 w-6 mb-1 ${isActive ? "text-purple-400" : "text-gray-400"}`}
+          />
+          <span
+            className={`text-xs font-medium text-center leading-tight ${isActive ? "text-purple-400" : "text-gray-400"}`}
+          >
+            {config.shortLabel}
+          </span>
+        </>
+      )}
+    </NavLink>
+  );
+}