Merge pull request #1015 from supertokens/fix/light-mode

Author: bcbogdan

src/components/MenuItemIcon.tsx

@@ -3,10 +3,14 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 import {
   Book,
   Zap,
+  HousePlus,
+  ShieldUser,
+  Braces,
   Key,
+  LayoutDashboard,
   Shield,
-  GitPullRequest,
   CircleUserRound,
+  UserPlus,
   FileTerminal,
   FileCode,
   HardDrive,
@@ -15,45 +19,27 @@ import {
   ArrowRight,
   Settings,
   Server,
-  Mail,
+  WandSparkles,
+  FileUser,
   Smartphone,
   Share2,
   Building,
   RectangleEllipsis,
   Bot,
-  Layers,
   Fingerprint,
-  MailCheck,
   ShieldCheck,
   Clock,
   UserCheck,
-  ShieldAlert,
-  Timer,
-  UserCog,
-  Link,
-  BarChart3,
   Puzzle,
-  Cloud,
-  Triangle,
-  Database,
   Workflow,
-  Globe,
-  Folder,
-  FileText,
   Monitor,
-  Code,
   Bug,
-  Wrench,
   Palette,
-  FlaskConical,
-  BookOpenCheck,
   Cpu,
   Hash,
   History,
-  Construction,
   Play,
-  ChevronRight,
-  Lightbulb,
+  MailCheck,
 } from "lucide-react";
 
 import VercelLogo from "/img/logos/vercel.svg";
@@ -80,7 +66,7 @@ const categoryIcons = {
 
   // Authentication methods
   "Email Password": RectangleEllipsis,
-  Passwordless: Smartphone,
+  Passwordless: WandSparkles,
   "Social Login": CircleUserRound,
   "Enterprise Login": Building,
   "Unified Login": Share2,
@@ -108,7 +94,7 @@ const categoryIcons = {
   "SuperTokens Core": Cpu,
 
   // Authentication reference subcategories
-  "Email/Password": Mail,
+  "Email/Password": RectangleEllipsis,
   ThirdParty: Share2,
   WebAuthn: Fingerprint,
   OAuth: Key,
@@ -118,6 +104,16 @@ const categoryIcons = {
   OTP: Smartphone,
   SAML: Building,
 
+  // CDI/FDI
+  "Email Verification": MailCheck,
+  "Account Linking": FileUser,
+  "Bulk Import": UserPlus,
+  Core: Cpu,
+  Dashboard: LayoutDashboard,
+  "User Metadata": Braces,
+  "User Roles": ShieldUser,
+  Multitenancy: HousePlus,
+
   // Quickstart guides and workflows
   "Quickstart Guides": Zap,
   "Advanced Workflows": Workflow,

src/components/ScrollOffsetFix.tsx

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+import { initScrollOffset } from '../lib/scrollOffset';
+
+export function ScrollOffsetFix() {
+  useEffect(() => {
+    initScrollOffset();
+  }, []);
+
+  return null; // This component doesn't render anything
+}
+
+export default ScrollOffsetFix;

src/css/custom.scss

@@ -30,9 +30,12 @@
 
   // Navbar customization
   --ifm-navbar-height: 122px;
+  // Total navbar height including tabs and padding for accurate scroll positioning
+  --navbar-total-height: 140px;
 
   @media (max-width: 996px) {
     --ifm-navbar-height: 80px;
+    --navbar-total-height: 80px; // No tabs on mobile
   }
 
   // Doc Sidebar

src/lib/scrollOffset.ts

@@ -0,0 +1,63 @@
+export function getNavbarHeight(): number {
+  if (typeof window === "undefined") return 140;
+
+  const navbar = document.querySelector("nav.navbar");
+  if (!navbar) return 140;
+
+  const height = navbar.getBoundingClientRect().height;
+  return height;
+}
+
+function scrollToElementWithOffset(element: Element): void {
+  const navbarHeight = getNavbarHeight();
+  const elementRect = element.getBoundingClientRect();
+  const absoluteElementTop = elementRect.top + window.pageYOffset;
+  const targetScrollTop = absoluteElementTop - navbarHeight - 16;
+
+  window.scrollTo({
+    top: targetScrollTop,
+    behavior: "smooth",
+  });
+}
+
+function handleHashNavigation(): void {
+  if (typeof window === "undefined") return;
+
+  const hash = window.location.hash;
+  if (!hash) return;
+
+  const targetId = hash.substring(1);
+  const targetElement = document.getElementById(targetId);
+
+  if (targetElement) {
+    setTimeout(() => {
+      scrollToElementWithOffset(targetElement);
+    }, 100);
+  }
+}
+
+function handleHashLinkClick(event: Event): void {
+  const target = event.target as HTMLElement;
+  const link = target.closest('a[href^="#"]') as HTMLAnchorElement;
+
+  if (!link || !link.hash) return;
+
+  const targetId = link.hash.substring(1);
+  const targetElement = document.getElementById(targetId);
+
+  if (targetElement) {
+    event.preventDefault();
+    history.pushState(null, "", link.hash);
+    scrollToElementWithOffset(targetElement);
+  }
+}
+
+export function initScrollOffset(): void {
+  if (typeof window === "undefined") return;
+
+  setTimeout(handleHashNavigation, 100);
+  setTimeout(handleHashNavigation, 500);
+  window.addEventListener("hashchange", handleHashNavigation);
+  document.addEventListener("click", handleHashLinkClick);
+}
+

src/theme/Layout/index.tsx

@@ -13,6 +13,7 @@ import ErrorPageContent from "@theme/ErrorPageContent";
 import supertokens from "supertokens-website";
 import type { Props } from "@theme/Layout";
 import styles from "./styles.module.css";
+import ScrollOffsetFix from "@site/src/components/ScrollOffsetFix";
 
 if (typeof window !== "undefined") {
   const isProdEnv =
@@ -51,6 +52,7 @@ export default function Layout(props: Props): JSX.Element {
   return (
     <LayoutProvider>
       <PageMetadata title={title} description={description} />
+      <ScrollOffsetFix />
 
       <SkipToContent />
 

src/theme/Root.tsx

@@ -18,8 +18,6 @@ export default function Root({ children }: { children: React.ReactNode }) {
     init();
   }, []);
 
-  useLayoutEffect(() => {}, []);
-
   useEffect(() => {
     trackPageView();
   }, [pathname]);