Revamp docs site (#181)

Gets rid of dependencies we did not need.
Replaces hard-coded javascript imports that weren't loading in Chrome with react-bootstrap.
Fixes the navbar collapse not working in Chrome.
Fixes warnings in console during development time.
Updates dependencies.
There are no more warnings in the build, so we can build with CI=true as it should be.

.circleci/config.yml

@@ -28,9 +28,7 @@ jobs:
           # command: yarn test
       - run:
           name: Run build
-          # Compiler warnings are treated as failures in CI environments by the react-scripts build
-          # We have one compiler warning that I cannot figure out how to get rid of...
-          command: CI=false yarn build
+          command: yarn build
       - persist_to_workspace:
           root: .
           paths:

package.json

@@ -4,18 +4,14 @@
   "private": true,
   "dependencies": {
     "asciidoc-loader": "^0.2.0",
-    "asciidoctor.js": "^1.5.9",
+    "asciidoctor": "^2.2.0",
     "bootstrap": "^4.3.1",
-    "codemirror": "^5.27.4",
-    "express": "^4.15.3",
     "font-awesome": "^4.7.0",
     "history": "^4.6.3",
     "octicons": "^5.0.1",
-    "opal-runtime": "^1.0.13",
-    "react": "^15.6.1",
-    "react-codemirror": "^1.0.0",
-    "react-dom": "^15.6.1",
-    "react-remarkable": "^1.1.1",
+    "react": "^17.0.2",
+    "react-bootstrap": "^1.6.1",
+    "react-dom": "^17.0.2",
     "react-router": "^4.1.2",
     "react-router-dom": "^4.1.1",
     "react-scripts": "4.0.3",
@@ -24,7 +20,6 @@
   },
   "devDependencies": {
     "file-loader": "^3.0.1",
-    "jquery": "^3.5.0",
     "loader-utils": "^1.2.3",
     "popper.js": "^1.14.7"
   },

public/index.html

@@ -38,9 +38,5 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
 
-    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
-    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>-->
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
   </body>
 </html>

src/components/App/App.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Route, Redirect, Switch } from 'react-router-dom';
-import Navbar from '../Navbar';
+import MyNavbar from '../MyNavbar';
 import Footer from '../Footer';
 import Home from '../Home';
 import DocRoutes from '../DocRoutes';
 
 export default function App() {
   return (
     <div>
-      <Navbar />
+      <MyNavbar />
 
       <Switch>
         <Route exact path="/" component={Home} />

src/components/Asciidoc/index.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import 'asciidoctor.js/dist/css/asciidoctor.css';
+import '@asciidoctor/core/dist/css/asciidoctor.css';
 
 // To rebuild this with a small set of languages, clone highlight.js, run:
 // `node tools/build.js java groovy http xml gradle yaml json -t node`
@@ -9,7 +9,7 @@ import 'asciidoctor.js/dist/css/asciidoctor.css';
 import hljs from './highlight';
 import './highlight.github.css';
 
-let asciidoctor = require('asciidoctor.js')();
+let asciidoctor = require('asciidoctor')();
 
 asciidoctor.Extensions.register(function () {
   this.treeProcessor(function() {

src/components/MyNavbar/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import {Link} from 'react-router-dom';
+import logo from '../../img/logo.svg';
+import 'font-awesome/css/font-awesome.min.css';
+import './style.css';
+import { Nav, Navbar } from "react-bootstrap";
+
+export default function MyNavbar() {
+  return (
+    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark" style={{ borderTop: '8px solid #1ba89c' }} >
+      <Navbar.Brand as={Link} to="/" >
+        <img src={logo} className="img-fluid" style={{ maxHeight: 80 }} alt="Micrometer" />
+      </Navbar.Brand>
+      <Navbar.Toggle aria-controls="responsive-navbar-nav" />
+      <Navbar.Collapse id="responsive-navbar-nav">
+        <Nav className="ml-auto mt-2 mt-lg-0">
+          <Nav.Item href="/docs">
+            <Nav.Link as={Link} to="/docs"><i className="fa fa-lg fa-book"/> Documentation</Nav.Link>
+          </Nav.Item>
+          <Nav.Item>
+            <Nav.Link href="https://github.com/micrometer-metrics/micrometer"><i className="fa fa-lg fa-github-alt" /> GitHub</Nav.Link>
+          </Nav.Item>
+          <Nav.Item>
+            <Nav.Link href="https://twitter.com/micrometerio"><i className="fa fa-lg fa-twitter" /> Twitter</Nav.Link>
+          </Nav.Item>
+          <Nav.Item>
+            <Nav.Link href="https://join.slack.com/t/micrometer-metrics/shared_invite/zt-ewo3kcs0-Ji3aOAqTxnjYPEFBBI5HqQ"><i className="fa fa-lg fa-slack" /> Slack</Nav.Link>
+          </Nav.Item>
+        </Nav>
+      </Navbar.Collapse>
+    </Navbar>
+  );
+}

src/components/Navbar/style.css → src/components/MyNavbar/style.css

@@ -1,3 +1,3 @@
 .nav-link:hover {
     background-color: #1ba89c;
-}
+}

src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter } from 'react-router-dom'
+import { Router } from 'react-router-dom'
 import App from './components/App/App';
 import registerServiceWorker from './registerServiceWorker';
 import { createBrowserHistory } from 'history';
@@ -14,5 +14,5 @@ import './index.css'; // where we wish to override bootstrap defaults
 
 const history = createBrowserHistory();
 
-ReactDOM.render(<BrowserRouter history={history}><App/></BrowserRouter>, document.getElementById('root'));
+ReactDOM.render(<Router history={history}><App/></Router>, document.getElementById('root'));
 registerServiceWorker();