From 4399d7f2e18fd252ec758d00c4514a9c18f2a897 Mon Sep 17 00:00:00 2001
From: Samuel Skeen <sskeen9@gmail.com>
Date: Mon, 2 May 2022 14:14:55 -0600
Subject: [PATCH] feat(descriptions): expand information for key and code

### What Changed?
- add more explanations about behavior of `.key` and `.code` event properties
- add `cross-env` to allow for Windows users to run the app with the node options supplied in the env

### Issues Addressed:
- N/A

### Issue Testing:
- Manual Developer Testing

### Test Results:
1. Open browser to running application
1. Read the descriptions on the page for the `.key` and `.code` values
1. See that they add clarity to the behavior of their respective properties
---
 package-lock.json  | 28 ++++++++++++++++++++++++++++
 package.json       |  3 ++-
 pages/for/[key].js |  8 +++++---
 3 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f595b88..e379672 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
       },
       "devDependencies": {
         "babel-eslint": "^10.1.0",
+        "cross-env": "^7.0.3",
         "eslint": "^8.11.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-prettier": "^8.5.0",
@@ -1452,6 +1453,24 @@
         "url": "https://opencollective.com/core-js"
       }
     },
+    "node_modules/cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.1"
+      },
+      "bin": {
+        "cross-env": "src/bin/cross-env.js",
+        "cross-env-shell": "src/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=10.14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -4996,6 +5015,15 @@
       "integrity": "sha512-12VZfFIu+wyVbBebyHmRTuEE/tZrB4tJToWcwAMcsp3h4+sHR+fMJWbKpYiCRWlhFBq+KNyO8rIV9rTkeVmznQ==",
       "dev": true
     },
+    "cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "^7.0.1"
+      }
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
diff --git a/package.json b/package.json
index 71fde54..1183a49 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "description": "![](http://wes.io/sQyC/content.gif)",
   "main": "google-analytics.js",
   "scripts": {
-    "dev": "NODE_OPTIONS='--inspect' next dev -p 3000",
+    "dev": "cross-env NODE_OPTIONS='--inspect' next dev -p 3000",
     "build": "next build",
     "start": "next start"
   },
@@ -37,6 +37,7 @@
   },
   "devDependencies": {
     "babel-eslint": "^10.1.0",
+    "cross-env": "^7.0.3",
     "eslint": "^8.11.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
diff --git a/pages/for/[key].js b/pages/for/[key].js
index 2b6863e..03ecd70 100644
--- a/pages/for/[key].js
+++ b/pages/for/[key].js
@@ -97,7 +97,8 @@ export default function HomePage({ staticKey }) {
             <footer>
               <p>
                 The value of the key pressed. Accounts for modifiers keys that
-                return CAPS and alternate chars.
+                return CAPS and alternate chars. Also respects different
+                keyboard layouts.
               </p>
             </footer>
           </div>
@@ -131,7 +132,8 @@ export default function HomePage({ staticKey }) {
             <footer>
               <p>
                 The physical key on the keyboard. Doesn't care if you are
-                holding a modifier like Shift.
+                holding a modifier like Shift. Only reports the key's physical
+                location in a US standard QWERTY layout.
               </p>
             </footer>
           </div>
@@ -148,7 +150,7 @@ export default function HomePage({ staticKey }) {
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  (deprecated)
+                  deprecated
                 </a>{' '}
                 in modern browsers. Use <code>.key</code> or <code>.code</code>{' '}
                 instead.