Changed all occurrences of etc to match (vercel#34280)

The [correct](https://www.grammarly.com/blog/et-cetera-etc/) way to use et cetera is to put a period right after and a comma behind it if it's being used as a list. I updated the occurrences in the docs and examples that didn't match these rules.

docs/advanced-features/measuring-performance.md

@@ -159,7 +159,7 @@ export function reportWebVitals(metric) {
 
 > **Note**: If you use [Google Analytics](https://analytics.google.com/analytics/web/), using the
 > `id` value can allow you to construct metric distributions manually (to calculate percentiles,
-> etc...).
+> etc.)
 >
 > ```js
 > export function reportWebVitals({ id, name, label, value }) {

docs/basic-features/layouts.md

@@ -86,7 +86,7 @@ export default function MyApp({ Component, pageProps }) {
 }
 ```
 
-When navigating between pages, we want to *persist* page state (input values, scroll position, etc) for a Single-Page Application (SPA) experience.
+When navigating between pages, we want to *persist* page state (input values, scroll position, etc.) for a Single-Page Application (SPA) experience.
 
 This layout pattern enables state persistence because the React component tree is maintained between page transitions. With the component tree, React can understand which elements have changed to preserve state.
 

docs/guides/building-forms.md

@@ -49,7 +49,7 @@ Though both of these types are equally important, this guide will focus on clien
 
 Client-side validation is further categorized as:
 
-- **Built-in**: Uses HTML-based attributes like `required`, `type`, `minLength`, `maxLength`, `pattern` etc.
+- **Built-in**: Uses HTML-based attributes like `required`, `type`, `minLength`, `maxLength`, `pattern`, etc.
 - **JavaScript-based**: Validation that's coded with JavaScript.
 
 ### Built-in Form Validation Using `required`, `type`, `minLength`, `maxLength`

docs/migrating/from-gatsby.md

@@ -217,7 +217,7 @@ export default function Home() {
 
 ## Site Configuration
 
-With Gatsby, your site's metadata (name, description, etc) is located inside `gatsby-config.js`. This is then exposed through the GraphQL API and consumed through a `pageQuery` or a static query inside a component.
+With Gatsby, your site's metadata (name, description, etc.) is located inside `gatsby-config.js`. This is then exposed through the GraphQL API and consumed through a `pageQuery` or a static query inside a component.
 
 With Next.js, we recommend creating a config file similar to below. You can then import this file anywhere without having to use GraphQL to access your site's metadata.
 

errors/css-npm.md

@@ -24,4 +24,4 @@ know the correct behavior:
 - Should the file be consumed as Global CSS or CSS Modules?
 - If Global, in what order does the file need to be injected?
 - If Modules, what are the emitted class names? As-is, camel-case, snake case?
-- Etc...
+- Etc.

examples/custom-server-actionhero/README.md

@@ -80,7 +80,7 @@ module.exports = class CreateChatRoom extends Action {
 }
 ```
 
-3. Tell ActionHero to use the api rather than the file server as the top-level route in `api.config.servers.web.rootEndpointType = 'api'`. This will allows "/" to listen to API requests. Also update `api.config.general.paths.public = [ path.join(__dirname, '/../static') ]`. In this configuration, the next 'static' renderer will take priority over the ActionHero 'public file' api. Note that any static assets (CSS, fonts, etc) will need to be in "./static" rather than "./public".
+3. Tell ActionHero to use the api rather than the file server as the top-level route in `api.config.servers.web.rootEndpointType = 'api'`. This will allows "/" to listen to API requests. Also update `api.config.general.paths.public = [ path.join(__dirname, '/../static') ]`. In this configuration, the next 'static' renderer will take priority over the ActionHero 'public file' api. Note that any static assets (CSS, fonts, etc.) will need to be in "./static" rather than "./public".
 
 Note that this is where the websocket server, if you enable it, will place the `ActionheroWebsocketClient` library.<br>
 

examples/layout-component/pages/about.js

@@ -13,7 +13,7 @@ export default function About() {
       </p>
       <p>
         When navigating between pages, we want to persist page state (input
-        values, scroll position, etc) for a Single-Page Application (SPA)
+        values, scroll position, etc.) for a Single-Page Application (SPA)
         experience.
       </p>
       <p>

examples/layout-component/pages/contact.js

@@ -13,7 +13,7 @@ export default function Contact() {
       </p>
       <p>
         When navigating between pages, we want to persist page state (input
-        values, scroll position, etc) for a Single-Page Application (SPA)
+        values, scroll position, etc.) for a Single-Page Application (SPA)
         experience.
       </p>
       <p>

examples/with-stencil/packages/test-component/readme.md

@@ -57,16 +57,16 @@ Instead, use a prefix that fits your company or any name for a group of related
 
 - [Publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages)
 - Put a script tag similar to this `<script src='https://unpkg.com/[email protected]/dist/mycomponent.js'></script>` in the head of your index.html
-- Then you can use the element anywhere in your template, JSX, html etc
+- Then you can use the element anywhere in your template, JSX, html, etc.
 
 ### Node Modules
 
 - Run `npm install my-component`
 - Put a script tag similar to this `<script src='node_modules/my-component/dist/mycomponent.js'></script>` in the head of your index.html
-- Then you can use the element anywhere in your template, JSX, html etc
+- Then you can use the element anywhere in your template, JSX, html, etc.
 
 ### In a stencil-starter app
 
 - Run `npm install my-component`
 - Add an import to the npm packages `import my-component;`
-- Then you can use the element anywhere in your template, JSX, html etc
+- Then you can use the element anywhere in your template, JSX, html, etc.

packages/next/cli/next-dev.ts

@@ -34,7 +34,7 @@ const nextDev: cliCommand = (argv) => {
     console.log(`
       Description
         Starts the application in development mode (hot-code reloading, error
-        reporting, etc)
+        reporting, etc.)
 
       Usage
         $ next dev <dir> -p <port number>