Replace Jekyll with Eleventy (#3652)

* Add eleventy as a static site generator

* Code syntax highlighting, header anchors and fix fragment id links

* Disable line breaks in paragraphs

* Make date in footer work

* Remove jekyll completely and describe how to use eleventy

* Include missing favicon

* Unify heading fragment identifier slug generation

* Eliminate default layout partials

* Autoformat style.css

* Remove left over jekyll config

* Rework build pipeline to speed things up

* Fixed broken fragment identifier link in docs

* Add .js extension dotfiles to linting setup. Addresses #3652 (comment)

* Performance improvements. Prefetch google analytics and lazyload images

* Performance improvements. Preload opencollective fallback avatar

* Update docs/api/index.html

Co-Authored-By: Munter <[email protected]>

* Correct docs readme

* Fix wrong syntax in Strict-Transport-Security header and added Referrrer-Policy header

* Add image type to ppreload of opencollective fallback avatar

* Stop preloading tracking scripts. They mess with the loading order and slow page rendering down

.eleventy.js

@@ -0,0 +1,44 @@
+'use strict';
+
+module.exports = function(eleventyConfig) {
+  eleventyConfig.addPassthroughCopy('docs/css');
+  eleventyConfig.addPassthroughCopy('docs/js');
+  eleventyConfig.addPassthroughCopy('docs/images');
+  eleventyConfig.addPassthroughCopy('docs/CNAME');
+  eleventyConfig.addPassthroughCopy('docs/_headers');
+  eleventyConfig.addPassthroughCopy('docs/favicon.ico');
+
+  eleventyConfig.addPassthroughCopy('docs/example');
+
+  /* Markdown Plugins */
+  const markdown = require('markdown-it')({
+    html: true,
+    linkify: true
+  });
+
+  markdown.use(require('markdown-it-anchor'), {
+    slugify: require('uslug'),
+    permalink: true,
+    permalinkBefore: true,
+    permalinkClass: 'direct-link',
+    permalinkSymbol: '#'
+  });
+
+  markdown.use(require('markdown-it-attrs'), {
+    leftDelimiter: '{:',
+    rightDelimiter: '}'
+  });
+
+  markdown.use(require('markdown-it-prism'));
+
+  eleventyConfig.setLibrary('md', markdown);
+
+  return {
+    passthroughFileCopy: true,
+    dir: {
+      input: 'docs',
+      includes: '_includes',
+      output: 'docs/_site'
+    }
+  };
+};

.eslintignore

@@ -4,3 +4,4 @@ mocha.js
 docs/
 out/
 !lib/mocha.js
+!.*.js

.eslintrc.yml

@@ -21,6 +21,7 @@ overrides:
       - package-scripts.js
       - karma.conf.js
       - .wallaby.js
+      - .eleventy.js
       - bin/*
       - lib/cli/**/*.js
       - test/node-unit/**/*.js
@@ -37,8 +38,8 @@ overrides:
     globals:
       expect: no
   - files:
-    - bin/*
-    - lib/**/*.js
+      - bin/*
+      - lib/**/*.js
     rules:
       no-restricted-globals:
         - error

.gitignore

@@ -1,9 +1,9 @@
 # Mocha-specific
 docs/_site
 docs/_dist
-docs/api
-/mocha.js
+mocha.js
 .karma/
+!lib/mocha.js
 
 #########################################
 # NON-MOCHA STUFF GOES BELOW THIS THING #

docs/.eleventyignore

@@ -0,0 +1,6 @@
+README.md
+API.md
+LICENSE*
+.*
+_dist/
+example/

docs/README.md

@@ -1,28 +1,24 @@
 # mochajs.org
 
-*So you wanna build the site?*
+_So you wanna build the site?_
 
-[mochajs.org](https://mochajs.org) is built using [Jekyll](http://jekyllrb.com), the popular static site generator.
+[mochajs.org](https://mochajs.org) is built using [Eleventy](https://www.11ty.io/), a simple static site generator.
 
 ## Prerequisites
 
-- Ruby
-- RubyGems
-- Bundler (`gem install bundler`)
 - Node.js v6.x or greater
 
 ## Development
 
 1. Run `npm install` from working copy root to get Node.js deps.
-1. Run `bundle install` to install Jekyll and its dependencies.  This may or may not require elevated privileges, depending on your system.
 1. To serve the site and rebuild as changes are made, execute `npm start docs.watch`.
-1. To rebuild the site *once*, execute `npm start docs`.
+1. To rebuild the site _once_, execute `npm start docs`.
 
 ### Notes
 
 - The content lives in `docs/index.md`; everything else is markup, scripts, assets, etc.
-- This file (`docs/README.md`) should *not* be included in the build.
-- `docs/_dist` and `docs/api` are where the deployed site lives.  `docs/_site` is essentially a build step.  These three directories are *not* under version control.
+- This file (`docs/README.md`) should _not_ be included in the build.
+- `docs/_dist` is where the deployed site lives. `docs/_site` is essentially a build step. These directories are _not_ under version control.
 - See `package-scripts.js` for details on what the builds are actually doing; especially see [markdown-magic](https://npm.im/markdown-magic) for how we're dynamically inserting information into `docs/index.md`.
 
 ## License

docs/_headers

@@ -2,7 +2,8 @@
   X-Frame-Options: DENY
   X-XSS-Protection: 1; mode=block
   X-Content-Type-Options: nosniff
-  Strict-Transport-Security: max-age=31536000, includeSubDomains
+  Strict-Transport-Security: max-age=31536000; includeSubDomains
+  Referrer-Policy: strict-origin-when-cross-origin
 
 ## Far future expires for hashed file names
 /static/*

docs/_includes/default.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>{{ page.title }}</title>
+    <link
+      rel="preload"
+      href="https://opencollective.com/static/images/user.svg"
+      as="image"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="css/normalize.css" />
+    <link rel="stylesheet" href="css/style.css" />
+    <link rel="stylesheet" href="css/prism.css" />
+    <link rel="shortcut icon" href="favicon.ico" />
+
+    <!--[if lt IE 9]> <script src="js/html5shiv.min.js"></script> <![endif]-->
+  </head>
+
+  <body>
+    <header id="_header">
+      <h1>
+        <a href="/">
+          <img
+            src="/images/mocha-logo.svg"
+            alt="Mocha"
+            width="192"
+            height="192"
+          />
+        </a>
+      </h1>
+
+      <p id="tag"><em>simple</em>, <em>flexible</em>, <em>fun</em></p>
+    </header>
+
+    <main id="content">{{ content }}</main>
+
+    <footer>
+      <span>
+        <a href="https://mochajs.org">mochajs.org</a> is licensed under a
+        <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"
+          >Creative Commons Attribution 4.0 International License</a
+        >.
+        <p>
+          <em>Last updated: {{ 'now' | date: '%a %b %d %H:%M:%S %Y' }}</em>
+        </p></span
+      >
+    </footer>
+
+    <script src="js/ga.js" async></script>
+  </body>
+</html>

docs/api/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Document</title>
+  </head>
+  <body>
+    <h1>
+      The JSDoc API documentation will be placed here by the build system
+    </h1>
+  </body>
+</html>