feat: add eslint (#801)

.eslintignore

@@ -0,0 +1,9 @@
+/build/
+/node_modules/
+/release/
+
+# site files
+/site/.docusaurus
+/site/build
+/site/node_modules
+/site/static/css/pure

.eslintrc.js

@@ -0,0 +1,50 @@
+module.exports = {
+    'env': {
+        'browser': true,
+        'es6': true,
+        'node': true
+    },
+    'extends': [
+        'eslint:recommended',
+        'plugin:react/recommended'
+    ],
+    'globals': {
+        'Atomics': 'readonly',
+        'SharedArrayBuffer': 'readonly'
+    },
+    'parserOptions': {
+        'ecmaFeatures': {
+            'jsx': true
+        },
+        'ecmaVersion': 11,
+        'sourceType': 'module'
+    },
+    'plugins': [
+        'react'
+    ],
+    'rules': {
+        'indent': [
+            'error',
+            4
+        ],
+        'linebreak-style': [
+            'error',
+            'unix'
+        ],
+        'quotes': [
+            'error',
+            'single'
+        ],
+        'react/no-unescaped-entities': 'off',
+        'react/prop-types': 'off',
+        'semi': [
+            'error',
+            'always'
+        ]
+    },
+    'settings': {
+        'react': {
+            'version': 'detect'
+        }
+    }
+};

.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
+.nyc_output/
 artifacts/
 build/
 coverage/

.npmrc

@@ -0,0 +1 @@
+package-lock = false

.travis.yml

@@ -1,11 +1,10 @@
 language: node_js
 node_js:
   - 12
-branches:
-  only:
-    - master
 script:
-  - git config --global user.name "${GH_NAME}"
+  - npm t
-  - git config --global user.email "${GH_EMAIL}"
+deploy:
-  - echo "machine github.com login ${GH_NAME} password ${GH_TOKEN}" > ~/.netrc
+  provider: script
-  - cd site && npm install && GIT_USER="${GH_NAME}" npm run deploy
+  script: scripts/deploy.sh
+  on:
+    branch: master

package.json

@@ -6,7 +6,9 @@
     "url": "git://github.com/pure-css/pure.git"
   },
   "scripts": {
+    "lint": "eslint . --ext .js",
     "prepare": "grunt release",
+    "pretest": "npm run lint",
     "site:build": "npm run pretest && cd site && npm install && npm run build",
     "site:start": "cd site && npm run start",
     "test": "grunt test && tap test/*.js"
@@ -14,6 +16,8 @@
   "files": "build/",
   "devDependencies": {
     "autoprefixer": "^9.6.1",
+    "eslint": "^7.0.0",
+    "eslint-plugin-react": "^7.20.0",
     "grunt": "^1.0.1",
     "grunt-cli": "^1.2.0",
     "grunt-contrib-clean": "^2.0.0",
@@ -26,6 +30,7 @@
     "grunt-css-selectors": "^1.1.0",
     "grunt-postcss": "^0.9.0",
     "grunt-pure-grids": "^2.0.0",
+    "husky": "^4.2.5",
     "normalize.css": "^8.0.1",
     "tap": "^14.4.1"
   },
@@ -55,5 +60,10 @@
     "ie >= 10",
     "iOS >= 12",
     "Android >= 6"
-  ]
+  ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm test"
+    }
+  }
 }

scripts/deploy.sh

@@ -0,0 +1,6 @@
+git config --global user.name "${GH_NAME}"
+git config --global user.email "${GH_EMAIL}"
+echo "machine github.com login ${GH_NAME} password ${GH_TOKEN}" > ~/.netrc
+cd site
+npm install
+GIT_USER="${GH_NAME}" npm run deploy

site/components/Footer.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
 function Footer({ siteConfig }) {
     const { customFields, organizationName, projectName } = siteConfig;

site/components/Menu.js

@@ -1,7 +1,7 @@
 import Link from '@docusaurus/Link';
 import React from 'react';
 
-function Menu(props) {
+function Menu() {
     return (
         <>
             <a href="#menu" id="menuLink" className="menu-link">
@@ -46,9 +46,11 @@ function Menu(props) {
                         <li className="pure-menu-item">
                             <Link to="/extend/" className="pure-menu-link">Extend</Link>
                         </li>
+                        {/*
                         <li className="pure-menu-item">
                             <a href="http://blog.purecss.io/" className="pure-menu-link">Blog</a>
                         </li>
+                        */}
                         <li className="pure-menu-item">
                             <a href="https://github.com/pure-css/pure/releases/" className="pure-menu-link">Releases</a>
                         </li>

site/components/SectionHeader.js

@@ -4,7 +4,7 @@ import React from 'react';
     // Remove HTML entities, and all chars except whitespace, word chars, and from the `heading`.
     const id = heading.toLowerCase()
         .replace(/&[^\s;]+;?/g, '')
-            .replace(/[^\s\w\-]+/g, '')
+        .replace(/[^\s\w-]+/g, '')
         .replace(/\s+/g, '-');
 
     return (

site/lib/pure.js

@@ -18,8 +18,8 @@ module.exports.moduleSizes = function moduleSizes() {
     const files = fs.readdirSync(pureDir);
 
     // collect all minified module files
-    const modules = files.filter(file => (/\-min\.css$/).test(file))
+    const modules = files.filter(file => (/-min\.css$/).test(file))
-                         .map(file => file.replace(/\-min\.css$/, ''));
+        .map(file => file.replace(/-min\.css$/, ''));
 
     // get sizes across all modules
     const moduleSizes = modules.map(module => {
@@ -33,4 +33,4 @@ module.exports.moduleSizes = function moduleSizes() {
         map[modules[i]] = size;
         return map;
     }, {});
-}
+};

site/package-lock.json

@@ -2591,6 +2591,11 @@
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
       "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="
     },
+    "common-tags": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.0.tgz",
+      "integrity": "sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw=="
+    },
     "commondir": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",

site/package.json

@@ -17,6 +17,7 @@
     "@docusaurus/plugin-content-pages": "^2.0.0-alpha.53",
     "@docusaurus/plugin-google-analytics": "^2.0.0-alpha.53",
     "classnames": "^2.2.6",
+    "common-tags": "^1.8.0",
     "gzip-size": "^5.1.1",
     "js-beautify": "^1.11.0",
     "react": "^16.8.4",

site/src/index.js

@@ -1,5 +1,5 @@
 const path = require('path');
-module.exports = function(context, options) {
+module.exports = function() {
     return {
         name: 'pure-theme',
 

site/src/pages/base/index.js

@@ -1,5 +1,4 @@
 import Link from '@docusaurus/Link';
-import classnames from 'classnames';
 import React from 'react';
 import Layout from '../../theme/Layout';
 import Header from '../../../components/Header';
@@ -22,7 +21,7 @@ function Base() {
                 </p>
 
                 <CodeBlock wrap={true}>
-                {`<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/base-min.css">`}
+                    {'<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/base-min.css">'}
                 </CodeBlock>
 
                 <h3>A bit about Normalize.css</h3>
@@ -52,7 +51,7 @@ function Base() {
                 </p>
 
                 <CodeBlock wrap={true}>
-                {`<input type="text" name="_csrf" hidden>`}
+                    {'<input type="text" name="_csrf" hidden>'}
                 </CodeBlock>
 
                 <h3>Responsive Images</h3>
@@ -62,7 +61,7 @@ function Base() {
                 </p>
 
                 <CodeBlock wrap={true}>
-                {`<img class="pure-img" src="...">`}
+                    {'<img class="pure-img" src="...">'}
                 </CodeBlock>
 
                 <SectionHeader heading="Moving beyong Normalize" />

site/src/pages/buttons/index.js

@@ -1,4 +1,3 @@
-import Link from '@docusaurus/Link';
 import React from 'react';
 import Layout from '../../theme/Layout';
 import Header from '../../../components/Header';

site/src/pages/customize/index.js

@@ -5,7 +5,7 @@ import Layout from '../../theme/Layout';
 import Header from '../../../components/Header';
 import CodeBlock from '../../../components/CodeBlock';
 import SectionHeader from '../../../components/SectionHeader';
-import { filePercent, fileSize } from '../../../lib/utils';
+import { fileSize } from '../../../lib/utils';
 
 const title = 'Customize';
 const description = 'Choose the modules that you need.';
@@ -79,37 +79,31 @@ function Customize() {
                         <tbody>
                             <tr>
                                 <td><a href="http://cdnjs.com/">cdnjs</a></td>
-                                <td>//cdnjs.cloudflare.com/ajax/libs/pure/{pureVersion}/pure-min.css</td>
+                                <td>{`//cdnjs.cloudflare.com/ajax/libs/pure/${pureVersion}/build/pure-min.css`}</td>
-                                <td>Yes</td>
-                                <td>No</td>
-                            </tr>
-                            <tr>
-                                <td><a href="http://www.jsdelivr.com/">jsDelivr</a></td>
-                                <td>//cdn.jsdelivr.net/npm/purecss@{pureVersion}/build/pure-min.css</td>
                                 <td>Yes</td>
                                 <td>Yes</td>
                             </tr>
                             <tr>
                                 <td><a href="https://www.keycdn.com/">KeyCDN</a></td>
-                                <td>//opensource.keycdn.com/pure/{pureVersion}/pure-min.css</td>
+                                <td>{`//opensource.keycdn.com/pure/${pureVersion}/pure-min.css`}</td>
                                 <td>Yes</td>
                                 <td>No</td>
                             </tr>
                             <tr>
                                 <td><a href="http://www.osscdn.com/">OSS MaxCDN</a></td>
-                                <td>//oss.maxcdn.com/libs/pure/{pureVersion}/pure-min.css</td>
+                                <td>{`//oss.maxcdn.com/libs/pure/${pureVersion}/pure-min.css`}</td>
                                 <td>Yes</td>
                                 <td>No</td>
                             </tr>
                             <tr>
                                 <td><a href="http://rawgit.com/">RawGit</a></td>
-                                <td>//cdn.rawgit.com/pure-css/pure-release/v{pureVersion}/pure-min.css</td>
+                                <td>{`//cdn.rawgit.com/pure-css/pure-release/v${pureVersion}/pure-min.css`}</td>
                                 <td>Yes</td>
                                 <td>No</td>
                             </tr>
                             <tr>
                                 <td><a href="http://www.staticfile.org/">Staticfile</a></td>
-                                <td>//cdn.staticfile.org/pure/{pureVersion}/pure-min.css</td>
+                                <td>{`//cdn.staticfile.org/pure/${pureVersion}/pure-min.css`}</td>
                                 <td>Yes</td>
                                 <td>No</td>
                             </tr>

site/src/pages/extend/index.js

@@ -4,6 +4,7 @@ import Layout from '../../theme/Layout';
 import Header from '../../../components/Header';
 import CodeBlock from '../../../components/CodeBlock';
 import SectionHeader from '../../../components/SectionHeader';
+import { stripIndent } from 'common-tags';
 
 const title = 'Extend';
 const description = 'Build on top of Pure.';
@@ -49,7 +50,7 @@ function Extend() {
                 </p>
 
                 <CodeBlock>
-                    {`<form class="pure-form pure-form-stacked"></form>`}
+                    {'<form class="pure-form pure-form-stacked"></form>'}
                 </CodeBlock>
 
                 <h4>Stacked Form: CSS</h4>
@@ -59,7 +60,8 @@ function Extend() {
                 </p>
 
                 <CodeBlock>
-{`/*
+                    {stripIndent`
+                        /*
                             Standard rules that all Pure Forms have. This includes rules for
                             styling .pure-form &lt;inputs&gt;, &lt;fieldsets&gt;, and &lt;legends&gt;, as well as layout
                             rules such as vertical alignments.
@@ -71,7 +73,8 @@ function Extend() {
                             such as taking child &lt;input&gt; elements and making them display: block
                             for the stacked effect.
                         */
-.pure-form-stacked  { ... }`}
+                        .pure-form-stacked  { ... }
+                    `}
                 </CodeBlock>
 
                 <SectionHeader heading="Extending Pure" />
@@ -81,12 +84,14 @@ function Extend() {
                 </p>
 
                 <CodeBlock>
-                    {`<form class="form-custom pure-form"></form>`}
+                    {'<form class="form-custom pure-form"></form>'}
                 </CodeBlock>
 
                 <CodeBlock className="test">
-{`/* add your custom styles in this selector */
+                    {stripIndent`
-.form-custom { ... }`}
+                        /* add your custom styles in this selector */
+                        .form-custom { ... }
+                    `}
                 </CodeBlock>
 
                 <p>
@@ -122,7 +127,8 @@ function Extend() {
                 </p>
 
                 <CodeBlock>
-{`<!-- Button to trigger modal -->
+                    {stripIndent`
+                        <!-- Button to trigger modal -->
                         <p>
                             <a href="#myModal" role="button" className="pure-button-primary pure-button" data-toggle="modal">
                             Launch Pure + Bootstrap Modal
@@ -170,7 +176,8 @@ function Extend() {
                             </div>
                         </div>
                         <script src="//code.jquery.com/jquery-1.9.1.js"></script>
-<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>`}
+                        <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
+                    `}
                 </CodeBlock>
             </div>
         </Layout>

site/src/pages/grids/index.js

@@ -1,13 +1,13 @@
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import classnames from 'classnames';
 import React from 'react';
 import Layout from '../../theme/Layout';
 import Header from '../../../components/Header';
 import CodeBlock from '../../../components/CodeBlock';
 import SectionHeader from '../../../components/SectionHeader';
+import { stripIndent } from 'common-tags';
 
-import styles from './styles.css';
+import './styles.css';
 
 const title = 'Grids';
 const description = 'Fully customizable and responsive CSS grids.';
@@ -57,11 +57,13 @@ function Grids() {
                 </p>
 
                 <CodeBlock wrap={true}>
-{`<div class="pure-g">
+                    {stripIndent`
+                        <div class="pure-g">
                             <div class="pure-u-1-3"><p>Thirds</p></div>
                             <div class="pure-u-1-3"><p>Thirds</p></div>
                             <div class="pure-u-1-3"><p>Thirds</p></div>
-</div>`}
+                        </div>
+                    `}
                 </CodeBlock>
 
                 <SectionHeader heading="Grids Units Sizes" />
@@ -489,11 +491,13 @@ function Grids() {
                 </p>
 
                 <CodeBlock wrap={true}>
-                {`<div class="pure-g">
+                    {stripIndent`
+                        <div class="pure-g">
                             <div class="pure-u-1-3"> ... </div>
                             <div class="pure-u-1-3"> ... </div>
                             <div class="pure-u-1-3"> ... </div>
-</div>`}
+                        </div>
+                    `}
                 </CodeBlock>
 
                 <p>
@@ -501,11 +505,13 @@ function Grids() {
                 </p>
 
                 <CodeBlock wrap={true}>
-                {`<div class="pure-g">
+                    {stripIndent`
+                        <div class="pure-g">
                             <div class="pure-u-1 pure-u-md-1-3"> ... </div>
                             <div class="pure-u-1 pure-u-md-1-3"> ... </div>
                             <div class="pure-u-1 pure-u-md-1-3"> ... </div>
-</div>`}
+                        </div>
+                    `}
                 </CodeBlock>
 
                 <h3>Default Media Queries</h3>
@@ -578,7 +584,7 @@ function Grids() {
                 </p>
 
                 <CodeBlock wrap={true}>
-                    {`1em == 16px *`}
+                    {'1em == 16px *'}
                 </CodeBlock>
 
                 <p>
@@ -733,7 +739,8 @@ function Grids() {
                 </p>
 
                 <CodeBlock wrap={true}>
-{`<style>
+                    {stripIndent`
+                        <style>
                             .l-box {
                                 padding: 1em;
                             }
@@ -748,7 +755,8 @@ function Grids() {
                             <div class="pure-u-1-2">
                                 <div class="l-box"> ... </div>
                             </div>
-</div>`}
+                        </div>
+                    `}
                 </CodeBlock>
 
                 <p>
@@ -756,7 +764,8 @@ function Grids() {
                 </p>
 
                 <CodeBlock wrap={true}>
-{`<style>
+                    {stripIndent`
+                        <style>
                             .pure-g > div {
                                 box-sizing: border-box;
                             }
@@ -770,7 +779,8 @@ function Grids() {
                         <div class="pure-g">
                             <div class="pure-u-1-2 l-box"> ... </div>
                             <div class="pure-u-1-2 l-box"> ... </div>
-</div>`}
+                        </div>
+                    `}
                 </CodeBlock>
 
                 <p>
@@ -784,7 +794,8 @@ function Grids() {
                 </p>
 
                 <CodeBlock wrap={true}>
-{`<style>
+                    {stripIndent`
+                        <style>
                         /*
                         When setting the primary font stack, apply it to the Pure grid units along
                         with "html", "button", "input", "select", and "textarea". Pure Grids use
@@ -795,7 +806,8 @@ html, button, input, select, textarea,
                             /* Set your content font stack here: */
                             font-family: Georgia, Times, "Times New Roman", serif;
                         }
-</style>`}
+                        </style>
+                    `}
                 </CodeBlock>
 
                 <SectionHeader heading="Want to just use Grids?" />
@@ -805,9 +817,11 @@ html, button, input, select, textarea,
                 </p>
 
                 <CodeBlock>
-{`<link rel="stylesheet" href="https://unpkg.com/purecss@${pureVersion}/build/base-min.css">
+                    {stripIndent`
+                        <link rel="stylesheet" href="https://unpkg.com/purecss@${pureVersion}/build/base-min.css">
                         <link rel="stylesheet" href="https://unpkg.com/purecss@${pureVersion}/build/grids-min.css">
-<link rel="stylesheet" href="https://unpkg.com/purecss@${pureVersion}/build/grids-responsive-min.css">`}
+                        <link rel="stylesheet" href="https://unpkg.com/purecss@${pureVersion}/build/grids-responsive-min.css">
+                    `}
                 </CodeBlock>
 
                 {/*

site/src/pages/index.js

@@ -5,7 +5,7 @@ import React from 'react';
 import Layout from '@theme/Layout';
 import CodeBlock from '../../components/CodeBlock';
 import { filePercent, fileSize } from '../../lib/utils';
-import styles from './styles.css';
+import './styles.css';
 
 const renderModuleSize = (filesizes) => {
     const modules = ['base', 'grids', 'forms', 'buttons', 'tables', 'menus'];
@@ -19,7 +19,7 @@ const renderModuleSize = (filesizes) => {
             </Link>
         </div>
     ));
-}
+};
 
 function Home() {
     const context = useDocusaurusContext();
@@ -28,7 +28,6 @@ function Home() {
         customFields: {
             moduleSizes,
             PURE_DOWNLOAD_SNIPPET,
-          pureVersion,
         },
         organizationName,
         projectName,

site/src/pages/layouts/index.js

@@ -1,63 +1,62 @@
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import classnames from 'classnames';
 import React from 'react';
 import Layout from '@theme/Layout';
 import Header from '../../../components/Header';
 import SectionHeader from '../../../components/SectionHeader';
 
-import styles from './styles.css';
+import './styles.css';
 
 const title = 'Layouts';
 const description = 'Quickstart your next web project with these example layouts.';
 const layouts = [
     {
-        type: "blog",
+        type: 'blog',
-        title: "Blog",
+        title: 'Blog',
-        summary: "A layout example that shows off a blog page with a list of posts.",
+        summary: 'A layout example that shows off a blog page with a list of posts.',
-        modules: ["base", "grids", "buttons", "menus"]
+        modules: ['base', 'grids', 'buttons', 'menus']
     },
     {
-        type: "email",
+        type: 'email',
-        title: "Email",
+        title: 'Email',
-        summary: "A layout example that shows off a responsive email layout.",
+        summary: 'A layout example that shows off a responsive email layout.',
-        modules: ["base", "grids", "buttons", "menus"]
+        modules: ['base', 'grids', 'buttons', 'menus']
     },
     {
-        type: "gallery",
+        type: 'gallery',
-        title: "Photo Gallery",
+        title: 'Photo Gallery',
-        summary: "A layout example that shows off a responsive photo gallery.",
+        summary: 'A layout example that shows off a responsive photo gallery.',
-        modules: ["base", "grids", "forms", "buttons", "menus"]
+        modules: ['base', 'grids', 'forms', 'buttons', 'menus']
     },
     {
-        type: "marketing",
+        type: 'marketing',
-        title: "Landing Page",
+        title: 'Landing Page',
-        summary: "A layout example that shows off a responsive product landing page.",
+        summary: 'A layout example that shows off a responsive product landing page.',
-        modules: ["base", "grids", "forms", "buttons", "menus"]
+        modules: ['base', 'grids', 'forms', 'buttons', 'menus']
     },
     {
-        type: "pricing",
+        type: 'pricing',
-        title: "Pricing Table",
+        title: 'Pricing Table',
-        summary: "A layout example that shows off a responsive pricing table.",
+        summary: 'A layout example that shows off a responsive pricing table.',
-        modules: ["base", "grids", "buttons", "menus"]
+        modules: ['base', 'grids', 'buttons', 'menus']
     },
     {
-        type: "side-menu",
+        type: 'side-menu',
-        title: "Responsive Side Menu",
+        title: 'Responsive Side Menu',
-        summary: "A layout example with a side menu that hides on mobile, just like the Pure website.",
+        summary: 'A layout example with a side menu that hides on mobile, just like the Pure website.',
-        modules: ["base", "grids", "menus"]
+        modules: ['base', 'grids', 'menus']
     },
     {
-        type: "tucked-menu-vertical",
+        type: 'tucked-menu-vertical',
-        title: "Responsive Horizontal-to-Vertical Menu",
+        title: 'Responsive Horizontal-to-Vertical Menu',
-        summary: "A set of horizontal menus that switch to vertical and which hide at small window widths.",
+        summary: 'A set of horizontal menus that switch to vertical and which hide at small window widths.',
-        modules: ["base", "grids", "menus"]
+        modules: ['base', 'grids', 'menus']
     },
     {
-        type: "tucked-menu",
+        type: 'tucked-menu',
-        title: "Responsive Horizontal-to-Scrollable Menu",
+        title: 'Responsive Horizontal-to-Scrollable Menu',
-        summary: "Showcases a horizontal menu that hides at small window widths, and which scrolls when revealed.",
+        summary: 'Showcases a horizontal menu that hides at small window widths, and which scrolls when revealed.',
-        modules: ["base", "menus"]
+        modules: ['base', 'menus']
     }
 ];
 

site/src/pages/start/index.js

@@ -1,13 +1,11 @@
-import Link from '@docusaurus/Link';
-import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import classnames from 'classnames';
 import React from 'react';
 import Layout from '../../theme/Layout';
 import Header from '../../../components/Header';
 import SectionHeader from '../../../components/SectionHeader';
 import CodeBlock from '../../../components/CodeBlock';
-import styles from './styles.css';
+import { stripIndent } from 'common-tags';
+import './styles.css';
 
 const title = 'Get Started';
 const description = 'Start your next web project with Pure.';
@@ -50,7 +48,7 @@ function Start() {
             </div>
 
             <CodeBlock full={true} wrap={true}>
-              {`<meta name="viewport" content="width=device-width, initial-scale=1">`}
+                {'<meta name="viewport" content="width=device-width, initial-scale=1">'}
             </CodeBlock>
 
             <div className="content">
@@ -65,11 +63,13 @@ function Start() {
                 </p>
 
                 <CodeBlock wrap={true}>
-        {`<div class="pure-g">
+                    {stripIndent`
+                    <div class="pure-g">
                         <div class="pure-u-1-3"><p>Thirds</p></div>
                         <div class="pure-u-1-3"><p>Thirds</p></div>
                         <div class="pure-u-1-3"><p>Thirds</p></div>
-</div>`}
+                    </div>
+                `}
                 </CodeBlock>
             </div>
 

site/src/pages/tables/index.js

@@ -1,4 +1,3 @@
-import Link from '@docusaurus/Link';
 import React from 'react';
 import Layout from '../../theme/Layout';
 import Header from '../../../components/Header';

site/src/pages/tools/index.js

@@ -1,9 +1,9 @@
-import Link from '@docusaurus/Link';
 import React from 'react';
 import Layout from '../../theme/Layout';
 import Header from '../../../components/Header';
 import CodeBlock from '../../../components/CodeBlock';
 import SectionHeader from '../../../components/SectionHeader';
+import { stripIndent } from 'common-tags';
 
 const title = 'Tools';
 const description = 'Write, manipulate, and do more with CSS.';
@@ -84,7 +84,8 @@ function Tools() {
                 </p>
 
                 <CodeBlock>
-{`grunt.initConfig({
+                    {stripIndent`
+                    grunt.initConfig({
                         pure_grids: {
                             dest : "build/public/css/main-grid.css",
                             options: {
@@ -97,7 +98,8 @@ function Tools() {
                                 }
                             }
                         }
-});`}
+                    });
+                `}
                 </CodeBlock>
 
                 <h3>Via Rework</h3>
@@ -117,7 +119,8 @@ function Tools() {
                 </p>
 
                 <CodeBlock>
-{`import rework from 'rework';
+                    {stripIndent`
+                    import rework from 'rework';
                     import pureGrids from 'rework-pure-grids';
 
                     const css = rework('').use(pureGrids.units({
@@ -130,7 +133,8 @@ const css = rework('').use(pureGrids.units({
                     })).toString();
 
                     // This will log-out the grid CSS.
-console.log(css);`}
+                    console.log(css);
+                `}
                 </CodeBlock>
 
                 <SectionHeader heading="Mutating Selectors" />
@@ -158,7 +162,8 @@ console.log(css);`}
                 </p>
 
                 <CodeBlock>
-{`grunt.initConfig({
+                    {stripIndent`
+                    grunt.initConfig({
                         css_selectors: {
                             options: {
                                 mutations: [
@@ -169,7 +174,8 @@ console.log(css);`}
                                 'dest/foo-prefixed.css': ['src/foo.css'],
                             }
                         }
-});`}
+                    });
+                `}
                 </CodeBlock>
 
                 <h3>Via Rework</h3>
@@ -189,7 +195,8 @@ console.log(css);`}
                 </p>
 
                 <CodeBlock>
-{`import rework from 'rework';
+                    {stripIndent`
+                    import rework from 'rework';
                     import selectors from 'rework-mutate-selectors';
 
                     const css = rework(inputCSS)
@@ -198,7 +205,8 @@ const css = rework(inputCSS)
                         .toString();
 
                     // This will log-out the resulting CSS.
-console.log(css);`}
+                    console.log(css);
+                `}
                 </CodeBlock>
 
                 <aside>

site/src/theme/Layout.js

@@ -26,11 +26,9 @@ function Layout(props) {
     const {
         children,
         title,
-    noFooter,
         description,
         image,
         keywords,
-    pageType,
         permalink,
         version,
     } = props;

site/static/js/menus.js

@@ -1,3 +1,4 @@
+/* eslint no-unused-vars:0 no-prototype-builtins:0 */
 (function (window, document) {
     'use strict';
 
@@ -13,7 +14,6 @@
             ARIA_HIDDEN = 'aria-hidden',
             MENU_OPEN = 0,
             MENU_CLOSED = 1,
-            MENU_PARENT_CLASS_NAME = 'pure-menu-has-children',
             MENU_ACTIVE_SELECTOR = '.pure-menu-active',
             MENU_LINK_SELECTOR = '.pure-menu-link',
             MENU_SELECTOR = '.pure-menu-children',

site/static/js/ui.js

@@ -2,8 +2,7 @@
 
     var layout   = document.getElementById('layout'),
         menu     = document.getElementById('menu'),
-        menuLink = document.getElementById('menuLink'),
+        menuLink = document.getElementById('menuLink');
-        content  = document.getElementById('main');
 
     function toggleClass(element, className) {
         var classes = element.className.split(/\s+/),

test/index.js

@@ -6,6 +6,6 @@ tap.ok(pure.getFile);
 tap.ok(pure.getFilePath);
 
 // assertions
-tap.match(pure.getFile('pure-min.css'), /pure\-button/, 'should load the file');
+tap.match(pure.getFile('pure-min.css'), /pure-button/, 'should load the file');
-tap.match(pure.getFilePath('pure-min.css'), /pure\-min\.css/, 'should return file path');
+tap.match(pure.getFilePath('pure-min.css'), /pure-min\.css/, 'should return file path');
 tap.throws(pure.getFile, new Error('undefined does not exist'));