From dbd457c403bc4e79abe78dedc9a67e191110067b Mon Sep 17 00:00:00 2001 From: Rob Baird Date: Mon, 24 Dec 2018 01:54:35 -0500 Subject: [PATCH] Fixed typos in documentation and comments (#918) --- CONTRIBUTING.md | 5 +++-- README.md | 2 +- ROADMAP.md | 4 ++-- docs/components.md | 10 +++++----- docs/concepts.md | 10 +++++----- docs/config.md | 8 ++++---- docs/node-api.md | 2 +- docs/plugins/README.md | 6 +++--- packages/react-static/src/commands/bundle.js | 2 +- packages/react-static/src/commands/create.js | 2 +- packages/react-static/src/static/exportRoute.js | 2 +- 11 files changed, 27 insertions(+), 26 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index b9be502c7..1b47b7bbf 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -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 \ No newline at end of file + - `yarn startDocs` - Starts the documentation site in development mode + \ No newline at end of file diff --git a/README.md b/README.md index 298ba827b..b7990b628 100644 --- a/README.md +++ b/README.md @@ -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. diff --git a/ROADMAP.md b/ROADMAP.md index 2c7f11822..85a377507 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -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 diff --git a/docs/components.md b/docs/components.md index 4f0e0cd3d..fcf7673a3 100644 --- a/docs/components.md +++ b/docs/components.md @@ -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: diff --git a/docs/concepts.md b/docs/concepts.md index 9acefec9f..49d03082d 100644 --- a/docs/concepts.md +++ b/docs/concepts.md @@ -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. diff --git a/docs/config.md b/docs/config.md index c3a773f3b..5d6175ed8 100644 --- a/docs/config.md +++ b/docs/config.md @@ -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. diff --git a/docs/node-api.md b/docs/node-api.md index b3dbd317a..08b1e36fc 100644 --- a/docs/node-api.md +++ b/docs/node-api.md @@ -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 diff --git a/docs/plugins/README.md b/docs/plugins/README.md index 3f6e6ad68..32b920374 100644 --- a/docs/plugins/README.md +++ b/docs/plugins/README.md @@ -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 diff --git a/packages/react-static/src/commands/bundle.js b/packages/react-static/src/commands/bundle.js index c619b5e4c..06440c627 100644 --- a/packages/react-static/src/commands/bundle.js +++ b/packages/react-static/src/commands/bundle.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('') } diff --git a/packages/react-static/src/commands/create.js b/packages/react-static/src/commands/create.js index eb51f7835..427c12396 100644 --- a/packages/react-static/src/commands/create.js +++ b/packages/react-static/src/commands/create.js @@ -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({ diff --git a/packages/react-static/src/static/exportRoute.js b/packages/react-static/src/static/exportRoute.js index 721c89d6b..ac9041e14 100644 --- a/packages/react-static/src/static/exportRoute.js +++ b/packages/react-static/src/static/exportRoute.js @@ -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') {