Fix/sanitize play exports

package.json

@@ -86,9 +86,9 @@
   },
   "scripts": {
     "dev": "react-scripts start",
-    "start:nolint": "npx --yes create-react-play@latest -p && react-scripts start",
-    "start": "npx --yes create-react-play@latest -p && npm run lint && react-scripts start",
-    "build": "npx --yes create-react-play@latest -p && react-scripts build",
+    "start:nolint": "npx --yes create-react-play@latest -p && node scripts/sanitize-play-exports.cjs && react-scripts start",
+    "start": "npx --yes create-react-play@latest -p && node scripts/sanitize-play-exports.cjs && npm run lint && react-scripts start",
+    "build": "npx --yes create-react-play@latest -p && node scripts/sanitize-play-exports.cjs && react-scripts build",
     "snap": "react-snap",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
@@ -157,6 +157,6 @@
     "react-snap": "^1.23.0",
     "tailwind-scrollbar": "^2.1.0",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5.3.3"
+    "typescript": "^5.9.3"
   }
 }

scripts/sanitize-play-exports.cjs

@@ -0,0 +1,86 @@
+#!/usr/bin/env node
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+const indexPath = path.join(process.cwd(), 'src', 'plays', 'index.js');
+
+if (!fs.existsSync(indexPath)) {
+  console.warn(`[sanitize-play-exports] Skipped: file not found at ${indexPath}`);
+  process.exit(0);
+}
+
+const source = fs.readFileSync(indexPath, 'utf8');
+const newline = source.includes('\r\n') ? '\r\n' : '\n';
+const hasTrailingNewline = source.endsWith('\n');
+const lines = source.split(/\r?\n/);
+
+const exportLinePattern = /^(\s*export\s*\{\s*default\s+as\s+)([^}]+?)(\s*\}\s*from\s*['"][^'"]+['"]\s*;?\s*)$/;
+const isValidIdentifier = (value) => /^[$A-Z_a-z][$0-9A-Z_a-z]*$/.test(value);
+
+const toPascalCase = (value) => {
+  const chunks = value
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .split(/[^0-9A-Z_a-z$]+/)
+    .filter(Boolean);
+
+  let identifier = chunks
+    .map((chunk) => chunk.charAt(0).toUpperCase() + chunk.slice(1))
+    .join('');
+
+  if (identifier.length === 0) {
+    identifier = 'Play';
+  }
+
+  if (!/^[$A-Z_a-z]/.test(identifier)) {
+    identifier = `Play${identifier}`;
+  }
+
+  return identifier;
+};
+
+const usedAliases = new Set();
+let updateCount = 0;
+
+const nextLines = lines.map((line) => {
+  const match = line.match(exportLinePattern);
+  if (match == null) {
+    return line;
+  }
+
+  const [, prefix, rawAlias, suffix] = match;
+  const currentAlias = rawAlias.trim();
+  let nextAlias = currentAlias;
+
+  if (!isValidIdentifier(currentAlias)) {
+    nextAlias = toPascalCase(currentAlias);
+  }
+
+  const aliasBase = nextAlias;
+  let duplicateIndex = 2;
+  while (usedAliases.has(nextAlias)) {
+    nextAlias = `${aliasBase}${duplicateIndex}`;
+    duplicateIndex += 1;
+  }
+  usedAliases.add(nextAlias);
+
+  if (nextAlias !== currentAlias) {
+    updateCount += 1;
+    return `${prefix}${nextAlias}${suffix}`;
+  }
+
+  return line;
+});
+
+let nextSource = nextLines.join(newline);
+if (hasTrailingNewline) {
+  nextSource += newline;
+}
+
+if (nextSource !== source) {
+  fs.writeFileSync(indexPath, nextSource, 'utf8');
+  console.log(`[sanitize-play-exports] Updated ${updateCount} export alias(es).`);
+} else {
+  console.log('[sanitize-play-exports] No invalid aliases found.');
+}

src/common/Testimonial/TestimonialCard.jsx

@@ -53,7 +53,10 @@ const TestimonialCard = ({ home, quote, name, avatarUrl, category, created_at, e
       </div>
 
       <div className="mx-2 mt-4">
-        <blockquote className={`${home && 'h-32'} max-h-32 px-6 overflow-y-auto`}>
+        <blockquote
+          className={`${home ? 'h-32' : ''} max-h-32 px-6 overflow-y-auto`}
+          style={{ touchAction: 'pan-y' }}
+        >
           <p
             className="leading-relaxed text-gray-700"
             dangerouslySetInnerHTML={{ __html: replaceWithBr() }}

src/common/Testimonial/TestimonialSection.jsx

@@ -18,8 +18,13 @@ function TestimonialSection() {
   const [testimonials, setTestimonials] = useState([]);
 
   const fetchTestimonials = async () => {
-    const res = await submit(fetchTestimonialsHomePage());
-    setTestimonials(res);
+    try {
+      const res = await submit(fetchTestimonialsHomePage());
+      setTestimonials(res || []);
+    } catch (error) {
+      console.warn('Failed to fetch testimonials:', error.message);
+      setTestimonials([]);
+    }
   };
 
   useEffect(() => {
@@ -30,6 +35,7 @@ function TestimonialSection() {
     <>
       <div className="mx-5 lg:mx-20 h-72 mt-16 sm:mt-20">
         <Swiper
+          grabCursor
           rewind
           autoplay={{
             delay: 2500,
@@ -56,6 +62,7 @@ function TestimonialSection() {
           }}
           slidesPerView={1}
           spaceBetween={10}
+          touchEventsTarget="container"
         >
           {testimonials &&
             testimonials.map((testimonial) => (

src/common/Testimonial/Testimonials.jsx

@@ -15,8 +15,13 @@ const Testimonials = () => {
   const isAuthenticated = useAuthenticated();
 
   const fetchTestimonials = async () => {
-    const res = await submit(fetchAllTestimonials());
-    setTestimonials(res);
+    try {
+      const res = await submit(fetchAllTestimonials());
+      setTestimonials(res || []);
+    } catch (error) {
+      console.warn('Failed to fetch testimonials:', error.message);
+      setTestimonials([]);
+    }
   };
 
   const handleLogin = (value) => {

src/common/header/HeaderNav.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { BsGithub, BsTrophyFill } from 'react-icons/bs';
 import { FaLightbulb } from 'react-icons/fa';
@@ -16,6 +16,26 @@ const HeaderNav = ({ showBrowse }) => {
   const { showShareModal, setShowShareModal } = useSearchContext();
 
   const [showToggleMenu, setShowToggleMenu] = useState(false);
+  const menuRef = useRef(null);
+
+  // Close drawer when clicking outside the menu panel
+  useEffect(() => {
+    if (!showToggleMenu) return;
+
+    const handleClickOutside = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setShowToggleMenu(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('touchstart', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
+    };
+  }, [showToggleMenu]);
 
   const [anchorEl, setAnchorEl] = useState(null);
 
@@ -129,6 +149,7 @@ const HeaderNav = ({ showBrowse }) => {
         <ul
           className="header-links"
           data-testid="header-links-container"
+          ref={menuRef}
           onClick={(e) => e.stopPropagation()}
         >
           <li className="menu-closer">

src/common/header/header.css

@@ -29,7 +29,12 @@
 }
 
 .nav--visible {
-  transform: translateY(0);
+  transform: none;
+}
+
+/* Push page content below the fixed header, but not the footer */
+.nav-wrapper ~ *:not(footer) {
+  padding-top: 64px;
 }
 
 

src/common/home/home.css

@@ -13,6 +13,7 @@
   width: 100%;
   overflow-x: hidden;
   min-height: 100vh;
+  padding-top: 32px; /* extra offset for activity banner on home page */
 }
 
 .app-home-body .app-home-body-content {

src/common/playleaderboard/LeaderBoard.jsx

@@ -6,6 +6,7 @@ import TopPlayCreators from './TopPlayCreators';
 import { Watch } from 'react-loader-spinner';
 import { groupBy } from 'lodash';
 import { format, lastDayOfMonth } from 'date-fns';
+import './leaderBoard.css';
 
 const LeaderBoard = () => {
   const [top10Contributors, updateTop10Contributors] = useState([]);
@@ -69,7 +70,7 @@ const LeaderBoard = () => {
   }, [publishedPlays]);
 
   return (
-    <main className="app-body  app-body-overflow-hidden">
+    <main className="app-body">
       {publishedPlays.length && (topContributorOfTheMonth || top10Contributors) ? (
         <div className=" overflow-auto lg:flex flex-row justify-center">
           {topContributorOfTheMonth && (

src/common/playleaderboard/leaderBoard.css

@@ -38,6 +38,13 @@
     height: 100vh;
   } */
 
+.leaderboard-loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100vh - 160px);
+}
+
 .leaderboard-wrapper {
     background-color: #ffffff;
     border-radius: 16px;