{/* Category Badge */}
{category}
@@ -64,7 +73,7 @@ const BlogCard = ({ type, date, title, content, imageUrl, id, authors }) => {
{/* Stacked Author Avatars */}
- {authorProfiles.length > 0 && (
+ {authorProfiles.length > 0 &&
(() => {
const max = 3;
const visible = authorProfiles.slice(0, max);
@@ -85,7 +94,8 @@ const BlogCard = ({ type, date, title, content, imageUrl, id, authors }) => {
onError={(e) => {
const target = e.currentTarget;
target.style.display = "none";
- const fallback = target.nextElementSibling;
+ const fallback =
+ target.nextElementSibling as HTMLElement | null;
if (fallback) fallback.style.display = "flex";
}}
/>
@@ -101,8 +111,7 @@ const BlogCard = ({ type, date, title, content, imageUrl, id, authors }) => {
)}
);
- })()
- )}
+ })()}
{/* Author Names */}
diff --git a/src/components/discussions/DiscussionCard.tsx b/src/components/discussions/DiscussionCard.tsx
index 58983939..be1c3692 100644
--- a/src/components/discussions/DiscussionCard.tsx
+++ b/src/components/discussions/DiscussionCard.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { motion } from "framer-motion";
-import { MessageCircle, ThumbsUp, Calendar, Tag, User } from "lucide-react";
+import { MessageCircle, ThumbsUp, Calendar, Tag } from "lucide-react";
export interface Discussion {
id: string;
@@ -129,7 +129,8 @@ export default function DiscussionCard({
onError={(e) => {
const target = e.currentTarget;
target.style.display = "none";
- const fallback = target.nextElementSibling;
+ const fallback =
+ target.nextElementSibling as HTMLElement | null;
if (fallback) fallback.style.display = "flex";
}}
/>
diff --git a/src/components/ui/FirebaseAuthGithub.tsx b/src/components/ui/FirebaseAuthGithub.tsx
deleted file mode 100644
index 436c2c0d..00000000
--- a/src/components/ui/FirebaseAuthGithub.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { auth } from "../../lib/firebase";
-import { GithubAuthProvider, signInWithPopup, User } from "firebase/auth";
-
-const uiConfig = {
- signInFlow: "popup",
- signInOptions: [
- {
- provider: GithubAuthProvider.PROVIDER_ID,
- // You can add scopes and custom parameters here if needed
- },
- ],
- callbacks: {
- signInSuccessWithAuthResult: () => false, // Prevents redirect
- },
-};
-
-const FirebaseAuthGithub: React.FC = () => {
- const [user, setUser] = useState(null);
- const [githubText, setGithubText] = useState("Sign in with GitHub"); // ✅ new state
-
- useEffect(() => {
- const unregisterAuthObserver = auth.onAuthStateChanged((user) =>
- setUser(user as User),
- );
-
- // ✅ new effect to change text on resize
- const handleResize = () => {
- if (window.innerWidth <= 1110) {
- setGithubText("Sign in");
- } else {
- setGithubText("Sign in with GitHub");
- }
- };
-
- handleResize(); // initial call
- window.addEventListener("resize", handleResize);
-
- return () => {
- unregisterAuthObserver();
- window.removeEventListener("resize", handleResize);
- };
- }, []);
-
- if (user) {
- return (
- (null);
+
+ useEffect(() => {
+ setContainer(document.getElementById("clerk-auth-navbar"));
+ }, []);
+
+ if (!customFields?.clerkPublishableKey || !container) {
+ return null;
+ }
+
+ return createPortal((null);
-
- useEffect(() => {
- setContainer(document.getElementById("firebase-auth-github-navbar"));
- }, []);
-
- return container ? createPortal() => {
setSearchTerm(e.target.value);
};
@@ -146,7 +145,11 @@ export default function Blogs() {
onClick={() => setSearchTerm("")}
aria-label="Clear search"
>
-
@@ -228,8 +230,8 @@ export default function Blogs() {
- 
-
- -
- );
- }
-
- const handleGithubSignIn = async () => {
- const provider = new GithubAuthProvider();
- try {
- await signInWithPopup(auth, provider);
- } catch (error) {
- console.error("GitHub sign-in error:", error);
- }
- };
-
- return (
- - -
-
-
- );
-};
-
-export default FirebaseAuthGithub;
diff --git a/src/components/ui/NavbarClerkAuth.tsx b/src/components/ui/NavbarClerkAuth.tsx
new file mode 100644
index 00000000..f2878b29
--- /dev/null
+++ b/src/components/ui/NavbarClerkAuth.tsx
@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from "react";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import { Show, SignInButton, UserButton } from "@clerk/react";
+import { createPortal } from "react-dom";
+
+const NavbarClerkAuthContent: React.FC = () => {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const NavbarClerkAuth: React.FC = () => {
+ const {
+ siteConfig: { customFields },
+ } = useDocusaurusContext();
+ const [container, setContainer] = useState
{filteredBlogs.length > 0 ? (
- filteredBlogs.map((blog, index) => (
-
@@ -257,7 +259,7 @@ export default function Blogs() {
);
}
-const BlogCard = ({ blog, index }) => {
+const BlogCard = ({ blog }: { blog: (typeof blogs)[number] }) => {
const authors = getAuthorProfiles(blog.authors || []);
return (
@@ -276,7 +278,7 @@ const BlogCard = ({ blog, index }) => {
5 min read
diff --git a/src/pages/dashboard/dashboard.css b/src/pages/dashboard/dashboard.css
index a2102a49..ca67777f 100644
--- a/src/pages/dashboard/dashboard.css
+++ b/src/pages/dashboard/dashboard.css
@@ -7,8 +7,16 @@
display: flex;
min-height: 100vh;
background:
- radial-gradient(circle at 10% 0%, var(--dashboard-accent-softer), transparent 42%),
- radial-gradient(circle at 90% 100%, rgba(102, 126, 234, 0.08), transparent 40%),
+ radial-gradient(
+ circle at 10% 0%,
+ var(--dashboard-accent-softer),
+ transparent 42%
+ ),
+ radial-gradient(
+ circle at 90% 100%,
+ rgba(102, 126, 234, 0.08),
+ transparent 40%
+ ),
var(--ifm-background-color);
position: relative;
}
@@ -148,11 +156,7 @@
/* Sidebar Styles */
.dashboard-sidebar {
width: 280px;
- background: color-mix(
- in srgb,
- var(--ifm-background-color) 97%,
- #8b5cf6 3%
- );
+ background: color-mix(in srgb, var(--ifm-background-color) 97%, #8b5cf6 3%);
border-right: 1px solid var(--ifm-color-emphasis-200);
padding: 20px;
flex-shrink: 0;
@@ -249,7 +253,11 @@
.dashboard-home-container {
max-width: 1200px;
margin: 0 auto;
- background: color-mix(in srgb, var(--ifm-background-surface-color) 88%, transparent);
+ background: color-mix(
+ in srgb,
+ var(--ifm-background-surface-color) 88%,
+ transparent
+ );
border: 1px solid var(--ifm-color-emphasis-200);
border-radius: 24px;
padding: 2.25rem;
@@ -583,6 +591,35 @@
margin: 0 auto;
}
+.leaderboard-auth-state {
+ display: flex;
+ min-height: 320px;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 12px;
+ text-align: center;
+}
+
+.leaderboard-auth-state h1,
+.leaderboard-auth-state p {
+ margin: 0;
+}
+
+.leaderboard-auth-button {
+ border: 0;
+ border-radius: 8px;
+ background: var(--dashboard-accent);
+ color: #ffffff;
+ cursor: pointer;
+ font-weight: 600;
+ padding: 10px 18px;
+}
+
+.leaderboard-auth-button:hover {
+ background: var(--dashboard-accent-dark);
+}
+
/* Giveaway Section */
.giveaway-section {
text-align: center;
@@ -729,7 +766,11 @@
}
[data-theme="dark"] .dashboard-home-container {
- background: color-mix(in srgb, var(--ifm-background-surface-color) 92%, transparent);
+ background: color-mix(
+ in srgb,
+ var(--ifm-background-surface-color) 92%,
+ transparent
+ );
border-color: var(--ifm-color-emphasis-300);
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
}
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index fdb55cc9..a9269e92 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -1,7 +1,8 @@
-import React, { JSX, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
import Layout from "@theme/Layout";
import Head from "@docusaurus/Head";
import BrowserOnly from "@docusaurus/BrowserOnly";
+import { SignInButton, useAuth } from "@clerk/react";
import { motion } from "framer-motion";
import {
useCommunityStatsContext,
@@ -54,12 +55,35 @@ const categories: Category[] = [
"general",
];
+const LeaderboardAuthGate: React.FC = () => {
+ const { isLoaded, isSignedIn } = useAuth();
+
+ if (!isLoaded) {
+ return
-
- new Error(
+ onError={(error) => {
+ const boundaryError = new Error(
`A theme navbar item failed to render.
Please double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:
${JSON.stringify(item, null, 2)}`,
- { cause: error },
- )
- }
+ );
+ (boundaryError as Error & { cause?: unknown }).cause = error;
+ return boundaryError;
+ }}
>
diff --git a/src/theme/Root.tsx b/src/theme/Root.tsx
index cfba8cab..803ca317 100644
--- a/src/theme/Root.tsx
+++ b/src/theme/Root.tsx
@@ -1,9 +1,11 @@
import React, { useEffect, useState, useRef } from "react";
import Link from "@docusaurus/Link";
import { Analytics } from "@vercel/analytics/react";
+import { ClerkProvider } from "@clerk/react";
import clsx from "clsx"; // Import clsx for conditional classes
import styles from "./Root.module.css"; // Import the CSS module
import { useLocation } from "@docusaurus/router";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
// A simple Trophy SVG icon component
function TrophyIcon() {
@@ -31,11 +33,86 @@ function TrophyIcon() {
}
export default function Root({ children }: { children: React.ReactNode }) {
+ const {
+ siteConfig: { customFields },
+ } = useDocusaurusContext();
const [showToast, setShowToast] = useState(false);
const [isDark, setIsDark] = useState(false);
const timerRef = useRef(null);
const location = useLocation();
const [isInitialLoad, setIsInitialLoad] = useState(true);
+ const clerkPublishableKey = customFields?.clerkPublishableKey as
+ | string
+ | undefined;
+ const clerkAppearance = {
+ variables: {
+ colorPrimary: "var(--ifm-color-primary)",
+ colorBackground: "var(--ifm-background-surface-color)",
+ colorForeground: "var(--ifm-color-content)",
+ colorMutedForeground: "var(--ifm-color-content-secondary)",
+ colorInputBackground: "var(--ifm-background-color)",
+ colorInputForeground: "var(--ifm-color-content)",
+ colorRing: "rgba(56, 161, 105, 0.24)",
+ colorModalBackdrop: "rgba(15, 23, 42, 0.62)",
+ borderRadius: "0.75rem",
+ fontFamily: "var(--ifm-font-family-base)",
+ },
+ layout: {
+ logoImageUrl: "/img/logo.png",
+ socialButtonsPlacement: "top" as const,
+ socialButtonsVariant: "blockButton" as const,
+ },
+ elements: {
+ cardBox: {
+ border: "1px solid var(--ifm-color-emphasis-200)",
+ boxShadow: "0 24px 80px rgba(15, 23, 42, 0.24)",
+ },
+ card: {
+ backgroundColor: "var(--ifm-background-surface-color)",
+ },
+ logoBox: {
+ marginBottom: "0.75rem",
+ },
+ logoImage: {
+ height: "2rem",
+ },
+ headerTitle: {
+ color: "var(--ifm-color-content)",
+ fontWeight: 700,
+ letterSpacing: "0",
+ },
+ headerSubtitle: {
+ color: "var(--ifm-color-content-secondary)",
+ },
+ socialButtonsBlockButton: {
+ border: "1px solid var(--ifm-color-emphasis-300)",
+ backgroundColor: "var(--ifm-background-color)",
+ color: "var(--ifm-color-content)",
+ boxShadow: "none",
+ "&:hover, &:focus, &:active": {
+ backgroundColor: "var(--ifm-color-emphasis-100)",
+ borderColor: "var(--ifm-color-primary)",
+ },
+ },
+ socialButtonsBlockButtonText: {
+ fontWeight: 600,
+ },
+ footer: {
+ borderTop: "1px solid var(--ifm-color-emphasis-200)",
+ backgroundColor: "var(--ifm-background-surface-color)",
+ },
+ footerActionText: {
+ color: "var(--ifm-color-content-secondary)",
+ },
+ footerActionLink: {
+ color: "var(--ifm-color-primary)",
+ fontWeight: 600,
+ },
+ modalBackdrop: {
+ backdropFilter: "blur(4px)",
+ },
+ },
+ };
// Check if current page is sponsors page
const isSponsorsPage =
@@ -110,7 +187,7 @@ export default function Root({ children }: { children: React.ReactNode }) {
}
};
- return (
+ const content = (
<>
{children}
@@ -155,4 +232,18 @@ export default function Root({ children }: { children: React.ReactNode }) {
{process.env.NODE_ENV === "production" &&
+ {content}
+
+ );
}
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index 58e7830a..54cf9492 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
// Global type declarations for better TypeScript compatibility
// CSS modules and side-effect imports
@@ -34,7 +35,7 @@ declare module "@docusaurus/theme-common" {
export function useThemeConfig(): any;
export function usePluralForm(): any;
- export function isMultiColumnFooterLinks(): any;
+ export function isMultiColumnFooterLinks(links: any): any;
export const ThemeClassNames: any;
export const ErrorCauseBoundary: any;
}
@@ -90,7 +91,10 @@ declare module "@site/src/lib/utils" {
}
declare module "@site/src/utils/jsUtils" {
- export function sortBy(array: any[], key: string): any[];
+ export function sortBy(
+ array: T[],
+ getter: (item: T) => string | number | boolean,
+ ): T[];
}
declare module "@site/src/services/github" {
@@ -100,6 +104,24 @@ declare module "@site/src/services/github" {
}
}
+declare module "@site/src/services/githubService" {
+ export const githubService: {
+ setToken(token: string): void;
+ fetchDiscussions(limit?: number, signal?: AbortSignal): Promise;
+ };
+ export interface GitHubDiscussion {
+ [key: string]: any;
+ }
+}
+
+declare module "@site/src/utils/useSafeColorMode" {
+ export function useSafeColorMode(): {
+ colorMode: "light" | "dark";
+ isDark: boolean;
+ mounted: boolean;
+ };
+}
+
declare module "@site/src/components/ui/button" {
export const Button: any;
}
@@ -108,25 +130,17 @@ declare module "@site/src/database/sponsors" {
export interface Sponsor {
[key: string]: any;
}
+ const sponsors: Sponsor[];
+ export default sponsors;
}
declare module "@site/src/data/users" {
- export interface Tag {
- [key: string]: any;
- }
- export interface TagList {
- [key: string]: any;
- }
- export interface Tags {
- [key: string]: any;
- }
- export interface TagType {
- [key: string]: any;
- }
- export interface User {
- [key: string]: any;
- }
- export const sortedUsers: any;
+ export type Tag = import("../data/users").Tag;
+ export type TagType = import("../data/users").TagType;
+ export type User = import("../data/users").User;
+ export const Tags: { [type in TagType]: Tag };
+ export const TagList: TagType[];
+ export const sortedUsers: User[];
}
// Catch-all for any missing modules
{/* Stacked Author Avatars */}
- {authors.length > 0 && (
+ {authors.length > 0 &&
(() => {
const max = 3;
const visible = authors.slice(0, max);
@@ -297,7 +299,8 @@ const BlogCard = ({ blog, index }) => {
onError={(e) => {
const target = e.currentTarget;
target.style.display = "none";
- const fallback = target.nextElementSibling;
+ const fallback =
+ target.nextElementSibling as HTMLElement | null;
if (fallback) fallback.style.display = "flex";
}}
/>
@@ -313,28 +316,27 @@ const BlogCard = ({ blog, index }) => {
)}
);
- })()
- )}
+ })()}
{/* Author Names */}
- {authors.map((author, authorIndex) => (
-
- {authorIndex > 0 && (
- &
- )}
-
- {author.name}
-
-
- ))}
+ {authors.map((author, authorIndex) => (
+
+ {authorIndex > 0 && (
+ &
+ )}
+
+ {author.name}
+
+
+ ))}
Loading leaderboard...
;
+ }
+
+ if (!isSignedIn) {
+ return (
+
+
+
+
+
+ );
+ }
+
+ return Leaderboard
+Sign in to view the leaderboard.
+
+
+ )}
)}
diff --git a/src/pages/merch/index.tsx b/src/pages/merch/index.tsx
index 49d94a37..354c6d38 100644
--- a/src/pages/merch/index.tsx
+++ b/src/pages/merch/index.tsx
@@ -1,7 +1,7 @@
import React, { useState, useEffect } from "react";
import type { ReactNode } from "react";
import Layout from "@theme/Layout";
-import { motion } from "framer-motion";
+import { motion, type Variants } from "framer-motion";
import ProductGrid from "../../components/merch/ProductGrid";
import FilterBar from "../../components/merch/FilterBar";
import ShoppingCart from "../../components/merch/ShoppingCart";
@@ -83,7 +83,7 @@ const sampleProducts: Product[] = [
},
];
-const containerVariants = {
+const containerVariants: Variants = {
hidden: { opacity: 0 },
show: {
opacity: 1,
@@ -91,7 +91,7 @@ const containerVariants = {
}
};
-const itemVariants = {
+const itemVariants: Variants = {
hidden: { opacity: 0, y: 20 },
show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } }
};
diff --git a/src/theme/Layout.tsx b/src/theme/Layout.tsx
index 87e4f2c8..3a6e2d6c 100644
--- a/src/theme/Layout.tsx
+++ b/src/theme/Layout.tsx
@@ -1,13 +1,13 @@
import React from "react";
import Layout from "@theme-original/Layout";
-import NavbarFirebaseAuthGithub from "@site/src/components/ui/NavbarFirebaseAuthGithub";
+import NavbarClerkAuth from "@site/src/components/ui/NavbarClerkAuth";
import NewsletterPopup from "../components/NewsLetterPopup";
export default function CustomLayout({ children, ...props }) {
return (
<>
Leaderboard
+Leaderboard access is unavailable right now.
+