add retext-spelling

Author: keithamus

.remarkrc.mjs

@@ -1,5 +1,7 @@
 import retext from "remark-retext"
 import { Parser } from "retext-english"
+import dictionary from "dictionary-en"
+import {readFileSync} from 'node:fs'
 export default {
   plugins: [
     "remark-lint",
@@ -20,5 +22,9 @@ export default {
     [retext, Parser],
     "retext-indefinite-article",
     ["retext-readability", { threshold: 6 / 7 }],
+    ["retext-spell", {
+      dictionary,
+      ignore: readFileSync('.spelling', 'utf-8').split('\n').filter(l => !l.startsWith('#'))
+    }],
   ],
 }

.spelling

@@ -126,3 +126,15 @@ templating
 TootEmbedElement
 web.dev
 Vue
+JSON
+DOM
+cancelable
+instantiation
+enddemo
+endtip
+V0
+ES6
+V1
+localhost:8080
+UI
+http

learn/components/autonomous-vs-customized-elements.md

@@ -115,7 +115,7 @@ into issues with code that isn't expecting to see the newly added logic.
 
 _Customized Built-ins_ have very good accessibility information built right into them. Most have an _implicit role_
 which means that assistive technologies know how to interpret them. For example using a _screen reader_, it is possible
-to navigate through all of the headings in a webpage, and the purpose of form controls is explained as each one is
+to navigate through all of the headings in a web page, and the purpose of form controls is explained as each one is
 focused (e.g. buttons are read out not only by their label but also referred to as "buttons").
 
 _Autonomous Custom Elements_, on the other hand, do not have any accessibility information built into them. Assistive

learn/components/rendering.md

@@ -107,7 +107,7 @@ supports _partials_ or some other system to avoid manually repeating this each t
 
 {% endtip %}
 
-### Advanced: Adding _declarative ShadowDOM_ fallbacks
+### Advanced: Adding _declarative ShadowDOM_ fallback
 
 Given that a _declarative ShadowDOM_ might not always be available, it can be a good idea to fall back to defining it in
 JavaScript instead. You can do this by checking if `.shadowRoot` is not null before calling

learn/set-up-your-environment.md

@@ -18,13 +18,13 @@ To test your applications, it can be useful to install all four browsers. Runnin
 browsers can uncover cross browser bugs, or missing features. Getting comfortable with using the devtools in each is a
 good idea.
 
-### Web Browser Devtools
+### Web Browser devtools
 
 A good set of browser developer tools which will enable you to inspect your web applications under the hood and see how
 it all operates. They can be quite intimidating at first, but there are some great resources out there to learn how to
 make the most of them.
 
-If you're using Google Chrome, check out the [Chrome Developers documentation on the Chrome Devtools][chrome-devtools].
+If you're using Google Chrome, check out the [Chrome Developers documentation on the Chrome devtools][chrome-devtools].
 It's a great resource for learning exactly how the developer tools inside Google Chrome work. Mozilla has a similar
 [guide on Firefox Developer Tools][firefox-devtools]. Microsoft have a smaller but still useful [guide on the Edge
 developer tools][edge-devtools]. Apple's Safari has a useful [five minute walk through of their Web
@@ -46,7 +46,7 @@ While the built-in web developer tools offer excellent features that make it eas
 some extra functionality you can make use of some excellent browser extensions which add even more tools to help develop
 Web Components:
 
-- [Web Component DevTools by Matsuuu][matsuu]
+- [Web Component devtools by Matsuuu][matsuu]
 
 ## Development Environment
 

package-lock.json

@@ -48,6 +48,7 @@
     "construct-style-sheets-polyfill": "^3.1.0",
     "cssnano": "5.1.14",
     "dedent": "^0.7.0",
+    "dictionary-en": "^3.2.0",
     "eleventy-postcss-extension": "1.0.0",
     "eslint-plugin-custom-elements": "^0.0.7",
     "glob": "^8.0.3",
@@ -76,6 +77,7 @@
     "retext-english": "^4.1.0",
     "retext-indefinite-article": "^4.2.0",
     "retext-readability": "^7.2.0",
+    "retext-spell": "^5.3.0",
     "stylelint": "^14.16.0",
     "stylelint-config-standard": "^29.0.0"
   }

package.json

@@ -148,6 +148,6 @@ class TootEmbedElement extends HTMLElement {
 TootEmbedElement.define()
 ```
 
-![A browser screenshot showing the toot-embed component at it's current stage. The example page reads: "Here's an example toot: " followed by a display of the Mastodon toot data including the avatar image, display name, and toot content. The component has been given some rudamentary layouting.](/images/tutorials/mastodon-toot-embed/fig4.png)
+![A browser screenshot showing the toot-embed component at it's current stage. The example page reads: "Here's an example toot: " followed by a display of the Mastodon toot data including the avatar image, display name, and toot content. The component has been given a rudimentary layout.](/images/tutorials/mastodon-toot-embed/fig4.png)
 
 In the next chapter, we will add styling to the component to make it look even better.