eslint / archive-website

The ESLint website

ESLint Web Site

This contains the code running on eslint.org.

Pull Requests

Please note that all HTML documentation is split between this repository and the main ESLint repository. Documentation for rules and APIs is located in the core repository, the rest is located in this repository. You can easily determine if original documentation file is native to website repository by checking for <!-- Note: No pull requests accepted for this file. See README.md in the root directory for details. --> comment just below the header of the markdown file. If that header is present, this file is located in the core ESLint repository and any pull requests should be sent there. Otherwise, file is native to this site repository and can be fixed by creating a pull request in this repository.

How to add your company/project logo to the site

• Create a fork of this repository.
• Clone it locally.
• Create a new branch.
• Add your logo image to /assets/img/logos/ directory. Logo should be at least 150px of height. Name your logo with your company/project name.
• Update /_data/logos.yml file and add an entry for your company with the name, url and src (should point to the logo you just added).
• Commit your changes to your fork and create a pull request into the main repository.

Developer Setup

This website is built with Eleventy and is hosted on Netlify.

Local development

To set up a local development environment, install Node.js (be sure to follow the instructions for your platform) and follow the steps below:

# Clone the repository
git clone [email protected]:eslint/website.git eslint-website

# Navigate to the root directory
cd eslint-website

# Install dependencies
npm install

Once you have set up your environment, you can run a copy of the website locally using this command:

npm start

This will watch for changes to the source code and rebuild the website, which will be hosted at http://localhost:8080/.

License

MIT License

archive-website's Issues

Demo's annotations are not 1-based column

Add rule configuration option to the demo

ESLint has a ton of different rules, I think it would be good to add ability for users to play with different rules on the demo page. For that, we need to expose a way to configure them. It would be even cooler, if we would allow to use plugins, but I don't think that's possible with the current setup.

Grouping a list of rules in the demo

It would be great if the rules in the list would be somehow grouped.

For example as in the documentation.

no-param-reassign "Version" section problem

http://eslint.org/docs/rules/no-param-reassign contains the text "## Version" under the "Further Reading" section. Presumably the start of a new section entitled "Version" was intended instead.

The es6 option doesn't work in demo

When I enable the es6 environment at http://eslint.org/demo/, the following basic code:

let x;

is still not recognized:

1:2 - Unexpected token let (undefined)

No clear install instructions

I was told by a coworker that we were moving to eslint, so I came to the website and scoured it looking for the big "install now!" button or some call-to-action... looked through the "configuring eslint" page, then tried the "about" page, then clicked the "latest news link" but the install instructions looked strange as it said it was a "pre-release" version... because I'd clicked on everything else I thought I'd give "Command Line Interface" a go, and for some reason that's where the install instructions were.

Not a big deal, but I just thought I'd let you know my experience.

Link from 0.24 release blog to "preparing for 1.0.0" broken

The link "the release plans" on the 0.24.0 blog post is a relative link that naviates to http://eslint.org/blog/2015/06/eslint-0.24.0-released/preparing-for-1.0.0 instead of http://eslint.org/blog/2015/06/preparing-for-1.0.0/, giving a 404 error.

Register sitemap in Bing developer tools

Google webmaster tools are all set now. We should also register the site on bing as well. @nzakas could you create an account here please: http://www.bing.com/toolbox/webmaster and give me access? I'd rather you have ownership of all of those accounts.

Long lines of code in <pre> blocks wrap to next line

On smaller screens, or for longer lines of code, the current behavior is to wrap to the next line. This reduces readability, and will become more of an issue when eslint/eslint@0873e01 hits the site, as there are some long error comments. For example:

I propose instead to allow scrollbars like:

Note: @ilyavolodin has also suggested to only display the number of expected issues if there are more than one, but that can be discussed in a separate issue. Regardless, small screens and long error messages will continue to cause problems unless this issue is addressed.

Publish documentation translations

We have the opportunity to have Chinese translations for our documentation. Some things we need to figure out:

1. How would we store this documentation in the repo? (Is it a separate repo?)
2. How will people get to it? (cn.ESLint.org? eslint.org/cn?)
3. How can we do this in a way that doesn't negatively affect SEO?

Demo: Add Ability to Configure Rules

Currently there is no way to configure rules in the demo.

I'd like to add the ability to read .eslintrc files directly and for them to update the rule-set as well as the ability to configure rules.

There are several possible UI treatments, I'd love feedback on the best way before I move forward.

My current thought is to just have a file-upload box that will update the configuration.

And instead of a checkbox everything will become an input box. This is buggy, but easier than the alternative which is schema checking.

Demo: Update Without OK Button

Per #137 we should just let each option automatically update the options.

I can do this.

Add Respond.js for legacy support

IE6-8 is really not important at all anymore. But considering it's a one line change, we should probably do it.

ESLint Demo Page

Add embeddable text editor. Orion is first choice. Go with Codemirror for the first version if Orion will take too much time and research.

Local Storage cache is not auto-clearing

Since the demo stores all of the rules into local storage, and doesn't have any mechanize for clearing it, new releases do not add new rules to demo for people who viewed the site earlier. We should somehow clear the local storage after every release.

Site was not regenerated correctly for 0.19.0 release

Stuff is missing that should've been there. Like my commit: eslint/eslint#2204 doesn't seem to be present in the new version of the site. Not sure what went wrong.

Demo: Rules configuration tooltips not including examples

On the demo page, some of the checkbox tooltips within the Rules Configuration section are written with the intent to include examples. These examples do not appear as they're not being included in the markup for the toolip:

Hard to separate working blocks from failing ones

I know the docs are autogenerated. But maybe there's a way to do that:

Currently, every block is formatted the same way. It would be much clearer to use some sort of color coding to separate the "good" examples from the ones that fail tests. A good example for color coding is found on bootstrap.

Would be looking like that:

eol-last documentation page is confusing

Compare: http://eslint.org/docs/rules/eol-last
With: https://github.com/eslint/eslint/blob/master/docs/rules/eol-last.md

The newlines got stripped in the code block, making the examples impossible to understand.

Add Espree Parser

Let's do an updated version of this using espree:
http://esprima.org/demo/parse.html

We could borrow the style used here:
https://babeljs.io/repl/

Add Anchor links to sections in the docs

It would be nice to link directly to various sections in the docs and developer guide via anchor links.

I happen to maintain a tool that helps with that and would be happy to help set it up.

Add Integrations to the site

I can't seem to find Integrations (https://github.com/eslint/eslint/tree/master/docs/integrations) on the site. It would be very nice to add it in.

Algolia search failing in Travis

Looks like the Travis setup isn't quite working.

https://travis-ci.org/eslint/eslint.github.io/builds/92346666

@pixelastic any ideas?

Mobile cleanup

• Tweak jumbotron background position
• Correct jumbotron heading letterspacing
• Remove jank in menu transition
• Improve type contrast for lead-in text

Clean up site's code

Each page on the site includes two 404s for the following files:
http://eslint.org/js/vendor/codemirror-js-mode.js
http://eslint.org/js/main.js

Those are not necessary, so they should be removed from the main template.

Add a note that search is provided by Algolia

Would a note in the footer of search autocomplete work? CC: @pixelastic

Lint es6 code in demo

Please, add more Environments to demo page.

Move and restructure documentation

As mentioned in #31 we should move some of the documentation out of ESLint repository and into this one. I suggest we not only move it, we also restructure some of it. I propose removing "Docs" link on the website all together and then:

• Moving "Architecture" under "Developer Guide".
• Renaming "Configuring" to "Configuration" and making it a top level menu, and then moving "Command Line" under it.
• Moving "Integrations" somewhere... Not sure where, maybe under "Configuration" or "About"?

After the move, the only folders that should be left in ESLint repository are: "Rules", "Developer Guide" and "Configuring". Everything else should be under this repository. Ideally, I would also move out everything from under "Developer Guide" here, except for "Working with Rules" and "Working with Plugins", but I think that could be done a bit later, as a separate pull request.

How does that sounds?

Fix Contributing section of the site

Since documentation has been moved around, contributing section is now incorrect (it still says all documentation is in eslint repo). That should be fixed.

0.22.0 and 0.22.1 blog posts incorrectly dated

The blog posts for the 0.22.0 and 0.22.1 releases are dated the 30th of June, 2015, which has not yet occurred. They should be dated for the 30th of May, 2015.

Documentation: word missing in output

(Copied from eslint/eslint#2297)

On Working with rules under the context.report() heading, the source reads:

context.report(node, "`{{identifier}}` is unexpected!", { identifier: node.name });

But the output shows:

Create a section of the site with links to tutorials

There's already a few tutorials/articles out there on how to setup ESLint. It would be nice to have a section of the site with those links. Some of them explain how to configure ESLint much better then our documentation does. Although, maybe the goal should be to have our documentation be better then those articles?:-)

Code Conventions document should be linked in Contributing doc

(Migrated from eslint/eslint)

I spent a while digging around for the Code Conventions doc because I couldn't remember where info on @author and @copyright could be found, and unfortunately it's not part of the "Developer guide" menu of the site. Any chance that could be fixed?

(N.B. This is a documentation issue, not a code issue, so not supplying any version or test case information.)

---

Actually, now I'm seeing that even many of the articles in "Contributing" (e.g., "Working on Issues", "Submitting a Pull Request") are themselves not linked in the top menu. In that case, I think it makes more sense for "Code Conventions" to be linked in the "Contributing" page, but not in the top-level menu or in the "Developer Guide" page.

For me, the bigger problem was having to search in "Contributing" --> "Submitting a Pull Request" --> "Step 6: Double check your submission", where it is finally linked at the bottom. The coding conventions are important! I'm just asking that they go a little higher in the hierarchy, like in "Contributing". 😄

Demo: Demo does not work in Firefox

I get two errors in Firefox 42.0 (using Firebug console). Unfortunately, I'm not sure which of these are relevant. Sorry.

ReferenceError: algoliasearch is not defined
var client = algoliasearch('XWXG7MEBSB', '653e00f423bee91f9863571eed16f2f5');

search.js (line 5, col 7)

And:

TypeError: b is undefined
...}),k=d||new h({input:f,eventBus:j,hint:void 0===b.hint?!0:!!b.hint,minLength:b.m...

The second one seems to be from autocomplete.min.js, but not 100% sure.

The odd thing is, I actually get similar errors in Chrome, so... if my diagnostics are useless, I apologize.

Demo: an ability to specify code with URL.

I want to use demo to report issues.
I'm happy if I can specify code with URL.

Such as:

http://eslint.org/demo/#code=var%20foo%20%3D%20%22Hello%20World!%22

var foo = "Hello World!";

Demo: Add "Check/Uncheck All Rules" button

Sometimes I'd like to turn off all rules besides the one I am interested in. It would be nice if there was a quick way to turn them all off.

Demo: Should also include rule name in the error messages

I think it would be a good idea to include rule names inside the error messages. It will be consistent based on how eslint works and also it helps to find out which rule is throwing errors.

Layouts

Work on column width, positioning, type hierarchy, and sidebar content where needed.

• Main landing page
• Docs pages
• Blog index
• Blog post

Lots of broken links in http://eslint.org/docs/rules/

Lots of rule documentation links end on .md as for http://eslint.org/docs/rules/no-alert.md
Some links to documentation rules end with .html which leads to a page like http://eslint.org/docs/rules/no-implied-eval.html

Repository lacks .gitignore

Since there are devDependencies, it's worth adding a .gitignore file to ensure node_modules don't accidentally get committed.

1.0.0 Migration Guide is hard to find

It might be worth adding a link to one or all of the following:

• Getting Started guide
• The User Guide menu
• The homepage itself

Add Architecture to Developer Guide menu/index

Right now, the Architecture page isn't linked from anywhere. It should be part of the Developer Guide listing.

Add users page

I really like what Babel did with this page: http://babeljs.io/users/

I'd like to have something similar for the site.

SEO issues

This is a list of issues with the site that can improve SEO.

• Fix page titles. Rule documentation should list rule name, all the pages should include major keywords in the title "JavaScript" and "Linting". Titles should be changed to "ESLint - Pluggable JavaScript linter" or something like that.
• Page descriptions should be modified to expand on the title. Should also include all major keywords
• meta keywords should be added.
• WMT account for both Google and Bing should be registered to add XML sitemap
• Minor bugs like missing alt tags for images and W3C validation errors should be fixed.
• Content on the homepage should be expanded.

It would be good to be able to search for rules on the site

I wanted to search for the equivalent of jscs disallowKeywordsOnNewLine but couldn't find an easy way. Would be great if I could do that.

It's hard to find out if a given rule is on/off by default

The top of the rules page says:

Though none are enabled by default, some are specifically recommended by ESLint and may be turned on using configuration.

But I can't find any further explanation of which configuration setting will turn on which rules.

On a specific docs page, e.g. no-const-assign, there is no mention of if/when the rule is enabled by default. Does this mean the rule is never on-by-default, even with the es6 env enabled?

It would be helpful if every rule page explicitly stated what its default setting is (0, 1 or 2), and which config conditions can change this default, if any.

Demo: Export settings function

Hi,

Recently I had to setup a new dev machine, including re-installing things like eslint.

Couldn't remember how to start using it so I went to the demo page and found myself searching for some "export these settings" functionality.

I don't know how people use the demo page but if trivial to make that functionality might be a cool addition.

Just my 2 cents, feel free to close this "issue" at will! 😃

Update demo to use CodeMirror

Change the text entry to use CodeMirror so we can see lint errors inline. Code donated from here:
https://github.com/angelozerr/codemirror-lint-eslint

We just need to integrate it.

Favicons

Generate favicons for various platforms. Update template to point to correctly-sixed favicon sources.

Git Precommit Hook doesn't check new files

The Git Precommit Hook suggested in the Integrations page doesn't check new created files. Shouldn't be interesting to provide a more robust hook?