Skip to content

Commit 7a22979

Browse files
afoxmantido64
afoxman
and
tido64
authoredMar 30, 2022
Website Update: navigational framework, landing page update (#1328)
* working docusaurus site. mostly stock with a few minor tweaks. * set light/dark mode colors * Update README main header link. Add GitHub logo (light and dark mode variants) to docsite header bar. * accessibility fixes * Clear out footer, leaving copyright. Always use darktheme when showing code to fix contrast issues. Change github icon to inline SVG. Add examples of Important and Caution blocks in markdown. Change link colors to match RNW and RN sites. * Move into doc into hierarchy (styles don't support top-level docs). Reinstate homepage feature area, which now appears to be a little broken. * Add MS Open Source img and link as footer logo. Also tweak CSS: inline code formatting in markdown, color refining/sharing, footer logo size/opacity. * Remove opacity styles on footer -- they happen automatically since it is a link. * Finalize landing page. Move GitHub logo into an .svg file. * Fix editUrls. * fix homepage text * Add local-search support and styling. Not too happy with this. Out of the box, local search uses Algolia's color scheme and doesn't pick up Docusaurus colors. I have it polished and working, though. Going to try using the DocSearch-based service instead which is supposed to integrate w/Docusaurus CSS vars. * Update docusaurus version * Create navbar hierarchy and matching sidebars. Remove inline front-matter tags and category files, and instead be get name from markdown title and order from sidebar.js. * Use a very dark gray background instead of black in darkmode. Fix typo in navbar. * add shadow on navbar in darkmode * Starting to put together content for docsite from READMEs. * Merge main * Refine landing page message. Add "resources" and "contributing" sections in the top nav bar. * Tweak home page styles. Make home page responsive at different device sizes. Update MS open source logo with light and dark mode variants in Segoe UI font. * Adjust responive home page spacing * Update landing page * Write pages: The Basisc > Introduction, The Basics > Dependencies. Frame out the remaining pages for V1 of the site and mark with warnings at the top of each page. * Add intro page on type safety * remove demo content * undo unrelated changes * remove unused svg * docs(changeset): Update navigation and landing page * Update docsite/docs/resources.md Co-authored-by: Tommy Nguyen <4123478+tido64@users.noreply.github.com> * Fix grammar * Adjust note about incubating packages on package-overview page. * Add note to consolidate contributing site page and contributing.md Co-authored-by: Tommy Nguyen <4123478+tido64@users.noreply.github.com>
·
@rnx-kit/yarn-plugin-dynamic-extensions@0.1.1@react-native-webapis/battery-status@0.1.0
1 parent 2a95ecf commit 7a22979

26 files changed

+645
-131
lines changed
 

‎.changeset/great-peas-speak.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"docsite": minor
3+
---
4+
5+
Update navigation and landing page

‎docsite/blog/2019-05-28-first-blog-post.md

-6
This file was deleted.

‎docsite/docs/architecture/dependency-management.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Dependency Management
2+
3+
:::danger Draft Content
4+
5+
This page needs to be converted from a draft to real content.
6+
7+
:::
8+
9+
Incorporate the dep-check README's "motivation" section and its DESIGN.md file.

‎docsite/docs/architecture/overview.md

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Architecture Overview
2+
3+
:::danger Draft Content
4+
5+
This page needs to be converted from a draft to real content.
6+
7+
:::
8+
9+
This area goes explores the architecture of different packages, and the library
10+
as a whole.

‎docsite/docs/contributing.md

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Contributing
2+
3+
:::danger Draft Content
4+
5+
This page needs to be converted from a draft to real content.
6+
7+
:::
8+
9+
consolidate from CONTRIBUTING.md into here, and make it a shallow file which
10+
links to this page on the site
11+
12+
--
13+
14+
thank you for contributing! we welcome contributions, and encourage you join in!
15+
16+
open an issue, submit a PR, write docs.
17+
18+
share your work with the community! #rnxkit #ReactNativeDevTools
19+
@ReactNativeMSFT

‎docsite/docs/dependencies.md

+135
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
# Dependencies
2+
3+
The React Native ecosystem is vast, and it changes all the time. This makes it
4+
hard to find **actively maintained** packages which are **compatible** with each
5+
other, and with the React Native version you are using. Keeping up means regular
6+
package.json maintenance and thorough compatibility testing.
7+
8+
When you're ready to upgrade React Native itself, you need to start the whole
9+
process over again. Find a new set of package versions. Make sure they don't
10+
break each other or your app. It's a never-ending, time-consuming cycle.
11+
12+
The [dependency manager](/docs/guides/dependency-management) solves these
13+
problems. It knows which React Native package versions work well together, and
14+
it uses that knowledge to keep your app healthy and up-to-date.
15+
16+
## Capabilities and Profiles
17+
18+
The magic is in the data that comes with the dependency manager -- capabilities
19+
and profiles. Together, they describe a _curated_ and _tested_ list of packages
20+
that work with each major release of React Native.
21+
22+
A capability is something your app needs to function. It has a well-known name,
23+
and it maps to a specific package and version:
24+
25+
```typescript
26+
const capability = {
27+
react: {
28+
name: "react",
29+
version: "17.0.2",
30+
},
31+
};
32+
```
33+
34+
Capabilities can depend on each other, creating a tree:
35+
36+
```typescript
37+
const capabilities = {
38+
react: {
39+
name: "react",
40+
version: "17.0.2",
41+
},
42+
"react-dom": {
43+
name: "react-dom",
44+
version: "17.0.2",
45+
capabilities: ["react"],
46+
},
47+
};
48+
```
49+
50+
A profile is a collection of capabilities, known to work well with a specific
51+
release of React Native. Each React Native release has its own profile.
52+
53+
```typescript
54+
const reactNative: Package = {
55+
name: "react-native",
56+
version: "^0.67.0-0",
57+
capabilities: ["react"],
58+
};
59+
60+
const profile_0_67: Profile = {
61+
react: {
62+
name: "react",
63+
version: "17.0.2",
64+
},
65+
core: reactNative,
66+
"core-android": reactNative,
67+
"core-ios": reactNative,
68+
// ... etc ...
69+
};
70+
```
71+
72+
## Configuration
73+
74+
A package tells the dependency manager about itself using configuration. It
75+
answers questions such as: Is the package an `app` or a `library`? Which
76+
version(s) of React Native is the package targeting? What capabilities does the
77+
package require?
78+
79+
```json title=package.json
80+
{
81+
"rnx-kit": {
82+
"kitType": "app",
83+
"reactNativeVersion": "^0.66 || ^0.67",
84+
"capabilities": [
85+
"core-android",
86+
"core-ios",
87+
"core-macos",
88+
"core-windows",
89+
"react",
90+
"test-app"
91+
]
92+
}
93+
}
94+
```
95+
96+
The dependency manager uses this configuration when validating or updating the
97+
package's dependency list.
98+
99+
## Validating Dependencies
100+
101+
The dependency manager scans a package's dependencies, reporting anything that
102+
is incompatible or missing. It normally only validates _configured_ packages,
103+
though it can be used to validate unconfigured packages.
104+
105+
Configured package validation starts with the target React Native version(s).
106+
The dependency manager gets the corresponding profile(s) and cross-references
107+
them with the package's capabilties. Now it knows which dependencies (and
108+
versions) the package _should_ have. It checks `dependencies`,
109+
`devDependencies`, and `peerDependencies`, looking for incompatible or missing
110+
packages. If anything is wrong, it reports detailed information to the console.
111+
112+
Validating an unconfigured package isn't as precise, though it is very useful as
113+
a transitional tool when on-boarding large monorepos. You tell the dependency
114+
manager which React Native version(s) to target. It looks at the package's
115+
dependencies, and reverse-maps them to known capabilities. From there, it can
116+
validate using the inferred capability list, reporting any incompatible or
117+
missing dependencies.
118+
119+
Use the [dependency manager guide](/docs/guides/dependency-management) to learn
120+
how to on-board existing repos incrementally, and run validation on configured
121+
and unconfigured packages.
122+
123+
## Updating Dependencies
124+
125+
The dependency manager can automatically update a package's dependencies,
126+
resolving compatibility problems and adding missing dependencies.
127+
128+
This is a very powerful tool for developers, especially when used in monorepos
129+
with many packages.
130+
131+
The [dependency manager guide](/docs/guides/dependency-management) shows you how
132+
to keep your packages up-to-date as dependencies change or capabilities are
133+
added/removed. It also shows you how to automate a React Native upgrade,
134+
changing every package and its dependencies, to known/good versions that work
135+
well together.

‎docsite/docs/docs.md

-3
This file was deleted.

‎docsite/docs/guides/bundling.md

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Bundling
2+
3+
:::danger Draft Content
4+
5+
This page needs to be converted from a draft to real instructions.
6+
7+
Guides should be step-by-step instructions. Devs use them to complete a task.
8+
Doing, not learning. If you want to explain why, add notes to pages under "The
9+
Basics" (or add a new page there).
10+
11+
:::
12+
13+
First step is to follow the
14+
[Getting Started guide](/docs/guides/getting-started). dep-check onboarding, and
15+
app packages get Metro/Babel setup.
16+
17+
## Application On-boarding
18+
19+
Configure app packages for bundling and serving.
20+
21+
CLI and custom integration -- Set up dup/cyclic dep checkers, type safety,
22+
tree-shaking.
23+
24+
## Bundle an App
25+
26+
Show CLI commands to create bundles, per-platform. Link to CLI "tools" page.
27+
28+
Add commands to package.json script blocks and/or custom build system.
29+
30+
## Start an App Bundle Server
31+
32+
Show CLI commands to start a bundle server. Link to CLI "tools" page.
33+
34+
Add commands to package.json script blocks and/or custom build system.
35+
36+
## Continuous Validation
37+
38+
Add CLI commands to CI loops (PRs, builds).

‎docsite/docs/guides/dependency-management.md

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# Dependency Management
2+
3+
:::danger Draft Content
4+
5+
This page needs to be converted from a draft to real instructions.
6+
7+
Guides should be step-by-step instructions. Devs use them to complete a task.
8+
Doing, not learning. If you want to explain why, add notes
9+
[here](/docs/dependencies)
10+
11+
:::
12+
13+
## On-boarding
14+
15+
- use vigilant mode first to establish a baseline
16+
- work through the warnings/errors that it uncovers
17+
- add validation check to CI loops for PRs and builds
18+
- configure (init) one package at a time, manually reviewing output
19+
- repeat until all packages are configured
20+
- keep vigilant mode running in CI so that new packages are validated
21+
22+
## Updating Dependencies
23+
24+
- when: after dep-check update (new profile data), when adding/removing
25+
capabilties
26+
- run dep-check with --write on all packages in monorepo
27+
- review results manually
28+
- run full test suite to validate apps
29+
30+
## Upgrading React Native
31+
32+
- update dep-check to get latest profile data
33+
- set-version command across all packages (will update dependencies
34+
automatically)
35+
- review results manually
36+
- run full test suite to validate apps
37+
38+
## Using a Custom Profile
39+
40+
- NOTE: This isn't covered in the dep-check [article](/docs/dependencies); add
41+
it there and keep this focused on the "How"
42+
- create profile and link into package config wherever needed
43+
- run dep-check --write across the repo
44+
- review results manually
45+
- run full test suite to validate apps
46+
- encourage [contributing](/docs/contributing) through an issue or a PR

‎docsite/docs/guides/getting-started.md

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Getting Started
2+
3+
:::danger Draft Content
4+
5+
This page needs to be converted from a draft to real instructions.
6+
7+
Guides should be step-by-step instructions. Devs use them to complete a task.
8+
Doing, not learning. If you want to explain why, add notes to pages under "The
9+
Basics" (or add a new page there).
10+
11+
:::
12+
13+
This page should be a run-through of using the
14+
[`rnx-init`](https://github.com/microsoft/rnx-kit/issues/1263) command, but it
15+
hasn't been built yet. In the mean time, walk the reader through the manual
16+
steps that `rnx-init` will automate.
17+
18+
Start with dep-check init. This sets up a basic config and configures the
19+
dependency manager.
20+
21+
For App packages, create or update Metro/Babel config files. Metro:
22+
@rnx-kit/metro-config, @rnx-kit/metro-resolver-symlinks. Babel:
23+
@rnx-kit/babel-preset-metro-react-native.

‎docsite/docs/introduction.md

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# Introduction
2+
3+
React Native engineering is complicated, and the ecosystem changes quickly. The
4+
tools here are purpose-built to give you an exceptional developer experience,
5+
throughout the lifecycle of your React Native apps and libraries.
6+
7+
## Using the Tools
8+
9+
Adding tools to a project or monorepo isn't a linear journey, and it won't be
10+
the same for everyone. Each situation is different, and has its own unique
11+
challenges and requirements.
12+
13+
There are two paths you can follow: command-line interface, and á la carte.
14+
15+
### Command-Line Interface
16+
17+
The most convenient way to go is the
18+
[command-line interface](https://github.com/microsoft/rnx-kit/tree/main/packages/cli).
19+
It brings many of the tools together to perform common tasks, like bundling and
20+
dependency management. The CLI helps developers get things done from their
21+
terminal, and fits nicely into CI loops and package script blocks.
22+
23+
The CLI is controlled by command-line parameters and
24+
[package configuration](https://github.com/microsoft/rnx-kit/tree/main/packages/config).
25+
Command-line parameters are optional, but always take predecedence. Think of
26+
them as overrides. Package configuration is _also_ optional, though it is
27+
recommended. Configuration is how a package tells the CLI about itself. For
28+
example, a package can describe the options and paths to use during bundling.
29+
30+
```bash title='Example commands'
31+
$ yarn react-native rnx-bundle --platform windows --entry-path ./src/index.ts
32+
33+
$ yarn react-native rnx-start --project-root ./src
34+
35+
$ yarn react-native rnx-dep-check --vigilant 0.66
36+
```
37+
38+
### Á la carte
39+
40+
The tools are designed to be used individually, as well. Each has its own API,
41+
test suite, and change history. You can pick and choose the specific tools you
42+
need, and use them independently.
43+
44+
Tools come with How-To guides, API documentation, and examples. Some even have
45+
notes on architectural choices. Each tool is released individually, as features
46+
are added and fixes are made.
47+
48+
### Web
49+
50+
Many of these tools work with web projects, too! Some examples include the
51+
dependency manager and the plugins for Babel and ESLint.

‎docsite/docs/packages/overview.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Overview
2+
3+
:::danger Draft Content
4+
5+
This page needs to be converted from a draft to real content.
6+
7+
:::
8+
9+
This section documents each package. Reiterate the fact that packages are
10+
developed and tested to be used on their own, or as part of the CLI. Each
11+
package has documentation and usage info.
12+
13+
Mention normal packages vs. incubating packages, but don't list incubating
14+
packages here. They don't get first billing.

‎docsite/docs/packages/typescript-react-native-compiler.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# typescript-react-native-compiler
2+
3+
:::danger Draft Content
4+
5+
This page is a draft placeholder.
6+
7+
:::

‎docsite/docs/resources.md

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# Resources
2+
3+
:::danger Draft Content
4+
5+
This page needs to be converted from a draft to real content.
6+
7+
:::
8+
9+
## Talks, Podcasts, and Videos
10+
11+
- [React Native Live - Exploring rnx-kit with Adam Foxman](https://www.twitch.tv/videos/1415182376)
12+
- [React Native Radio episode 227 - Better React Native Tooling with Tommy Nguyen and Adam Foxman](https://reactnativeradio.com/episodes/rnr-227-better-react-native-tooling-with-tommy-nguyen-and-adam-foxman)
13+
- [React Native EU 2021: Improve all the repos – exploring Microsoft’s DevExp](https://www.react-native.eu/talks/lorenzo-sciandra-tommy-nguyen-improve-all-the-repos-exploring-microsofts-devexp)
14+
15+
## Social Media
16+
17+
RN@MS twitter. afoxman twitter/medium/discord.
18+
19+
## Community
20+
21+
rnx-kit discussions, react-native discussions, conference links (RNEU,
22+
ChainReact, AppJS, callstack conf), newsletter links.

‎docsite/docs/type-safety.mdx

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import useBaseUrl from "@docusaurus/useBaseUrl";
2+
3+
# Type Safety
4+
5+
## A Tale of Two Type Systems
6+
7+
React Native is built on JavaScript, which does not have a type system. This is
8+
a problem, because React Native is a large, complex platform. Without a type
9+
system, developers can't easily reason about the source code or use static
10+
analysis tools to find bugs.
11+
12+
When developers at Meta created React Native, they chose their own type system
13+
named [Flow](https://flow.org). Many open-source projects at Meta use Flow. It
14+
is part of their engineering system and culture. Flow is not used much outside
15+
of Meta.
16+
17+
The JavaScript community has largely embraced
18+
[TypeScript](https://www.typescriptlang.org). This includes the React Native
19+
developer community as well. React Native applications are written in
20+
TypeScript. Integrations with React Native -- plugins, presets, templates, etc
21+
-- are also written in TypeScript.
22+
23+
The tools in this project are written in TypeScript, too. Further, tools in this
24+
project which perform type-checking do so using the TypeScript language.
25+
26+
## Platform-Specific Code
27+
28+
React Native introduces the concept of
29+
[platform-specific extensions](https://reactnative.dev/docs/platform-specific-code#platform-specific-extensions)
30+
so that developers can write per-platform code in their applications.
31+
Platform-specific extensions require a specialized module resolver, capable of
32+
matching a module import to a file such as `<module>.ios.js` or
33+
`<module>.native.js`. Metro, the React Native bundler, has a resolver which
34+
supports this. TypeScript does not, making it impossible to properly type-check
35+
a specific platform, or get accurate Intellisense.
36+
37+
We are actively working with the TypeScript team to
38+
[expand the resolver](https://github.com/microsoft/TypeScript/pull/48189) to
39+
enable this scenario.
40+
41+
In the interim, we have a
42+
[drop-in replacement for `tsc` which supports React Native module resolution](/docs/packages/typescript-react-native-compiler).
43+
Developers can use it in lieu of direct support from TypeScript.
44+
45+
## Module Substitution
46+
47+
React Native is implemented on many platforms which span several NPM packages.
48+
`ios` and `android` implementations are in the `react-native` NPM package, which
49+
is maintained by Meta. `windows` is under `react-native-windows` and `macos` is
50+
under `react-native-macos`, both of which are maintained by Microsoft. `win32`
51+
is an Office-specific platform under `@office-iss/react-native-win32`.
52+
53+
`windows`, `macos`, and `win32` are all considered to be
54+
[out-of-tree platforms](https://microsoft.github.io/react-native-windows/docs/metro-config-out-tree-platforms)
55+
because they aren't part of the core `react-native` distribution. Each platform
56+
package is a complete implementation of React Native, and has (or should have)
57+
associated TypeScript types.
58+
59+
To avoid having "forked" references to the various NPM package names in code,
60+
developers are encouraged to always use `import 'react-native'`. Metro, the
61+
React Native bundler, substitutes 'react-native' with the target platform's
62+
out-of-tree NPM package. For MacOS, `import 'react-native'` becomes
63+
`import 'react-native-macos'`.
64+
65+
We are working with the TypeScript team to support a similar "module substution"
66+
mechanism for type-checking and IntelliSense. Emitted code should preserve the
67+
original module import.
68+
69+
TypeScript support is most beneficial when integrated with an editor like
70+
VSCode. Seeing platform-specific type-safety errors, during development, helps
71+
keep bugs out of the shared source tree.
72+
73+
This feature
74+
[continues to be a work in progress](https://github.com/microsoft/rnx-kit/issues/1273).
75+
76+
## Type-Safe Bundling
77+
78+
Metro, the React Native bundler, supports TypeScript source files, but it only
79+
transpiles them to JavaScript. Metro does not do any type-checking.
80+
81+
Our CLI combines Metro and TypeScript to solve this problem. Through
82+
configuration, you can enable type-checking while running the `rnx-bundle` and
83+
`rnx-start` commands. Warnings and errors from TypeScript appear on the console:
84+
85+
```typescript title="Unused function with missing type information"
86+
function foo(x) {
87+
return x + 2;
88+
}
89+
```
90+
91+
<img
92+
src={useBaseUrl("/img/type-safe-bundling-output.png")}
93+
alt="Image showing TypeScript errors. Foo is declared but never used. Parameter x implicitly has an 'any' type."
94+
width="700"
95+
/>
96+
97+
The [Bundling guide](/docs/guides/bundling) shows you how to enable type-safe
98+
bundling.

‎docsite/docusaurus.config.js

+38-14
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,17 @@ const mainReadmeUrl = githubUrl + "/#react-native-developer-tools";
1313
const mainBranchUrl = githubUrl + "/tree/main";
1414
const docsiteUrl = mainBranchUrl + "/docsite";
1515

16-
const title = "React Native Developer Tools";
17-
1816
/**
1917
* @typedef {ReturnType<import("@cmfcmf/docusaurus-search-local/lib/server").validateOptions>} SearchPluginOptions
2018
*/
2119

20+
const title1 = "React Native";
21+
const title2 = "Developer Tools";
22+
2223
/** @type {import('@docusaurus/types').Config} */
2324
const config = {
24-
title,
25-
tagline:
26-
"Helping developers build, deliver, and maintain React Native apps and libraries",
25+
title: title1 + " " + title2,
26+
tagline: "Modern, scalable tools. Exceptional developer experience.",
2727
url: "https://" + organizationName + ".github.io",
2828
baseUrl: "/" + projectName + "/",
2929
onBrokenLinks: "throw",
@@ -32,6 +32,11 @@ const config = {
3232
organizationName,
3333
projectName,
3434

35+
customFields: {
36+
title1,
37+
title2,
38+
},
39+
3540
plugins: [
3641
[
3742
require.resolve("@cmfcmf/docusaurus-search-local"),
@@ -50,7 +55,7 @@ const config = {
5055
indexDocSidebarParentCategories: 0,
5156

5257
// whether to index blog pages
53-
indexBlog: true,
58+
indexBlog: false,
5459

5560
// whether to index static pages
5661
// /404.html is never indexed
@@ -77,10 +82,6 @@ const config = {
7782
sidebarPath: require.resolve("./sidebars.js"),
7883
editUrl: docsiteUrl + "/",
7984
},
80-
blog: {
81-
showReadingTime: true,
82-
editUrl: docsiteUrl + "/",
83-
},
8485
theme: {
8586
customCss: require.resolve("./src/css/custom.css"),
8687
},
@@ -100,11 +101,34 @@ const config = {
100101
items: [
101102
{
102103
type: "doc",
103-
docId: "docs",
104+
docId: "introduction",
104105
position: "right",
105106
label: "Docs",
106107
},
107-
{ to: "/blog", label: "Blog", position: "right" },
108+
{
109+
type: "doc",
110+
docId: "packages/overview",
111+
position: "right",
112+
label: "Tools",
113+
},
114+
{
115+
type: "doc",
116+
docId: "architecture/overview",
117+
position: "right",
118+
label: "Architecture",
119+
},
120+
{
121+
type: "doc",
122+
docId: "resources",
123+
position: "right",
124+
label: "Resources",
125+
},
126+
{
127+
type: "doc",
128+
docId: "contributing",
129+
position: "right",
130+
label: "Contributing",
131+
},
108132
{
109133
src: "img/github-logo.svg",
110134
href: mainReadmeUrl,
@@ -115,9 +139,9 @@ const config = {
115139
],
116140
},
117141
footer: {
118-
style: "dark",
119142
logo: {
120-
src: "img/Microsoft-Open-Source-logo.svg",
143+
src: "img/msoss-light.png",
144+
srcDark: "img/msoss-dark.png",
121145
alt: "Microsoft Open Source logo",
122146
href: "https://opensource.microsoft.com",
123147
},

‎docsite/sidebars.js

+27-2
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,33 @@ const sidebars = {
1616
docsSidebar: [
1717
{
1818
type: "category",
19-
label: "Docs",
20-
items: ["docs"],
19+
label: "The Basics",
20+
items: ["introduction", "dependencies", "type-safety"],
21+
},
22+
{
23+
type: "category",
24+
label: "Guides",
25+
items: [
26+
"guides/getting-started",
27+
"guides/dependency-management",
28+
"guides/bundling",
29+
],
30+
},
31+
],
32+
33+
toolsSidebar: [
34+
{
35+
type: "category",
36+
label: "Tools",
37+
items: ["packages/overview", "packages/typescript-react-native-compiler"],
38+
},
39+
],
40+
41+
architectureSidebar: [
42+
{
43+
type: "category",
44+
label: "Architecture",
45+
items: ["architecture/overview", "architecture/dependency-management"],
2146
},
2247
],
2348
};

‎docsite/src/components/HomepageFeatures.module.css

+18-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
.features {
22
display: flex;
33
align-items: center;
4-
padding: 2rem 0;
4+
padding: 3rem 0;
55
width: 100%;
66
}
77

88
.featureSvg {
9-
height: 120px;
9+
height: 100px;
1010
opacity: 0.85;
1111
}
1212

@@ -19,3 +19,19 @@ html[data-theme="dark"] .featureSvg {
1919
color: var(--ifm-color-primary);
2020
font-size: calc(var(--ifm-h3-font-size) * 0.97);
2121
}
22+
23+
@media screen and (max-width: 996px) {
24+
.features {
25+
padding: 1rem 0;
26+
}
27+
28+
.featureSvg {
29+
height: 70px;
30+
}
31+
}
32+
33+
@media screen and (max-width: 696px) {
34+
.featureSvg {
35+
height: 55px;
36+
}
37+
}

‎docsite/src/components/HomepageFeatures.tsx

+7-6
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,21 @@ const FeatureList: FeatureItem[] = [
1515
image: "/img/code-pull-request.svg",
1616
description: [
1717
<p key="dev1">
18-
Every tool is <strong>purpose-built</strong> to make your React Native
19-
developer experience better. Simple, efficient tools make all the
20-
difference.
18+
<strong>Purpose-built</strong> for React Native engineers. Focused on
19+
developer experience. Designed to fit into <em>any</em> project, no
20+
matter how large or complex.
2121
</p>,
22+
<p key="dev2">Great tools make all the difference.</p>,
2223
],
2324
},
2425
{
2526
title: "Community first.",
2627
image: "/img/user-gear.svg",
2728
description: [
2829
<p key="com1">
29-
Created as a <strong>GitHub-first</strong> project for the React Native
30-
community. Integrated with tools you already use: Metro, TypeScript,
31-
Jest, and more.
30+
Created as a <strong>GitHub-first</strong> repository for the React
31+
Native community. Integrated with tools you already use: Metro,
32+
TypeScript, Jest, and more.
3233
</p>,
3334
<p key="com2">
3435
Join in! Your contributions are <em>always</em> welcome.

‎docsite/src/css/custom.css

+6
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
--background-surface-color-rgb: 255, 255, 255;
1212
--color-primary-rgb: 14, 83, 189;
1313
--font-color-base-rgb: 28, 30, 33;
14+
--footer-background-color-rgb: 235, 235, 235;
1415
--hover-overlay-rgb: 0, 0, 0;
1516
--hover-overlay-alpha: 0.15;
1617
--github-mark-bg: url("../../static/img/github-logo.svg");
@@ -44,6 +45,8 @@
4445
--ifm-navbar-item-padding-vertical: 4px;
4546
--ifm-navbar-item-padding-horizontal: 18px;
4647

48+
--ifm-footer-background-color: rgb(var(--footer-background-color-rgb));
49+
4750
--ifm-transition-fast: 100ms;
4851
--ifm-transition-slow: 300ms;
4952

@@ -101,6 +104,7 @@ html[data-theme="dark"] {
101104
--background-surface-color-rgb: 36, 37, 38;
102105
--color-primary-rgb: 14, 147, 253;
103106
--font-color-base-rgb: 245, 246, 247;
107+
--footer-background-color-rgb: 20, 21, 22;
104108
--hover-overlay-rgb: 255, 255, 255;
105109

106110
/* Infima vars */
@@ -119,6 +123,8 @@ html[data-theme="dark"] {
119123
var(--hover-overlay-rgb),
120124
var(--hover-overlay-alpha)
121125
);
126+
127+
--ifm-footer-background-color: rgb(var(--footer-background-color-rgb));
122128
}
123129

124130
body[data-theme="dark"] {

‎docsite/src/pages/index.module.css

+44-9
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,56 @@
33
* and scoped locally.
44
*/
55

6-
.heroBanner {
7-
padding: 4rem 0;
6+
.headerBanner {
7+
padding: 3rem 0;
88
text-align: center;
99
position: relative;
1010
overflow: hidden;
1111
}
1212

13-
@media screen and (max-width: 966px) {
14-
.heroBanner {
15-
padding: 2rem;
13+
.headerTitle {
14+
color: var(--ifm-font-color-base);
15+
font-weight: 800;
16+
font-size: 100px;
17+
line-height: 1;
18+
}
19+
20+
.headerTagline {
21+
color: var(--ifm-font-color-base);
22+
font-size: 26px;
23+
}
24+
25+
.headerButton,
26+
.headerLink {
27+
margin-top: 0.5rem;
28+
}
29+
30+
.headerLink:after {
31+
content: "›";
32+
font-size: 20px;
33+
margin-left: 4px;
34+
}
35+
36+
.headerLink:hover {
37+
color: var(--ifm-color-primary-lighter);
38+
}
39+
40+
@media screen and (max-width: 996px) {
41+
.headerTitle {
42+
font-size: 70px;
43+
}
44+
45+
.headerTagline {
46+
font-size: 22px;
1647
}
1748
}
1849

19-
.buttons {
20-
display: flex;
21-
align-items: center;
22-
justify-content: center;
50+
@media screen and (max-width: 696px) {
51+
.headerTitle {
52+
font-size: 40px;
53+
}
54+
55+
.headerTagline {
56+
font-size: 16px;
57+
}
2358
}

‎docsite/src/pages/index.tsx

+28-4
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,38 @@ import HomepageFeatures from "../components/HomepageFeatures";
99
function HomepageHeader() {
1010
const { siteConfig } = useDocusaurusContext();
1111
return (
12-
<header className={clsx("hero hero--primary", styles.heroBanner)}>
12+
<header className={styles.headerBanner}>
1313
<div className="container">
14-
<h1 className="hero__title">{siteConfig.title}</h1>
15-
<p className="hero__subtitle">{siteConfig.tagline}</p>
14+
<h1 className={clsx("hero__title", styles.headerTitle)}>
15+
<div className={clsx(styles.headerTitleText)}>
16+
{siteConfig.customFields.title1}
17+
</div>
18+
<div className={clsx(styles.headerTitleText)}>
19+
{siteConfig.customFields.title2}
20+
</div>
21+
</h1>
22+
<p className={clsx("hero__subtitle", styles.headerTagline)}>
23+
{siteConfig.tagline}
24+
</p>
1625
<div className={styles.buttons}>
17-
<Link className="button button--secondary button--lg" to="/docs/docs">
26+
<Link
27+
className={clsx(
28+
"button button--primary button--lg",
29+
styles.headerButton
30+
)}
31+
to="/docs/guides/getting-started"
32+
>
1833
Get Started
1934
</Link>
35+
<Link
36+
className={clsx(
37+
"button button--link button--lg",
38+
styles.headerLink
39+
)}
40+
to="/docs/introduction"
41+
>
42+
Learn the Basics
43+
</Link>
2044
</div>
2145
</div>
2246
</header>

‎docsite/static/img/Microsoft-Open-Source-logo.svg

-85
This file was deleted.

‎docsite/static/img/msoss-dark.png

40.7 KB
Loading

‎docsite/static/img/msoss-light.png

43.4 KB
Loading

‎docsite/static/img/type-safe-bundling-output.png

82.2 KB
Loading

0 commit comments

Comments
 (0)
Please sign in to comment.