Prettier formatting

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "arrowParens": "avoid",
+  "proseWrap": "preserve",
+  "singleQuote": true,
+  "tabWidth": 2
+}

README.md

@@ -2,11 +2,11 @@
 
 ---
 
-__Medium TOC__ is a simple tool to generate tables of contents for Medium articles. Check it out: [www.mediumtoc.com](https://www.mediumtoc.com)
+**Medium TOC** is a simple tool to generate tables of contents for Medium articles. Check it out: [www.mediumtoc.com](https://www.mediumtoc.com)
 
-| ![starting](https://github.com/adamisntdead/medium-toc/blob/master/resources/start.png?raw=true)   | ![resulting](https://github.com/adamisntdead/medium-toc/blob/master/resources/result.png?raw=true)   |
-|---------|---------|
-| Enter A URL | Get The Contents |
+| ![starting](https://github.com/adamisntdead/medium-toc/blob/master/resources/start.png?raw=true) | ![resulting](https://github.com/adamisntdead/medium-toc/blob/master/resources/result.png?raw=true) |
+| ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- |
+| Enter A URL                                                                                      | Get The Contents                                                                                   |
 
 ## Installation
 

backend/app.js

@@ -1,25 +1,24 @@
-const express = require("express");
-const cors = require("cors");
-const createTOC = require("./lib/create-toc");
+const express = require('express');
+const cors = require('cors');
+const createTOC = require('./lib/create-toc');
 
-const app = express()
-app.use(cors())
+const app = express();
+app.use(cors());
 
 app.get('/', (req, res) => {
-  const url = 'https://' + req.query.url
+  const url = 'https://' + req.query.url;
   createTOC(url)
-  .then(results => {
-    res.send({
-      url,
-      results
+    .then(results => {
+      res.send({
+        url,
+        results,
+      });
     })
-  })
-  .catch(error => {
-    res.sendStatus(502)
-  })
-
-})
+    .catch(error => {
+      res.sendStatus(502);
+    });
+});
 
 app.listen(process.env.PORT || 8080, () => {
-  console.log('Server Started')
-})
+  console.log('Server Started');
+});

backend/lib/create-toc.js

@@ -1,17 +1,17 @@
-const rp = require("request-promise");
-const cheerio = require("cheerio");
+const rp = require('request-promise');
+const cheerio = require('cheerio');
 
 function createTOC(uri) {
   return rp(uri)
     .then(body => cheerio.load(body))
     .then($ => {
       // Get The Article ID
-      const articleId = uri.substring(uri.lastIndexOf("-") + 1);
+      const articleId = uri.substring(uri.lastIndexOf('-') + 1);
 
       // Get the headings
       let results = [];
-      $("body")
-        .find("h2, h3, h4, h5, h6")
+      $('body')
+        .find('h2, h3, h4, h5, h6')
         .each((_, elem) => {
           const title = elem.children[0].data;
           const headingCode = elem.attribs.id;
@@ -25,7 +25,7 @@ function createTOC(uri) {
           results.push({
             title,
             headingCode,
-            link
+            link,
           });
         });
 

config/webpack.config.dev.js

@@ -84,7 +84,6 @@ module.exports = {
     // for React Native Web.
     extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
     alias: {
-
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
       'react-native': 'react-native-web',
@@ -115,7 +114,6 @@ module.exports = {
             options: {
               formatter: eslintFormatter,
               eslintPath: require.resolve('eslint'),
-
             },
             loader: require.resolve('eslint-loader'),
           },
@@ -144,7 +142,6 @@ module.exports = {
             include: paths.appSrc,
             loader: require.resolve('babel-loader'),
             options: {
-
               // This is a feature of `babel-loader` for webpack (not Babel itself).
               // It enables caching results in ./node_modules/.cache/babel-loader/
               // directory for faster rebuilds.

config/webpack.config.prod.js

@@ -90,8 +90,8 @@ module.exports = {
     // for React Native Web.
     extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
     alias: {
-      "react": "preact-compat",
-      "react-dom": "preact-compat",
+      react: 'preact-compat',
+      'react-dom': 'preact-compat',
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
       'react-native': 'react-native-web',
@@ -122,7 +122,6 @@ module.exports = {
             options: {
               formatter: eslintFormatter,
               eslintPath: require.resolve('eslint'),
-
             },
             loader: require.resolve('eslint-loader'),
           },
@@ -150,7 +149,6 @@ module.exports = {
             include: paths.appSrc,
             loader: require.resolve('babel-loader'),
             options: {
-
               compact: true,
             },
           },

config/webpackDevServer.config.js

@@ -9,7 +9,7 @@ const paths = require('./paths');
 const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 const host = process.env.HOST || '0.0.0.0';
 
-module.exports = function(proxy, allowedHost) {
+module.exports = function (proxy, allowedHost) {
   return {
     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
     // websites from potentially accessing local content through DNS rebinding:

package.json

@@ -47,10 +47,13 @@
     "webpack-manifest-plugin": "1.3.2",
     "whatwg-fetch": "2.0.3"
   },
-  "devDependencies": {},
+  "devDependencies": {
+    "prettier": "^2.0.4"
+  },
   "scripts": {
-    "start": "node scripts/start.js",
     "build": "node scripts/build.js",
+    "format": "prettier --write '**/*.{css,md,js}'",
+    "start": "node scripts/start.js",
     "test": "node scripts/test.js --env=jsdom"
   },
   "jest": {

scripts/start.js

@@ -92,8 +92,8 @@ choosePort(HOST, DEFAULT_PORT)
       openBrowser(urls.localUrlForBrowser);
     });
 
-    ['SIGINT', 'SIGTERM'].forEach(function(sig) {
-      process.on(sig, function() {
+    ['SIGINT', 'SIGTERM'].forEach(function (sig) {
+      process.on(sig, function () {
         devServer.close();
         process.exit();
       });

scripts/test.js

@@ -23,5 +23,4 @@ if (!process.env.CI && argv.indexOf('--coverage') < 0) {
   argv.push('--watch');
 }
 
-
 jest.run(argv);

src/App.css

@@ -1,4 +1,5 @@
-html, body {
+html,
+body {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
@@ -25,7 +26,7 @@ html, body {
 h1 {
   font-family: 'Times New Roman', Times, serif;
   font-size: 3.5rem;
-  color: #4A4A4A;
+  color: #4a4a4a;
   letter-spacing: 1.27px;
   font-weight: bold;
 

src/App.js

@@ -1,10 +1,10 @@
-import React, { Component } from "react";
-import Loadable from "react-loading-overlay";
+import React, { Component } from 'react';
+import Loadable from 'react-loading-overlay';
 
-import Instruction from "./instruction/Instruction.js";
-import Display from "./display/Display";
-import getHeadings from "./api/get-headings";
-import "./App.css";
+import Instruction from './instruction/Instruction.js';
+import Display from './display/Display';
+import getHeadings from './api/get-headings';
+import './App.css';
 
 class App extends Component {
   constructor(props) {
@@ -14,16 +14,15 @@ class App extends Component {
       message:
         "Just enter the public url of a medium article and we'll create a table of contents.",
       loading: false,
-      results: []
+      results: [],
     };
 
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
-
   handleSubmit(url) {
     this.setState({
-      loading: true
+      loading: true,
     });
 
     getHeadings(url)
@@ -33,25 +32,25 @@ class App extends Component {
             message:
               "Couldn't find headings for this URL. Please check it is correct, and is a Medium article. If the article is a draft, use the 'share' url.",
             error: true,
-            loading: false
+            loading: false,
           });
           return;
         }
 
         this.setState({
           error: false,
           message:
-            "Done! Just copy and paste whats below into your Medium article!",
+            'Done! Just copy and paste whats below into your Medium article!',
           results: results.results,
-          loading: false
+          loading: false,
         });
       })
       .catch(error => {
         this.setState({
           message:
-            "There was an error fetching content. Make sure the URL is correct and you are connected to the internet.",
+            'There was an error fetching content. Make sure the URL is correct and you are connected to the internet.',
           error: true,
-          loading: false
+          loading: false,
         });
       });
   }
@@ -66,7 +65,9 @@ class App extends Component {
         text="Creating Your Table Of Contents..."
       >
         <div className="content">
-          <h1><a href="/">Medium TOC</a></h1>
+          <h1>
+            <a href="/">Medium TOC</a>
+          </h1>
           <Instruction error={this.state.error} message={this.state.message} />
           <Display
             results={this.state.results}

src/App.test.js

@@ -1,9 +1,9 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
 
-it("renders without crashing", () => {
-  const div = document.createElement("div");
+it('renders without crashing', () => {
+  const div = document.createElement('div');
   ReactDOM.render(<App />, div);
   ReactDOM.unmountComponentAtNode(div);
 });

src/api/get-headings.js

@@ -1,8 +1,8 @@
-const apiUrl = "https://toc-backend-oirlqadtnt.now.sh";
+const apiUrl = 'https://toc-backend-oirlqadtnt.now.sh';
 function getHeadings(url) {
-  const urlPath = url.replace(/^(http|https):\/\//, "");
+  const urlPath = url.replace(/^(http|https):\/\//, '');
 
-  return fetch(apiUrl + "?url=" + encodeURI(urlPath)).then(resp => resp.json());
+  return fetch(apiUrl + '?url=' + encodeURI(urlPath)).then(resp => resp.json());
 }
 
 export default getHeadings;

src/display/Display.js

@@ -1,13 +1,13 @@
-import React from 'react'
-import TOC from "../toc/TOC";
-import UrlForm from "../form/Form";
+import React from 'react';
+import TOC from '../toc/TOC';
+import UrlForm from '../form/Form';
 
-const Display = ({results, handleSubmit}) => {
+const Display = ({ results, handleSubmit }) => {
   if (results.length > 0) {
     return <TOC results={results} />;
   } else {
     return <UrlForm handleSubmit={handleSubmit} />;
   }
-}
+};
 
 export default Display;