Chore: switch from Jekyll to Eleventy (#649)

* Switch from Jekyll to Eleventy

* Add blog posts

* Calculate deploy URLs

* Fix index/404 pages

* Fix 404 page

* Switch to relative URLs

* Move filters into separate module

* Fix rules

* Fix rules

* Build in Node 12 in CI

* Fix broken fixable link

* Fix titles

* Set engines to Node >=12.0.0

* Rename fix script

* Run fix script

* Update .eleventyignore

* Copy over public files

* Add syntax highlighting to markdown

* Refactor

* Fix RSS feed

* Fix date formatting for luxon library

* Update README.md

* Fix RSS feed

* Minify HTML/XML

* Remove unnecessary comments

* Fix linting issue

* Add back webpack command directions

* Do not minify XML

* Fix directory structure to get rid of trailing slashes in URLs

* Add server for local dev to match Netlify's "Pretty URLs" feature

* Run webpack as a child process using dev server

* Fix up URLs

* Update README.md

* Watch styles in local dev

* Fix blog directory structure

* Update blog post links

* Rebase and update package-lock.json

* Add custom route handler to mimic to work around express.static() issue

* Rebase and update _data/rules.json

* Remove trailing slashes from non-directory URLs

* Add HTTP logging and document dev-server.js

* Fix RSS feed links (currently broken in production in Jekyll as well

* Remove language from nodejs.org link

* Convert YAML data files to JSON

* Update pretty URLs in head metadata

* Update post.url as a pretty link

* Update log in yaml-to-json.js

* Fix build for Windows 10

.eleventy.js

@@ -0,0 +1,24 @@
+"use strict";
+
+const { addPlugins, addFilters, addTransforms } = require("./_11ty");
+
+module.exports = function(eleventyConfig) {
+    addPlugins(eleventyConfig);
+    addFilters(eleventyConfig);
+    addTransforms(eleventyConfig);
+
+    // Add collection of blog posts.
+    eleventyConfig.addCollection("posts", collection => collection.getFilteredByGlob("_posts/*.md").reverse());
+
+    // Copy over static assets.
+    eleventyConfig.addPassthroughCopy("assets");
+    eleventyConfig.addPassthroughCopy({ "public/*": "." });
+    eleventyConfig.addPassthroughCopy("docs/**/*.svg");
+
+    return {
+        dir: {
+            includes: "_includes",
+            layouts: "_layouts"
+        }
+    };
+};

.eleventyignore

@@ -0,0 +1,7 @@
+node_modules
+src
+LICENSE
+package-lock.json
+package.json
+README.md
+webpack.config.js

.gitignore

@@ -1,8 +1,8 @@
 node_modules/
 _site/
-assets/build
-Gemfile.lock
-.jekyll-metadata
 npm-debug.log
-main/*.css.map
+assets/build
 .idea
+_data/logos.json
+_data/rules.json
+_data/rules4.json

.travis.yml

@@ -1,12 +1,9 @@
-language: ruby
-rvm:
- - 2.5
-cache: bundler
+sudo: false
+language: node_js
+node_js:
+  - "12"
 branches:
   only:
     - master
-before_install:
-  - nvm install 8
-  - npm install
 script:
   - npm run lint && npm run build

README.md

@@ -20,41 +20,30 @@ Please note that all HTML documentation is split between this repository and the
 
 ## Developer Setup
 
-This website is built with [Jekyll](https://jekyllrb.com) and is hosted on [Netlify](https://www.netlify.com).
+This website is built with [Eleventy](https://www.11ty.io) and is hosted on [Netlify](https://www.netlify.com).
 
 ### Local development
 
-To set up a local development environment, please follow [GitHub's instructions](https://help.github.com/articles/setting-up-your-github-pages-site-locally-with-jekyll) (be sure to follow the instructions for your platform).
-
-Once you have set up a local environment, you can run a copy of the website locally using this command:
+To set up a local development environment, install [Node.js](https://nodejs.org/) (be sure to follow the instructions for your platform) and follow the steps below:
 
 ```sh
-$ npm start
-```
+# Clone the repository
+git clone [email protected]:eslint/website.git eslint-website
 
-### Development using Docker
+# Navigate to the root directory
+cd eslint-website
 
-If you have [Docker](https://www.docker.com) installed, you can run the following:
-
-```sh
-$ npm run start:docker
+# Install dependencies
+npm install
 ```
 
-This will run the following command, creating a temporary container that builds and serves the site and watches for local changes:
+Once you have set up your environment, you can run a copy of the website locally using this command:
 
 ```sh
-$ docker run --rm \
-    -v `pwd`:/srv/jekyll \
-    -p 4000:4000 \
-    -it jekyll/jekyll:3.8 \
-    jekyll serve -V --config _config.yml,_config.dev.yml
+$ npm start
 ```
 
-To run webpack to bundle the JavaScript and style assets, you can run the following:
-
-```
-$ npm run start:webpack
-```
+This will watch for changes to the source code and rebuild the website, which will be hosted at `http://localhost:8080/`.
 
 ## License
 

_11ty/filters/date-format.js

@@ -0,0 +1,7 @@
+"use strict";
+
+const { DateTime } = require("luxon");
+
+module.exports = function dateFormat(date, format) {
+    return DateTime.fromJSDate(date, { zone: "utc" }).toFormat(format);
+};

_11ty/filters/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+module.exports = {
+    dateFormat: require("./date-format"),
+    numberOfWords: require("./number-of-words"),
+    xmlEscape: require("./xml-escape")
+};

_11ty/filters/number-of-words.js

@@ -0,0 +1,37 @@
+"use strict";
+
+const htmlparser2 = require("htmlparser2");
+
+module.exports = function numberOfWords(templateContent) {
+    let htmlTextContent = "";
+    let isInCodeBlock = false;
+
+    const parser = new htmlparser2.Parser(
+        {
+            onopentag(tagName) {
+                if (tagName !== "pre") {
+                    return;
+                }
+                isInCodeBlock = true;
+            },
+            ontext(text) {
+
+                // Ignore code examples and filter out punctuation.
+                if (isInCodeBlock || !/[\w\d]/.test(text)) {
+                    return;
+                }
+                htmlTextContent += ` ${text.trim()}`;
+            },
+            onclosetag(tagName) {
+                if (tagName !== "pre") {
+                    return;
+                }
+                isInCodeBlock = false;
+            }
+        },
+        { decodeEntities: true }
+    );
+
+    parser.parseComplete(templateContent);
+    return htmlTextContent.trim().split(/\s+/).length;
+};

_11ty/filters/xml-escape.js

@@ -0,0 +1,7 @@
+"use strict";
+
+const { XmlEntities } = require("html-entities");
+
+module.exports = function xmlEscape(text) {
+    return new XmlEntities().encode(text);
+};

_11ty/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+const plugins = require("./plugins");
+const filters = require("./filters");
+const transforms = require("./transforms");
+
+function addPlugins(eleventyConfig) {
+    for (const plugin of Object.values(plugins)) {
+        eleventyConfig.addPlugin(plugin);
+    }
+}
+
+function addFilters(eleventyConfig) {
+    for (const [name, filter] of Object.entries(filters)) {
+        eleventyConfig.addFilter(name, filter);
+    }
+}
+
+function addTransforms(eleventyConfig) {
+    for (const [name, transform] of Object.entries(transforms)) {
+        eleventyConfig.addTransform(name, transform);
+    }
+}
+
+module.exports = {
+    addPlugins,
+    addFilters,
+    addTransforms
+};

_11ty/plugins/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+module.exports = {
+    syntaxHighlighting: require("./syntax-highlighting")
+};

_11ty/plugins/syntax-highlighting.js

@@ -0,0 +1,26 @@
+"use strict";
+
+const markdownIt = require("markdown-it");
+const highlightJS = require("highlight.js");
+
+module.exports = function syntaxHighlighting(eleventyConfig) {
+    const md = markdownIt({
+
+        // https://github.com/markdown-it/markdown-it#syntax-highlighting
+        highlight(text, lang = null) {
+            if (lang && highlightJS.getLanguage(lang)) {
+                try {
+                    return `<pre class="hljs highlight-${lang}"><code>${highlightJS.highlight(lang, text, true).value}</code></pre>`;
+                } catch (err) {
+
+                    // Default to escaping HTML if highlighting throws an error.
+                }
+            }
+
+            return `<pre class="hljs highlight-${lang}"><code>${md.utils.escapeHtml(text)}</code></pre>`;
+        },
+        html: true
+    });
+
+    eleventyConfig.setLibrary("md", md);
+};

_11ty/transforms/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+module.exports = {
+    minifyHtml: require("./minify-html")
+};

_11ty/transforms/minify-html.js

@@ -0,0 +1,15 @@
+"use strict";
+
+const htmlmin = require("html-minifier");
+
+module.exports = function minifyHtml(content, outputPath) {
+    if (outputPath.endsWith(".html")) {
+        return htmlmin.minify(content, {
+            useShortDoctype: true,
+            removeComments: true,
+            collapseWhitespace: true
+        });
+    }
+
+    return content;
+};

_data/site.js

@@ -0,0 +1,21 @@
+"use strict";
+
+const PORT = process.env.DEV_PORT || 8080;
+
+function calculateUrl() {
+    if (process.env.NODE_ENV === "development") {
+        return `localhost:${PORT}`;
+    }
+
+    /*
+     * Netlify sets the following environment variables
+     * https://www.netlify.com/docs/continuous-deployment/#environment-variables
+     */
+    return process.env.CONTEXT === "production" ? process.env.URL : process.env.DEPLOY_PRIME_URL;
+}
+
+module.exports = {
+    title: "ESLint - Pluggable JavaScript linter",
+    description: "A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.",
+    url: calculateUrl()
+};

_includes/footer.liquid

@@ -0,0 +1,18 @@
+<hr>
+<div class="container">
+  <footer>
+    <ul class="list-inline">
+      {% if page.edit_link %}
+        <li><a href="{{ page.edit_link }}">Edit this page</a></li>
+      {% else %}
+        <li><a href="https://github.com/eslint/website/edit/master/{{ page.inputPath }}">Edit this page</a></li>
+      {% endif %}
+      <li><a href="https://groups.google.com/group/eslint">Mailing List</a></li>
+      <li><a href="https://github.com/eslint/eslint">GitHub</a></li>
+      <li><a href="https://twitter.com/geteslint">Twitter</a></li>
+      <li><a href="https://gitter.im/eslint/eslint">Chat Room</a></li>
+      <li>Copyright JS Foundation and other contributors, <a href="https://js.foundation">https://js.foundation/</a></li>
+    </ul>
+  </footer>
+</div>
+<script src="/assets/js/main.js"></script>