Repository navigation
Conversation
Ported from callstack-internal/paper-landing-page ahead of merging reactnativepaper.com and oss.callstack.com/react-native-paper onto a single domain. Both versioned homepages become `pageType: custom` rendering a shared <Landing /> component, so any future version picks up the same page. Section order follows src/pages/index.js in the source: hero, numbers, look and feel, Material You, code, key concepts, testimonials, Discord, Callstack. The docs navbar is kept; the rspress feature grid, screenshot gallery and Callstack home banner are removed rather than merged. Stats and the GitHub star count stay live, via the same endpoints the original uses. Roboto and Roboto Mono are vendored to match the original's body and code type. Headings are set in Platform Web on the original. That is a Commercial Type retail face whose webfont licence is domain-scoped and does not allow redistribution, so the file is not committed and headings fall back to Roboto. landing.css documents how to restore it once the licensing is settled. The docs preset styles headings, `body *`, and `pre`/`code` with !important, and disables weight synthesis via `font-synthesis: style`. The landing scope overrides these so the page renders with the original's metrics. Two fixes to the source's snippet: `TouchableWithNativeFeedback` does not exist, and its StyleSheet object was missing a comma.
Measured both pages element by element with Playwright instead of comparing screenshots by eye, and corrected what differed. Sizing, all of which had been guessed: the demo videos are capped at 297x630 to hold the movie ratio rather than filling their column, the Material You art is 720px tall and positioned out of flow, the Material Design badge renders at its natural 225x195, play badges are 60px, testimonial avatars 60px, the Discord mark 175px and the Callstack wordmark 300px. Hero and Material You run flush with a 700px floor, and Numbers and Code drop their bottom padding. These needed to outrank .landing-section, whose padding shorthand in the 992px media query was winning on order. Section headings take the font's natural leading, not the preset's 1.2. Numbers keeps the 60px item margin the source never clears in row layout. Key concepts' subtitle is body copy at 460px, not the 30px tagline used by Code. Restores the header band above the hero and the headings dropped from Discord and Callstack, and reorders both to match the source. Remaining gaps are tracked: the hero wraps to four lines rather than three because Platform Web is absent for licensing reasons and Roboto is wider, and testimonials render as a grid rather than the source's slider.
Cap the code panel at the source's 400x400 scroll box, draw the phone frame with object-fit: cover so the demo fills the real 320x710 cutout, give the demo its Appbar so content clears the notch, and add the ornament between the panel and the phone. Port the footer section, which had been left out entirely. Set the comparison panels in Roboto Mono with the source's line padding, and take the editor column's heading and lede metrics from the original.
Port the testimonial cards and their slider, add the footer section and the Callstack wordmark, and render all three code panels through prism-react-renderer so they carry the original's colours and line numbers. Restore Platform Web for the headings, add Roboto Medium, and undo the preset overrides that were reaching the page: heading margins, leading and weight, letter-spacing, and the rules that leaked into the live demo. Make the Material You chip switch palettes rather than sit inert, and stop the docs footer artwork painting below the landing page.
|
Found potential problems with the pull request:
|
This branch has not been deployed
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.
Motivation
The project has two sites: the marketing landing page at reactnativepaper.com and the documentation site on GitHub Pages. This replaces the documentation site's homepage with the landing page, so there is one site to maintain.
Per Satyajit's direction: swap the whole homepage for the landing page plus the docs navbar links, rather than merging the two pages' content. Refreshing the landing copy is deliberately out of scope — it was written by marketing and should be a separate task.
Related issue
Notion: Merge reactnativepaper.com + oss.callstack.com/react-native-paper
Screenshots / Videos
Walkthrough of the ported homepage — hero through footer, with the live demo driven through its Snackbar, dark theme and Material You states, and the testimonial slider.
rn-native-paper-small.mp4
Test plan
Open the site root and compare against https://reactnativepaper.com. Both the 5.x and 6.x homepages render the landing page, so any future version inherits it.
In the phone demo: the Sign me up button raises the Snackbar at the bottom of the screen, the Dark theme and Material You chips both toggle and change the demo's palette, and the Appbar's external-link icon opens the Appbar docs.
The docs footer artwork should still appear on other custom pages —
/showcase/is the one to check — and be suppressed only on the homepage.How it was ported
The visual rules are lifted verbatim from the original's compiled linaria stylesheet into
docs/src/css/landing-vendor.css, and the components mirror the original DOM so they can use those class names.docs/src/css/landing.cssholds only the webfonts and the overrides needed because the docs preset styles headings,body *,pre/codeand font synthesis with!important.Needs a decision before merge
Platform Web. The original sets its headings in Platform Web, a Commercial Type retail face. The files here come from the source repo's
src/fonts/PlatformWeband carry "Not to be used for anything other than web font use!". That repo is private; this one is public, so merging redistributes the font to anyone who clones or forks. Whoever holds Callstack's licence with Commercial Type needs to confirm it covers both this repo and the domain the site is served from. If the answer is no, reverting is two files and the@font-face— the fallback chain already drops to Roboto.New dependency.
prism-react-rendererin the docs workspace. It is what the original uses, and nothing else reproduces its editor theme, line numbers and colouring.Deployment
This is the first of two PRs. The second flips
basefrom/react-native-paper/to/and adds theCNAME, paired with the DNS move: custom domain set in the repo settings, Cloudflare records added DNS-only so GitHub can issue the certificate, then Enforce HTTPS, then re-proxy with SSL set to Full (strict). The ordering matters.