feat(web): add domain-based branding system#3514
Open
devin-ai-integration[bot] wants to merge 3 commits intomainfrom
Open
feat(web): add domain-based branding system#3514devin-ai-integration[bot] wants to merge 3 commits intomainfrom
devin-ai-integration[bot] wants to merge 3 commits intomainfrom
Conversation
- Add feature-flags.ts with Brand type and BrandingConfig - Add BrandingProvider context for domain detection - Update router.tsx to wrap app with BrandingProvider - Update header.tsx Logo component to use useBranding hook This enables dynamic branding based on the current domain (hyprnote.com vs char.com) for the upcoming rebrand. Co-Authored-By: yujonglee <yujonglee.dev@gmail.com>
Contributor
Author
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
✅ Deploy Preview for hyprnote ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for hyprnote-storybook canceled.
|
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
- Rename feature-flags.ts to branding.ts - Consolidate to single useBranding hook with flat return object - Return stable primitive values (brand, logo, productName, etc.) - Similar to TanStack Query's render optimization pattern Co-Authored-By: yujonglee <yujonglee.dev@gmail.com>
…mismatch During SSR, window is undefined so getCurrentHostname() now extracts the hostname from VITE_APP_URL environment variable. This ensures consistent branding between server and client rendering. Co-Authored-By: yujonglee <yujonglee.dev@gmail.com>
devin-ai-integration
bot
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a domain-based branding system to
apps/webthat enables dynamic branding based on the current hostname. This supports the upcoming rebrand from hyprnote.com to char.com by allowing different logos and product names per domain.Changes:
branding.ts: Core module withBrandtype,BrandingConfiginterface, and domain detection logicBrandingProvider.tsx: React Context provider with singleuseBranding()hook returning stable primitive valuesrouter.tsx: Wraps app withBrandingProviderheader.tsx: UpdatesLogocomponent to use branding hook instead of hardcoded valuesThe architecture is designed to be extended with PostHog flags later for A/B testing pricing changes.
Updates since last revision
feature-flags.tstobranding.tsuseBranding()hook (removeduseBrand(),useIsCharBrand())brand,logo,productName, etc.) similar to TanStack Query patterngetCurrentHostname()now extracts hostname fromVITE_APP_URLduring SSR to avoid hydration mismatchReview & Testing Checklist for Human
VITE_APP_URLmatching the actual deployment domain. If deploying to char.com, ensureVITE_APP_URL=https://char.comis set in that environment. Mismatched config will cause hydration issues./api/images/char/logo.svgand/api/images/char/og-image.jpg- ensure these assets exist or will be added before deploying to char.comdetectBrand()correctly identifies char.com vs hyprnote.com vs localhostRecommended test plan:
detectBrand()temporarily to return "char" and verify char branding appearsNotes
Meta tags in
__root.tsx(title, description, og:image) still use hardcoded "Hyprnote" values. These could be updated in a follow-up PR.Link to Devin run: https://app.devin.ai/sessions/7a4241ebceed4b21b614c8999f3ca49a
Requested by: yujonglee (@yujonglee)