Writing the first docs test and fixing the broken anchor link errors …

…it found (#1233)

* writing the first docs test and fixing the errors it found

* Creating a GitHub Action

* Update docs.yml

* fixes to the test runner and actions

* removing jest from docs

.github/workflows/docs.yml

@@ -0,0 +1,24 @@
+name: Test Docs
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+env:
+  node_version: 14
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2.3.2
+      - name: Use Node.js ${{ env.node_version }}
+        uses: actions/setup-node@v2.1.1
+        with:
+          node-version: ${{ env.node_version }}
+      - name: test
+        run: |
+          yarn --ignore-engines
+          yarn test:docs

docs/__test__/anchors.test.js

@@ -0,0 +1,25 @@
+const fs = require('fs');
+const path = require('path');
+
+const cheerio = require('cheerio');
+
+const $ = cheerio.load(fs.readFileSync(path.join('_site', 'index.html')));
+
+function escapeRegExp(string) {
+  return string.replace(/[.*+?^$%&{}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+}
+
+describe('each anchor link should have a corresponding anchor', () => {
+  $('a').each(function (i, link) {
+    const href = $(link).attr('href');
+    // link must include # and must not be an external link
+    if (href.includes('#') && !href.includes('https://') && !href.includes('http://')) {
+      // let's try to only get the #ID selector by removing anything else
+      let anchor = escapeRegExp(href.slice(href.indexOf('#')));
+
+      test(`there is a link to ${href} so expect there to be an item with the ID ${anchor} on the page`, () => {
+        expect($(anchor).length).toBe(1);
+      });
+    }
+  });
+});

docs/docs/02-quickstart.md

@@ -71,4 +71,4 @@ Migrating an existing app to Snowpack is meant to be painless, since Snowpack su
 
 CSA is a good starting point for an existing application because it has a few common tools (like Babel) built in by default to replicate the full feature set of a traditional bundled app. CSA is also meant to be a drop-in replacement for Create React App, so any existing Create React App project should run via CSA with zero changes needed.
 
-If you run into issues, search the rest of our docs site for information about importing CSS [from JS](#import-css) and [from CSS](#css-%40import-support), [asset references](#import-images-%26-other-assets), and more.
+If you run into issues, search the rest of our docs site for information about importing CSS [from JS](#javascript) and [from CSS](#import-css), [asset references](#import-images-%26-other-assets), and more.

docs/docs/03-main-concepts.md

@@ -53,7 +53,7 @@ After Snowpack builds your dependencies, any package can be imported and run dir
 
 `snowpack dev` - Snowpack's dev server is an instant dev environment for [unbundled development.](#unbundled-development) The dev server will only build a file when it's requested by the browser. That means that Snowpack can start up instantly (usually in **<50ms**) and scale to infinitely large projects without slowing down. In contrast, it's common to see 30+ second dev startup times when building large apps with a traditional bundler.
 
-Snowpack supports JSX & TypeScript source code by default. You can extend your build even further with [custom plugins](#build-plugins) that connect Snowpack with your favorite build tools: TypeScript, Babel, Vue, Svelte, PostCSS, Sass... go wild!
+Snowpack supports JSX & TypeScript source code by default. You can extend your build even further with [custom plugins](#plugins) that connect Snowpack with your favorite build tools: TypeScript, Babel, Vue, Svelte, PostCSS, Sass... go wild!
 
 ### Snowpack's Build Pipeline
 

docs/docs/09-troubleshooting.md

@@ -20,7 +20,7 @@ If you see this error message, that means that you've imported a file path not a
 
 This is usually seen when importing a named export from a package written in the older Common.js format. Snowpack will automatically scan legacy Common.js packages to detect its named exports, but sometimes these exports can't be detected statically.
 
-**To solve this issue:** Add a ["namedExports"](#config.install-options) entry in your Snowpack config file. This tells Snowpack to use a more-powerful runtime scanner on this legacy Common.js package to detect it's exports at runtime.
+**To solve this issue:** Add a ["namedExports"](#config.installoptions) entry in your Snowpack config file. This tells Snowpack to use a more-powerful runtime scanner on this legacy Common.js package to detect it's exports at runtime.
 
 ```json
 // snowpack.config.json
@@ -34,7 +34,7 @@ This is usually seen when importing a named export from a package written in the
 
 When installing packages from npm, you may encounter some file formats that can only run with additional parsing/processing. First check to see if there is a [Snowpack plugin for the type of file](#plugins).
 
-Because our internal installer is powered by Rollup, you can also add Rollup plugins to your [Snowpack config](#configuration-options) to handle these special, rare files:
+Because our internal installer is powered by Rollup, you can also add Rollup plugins to your [Snowpack config](#configuration) to handle these special, rare files:
 
 ```js
 /* snowpack.config.js */

docs/package.json

@@ -3,11 +3,13 @@
   "version": "2.7.0",
   "scripts": {
     "docs:build": "cat docs/* > index.md && eleventy",
-    "docs:watch": "cat docs/* > index.md && eleventy --serve"
+    "docs:watch": "cat docs/* > index.md && eleventy --serve",
+    "test:docs": "jest /__test__/"
   },
   "devDependencies": {
     "@11ty/eleventy": "^0.11.0",
     "@11ty/eleventy-plugin-syntaxhighlight": "^3.0.1",
+    "cheerio": "^1.0.0-rc.3",
     "eleventy-plugin-nesting-toc": "^1.2.0",
     "luxon": "^1.24.1",
     "markdown-it": "^11.0.0",