Lint website (#1519)

* Lint website * Add comment to empty_thead.js
2025-10-05 11:18:39 +00:00 · 2018-07-28 23:49:36 +09:00
parent 4114288403
commit db2aecce24
10 changed files with 248 additions and 199 deletions
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,2 +1,3 @@
 **/node_modules/*
 dist/*
+website/build/*
--- a/package-lock.json
+++ b/package-lock.json
@@ -3646,6 +3646,18 @@
        "lodash": "^4.17.10"
      }
    },
+    "eslint-plugin-react": {
+      "version": "7.10.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.10.0.tgz",
+      "integrity": "sha512-18rzWn4AtbSUxFKKM7aCVcj5LXOhOKdwBino3KKWy4psxfPW0YtIbE8WNRDUdyHFL50BeLb6qFd4vpvNYyp7hw==",
+      "dev": true,
+      "requires": {
+        "doctrine": "^2.1.0",
+        "has": "^1.0.3",
+        "jsx-ast-utils": "^2.0.1",
+        "prop-types": "^15.6.2"
+      }
+    },
    "eslint-scope": {
      "version": "3.7.1",
      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-3.7.1.tgz",
@@ -4695,9 +4707,9 @@
      }
    },
    "has": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has/-/has-1.0.2.tgz",
-      "integrity": "sha512-D5/WxwX+SrGfs/fiQn34RAoIZkCLJBDEfBWS1kmTI6G/1mtjhxTBiIiJi8EsKhwaQqKqj7lpKOi3i69tg3P+OQ==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
      "dev": true,
      "requires": {
        "function-bind": "^1.1.1"
@@ -6841,6 +6853,15 @@
        "verror": "1.10.0"
      }
    },
+    "jsx-ast-utils": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz",
+      "integrity": "sha1-6AGxs5mF4g//yHtA43SAgOLcrH8=",
+      "dev": true,
+      "requires": {
+        "array-includes": "^3.0.3"
+      }
+    },
    "jszip": {
      "version": "3.1.5",
      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.1.5.tgz",
@@ -9725,6 +9746,16 @@
      "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
      "dev": true
    },
+    "prop-types": {
+      "version": "15.6.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
+      "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+      "dev": true,
+      "requires": {
+        "loose-envify": "^1.3.1",
+        "object-assign": "^4.1.1"
+      }
+    },
    "proxy-addr": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.3.tgz",
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
    "cssnano": "^4.0.1",
    "eslint": "^5.0.0",
    "eslint-plugin-flowtype": "^2.40.1",
+    "eslint-plugin-react": "^7.10.0",
    "file-loader": "^1.1.11",
    "flow-bin": "^0.77.0",
    "husky": "^1.0.0-rc.8",
@@ -61,7 +62,7 @@
  "bin": "cli.js",
  "scripts": {
    "test": "npm run prestart && npm run test:lint && npm run test:flow && npm run test:jest",
-    "test:lint": "eslint katex.js katex.webpack.js cli.js webpack.*.js src static test contrib dockers && stylelint src/katex.less",
+    "test:lint": "eslint katex.js katex.webpack.js cli.js webpack.*.js src static test contrib dockers website && stylelint src/katex.less",
    "test:flow": "flow",
    "test:jest": "jest",
    "test:jest:watch": "jest --watch",
--- a/website/.eslintrc
+++ b/website/.eslintrc
@@ -0,0 +1,8 @@
+{
+    "extends": [
+        "plugin:react/recommended"
+    ],
+    "rules": {
+        "react/prop-types": 0
+    }
+}
--- a/website/core/Footer.js
+++ b/website/core/Footer.js
@@ -8,89 +8,88 @@
 const React = require('react');

 class Footer extends React.Component {
-  docUrl(doc, language) {
-    const baseUrl = this.props.config.baseUrl;
-    return baseUrl + 'docs/' + (language ? language + '/' : '') + doc;
-  }
+    docUrl(doc, language) {
+        const baseUrl = this.props.config.baseUrl;
+        return baseUrl + 'docs/' + (language ? language + '/' : '') + doc;
+    }

-  pageUrl(doc, language) {
-    const baseUrl = this.props.config.baseUrl;
-    return baseUrl + (language ? language + '/' : '') + doc;
-  }
+    pageUrl(doc, language) {
+        const baseUrl = this.props.config.baseUrl;
+        return baseUrl + (language ? language + '/' : '') + doc;
+    }

-  render() {
-    const currentYear = new Date().getFullYear();
-    return (
-      <footer className="nav-footer" id="footer">
-        <section className="sitemap">
-          <a href={this.props.config.baseUrl} className="nav-home">
-            {this.props.config.footerIcon && (
+    render() {
+        return (
+          <footer className="nav-footer" id="footer">
+            <section className="sitemap">
+              <a href={this.props.config.baseUrl} className="nav-home">
+                {this.props.config.footerIcon && (
+                  <img
+                    src={this.props.config.baseUrl + this.props.config.footerIcon}
+                    alt={this.props.config.title}
+                    width="66"
+                    height="58"
+                  />
+                )}
+              </a>
+              <div>
+                <h5>Docs</h5>
+                <a href={this.docUrl('node.html', this.props.language)}>
+                  Installation
+                </a>
+                <a href={this.docUrl('api.html', this.props.language)}>
+                  Usage
+                </a>
+                <a href={this.docUrl('options.html', this.props.language)}>
+                  Configuration
+                </a>
+                <a href={this.docUrl('support.html', this.props.language)}>
+                  Misc
+                </a>
+              </div>
+              <div>
+                <h5>Community</h5>
+                <a href={this.pageUrl('users.html', this.props.language)}>
+                  Who is using KaTeX?
+                </a>
+                <a href="https://gitter.im/Khan/KaTeX">Gitter Chat</a>
+                <a
+                  href="http://stackoverflow.com/questions/tagged/katex"
+                  target="_blank"
+                  rel="noreferrer noopener">
+                  Stack Overflow
+                </a>
+              </div>
+              <div>
+                <h5>More</h5>
+                <a
+                  className="github-button"
+                  href={this.props.config.repoUrl}
+                  data-icon="octicon-star"
+                  data-count-href="/Khan/KaTeX/stargazers"
+                  data-show-count={true}
+                  data-count-aria-label="# stargazers on GitHub"
+                  aria-label="Star this project on GitHub">
+                  Star
+                </a>
+              </div>
+            </section>
+
+            <a
+              href="https://www.khanacademy.org/"
+              target="_blank" // eslint-disable-line react/jsx-no-target-blank
+              className="fbOpenSource">
              <img
-                src={this.props.config.baseUrl + this.props.config.footerIcon}
-                alt={this.props.config.title}
-                width="66"
-                height="58"
+                src={this.props.config.baseUrl + 'img/khan-academy.png'}
+                alt="Khan Academy"
+                width="180"
+                height="17"
              />
-            )}
-          </a>
-          <div>
-            <h5>Docs</h5>
-            <a href={this.docUrl('node.html', this.props.language)}>
-              Installation
            </a>
-            <a href={this.docUrl('api.html', this.props.language)}>
-              Usage
-            </a>
-            <a href={this.docUrl('options.html', this.props.language)}>
-              Configuration
-            </a>
-            <a href={this.docUrl('support.html', this.props.language)}>
-              Misc
-            </a>
-          </div>
-          <div>
-            <h5>Community</h5>
-            <a href={this.pageUrl('users.html', this.props.language)}>
-              Who is using KaTeX?
-            </a>
-            <a href="https://gitter.im/Khan/KaTeX">Gitter Chat</a>
-            <a
-              href="http://stackoverflow.com/questions/tagged/katex"
-              target="_blank"
-              rel="noreferrer noopener">
-              Stack Overflow
-            </a>
-          </div>
-          <div>
-            <h5>More</h5>
-            <a
-              className="github-button"
-              href={this.props.config.repoUrl}
-              data-icon="octicon-star"
-              data-count-href="/Khan/KaTeX/stargazers"
-              data-show-count={true}
-              data-count-aria-label="# stargazers on GitHub"
-              aria-label="Star this project on GitHub">
-              Star
-            </a>
-          </div>
-        </section>
-
-        <a
-          href="https://www.khanacademy.org/"
-          target="_blank"
-          className="fbOpenSource">
-          <img
-            src={this.props.config.baseUrl + 'img/khan-academy.png'}
-            alt="Khan Academy"
-            width="180"
-            height="17"
-          />
-        </a>
-        <section className="copyright">{this.props.config.copyright}</section>
-      </footer>
-    );
-  }
+            <section className="copyright">{this.props.config.copyright}</section>
+          </footer>
+        );
+    }
 }

 module.exports = Footer;
--- a/website/empty_thead.js
+++ b/website/empty_thead.js
@@ -1,3 +1,6 @@
+/**
+ * Plugin for Remarkable Markdown processor which removes empty thead of tables
+ */
 module.exports = function(md, options) {
    function removeEmptyThead(state) {
        const tokens = state.tokens;
--- a/website/pages/en/users.js
+++ b/website/pages/en/users.js
@@ -7,43 +7,42 @@

 const React = require('react');

-const CompLibrary = require('../../core/CompLibrary.js');
-const Container = CompLibrary.Container;
+const {Container} = require('../../core/CompLibrary.js');

 const siteConfig = require(process.cwd() + '/siteConfig.js');

 class Users extends React.Component {
-  render() {
-    if ((siteConfig.users || []).length === 0) {
-      return null;
-    }
-    const editUrl = siteConfig.repoUrl + '/edit/master/website/siteConfig.js';
-    const showcase = siteConfig.users.map((user, i) => {
-      return (
-        <a href={user.infoLink} key={i}>
-          <img src={user.image} alt={user.caption} title={user.caption} />
-        </a>
-      );
-    });
+    render() {
+        if ((siteConfig.users || []).length === 0) {
+            return null;
+        }
+        const editUrl = siteConfig.repoUrl + '/edit/master/website/siteConfig.js';
+        const showcase = siteConfig.users.map((user, i) => {
+            return (
+              <a href={user.infoLink} key={i}>
+                <img src={user.image} alt={user.caption} title={user.caption} />
+              </a>
+            );
+        });

-    return (
-      <div className="mainContainer">
-        <Container padding={['bottom', 'top']}>
-          <div className="showcaseSection">
-            <div className="prose">
-              <h1>Who is Using KaTeX?</h1>
-              <p>KaTeX is used by many projects</p>
-            </div>
-            <div className="logos">{showcase}</div>
-            <p>Are you using KaTeX?</p>
-            <a href={editUrl} className="button">
-              Add your project
-            </a>
+        return (
+          <div className="mainContainer">
+            <Container padding={['bottom', 'top']}>
+              <div className="showcaseSection">
+                <div className="prose">
+                  <h1>Who is Using KaTeX?</h1>
+                  <p>KaTeX is used by many projects</p>
+                </div>
+                <div className="logos">{showcase}</div>
+                <p>Are you using KaTeX?</p>
+                <a href={editUrl} className="button">
+                  Add your project
+                </a>
+              </div>
+            </Container>
          </div>
-        </Container>
-      </div>
-    );
-  }
+        );
+    }
 }

 module.exports = Users;
--- a/website/remarkableKatex.js
+++ b/website/remarkableKatex.js
@@ -22,30 +22,32 @@ SOFTWARE.
 */

 /**
- * Plugin for Remarkable Markdown processor which transforms $..$ and $$..$$ sequences into math HTML using the
- * Katex package.
+ * Plugin for Remarkable Markdown processor which transforms $..$ and $$..$$
+ * sequences into math HTML using the KaTeX package.
 */
 module.exports = function(md, options) {
-    var katex = require("../");
+    const katex = require("../");

    function renderKatex(source, displayMode) {
-        return katex.renderToString(source, {displayMode: displayMode, throwOnError: false});
+        return katex.renderToString(source, {displayMode, throwOnError: false});
    }

    /**
-     * Parse '$$' as a block. I don't think this is needed since it is already done in the parseInlineKatex
-     * method. Based off of similar method in remarkable.
+     * Parse '$$' as a block. Based off of similar method in remarkable.
     */
    function parseBlockKatex(state, startLine, endLine) {
-        var marker, len, params, nextLine, mem,
-            haveEndMarker = false,
-            pos = state.bMarks[startLine] + state.tShift[startLine],
-            max = state.eMarks[startLine];
-        var dollar = 0x24;
+        let len;
+        let params;
+        let nextLine;
+        let mem;
+        let haveEndMarker = false;
+        let pos = state.bMarks[startLine] + state.tShift[startLine];
+        let max = state.eMarks[startLine];
+        const dollar = 0x24;

        if (pos + 1 > max) { return false; }

-        marker = state.src.charCodeAt(pos);
+        const marker = state.src.charCodeAt(pos);
        if (marker !== dollar) { return false; }

        // scan marker length
@@ -53,7 +55,7 @@ module.exports = function(md, options) {
        pos = state.skipChars(pos, marker);
        len = pos - mem;

-        if (len != 2)  { return false; }
+        if (len !== 2)  { return false; }

        // search end of block
        nextLine = startLine;
@@ -61,7 +63,6 @@ module.exports = function(md, options) {
        for (;;) {
            ++nextLine;
            if (nextLine >= endLine) {
-
                // unclosed block should be autoclosed by end of document.
                // also block seems to be autoclosed by end of parent
                break;
@@ -71,14 +72,13 @@ module.exports = function(md, options) {
            max = state.eMarks[nextLine];

            if (pos < max && state.tShift[nextLine] < state.blkIndent) {
-
                // non-empty line with negative indent should stop the list:
                // - ```
                //  test
                break;
            }

-            if (state.src.charCodeAt(pos) !== dollar) { continue };
+            if (state.src.charCodeAt(pos) !== dollar) { continue; }

            if (state.tShift[nextLine] - state.blkIndent >= 4) {

@@ -102,34 +102,39 @@ module.exports = function(md, options) {
            break;
        }

-        // If a fence has heading spaces, they should be removed from its inner block
+        // If a fence has heading spaces, they should be removed from
+        // its inner block
        len = state.tShift[startLine];

        state.line = nextLine + (haveEndMarker ? 1 : 0);

-        var content = state.getLines(startLine + 1, nextLine, len, true)
-                           .replace(/[ \n]+/g, ' ')
-                           .trim();
+        const content = state.getLines(startLine + 1, nextLine, len, true)
+                             .replace(/[ \n]+/g, ' ')
+                             .trim();

        state.tokens.push({
            type: 'katex',
-            params: params,
-            content: content,
+            params,
+            content,
            lines: [startLine, state.line],
            level: state.level,
-            block: true
+            block: true,
        });

        return true;
    }

    /**
-     * Look for '$' or '$$' spans in Markdown text. Based off of the 'fenced' parser in remarkable.
+     * Look for '$' or '$$' spans in Markdown text.
+     * Based off of the 'fenced' parser in remarkable.
     */
    function parseInlineKatex(state, silent) {
-        var dollar = 0x24;
-        var pos = state.pos;
-        var start = pos, max = state.posMax, marker, matchStart, matchEnd ;
+        const dollar = 0x24;
+        let pos = state.pos;
+        const start = pos;
+        const max = state.posMax;
+        let matchStart;
+        let matchEnd ;

        if (state.src.charCodeAt(pos) !== dollar) { return false; }
        ++pos;
@@ -138,7 +143,7 @@ module.exports = function(md, options) {
            ++pos;
        }

-        marker = state.src.slice(start, pos);
+        const marker = state.src.slice(start, pos);
        if (marker.length > 2) { return false; }

        matchStart = matchEnd = pos;
@@ -150,17 +155,17 @@ module.exports = function(md, options) {
                ++matchEnd;
            }

-            if (matchEnd - matchStart == marker.length) {
+            if (matchEnd - matchStart === marker.length) {
                if (!silent) {
-                    var content = state.src.slice(pos, matchStart)
-                                           .replace(/[ \n]+/g, ' ')
-                                           .trim();
+                    const content = state.src.slice(pos, matchStart)
+                                             .replace(/[ \n]+/g, ' ')
+                                             .trim();

                    state.push({
                        type: 'katex',
-                        content: content,
+                        content,
                        block: marker.length > 1,
-                        level: state.level
+                        level: state.level,
                    });
                }

@@ -169,7 +174,9 @@ module.exports = function(md, options) {
            }
        }

-        if (! silent) state.pending += marker;
+        if (!silent) {
+            state.pending += marker;
+        }
        state.pos += marker.length;

        return true;
--- a/website/siteConfig.js
+++ b/website/siteConfig.js
@@ -10,73 +10,71 @@

 /* List of projects/orgs using your project for the users page */
 const users = [
-  {
-    caption: 'GitLab',
-    image: 'https://gitlab.com/gitlab-com/gitlab-artwork/raw/master/logo/logo-square.png',
-    infoLink: 'https://gitlab.com/',
-    pinned: true,
-  },
+    {
+        caption: 'GitLab',
+        image: 'https://gitlab.com/gitlab-com/gitlab-artwork/raw/master/logo/logo-square.png',
+        infoLink: 'https://gitlab.com/',
+        pinned: true,
+    },
 ];

 const siteConfig = {
-  title: 'KaTeX',
-  tagline: 'The fastest math typesetting library for the web',
-  url: 'https://khan.github.io',
-  baseUrl: '/KaTeX/',
+    title: 'KaTeX',
+    tagline: 'The fastest math typesetting library for the web',
+    url: 'https://khan.github.io',
+    baseUrl: '/KaTeX/',

-  // Used for publishing and more
-  projectName: 'KaTeX',
-  organizationName: 'Khan',
+    // Used for publishing and more
+    projectName: 'KaTeX',
+    organizationName: 'Khan',

-  headerLinks: [
-    {doc: 'node', label: 'Docs'},
-    {page: 'users', label: 'Users'},
-    {href: 'https://github.com/Khan/KaTeX', label: 'GitHub'},
-    {search: true},
-  ],
+    headerLinks: [
+        {doc: 'node', label: 'Docs'},
+        {page: 'users', label: 'Users'},
+        {href: 'https://github.com/Khan/KaTeX', label: 'GitHub'},
+        {search: true},
+    ],
+    users,

-  // If you have users set above, you add it here:
-  users,
+    /* path to images for header/footer */
+    headerIcon: 'img/katex-logo.svg',
+    footerIcon: 'img/katex-logo.svg',
+    favicon: 'https://khan.github.io/favicon.ico',

-  /* path to images for header/footer */
-  headerIcon: 'img/katex-logo.svg',
-  footerIcon: 'img/katex-logo.svg',
-  favicon: 'https://khan.github.io/favicon.ico',
+    disableHeaderTitle: true,

-  disableHeaderTitle: true,
+    /* colors for website */
+    colors: {
+        primaryColor: '#329894',
+        secondaryColor: '#266e6c',
+    },

-  /* colors for website */
-  colors: {
-    primaryColor: '#329894',
-    secondaryColor: '#266e6c',
-  },
-
-  // This copyright info is used in /core/Footer.js and blog rss/atom feeds.
-  copyright:
+    // This copyright info is used in /core/Footer.js and blog rss/atom feeds.
+    copyright:
    'Copyright © ' +
    new Date().getFullYear() +
    ' Khan Academy',

-  highlight: {
-    // Highlight.js theme to use for syntax highlighting in code blocks
-    theme: 'default',
-  },
+    highlight: {
+        // Highlight.js theme to use for syntax highlighting in code blocks
+        theme: 'default',
+    },

-  markdownPlugins: [require('./remarkableKatex'), require('./empty_thead')],
+    markdownPlugins: [require('./remarkableKatex'), require('./empty_thead')],

-  scripts: ['https://buttons.github.io/buttons.js'],
-  stylesheets: ['https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.css'],
+    scripts: ['https://buttons.github.io/buttons.js'],
+    stylesheets: ['https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.css'],

-  separateCss: ['static/static', 'static\\static'],
+    separateCss: ['static/static', 'static\\static'],

-  /* On page navigation for the current documentation page */
-  onPageNav: 'separate',
+    /* On page navigation for the current documentation page */
+    onPageNav: 'separate',

-  /* Open Graph and Twitter card images */
-  ogImage: 'img/og_logo.png',
-  twitterImage: 'img/og_logo.png',
+    /* Open Graph and Twitter card images */
+    ogImage: 'img/og_logo.png',
+    twitterImage: 'img/og_logo.png',

-  repoUrl: 'https://github.com/Khan/KaTeX',
+    repoUrl: 'https://github.com/Khan/KaTeX',
 };

 module.exports = siteConfig;
--- a/website/static/js/index.js
+++ b/website/static/js/index.js
@@ -1,3 +1,5 @@
+/* eslint-disable no-var */
+/* global katex: false */
 window.startup = function() {
    var tex = document.getElementsByClassName("tex");
    Array.prototype.forEach.call(tex, function(el) {
@@ -10,10 +12,10 @@ window.startup = function() {
    function doDemo() {
        try {
            katex.render(demoInput.value, demoOutput, {
-                displayMode: true
+                displayMode: true,
            });
-        } catch(err) {
-            while(demoOutput.lastChild) {
+        } catch (err) {
+            while (demoOutput.lastChild) {
                demoOutput.removeChild(demoOutput.lastChild);
            }
            var msg = document.createTextNode(err.message);