Revert "docs: Static further reading links (eslint#15890)"

This reverts commit de29276.
DeepSourceCorp · May 30, 2022 · 3e53a9c · 3e53a9c
1 parent aa4880c
commit 3e53a9c
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 858 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -74,12 +74,6 @@ module.exports = {
         "internal-rules/multiline-comment-style": "error"
     },
     overrides: [
-        {
-            files: ["tools/*.js"],
-            rules: {
-                "no-console": "off"
-            }
-        },
         {
             files: ["lib/rules/*", "tools/internal-rules/*"],
             excludedFiles: ["index.js"],

diff --git a/docs/.eleventy.js b/docs/.eleventy.js
@@ -6,6 +6,16 @@ const slugify = require("slugify");
 const markdownIt = require("markdown-it");
 const markdownItAnchor = require('markdown-it-anchor');
 const Image = require("@11ty/eleventy-img");
+const metascraper = require('metascraper')([
+    require('metascraper-image')(),
+    require('metascraper-logo')(),
+    require('metascraper-logo-favicon')(),
+    require('metascraper-publisher')(),
+    require('metascraper-title')(),
+    require('metascraper-description')(),
+    require('metascraper-url')()
+]);
+const got = require('got');
 const path = require('path');
 
 const {
@@ -122,27 +132,19 @@ module.exports = function(eleventyConfig) {
     /**********************************************************************
      *  Shortcodes
      * ********************************************************************/
-    eleventyConfig.addNunjucksShortcode("link", function(url) {
-
-        const urlData = this.ctx.further_reading_links[url];
-
-        if (!urlData) {
-            throw new Error(`Data missing for ${url}`);
-        }
-
-        const {
-            domain,
-            title,
-            logo
-        } = urlData;
+    eleventyConfig.addNunjucksAsyncShortcode("link", async function(link) {
+        const { body: html, url } = await got(link);
+        const metadata = await metascraper({ html, url });
+        const the_url = (new URL(link)); // same as url
+        const domain = the_url.hostname;
 
         return `
         <article class="resource">
             <div class="resource__image">
-                <img class="resource__img" width="75" height="75" src="${logo}" alt="Avatar image for ${domain}" onerror="this.onerror = null; this.src = '/icon.svg'" />
+                <img class="resource__img" width="75" height="75" src="${metadata.logo}" alt="Avatar image for ${domain}" />
             </div>
             <div class="resource__content">
-                <a href="${url}" class="resource__title"> ${title} </a><br>
+                <a href="${metadata.url}" class="resource__title"> ${metadata.title} </a><br>
                 <span class="resource__domain"> ${domain}</span>
             </div>
             <svg class="c-icon resource__icon" width="13" height="12" viewBox="0 0 13 12" fill="none">
@@ -304,7 +306,7 @@ module.exports = function(eleventyConfig) {
     // START, eleventy-img
     function imageShortcode(src, alt, cls, sizes = "(max-width: 768px) 100vw, 50vw") {
         const source = src;
-
+        // console.log(`Generating image(s) from:  ${src}`)
         let options = {
             widths: [600, 900, 1500],
             formats: ["webp", "jpeg"],

diff --git a/docs/README.md b/docs/README.md
diff --git a/docs/package.json b/docs/package.json
@@ -1,5 +1,5 @@
 {
-    "name": "docs-eslint",
+    "name": "foundation",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
@@ -36,5 +36,16 @@
         "rimraf": "^3.0.2",
         "sass": "^1.38.0",
         "slugify": "^1.6.3"
+    },
+    "dependencies": {
+        "got": "^11.8.3",
+        "metascraper": "^5.25.7",
+        "metascraper-description": "^5.25.7",
+        "metascraper-image": "^5.25.7",
+        "metascraper-logo": "^5.25.7",
+        "metascraper-logo-favicon": "^5.25.7",
+        "metascraper-publisher": "^5.25.7",
+        "metascraper-title": "^5.25.7",
+        "metascraper-url": "^5.25.7"
     }
 }
diff --git a/docs/src/_data/further_reading_links.json b/docs/src/_data/further_reading_links.json
diff --git a/docs/src/_includes/layouts/doc.html b/docs/src/_includes/layouts/doc.html
@@ -27,9 +27,7 @@ <h2 id="related-rules">Related Rules</h2>
     {% if further_reading %}
         {% set further_reading_content %}
             <h2 id="further-reading">Further Reading</h2>
-            {% for url in further_reading %}
-                {% link url %}
-            {% endfor %}
+            {# async shortcodes don't work here so need to manually insert later #}
         {% endset %}
 
         {% set all_content = [all_content, further_reading_content] | join %}
@@ -42,6 +40,13 @@ <h1>{{ title }}</h1>
 
             {{ 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>
             </div>

diff --git a/docs/src/library/link-card.md b/docs/src/library/link-card.md
@@ -10,6 +10,10 @@ Links can be rendered as cards by using the `link` shortcode. The only required
 
 ## Examples
 
+{% link "https://developer.mozilla.org/en-US/docs/Web/JavaScript" %}
+
+{% link "https://github.com/microlinkhq/metascraper" %}
+
 {% link "https://blog.izs.me/2010/12/an-open-letter-to-javascript-leaders-regarding/" %}
 
-{% link "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get" %}
+{% link "https://humanwhocodes.com/blog/2021/12/making-open-source-project-sponsor-ready-accepting-sponsorships/" %}
diff --git a/package.json b/package.json
@@ -25,19 +25,14 @@
     "publish-release": "node Makefile.js publishRelease",
     "gensite": "node Makefile.js gensite",
     "webpack": "node Makefile.js webpack",
-    "perf": "node Makefile.js perf",
-    "docs:update-links": "node tools/fetch-docs-links.js"
+    "perf": "node Makefile.js perf"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"
   },
   "lint-staged": {
     "*.js": "eslint --fix",
-    "*.md": "markdownlint --fix",
-    "docs/src/rules/*.md": [
-      "node tools/fetch-docs-links.js",
-      "git add docs/src/_data/further_reading_links.json"
-    ]
+    "*.md": "markdownlint --fix"
   },
   "files": [
     "LICENSE",
@@ -109,11 +104,8 @@
     "eslint-release": "^3.2.0",
     "eslump": "^3.0.0",
     "esprima": "^4.0.1",
-    "fast-glob": "^3.2.11",
     "fs-teardown": "^0.1.3",
     "glob": "^7.1.6",
-    "got": "^11.8.3",
-    "gray-matter": "^4.0.3",
     "jsdoc": "^3.5.5",
     "karma": "^6.1.1",
     "karma-chrome-launcher": "^3.1.0",
@@ -126,12 +118,6 @@
     "markdownlint-cli": "^0.30.0",
     "marked": "^4.0.8",
     "memfs": "^3.0.1",
-    "metascraper": "^5.25.7",
-    "metascraper-description": "^5.25.7",
-    "metascraper-image": "^5.29.3",
-    "metascraper-logo": "^5.25.7",
-    "metascraper-logo-favicon": "^5.25.7",
-    "metascraper-title": "^5.25.7",
     "mocha": "^8.3.2",
     "mocha-junit-reporter": "^2.0.0",
     "node-polyfill-webpack-plugin": "^1.0.3",

diff --git a/tools/fetch-docs-links.js b/tools/fetch-docs-links.js