feat(narratives): PR 1 - Core Shell, Routing, and Branding

[ddebasmita-lab]

This Pull Request introduces the initial structure and core layout shell for the new Narratives custom web interface under the /narratives folder. This is the first PR in a phased sequence to set up the Custom Data Commons narratives tool.

Key Additions:
Project Scaffolding: Configured React + TypeScript + Vite setup under narratives/ with strict type checking enabled ("strict": true in tsconfig.json).
Google Development Standards: Followed Google HTML/CSS and TypeScript styling guidelines (including block-wrapped control statements, clean import aliasing, and standard self-closing tags).
Branding & Design System: Integrated a BrandingProvider to dynamically fetch and inject instance-specific customization (e.g. brand-primary colors, brand font families, custom logos) as CSS variables.
Layout & Navigation: Implemented the base application shell (App.tsx), responsive sidebar/header components, and a lightweight hash-based router (useHashRoute).
Git Protection: Configured project-specific .gitignore and .dockerignore files to prevent committing local terraform caches, .tfvars config files, and generated build folders.

Files Included in this Phase:
narratives/tsconfig.json & vite.config.ts
narratives/index.html & package.json
Core shell components: Header.tsx, Sidebar.tsx, App.tsx
Configs and hooks: navConfig.ts, useHashRoute.ts, BrandingContext.tsx, useBranding.ts

[google-cla]

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

[gemini-code-assist]

Code Review

This pull request scaffolds a new React application under the narratives directory, integrating Data Commons web components, Tailwind CSS, and custom branding contexts. Key feedback highlights a security vulnerability where the GEMINI_API_KEY is exposed to the client-side bundle, which should instead be handled on the server side. Additionally, the reviewer noted that the hash router should strip query parameters to prevent routing failures, the dynamic branding colors and fonts should be properly registered in Tailwind's theme configuration and typography tokens, and the header logo should be updated to use the dynamic branding context rather than hardcoded values.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[ddebasmita-lab]

@beets please review this PR when you get a chance!