Fix blank website: migrate from dead CDN deps to bundled React 19 + Firebase 12 + Bootstrap 3

[Copilot]

The site rendered blank because script.js was never built, the Firebase 1.1.3 CDN (cdn.firebase.com) is dead, and script.jsx used React 0.12 APIs (React.createClass, ReactFireMixin, getDOMNode()) that are incompatible with the modern versions already declared in package.json.

Changes

• script.jsx — Now a thin entry point; all logic split into src/:

  • src/constants.js — types, nextTypes
  • src/utils.js — cursorPos, placeCaretAtEnd
  • src/firebase.js — Firebase app + db initialization
  • src/components/ContentEditable.jsx — cursor-stable rich text input using useLayoutEffect
  • src/components/Line.jsx — single screenplay line with Firebase sync
  • src/components/Nav.jsx — top navigation bar
  • src/components/Home.jsx — landing page
  • src/components/ScriptPage.jsx — script editor (Firebase sync, keyboard handling)
  • src/App.jsx — hash router root
  • All components use React 19 function components with useState, useEffect, useLayoutEffect, useRef, forwardRef, useImperativeHandle, useCallback; Firebase v12 modular SDK; react-router v7

• index.html — Removed all CDN <script> and <link> tags; JS and CSS are now fully self-hosted bundles (script.js, script.css)

• package.json — Fixed Bootstrap version from ^5.3.8 to ^3.4.1 to match Bootstrap 3 class names used throughout (glyphicons, navbar-inverse, etc.); added esbuild-sass-plugin devDependency; unified build via node scripts/build.js

• scripts/build.js — New unified build script using esbuild + esbuild-sass-plugin: bundles JS/JSX, compiles SCSS, and inlines Bootstrap 3 CSS (including glyphicon fonts) into a single script.css output — no CDN dependency

• .gitignore — Updated to reflect new build artifact names (script.css, fonts/)

Result

Original prompt

website is blank

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[ProLoser]

@copilot split the script file up and double check the css

[Copilot]

@copilot split the script file up and double check the css

Done in 288a7d6.

Split: script.jsx is now a thin entry point; all logic lives in src/:

• src/constants.js, src/utils.js, src/firebase.js
• src/components/ — ContentEditable, Line, Nav, Home, ScriptPage
• src/App.jsx — routing root

CSS fix: Bootstrap was in package.json as v5.3.8 but the app uses Bootstrap 3 class names (glyphicons, navbar-inverse, etc.) while loading v3.4.1 from a CDN. Now Bootstrap 3.4.1 is a proper npm dep bundled via esbuild-sass-plugin — no CDN dependency. script.css (Bootstrap + app SCSS) and glyphicon fonts are output by the build alongside script.js.