chore: Refactor rule docs format

docs/.eleventy.js

@@ -126,8 +126,6 @@ module.exports = function(eleventyConfig) {
     eleventyConfig.addNunjucksAsyncShortcode("link", async function(link) {
         const { body: html, url } = await got(link);
         const metadata = await metascraper({ html, url });
-
-        const encodedURL = encodeURIComponent(link);
         const the_url = (new URL(link)); // same as url
         const domain = the_url.hostname;
 

docs/src/_includes/components/docs-toc.html

@@ -1,8 +1,8 @@
 <nav class="docs-toc c-toc" aria-labelledby="js-toc-label">
-    {%- if content | toc | safe -%}
+    {%- if all_content | toc | safe -%}
     <h2 class="c-toc__label" id="js-toc-label">Table of Contents</h2>
     <div class="c-toc__panel" id="js-toc-panel">
-        {{ content | toc | safe }}
+        {{ all_content | toc | safe }}
     </div>
     {%- endif -%}
 </nav>

docs/src/_includes/layouts/doc.html

@@ -13,12 +13,39 @@
             {% include 'components/docs-index.html' %}
     </div>
 
+    {# Add in related rules and further reading sections to content so TOC is accurate #}
+    {% set all_content = content %}
+    {% if related_rules %}
+        {% set related_rules_content %}
+            <h2 id="related-rules">Related Rules</h2>
+            {% related_rules related_rules %}
+        {% endset %}
+
+        {% set all_content = [all_content, related_rules_content] | join %}
+    {% endif %}
+
+    {% if further_reading %}
+        {% set further_reading_content %}
+            <h2 id="further-reading">Further Reading</h2>
+            {# async shortcodes don't work here so need to manually insert later #}
+        {% endset %}
+
+        {% set all_content = [all_content, further_reading_content] | join %}
+    {% endif %}
+
     <div class="docs-content">
         <main id="main" tabindex="-1" class="docs-main">
             <h1>{{ title }}</h1>
             {% include 'components/docs-toc.html' %}
 
-            {{ content | safe }}
+            {{ all_content | safe }}
+
+            {# now insert the async-fetched link data if necessary #}
+            {% if further_reading %}
+                {% for url in further_reading %}
+                    {% link url %}
+                {% endfor %}            
+            {% endif %}
 
             <div class="docs-edit-link">
                 <a href="{{ edit_link }}" class="c-btn c-btn--secondary">Edit this page</a>

docs/src/rules/block-scoped-var.md

@@ -3,6 +3,9 @@ title: block-scoped-var
 layout: doc
 edit_link: https://github.com/eslint/eslint/edit/main/docs/src/rules/block-scoped-var.md
 rule_type: suggestion
+further_reading:
+- https://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting
 ---
 
 Enforces treating `var` as block scoped.
@@ -111,8 +114,3 @@ class C {
     }
 }
 ```
-
-## Further Reading
-
-* [JavaScript Scoping and Hoisting](http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html)
-* [var Hoisting](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting)

docs/src/rules/no-ternary.md

@@ -3,6 +3,9 @@ title: no-ternary
 layout: doc
 edit_link: https://github.com/eslint/eslint/edit/main/docs/src/rules/no-ternary.md
 rule_type: suggestion
+related_rules:
+- no-nested-ternary
+- no-unneeded-ternary
 ---
 
 Disallows ternary operators.
@@ -50,8 +53,3 @@ function quux() {
     }
 }
 ```
-
-## Related Rules
-
-* [no-nested-ternary](no-nested-ternary)
-* [no-unneeded-ternary](no-unneeded-ternary)