Merge branch 'staging' into develop

Author: gregrickaby

.env.sample

@@ -1,10 +1,35 @@
+# Tells next.js we're in development mode
 VERCEL_ENV="development"
+
+# Allows node to work with local self-signed certificates.
 NODE_TLS_REJECT_UNAUTHORIZED="0"
+
+# Your local WordPress URL.
 LOCAL_WORDPRESS_API_URL="https://nextjswp.test/"
-PROD_WORDPRESS_API_URL="https://myproductionwordpress.com/"
+
+# Your development WordPress URL.
+DEV_WORDPRESS_API_URL="https://devwordpress.com"
+
+# Your staging WordPress URL.
+STAGING_WORDPRESS_API_URL="https://stagingwordpress.com/"
+
+# Your production WordPress URL.
+PROD_WORDPRESS_API_URL="https://productionwordpress.com/"
+
+# This needs to match PREVIEW_SECRET_TOKEN constant in wp-config.php. It can be any random string.
 WORDPRESS_PREVIEW_SECRET="ANY_RANDOM_STRING_SEE_README"
+
+# Your WordPress username.
 WORDPRESS_APPLICATION_USERNAME="YOUR_WORDPRESS_USERNAME"
+
+# Your WordPress application password. Requires WordPress 5.6 and above. See https://make.wordpress.org/core/2020/11/05/application-passwords-integration-guide/
 WORDPRESS_APPLICATION_PASSWORD="YOUR_GENERATED_APPLICATION_PASSWORD"
+
+# Your Algolia index name.
 NEXT_PUBLIC_LOCAL_ALGOLIA_INDEX_NAME="YOUR_ALGOLIA_INDEX_NAME"
+
+# Your Algolia application ID.
 NEXT_PUBLIC_ALGOLIA_APPLICATION_ID="YOUR_ALGOLIA_APP_ID"
+
+# Your Algolia search only key.
 NEXT_PUBLIC_ALGOLIA_SEARCH_ONLY_KEY="YOUR_ALGOLIA_SEARCH_ONLY_KEY"

.github/CONTRIBUTING.md

@@ -1,18 +1,72 @@
-Thanks for contributing — you rock! 🤘
+# Thanks for contributing — you rock! 🤘 <!-- omit in toc -->
 
-## Maintainers
+- [Development](#development)
+  - [Git Workflow](#git-workflow)
+  - [Deployments](#deployments)
+  - [Storybook](#storybook)
+- [Coding standards](#coding-standards)
+  - [Tips to help your PR get approved](#tips-to-help-your-pr-get-approved)
+- [Submitting bug reports and feature requests](#submitting-bug-reports-and-feature-requests)
 
-This repo is maintained by [WebDevStudios](https://webdevstudios.com).
+## Development
 
-## Submitting issues
+### Git Workflow
 
-Before submitting your issue, make sure it has not been discussed earlier. You can search for existing tickets [here](https://github.com/WebDevStudios/nextjs-wordpress-starter/issues).
+1. Create a `feature` branch off `staging`
+2. Work locally adhereing to coding standards
+3. When ready, open a draft Pull Request on Github
+4. When finished, fill out the PR template and publish your PR
+5. Your PR must pass assertions and deploy successfully
+6. After peer review, the PR will be merged back into `staging`
+7. Repeat ♻️
 
-## Contributing code
+### Deployments
 
-Found a bug you can fix? Fantastic! Patches are always welcome. Here's a few tips for crafting a great pull request:
+[Vercel](https://nextjs-wordpress-starter-gregrickaby.webdevstudios.vercel.app) is connected to this Github repository and will automatically build and deploy. Learn more about [Vercel + Github integration](https://vercel.com/docs/git/vercel-for-github).
 
-- Include the purpose of your PR. Be explicit about the issue your PR solves. Fill out the Pull Request template completely.
-- Reference any existing issues that relate to your PR. This allows everyone to easily see all related discussions.
+### Storybook
 
-By contributing code to Kindergarten Flashcards, you grant its use under the [GNU General Public License v2 (or later)](LICENSE).
+To work with Storybook on your Local, run the following command:
+
+```bash
+yarn storybook
+```
+
+Stories are written in `.mdx` and should be placed next to the component. Learn more about [Storybook](https://storybook.js.org/).
+
+## Coding standards
+
+Pull requests _must pass_ all assertions and component changes will be reviewed in Chromatic prior to consideration.
+
+### Tips to help your PR get approved
+
+1. Make sure your code editor supports real-time linting.
+2. JSDocs are important and must be completely filled out.
+3. Run `yarn build && yarn start` before submitting your PR, to ensure a build will be successful
+4. Be courteous
+
+In addition to real-time linting, you could run the following commands in your terminal (these commands are also used by Husky during a commit!)
+
+Lint JavaScript:
+
+```bash
+yarn run lint:js
+```
+
+Lint CSS:
+
+```bash
+yarn run lint:css
+```
+
+Format your code:
+
+```bash
+yarn run format
+```
+
+## Submitting bug reports and feature requests
+
+Before submitting an issue or making a feature request, please search for existing [issues](https://github.com/WebDevStudios/nextjs-wordpress-starter/issues) or look at our [Github Discussions](https://github.com/WebDevStudios/nextjs-wordpress-starter/discussions).
+
+If you do fill out a bug report, be sure to fill out the report completely!

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,44 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+---
+
+Thanks for taking the time to file a bug report! Please fill out this form as completely as possible.
+
+If you leave out sections there is a high likelihood it will be moved to our [GitHub Discussions](https://github.com/WebDevStudios/nextjs-wordpress-starter/discussions).
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,11 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+---
+
+**Please create your feature request as a [GitHub Discussion](https://github.com/WebDevStudios/nextjs-wordpress-starter/discussions).**
+
+Thank you!

README.md

@@ -25,19 +25,15 @@ https://nextjs-wordpress-starter-staging.vercel.app/
   - [Dependencies](#dependencies-1)
   - [Install](#install-1)
   - [Enable Previews](#enable-previews)
-- [💻 Frontend Development](#-frontend-development)
-  - [Git Workflow](#git-workflow)
-  - [Deployments](#deployments)
-  - [Storybook](#storybook)
-- [WebDevStudios Specific Info](#webdevstudios-specific-info)
+- [💻 WebDevStudios Specific Info](#-webdevstudios-specific-info)
   - [WordPress Github](#wordpress-github)
   - [WP Engine](#wp-engine-1)
   - [Chromatic](#chromatic-1)
   - [1Password](#1password)
   - [Migrate DB Pro](#migrate-db-pro)
   - [Algolia](#algolia-1)
   - [Copy WP Engine Environments](#copy-wp-engine-environments)
-- [:octocat: Contributing](#octocat-contributing)
+- [:octocat: Development and Contributing](#octocat-development-and-contributing)
 
 ---
 
@@ -126,7 +122,9 @@ yarn
 
 **Step 4: Setup ENV Variables**
 
-ENV variables are like constants in `wp-config.php`. Copy the sample ENV file, then add your credentials:
+ENV variables are like constants in `wp-config.php`. They're required in order for authentication and 3rd party services to work.
+
+Copy the [sample ENV file](https://github.com/WebDevStudios/nextjs-wordpress-starter/blob/staging/.env.sample), then modify it to match your credentials:
 
 ```bash
 cp .env.sample .env
@@ -138,28 +136,40 @@ cp .env.sample .env
 
 <details>
 
-The following steps require A) access to a Vercel account and B) assumes the ENV vars are already set up on Vercel. If you need access to the WDS Team account on Vercel, please reach out to Greg.
+The preferred workflow is to add ENV variables to Vercel first, then pull them down.
+
+**Step 1: Add ENV vars to Vercel**
+
+Go to:
+
+```text
+Your Project --> Settings --> Environment Variables
+```
+
+![vercel settings](https://dl.dropbox.com/s/7ljvynnez0c5q8y/Screen%20Shot%202021-01-29%20at%2014.07.58.png?dl=0)
 
-**Step 1: Install the [Vercel CLI](https://vercel.com/download)**
+**Step 2: Install the [Vercel CLI](https://vercel.com/download)**
 
 ```bash
 npm i -g vercel
 ```
 
-**Step 2: Initialize Vercel**
+**Step 3: Initialize Vercel**
+
+Answer the questions in the command line when prompted.
 
 ```bash
 vercel init
 ```
 
-Answer the questions in the command line when prompted.
-
-**Step 3: Pull down the ENV variables**
+**Step 4: Pull down the ENV variables**
 
 ```bash
 vercel env pull
 ```
 
+Now Next.js has what it needs to talk to 3rd party services.
+
 </details>
 
 ---
@@ -195,41 +205,15 @@ define('PREVIEW_SECRET_TOKEN', 'ANY_RANDOM_STRING');
 
 **Step 4: Start the `nextjs-wp` site**
 
-**Note:** Make sure your local URL matches the `LOCAL_WORDPRESS_API_URL` in the frontend `.env` file!
-
 ### Enable Previews
 
-To enable previews, you'll need both a `PREVIEW_SECRET_TOKEN` constant in `wp-config.php` and `WORDPRESS_PREVIEW_SECRET` ENV variable in `.env`. The token can be any random string so long as they match.
+To enable previews, you'll need both a `PREVIEW_SECRET_TOKEN` constant in `wp-config.php` and `WORDPRESS_PREVIEW_SECRET` ENV variable in `.env`.
 
----
+The token can be any random string as long as they match.
 
-## 💻 Frontend Development
-
-### Git Workflow
-
-1. Create a `feature` branch off `staging`
-2. Work locally adhereing to coding standards
-3. When ready, open a draft Pull Request on Github
-4. When finished, fill out the PR template and publish your PR
-5. Your PR must pass assertions and deploy successfully
-6. After peer review, the PR will be merged back into `staging`
-7. Repeat ♻️
-
-### Deployments
-
-[Vercel](https://nextjs-wordpress-starter-gregrickaby.webdevstudios.vercel.app) is connected to this Github repository and will automatically build and deploy. Learn more about [Vercel + Github integration](https://vercel.com/docs/git/vercel-for-github).
-
-### Storybook
-
-To work with Storybook on your Local, run the following command:
-
-```bash
-yarn storybook
-```
-
-Stories are written in `.mdx` and should be placed next to the component. Learn more about [Storybook](https://storybook.js.org/).
+---
 
-## WebDevStudios Specific Info
+## 💻 WebDevStudios Specific Info
 
 The following information pertains to internal tools and workflows at WebDevStudios.
 
@@ -293,6 +277,10 @@ WP Engine supports [copying environments](https://wpengine.com/support/copy-site
 
 ---
 
-## :octocat: Contributing
+## :octocat: Development and Contributing
+
+At WebDevStudios we are committed to open-source technologies and welcome feedback, [discussions](https://github.com/WebDevStudios/nextjs-wordpress-starter/discussions), and contributions from the community.
+
+Please see [CONTRIBUTING.md](https://github.com/WebDevStudios/nextjs-wordpress-starter/blob/staging/.github/CONTRIBUTING.md) for more info on how to get started.
 
-[Contributions](https://github.com/WebDevStudios/nextjs-wordpress-starter/blob/main/.github/CONTRIBUTING.md) are welcome. 🍻
+Stay safe! 🍻

components/atoms/Columns/Columns.js

@@ -0,0 +1,39 @@
+import cn from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import styles from './Columns.module.css'
+
+/**
+ * Render the Columns component.
+ *
+ * @param {object} props             Container component props.
+ * @param {string} props.id          Optional ID/Anchor.
+ * @param {string} props.className   Optional className.
+ * @param {string} props.columnCount Total number of columns.
+ * @param {object} props.children    React children.
+ * @return {Element}                 The Columns component.
+ */
+export default function Columns({id, className, columnCount, children}) {
+  return (
+    <div
+      id={id || null}
+      className={cn(
+        styles.columns,
+        columnCount && styles[`columns-${columnCount}`],
+        className
+      )}
+    >
+      {children && children}
+    </div>
+  )
+}
+
+Columns.propTypes = {
+  id: PropTypes.string,
+  className: PropTypes.string,
+  columnCount: PropTypes.number,
+  children: PropTypes.node
+}
+Columns.defaultProps = {
+  columnCount: 3
+}

components/atoms/Columns/Columns.module.css

@@ -0,0 +1,27 @@
+.columns {
+  @apply grid gap-16 grid-cols-3;
+
+  &.columns-1 {
+    @apply grid-cols-1;
+  }
+
+  &.columns-2 {
+    @apply grid-cols-2;
+  }
+
+  &.columns-3 {
+    @apply grid-cols-3;
+  }
+
+  &.columns-4 {
+    @apply grid-cols-4;
+  }
+
+  &.columns-5 {
+    @apply grid-cols-5;
+  }
+
+  &.columns-6 {
+    @apply grid-cols-6;
+  }
+}

components/atoms/Columns/index.js

@@ -0,0 +1 @@
+export {default} from './Columns'