KaTeX website & documentation (#1484)

* website/docs: initial commit

* Change secondaryColor

* Fix index.css not being copied and included on global stylesheet

* Fix stylesheet link

[skip ci]

* Change documentation link to API(Usage)

[skip ci]

* Add `Libraries` in usage

[skip ci]

* Remove documentation from `README.md` and add link to the site

[skip ci]

* Use KaTeX in the parent directory to build Markdown

[skip ci]

* Revise function support page. Avoid error msgs.

* General edit to function support page

website/core/Footer.js

@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const React = require('react');
+
+class Footer extends React.Component {
+  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;
+  }
+
+  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 && (
+              <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"
+          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>
+    );
+  }
+}
+
+module.exports = Footer;

website/package.json

@@ -0,0 +1,14 @@
+{
+  "scripts": {
+    "start": "docusaurus-start",
+    "build": "docusaurus-build",
+    "publish-gh-pages": "docusaurus-publish",
+    "write-translations": "docusaurus-write-translations",
+    "version": "docusaurus-version",
+    "rename-version": "docusaurus-rename-version"
+  },
+  "devDependencies": {
+    "docusaurus": "^1.3.2"
+  },
+  "dependencies": {}
+}

website/pages/en/users.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const React = require('react');
+
+const CompLibrary = require('../../core/CompLibrary.js');
+const Container = CompLibrary.Container;
+
+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>
+      );
+    });
+
+    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>
+    );
+  }
+}
+
+module.exports = Users;

website/pages/index.html

@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>KaTeX – The fastest math typesetting library for the web</title>
+    <meta name="Description" content="KaTeX – The fastest math typesetting library for the web">
+    <meta property="og:title" content="KaTeX – The fastest math typesetting library for the web">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="http://khan.github.io/KaTeX/">
+    <meta property="og:image" content="http://khan.github.io/KaTeX/og_logo.png">
+    <meta property="og:description" content="Simple API, no dependencies – yet super-fast on all major browsers.">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.js" integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.0/normalize.css" integrity="sha256-7GAtDQ79wTEOjhBKf70uBQG7A5yyb+8rigu07atXWDY=" crossorigin="anonymous">
+    <link href="https://use.fontawesome.com/efe646278d.css" type="text/css" rel="stylesheet">
+    <link href="static/index.css" type="text/css" rel="stylesheet">
+    <script src="//use.typekit.net/ulc1wme.js"></script>
+    <script>try{Typekit.load();}catch(e){}</script>
+  </head>
+  <body>
+    <div class="header"><div class="container">
+      <h1 class="logo tex" data-expr="\KaTeX">KaTeX</h1>
+      <div class="tagline">
+        The <em>fastest</em> math typesetting library for the web.
+      </div>
+      <div class="cta">
+        <a href="docs/node.html" role="button"><i class="fa fa-download"></i> Installation</a>
+        <a href="docs/api.html" role="button"><i class="fa fa-book"></i> Documentation</a>
+        <a href="https://github.com/Khan/KaTeX" role="button"><i class="fa fa-github"></i> View on GitHub</a>
+      </div>
+      <div class="demo">
+        <div class="demo-left">
+          <div class="demo-instructions">
+            <label for="demo-input">Type an expression:</label>
+          </div>
+          <textarea id="demo-input" spellcheck="false">
+f(x) = \int_{-\infty}^\infty
+    \hat f(\xi)\,e^{2 \pi i \xi x}
+    \,d\xi</textarea>
+        </div>
+        <div class="demo-right">
+          <div class="demo-instructions">
+            See how it renders with <span class="tex" data-expr="\KaTeX">KaTeX</span>:
+          </div>
+          <div id="demo-output"></div>
+        </div>
+      </div>
+    </div></div>
+
+    <div class="main"><div class="container">
+      <div class="subtagline">
+        Simple API, no dependencies – yet super-fast on all major browsers.
+      </div>
+
+      <ul class="features">
+        <li><b>Fast:</b> KaTeX renders its math synchronously and doesn&rsquo;t need to reflow the page.</li>
+        <li><b>Print quality:</b> KaTeX&rsquo;s layout is based on Donald Knuth&rsquo;s TeX, the gold standard for math typesetting.</li>
+        <li><b>Self contained:</b> KaTeX has no dependencies and can easily be bundled with your website resources.</li>
+        <li><b>Server side rendering:</b> KaTeX produces the same output regardless of browser or environment, so you can pre-render expressions using Node.js and send them as plain HTML.</li>
+      </ul>
+
+      <div class="examples">
+        <div class="example tex" data-expr="\displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }"></div>
+        <div class="example tex" data-expr="\displaystyle \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)"></div>
+        <div class="example tex" data-expr="\displaystyle 1 +  \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \quad\quad \text{for }\lvert q\rvert<1."></div>
+      </div>
+
+      <div class="subtagline">
+        Lightning-fast, even on pages with hundreds of expressions:
+      </div>
+
+      <div class="comparison-labels">
+        <div class="left tex" data-expr="\KaTeX"></div>
+        <div class="right">MathJax</div>
+      </div>
+      <div class="comparison"></div>
+
+      <div class="cta">
+        <a href="docs/node.html" role="button"><i class="fa fa-download"></i> Installation</a>
+        <a href="docs/api.html" role="button"><i class="fa fa-book"></i> Documentation</a>
+        <a href="https://github.com/Khan/KaTeX" role="button"><i class="fa fa-github"></i> View on GitHub</a>
+      </div>
+    </div></div>
+
+    <div class="footer"><div class="container">
+      <a class="ka-logo" href="https://www.khanacademy.org/"><img src="img/khan-academy.png" alt="Khan Academy" width="180" height="17"></a>
+      <span class="credits">
+        Created by <a href="https://github.com/xymostech">Emily Eisenberg</a> and <a href="https://sophiebits.com/">Sophie Alpert</a>
+      </span>
+    </div></div>
+
+    <script src="js/index.js" type="text/javascript"></script>
+    <script type="text/javascript">
+      startup();
+    </script>
+    <script>
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+        ga('create', 'UA-54842501-1', 'auto');
+        ga('send', 'pageview');
+    </script>
+  </body>
+</html>

website/remarkableKatex.js

@@ -0,0 +1,183 @@
+/* MIT License
+
+Copyright (c) 2017 Brad Howes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+/**
+ * Plugin for Remarkable Markdown processor which transforms $..$ and $$..$$ sequences into math HTML using the
+ * Katex package.
+ */
+module.exports = function(md, options) {
+    var katex = require("../");
+
+    function renderKatex(source, displayMode) {
+        return katex.renderToString(source, {displayMode: 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.
+     */
+    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;
+
+        if (pos + 1 > max) { return false; }
+
+        marker = state.src.charCodeAt(pos);
+        if (marker !== dollar) { return false; }
+
+        // scan marker length
+        mem = pos;
+        pos = state.skipChars(pos, marker);
+        len = pos - mem;
+
+        if (len != 2)  { return false; }
+
+        // search end of block
+        nextLine = startLine;
+
+        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;
+            }
+
+            pos = mem = state.bMarks[nextLine] + state.tShift[nextLine];
+            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.tShift[nextLine] - state.blkIndent >= 4) {
+
+                // closing fence should be indented less than 4 spaces
+                continue;
+            }
+
+            pos = state.skipChars(pos, marker);
+
+            // closing code fence must be at least as long as the opening one
+            if (pos - mem < len) { continue; }
+
+            // make sure tail has spaces only
+            pos = state.skipSpaces(pos);
+
+            if (pos < max) { continue; }
+
+            haveEndMarker = true;
+
+            // found!
+            break;
+        }
+
+        // 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();
+
+        state.tokens.push({
+            type: 'katex',
+            params: params,
+            content: content,
+            lines: [startLine, state.line],
+            level: state.level,
+            block: true
+        });
+
+        return true;
+    }
+
+    /**
+     * 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 ;
+
+        if (state.src.charCodeAt(pos) !== dollar) { return false; }
+        ++pos;
+
+        while (pos < max && state.src.charCodeAt(pos) === dollar) {
+            ++pos;
+        }
+
+        marker = state.src.slice(start, pos);
+        if (marker.length > 2) { return false; }
+
+        matchStart = matchEnd = pos;
+
+        while ((matchStart = state.src.indexOf('$', matchEnd)) !== -1) {
+            matchEnd = matchStart + 1;
+
+            while (matchEnd < max && state.src.charCodeAt(matchEnd) === dollar) {
+                ++matchEnd;
+            }
+
+            if (matchEnd - matchStart == marker.length) {
+                if (!silent) {
+                    var content = state.src.slice(pos, matchStart)
+                                           .replace(/[ \n]+/g, ' ')
+                                           .trim();
+
+                    state.push({
+                        type: 'katex',
+                        content: content,
+                        block: marker.length > 1,
+                        level: state.level
+                    });
+                }
+
+                state.pos = matchEnd;
+                return true;
+            }
+        }
+
+        if (! silent) state.pending += marker;
+        state.pos += marker.length;
+
+        return true;
+    }
+
+    md.inline.ruler.push('katex', parseInlineKatex, options);
+    md.block.ruler.push('katex', parseBlockKatex, options);
+    md.renderer.rules.katex = function(tokens, idx) {
+        return renderKatex(tokens[idx].content, tokens[idx].block);
+    };
+};

website/sidebars.json

@@ -0,0 +1,8 @@
+{
+  "docs": {
+    "Installation": ["node", "browser"],
+    "Usage": ["api", "cli", "autorender", "libs"],
+    "Configuring KaTeX": ["options", "security", "error", "font"],
+    "Misc": ["supported", "issues"]
+  }
+}

website/siteConfig.js

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// See https://docusaurus.io/docs/site-config.html for all the possible
+// site configuration options.
+
+/* 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,
+  },
+];
+
+const siteConfig = {
+  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',
+
+  headerLinks: [
+    {doc: 'node', label: 'Docs'},
+    {page: 'users', label: 'Users'},
+    {href: 'https://github.com/Khan/KaTeX', label: 'GitHub'},
+    {search: true},
+  ],
+
+  // 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',
+
+  disableHeaderTitle: true,
+
+  /* colors for website */
+  colors: {
+    primaryColor: '#329894',
+    secondaryColor: '#266e6c',
+  },
+
+  // 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',
+  },
+
+  markdownPlugins: [function(md) {
+    md.use(require('./remarkableKatex'));
+  }],
+
+  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'],
+
+  /* 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',
+
+  repoUrl: 'https://github.com/Khan/KaTeX',
+};
+
+module.exports = siteConfig;

website/static/css/custom.css

@@ -0,0 +1,18 @@
+.fixedHeaderContainer header img {
+    height: 80%;
+}
+
+@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
+}
+
+@media only screen and (min-width: 1024px) {
+}
+
+@media only screen and (max-width: 1023px) {
+}
+
+@media only screen and (min-width: 1400px) {
+}
+
+@media only screen and (min-width: 1500px) {
+}

website/static/img/katex-logo.svg

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 120 40.541" enable-background="new 0 0 120 40.541" xml:space="preserve">
+<g>
+	<path fill="white" d="M4.618,27.925c-0.299,0.299-0.591,0.478-0.874,0.538c-0.284,0.06-1.039,0.105-2.264,0.135H0v2.062h0.493
+		c0.508-0.09,2.66-0.135,6.456-0.135c3.796,0,5.948,0.045,6.456,0.135h0.493v-2.062h-1.48c-1.764-0.029-2.765-0.209-3.004-0.538
+		c-0.09-0.119-0.135-1.584-0.135-4.394v-4.259l2.062-2.018c0.388-0.359,0.777-0.724,1.166-1.098
+		c0.388-0.373,0.687-0.665,0.897-0.874c0.209-0.209,0.388-0.373,0.538-0.493l3.901,5.873c2.331,3.587,3.661,5.62,3.99,6.098
+		c0.09,0.179,0.135,0.359,0.135,0.538c0,0.778-0.688,1.166-2.062,1.166h-0.359v2.062h0.493c0.628-0.09,2.764-0.135,6.412-0.135
+		c0.269,0,0.673,0.008,1.211,0.022c0.538,0.015,0.956,0.022,1.255,0.022c0.298,0,0.68,0.008,1.143,0.022
+		c0.463,0.015,0.807,0.03,1.031,0.045c0.224,0.015,0.366,0.022,0.426,0.022h0.359v-2.062h-0.942
+		c-1.255-0.029-2.152-0.194-2.69-0.493c-0.419-0.239-0.778-0.583-1.076-1.031c-0.179-0.269-1.906-2.862-5.179-7.779
+		c-3.273-4.917-4.91-7.39-4.91-7.42c0-0.029,1.33-1.33,3.99-3.901c2.66-2.57,4.065-3.93,4.215-4.08
+		c1.315-1.076,3.094-1.674,5.335-1.793h0.628V0.037h-0.269c-0.03,0-0.135,0.008-0.314,0.022c-0.179,0.015-0.434,0.03-0.762,0.045
+		c-0.329,0.015-0.613,0.022-0.852,0.022c-0.209,0-0.523,0.008-0.942,0.022c-0.419,0.015-0.747,0.022-0.986,0.022
+		c-3.408,0-5.366-0.045-5.873-0.135h-0.448v2.062h0.179l0.202,0.022l0.247,0.022c0.836,0.209,1.255,0.643,1.255,1.3
+		c-0.06,0.24-0.12,0.404-0.179,0.493c-0.06,0.12-2.272,2.317-6.636,6.591l-6.546,6.367l-0.045-6.95c0-4.663,0.015-7.024,0.045-7.084
+		c0.06-0.508,0.897-0.762,2.511-0.762h1.076h0.986V0.037h-0.493c-0.509,0.09-2.661,0.135-6.456,0.135
+		c-3.796,0-5.948-0.045-6.456-0.135H0v2.062h1.48c1.225,0.03,1.98,0.075,2.264,0.135c0.284,0.06,0.575,0.24,0.874,0.538V27.925z"/>
+	<path fill="white" d="M39.542,11.067h1.793v-0.269c0.029-0.119,0.074-0.478,0.135-1.076c0.239-3.198,0.836-5.201,1.793-6.008
+		c0.747-0.628,1.763-1.046,3.049-1.255c0.298-0.029,1.15-0.045,2.556-0.045h1.211c0.687,0,1.113,0.022,1.278,0.067
+		c0.164,0.045,0.291,0.202,0.381,0.471c0.029,0.06,0.045,4.23,0.045,12.509v12.375c-0.24,0.329-0.613,0.538-1.121,0.628
+		c-1.076,0.09-2.421,0.135-4.035,0.135h-1.345v2.062h0.583c0.628-0.09,3.377-0.135,8.25-0.135c4.872,0,7.622,0.045,8.25,0.135h0.583
+		v-2.062h-1.345c-1.614,0-2.959-0.045-4.035-0.135c-0.509-0.09-0.882-0.298-1.121-0.628V15.461c0-8.279,0.015-12.449,0.045-12.509
+		c0.09-0.269,0.216-0.426,0.381-0.471c0.164-0.045,0.59-0.067,1.278-0.067h1.211c1.674,0,2.825,0.075,3.452,0.224
+		c1.136,0.329,1.957,0.807,2.466,1.435c0.747,0.867,1.225,2.75,1.435,5.649c0.06,0.598,0.104,0.957,0.135,1.076v0.269h1.793v-0.269
+		c0-0.06-0.134-1.763-0.404-5.111c-0.269-3.347-0.419-5.051-0.448-5.111V0.306H40.394v0.269c0,0.06-0.135,1.764-0.404,5.111
+		c-0.269,3.348-0.419,5.052-0.448,5.111V11.067z"/>
+	<path fill="white" d="M100.003,30.66v-2.062h-0.359c-0.658-0.06-1.226-0.254-1.704-0.583c-0.478-0.329-0.717-0.702-0.717-1.121
+		c0-0.209,0.015-0.329,0.045-0.359c0.029-0.09,1.031-1.629,3.004-4.618c0.448-0.687,0.836-1.293,1.166-1.816
+		c0.329-0.523,0.605-0.956,0.829-1.3c0.224-0.343,0.411-0.62,0.56-0.829c0.149-0.209,0.254-0.343,0.314-0.404l0.135-0.135
+		l1.659,2.556c1.105,1.704,2.197,3.408,3.273,5.111c1.076,1.704,1.614,2.6,1.614,2.69c0,0.209-0.314,0.397-0.942,0.56
+		c-0.628,0.165-1.196,0.247-1.704,0.247h-0.269v2.062h0.493c0.687-0.09,2.869-0.135,6.546-0.135c3.318,0,5.201,0.045,5.649,0.135
+		H120v-2.062h-1.39c-1.166-0.029-1.958-0.09-2.376-0.179c-0.419-0.09-0.747-0.269-0.986-0.538c-0.09-0.09-1.667-2.526-4.73-7.308
+		c-3.064-4.782-4.596-7.203-4.596-7.263c0-0.029,0.986-1.584,2.959-4.663c2.092-3.139,3.183-4.753,3.273-4.842
+		c1.016-1.046,2.75-1.614,5.201-1.704h0.762V0.037h-0.359c-0.359,0.09-2.003,0.135-4.932,0.135c-3.468,0-5.396-0.045-5.784-0.135
+		h-0.404v2.062h0.359c0.926,0.09,1.614,0.389,2.062,0.897c0.388,0.389,0.493,0.747,0.314,1.076c0,0.03-0.778,1.248-2.331,3.654
+		c-1.555,2.406-2.347,3.609-2.376,3.609c-0.06,0-0.979-1.397-2.757-4.192c-1.779-2.795-2.668-4.237-2.668-4.327
+		c0.06-0.149,0.404-0.306,1.031-0.471c0.628-0.164,1.195-0.247,1.704-0.247h0.224V0.037h-0.493c-0.658,0.09-2.84,0.135-6.546,0.135
+		c-3.318,0-5.201-0.045-5.649-0.135h-0.404v2.062h0.897h0.628c1.614,0,2.69,0.224,3.228,0.673c0.09,0.09,1.464,2.212,4.125,6.367
+		c2.66,4.155,3.99,6.262,3.99,6.322c0,0.03-1.188,1.868-3.564,5.515c-2.376,3.647-3.625,5.56-3.744,5.739
+		c-0.957,1.166-2.765,1.793-5.425,1.883H88.48v2.062h0.359c0.359-0.09,2.002-0.135,4.932-0.135c3.467,0,5.395,0.045,5.784,0.135
+		H100.003z"/>
+	<path fill="white" d="M37.736,15.499h-3.429c-2.264,0-3.396-0.011-3.396-0.034l1.715-5.077l1.681-5.043l0.672,1.984
+		c0.493,1.435,1.064,3.127,1.715,5.077L37.736,15.499z M31.583,24.072v-1.547h-0.168c-0.493,0-0.958-0.095-1.395-0.286
+		c-0.437-0.19-0.723-0.431-0.857-0.723c-0.067-0.089-0.101-0.19-0.101-0.303c0-0.134,0.224-0.863,0.672-2.185l0.672-1.984h7.834
+		l0.807,2.387c0.538,1.614,0.807,2.443,0.807,2.488c0,0.403-0.785,0.605-2.353,0.605h-0.437v1.547h0.336
+		c0.336-0.067,1.95-0.101,4.841-0.101c2.51,0,3.934,0.034,4.27,0.101h0.303v-1.547h-1.009c-1.166-0.022-1.872-0.146-2.118-0.37
+		c-0.09-0.089-0.168-0.202-0.235-0.336c-0.516-1.591-1.855-5.581-4.018-11.969c-2.163-6.388-3.256-9.593-3.278-9.616
+		C36.066,0.101,35.797,0.023,35.348,0h-0.303c-0.359,0-0.572,0.09-0.639,0.269c-0.023,0.023-0.611,1.754-1.765,5.194
+		c-1.155,3.441-2.315,6.892-3.48,10.355c-1.166,3.463-1.76,5.228-1.782,5.295c-0.449,0.874-1.479,1.345-3.093,1.412h-0.504v1.547
+		h0.235c0.269-0.067,1.401-0.101,3.396-0.101c2.174,0,3.463,0.034,3.866,0.101H31.583z"/>
+	<path fill="white" d="M68.318,37.806c-0.299,0.299-0.591,0.478-0.874,0.538c-0.284,0.06-1.039,0.105-2.264,0.135H63.7v2.062h26.229v-0.135
+		c0.06-0.09,0.381-2.085,0.964-5.986c0.583-3.901,0.889-5.896,0.919-5.986v-0.135h-1.793v0.135c-0.03,0.06-0.105,0.464-0.224,1.211
+		c-0.269,1.793-0.613,3.244-1.031,4.349c-0.509,1.375-1.248,2.399-2.219,3.071c-0.972,0.673-2.324,1.114-4.058,1.323
+		c-0.419,0.03-1.973,0.045-4.663,0.045h-2.287c-1.375,0-2.152-0.074-2.331-0.224c-0.09-0.06-0.15-0.164-0.179-0.314
+		c-0.03-0.06-0.045-2.107-0.045-6.142v-6.008h2.421c1.943,0.03,3.139,0.12,3.587,0.269c0.836,0.24,1.405,0.666,1.704,1.278
+		c0.298,0.613,0.478,1.547,0.538,2.802v0.897h1.793V18.437h-1.793v0.897c-0.06,1.255-0.24,2.19-0.538,2.802
+		c-0.299,0.613-0.867,1.039-1.704,1.278c-0.448,0.15-1.644,0.24-3.587,0.269h-2.421v-5.425c0-3.646,0.015-5.499,0.045-5.56
+		c0.09-0.298,0.269-0.463,0.538-0.493c0.239-0.06,1.853-0.09,4.842-0.09c1.733,0,2.75,0.015,3.049,0.045
+		c2.451,0.15,4.177,0.74,5.179,1.771c1.001,1.031,1.681,2.952,2.04,5.761c0.06,0.538,0.104,0.852,0.135,0.942v0.179h1.793v-0.179
+		c0-0.029-0.209-1.763-0.628-5.201l-0.628-5.201v-0.179H63.7v2.062h1.48c1.225,0.03,1.98,0.075,2.264,0.135
+		c0.284,0.06,0.575,0.24,0.874,0.538V37.806z"/>
+</g>
+</svg>

website/static/js/index.js

@@ -0,0 +1,32 @@
+window.startup = function() {
+    var tex = document.getElementsByClassName("tex");
+    Array.prototype.forEach.call(tex, function(el) {
+        katex.render(el.getAttribute("data-expr"), el);
+    });
+
+    var demoInput = document.getElementById("demo-input");
+    var demoOutput = document.getElementById("demo-output");
+
+    function doDemo() {
+        try {
+            katex.render(demoInput.value, demoOutput, {
+                displayMode: true
+            });
+        } catch(err) {
+            while(demoOutput.lastChild) {
+                demoOutput.removeChild(demoOutput.lastChild);
+            }
+            var msg = document.createTextNode(err.message);
+            var span = document.createElement("span");
+            span.appendChild(msg);
+            demoOutput.appendChild(span);
+            span.setAttribute("class", "errorMessage");
+        }
+    }
+
+    demoInput.addEventListener("input", function() {
+        doDemo();
+    });
+
+    doDemo();
+};

website/static/static/index.css

@@ -0,0 +1,212 @@
+body {
+    font: 16px/1.4 "proxima-nova", "Helvetica Neue", Arial, Helvetica, sans-serif;
+}
+
+.container {
+    margin: 0 auto;
+    margin: 0 auto;
+    width: 800px;
+}
+
+.header, .footer {
+    color: #fff;
+    background: #329894;
+    overflow: hidden;
+}
+
+.cta {
+    margin: 10px 0;
+    text-align: center;
+}
+
+.cta a {
+    border-radius: 3px;
+    display: inline-block;
+    font-weight: 600;
+    margin: 0 10px;
+    padding: 8px 24px;
+    text-decoration: none;
+}
+
+.header {
+    padding: 40px 0 0;
+}
+
+.logo {
+    color: #fff;
+    font-size: 45px;
+    margin: 0;
+}
+
+.tagline {
+    font-size: 28px;
+    font-weight: 300;
+    padding: 20px 0;
+    text-align: center;
+}
+
+.tagline em {
+    font-weight: 600;
+}
+
+.header .cta a {
+    border: 3px solid;
+    color: #fff;
+}
+
+.header .cta a:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.demo {
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    font-size: 22px;
+    margin: 50px 0 0;
+}
+
+.demo,
+.demo-left,
+.demo-right {
+    height: 260px;
+}
+
+.demo-left,
+.demo-right {
+    box-sizing: border-box;
+    float: left;
+    padding: 20px 30px;
+    width: 50%;
+}
+
+.demo-instructions {
+    line-height: 1.5;
+    margin-bottom: 10px;
+    opacity: 0.8;
+}
+
+.demo-left {
+    background: #444;
+}
+
+.demo-left textarea {
+    background: #000;
+    border: none;
+    box-sizing: border-box;
+    color: #fff;
+    font: 14px Menlo, monospace;
+    height: 160px;
+    padding: 10px;
+    resize: none;
+    width: 100%;
+}
+
+.demo-right {
+    background: #fff;
+    color: #444;
+}
+
+#demo-output {
+    font-size: 18px;
+    padding: 10px 0;
+    overflow: auto;
+}
+
+.main {
+    background: #fff2e7;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    min-height: 400px;
+    position: relative;
+    padding: 30px 0;
+}
+
+.subtagline {
+    color: #329894;
+    font-size: 24px;
+    font-weight: 600;
+    padding: 20px 0;
+    text-align: center;
+}
+
+.features {
+    font-size: 20px;
+    margin: 0 auto;
+    width: 540px;
+}
+
+.features > li {
+    margin: 10px 0;
+}
+
+.main .examples {
+    margin: 40px 0;
+}
+
+.main .example {
+    font-size: 15px;
+    text-align: center;
+    margin: 30px 0;
+}
+
+.main .comparison-labels {
+    width: 100%;
+    height: 40px;
+}
+
+.main .comparison-labels .left,
+.main .comparison-labels .right {
+    box-sizing: border-box;
+    width: 50%;
+    float: left;
+    height: 40px;
+    text-align: center;
+    font-size: 20px;
+}
+
+.main .comparison {
+    background-image: url(../../img/katex-comparison.gif);
+    background-position: 50% 50%;
+    background-size: cover;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    height: 340px;
+    width: 100%;
+}
+
+.main .cta {
+    padding-top: 50px;
+}
+
+.main .cta a {
+    border: 3px solid;
+    color: #329894;
+}
+
+.main .cta a:hover {
+    background: rgba(50, 152, 148, 0.1);
+}
+
+.footer {
+    padding: 30px 0;
+    font-size: 21px;
+}
+
+.ka-logo {
+    float: right;
+}
+
+.ka-logo img {
+    border: none;
+    vertical-align: -1px;
+}
+
+.credits {
+    float: left;
+    font-size: 16px;
+}
+
+.credits a {
+    color: white;
+}
+
+.errorMessage {
+    color: red;
+}