set up more remark linters

keithamus · keithamus · commit d75620da5534 · 2023-01-10T17:42:29.000Z
diff --git a/.remarkignore b/.remarkignore
@@ -0,0 +1 @@
+CODE_OF_CONDUCT.md
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -23,7 +23,7 @@ $ npm install
 $ npm start
 ```
 
-Once this is done you can visit http://localhost:8080/ to see the local copy of the website. As you edit files the
+Once this is done you can visit <http://localhost:8080/> to see the local copy of the website. As you edit files the
 website will automatically rebuild, and you can see the changes reflected in your browser.
 
 ### Running checks/tests
diff --git a/blog/2023-01-09-introducing-webcomponents-guide.md b/blog/2023-01-09-introducing-webcomponents-guide.md
@@ -102,5 +102,4 @@ the [Learn][learn] section then your input would be invaluable to countless deve
 [learn]: /learn/
 [tutorials]: /tutorials/
 [blog]: /blog/
-
-[issue]: {{ repository }}/issues/new
+[issue]: https://github.com/WebComponentsGuide/webcomponents.guide/issues/new
diff --git a/learn/components/autonomous-vs-customized-elements.md b/learn/components/autonomous-vs-customized-elements.md
@@ -7,8 +7,6 @@ In the [previous section][defining-a-component] we learned about _Autonomous Cus
 Elements_. The most popular way to make elements is to use the _Autonomous Custom Element_ style, by making up your own
 tag and extending `HTMLElement`. However, each style comes with different trade-offs.
 
-[defining-a-component]: /learn/components/
-
 Choosing a type of component to build will depend on a lot of factors. _Autonomous Custom Elements_ give you a blank
 canvas to work with. _Customized Built-ins_ **extend** the element you're customizing. Here are some considerations to
 think about:
@@ -78,8 +76,6 @@ use _ShadowDOM_.
 _ShadowDOM_ also provides elements with the ability to choose how nested elements render. An ability that many
 _built-ins_ already have...
 
-[shadowdom]: /learn/components/shadowdom
-
 ### Nesting & Semantics
 
 Many _built-in_ elements will only allow certain tags to nest inside ([you can read more about _Content Categories_ on
@@ -96,10 +92,6 @@ _Autonomous Custom Elements_ allow any nested tag by default. This can be custom
 behavior is to allow any nested element. An element like `<fancy-button>` could include any _[flow
 content][flow-content]_ tags. It might be weird to see a `<fancy-button>` with an `<iframe>` nested inside.
 
-[content-categories]: https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories
-[phrasing-content]: https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content
-[flow-content]: https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#flow_content
-
 ### Behavior & API
 
 _Autonomous Custom Elements_ must extend from `HTMLElement`. They'll get all the methods and properties inherited from
@@ -136,12 +128,17 @@ universal and consistent. It's always worth getting comfortable with these tools
 using a variety of them. A lot of work has gone into making the _built-ins_ as accessible as possible by default, and so
 it can be a good idea to rely on those defaults.
 
-[aria]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
-
 ### Summary
 
 This has all been a lot to go over. The truth is there's good reasons to pick customizing a _built-in_, but it should be
 carefully considered. If your element is substantially different from any existing element, then using an _Autonomous
 Custom Element_ is a good choice. To help drive your decision, here's a table summarizing the above information:
 
 {% stub %}
+
+[defining-a-component]: /learn/components/
+[shadowdom]: /learn/components/shadowdom
+[content-categories]: https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories
+[phrasing-content]: https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content
+[flow-content]: https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#flow_content
+[aria]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
diff --git a/learn/components/index.md b/learn/components/index.md
@@ -44,8 +44,6 @@ message like `autonomous custom elements must extend HTMLElement`.
 
 {% endtip %}
 
-[lifecycle]: /learn/components/lifecycle-reference
-
 ## Customized Built-in Elements
 
 _Customized Built-in_ elements are extensions to the browsers existing _built-in_ elements. For example if you wanted to
@@ -201,3 +199,4 @@ class MyElement extends HTMLElement {
   }
 }
 ```
+[lifecycle]: /learn/components/lifecycle-reference
diff --git a/learn/components/initializing-your-component.md b/learn/components/initializing-your-component.md
@@ -16,8 +16,6 @@ or as logic during the _constructor_.
 Components might have some _state_, much of which can be assigned using [class fields][class-fields]. These could be
 public, private, or a combination of the two:
 
-[class-fields]: /learn/javascript/classes
-
 ```js
 class StopWatchElement extends HTMLElement {
   static define(tag = "stop-watch") {
@@ -161,4 +159,5 @@ class StopWatchElement extends HTMLElement {
 }
 ```
 
+[class-fields]: /learn/javascript/classes
 [lifecycle]: /learn/components/lifecycle-reference/
diff --git a/learn/components/lifecycle-reference.md b/learn/components/lifecycle-reference.md
@@ -53,8 +53,6 @@ so instead of inheriting from your class, the element will fall back to being an
 
 {% endtip %}
 
-[constructor]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
-
 ## `connectedCallback()`
 
 The `connectedCallback()` is a "well known" method. It doesn't exist as part of native JavaScript classes, instead it's
@@ -80,9 +78,6 @@ have children during a `connectedCallback` call. This means you might want to av
 Instead use this function to initialize itself, render any [ShadowDOM][shadowdom] and add [global event
 listeners][events].
 
-[shadowdom]: /learn/components/shadowdom
-[events]: /learn/components/events
-
 If your element depends heavily on its children existing, consider adding a
 [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) in the `connectedCallback` to
 track when your elements children change.
@@ -144,8 +139,6 @@ in some cases this is very helpful; but sometimes this can bite, especially if y
 `attributeChangedCallback`. Try to make sure operations inside `attributeChangedCallback` are idempotent, or perhaps
 consider adding a check to ensure `oldValue !== newValue` before performing operations which may be sensitive to this.
 
-[createattribute]: https://developer.mozilla.org/en-US/docs/Web/API/Document/createAttribute
-
 ## `adoptedCallback()`
 
 The `adoptedCallback()` is another well known method gets called when your element moves from one `document` to another
@@ -192,3 +185,8 @@ document.body.querySelector("iframe").contentWindow.document.body.append(el)
 // browser calls `adoptedCallback()`
 // browser calls `connectedCallback()`
 ```
+
+[constructor]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
+[shadowdom]: /learn/components/shadowdom
+[events]: /learn/components/events
+[createattribute]: https://developer.mozilla.org/en-US/docs/Web/API/Document/createAttribute
diff --git a/learn/components/naming-your-components.md b/learn/components/naming-your-components.md
@@ -103,9 +103,6 @@ _Web Components_ are prefixed `<sp-`, [Shoelace Components][shoelace] are prefix
 can easily tell apart a component from a design system to a generic off-the-shelf component. On the other hand, this
 makes every component name longer.
 
-[spectrum]: https://opensource.adobe.com/spectrum-web-components/
-[shoelace]: https://shoelace.style/
-
 ### If in doubt, use the `noun-noun` pattern
 
 As a general rule you can think about answering to the following question: What **action** does your element to do the
@@ -138,4 +135,6 @@ prefixing your element tag names, using the prefix in the class name is a good i
 system with `<fcy-button>` and `<fcy-accordion>` then naming classes like `FancyButtonElement` and
 `FancyAccordionElement` is a good pattern.
 
+[spectrum]: https://opensource.adobe.com/spectrum-web-components/
+[shoelace]: https://shoelace.style/
 [camelcase]: https://en.wikipedia.org/wiki/Camel_case
diff --git a/learn/index.md b/learn/index.md
@@ -25,11 +25,6 @@ Here's an example of a web component that renders a timer. It defines its own [s
 [_ShadowDOM_][shadowdom], and has its own [_private state_][private-state]. It makes use of the [_lifecycle
 callbacks_][lifecycle] to know when to start counting. These are all built in web platform features.
 
-[styles]: /learn/components/styling
-[shadowdom]: /learn/components/shadowdom
-[private-state]: /learn/components/private-state
-[lifecycle]: /learn/components/lifecycle-reference
-
 {% demo %}
 
 ```js
@@ -82,3 +77,8 @@ StopWatchElement.define()
 {% enddemo %}
 
 Let's find out more about how to build this component...
+
+[styles]: /learn/components/styling
+[shadowdom]: /learn/components/shadowdom
+[private-state]: /learn/components/private-state
+[lifecycle]: /learn/components/lifecycle-reference
diff --git a/learn/javascript/events-in-more-detail.md b/learn/javascript/events-in-more-detail.md
@@ -11,8 +11,6 @@ In this section we'll learn about these features in more detail, covering some m
 potential pitfalls you'll need to watch out for. It's a good idea to make sure you've got a good understanding of
 everything covered in the [previous section][events] before reading on.
 
-[events]: /learn/javascript/events
-
 #### Adding multiple listeners
 
 The [previous section][events] showed how you can add an _Event listener_ with `.addEventListener()`, but you can add
@@ -324,3 +322,5 @@ mytimer.addEventListener("start", (event) => {
   console.log("never called, as propagation was stopped")
 })
 ```
+
+[events]: /learn/javascript/events
diff --git a/learn/javascript/events.md b/learn/javascript/events.md
@@ -16,9 +16,6 @@ great pages on MDN that cover Events:
 - [The Event API](https://developer.mozilla.org/en-US/docs/Web/API/Event)
 - [Web Browser Event Reference](https://developer.mozilla.org/en-US/docs/Web/Events)
 
-[node]: https://nodejs.org/en/
-[deno]: https://deno.land/
-
 ### What are events?
 
 Events are a way to allow two different pieces of code to communicate with each other, without having to import or
@@ -151,8 +148,6 @@ This is the most important piece of information as it determines which listeners
 takes an optional second argument which is the _event options_. Let's just focus on the `.type` for now. You can read
 more about the second options argument in the next section [Events in detail][events-in-detail].
 
-[events-in-detail]: /learn/javascript/events-in-detail
-
 It's common to subclass `Event` for different types that have more specific properties. For example the built-in
 `KeyboardEvent` is used for events like `'keypress'`, `'keydown'`, and `'keyup'` and has additional properties such as
 `.key` which describes the keyboard key related to the event. Another example, the built-in `MouseEvent`, has a
@@ -199,3 +194,7 @@ mytimer.addEventListener("tick", (event) => {
 
 mytimer.start()
 ```
+
+[node]: https://nodejs.org/en/
+[deno]: https://deno.land/
+[events-in-detail]: /learn/javascript/events-in-detail
diff --git a/learn/javascript/index.md b/learn/javascript/index.md
@@ -11,7 +11,7 @@ If you're new to JavaScript or haven't used JavaScript for a long time, it's wor
 to JavaScript][mdn-intro] and [MDN's JavaScript Language Overview][mdn-overview]. It'll cover concepts that this guide
 won't go into.
 
+{% stub %}
+
 [mdn-overview]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Overview
 [mdn-intro]: https://developer.mozilla.org/en-US/docs/Web/javascript
-
-{% stub %}
diff --git a/learn/set-up-your-environment.md b/learn/set-up-your-environment.md
@@ -18,13 +18,6 @@ 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.
 
-[chrome]: https://www.google.com/chrome/
-[firefox]: https://www.mozilla.org/en-GB/firefox/new/
-[firefox-dev]: https://www.mozilla.org/en-GB/firefox/developer/
-[edge]: https://www.microsoft.com/en-us/edge?form=MA13FJ
-[macos]: https://support.apple.com/en-gb/macos
-[safari]: https://www.apple.com/uk/safari/
-
 ### 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
@@ -39,11 +32,6 @@ Inspector][safari-devtools].
 
 Here's a handy guide on how to quickly access the developer tools, depending on your browser and OS:
 
-[chrome-devtools]: https://developer.chrome.com/docs/devtools/
-[firefox-devtools]: https://firefox-dev.tools/
-[edge-devtools]: https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/overview
-[safari-devtools]: https://developer.apple.com/videos/play/tech-talks/401/
-
 | OS            | Browser                      | Keyboard shortcut             | Menu                                                 |
 | :------------ | :--------------------------- | :---------------------------- | :--------------------------------------------------- |
 | Windows/Linux | {% icon "chrome" %} Chrome   | {% shortcut "Ctrl Shift I" %} | {% menu "more" "More Tools" "Developer Tools" %}     |
@@ -60,8 +48,6 @@ Web Components:
 
 - [Web Component DevTools by Matsuuu][matsuu]
 
-[matsuu]: https://matsuuu.github.io/web-component-devtools/
-
 ## Development Environment
 
 To get started writing web components you'll need a development environment. While you can use any text editor to
@@ -71,10 +57,17 @@ with excellent support for writing HTML, JavaScript and CSS out of the box as we
 install. It can hook directly into web browsers like Chrome or Firefox using the allowing you to debug your applications
 without leaving your editor. All of these features make it ideal for writing Web Components and websites that use them.
 
-Some recommended extensions for developing components within VS Code are:
-
--
+{% stub %}
 
+[chrome]: https://www.google.com/chrome/
+[firefox]: https://www.mozilla.org/en-GB/firefox/new/
+[firefox-dev]: https://www.mozilla.org/en-GB/firefox/developer/
+[edge]: https://www.microsoft.com/en-us/edge?form=MA13FJ
+[macos]: https://support.apple.com/en-gb/macos
+[safari]: https://www.apple.com/uk/safari/
+[chrome-devtools]: https://developer.chrome.com/docs/devtools/
+[firefox-devtools]: https://firefox-dev.tools/
+[edge-devtools]: https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/overview
+[safari-devtools]: https://developer.apple.com/videos/play/tech-talks/401/
+[matsuu]: https://matsuuu.github.io/web-component-devtools/
 [vscode]: https://code.visualstudio.com/.
-
-{% stub %}
diff --git a/learn/your-first-web-component.md b/learn/your-first-web-component.md
@@ -14,10 +14,10 @@ _Web Components_ go further to add a powerful set of additional APIs. One of tho
 Elements_][defining-a-component] which allows you to define your own HTML Elements. _Web Components_ can also make use
 of [_ShadowDOM_][shadowdom] which is a powerful API that allows you to manage how an element is rendered.
 
+{% stub %}
+
 [classes]: /learn/javascript/classes
 [events]: /learn/javascript/events
 [dom-apis]: /learn/javascript/dom-apis
 [defining-a-component]: /learn/components/
 [shadowdom]: /learn/components/shadowdom
-
-{% stub %}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/tutorials/mastodon-toot-embed/setting-up.md b/tutorials/mastodon-toot-embed/setting-up.md

Original file line number	Diff line number	Diff line change
@@ -44,8 +44,6 @@ message like `autonomous custom elements must extend HTMLElement`.
`44`	`44`
`45`	`45`	`{% endtip %}`
`46`	`46`
`47`		`-[lifecycle]: /learn/components/lifecycle-reference`
`48`		`-`
`49`	`47`	`## Customized Built-in Elements`
`50`	`48`
`51`	`49`	`_Customized Built-in_ elements are extensions to the browsers existing _built-in_ elements. For example if you wanted to`
`@@ -201,3 +199,4 @@ class MyElement extends HTMLElement {`
`201`	`199`	`}`
`202`	`200`	`}`
`203`	`201`	```
	`202`	`+[lifecycle]: /learn/components/lifecycle-reference`