Skip to content
Permalink
Browse files

Fixed typos in documentation and comments (#918)

  • Loading branch information...
robertrbairdii authored and tannerlinsley committed Dec 24, 2018
1 parent 5a7e730 commit dbd457c403bc4e79abe78dedc9a67e191110067b
@@ -6,7 +6,7 @@ We're stoked that you want to help contribute to React Static! Below are a numbe
- Add a site you've built with React Static to our site list in the Readme
- Write a quick article about your experience with React Static and what you enjoyed/disliked?
- Help us write more tests!
- Help us improve our documentation or codebase! You can submit PR's for anything from typos to code comments explaining what a part of the source code does.
- Help us improve our documentation or codebase! You can submit PRs for anything from typos to code comments explaining what a part of the source code does.
- Help others in our [Spectrum Support Community](https://spectrum.chat/react-static)
- Review and help fix [issues](https://github.com/nozzle/react-static/issues)

@@ -20,4 +20,5 @@ We're stoked that you want to help contribute to React Static! Below are a numbe
- `yarn watch` - Watches the core packages for changes and compiles them for development
- `yarn build` - Builds all packages for release
- `yarn test` - Runs the testing suite for all packages
- `yarn startDocs` - Starts the documentation site in development mode
- `yarn startDocs` - Starts the documentation site in development mode

@@ -23,7 +23,7 @@ React-Static is a fast, lightweight, and powerful framework for building static-
- 🚚 Data Agnostic. Supply your site with data from anywhere, **however you want**.
- βœ‚οΈ Automatic code and data splitting!
- πŸ’₯ Instant page views via [PRPL](https://developers.google.com/web/fundamentals/performance/prpl-pattern/) pattern.
- β˜”οΈ Progressive Enchancement + Graceful Fallbacks
- β˜”οΈ Progressive Enhancement + Graceful Fallbacks
- 🎯 **SEO** Friendly.
- πŸ₯‡ React-first developer experience.
- 😌 Painless project setup & migration.
@@ -18,12 +18,12 @@ Version 6 is a massive upgrade to the underlying tools that power react-static a
Version 7 will be focused on upgrading to React Hooks and preparing for some very lightweight suspense-compatibility:

- Moving to hooks to power client components
- Retrofitting render prop and hoc's to use the new hooks
- Retrofitting render prop and HOCs to use the new hooks
- Optionally allowing hooks to be suspense compatible (throw promises and suspend rendering, instead of providing loading states)

## V8

Version 8 will be focused on becoming compatible with async React which includes both suspense and the expected async server-side-renderer that has yet to be released. The goals for this version may included:
Version 8 will be focused on becoming compatible with async React which includes both suspense and the expected async server-side-renderer that has yet to be released. The goals for this version may include:

- Rely on suspense and a runtime cache to do just-in-time data fetching
- Remove the requirement to define data dependencies in a config file
@@ -55,7 +55,7 @@ export default () => (

### `RouteData`

`RouteData` and it's companion HOC `withRouteData` are what provide a component with the results of the currently matched route's `getData` function as defined in your `static.config.js`.
`RouteData` and its companion HOC `withRouteData` are what provide a component with the results of the currently matched route's `getData` function as defined in your `static.config.js`.

Props

@@ -65,8 +65,8 @@ Props

Render Props

- Any props that you passed in it's corresponding route's `getData` method.
- `is404: boolean` - Will be set to `true` if the page requests results in a 404. This is useful for runtime 404's where the url of the page may remain what the user requested, but the route is not found.
- Any props that you passed in its corresponding route's `getData` method.
- `is404: boolean` - Will be set to `true` if the page requests results in a 404. This is useful for runtime 404s where the url of the page may remain what the user requested, but the route is not found.

Here is a an example show all of the different syntaxes you can use:

@@ -123,7 +123,7 @@ export default withRouteData(({ songs }) => (

### `SiteData`

`SiteData` and it's companion HOC `withSiteData` are what provide a component with the results of the `getSiteData` function as defined in your `static.config.js`.
`SiteData` and its companion HOC `withSiteData` are what provide a component with the results of the `getSiteData` function as defined in your `static.config.js`.

**static.config.js**

@@ -236,7 +236,7 @@ export () => (

### `Prefetch`

Prefetch is a react component that can prefetch the assets for a given route when visibly rendered in the viewport. When it's content or element are visible in the viewport, the template and data required to render the path in the `path` prop will be prefetched. This increases the chance that if the user then navigates to that route, they will not have to wait for the required data to load. You can also force the prefetch to happen even if the element is outside the viewport via the `force` prop.
Prefetch is a react component that can prefetch the assets for a given route when visibly rendered in the viewport. When its content or element are visible in the viewport, the template and data required to render the path in the `path` prop will be prefetched. This increases the chance that if the user then navigates to that route, they will not have to wait for the required data to load. You can also force the prefetch to happen even if the element is outside the viewport via the `force` prop.

Props:

@@ -24,7 +24,7 @@ React-Static is different from most React-based static-site generators. It follo

### Dev Stage

1. **All of the data your site needs to render** is gathered up-front in your `static.config.js` by any means you want. This data can come from markdown files, headless CMS's, graphql endpoints, etc.
1. **All of the data your site needs to render** is gathered up-front in your `static.config.js` by any means you want. This data can come from markdown files, headless CMSs, graphql endpoints, etc.
2. Using your data, you define or generate **static route** for your site and supply the appropriate data to each one.
3. Simultaneously, you provide each route with the component that should be used to render it.
4. Using React-Static's components like `RouteProps` and `SiteProps` you can access the data for each route and use it to render your site! You can also use HOC versions of those components if you wish.
@@ -47,7 +47,7 @@ React-Static is different from most React-based static-site generators. It follo

### Existing Templates

The following templates contain the bare-minimum for each css approach to function properly with server-side rendering. You can start with these templates using the `react-static create` CLI command, or transfer the logic to an existin project (pay close attention to the `static.config.js` file if that is the case).
The following templates contain the bare-minimum for each css approach to function properly with server-side rendering. You can start with these templates using the `react-static create` CLI command, or transfer the logic to an existing project (pay close attention to the `static.config.js` file if that is the case).

- [emotion](https://github.com/nozzle/react-static/tree/master/examples/emotion)
- [styled-components](https://github.com/nozzle/react-static/tree/master/examples/styled-components)
@@ -166,7 +166,7 @@ A content management system (CMS) can greatly increase your ability to organize

# Rebuilding your site with Webhooks

If you choose to use a CMS, you're probably going to ask yourself, "How will my site rebuild when content in my CMS changes?" The answer is **webhooks**! Most if not all modern CMS's provide webhooks. These are simply URL's that get pinged when something changes in the CMS. These could be any URL, but are used most productively when they are hooked up to a continuous integration or hosting service to achieve automatic rebuilds when anything in your CMS changes.
If you choose to use a CMS, you're probably going to ask yourself, "How will my site rebuild when content in my CMS changes?" The answer is **webhooks**! Most if not all modern CMSs provide webhooks. These are simply URLs that get pinged when something changes in the CMS. These could be any URL, but are used most productively when they are hooked up to a continuous integration or hosting service to achieve automatic rebuilds when anything in your CMS changes.

Examples:

@@ -176,7 +176,7 @@ Examples:

# 404 Handling

Making a 404 page in React Static **is required** and extremely simple. Either (1) place a `404.js` file in the `pages` directory, or (2) define a route where `pathL '404'` and a `component` path to render that route. At both build-time and runtime, the rendered result of this `component` will be used for any routes that are not found. Most static-site servers also default to use the `/404.html` page when a static route cannot be found.
Making a 404 page in React Static **is required** and extremely simple. Either (1) place a `404.js` file in the `pages` directory, or (2) define a route where `path: '404'` and a `component` path to render that route. At both build-time and runtime, the rendered result of this `component` will be used for any routes that are not found. Most static-site servers also default to use the `/404.html` page when a static route cannot be found.

# Non-Static Routing

@@ -301,7 +301,7 @@ function makePageRoutes({
}
```

To explain what is happening above, we are making an array of `10` posts for every page, including the first page of the blog. Each of these array's will be fed to the same `src/containers/Blog` component, but will be given a `.../page/2` or whatever number corresponds to that page of data. Since only the posts needed for that page are passed, we avoid duplicated data per page!
To explain what is happening above, we are making an array of `10` posts for every page, including the first page of the blog. Each of these arrays will be fed to the same `src/containers/Blog` component, but will be given a `.../page/2` or whatever number corresponds to that page of data. Since only the posts needed for that page are passed, we avoid duplicated data per page!

Of course, you're free to build your pagination routes however you'd like! This is just one possible solution.

@@ -28,7 +28,7 @@ A `static.config.js` file is optional, but recommended at your project root to u

### `getRoutes`

An asynchronous function that should resolve an array of [**route**](#route) objects. You'll probably want to use this function to request any dynamic data or information that is needed to build all of the routes for your site. It is also passed an object containing a `dev` boolean indicating whether its being run in a production build or not.
An asynchronous function that should resolve an array of [**route**](#route) objects. You'll probably want to use this function to request any dynamic data or information that is needed to build all of the routes for your site. It is also passed an object containing a `dev` boolean indicating whether it's being run in a production build or not.

```javascript
// static.config.js
@@ -396,7 +396,7 @@ export default {

### `minLoadTime`

An optional `Number` of milliseconds to show the loading spinner when templates, siteData or routeData are not immediately available. If you are preloading aggressively, you shouldn't see a loader at all, but if a loader is shown, 's a good user experience to make is as un-flashy as possible.
An optional `Number` of milliseconds to show the loading spinner when templates, siteData or routeData are not immediately available. If you are preloading aggressively, you shouldn't see a loader at all, but if a loader is shown, it's a good user experience to make is as un-flashy as possible.

```javascript
// static.config.js
@@ -418,7 +418,7 @@ export default {

### `babelExcludes`

We are running Babel seperatly for your own sources and externals. The Babel configuration for your own sources can be manipulated the normal way. The one for `node_modules` can not, since its a bit special. We try to compile them with a bare minimum, but sometimes some modules gives you trouble (e.g. [mapbox-gl](https://github.com/mapbox/mapbox-gl-js/issues/3422))
We are running Babel seperately for your own sources and externals. The Babel configuration for your own sources can be manipulated the normal way. The one for `node_modules` can not, since it's a bit special. We try to compile them with a bare minimum, but sometimes some modules gives you trouble (e.g. [mapbox-gl](https://github.com/mapbox/mapbox-gl-js/issues/3422))
This option gives you the ability to exclude some modules from babelifying.
See https://webpack.js.org/configuration/module/#condition for more details. To exclude e.g. `mapboxgl` simply pass the following

@@ -433,7 +433,7 @@ export default {

## Plugin Api

React Static has tons of other customization possibilities available through the Plugin system that are not possible through the configuration file. Some of thse include:
React Static has tons of other customization possibilities available through the Plugin system that are not possible through the configuration file. Some of these include:

- Webpack customizations
- Rendering pipeline customizations and transformations for React components, elements, the Document wrapper, etc.
@@ -22,7 +22,7 @@ import { create, start, build } from 'react-static/node'
Creates a new react-static project.

- Arguments
- `name: string` - The name of your new project (relative to the current-working directory), or the full path to the new directory you wish to create
- `name: string` - The name of your new project (relative to the current working directory), or the full path to the new directory you wish to create
- `location: string`
- The name of the template in the `examples` directory
- The full URL of a public git repository
@@ -21,7 +21,7 @@ There are 3 ways to install plugins and use the plugin API:

- **NPM**. You can install any react-static compatible plugin via `npm`. Once it is installed, it can be used by React Static.
- **Locally via the `/plugins` directory** - If you have a custom plugin or are developing a plugin locally, you can place your plugin directory in the `/plugins` directory in your project root. It can then be used by React Static.
- **Locally via the `/node.api.js` and `/browser.api.js` project files** - If you simply need the plugin API to customize something local to your project, you can create a `node.api.js` and/or `browser.api.js` file in the root of your project. These files are treated just like plugin's themselves, but do not receive plugin options and are executed last in the plugin cycle.
- **Locally via the `/node.api.js` and `/browser.api.js` project files** - If you simply need the plugin API to customize something local to your project, you can create a `node.api.js` and/or `browser.api.js` file in the root of your project. These files are treated just like plugins themselves, but do not receive plugin options and are executed last in the plugin cycle.

## Using Plugins

@@ -83,10 +83,10 @@ We use separate entry points for node and browser context so as to not create co
To use either API, the corresponding file must:

- Provide a `function` as the `default export`
- That function recieves **plugin options from the user (optional)**
- That function receives **plugin options from the user (optional)**
- **Return an `object`** providing any **API methods** to implement

Here is an **pseudo** example of what a plugin typically looks like:
Here is a **pseudo** example of what a plugin typically looks like:

```javascript
// node.api.js or browser.api.js
@@ -41,7 +41,7 @@ export default (async function bundle({

if (!config.siteRoot) {
console.log(
"=> Info: No 'siteRoot' is defined in 'static.config.js'. This is suggested for absolute url's and a sitemap.xml to be automatically generated."
"=> Info: No 'siteRoot' is defined in 'static.config.js'. This is suggested for absolute urls and a sitemap.xml to be automatically generated."
)
console.log('')
}
@@ -33,7 +33,7 @@ export default (async function create({ name, template, isCLI }) {
// prompt if --name argument is not passed from CLI
// warning: since name will be set as a function by commander by default
// unless it's assigned as an argument from the CLI, we can't simply just
// check for it's existence. if it's not been set by the CLI, we properly
// check for its existence. if it has not been set by the CLI, we properly
// set it to null for later conditional checks.
if (isCLI && !name) {
const answers = await inquirer.prompt({
@@ -227,7 +227,7 @@ export default (async function exportRoute({
)
html = await beforeDocumentToFile(html, { meta: renderMeta })

// If the siteRoot is set and we're not in staging, prefix all absolute URL's
// If the siteRoot is set and we're not in staging, prefix all absolute URLs
// with the siteRoot
const publicPath = makePathAbsolute(process.env.REACT_STATIC_PUBLIC_PATH)
if (process.env.REACT_STATIC_DISABLE_ROUTE_PREFIXING !== 'true') {

0 comments on commit dbd457c

Please sign in to comment.
You can’t perform that action at this time.