Chore: add build step to bundle client-side assets (#588)

* Chore: add client-side assets build step

* Organize all assets in assets/ dir

* Switch Demo from Orion to CodeMirror

* Bundles parser.js and demo.js styles using Webpack

* Remove unused dependency

* Update .eslintignore

* change class name for consistency

* Fix Travis build

* Always clear text markers

* Disable eslint-plugin-node rules for all JS files

.babelrc

@@ -0,0 +1,11 @@
+{
+    "presets": [
+      "@babel/preset-react",
+      ["@babel/preset-env", {
+        "modules": false,
+        "targets": {
+          "browsers": ["last 3 versions"]
+        }
+      }]
+    ]
+  }

.eslintignore

@@ -1,3 +1,7 @@
-js/app/eslint.js
-js/app/espree.js
-js/app/parser/index.built.js
+node_modules
+vendor
+_site
+assets/build
+src/js/eslint.js
+src/js/espree.js
+!.*.js

.eslintrc.js

@@ -0,0 +1,79 @@
+"use strict";
+
+module.exports = {
+    root: true,
+    extends: ["eslint"],
+    parserOptions: {
+        ecmaVersion: 2019
+    },
+    rules: {
+
+        // Disable eslint-plugin-node rules from eslint-config-eslint
+        "no-process-exit": "off",
+        "node/no-deprecated-api": "off",
+        "node/no-extraneous-require": "off",
+        "node/no-missing-require": "off",
+        "node/no-unpublished-bin": "off",
+        "node/no-unpublished-require": "off",
+        "node/no-unsupported-features/es-builtins": "off",
+        "node/no-unsupported-features/es-syntax": "off",
+        "node/no-unsupported-features/node-builtins": "off",
+        "node/process-exit-as-throw": "off",
+        "node/shebang": "off",
+        "node/no-extraneous-import": "off",
+        "node/no-missing-import": "off",
+        "node/no-unpublished-import": "off",
+
+        // Disable rules that the codebase doesn't currently follow.
+        "require-jsdoc": "off"
+    },
+    overrides: [
+        {
+            files: ["src/js/**/*.{js,jsx}"],
+            plugins: ["react", "jsx-a11y"],
+            extends: ["plugin:react/recommended", "plugin:jsx-a11y/recommended"],
+            parserOptions: {
+                sourceType: "module",
+                ecmaFeatures: {
+                    jsx: true
+                }
+            },
+            settings: {
+                react: {
+                    version: "15.0.1"
+                }
+            },
+            rules: {
+
+                // Disable rules that the codebase doesn't currently follow.
+                // It might be a good idea to enable these in the future.
+                "jsx-a11y/no-onchange": "off",
+                "react/prop-types": "off"
+            }
+        },
+        {
+            files: ["assets/js/*.js"],
+            parserOptions: {
+                ecmaVersion: 5,
+                sourceType: "script"
+            }
+        },
+        {
+            files: ["assets/js/*.js", "src/js/**/*.{js,jsx}"],
+            env: {
+                browser: true,
+                node: false
+            },
+            rules: {
+
+                // Disable rules that assume an ES6 environment.
+                // This is not a complete list. More rules should be added as problems are encountered.
+                "no-var": "off",
+                "object-shorthand": "off",
+                "prefer-arrow-callback": "off",
+                "prefer-rest-params": "off",
+                "prefer-template": "off"
+            }
+        }
+    ]
+};

.gitignore

@@ -1,5 +1,6 @@
 node_modules/
 _site/
+assets/build
 Gemfile.lock
 .jekyll-metadata
 npm-debug.log

.travis.yml

@@ -5,5 +5,8 @@ cache: bundler
 branches:
   only:
     - master
+before_install:
+  - nvm install 8
+  - npm install
 script:
-  - bundle exec jekyll build
+  - npm run lint && npm run build

404.md

@@ -3,7 +3,7 @@ title: 404
 layout: doc
 ---
 
-# 4![0](/img/logo.svg)4
+# 4![0](/assets/img/logo.svg)4
 {:.four-oh-four-header}
 ## Something’s missing
 ### [Go home](/) or [check out the rules](/docs/rules)?

_config.dev.yml

@@ -15,6 +15,7 @@ exclude:
   - Gemfile.lock
   - package.json
   - node_modules
+  - src
   - sitemap.xml
   - feed.xml
   - docs/0.24.1
@@ -24,4 +25,4 @@ exclude:
   - docs/2.13.1
   - docs/3.0.0
   - docs/4.0.0
-  - docs/5.0.0
+  - docs/5.0.0

_config.yml

@@ -1,10 +1,9 @@
 title: "ESLint - Pluggable JavaScript linter"
 repository: "eslint/eslint.github.io"
-exclude: [
-  'node_modules',
-  'bower_components',
-  'vendor'
-]
+exclude:
+  - node_modules
+  - src
+  - vendor
 description: "A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease."
 permalink: /blog/:year/:month/:title
 plugins:

_includes/footer.html

@@ -36,7 +36,7 @@
   htmlClassList.add("js");
   </script>
   {% if page.homepage %}
-  <script src="{{ site.url }}/js/app/image-lazy-loader.js" defer></script>
+  <script src="{{ site.url }}/assets/js/image-lazy-loader.js" defer></script>
   {% endif %}
   <script>
     document.addEventListener('DOMContentLoaded', function() {
@@ -110,7 +110,7 @@
   </script>
 
   {% if page.demopage %}
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js" data-main="/js/app/demo/requireConfig" defer></script>
+    <script src="{{ site.url }}/assets/build/js/demo.js"></script>
   {% endif %}
 </body>
 </html>

_includes/header.html

@@ -11,14 +11,14 @@
   <meta property="og:site_name" content="{{ site.title }}">
   <meta property="og:title" content="{{ page.title }}">
   <meta property="og:url" content="{{ site.url }}{{ page.url }}">
-  <meta property="og:image" content="{{ site.url }}/img/favicon.512x512.png">
+  <meta property="og:image" content="{{ site.url }}/assets/img/favicon.512x512.png">
 
   <meta name="twitter:site" content="@geteslint">
   <meta name="twitter:title" content="{{ page.title }}">
   <meta name="twitter:description" content="{{ site.description }}">
   <meta name="twitter:url" content="{{ site.url }}{{ page.url }}">
   <meta name="twitter:card" content="summary">
-  <meta name="twitter:image" content="{{ site.url }}/img/favicon.512x512.png">
+  <meta name="twitter:image" content="{{ site.url }}/assets/img/favicon.512x512.png">
 {% if page.title != site.title %}
     {% if page.title != "ESLint" %}
         <title>{{ page.title }} - {{ site.title }}</title>
@@ -30,9 +30,9 @@
 {% endif %}
   <link rel="preconnect" href="https://www.google-analytics.com">
   <link href="{{ site.url }}{{ page.url }}" rel="canonical" />
-  <link rel="stylesheet" href="{{ site.url }}/styles/main.css"/>
+  <link rel="stylesheet" href="{{ site.url }}/assets/build/styles/main.css"/>
   <link rel='manifest' href='{{ site.url }}/manifest.json'>
-  <link rel="icon" href="{{ site.url }}/img/favicon.512x512.png">
+  <link rel="icon" href="{{ site.url }}/assets/img/favicon.512x512.png">
   <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ site.url }}/feed.xml">
   <!-- at the end of the HEAD -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />

_includes/menu.html

@@ -2,7 +2,7 @@
 <header class="navbar navbar-default navbar-demo navbar-fixed-top eslint-nav" id="top" role="banner">
   <div class="container">
 
-    <a href="{{ site.url }}/" class="navbar-brand"><img alt="ESLint" src="{{ site.url }}/img/logo.svg" itemprop="image">ESLint</a>
+    <a href="{{ site.url }}/" class="navbar-brand"><img alt="ESLint" src="{{ site.url }}/assets/img/logo.svg" itemprop="image">ESLint</a>
 
     <div class="eslint-navbar-toggles">
       <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#eslint-navbar" aria-controls="eslint-navbar" aria-expanded="false">

_layouts/demo.html

@@ -1,6 +1,5 @@
 {% include header.html %}
 {% include menu.html %}
-<link rel="stylesheet" property="stylesheet" type="text/css" href="/styles/vendor/orion-built-editor.css" />
 <main class="container">
     {{ content }}
 </main>

_tools/fetch-sponsors.js

@@ -30,7 +30,7 @@ const sponsors = {
     backers: []
 };
 
-const graphqlEndpoint = 'https://api.opencollective.com/graphql/v2';
+const graphqlEndpoint = "https://api.opencollective.com/graphql/v2";
 
 const graphqlQuery = `{
   account(slug: "eslint") {
@@ -65,9 +65,9 @@ const graphqlQuery = `{
 
     // fetch the data
     const result = await fetch(graphqlEndpoint, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ query: graphqlQuery }),
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ query: graphqlQuery })
     });
     const orders = await result.json().then(res => res.data.account.orders.nodes);
 
@@ -78,7 +78,7 @@ const graphqlQuery = `{
             name: order.fromAccount.name,
             url: order.fromAccount.website,
             image: order.fromAccount.imageUrl,
-            monthlyDonation: order.frequency === 'year' ? Math.round(order.amount.value * 100 / 12) : order.amount.value * 100,
+            monthlyDonation: order.frequency === "year" ? Math.round(order.amount.value * 100 / 12) : order.amount.value * 100,
             totalDonations: order.totalDonations.value * 100
         };
 

_tools/fetch-team-data.js

@@ -84,10 +84,8 @@ const team = {
     }
 
     // filter out TSC members and reviewers from committers list
-    team.committers = team.committers.filter(user => {
-        return !team.tsc.find(tscmember => tscmember.username === user.username)
-            && !team.reviewers.find(tscmember => tscmember.username === user.username);
-    });
+    team.committers = team.committers.filter(user => !team.tsc.find(tscmember => tscmember.username === user.username) &&
+            !team.reviewers.find(tscmember => tscmember.username === user.username));
 
     fs.writeFileSync(filename, JSON.stringify(team, null, "    "), { encoding: "utf8" });
 })();

demo/index.html

@@ -3,9 +3,6 @@
 layout: demo
 demopage: true
 ---
-
-<link rel="stylesheet" property="stylesheet" href="../styles/demo.css"/>
-
 <div id="app">
     <div class="loading-demo-message">
         Loading...