docs: Import React Aria homepage into new website #9074
Conversation
| * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS | ||
| * OF ANY KIND, either express or implied. See the License for the specific language | ||
| * governing permissions and limitations under the License. | ||
| */ |
There was a problem hiding this comment.
subset of the home.global.css was moved here so it could be shared. each site also has its own "wrapper" file that imports this and adds specific styles.
| } from 'react-aria-components'; | ||
| import {ComboBox, ComboBoxItem} from 'tailwind-starter/ComboBox'; | ||
| import {DatePicker} from 'tailwind-starter/DatePicker'; | ||
| import {DatePicker} from 'vanilla-starter/DatePicker'; |
There was a problem hiding this comment.
note: switched to vanilla starter for some of the styling examples, now that it looks prettier :D
|
|
||
| <div className="flex flex-col md:flex-row items-center gap-4 my-10 justify-center"> | ||
| <a href="getting-started.html" className="no-underline bg-linear-to-r from-blue-600 to-indigo-600 border border-blue-700 shadow-[inset_0_1px_0_rgba(255,255,255,0.1)] text-base md:text-lg font-bold text-white px-8 py-3 rounded-full transition focus-ring dark:outline-white outline-offset-2 active:scale-95">Get Started</a> | ||
| <a href="components.html" className="no-underline bg-white/50 border border-black/10 bg-clip-padding text-base md:text-lg font-bold text-slate-800 px-8 py-3 rounded-full backdrop-saturate-150 backdrop-brightness-125 transition hover:bg-white/60 focus-ring dark:outline-white outline-offset-2 active:scale-95">Explore Components</a> |
There was a problem hiding this comment.
Where do we want this link to go? Our components list is now inside the search for the most part. Do we want to also have a components page, or embed the search in the homepage and have this button open it? Not sure how it would look over the gradient background. 🤷
There was a problem hiding this comment.
I think we should also have a component page like we do now in the React Aria docs
There was a problem hiding this comment.
Could we just use the button to open the component search overlay?
There was a problem hiding this comment.
I mentioned that as an option above 😉
We can decide this later
| <Section className="orange-gradient-background"> | ||
| <h2><GradientText>Ready for an</GradientText> <span className="bg-clip-text bg-linear-to-b from-yellow-500 to-orange-600">international</span> <GradientText>audience.</GradientText></h2> | ||
| <p className="m-0">React Aria is engineered for internationalization out of the box, including translations in over 30 languages, localized date and number formatting and parsing, support for 13 calendar systems, 5 numbering systems, right-to-left layout, and more.</p> | ||
| <LearnMoreLink href="internationalization.html" className="text-orange-700 dark:text-orange-600 hover:bg-orange-400/[15%]" /> |
There was a problem hiding this comment.
These learn more links will eventually point to a consolidated "Concepts" page that covers i18n, a11y, and interactions in one page (shortened).
| } | ||
| })}> | ||
| {[...sections].sort((a, b) => a[0].localeCompare(b[0])).map(([name, pages]) => ( | ||
| {[...sections].sort((a, b) => a[0] === 'Getting started' ? -1 : a[0].localeCompare(b[0])).map(([name, pages]) => ( |
There was a problem hiding this comment.
Sorted the Getting started section to the top of the list, above components. This will also include a link to the home page so you can get back to it. We'll keep the rest of the guides below components.
|
Build successful! 🎉 |
|
the text inside the "tabs" are quite faint here 
the custom styled datefield is just kinda floating there 
in general, seems like dark mode isn't fully supported on the new homepage. there are multiple places where the lack of contrast make it hard to see the text and other areas where it just looks like it's in light mode |
|
@yihuiliao hmm it doesn't look like that for me in dark mode. What browser? |
|
huh...i just tried it again and it looks fine. idk what happened |
snowystinger
left a comment
snowystinger
left a comment
There was a problem hiding this comment.
Looks good, I had one outstanding question:
#9074 (comment)
LFDanLu
left a comment
LFDanLu
left a comment
There was a problem hiding this comment.
Looks good to me, noticed that some links don't work but thats probably because we don't have home pages for S2 and Internationalization yet. Also is "Explore" on https://reactspectrum.blob.core.windows.net/reactspectrum/d823fc7656d127c9e58d03ecc40683320a89dc13/s2-docs/index.html supposed to go to the home page now we have one?
|
yes links will be fixed once we have the content |
This copies the existing React Aria homepage into the new docs, initially without changes. The MDX content is duplicated due to differences in processing, but the embedded components are re-used. Additional changes were made to avoid the CSS reset.
Also added additional open graph and SEO meta tags for all pages.
See additional questions inline.