├── .gitignore
├── .htaccess
├── LICENSE
├── README.md
├── _redirects
├── config
    ├── env.js
    ├── jest
    │   ├── cssTransform.js
    │   └── fileTransform.js
    ├── paths.js
    ├── polyfills.js
    ├── webpack.config.dev.js
    ├── webpack.config.prod.js
    └── webpackDevServer.config.js
├── package.json
├── public
    ├── index.html
    ├── manifest.json
    └── static
    │   ├── livechat.png
    │   └── octopus.png
├── readme-assets
    ├── auth-provider.png
    ├── config.png
    ├── create-page.png
    ├── domain.png
    ├── edit-menu.png
    ├── edit-page.png
    ├── index.png
    ├── new-page.png
    ├── rules.png
    └── system-diagram.png
├── scripts
    ├── build.js
    ├── start.js
    └── test.js
├── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── components
    │   ├── markdown
    │   │   ├── Markdown.js
    │   │   ├── hljs-github.css
    │   │   └── index.js
    │   ├── menu-search
    │   │   ├── MenuSearch.css
    │   │   ├── MenuSearch.js
    │   │   └── index.js
    │   ├── page
    │   │   ├── Page.css
    │   │   ├── Page.js
    │   │   └── index.js
    │   ├── people-online
    │   │   ├── PeopleOnline.js
    │   │   └── index.js
    │   └── person
    │   │   ├── Person.js
    │   │   └── index.js
    ├── config
    │   ├── config.template.js
    │   └── index.js
    ├── containers
    │   └── page
    │   │   ├── PageContainer.js
    │   │   └── index.js
    ├── css
    │   ├── buttons.css
    │   ├── markdown.css
    │   ├── reset.css
    │   └── tooltips.css
    ├── index.js
    ├── markdown-plugins
    │   ├── diagram
    │   │   ├── diagram.css
    │   │   └── diagram.js
    │   ├── flowchart
    │   │   └── flowchart.js
    │   ├── google-storage-images
    │   │   └── google-storage-images.js
    │   ├── heading-anchors
    │   │   ├── heading-anchors.css
    │   │   └── heading-anchors.js
    │   └── react-router-links
    │   │   └── react-router-links.js
    ├── registerServiceWorker.js
    ├── templates
    │   ├── company-structure.js
    │   ├── diagrams-help.js
    │   ├── index-page.js
    │   ├── index.js
    │   ├── menu.js
    │   ├── new-page.js
    │   └── product-roadmap.js
    └── utils
    │   ├── Firebase.js
    │   ├── OnlineTracker.js
    │   ├── Utils.js
    │   └── index.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # config
 4 | /config/config.php
 5 | 
 6 | # dependencies
 7 | /node_modules
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # production
13 | /build
14 | 
15 | # misc
16 | .DS_Store
17 | .env.local
18 | .env.development.local
19 | .env.test.local
20 | .env.production.local
21 | 
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | 
26 | # PHP Storm files
27 | .idea
28 | 


--------------------------------------------------------------------------------
/.htaccess:
--------------------------------------------------------------------------------
1 | <IfModule mod_rewrite.c>
2 |     Options FollowSymLinks MultiViews
3 |     RewriteEngine on
4 |     RewriteCond %{REQUEST_FILENAME} !-d
5 |     RewriteCond %{REQUEST_FILENAME} !-f
6 |     RewriteRule . index.html [L]
7 | </IfModule>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 LiveChat
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Octopus
  2 | 
  3 | [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
  4 | 
  5 | **🐙 Octopus** is a server-less, easy-to-setup internal wiki page with built-in software diagrams support. It uses **Markdown** for writing content and enhances it with [Graphviz](http://graphviz.org) and [flowchart.js](http://flowchart.js.org/) diagrams for easy software documentation.
  6 | 
  7 | Here's a default wiki page:
  8 | 
  9 | <kbd>
 10 |   <img src="./readme-assets/index.png" alt="" height="300" />
 11 | </kbd>
 12 | 
 13 | ### Technology
 14 | 
 15 | Octopus is a [JAMstack](https://jamstack.org/) app that uses [Google Firebase](https://firebase.google.com/) as its backend. You do not need a web server (such as Apache) or a database (like MySQL) to have it up and running. You can deploy the app to a CDN for free using [Netlify](https://www.netlify.com/).
 16 | 
 17 | #### With Octopus, you can:
 18 | * require users to be signed in to read or edit the wiki (supported providers: Google, GitHub, Email/Password, Twitter and Phone),
 19 | * create access rules for reading and editing (restrict particular users or auth domains),
 20 | * host wiki page under a custom domain.
 21 | 
 22 | #### Features
 23 | * create new wiki pages with Markdown language,
 24 | * edit menu (using Markdown) to easily link to wiki pages,
 25 | * include [Graphviz](http://www.graphviz.org/Gallery.php) and [flowchart.js](http://flowchart.js.org/) diagrams inside your Markdown content,
 26 | * see who is currently reading your wiki articles,
 27 | * adjust your Wiki front-end with React ([create-react-app](https://github.com/facebookincubator/create-react-app)).
 28 | 
 29 | 
 30 | #### Example system diagram
 31 | <kbd>
 32 |   <img src="./readme-assets/system-diagram.png" alt="" height="300" />
 33 | </kbd>
 34 | 
 35 | #### Page editing with Markdown
 36 | <kbd>
 37 |   <img src="./readme-assets/edit-page.png" alt="" height="300" />
 38 | </kbd>
 39 | 
 40 | ## Installation
 41 | 1. Clone this repository to your computer.
 42 | 2. Copy config template file (`src/config/config.template.js`) to `src/config/config.js`.
 43 | 
 44 | ```
 45 | cp src/config/config.template.js src/config/config.js
 46 | ```
 47 | 
 48 | > Note: you can safely commit `src/config/config.js` file to a repository. This file does not store sensitive credentials - all config variables will be publicly available in the `.js` file anyway.
 49 | 
 50 | 3. Create a new Firebase project here: https://firebase.google.com/
 51 | 4. Pick "Add Firebase to your web app" and copy the config to `src/config/config.js` created in step 2.
 52 | 
 53 | <kbd>
 54 |   <img src="./readme-assets/config.png" alt="" height="300" />
 55 | </kbd>
 56 | <br /><br />
 57 | 
 58 | 5. In Firebase Console, go to **Authentication** > **Sign-in method**, choose a provider and enable it. Octopus has been tested with Google and GitHub providers.
 59 | <kbd>
 60 |   <img src="./readme-assets/auth-provider.png" alt="" height="300" />
 61 | </kbd>
 62 | <br /><br />
 63 | 
 64 | 6. Still in **Authentication** > **Sign-in method** section, add the domain that will host your app to **Authorized Domains** list.
 65 | <kbd>
 66 |   <img src="./readme-assets/domain.png" alt="" height="300" />
 67 | </kbd>
 68 | <br /><br />
 69 | 
 70 | 7. Build the app:
 71 | ```
 72 | npm install
 73 | npm run build
 74 | ```
 75 | 
 76 | 8. Deploy the `build/` directory to your webserver.
 77 | 
 78 | ## Server-less deployment
 79 | You can skip hosting the app on your webserver (step 8 from installation guide above). All you need is to deploy the app to a cloud-based CDN provider.
 80 | 
 81 | We recommend using [Netlify](https://www.netlify.com/).
 82 | 
 83 | It will automatically deploy your forked Octopus GitHub repo to production after each commit. It will also prepare a ready-to-use URL that all your users can access immediately. Later on, you can set up a custom domain to make it look more professional.
 84 | 
 85 | Note: when deploying Octopus via Netlify, fill in the following details in the setup wizard:
 86 | 
 87 | > Build command: `npm run build`<br />
 88 | > Publish directory: `build`
 89 | 
 90 | ## Security
 91 | By default, any user can view and edit your wiki page. Probably this is not what you expect!
 92 | 
 93 | To make your content accessible only to your company, go to **Firebase Console** > **Database** > **Rules** and restrict who can read and edit your wiki page.
 94 | 
 95 | Here's an example rule if you use Google sign-in provider and your company email address ends with **@livechatinc.com**:
 96 | 
 97 | <kbd>
 98 |   <img src="./readme-assets/rules.png" alt="" height="300" />
 99 | </kbd>
100 | <br /><br />
101 | 
102 | ```
103 | {
104 |   "rules": {
105 |     ".read": "auth.token.email.endsWith('@livechatinc.com')",
106 |     ".write": "auth.token.email.endsWith('@livechatinc.com')"
107 |   }
108 | }
109 | ```
110 | 
111 | You can read more about possible security rules in [Realtime Database Rules](https://firebase.google.com/docs/database/security/) documentation.
112 | 
113 | ## Using Octopus
114 | Octopus is designed to be very easy to use.
115 | 
116 | To create a new page, just enter the URL you wish to create, for example: `https://<your-octopus-domain>/test/new-page`. If such page has not been created yet, you will see the following screen:
117 | 
118 | <kbd>
119 |   <img src="./readme-assets/create-page.png" alt="" />
120 | </kbd>
121 | <br /><br />
122 | 
123 | When you click "Create this page", new page will be created and filled in with default content, ready to edit:
124 | 
125 | <kbd>
126 |   <img src="./readme-assets/new-page.png" alt="" height="300" />
127 | </kbd>
128 | <br /><br />
129 | 
130 | Once the page is ready, you can easily include it in the menu:
131 | 
132 | <kbd>
133 |   <img src="./readme-assets/edit-menu.png" alt="" />
134 | </kbd>
135 | <br /><br />
136 | 
137 | That's it. Send all your teammates link to Octopus and they're ready to contribute!
138 | 
139 | <hr />
140 | 
141 | ## Project background
142 | Why did we build Octopus?
143 | 
144 | We've struggled with finding an easy-to-use software for documenting internal systems at [LiveChat](https://www.livechatinc.com/).
145 | 
146 | We wanted it to be easy to contribute for **non-technical people** and include easily **editable software diagrams**. We couldn't find a satisfying product, so we've built one.
147 | 
148 | ## Built with
149 | * React via [create-react-app](https://github.com/facebookincubator/create-react-app).
150 | * [viz.js](https://github.com/mdaines/viz.js/)
151 | * [flowchart.js](https://github.com/adrai/flowchart.js)
152 | * [Firebase](https://firebase.google.com/)
153 | 
154 | ## Changelog
155 | * 15.09.2017 - "Open as .png" option
156 | * 13.09.2017 - Initial release
157 | 
158 | ## Authors
159 | [Bartosz Olchówka](https://twitter.com/bolchowka/) / CTO @ [LiveChat](https://www.livechatinc.com/)
160 | 
161 | ## License
162 | This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details
163 | 


--------------------------------------------------------------------------------
/_redirects:
--------------------------------------------------------------------------------
1 | /*    /index.html   200
2 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.
31 | // https://github.com/motdotla/dotenv
32 | dotenvFiles.forEach(dotenvFile => {
33 |   if (fs.existsSync(dotenvFile)) {
34 |     require('dotenv').config({
35 |       path: dotenvFile,
36 |     });
37 |   }
38 | });
39 | 
40 | // We support resolving modules according to `NODE_PATH`.
41 | // This lets you use absolute paths in imports inside large monorepos:
42 | // https://github.com/facebookincubator/create-react-app/issues/253.
43 | // It works similar to `NODE_PATH` in Node itself:
44 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
45 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
46 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
47 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
48 | // We also resolve them to make sure all tools using them work consistently.
49 | const appDirectory = fs.realpathSync(process.cwd());
50 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
51 |   .split(path.delimiter)
52 |   .filter(folder => folder && !path.isAbsolute(folder))
53 |   .map(folder => path.resolve(appDirectory, folder))
54 |   .join(path.delimiter);
55 | 
56 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
57 | // injected into the application via DefinePlugin in Webpack configuration.
58 | const REACT_APP = /^REACT_APP_/i;
59 | 
60 | function getClientEnvironment(publicUrl) {
61 |   const raw = Object.keys(process.env)
62 |     .filter(key => REACT_APP.test(key))
63 |     .reduce(
64 |       (env, key) => {
65 |         env[key] = process.env[key];
66 |         return env;
67 |       },
68 |       {
69 |         // Useful for determining whether we’re running in production mode.
70 |         // Most importantly, it switches React into the correct mode.
71 |         NODE_ENV: process.env.NODE_ENV || 'development',
72 |         // Useful for resolving the correct path to static assets in `public`.
73 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
74 |         // This should only be used as an escape hatch. Normally you would put
75 |         // images into the `src` and `import` them in code to get their paths.
76 |         PUBLIC_URL: publicUrl,
77 |       }
78 |     );
79 |   // Stringify all values so we can feed into Webpack DefinePlugin
80 |   const stringified = {
81 |     'process.env': Object.keys(raw).reduce(
82 |       (env, key) => {
83 |         env[key] = JSON.stringify(raw[key]);
84 |         return env;
85 |       },
86 |       {}
87 |     ),
88 |   };
89 | 
90 |   return { raw, stringified };
91 | }
92 | 
93 | module.exports = getClientEnvironment;
94 | 


--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | 
 5 | // This is a custom Jest transformer turning file imports into filenames.
 6 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebookincubator/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(path, needsSlash) {
15 |   const hasSlash = path.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return path.substr(path, path.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${path}/`;
20 |   } else {
21 |     return path;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl = envPublicUrl ||
37 |     (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | // config after eject: we're in ./config/
42 | module.exports = {
43 |   dotenv: resolveApp('.env'),
44 |   appBuild: resolveApp('build'),
45 |   appPublic: resolveApp('public'),
46 |   appHtml: resolveApp('public/index.html'),
47 |   appIndexJs: resolveApp('src/index.js'),
48 |   appPackageJson: resolveApp('package.json'),
49 |   appSrc: resolveApp('src'),
50 |   yarnLockFile: resolveApp('yarn.lock'),
51 |   testsSetup: resolveApp('src/setupTests.js'),
52 |   appNodeModules: resolveApp('node_modules'),
53 |   publicUrl: getPublicUrl(resolveApp('package.json')),
54 |   servedPath: getServedPath(resolveApp('package.json')),
55 | };
56 | 


--------------------------------------------------------------------------------
/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | if (typeof Promise === 'undefined') {
 4 |   // Rejection tracking prevents a common issue where React gets into an
 5 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 6 |   // and the user has no idea what causes React's erratic future behavior.
 7 |   require('promise/lib/rejection-tracking').enable();
 8 |   window.Promise = require('promise/lib/es6-extensions.js');
 9 | }
10 | 
11 | // fetch() polyfill for making API calls.
12 | require('whatwg-fetch');
13 | 
14 | // Object.assign() is commonly used with React.
15 | // It will use the native implementation if it's present and isn't buggy.
16 | Object.assign = require('object-assign');
17 | 


--------------------------------------------------------------------------------
/config/webpack.config.dev.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const autoprefixer = require('autoprefixer');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  7 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  8 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  9 | const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 10 | const eslintFormatter = require('react-dev-utils/eslintFormatter');
 11 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 12 | const getClientEnvironment = require('./env');
 13 | const paths = require('./paths');
 14 | 
 15 | // Webpack uses `publicPath` to determine where the app is being served from.
 16 | // In development, we always serve from the root. This makes config easier.
 17 | const publicPath = '/';
 18 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 19 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 20 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 21 | const publicUrl = '';
 22 | // Get environment variables to inject into our app.
 23 | const env = getClientEnvironment(publicUrl);
 24 | 
 25 | // This is the development configuration.
 26 | // It is focused on developer experience and fast rebuilds.
 27 | // The production configuration is different and lives in a separate file.
 28 | module.exports = {
 29 |   // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
 30 |   // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
 31 |   devtool: 'cheap-module-source-map',
 32 |   // These are the "entry points" to our application.
 33 |   // This means they will be the "root" imports that are included in JS bundle.
 34 |   // The first two entry points enable "hot" CSS and auto-refreshes for JS.
 35 |   entry: [
 36 |     // Include an alternative client for WebpackDevServer. A client's job is to
 37 |     // connect to WebpackDevServer by a socket and get notified about changes.
 38 |     // When you save a file, the client will either apply hot updates (in case
 39 |     // of CSS changes), or refresh the page (in case of JS changes). When you
 40 |     // make a syntax error, this client will display a syntax error overlay.
 41 |     // Note: instead of the default WebpackDevServer client, we use a custom one
 42 |     // to bring better experience for Create React App users. You can replace
 43 |     // the line below with these two lines if you prefer the stock client:
 44 |     // require.resolve('webpack-dev-server/client') + '?/',
 45 |     // require.resolve('webpack/hot/dev-server'),
 46 |     require.resolve('react-dev-utils/webpackHotDevClient'),
 47 |     // We ship a few polyfills by default:
 48 |     require.resolve('./polyfills'),
 49 |     // Errors should be considered fatal in development
 50 |     require.resolve('react-error-overlay'),
 51 |     // Finally, this is your app's code:
 52 |     paths.appIndexJs,
 53 |     // We include the app code last so that if there is a runtime error during
 54 |     // initialization, it doesn't blow up the WebpackDevServer client, and
 55 |     // changing JS code would still trigger a refresh.
 56 |   ],
 57 |   output: {
 58 |     // Next line is not used in dev but WebpackDevServer crashes without it:
 59 |     path: paths.appBuild,
 60 |     // Add /* filename */ comments to generated require()s in the output.
 61 |     pathinfo: true,
 62 |     // This does not produce a real file. It's just the virtual path that is
 63 |     // served by WebpackDevServer in development. This is the JS bundle
 64 |     // containing code from all our entry points, and the Webpack runtime.
 65 |     filename: 'static/js/bundle.js',
 66 |     // There are also additional JS chunk files if you use code splitting.
 67 |     chunkFilename: 'static/js/[name].chunk.js',
 68 |     // This is the URL that app is served from. We use "/" in development.
 69 |     publicPath: publicPath,
 70 |     // Point sourcemap entries to original disk location
 71 |     devtoolModuleFilenameTemplate: info =>
 72 |       path.resolve(info.absoluteResourcePath),
 73 |   },
 74 |   resolve: {
 75 |     // This allows you to set a fallback for where Webpack should look for modules.
 76 |     // We placed these paths second because we want `node_modules` to "win"
 77 |     // if there are any conflicts. This matches Node resolution mechanism.
 78 |     // https://github.com/facebookincubator/create-react-app/issues/253
 79 |     modules: ['node_modules', paths.appNodeModules].concat(
 80 |       // It is guaranteed to exist because we tweak it in `env.js`
 81 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 82 |     ),
 83 |     // These are the reasonable defaults supported by the Node ecosystem.
 84 |     // We also include JSX as a common component filename extension to support
 85 |     // some tools, although we do not recommend using it, see:
 86 |     // https://github.com/facebookincubator/create-react-app/issues/290
 87 |     extensions: ['.js', '.json', '.jsx'],
 88 |     alias: {
 89 |       
 90 |       // Support React Native Web
 91 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 92 |       'react-native': 'react-native-web',
 93 |     },
 94 |     plugins: [
 95 |       // Prevents users from importing files from outside of src/ (or node_modules/).
 96 |       // This often causes confusion because we only process files within src/ with babel.
 97 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
 98 |       // please link the files into your node_modules/ and let module-resolution kick in.
 99 |       // Make sure your source files are compiled, as they will not be processed in any way.
100 |       new ModuleScopePlugin(paths.appSrc),
101 |     ],
102 |   },
103 |   module: {
104 |     strictExportPresence: true,
105 |     rules: [
106 |       // TODO: Disable require.ensure as it's not a standard language feature.
107 |       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
108 |       // { parser: { requireEnsure: false } },
109 | 
110 |       // First, run the linter.
111 |       // It's important to do this before Babel processes the JS.
112 |       {
113 |         test: /\.(js|jsx)$/,
114 |         enforce: 'pre',
115 |         use: [
116 |           {
117 |             options: {
118 |               formatter: eslintFormatter,
119 |               
120 |             },
121 |             loader: require.resolve('eslint-loader'),
122 |           },
123 |         ],
124 |         include: paths.appSrc,
125 |       },
126 |       // ** ADDING/UPDATING LOADERS **
127 |       // The "file" loader handles all assets unless explicitly excluded.
128 |       // The `exclude` list *must* be updated with every change to loader extensions.
129 |       // When adding a new loader, you must add its `test`
130 |       // as a new entry in the `exclude` list for "file" loader.
131 | 
132 |       // "file" loader makes sure those assets get served by WebpackDevServer.
133 |       // When you `import` an asset, you get its (virtual) filename.
134 |       // In production, they would get copied to the `build` folder.
135 |       {
136 |         exclude: [
137 |           /\.html$/,
138 |           /\.(js|jsx)$/,
139 |           /\.css$/,
140 |           /\.json$/,
141 |           /\.bmp$/,
142 |           /\.gif$/,
143 |           /\.jpe?g$/,
144 |           /\.png$/,
145 |         ],
146 |         loader: require.resolve('file-loader'),
147 |         options: {
148 |           name: 'static/media/[name].[hash:8].[ext]',
149 |         },
150 |       },
151 |       // "url" loader works like "file" loader except that it embeds assets
152 |       // smaller than specified limit in bytes as data URLs to avoid requests.
153 |       // A missing `test` is equivalent to a match.
154 |       {
155 |         test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
156 |         loader: require.resolve('url-loader'),
157 |         options: {
158 |           limit: 10000,
159 |           name: 'static/media/[name].[hash:8].[ext]',
160 |         },
161 |       },
162 |       // Process JS with Babel.
163 |       {
164 |         test: /\.(js|jsx)$/,
165 |         include: paths.appSrc,
166 |         loader: require.resolve('babel-loader'),
167 |         options: {
168 |           
169 |           // This is a feature of `babel-loader` for webpack (not Babel itself).
170 |           // It enables caching results in ./node_modules/.cache/babel-loader/
171 |           // directory for faster rebuilds.
172 |           cacheDirectory: true,
173 |         },
174 |       },
175 |       // "postcss" loader applies autoprefixer to our CSS.
176 |       // "css" loader resolves paths in CSS and adds assets as dependencies.
177 |       // "style" loader turns CSS into JS modules that inject <style> tags.
178 |       // In production, we use a plugin to extract that CSS to a file, but
179 |       // in development "style" loader enables hot editing of CSS.
180 |       {
181 |         test: /\.css$/,
182 |         use: [
183 |           require.resolve('style-loader'),
184 |           {
185 |             loader: require.resolve('css-loader'),
186 |             options: {
187 |               importLoaders: 1,
188 |             },
189 |           },
190 |           {
191 |             loader: require.resolve('postcss-loader'),
192 |             options: {
193 |               ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
194 |               plugins: () => [
195 |                 require('postcss-flexbugs-fixes'),
196 |                 autoprefixer({
197 |                   browsers: [
198 |                     '>1%',
199 |                     'last 4 versions',
200 |                     'Firefox ESR',
201 |                     'not ie < 9', // React doesn't support IE8 anyway
202 |                   ],
203 |                   flexbox: 'no-2009',
204 |                 }),
205 |               ],
206 |             },
207 |           },
208 |         ],
209 |       },
210 |       // ** STOP ** Are you adding a new loader?
211 |       // Remember to add the new extension(s) to the "file" loader exclusion list.
212 |     ],
213 |   },
214 |   plugins: [
215 |     // Makes some environment variables available in index.html.
216 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
217 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
218 |     // In development, this will be an empty string.
219 |     new InterpolateHtmlPlugin(env.raw),
220 |     // Generates an `index.html` file with the <script> injected.
221 |     new HtmlWebpackPlugin({
222 |       inject: true,
223 |       template: paths.appHtml,
224 |     }),
225 |     // Makes some environment variables available to the JS code, for example:
226 |     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
227 |     new webpack.DefinePlugin(env.stringified),
228 |     // This is necessary to emit hot updates (currently CSS only):
229 |     new webpack.HotModuleReplacementPlugin(),
230 |     // Watcher doesn't work well if you mistype casing in a path so we use
231 |     // a plugin that prints an error when you attempt to do this.
232 |     // See https://github.com/facebookincubator/create-react-app/issues/240
233 |     new CaseSensitivePathsPlugin(),
234 |     // If you require a missing module and then `npm install` it, you still have
235 |     // to restart the development server for Webpack to discover it. This plugin
236 |     // makes the discovery automatic so you don't have to restart.
237 |     // See https://github.com/facebookincubator/create-react-app/issues/186
238 |     new WatchMissingNodeModulesPlugin(paths.appNodeModules),
239 |     // Moment.js is an extremely popular library that bundles large locale files
240 |     // by default due to how Webpack interprets its code. This is a practical
241 |     // solution that requires the user to opt into importing specific locales.
242 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
243 |     // You can remove this if you don't use Moment.js:
244 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
245 |   ],
246 |   // Some libraries import Node modules but don't use them in the browser.
247 |   // Tell Webpack to provide empty mocks for them so importing them works.
248 |   node: {
249 |     fs: 'empty',
250 |     net: 'empty',
251 |     tls: 'empty',
252 |   },
253 |   // Turn off performance hints during development because we don't do any
254 |   // splitting or minification in interest of speed. These warnings become
255 |   // cumbersome.
256 |   performance: {
257 |     hints: false,
258 |   },
259 | };
260 | 


--------------------------------------------------------------------------------
/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const autoprefixer = require('autoprefixer');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  7 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
  8 | const ManifestPlugin = require('webpack-manifest-plugin');
  9 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 10 | const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 11 | const eslintFormatter = require('react-dev-utils/eslintFormatter');
 12 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 13 | const paths = require('./paths');
 14 | const getClientEnvironment = require('./env');
 15 | 
 16 | // Webpack uses `publicPath` to determine where the app is being served from.
 17 | // It requires a trailing slash, or the file assets will get an incorrect path.
 18 | const publicPath = paths.servedPath;
 19 | // Some apps do not use client-side routing with pushState.
 20 | // For these, "homepage" can be set to "." to enable relative asset paths.
 21 | const shouldUseRelativeAssetPaths = publicPath === './';
 22 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 23 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 24 | // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 25 | const publicUrl = publicPath.slice(0, -1);
 26 | // Get environment variables to inject into our app.
 27 | const env = getClientEnvironment(publicUrl);
 28 | 
 29 | // Assert this just to be safe.
 30 | // Development builds of React are slow and not intended for production.
 31 | if (env.stringified['process.env'].NODE_ENV !== '"production"') {
 32 |   throw new Error('Production builds must have NODE_ENV=production.');
 33 | }
 34 | 
 35 | // Note: defined here because it will be used more than once.
 36 | const cssFilename = 'static/css/[name].[contenthash:8].css';
 37 | 
 38 | // ExtractTextPlugin expects the build output to be flat.
 39 | // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
 40 | // However, our output is structured with css, js and media folders.
 41 | // To have this structure working with relative paths, we have to use custom options.
 42 | const extractTextPluginOptions = shouldUseRelativeAssetPaths
 43 |   ? // Making sure that the publicPath goes back to to build folder.
 44 |     { publicPath: Array(cssFilename.split('/').length).join('../') }
 45 |   : {};
 46 | 
 47 | // This is the production configuration.
 48 | // It compiles slowly and is focused on producing a fast and minimal bundle.
 49 | // The development configuration is different and lives in a separate file.
 50 | module.exports = {
 51 |   // Don't attempt to continue if there are any errors.
 52 |   bail: true,
 53 |   // We generate sourcemaps in production. This is slow but gives good results.
 54 |   // You can exclude the *.map files from the build during deployment.
 55 |   // devtool: 'source-map',
 56 |   // In production, we only want to load the polyfills and the app code.
 57 |   entry: [require.resolve('./polyfills'), paths.appIndexJs],
 58 |   output: {
 59 |     // The build folder.
 60 |     path: paths.appBuild,
 61 |     // Generated JS file names (with nested folders).
 62 |     // There will be one main bundle, and one file per asynchronous chunk.
 63 |     // We don't currently advertise code splitting but Webpack supports it.
 64 |     filename: 'static/js/[name].[chunkhash:8].js',
 65 |     chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
 66 |     // We inferred the "public path" (such as / or /my-project) from homepage.
 67 |     publicPath: publicPath,
 68 |     // Point sourcemap entries to original disk location
 69 |     devtoolModuleFilenameTemplate: info =>
 70 |       path.relative(paths.appSrc, info.absoluteResourcePath),
 71 |   },
 72 |   resolve: {
 73 |     // This allows you to set a fallback for where Webpack should look for modules.
 74 |     // We placed these paths second because we want `node_modules` to "win"
 75 |     // if there are any conflicts. This matches Node resolution mechanism.
 76 |     // https://github.com/facebookincubator/create-react-app/issues/253
 77 |     modules: ['node_modules', paths.appNodeModules].concat(
 78 |       // It is guaranteed to exist because we tweak it in `env.js`
 79 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 80 |     ),
 81 |     // These are the reasonable defaults supported by the Node ecosystem.
 82 |     // We also include JSX as a common component filename extension to support
 83 |     // some tools, although we do not recommend using it, see:
 84 |     // https://github.com/facebookincubator/create-react-app/issues/290
 85 |     extensions: ['.js', '.json', '.jsx'],
 86 |     alias: {
 87 | 
 88 |       // Support React Native Web
 89 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 90 |       'react-native': 'react-native-web',
 91 |     },
 92 |     plugins: [
 93 |       // Prevents users from importing files from outside of src/ (or node_modules/).
 94 |       // This often causes confusion because we only process files within src/ with babel.
 95 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
 96 |       // please link the files into your node_modules/ and let module-resolution kick in.
 97 |       // Make sure your source files are compiled, as they will not be processed in any way.
 98 |       new ModuleScopePlugin(paths.appSrc),
 99 |     ],
100 |   },
101 |   module: {
102 |     strictExportPresence: true,
103 |     rules: [
104 |       // TODO: Disable require.ensure as it's not a standard language feature.
105 |       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
106 |       // { parser: { requireEnsure: false } },
107 | 
108 |       // First, run the linter.
109 |       // It's important to do this before Babel processes the JS.
110 |       {
111 |         test: /\.(js|jsx)$/,
112 |         enforce: 'pre',
113 |         use: [
114 |           {
115 |             options: {
116 |               formatter: eslintFormatter,
117 | 
118 |             },
119 |             loader: require.resolve('eslint-loader'),
120 |           },
121 |         ],
122 |         include: paths.appSrc,
123 |       },
124 |       // ** ADDING/UPDATING LOADERS **
125 |       // The "file" loader handles all assets unless explicitly excluded.
126 |       // The `exclude` list *must* be updated with every change to loader extensions.
127 |       // When adding a new loader, you must add its `test`
128 |       // as a new entry in the `exclude` list in the "file" loader.
129 | 
130 |       // "file" loader makes sure those assets end up in the `build` folder.
131 |       // When you `import` an asset, you get its filename.
132 |       {
133 |         exclude: [
134 |           /\.html$/,
135 |           /\.(js|jsx)$/,
136 |           /\.css$/,
137 |           /\.json$/,
138 |           /\.bmp$/,
139 |           /\.gif$/,
140 |           /\.jpe?g$/,
141 |           /\.png$/,
142 |         ],
143 |         loader: require.resolve('file-loader'),
144 |         options: {
145 |           name: 'static/media/[name].[hash:8].[ext]',
146 |         },
147 |       },
148 |       // "url" loader works just like "file" loader but it also embeds
149 |       // assets smaller than specified size as data URLs to avoid requests.
150 |       {
151 |         test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
152 |         loader: require.resolve('url-loader'),
153 |         options: {
154 |           limit: 10000,
155 |           name: 'static/media/[name].[hash:8].[ext]',
156 |         },
157 |       },
158 |       // Process JS with Babel.
159 |       {
160 |         test: /\.(js|jsx)$/,
161 |         include: paths.appSrc,
162 |         loader: require.resolve('babel-loader'),
163 | 
164 |       },
165 |       // The notation here is somewhat confusing.
166 |       // "postcss" loader applies autoprefixer to our CSS.
167 |       // "css" loader resolves paths in CSS and adds assets as dependencies.
168 |       // "style" loader normally turns CSS into JS modules injecting <style>,
169 |       // but unlike in development configuration, we do something different.
170 |       // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
171 |       // (second argument), then grabs the result CSS and puts it into a
172 |       // separate file in our build process. This way we actually ship
173 |       // a single CSS file in production instead of JS code injecting <style>
174 |       // tags. If you use code splitting, however, any async bundles will still
175 |       // use the "style" loader inside the async code so CSS from them won't be
176 |       // in the main CSS file.
177 |       {
178 |         test: /\.css$/,
179 |         loader: ExtractTextPlugin.extract(
180 |           Object.assign(
181 |             {
182 |               fallback: require.resolve('style-loader'),
183 |               use: [
184 |                 {
185 |                   loader: require.resolve('css-loader'),
186 |                   options: {
187 |                     importLoaders: 1,
188 |                     minimize: true,
189 |                     sourceMap: true,
190 |                   },
191 |                 },
192 |                 {
193 |                   loader: require.resolve('postcss-loader'),
194 |                   options: {
195 |                     ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
196 |                     plugins: () => [
197 |                       require('postcss-flexbugs-fixes'),
198 |                       autoprefixer({
199 |                         browsers: [
200 |                           '>1%',
201 |                           'last 4 versions',
202 |                           'Firefox ESR',
203 |                           'not ie < 9', // React doesn't support IE8 anyway
204 |                         ],
205 |                         flexbox: 'no-2009',
206 |                       }),
207 |                     ],
208 |                   },
209 |                 },
210 |               ],
211 |             },
212 |             extractTextPluginOptions
213 |           )
214 |         ),
215 |         // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
216 |       },
217 |       // ** STOP ** Are you adding a new loader?
218 |       // Remember to add the new extension(s) to the "file" loader exclusion list.
219 |     ],
220 |   },
221 |   plugins: [
222 |     // Makes some environment variables available in index.html.
223 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
224 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
225 |     // In production, it will be an empty string unless you specify "homepage"
226 |     // in `package.json`, in which case it will be the pathname of that URL.
227 |     new InterpolateHtmlPlugin(env.raw),
228 |     // Generates an `index.html` file with the <script> injected.
229 |     new HtmlWebpackPlugin({
230 |       inject: true,
231 |       template: paths.appHtml,
232 |       minify: {
233 |         removeComments: true,
234 |         collapseWhitespace: true,
235 |         removeRedundantAttributes: true,
236 |         useShortDoctype: true,
237 |         removeEmptyAttributes: true,
238 |         removeStyleLinkTypeAttributes: true,
239 |         keepClosingSlash: true,
240 |         minifyJS: true,
241 |         minifyCSS: true,
242 |         minifyURLs: true,
243 |       },
244 |     }),
245 |     // Makes some environment variables available to the JS code, for example:
246 |     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
247 |     // It is absolutely essential that NODE_ENV was set to production here.
248 |     // Otherwise React will be compiled in the very slow development mode.
249 |     new webpack.DefinePlugin(env.stringified),
250 |     // Minify the code.
251 |     new webpack.optimize.UglifyJsPlugin({
252 |       compress: {
253 |         warnings: false,
254 |         // Disabled because of an issue with Uglify breaking seemingly valid code:
255 |         // https://github.com/facebookincubator/create-react-app/issues/2376
256 |         // Pending further investigation:
257 |         // https://github.com/mishoo/UglifyJS2/issues/2011
258 |         comparisons: false,
259 |       },
260 |       output: {
261 |         comments: false,
262 |       },
263 |       sourceMap: true,
264 |     }),
265 |     // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
266 |     new ExtractTextPlugin({
267 |       filename: cssFilename,
268 |     }),
269 |     // Generate a manifest file which contains a mapping of all asset filenames
270 |     // to their corresponding output file so that tools can pick it up without
271 |     // having to parse `index.html`.
272 |     new ManifestPlugin({
273 |       fileName: 'asset-manifest.json',
274 |     }),
275 |     // Generate a service worker script that will precache, and keep up to date,
276 |     // the HTML & assets that are part of the Webpack build.
277 |     new SWPrecacheWebpackPlugin({
278 |       // By default, a cache-busting query parameter is appended to requests
279 |       // used to populate the caches, to ensure the responses are fresh.
280 |       // If a URL is already hashed by Webpack, then there is no concern
281 |       // about it being stale, and the cache-busting can be skipped.
282 |       dontCacheBustUrlsMatching: /\.\w{8}\./,
283 |       filename: 'service-worker.js',
284 |       logger(message) {
285 |         if (message.indexOf('Total precache size is') === 0) {
286 |           // This message occurs for every build and is a bit too noisy.
287 |           return;
288 |         }
289 |         console.log(message);
290 |       },
291 |       minify: true,
292 |       // For unknown URLs, fallback to the index page
293 |       navigateFallback: publicUrl + '/index.html',
294 |       // Ignores URLs starting from /__ (useful for Firebase):
295 |       // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
296 |       navigateFallbackWhitelist: [/^(?!\/__).*/],
297 |       // Don't precache sourcemaps (they're large) and build asset manifest:
298 |       staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
299 |       // Work around Windows path issue in SWPrecacheWebpackPlugin:
300 |       // https://github.com/facebookincubator/create-react-app/issues/2235
301 |       stripPrefix: paths.appBuild.replace(/\\/g, '/') + '/',
302 |     }),
303 |     // Moment.js is an extremely popular library that bundles large locale files
304 |     // by default due to how Webpack interprets its code. This is a practical
305 |     // solution that requires the user to opt into importing specific locales.
306 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
307 |     // You can remove this if you don't use Moment.js:
308 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
309 |   ],
310 |   // Some libraries import Node modules but don't use them in the browser.
311 |   // Tell Webpack to provide empty mocks for them so importing them works.
312 |   node: {
313 |     fs: 'empty',
314 |     net: 'empty',
315 |     tls: 'empty',
316 |   },
317 | };
318 | 


--------------------------------------------------------------------------------
/config/webpackDevServer.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const errorOverlayMiddleware = require('react-error-overlay/middleware');
 4 | const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
 5 | const config = require('./webpack.config.dev');
 6 | const paths = require('./paths');
 7 | 
 8 | const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 9 | const host = process.env.HOST || '0.0.0.0';
10 | 
11 | module.exports = function(proxy, allowedHost) {
12 |   return {
13 |     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
14 |     // websites from potentially accessing local content through DNS rebinding:
15 |     // https://github.com/webpack/webpack-dev-server/issues/887
16 |     // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
17 |     // However, it made several existing use cases such as development in cloud
18 |     // environment or subdomains in development significantly more complicated:
19 |     // https://github.com/facebookincubator/create-react-app/issues/2271
20 |     // https://github.com/facebookincubator/create-react-app/issues/2233
21 |     // While we're investigating better solutions, for now we will take a
22 |     // compromise. Since our WDS configuration only serves files in the `public`
23 |     // folder we won't consider accessing them a vulnerability. However, if you
24 |     // use the `proxy` feature, it gets more dangerous because it can expose
25 |     // remote code execution vulnerabilities in backends like Django and Rails.
26 |     // So we will disable the host check normally, but enable it if you have
27 |     // specified the `proxy` setting. Finally, we let you override it if you
28 |     // really know what you're doing with a special environment variable.
29 |     disableHostCheck: !proxy ||
30 |       process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
31 |     // Enable gzip compression of generated files.
32 |     compress: true,
33 |     // Silence WebpackDevServer's own logs since they're generally not useful.
34 |     // It will still show compile warnings and errors with this setting.
35 |     clientLogLevel: 'none',
36 |     // By default WebpackDevServer serves physical files from current directory
37 |     // in addition to all the virtual build products that it serves from memory.
38 |     // This is confusing because those files won’t automatically be available in
39 |     // production build folder unless we copy them. However, copying the whole
40 |     // project directory is dangerous because we may expose sensitive files.
41 |     // Instead, we establish a convention that only files in `public` directory
42 |     // get served. Our build script will copy `public` into the `build` folder.
43 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
44 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
45 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
46 |     // Note that we only recommend to use `public` folder as an escape hatch
47 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
48 |     // for some reason broken when imported through Webpack. If you just want to
49 |     // use an image, put it in `src` and `import` it from JavaScript instead.
50 |     contentBase: paths.appPublic,
51 |     // By default files from `contentBase` will not trigger a page reload.
52 |     watchContentBase: true,
53 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
54 |     // for the WebpackDevServer client so it can learn when the files were
55 |     // updated. The WebpackDevServer client is included as an entry point
56 |     // in the Webpack development configuration. Note that only changes
57 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
58 |     hot: true,
59 |     // It is important to tell WebpackDevServer to use the same "root" path
60 |     // as we specified in the config. In development, we always serve from /.
61 |     publicPath: config.output.publicPath,
62 |     // WebpackDevServer is noisy by default so we emit custom message instead
63 |     // by listening to the compiler events with `compiler.plugin` calls above.
64 |     quiet: true,
65 |     // Reportedly, this avoids CPU overload on some systems.
66 |     // https://github.com/facebookincubator/create-react-app/issues/293
67 |     watchOptions: {
68 |       ignored: /node_modules/,
69 |     },
70 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
71 |     https: protocol === 'https',
72 |     host: host,
73 |     overlay: false,
74 |     historyApiFallback: {
75 |       // Paths with dots should still use the history fallback.
76 |       // See https://github.com/facebookincubator/create-react-app/issues/387.
77 |       disableDotRule: true,
78 |     },
79 |     public: allowedHost,
80 |     proxy,
81 |     setup(app) {
82 |       // This lets us open files from the runtime error overlay.
83 |       app.use(errorOverlayMiddleware());
84 |       // This service worker file is effectively a 'no-op' that will reset any
85 |       // previous service worker registered for the same host:port combination.
86 |       // We do this in development to avoid hitting the production cache if
87 |       // it used the same host and port.
88 |       // https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
89 |       app.use(noopServiceWorkerMiddleware());
90 |     },
91 |   };
92 | };
93 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "octopus",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "date-fns": "^1.28.5",
 7 |     "firebase": "^7.2.0",
 8 |     "flowchart.js": "^1.7.0",
 9 |     "highcharts": "^5.0.14",
10 |     "highlight.js": "^9.12.0",
11 |     "lodash": "^4.17.4",
12 |     "moment": "^2.18.1",
13 |     "raphael": "^2.2.7",
14 |     "react": "^15.5.4",
15 |     "react-dom": "^15.5.4",
16 |     "react-router-dom": "^4.1.2",
17 |     "remarkable": "^1.7.1",
18 |     "viz.js": "^1.8.0"
19 |   },
20 |   "devDependencies": {
21 |     "autoprefixer": "7.1.0",
22 |     "babel-core": "6.24.1",
23 |     "babel-eslint": "7.2.3",
24 |     "babel-jest": "20.0.3",
25 |     "babel-loader": "7.0.0",
26 |     "babel-preset-react-app": "^3.0.0",
27 |     "babel-runtime": "6.23.0",
28 |     "case-sensitive-paths-webpack-plugin": "1.1.4",
29 |     "chalk": "1.1.3",
30 |     "css-loader": "0.28.1",
31 |     "dotenv": "4.0.0",
32 |     "eslint": "3.19.0",
33 |     "eslint-config-react-app": "^1.0.4",
34 |     "eslint-loader": "1.7.1",
35 |     "eslint-plugin-flowtype": "2.33.0",
36 |     "eslint-plugin-import": "2.2.0",
37 |     "eslint-plugin-jsx-a11y": "5.0.3",
38 |     "eslint-plugin-react": "7.0.1",
39 |     "extract-text-webpack-plugin": "2.1.0",
40 |     "file-loader": "0.11.1",
41 |     "fs-extra": "3.0.1",
42 |     "html-webpack-plugin": "2.28.0",
43 |     "jest": "20.0.3",
44 |     "object-assign": "4.1.1",
45 |     "postcss-flexbugs-fixes": "3.0.0",
46 |     "postcss-loader": "2.0.5",
47 |     "promise": "7.1.1",
48 |     "react-dev-utils": "^3.0.0",
49 |     "react-error-overlay": "^1.0.7",
50 |     "style-loader": "0.17.0",
51 |     "sw-precache-webpack-plugin": "0.9.1",
52 |     "url-loader": "0.5.8",
53 |     "webpack": "2.6.1",
54 |     "webpack-dev-server": "2.4.5",
55 |     "webpack-manifest-plugin": "1.1.0",
56 |     "whatwg-fetch": "2.0.3"
57 |   },
58 |   "scripts": {
59 |     "start": "node scripts/start.js",
60 |     "build": "node scripts/build.js && cp _redirects build/_redirects && cp .htaccess build/.htaccess",
61 |     "deploy": "npm run build",
62 |     "test": "node scripts/test.js --env=jsdom"
63 |   },
64 |   "jest": {
65 |     "collectCoverageFrom": [
66 |       "src/**/*.{js,jsx}"
67 |     ],
68 |     "setupFiles": [
69 |       "<rootDir>/config/polyfills.js"
70 |     ],
71 |     "testMatch": [
72 |       "<rootDir>/src/**/__tests__/**/*.js?(x)",
73 |       "<rootDir>/src/**/?(*.)(spec|test).js?(x)"
74 |     ],
75 |     "testEnvironment": "node",
76 |     "testURL": "http://localhost",
77 |     "transform": {
78 |       "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
79 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
80 |       "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
81 |     },
82 |     "transformIgnorePatterns": [
83 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
84 |     ],
85 |     "moduleNameMapper": {
86 |       "^react-native$": "react-native-web"
87 |     }
88 |   },
89 |   "babel": {
90 |     "presets": [
91 |       "react-app"
92 |     ]
93 |   },
94 |   "eslintConfig": {
95 |     "extends": "react-app"
96 |   }
97 | }
98 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <title>Octopus</title>
 5 |     <meta charset="utf-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 7 |     <meta name="theme-color" content="#000000">
 8 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
 9 |     <link rel="shortcut icon" href="%PUBLIC_URL%/static/octopus.png">
10 |   </head>
11 |   <body>
12 |     <div id="root"></div>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "Octopus",
 3 |   "name": "Internal knowledge base",
 4 |   "icons": [
 5 |     {
 6 |       "src": "./static/octopus.png",
 7 |       "sizes": "512x512",
 8 |       "type": "image/png"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#ffeb3b",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/public/static/livechat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/livechat/octopus/10a7173b28fdcd399333bdf74e185df64f6667d6/public/static/livechat.png


--------------------------------------------------------------------------------
/public/static/octopus.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/livechat/octopus/10a7173b28fdcd399333bdf74e185df64f6667d6/public/static/octopus.png


--------------------------------------------------------------------------------
/readme-assets/auth-provider.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/livechat/octopus/10a7173b28fdcd399333bdf74e185df64f6667d6/readme-assets/auth-provider.png


--------------------------------------------------------------------------------
/readme-assets/config.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/livechat/octopus/10a7173b28fdcd399333bdf74e185df64f6667d6/readme-assets/config.png


--------------------------------------------------------------------------------
/readme-assets/create-page.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/livechat/octopus/10a7173b28fdcd399333bdf74e185df64f6667d6/readme-assets/create-page.png


--------------------------------------------------------------------------------
/readme-assets/domain.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/livechat/octopus/10a7173b28fdcd399333bdf74e185df64f6667d6/readme-assets/domain.png


--------------------------------------------------------------------------------
/readme-assets/edit-menu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/livechat/octopus/10a7173b28fdcd399333bdf74e185df64f6667d6/readme-assets/edit-menu.png


--------------------------------------------------------------------------------
/readme-assets/edit-page.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/livechat/octopus/10a7173b28fdcd399333bdf74e185df64f6667d6/readme-assets/edit-page.png


--------------------------------------------------------------------------------
/readme-assets/index.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/livechat/octopus/10a7173b28fdcd399333bdf74e185df64f6667d6/readme-assets/index.png


--------------------------------------------------------------------------------
/readme-assets/new-page.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/livechat/octopus/10a7173b28fdcd399333bdf74e185df64f6667d6/readme-assets/new-page.png


--------------------------------------------------------------------------------
/readme-assets/rules.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/livechat/octopus/10a7173b28fdcd399333bdf74e185df64f6667d6/readme-assets/rules.png


--------------------------------------------------------------------------------
/readme-assets/system-diagram.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/livechat/octopus/10a7173b28fdcd399333bdf74e185df64f6667d6/readme-assets/system-diagram.png


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'production';
  5 | process.env.NODE_ENV = 'production';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | const path = require('path');
 18 | const chalk = require('chalk');
 19 | const fs = require('fs-extra');
 20 | const webpack = require('webpack');
 21 | const config = require('../config/webpack.config.prod');
 22 | const paths = require('../config/paths');
 23 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 24 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 25 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 26 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 27 | 
 28 | const measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild;
 29 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 30 | const useYarn = fs.existsSync(paths.yarnLockFile);
 31 | 
 32 | // Warn and crash if required files are missing
 33 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 34 |   process.exit(1);
 35 | }
 36 | 
 37 | // First, read the current file sizes in build directory.
 38 | // This lets us display how much they changed later.
 39 | measureFileSizesBeforeBuild(paths.appBuild)
 40 |   .then(previousFileSizes => {
 41 |     // Remove all content but keep the directory so that
 42 |     // if you're in it, you don't end up in Trash
 43 |     fs.emptyDirSync(paths.appBuild);
 44 |     // Merge with the public folder
 45 |     copyPublicFolder();
 46 |     // Start the webpack build
 47 |     return build(previousFileSizes);
 48 |   })
 49 |   .then(
 50 |     ({ stats, previousFileSizes, warnings }) => {
 51 |       if (warnings.length) {
 52 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 53 |         console.log(warnings.join('\n\n'));
 54 |         console.log(
 55 |           '\nSearch for the ' +
 56 |             chalk.underline(chalk.yellow('keywords')) +
 57 |             ' to learn more about each warning.'
 58 |         );
 59 |         console.log(
 60 |           'To ignore, add ' +
 61 |             chalk.cyan('// eslint-disable-next-line') +
 62 |             ' to the line before.\n'
 63 |         );
 64 |       } else {
 65 |         console.log(chalk.green('Compiled successfully.\n'));
 66 |       }
 67 | 
 68 |       console.log('File sizes after gzip:\n');
 69 |       printFileSizesAfterBuild(stats, previousFileSizes, paths.appBuild);
 70 |       console.log();
 71 | 
 72 |       const appPackage = require(paths.appPackageJson);
 73 |       const publicUrl = paths.publicUrl;
 74 |       const publicPath = config.output.publicPath;
 75 |       const buildFolder = path.relative(process.cwd(), paths.appBuild);
 76 |       printHostingInstructions(
 77 |         appPackage,
 78 |         publicUrl,
 79 |         publicPath,
 80 |         buildFolder,
 81 |         useYarn
 82 |       );
 83 |     },
 84 |     err => {
 85 |       console.log(chalk.red('Failed to compile.\n'));
 86 |       console.log((err.message || err) + '\n');
 87 |       process.exit(1);
 88 |     }
 89 |   );
 90 | 
 91 | // Create the production build and print the deployment instructions.
 92 | function build(previousFileSizes) {
 93 |   console.log('Creating an optimized production build...');
 94 | 
 95 |   let compiler = webpack(config);
 96 |   return new Promise((resolve, reject) => {
 97 |     compiler.run((err, stats) => {
 98 |       if (err) {
 99 |         return reject(err);
100 |       }
101 |       const messages = formatWebpackMessages(stats.toJson({}, true));
102 |       if (messages.errors.length) {
103 |         return reject(new Error(messages.errors.join('\n\n')));
104 |       }
105 |       if (process.env.CI && messages.warnings.length) {
106 |         console.log(
107 |           chalk.yellow(
108 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
109 |               'Most CI servers set it automatically.\n'
110 |           )
111 |         );
112 |         return reject(new Error(messages.warnings.join('\n\n')));
113 |       }
114 |       return resolve({
115 |         stats,
116 |         previousFileSizes,
117 |         warnings: messages.warnings,
118 |       });
119 |     });
120 |   });
121 | }
122 | 
123 | function copyPublicFolder() {
124 |   fs.copySync(paths.appPublic, paths.appBuild, {
125 |     dereference: true,
126 |     filter: file => file !== paths.appHtml,
127 |   });
128 | }
129 | 


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'development';
 5 | process.env.NODE_ENV = 'development';
 6 | 
 7 | // Makes the script crash on unhandled rejections instead of silently
 8 | // ignoring them. In the future, promise rejections that are not handled will
 9 | // terminate the Node.js process with a non-zero exit code.
10 | process.on('unhandledRejection', err => {
11 |   throw err;
12 | });
13 | 
14 | // Ensure environment variables are read.
15 | require('../config/env');
16 | 
17 | const fs = require('fs');
18 | const chalk = require('chalk');
19 | const webpack = require('webpack');
20 | const WebpackDevServer = require('webpack-dev-server');
21 | const clearConsole = require('react-dev-utils/clearConsole');
22 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
23 | const {
24 |   choosePort,
25 |   createCompiler,
26 |   prepareProxy,
27 |   prepareUrls,
28 | } = require('react-dev-utils/WebpackDevServerUtils');
29 | const openBrowser = require('react-dev-utils/openBrowser');
30 | const paths = require('../config/paths');
31 | const config = require('../config/webpack.config.dev');
32 | const createDevServerConfig = require('../config/webpackDevServer.config');
33 | 
34 | const useYarn = fs.existsSync(paths.yarnLockFile);
35 | const isInteractive = process.stdout.isTTY;
36 | 
37 | // Warn and crash if required files are missing
38 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
39 |   process.exit(1);
40 | }
41 | 
42 | // Tools like Cloud9 rely on this.
43 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
44 | const HOST = process.env.HOST || '0.0.0.0';
45 | 
46 | // We attempt to use the default port but if it is busy, we offer the user to
47 | // run on a different port. `detect()` Promise resolves to the next free port.
48 | choosePort(HOST, DEFAULT_PORT)
49 |   .then(port => {
50 |     if (port == null) {
51 |       // We have not found a port.
52 |       return;
53 |     }
54 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
55 |     const appName = require(paths.appPackageJson).name;
56 |     const urls = prepareUrls(protocol, HOST, port);
57 |     // Create a webpack compiler that is configured with custom messages.
58 |     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
59 |     // Load proxy config
60 |     const proxySetting = require(paths.appPackageJson).proxy;
61 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
62 |     // Serve webpack assets generated by the compiler over a web sever.
63 |     const serverConfig = createDevServerConfig(
64 |       proxyConfig,
65 |       urls.lanUrlForConfig
66 |     );
67 |     const devServer = new WebpackDevServer(compiler, serverConfig);
68 |     // Launch WebpackDevServer.
69 |     devServer.listen(port, HOST, err => {
70 |       if (err) {
71 |         return console.log(err);
72 |       }
73 |       if (isInteractive) {
74 |         clearConsole();
75 |       }
76 |       console.log(chalk.cyan('Starting the development server...\n'));
77 |       openBrowser(urls.localUrlForBrowser);
78 |     });
79 | 
80 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
81 |       process.on(sig, function() {
82 |         devServer.close();
83 |         process.exit();
84 |       });
85 |     });
86 |   })
87 |   .catch(err => {
88 |     if (err && err.message) {
89 |       console.log(err.message);
90 |     }
91 |     process.exit(1);
92 |   });
93 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | const jest = require('jest');
19 | const argv = process.argv.slice(2);
20 | 
21 | // Watch unless on CI or in coverage mode
22 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
23 |   argv.push('--watch');
24 | }
25 | 
26 | 
27 | jest.run(argv);
28 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
  1 | /* apply a natural box layout model to all elements, but allowing components to change */
  2 | html {
  3 |   box-sizing: border-box;
  4 | }
  5 | *, *:before, *:after {
  6 |   box-sizing: inherit;
  7 | }
  8 | 
  9 | html, body {
 10 |   margin: 0;
 11 |   padding: 0;
 12 |   height: 100%;
 13 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 14 | }
 15 | #root {
 16 |   height: 100%;
 17 |   overflow: auto;
 18 | }
 19 | .app-error,
 20 | .spinner-container {
 21 |   position: absolute;
 22 |   top: 50%;
 23 |   left: 50%;
 24 |   z-index: 1;
 25 |   transform: translate(-50%, -50%);
 26 |   line-height: 1.5;
 27 | }
 28 | 
 29 | .spinner {
 30 |   width: 40px;
 31 |   height: 40px;
 32 |   background-color: #000;
 33 |   border-radius: 100%;
 34 |   -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
 35 |   animation: sk-scaleout 1.0s infinite ease-in-out;
 36 | }
 37 | 
 38 | @-webkit-keyframes sk-scaleout {
 39 |   0% { -webkit-transform: scale(0) }
 40 |   100% {
 41 |     -webkit-transform: scale(1.0);
 42 |     opacity: 0;
 43 |   }
 44 | }
 45 | 
 46 | @keyframes sk-scaleout {
 47 |   0% {
 48 |     -webkit-transform: scale(0);
 49 |     transform: scale(0);
 50 |   } 100% {
 51 |     -webkit-transform: scale(1.0);
 52 |     transform: scale(1.0);
 53 |     opacity: 0;
 54 |   }
 55 | }
 56 | 
 57 | a {
 58 |   color: #006ccf;
 59 | }
 60 | a:hover {
 61 |   color: #69b6fd;
 62 | }
 63 | 
 64 | .app__wrapper {
 65 |   display: flex;
 66 |   width: 100%;
 67 |   min-height: 100%;
 68 | }
 69 | .app__menu {
 70 |   position: relative;
 71 |   vertical-align: top;
 72 |   width: 250px;
 73 |   padding: 20px;
 74 |   font-size: 12px;
 75 |   line-height: 1.4;
 76 |   border-right: 1px solid #e6d02e;
 77 |   background: #ffeb3b;
 78 |   max-height: 100vh;
 79 |   overflow: auto;
 80 |   flex-shrink: 0;
 81 |   transition: all 100ms;
 82 | }
 83 | .app__menu__options {
 84 |   text-align: center;
 85 |   margin-bottom: 20px;
 86 | }
 87 | .app__menu__options,
 88 | .app__menu .app__menu__options a {
 89 |   color: #b3ab64;
 90 | }
 91 | 
 92 | .app__wrapper--edit-mode .app__menu {
 93 |   margin-left: -230px;
 94 | }
 95 | .app__menu--made-by {
 96 |   text-align: center;
 97 |   padding-top: 20px;
 98 |   border-top: 1px solid #e6d02e;
 99 | }
100 | .app__menu--made-by p {
101 |   margin: .5em 0;
102 | }
103 | .app__menu--made-by,
104 | .app__menu .app__menu--made-by a {
105 |   color: #b1a538;
106 | }
107 | .app__menu--made-by img {
108 |   height: 26px;
109 |   display: inline-block;
110 |   vertical-align: middle;
111 | }
112 | .app__menu a,
113 | .app__menu__container > ul > li > ul, .app__menu__container > ul > li > details > ul {
114 |   color: #d34352;
115 | }
116 | .app__menu__container > ul {
117 |   font-size: 16px;
118 |   line-height: 1.2;
119 | }
120 | 
121 | .app__menu__container > ul > li > details {
122 |   margin-bottom: 14px;
123 | }
124 | 
125 | .app__menu__container > ul > li > details summary{
126 |   cursor: pointer;
127 | }
128 | 
129 | .app__menu__container > ul > li > details summary:focus {
130 |   outline: none;
131 | }
132 | 
133 | .app__menu__container > ul > li > ul, .app__menu__container > ul > li > details > ul {
134 |   margin: 10px 0 24px 0;
135 |   font-size: 14px;
136 | }
137 | 
138 | .app__menu__container > ul > li > details > ul {
139 |   margin-bottom: 10px;
140 | }
141 | 
142 | .app__menu__container > ul > li > ul > li, .app__menu__container > ul > li > details > ul > li {
143 |   margin-bottom: .8em;
144 | }
145 | .app__menu__container a.active {
146 |   font-weight: bold;
147 | }
148 | .app__menu__container > ul > li > ul > li > ul, .app__menu__container > ul > li > details > ul > li > ul {
149 |   margin: 5px 0 0 5px;
150 |   font-size: 12px;
151 |   color: #b1a538;
152 | }
153 | .app__menu__container > ul > li > ul > li > ul > li, .app__menu__container > ul > li > details > ul > li > ul > li {
154 |   padding: 2px 0;
155 | }
156 | .app__menu__container > ul > li > ul > li > ul > li.status, .app__menu__container > ul > li > details > ul > li > ul > li.status {
157 |   position: relative;
158 | }
159 | .app__menu__container > ul > li > ul > li > ul > li.status:after, .app__menu__container > ul > li > details > ul > li > ul > li.status:after {
160 |   font-size: 10px;
161 |   font-weight: bold;
162 |   margin-left: 6px;
163 |   color: #000;
164 |   text-transform: uppercase;
165 | }
166 | 
167 | .app__menu__container > ul > li > ul > li > ul > li a, .app__menu__container > ul > li > ul > li > ul > li a {
168 |   color: #b1a538;
169 | }
170 | .app__menu__container > ul > li > ul > li > ul > li a.active, .app__menu__container > ul > li > ul > li > ul > li a.active {
171 |   font-weight: bold;
172 |   color: #000;
173 | }
174 | 
175 | .app__logo {
176 |   text-align: center;
177 |   margin-bottom: 30px;
178 | }
179 | .app__logo p {
180 |   font-size: 24px;
181 |   margin-bottom: 1em;
182 | }
183 | .app__logo img {
184 |   vertical-align: middle;
185 | }
186 | .app__logo .octopus {
187 |   height: 50px;
188 | }
189 | 
190 | .app__content {
191 |   overflow: auto;
192 |   width: 100%;
193 |   max-height: 100vh;
194 |   flex-grow: 1;
195 | }
196 | 
197 | .user-avatar {
198 |   display: inline-block;
199 |   vertical-align: middle;
200 |   width: 30px;
201 |   height: 30px;
202 |   border-radius: 50%;
203 | }
204 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
  1 | import './css/reset.css';
  2 | import './css/buttons.css';
  3 | import './css/tooltips.css';
  4 | import './App.css';
  5 | 
  6 | import React, { Component } from 'react';
  7 | import ReactDOM from 'react-dom';
  8 | import { withRouter } from 'react-router';
  9 | import { Switch, Route, NavLink, Prompt } from 'react-router-dom'
 10 | 
 11 | import * as firebase from 'firebase';
 12 | import { Firebase, OnlineTracker } from './utils';
 13 | import { Config } from './config';
 14 | import { PageContainer } from './containers/page';
 15 | import { Markdown } from './components/markdown';
 16 | import { PeopleOnline } from './components/people-online';
 17 | import { MenuSearch } from './components/menu-search';
 18 | 
 19 | import {
 20 |   menuTemplate,
 21 |   companyStructureTemplate,
 22 |   productRoadmapTemplate,
 23 |   diagramsHelpTemplate,
 24 |   newPageTemplate
 25 | } from './templates';
 26 | 
 27 | class App extends Component {
 28 |   stopRedirection = false;
 29 |   onBeforeUnloadText = "You have unsaved changes.\n\nAre you sure you want to close this page?";
 30 | 
 31 |   state = {
 32 |     loggedIn: false,
 33 |     accessDenied: false,
 34 |     hasUnsavedChanges: false,
 35 |     menu: null
 36 |   };
 37 | 
 38 |   componentDidMount() {
 39 |     window.addEventListener('beforeunload', this.onBeforeUnload);
 40 | 
 41 |     this.bindGlobalNavigationHelper();
 42 |     this.followDetailsInMenu();
 43 | 
 44 |     const config = {
 45 |       apiKey: Config.apiKey,
 46 |       authDomain: Config.authDomain,
 47 |       databaseURL: Config.databaseURL,
 48 |       projectId: Config.projectId,
 49 |       storageBucket: Config.storageBucket,
 50 |       messagingSenderId: Config.messageingSenderId
 51 |     };
 52 | 
 53 |     // allow markdown plugins refer to "firebase" global object
 54 |     // when injecting custom inline HTML
 55 |     window['firebase'] = firebase;
 56 | 
 57 |     firebase.initializeApp(config);
 58 |     try {
 59 |       firebase.auth().getRedirectResult().then((result) => {
 60 |         if (result && result.credential && result.credential.accessToken) {
 61 |           Firebase.rememberFirebaseAccessToken(result.credential.accessToken);
 62 |         }
 63 |       }).catch(err => {
 64 |         this.stopRedirection = true;
 65 |         this.setState({
 66 |           authError: true,
 67 |           authErrorMessage: err.message
 68 |         });
 69 |       });
 70 | 
 71 |       firebase.auth().onAuthStateChanged((user) => {
 72 |         if (user) {
 73 |           this.setState({
 74 |             loggedIn: true
 75 |           });
 76 | 
 77 |           let menu = firebase.database().ref('pages/menu');
 78 |           menu.on('value', (snapshot) => {
 79 |             const menuContents = snapshot.val();
 80 |             if (menuContents) {
 81 |               this.setState({
 82 |                 menu: menuContents.body
 83 |               });
 84 |             } else {
 85 |               this.createExamplePages();
 86 |             }
 87 |           }, (error) => {
 88 |             this.onAccessDenied();
 89 |           });
 90 | 
 91 |           OnlineTracker.track(this.props.location.pathname);
 92 |         } else {
 93 |           if (!this.stopRedirection) {
 94 |             firebase.auth().signInWithRedirect(this.getAuthProvider())
 95 |               .catch(err => {
 96 |                 this.stopRedirection = true;
 97 |                 this.setState({
 98 |                   authError: true,
 99 |                   authErrorMessage: err.message
100 |                 });
101 |               });
102 |           }
103 |         }
104 |       });
105 |     } catch (err) {
106 |       this.stopRedirection = true;
107 |       this.setState({
108 |         authError: true,
109 |         authErrorMessage: err.message
110 |       });
111 |     }
112 |   }
113 | 
114 |   componentWillUnmount() {
115 |     window.removeEventListener('beforeunload', this.onBeforeUnload);
116 |   }
117 | 
118 |   onBeforeUnload = (e) => {
119 |     if (this.state.hasUnsavedChanges) {
120 |       e.preventDefault();
121 |       return e.returnValue = this.onBeforeUnloadText;
122 |     }
123 |   }
124 | 
125 |   getAuthProvider() {
126 |     switch (Config.authProvider) {
127 |       case 'github':
128 |         return new firebase.auth.GithubAuthProvider()
129 |       default:
130 |         return new firebase.auth.GoogleAuthProvider()
131 |     }
132 |   }
133 | 
134 |   setupPage(ref, template) {
135 |     firebase.database().ref(`pages/${ref}`).once('value').then((snapshot) => {
136 |       if (!snapshot.val()) {
137 |         firebase.database().ref(`pages/${ref}`).set({
138 |           body: template
139 |         });
140 |       }
141 |     }).catch(err => {});
142 |   }
143 | 
144 |   createExamplePages() {
145 |     this.setupPage('menu', menuTemplate);
146 |     this.setupPage('company-structure', companyStructureTemplate);
147 |     this.setupPage('roadmap', productRoadmapTemplate);
148 |     this.setupPage('project-1', newPageTemplate);
149 |     this.setupPage('project-2', newPageTemplate);
150 |     this.setupPage('diagrams-help', diagramsHelpTemplate);
151 |   }
152 | 
153 |   // window.navigateTo(event, url)
154 |   // helps components incompatible with React
155 |   // navigate through the app
156 |   // example: [diagram] markdown links
157 |   bindGlobalNavigationHelper() {
158 |     var self = this;
159 |     const re = new RegExp('^' + window.location.origin);
160 | 
161 |     window.navigateTo = (event, url) => {
162 |       // check if URL is in the same domain
163 |       if (re.test(url)) {
164 |         event.preventDefault();
165 |         url = url.substring(window.location.origin.length);
166 |         self.props.history.push(url);
167 | 
168 |       // check if URL is a relative path (without protocol)
169 |       } else if (/^https?:/.test(url) === false) {
170 |         event.preventDefault();
171 |         self.props.history.push(url);
172 |       }
173 |     };
174 |   }
175 | 
176 |   componentDidUpdate(prevProps, prevState) {
177 |     this.followDetailsInMenu();
178 |     if (this.props.location.pathname !== prevProps.location.pathname) {
179 |       OnlineTracker.track(this.props.location.pathname);
180 |     }
181 |   }
182 | 
183 |   editModeChanged = (value) => {
184 |     this.setState({
185 |       editMode: value
186 |     });
187 |   }
188 | 
189 |   onUnsavedChanges = (value) => {
190 |     this.setState({
191 |       hasUnsavedChanges: value
192 |     });
193 |   }
194 | 
195 |   onAccessDenied = () => {
196 |     this.setState({
197 |       accessDenied: true
198 |     });
199 |   }
200 | 
201 |   openParentDetailsNode = (node) => {
202 |     if(node){
203 |       if(node.nodeName.toLowerCase() !== 'details')
204 |         this.openParentDetailsNode(node.parentNode);
205 |       else
206 |         node.setAttribute('open', 'true');
207 |     }
208 |   };
209 | 
210 |   followDetailsInMenu = () => {
211 |     const menuDOMNode = ReactDOM.findDOMNode(this.refs.menu);
212 |     if(menuDOMNode) {
213 |       const actives = menuDOMNode.getElementsByClassName('active');
214 |       for (let i = 0; i < actives.length; i++) {
215 |         this.openParentDetailsNode(actives[i]);
216 |       }
217 |     }
218 |   };
219 | 
220 |   render() {
221 |     if (this.state.authError) {
222 |       return (
223 |         <div className="app-error content--markdown">
224 |           <p>Firebase app is not configured properly.</p>
225 |           {this.state.authErrorMessage &&
226 |             <p><strong>Error message:</strong><br />{this.state.authErrorMessage}</p>
227 |           }
228 |           {!this.state.authErrorMessage &&
229 |             <div>
230 |             <p>Please go to <a href="https://console.firebase.google.com" target="_blank" rel="noopener noreferrer">Firebase Console</a> &gt; Authentication &gt; Sign-in method and make sure:</p>
231 |             <ul>
232 |             <li>at least one sign-in method is configured,</li>
233 |             <li><strong>{window.location.origin}</strong> is added to the list of authorized domains.</li>
234 |             </ul>
235 |             </div>
236 |           }
237 |         <p><a href="" onClick={() => { firebase.auth().signOut(); return false; }}>Sign out</a></p>
238 |         </div>
239 |       );
240 |     } else if (this.state.accessDenied) {
241 |       return (
242 |         <div className="app-error content--markdown">
243 |           <p>Access denied for <strong>{firebase.auth().currentUser.email}</strong>.</p>
244 |           <p><a href="" onClick={() => { firebase.auth().signOut(); return false; }}>Sign out</a></p>
245 |         </div>
246 |       );
247 |     } else if (!this.state.loggedIn) {
248 |       return (
249 |         <div className="spinner-container">
250 |           <div className="spinner"></div>
251 |         </div>
252 |       );
253 |     } else {
254 |       return this.renderApp();
255 |     }
256 |   }
257 | 
258 |   renderApp() {
259 |     const wrapperClass = ['app__wrapper'];
260 |     if (this.state.editMode) {
261 |       wrapperClass.push('app__wrapper--edit-mode');
262 |     }
263 | 
264 |     return (
265 |       <div className={wrapperClass.join(' ')}>
266 |         <div className="app__menu">
267 |           <p className="app__menu__options">
268 |             <a href="" onClick={() => { firebase.auth().signOut(); return false; }}>Sign out</a> | <NavLink to="/menu">Edit menu</NavLink><br /><br />
269 |             <NavLink to="/online">Show people online</NavLink>
270 |           </p>
271 |           <div className="app__logo">
272 |             <NavLink to="/"><img className="octopus" src="/static/octopus.png" alt="" /></NavLink>
273 |           </div>
274 | 
275 |           {!this.state.menu &&
276 |             <div className="spinner-container">
277 |               <div className="spinner"></div>
278 |             </div>
279 |           }
280 | 
281 |           {this.state.menu &&
282 |             <div>
283 |               <MenuSearch menu={this.state.menu}/>
284 |               <Markdown className="app__menu__container" ref="menu">
285 |                 {this.state.menu}
286 |               </Markdown>
287 |             </div>
288 |           }
289 | 
290 |           <div className="app__menu--made-by">
291 |             <p>Made by <a href="https://www.livechatinc.com/?utm_source=octopus&utm_medium=menu" target="_blank" rel="noopener noreferrer"><img className="octopus" src="/static/livechat.png" alt="" /></a></p>
292 |             <p>See <a href="https://github.com/livechat/octopus" target="_blank" rel="noopener noreferrer">Octopus on GitHub</a></p>
293 |           </div>
294 |         </div>
295 | 
296 |         <div className="app__content">
297 |           <Switch>
298 |             <Route path="/online" component={PeopleOnline} />
299 |             <Route render={this.renderComponentForRoute()} />
300 |           </Switch>
301 |         </div>
302 |       </div>
303 |     );
304 |   }
305 | 
306 |   renderComponentForRoute = () => {
307 |     return (route) => {
308 |       const path = route.location.pathname.substring(1);
309 |       const hash = route.location.hash;
310 | 
311 |       return <div>
312 |         <Prompt
313 |           when={this.state.hasUnsavedChanges}
314 |           message={location => this.onBeforeUnloadText}
315 |         />
316 | 
317 |         <PageContainer
318 |           onEditModeChange={this.editModeChanged}
319 |           onUnsavedChanges={this.onUnsavedChanges}
320 |           onAccessDenied={this.onAccessDenied}
321 |           path={path}
322 |           key={path}
323 |           hash={hash}
324 |         />
325 |       </div>;
326 |     }
327 |   }
328 | }
329 | 
330 | export default withRouter(App);
331 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | 
5 | it('renders without crashing', () => {
6 |   const div = document.createElement('div');
7 |   ReactDOM.render(<App />, div);
8 | });
9 | 


--------------------------------------------------------------------------------
/src/components/markdown/Markdown.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import Remarkable from 'remarkable';
 3 | import hljs from 'highlight.js';
 4 | 
 5 | import diagramPlugin from '../../markdown-plugins/diagram/diagram';
 6 | import flowchartPlugin from '../../markdown-plugins/flowchart/flowchart';
 7 | import googleStorageImagesPlugin from '../../markdown-plugins/google-storage-images/google-storage-images';
 8 | import reactRouterLinksPlugin from '../../markdown-plugins/react-router-links/react-router-links';
 9 | import headingAnchors from "../../markdown-plugins/heading-anchors/heading-anchors";
10 | 
11 | import './hljs-github.css';
12 | 
13 | export default class Markdown extends Component {
14 |   componentWillMount() {
15 |     this.md = new Remarkable({
16 |       linkTarget: '_blank',
17 |       breaks: true,
18 |       linkify: true,
19 |       typographer: true,
20 |       html: true,
21 | 
22 |       // https://github.com/jonschlinkert/remarkable#syntax-highlighting
23 |       highlight: (str, lang) => {
24 |         if (lang && hljs.getLanguage(lang)) {
25 |           try {
26 |             return hljs.highlight(lang, str).value;
27 |           } catch (err) {}
28 |         }
29 | 
30 |         try {
31 |           return hljs.highlightAuto(str).value;
32 |         } catch (err) {}
33 | 
34 |         return ''; // use external default escaping
35 |       }
36 |     });
37 | 
38 |     this.md.use(diagramPlugin);
39 |     this.md.use(flowchartPlugin);
40 |     this.md.use(googleStorageImagesPlugin);
41 |     this.md.use(reactRouterLinksPlugin);
42 |     this.md.use(headingAnchors);
43 |   }
44 | 
45 |   render() {
46 |     return (
47 |       <div style={{width:'100%'}}>
48 |         {React.Children.map(this.props.children, child => {
49 |           if (typeof child === 'string') {
50 |             return (
51 |               <div
52 |                 className={this.props.className}
53 |                 dangerouslySetInnerHTML={{__html: this.md.render(child)}}
54 |               />
55 |             );
56 |           } else {
57 |             return child;
58 |           }
59 |         })}
60 |       </div>
61 |     );
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/src/components/markdown/hljs-github.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | 
  3 | github.com style (c) Vasily Polovnyov <vast@whiteants.net>
  4 | 
  5 | */
  6 | 
  7 | .hljs {
  8 |   display: block;
  9 |   overflow-x: auto;
 10 |   padding: 0.5em;
 11 |   color: #333;
 12 |   background: #f8f8f8;
 13 | }
 14 | 
 15 | .hljs-comment,
 16 | .hljs-quote {
 17 |   color: #998;
 18 |   font-style: italic;
 19 | }
 20 | 
 21 | .hljs-keyword,
 22 | .hljs-selector-tag,
 23 | .hljs-subst {
 24 |   color: #333;
 25 |   font-weight: bold;
 26 | }
 27 | 
 28 | .hljs-number,
 29 | .hljs-literal,
 30 | .hljs-variable,
 31 | .hljs-template-variable,
 32 | .hljs-tag .hljs-attr {
 33 |   color: #008080;
 34 | }
 35 | 
 36 | .hljs-string,
 37 | .hljs-doctag {
 38 |   color: #d14;
 39 | }
 40 | 
 41 | .hljs-title,
 42 | .hljs-section,
 43 | .hljs-selector-id {
 44 |   color: #900;
 45 |   font-weight: bold;
 46 | }
 47 | 
 48 | .hljs-subst {
 49 |   font-weight: normal;
 50 | }
 51 | 
 52 | .hljs-type,
 53 | .hljs-class .hljs-title {
 54 |   color: #458;
 55 |   font-weight: bold;
 56 | }
 57 | 
 58 | .hljs-tag,
 59 | .hljs-name,
 60 | .hljs-attribute {
 61 |   color: #000080;
 62 |   font-weight: normal;
 63 | }
 64 | 
 65 | .hljs-regexp,
 66 | .hljs-link {
 67 |   color: #009926;
 68 | }
 69 | 
 70 | .hljs-symbol,
 71 | .hljs-bullet {
 72 |   color: #990073;
 73 | }
 74 | 
 75 | .hljs-built_in,
 76 | .hljs-builtin-name {
 77 |   color: #0086b3;
 78 | }
 79 | 
 80 | .hljs-meta {
 81 |   color: #999;
 82 |   font-weight: bold;
 83 | }
 84 | 
 85 | .hljs-deletion {
 86 |   background: #fdd;
 87 | }
 88 | 
 89 | .hljs-addition {
 90 |   background: #dfd;
 91 | }
 92 | 
 93 | .hljs-emphasis {
 94 |   font-style: italic;
 95 | }
 96 | 
 97 | .hljs-strong {
 98 |   font-weight: bold;
 99 | }
100 | 


--------------------------------------------------------------------------------
/src/components/markdown/index.js:
--------------------------------------------------------------------------------
1 | export { default as Markdown } from './Markdown.js';
2 | 


--------------------------------------------------------------------------------
/src/components/menu-search/MenuSearch.css:
--------------------------------------------------------------------------------
 1 | #menuSearch {
 2 |     position: relative;
 3 |     margin: 1.5em auto;
 4 | }
 5 | 
 6 | #menuSearch input {
 7 |     width: 100%;
 8 |     border: 1px #bfbfbf solid;
 9 |     font-size: 1.1em;
10 |     padding: 5px;
11 | }
12 | 
13 | #menuSearch input:focus {
14 |     outline: none;
15 | }
16 | 
17 | #menuSearchClear {
18 |     position: absolute;
19 |     right: 5px;
20 |     top: 50%;
21 |     transform: translateY(-50%) rotate(45deg);
22 |     font-size: 2em;
23 |     font-weight: 200;
24 |     cursor: pointer;
25 | }
26 | 
27 | #menuSearchResults {
28 |     font-size: 1.1em;
29 |     position: absolute;
30 |     z-index: 2;
31 |     background: #fff;
32 |     border: 1px #bfbfbf solid;
33 |     border-top: none;
34 |     width: 100%;
35 |     max-height: 20em;
36 |     overflow: auto;
37 | }
38 | 
39 | #menuSearchResults a {
40 |     border-bottom: 1px #bfbfbf solid;
41 |     padding: 5px;
42 |     display: block;
43 | }
44 | 
45 | #menuSearchResults a:last-child{
46 |     border-bottom: none;
47 | }
48 | 
49 | #menuSearchResults a:hover {
50 |     background: #dfdfdf;
51 | }
52 | 
53 | #menuSearchResults a span {
54 |     color: #5a5a5a;
55 |     font-weight: 400;
56 | }
57 | 
58 | #menuSearchNoResults {
59 |     padding: 5px;
60 | }
61 | 
62 | #menuSearchResults p {
63 |     color: #5a5a5a;
64 | }
65 | 
66 | #menuSearchResults a {
67 |     text-decoration: none;
68 |     color: #303030;
69 |     font-weight: 700;
70 | }


--------------------------------------------------------------------------------
/src/components/menu-search/MenuSearch.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | 
  3 | import './MenuSearch.css';
  4 | 
  5 | export default class MenuSearch extends Component {
  6 |     state = {
  7 |         titleQuery: '',
  8 |         linkQuery: '',
  9 |         showResults: false,
 10 |         results: []
 11 |     };
 12 | 
 13 |     static defaultProps = {
 14 |         menu: ''
 15 |     };
 16 | 
 17 |     search = {
 18 |         value: null
 19 |     };
 20 | 
 21 |     static removeDuplicates(arr){
 22 |         return arr.filter(function(elem, index, self) {
 23 |             return index === self.indexOf(elem);
 24 |         });
 25 |     }
 26 | 
 27 |     static createLinkRegex(query) {
 28 |         return new RegExp(
 29 |             '\\[.*\\]\\(.*(' + query + ').*\\)',
 30 |             "gi"
 31 |         );
 32 |     }
 33 |     static createTitleRegex(query) {
 34 |         return new RegExp(
 35 |             '\\[.*(' + query + ').*\\]\\(.*\\)',
 36 |             "gi"
 37 |         );
 38 |     }
 39 | 
 40 |     static escapeRegex(s) {
 41 |         return s.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
 42 |     }
 43 | 
 44 |     searchInMenu() {
 45 |         const menu = this.props.menu;
 46 | 
 47 |         const titleArray = menu.match(MenuSearch.createTitleRegex(this.state.titleQuery));
 48 |         const linkArray = menu.match(MenuSearch.createLinkRegex(this.state.linkQuery));
 49 | 
 50 |         const titleRegex = /\[(.*?)\]/;
 51 |         const linkRegex = /\]\((.*?)\)/;
 52 | 
 53 |         let resultsArray = [];
 54 |         let finalArray = [];
 55 |         let valueObject = {};
 56 |         let blockRegex;
 57 | 
 58 |         if (linkArray !== null && titleArray !== null)
 59 |             resultsArray = MenuSearch.removeDuplicates(titleArray.concat(linkArray));
 60 |         else if (titleArray === null && linkArray !== null)
 61 |             resultsArray = linkArray;
 62 |         else if (linkArray === null && titleArray !== null)
 63 |             resultsArray = titleArray;
 64 | 
 65 |         if(resultsArray.length > 0) {
 66 |             resultsArray.forEach(function (value) {
 67 |                 blockRegex = new RegExp(
 68 |                     '<details><summary>(.*?)<\\/summary>[^<]*?' + MenuSearch.escapeRegex(value),
 69 |                     ''
 70 |                 );
 71 | 
 72 |                 valueObject = {
 73 |                     "title": value.match(titleRegex)[1],
 74 |                     "link": value.match(linkRegex)[1],
 75 |                     "parent": (menu.match(blockRegex)) ? menu.match(blockRegex)[1] : null
 76 |                 };
 77 |                 finalArray.push(valueObject);
 78 |             });
 79 |         }
 80 | 
 81 |         this.setState({
 82 |             showResults: true,
 83 |             results: finalArray
 84 |         });
 85 |     }
 86 | 
 87 |     cleanResults = () => {
 88 |         this.setState({
 89 |             showResults: false,
 90 |             results: ''
 91 |         });
 92 |     };
 93 | 
 94 |     handleInputChange = () => {
 95 |         this.setState({
 96 |             titleQuery: this.search.value,
 97 |             linkQuery: this.search.value.replace(" ", "-")
 98 |         }, () => {
 99 |             if(this.search.value !== null && this.search.value.length > 2)
100 |                 this.searchInMenu();
101 |             else
102 |                 this.cleanResults();
103 |         });
104 |     };
105 | 
106 |     preventBlur = (e) => {
107 |         e.preventDefault();
108 |     };
109 | 
110 |     handleClearButton = () => {
111 |         this.search.value = '';
112 |         this.handleInputChange();
113 |         this.search.focus();
114 |     };
115 | 
116 |     handleSearchResultClick = (event) => {
117 |         window.navigateTo(event, event.currentTarget.getAttribute('href'));
118 |         this.cleanResults();
119 |         this.search.blur();
120 |     };
121 | 
122 |     render() {
123 |         return (
124 |             <form id="menuSearch"
125 |                   onFocus={this.handleInputChange}
126 |                   onSubmit={(event) => event.preventDefault()}
127 |             >
128 |                 <input
129 |                     placeholder="Search in menu..."
130 |                     ref={input => this.search = input}
131 |                     onChange={this.handleInputChange}
132 |                     onBlur={this.cleanResults}
133 |                 />
134 |                 {(this.search.value && <span id="menuSearchClear" onClick={this.handleClearButton}>+</span>)}
135 |                 {(this.state.showResults && <div id="menuSearchResults" onMouseDown={this.preventBlur}>{
136 |                     (this.state.results.length > 0) ? this.state.results.map((result, i) =>
137 |                         <a
138 |                             href={result.link}
139 |                             onClick={this.handleSearchResultClick}
140 |                             key={i}
141 |                         >
142 |                             {(result.parent && <span>{result.parent} &raquo; </span>)}
143 |                             {result.title}
144 |                         </a>
145 |                     ) : <div id="menuSearchNoResults"><p>No results :-(</p></div>
146 |                 }</div>)}
147 |             </form>
148 |         )
149 |     }
150 | }


--------------------------------------------------------------------------------
/src/components/menu-search/index.js:
--------------------------------------------------------------------------------
1 | export { default as MenuSearch } from './MenuSearch.js';
2 | 


--------------------------------------------------------------------------------
/src/components/page/Page.css:
--------------------------------------------------------------------------------
 1 | .content {
 2 |   padding: 30px;
 3 | }
 4 | .content__body {
 5 |   display: flex;
 6 |   flex-flow: row;
 7 | }
 8 | .content__markdown,
 9 | .content__editor {
10 |   flex: 1;
11 | }
12 | .content--edit-mode .content__body {
13 |   width: 50%;
14 | }
15 | .content--edit-mode .content__markdown {
16 |   overflow: auto;
17 | }
18 | .content__meta {
19 |   padding-bottom: 20px;
20 |   margin-bottom: 20px;
21 |   border-bottom: 1px solid #ddd;
22 |   font-size: 14px;
23 |   color: #999;
24 |   line-height: 1.5;
25 | }.content__meta__currently-viewing {
26 |   margin-top: 5px;
27 | }
28 | .content__meta__currently-viewing span {
29 |   margin-left: 5px;
30 | }
31 | 
32 | .content__editor {
33 |   position: fixed;
34 |   top: 60px;
35 |   right: 0;
36 |   bottom: 0;
37 |   width: 45%;
38 |   margin: 20px;
39 |   display: flex;
40 |   flex-direction: column;
41 |   align-content: stretch;
42 | }
43 | 
44 | .content__editor__textarea {
45 |   display: block;
46 |   flex: 1;
47 |   width: 100%;
48 |   padding: 10px;
49 |   margin-bottom: 10px;
50 |   border: 2px solid #ddd;
51 |   border-radius: 5px;
52 |   tab-size: 2;
53 |   font-size: 16px;
54 |   font-family: "Andale Mono", Menlo, monospace;
55 |   letter-spacing: -1px;
56 | }
57 | .content__editor__buttons {
58 |   line-height: 40px;
59 | }
60 | .content__editor__buttons button {
61 |   margin-right: 5px;
62 | }
63 | .content__editor__buttons__guide {
64 |   float: right;
65 | }
66 | 


--------------------------------------------------------------------------------
/src/components/page/Page.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | 
  4 | import throttle from 'lodash/throttle';
  5 | import { Markdown } from '../markdown';
  6 | import { distanceInWordsToNow } from 'date-fns';
  7 | import { Person } from '../person';
  8 | 
  9 | import './Page.css';
 10 | import '../../css/markdown.css';
 11 | 
 12 | export default class Page extends Component {
 13 | 
 14 |   defaultProps = {
 15 |     canEdit: false,
 16 |     currentlyViewing: [],
 17 |     lastChangeTimestamp: null
 18 |   };
 19 | 
 20 |   state = {
 21 |     body: null,
 22 |     originalBody: null,
 23 |     hasUnsavedChanges: null,
 24 |     editMode: false
 25 |   };
 26 | 
 27 |   componentDidMount() {
 28 |     this.setEditMode(false);
 29 |     this.setState({
 30 |       body: this.props.body,
 31 |       originalBody: this.props.body,
 32 |       hasUnsavedChanges: false
 33 |     });
 34 |   }
 35 | 
 36 |   componentDidUpdate(prevProps, prevState) {
 37 |     if (prevProps.body !== this.props.body) {
 38 |       this.setState({
 39 |         body: this.props.body,
 40 |         originalBody: this.props.body
 41 |       });
 42 |     }
 43 | 
 44 |     if (prevState.hasUnsavedChanges !== this.state.hasUnsavedChanges) {
 45 |       if (this.props.onUnsavedChanges) {
 46 |         this.props.onUnsavedChanges(this.state.hasUnsavedChanges);
 47 |       }
 48 |     }
 49 | 
 50 |     if (this.props.hash)
 51 |       this.handleHashAnchor();
 52 |   }
 53 | 
 54 |   setEditMode(value) {
 55 |     this.setState({
 56 |       editMode: value
 57 |     });
 58 | 
 59 |     if (this.props.onEditModeChange) {
 60 |       this.props.onEditModeChange(value);
 61 |     }
 62 |   }
 63 | 
 64 |   enableEditMode = (e) => {
 65 |     if (e) {
 66 |       e.preventDefault();
 67 |     }
 68 |     this.setEditMode(true);
 69 |   }
 70 | 
 71 |   handleBodyChange = (e) => {
 72 |     e.persist();
 73 |     this.throttledBodyChange(e);
 74 |   }
 75 | 
 76 |   throttledBodyChange = throttle((e) => {
 77 |     const bodyValue = e.target.value;
 78 | 
 79 |     this.setState({
 80 |       body: bodyValue,
 81 |       hasUnsavedChanges: bodyValue !== this.state.originalBody
 82 |     });
 83 |   }, 1000);
 84 | 
 85 |   handleEditorKeyDown = (e) => {
 86 |     const el = e.target;
 87 | 
 88 |     if (e.keyCode === 9) {
 89 |       // TAB key was pressed
 90 |       // get caret position/selection
 91 |       var val = el.value,
 92 |         start = el.selectionStart,
 93 |         end = el.selectionEnd;
 94 | 
 95 |       // set textarea value to: text before caret + tab + text after caret
 96 |       el.value = val.substring(0, start) + '\t' + val.substring(end);
 97 | 
 98 |       // put caret at right position again
 99 |       el.selectionStart = el.selectionEnd = start + 1;
100 | 
101 |       // prevent the focus lose
102 |       e.preventDefault();
103 |     }
104 |   }
105 | 
106 |   handleHashAnchor = () => {
107 |     const hash = this.props.hash;
108 |     if(hash) {
109 |       const element = document.getElementById(hash.substr(1));
110 |       if (element)
111 |         element.scrollIntoView();
112 |     }
113 |   }
114 | 
115 |   saveChanges = (e) => {
116 |     this.setEditMode(false);
117 | 
118 |     this.setState({
119 |       hasUnsavedChanges: false
120 |     });
121 | 
122 |     if (this.props.onChangesSaved) {
123 |       this.props.onChangesSaved(this.state.body);
124 |     }
125 |   }
126 | 
127 |   cancelChanges = (e) => {
128 |     e.preventDefault();
129 | 
130 |     this.setState({
131 |       body: this.state.originalBody,
132 |       hasUnsavedChanges: false
133 |     });
134 |     this.setEditMode(false);
135 |   }
136 | 
137 |   render() {
138 |     const contentClass = ['content', 'content--page'];
139 |     if (this.state.editMode) {
140 |       contentClass.push('content--edit-mode');
141 |     }
142 | 
143 |     let meta = [];
144 |     if (this.props.lastChangeTimestamp) {
145 |       meta.push(<span key="last-change-timestamp">Last modified: {distanceInWordsToNow(new Date(this.props.lastChangeTimestamp * 1e3))} ago by {this.props.lastChangeAutor}</span>);
146 |     }
147 |     if (!this.state.editMode) {
148 |       meta.push(<a key="edit-mode" href="" onClick={this.enableEditMode}>Edit this page</a>);
149 |     }
150 | 
151 |     return (
152 |       <div className={contentClass.join(' ')}>
153 |         <div className="content__meta">
154 |           {this.props.canEdit &&
155 |             <p>{meta.reduce((acc, x) => acc === null ? [x] : [acc, ' | ', x], null)}</p>
156 |           }
157 |           {this.props.currentlyViewing.length > 0 &&
158 |             <p className="content__meta__currently-viewing">
159 |               Reading now: {this.props.currentlyViewing.map(user => <Person data={user} key={user.email} />)}
160 |             </p>
161 |           }
162 |         </div>
163 | 
164 |         <div className="content__body">
165 |           <Markdown className="content__markdown content--markdown">
166 |           {this.state.body}
167 |           </Markdown>
168 | 
169 |           {this.state.editMode &&
170 |             <div className="content__editor">
171 |               <textarea
172 |                 className="content__editor__textarea"
173 |                 defaultValue={this.state.body}
174 |                 onKeyDown={this.handleEditorKeyDown}
175 |                 onChange={this.handleBodyChange}
176 |                 ref={(ref) => ref && ref.focus()}
177 |               />
178 |               <p className="content__editor__buttons">
179 |                 <button onClick={this.saveChanges}>Save changes</button> or <a href="" className="content__editor__buttons__cancel" onClick={this.cancelChanges}>cancel</a>
180 |                 <span className="content__editor__buttons__guide">
181 |                   <a href="https://guides.github.com/features/mastering-markdown/" target="_blank" rel="noopener noreferrer">Formatting help</a>
182 |                   <span> | </span>
183 |                   <a href="/diagrams-help" target="_blank" rel="noopener noreferrer">Diagrams help</a>
184 |                 </span>
185 |               </p>
186 |             </div>
187 |           }
188 |         </div>
189 |       </div>
190 |     );
191 |   }
192 | }
193 | 
194 | Page.propTypes = {
195 |   body: PropTypes.string.isRequired,
196 |   onEditModeChange: PropTypes.func,
197 |   onUnsavedChanges: PropTypes.func,
198 |   onChangesSaved: PropTypes.func,
199 |   canEdit: PropTypes.bool,
200 |   currentlyViewing: PropTypes.array,
201 |   lastChangeTimestamp: PropTypes.number,
202 |   lastChangeAutor: PropTypes.string,
203 |   hash: PropTypes.string
204 | };
205 | 


--------------------------------------------------------------------------------
/src/components/page/index.js:
--------------------------------------------------------------------------------
1 | export { default as Page } from './Page.js';
2 | 


--------------------------------------------------------------------------------
/src/components/people-online/PeopleOnline.js:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react';
 2 | import * as firebase from 'firebase';
 3 | import { Firebase } from '../../utils';
 4 | import { Markdown } from '../markdown';
 5 | import { distanceInWordsToNow } from 'date-fns';
 6 | 
 7 | export default class PeopleOnline extends Component {
 8 | 
 9 |   state = {
10 |     fetching: true,
11 |     users: []
12 |   };
13 | 
14 |   componentDidMount() {
15 |     firebase.database().ref('online').on('value', (snapshot) => {
16 |       const activeUsers = snapshot.val();
17 |       const users = [];
18 |       if (activeUsers) {
19 |         Object.keys(activeUsers)
20 |           // show active from last 5 minutes
21 |           .filter(key => activeUsers[key].lastActive > +(new Date()) - 300 * 1e3)
22 |           .forEach(key => {
23 |             const user = activeUsers[key];
24 |             users.push({
25 |               email: Firebase.decodeFirebaseKey(key),
26 |               lastActive: user.lastActive,
27 |               path: user.path,
28 |               photoUrl: user.photoUrl
29 |             });
30 |         });
31 |       }
32 | 
33 |       users.sort((a, b) => {
34 |         if (a.lastActive < b.lastActive) return 1;
35 |         if (a.lastActive > b.lastActive) return -1;
36 |         return 0;
37 |       });
38 | 
39 |       this.setState({
40 |         fetching: false,
41 |         users
42 |       });
43 |     });
44 |   }
45 | 
46 |   render() {
47 |     return (
48 |       <div className="content content--page-people-online">
49 |         <div className="content__body">
50 |           {this.state.fetching &&
51 |             <div className="spinner-container">
52 |               <div className="spinner"></div>
53 |             </div>
54 |           }
55 |           {!this.state.fetching &&
56 | <Markdown className="content__markdown content--markdown">
57 | {`
58 | # People online
59 | Active in the last 5 minutes:
60 | 
61 |  Who | Where | Last Active
62 | :--: | :---- | :----------
63 | ${this.state.users.map((user) => {
64 |   return [`<span class="tooltip-right tooltip-auto" data-tooltip="${user.email}"><img src="${user.photoUrl}" alt="${user.email}" class="user-avatar" /></span>`, `${window.location.origin}${user.path}`, `${distanceInWordsToNow(user.lastActive)} ago`].join('|');
65 | }).join("\n")}
66 | `}
67 | </Markdown>
68 |           }
69 |         </div>
70 |       </div>
71 |     );
72 |   }
73 | 
74 |   componentWillUnmount() {
75 |     firebase.database().ref('online').off();
76 |   }
77 | }
78 | 


--------------------------------------------------------------------------------
/src/components/people-online/index.js:
--------------------------------------------------------------------------------
1 | export { default as PeopleOnline } from './PeopleOnline.js';
2 | 


--------------------------------------------------------------------------------
/src/components/person/Person.js:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react';
 2 | 
 3 | export default class Person extends Component {
 4 |   render() {
 5 |     return (
 6 |       <span
 7 |         className="tooltip-auto"
 8 |         data-tooltip={this.props.data.email} >
 9 |           <img
10 |             src={this.props.data.photoUrl}
11 |             alt={this.props.data.email}
12 |             className="user-avatar" />
13 |       </span>
14 |     );
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/components/person/index.js:
--------------------------------------------------------------------------------
1 | export { default as Person } from './Person.js';
2 | 


--------------------------------------------------------------------------------
/src/config/config.template.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   authProvider: "google",
 3 |   apiKey: "",
 4 |   authDomain: "",
 5 |   databaseURL: "",
 6 |   projectId: "",
 7 |   storageBucket: "",
 8 |   messagingSenderId: ""
 9 | };
10 | 


--------------------------------------------------------------------------------
/src/config/index.js:
--------------------------------------------------------------------------------
1 | export { default as Config } from "./config.js";
2 | 


--------------------------------------------------------------------------------
/src/containers/page/PageContainer.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | 
  4 | import * as firebase from 'firebase';
  5 | import { Utils, Firebase } from '../../utils';
  6 | import { Page } from '../../components/page';
  7 | import { indexPageTemplate, newPageTemplate } from '../../templates';
  8 | 
  9 | export default class PageContainer extends Component {
 10 |   state = {
 11 |     currentlyViewing: [],
 12 |     fetched: false,
 13 |     body: '',
 14 |   };
 15 | 
 16 |   getCurrentPath() {
 17 |     return this.parsePath(this.props.path);
 18 |   }
 19 | 
 20 |   parsePath(path) {
 21 |     if (path === '') {
 22 |       return 'index';
 23 |     }
 24 |     return path.replace(/[#$[.\]]/g, '');
 25 |   }
 26 | 
 27 |   componentDidMount() {
 28 |     this.setState({
 29 |       fetched: false
 30 |     });
 31 | 
 32 |     firebase.database().ref('online').on('value', (snapshot) => {
 33 |       if (snapshot) {
 34 |         const activeUsers = snapshot.val();
 35 |         const currentlyViewing = Object.keys(activeUsers)
 36 |           // show active from this page
 37 |           .filter(key => activeUsers[key].path.substring(1) === this.props.path)
 38 |           // show active from last 5 minutes
 39 |           .filter(key => activeUsers[key].lastActive > +(new Date()) - 300 * 1e3)
 40 |           .map(key => {
 41 |             return {
 42 |               email: Firebase.decodeFirebaseKey(key),
 43 |               photoUrl: activeUsers[key].photoUrl
 44 |             }
 45 |           });
 46 | 
 47 |         this.setState({ currentlyViewing });
 48 |       }
 49 |     }, (error) => {
 50 |       if (error.code === 'PERMISSION_DENIED') {
 51 |         this.props.onAccessDenied();
 52 |       }
 53 |     });
 54 | 
 55 |     firebase.database().ref(`pages/${this.getCurrentPath()}`).on('value', (snapshot) => {
 56 |       const data = snapshot.val();
 57 |       if (data && data.body) {
 58 |         this.setState({
 59 |           fetched: true,
 60 |           e404: false,
 61 |           body: data.body,
 62 |           lastChangeTimestamp: data.lastChangeTimestamp,
 63 |           lastChangeAutor: data.lastChangeAutor
 64 |         });
 65 |       } else if (this.getCurrentPath() === 'index') {
 66 |         this.createIndexPage();
 67 |       } else {
 68 |         this.setState({
 69 |           fetched: true,
 70 |           e404: true
 71 |         });
 72 |       }
 73 |     }, (error) => {
 74 |       if (error.code === 'PERMISSION_DENIED') {
 75 |         this.props.onAccessDenied();
 76 |       }
 77 |     });
 78 |   }
 79 | 
 80 |   componentWillUnmount() {
 81 |     firebase.database().ref(`pages/${this.getCurrentPath()}`).off();
 82 |     firebase.database().ref('online').off();
 83 |   }
 84 | 
 85 |   createIndexPage() {
 86 |     firebase.database().ref('pages/index').set({
 87 |       body: indexPageTemplate
 88 |     });
 89 |   }
 90 | 
 91 |   onChangesSaved = (newBody) => {
 92 |     firebase.database().ref(`pages/${this.getCurrentPath()}`).update({
 93 |       body: newBody,
 94 |       lastChangeTimestamp: Utils.getTimestamp(),
 95 |       lastChangeAutor: Firebase.getUser().email
 96 |     });
 97 | 
 98 |     this.setState({
 99 |       body: newBody
100 |     });
101 |   }
102 | 
103 |   createPage = () => {
104 |     firebase.database().ref(`pages/${this.getCurrentPath()}`).update({
105 |       body: newPageTemplate,
106 |       lastChangeTimestamp: Utils.getTimestamp(),
107 |       lastChangeAutor: Firebase.getUser().email
108 |     });
109 |   }
110 | 
111 |   canEditPage() {
112 |     switch (this.getCurrentPath()) {
113 |       case 'diagrams-help':
114 |         return false;
115 | 
116 |       default:
117 |         return true;
118 |     }
119 |   }
120 | 
121 |   render() {
122 |     if (!this.state.fetched) {
123 |       if (this.props.spinner === false) {
124 |         return null;
125 |       }
126 | 
127 |       return (
128 |         <div className="spinner-container">
129 |           <div className="spinner"></div>
130 |         </div>
131 |       );
132 |     } else if (this.state.e404) {
133 |       return (
134 |         <div className="content content--markdown">
135 |           <h1>No such page: {this.getCurrentPath()}</h1>
136 |           <p><button onClick={this.createPage}>Create this page</button></p>
137 |         </div>
138 |       );
139 |     } else {
140 |       return <Page
141 |         canEdit={this.canEditPage()}
142 |         currentlyViewing={this.state.currentlyViewing}
143 |         lastChangeTimestamp={this.state.lastChangeTimestamp}
144 |         lastChangeAutor={this.state.lastChangeAutor}
145 |         body={this.state.body}
146 |         onEditModeChange={this.props.onEditModeChange}
147 |         onChangesSaved={this.onChangesSaved}
148 |         onUnsavedChanges={this.props.onUnsavedChanges}
149 |         hash={this.props.hash}
150 |       />;
151 |     }
152 |   }
153 | }
154 | 
155 | PageContainer.propTypes = {
156 |   onEditModeChange: PropTypes.func.isRequired,
157 |   onUnsavedChanges: PropTypes.func.isRequired,
158 |   onAccessDenied: PropTypes.func.isRequired,
159 |   path: PropTypes.string.isRequired,
160 |   hash: PropTypes.string
161 | };
162 | 


--------------------------------------------------------------------------------
/src/containers/page/index.js:
--------------------------------------------------------------------------------
1 | export { default as PageContainer } from './PageContainer.js';
2 | 


--------------------------------------------------------------------------------
/src/css/buttons.css:
--------------------------------------------------------------------------------
 1 | button {
 2 |   border: 0;
 3 |   padding: 10px 20px;
 4 |   background: #4db6f3;
 5 |   font-size: 16px;
 6 |   color: #fff;
 7 |   border-radius: 3px;
 8 |   box-shadow: 0px 1px 1px #ddd;
 9 |   cursor: pointer;
10 | }
11 | button:hover {
12 |   opacity: .8;
13 | }
14 | button[disabled],
15 | button[disabled]:hover {
16 |   opacity: .4;
17 |   cursor: default;
18 | }
19 | 


--------------------------------------------------------------------------------
/src/css/markdown.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * custom markdown styles
  3 |  */
  4 | .content--page .content--markdown {
  5 |   width: 100%;
  6 |   max-width: 600px;
  7 | }
  8 | 
  9 | /*
 10 |  * styles downloaded from:
 11 |  * https://github.com/sindresorhus/github-markdown-css
 12 |  */
 13 | @font-face {
 14 |   font-family: octicons-link;
 15 |   src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZwABAAAAAACFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEU0lHAAAGaAAAAAgAAAAIAAAAAUdTVUIAAAZcAAAACgAAAAoAAQAAT1MvMgAAAyQAAABJAAAAYFYEU3RjbWFwAAADcAAAAEUAAACAAJThvmN2dCAAAATkAAAABAAAAAQAAAAAZnBnbQAAA7gAAACyAAABCUM+8IhnYXNwAAAGTAAAABAAAAAQABoAI2dseWYAAAFsAAABPAAAAZwcEq9taGVhZAAAAsgAAAA0AAAANgh4a91oaGVhAAADCAAAABoAAAAkCA8DRGhtdHgAAAL8AAAADAAAAAwGAACfbG9jYQAAAsAAAAAIAAAACABiATBtYXhwAAACqAAAABgAAAAgAA8ASm5hbWUAAAToAAABQgAAAlXu73sOcG9zdAAABiwAAAAeAAAAME3QpOBwcmVwAAAEbAAAAHYAAAB/aFGpk3jaTY6xa8JAGMW/O62BDi0tJLYQincXEypYIiGJjSgHniQ6umTsUEyLm5BV6NDBP8Tpts6F0v+k/0an2i+itHDw3v2+9+DBKTzsJNnWJNTgHEy4BgG3EMI9DCEDOGEXzDADU5hBKMIgNPZqoD3SilVaXZCER3/I7AtxEJLtzzuZfI+VVkprxTlXShWKb3TBecG11rwoNlmmn1P2WYcJczl32etSpKnziC7lQyWe1smVPy/Lt7Kc+0vWY/gAgIIEqAN9we0pwKXreiMasxvabDQMM4riO+qxM2ogwDGOZTXxwxDiycQIcoYFBLj5K3EIaSctAq2kTYiw+ymhce7vwM9jSqO8JyVd5RH9gyTt2+J/yUmYlIR0s04n6+7Vm1ozezUeLEaUjhaDSuXHwVRgvLJn1tQ7xiuVv/ocTRF42mNgZGBgYGbwZOBiAAFGJBIMAAizAFoAAABiAGIAznjaY2BkYGAA4in8zwXi+W2+MjCzMIDApSwvXzC97Z4Ig8N/BxYGZgcgl52BCSQKAA3jCV8CAABfAAAAAAQAAEB42mNgZGBg4f3vACQZQABIMjKgAmYAKEgBXgAAeNpjYGY6wTiBgZWBg2kmUxoDA4MPhGZMYzBi1AHygVLYQUCaawqDA4PChxhmh/8ODDEsvAwHgMKMIDnGL0x7gJQCAwMAJd4MFwAAAHjaY2BgYGaA4DAGRgYQkAHyGMF8NgYrIM3JIAGVYYDT+AEjAwuDFpBmA9KMDEwMCh9i/v8H8sH0/4dQc1iAmAkALaUKLgAAAHjaTY9LDsIgEIbtgqHUPpDi3gPoBVyRTmTddOmqTXThEXqrob2gQ1FjwpDvfwCBdmdXC5AVKFu3e5MfNFJ29KTQT48Ob9/lqYwOGZxeUelN2U2R6+cArgtCJpauW7UQBqnFkUsjAY/kOU1cP+DAgvxwn1chZDwUbd6CFimGXwzwF6tPbFIcjEl+vvmM/byA48e6tWrKArm4ZJlCbdsrxksL1AwWn/yBSJKpYbq8AXaaTb8AAHja28jAwOC00ZrBeQNDQOWO//sdBBgYGRiYWYAEELEwMTE4uzo5Zzo5b2BxdnFOcALxNjA6b2ByTswC8jYwg0VlNuoCTWAMqNzMzsoK1rEhNqByEyerg5PMJlYuVueETKcd/89uBpnpvIEVomeHLoMsAAe1Id4AAAAAAAB42oWQT07CQBTGv0JBhagk7HQzKxca2sJCE1hDt4QF+9JOS0nbaaYDCQfwCJ7Au3AHj+LO13FMmm6cl7785vven0kBjHCBhfpYuNa5Ph1c0e2Xu3jEvWG7UdPDLZ4N92nOm+EBXuAbHmIMSRMs+4aUEd4Nd3CHD8NdvOLTsA2GL8M9PODbcL+hD7C1xoaHeLJSEao0FEW14ckxC+TU8TxvsY6X0eLPmRhry2WVioLpkrbp84LLQPGI7c6sOiUzpWIWS5GzlSgUzzLBSikOPFTOXqly7rqx0Z1Q5BAIoZBSFihQYQOOBEdkCOgXTOHA07HAGjGWiIjaPZNW13/+lm6S9FT7rLHFJ6fQbkATOG1j2OFMucKJJsxIVfQORl+9Jyda6Sl1dUYhSCm1dyClfoeDve4qMYdLEbfqHf3O/AdDumsjAAB42mNgYoAAZQYjBmyAGYQZmdhL8zLdDEydARfoAqIAAAABAAMABwAKABMAB///AA8AAQAAAAAAAAAAAAAAAAABAAAAAA==) format('woff');
 16 | }
 17 | 
 18 | .content--markdown {
 19 |   -ms-text-size-adjust: 100%;
 20 |   -webkit-text-size-adjust: 100%;
 21 |   line-height: 1.5;
 22 |   color: #24292e;
 23 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 24 |   font-size: 16px;
 25 |   line-height: 1.5;
 26 |   word-wrap: break-word;
 27 | }
 28 | 
 29 | .content--markdown .pl-c {
 30 |   color: #6a737d;
 31 | }
 32 | 
 33 | .content--markdown .pl-c1,
 34 | .content--markdown .pl-s .pl-v {
 35 |   color: #005cc5;
 36 | }
 37 | 
 38 | .content--markdown .pl-e,
 39 | .content--markdown .pl-en {
 40 |   color: #6f42c1;
 41 | }
 42 | 
 43 | .content--markdown .pl-smi,
 44 | .content--markdown .pl-s .pl-s1 {
 45 |   color: #24292e;
 46 | }
 47 | 
 48 | .content--markdown .pl-ent {
 49 |   color: #22863a;
 50 | }
 51 | 
 52 | .content--markdown .pl-k {
 53 |   color: #d73a49;
 54 | }
 55 | 
 56 | .content--markdown .pl-s,
 57 | .content--markdown .pl-pds,
 58 | .content--markdown .pl-s .pl-pse .pl-s1,
 59 | .content--markdown .pl-sr,
 60 | .content--markdown .pl-sr .pl-cce,
 61 | .content--markdown .pl-sr .pl-sre,
 62 | .content--markdown .pl-sr .pl-sra {
 63 |   color: #032f62;
 64 | }
 65 | 
 66 | .content--markdown .pl-v,
 67 | .content--markdown .pl-smw {
 68 |   color: #e36209;
 69 | }
 70 | 
 71 | .content--markdown .pl-bu {
 72 |   color: #b31d28;
 73 | }
 74 | 
 75 | .content--markdown .pl-ii {
 76 |   color: #fafbfc;
 77 |   background-color: #b31d28;
 78 | }
 79 | 
 80 | .content--markdown .pl-c2 {
 81 |   color: #fafbfc;
 82 |   background-color: #d73a49;
 83 | }
 84 | 
 85 | .content--markdown .pl-c2::before {
 86 |   content: "^M";
 87 | }
 88 | 
 89 | .content--markdown .pl-sr .pl-cce {
 90 |   font-weight: bold;
 91 |   color: #22863a;
 92 | }
 93 | 
 94 | .content--markdown .pl-ml {
 95 |   color: #735c0f;
 96 | }
 97 | 
 98 | .content--markdown .pl-mh,
 99 | .content--markdown .pl-mh .pl-en,
100 | .content--markdown .pl-ms {
101 |   font-weight: bold;
102 |   color: #005cc5;
103 | }
104 | 
105 | .content--markdown .pl-mi {
106 |   font-style: italic;
107 |   color: #24292e;
108 | }
109 | 
110 | .content--markdown .pl-mb {
111 |   font-weight: bold;
112 |   color: #24292e;
113 | }
114 | 
115 | .content--markdown .pl-md {
116 |   color: #b31d28;
117 |   background-color: #ffeef0;
118 | }
119 | 
120 | .content--markdown .pl-mi1 {
121 |   color: #22863a;
122 |   background-color: #f0fff4;
123 | }
124 | 
125 | .content--markdown .pl-mc {
126 |   color: #e36209;
127 |   background-color: #ffebda;
128 | }
129 | 
130 | .content--markdown .pl-mi2 {
131 |   color: #f6f8fa;
132 |   background-color: #005cc5;
133 | }
134 | 
135 | .content--markdown .pl-mdr {
136 |   font-weight: bold;
137 |   color: #6f42c1;
138 | }
139 | 
140 | .content--markdown .pl-ba {
141 |   color: #586069;
142 | }
143 | 
144 | .content--markdown .pl-sg {
145 |   color: #959da5;
146 | }
147 | 
148 | .content--markdown .pl-corl {
149 |   text-decoration: underline;
150 |   color: #032f62;
151 | }
152 | 
153 | .content--markdown .octicon {
154 |   display: inline-block;
155 |   vertical-align: text-top;
156 |   fill: currentColor;
157 | }
158 | 
159 | .content--markdown a {
160 |   background-color: transparent;
161 |   -webkit-text-decoration-skip: objects;
162 | }
163 | 
164 | .content--markdown a:active,
165 | .content--markdown a:hover {
166 |   outline-width: 0;
167 | }
168 | 
169 | .content--markdown strong {
170 |   font-weight: inherit;
171 | }
172 | 
173 | .content--markdown strong {
174 |   font-weight: bolder;
175 | }
176 | 
177 | .content--markdown h1 {
178 |   font-size: 2em;
179 |   margin: 0.67em 0;
180 | }
181 | 
182 | .content--markdown img {
183 |   border-style: none;
184 | }
185 | 
186 | .content--markdown svg:not(:root) {
187 |   overflow: hidden;
188 | }
189 | 
190 | .content--markdown code,
191 | .content--markdown kbd,
192 | .content--markdown pre {
193 |   font-family: monospace, monospace;
194 |   font-size: 1em;
195 | }
196 | 
197 | .content--markdown hr {
198 |   box-sizing: content-box;
199 |   height: 0;
200 |   overflow: visible;
201 | }
202 | 
203 | .content--markdown input {
204 |   font: inherit;
205 |   margin: 0;
206 | }
207 | 
208 | .content--markdown input {
209 |   overflow: visible;
210 | }
211 | 
212 | .content--markdown [type="checkbox"] {
213 |   box-sizing: border-box;
214 |   padding: 0;
215 | }
216 | 
217 | .content--markdown * {
218 |   box-sizing: border-box;
219 | }
220 | 
221 | .content--markdown input {
222 |   font-family: inherit;
223 |   font-size: inherit;
224 |   line-height: inherit;
225 | }
226 | 
227 | .content--markdown a {
228 |   color: #0366d6;
229 |   text-decoration: none;
230 | }
231 | 
232 | .content--markdown a:hover {
233 |   text-decoration: underline;
234 | }
235 | 
236 | .content--markdown strong {
237 |   font-weight: 600;
238 | }
239 | 
240 | .content--markdown hr {
241 |   height: 0;
242 |   margin: 15px 0;
243 |   overflow: hidden;
244 |   background: transparent;
245 |   border: 0;
246 |   border-bottom: 1px solid #dfe2e5;
247 | }
248 | 
249 | .content--markdown hr::before {
250 |   display: table;
251 |   content: "";
252 | }
253 | 
254 | .content--markdown hr::after {
255 |   display: table;
256 |   clear: both;
257 |   content: "";
258 | }
259 | 
260 | .content--markdown table {
261 |   border-spacing: 0;
262 |   border-collapse: collapse;
263 | }
264 | 
265 | .content--markdown td,
266 | .content--markdown th {
267 |   padding: 0;
268 | }
269 | 
270 | .content--markdown h1,
271 | .content--markdown h2,
272 | .content--markdown h3,
273 | .content--markdown h4,
274 | .content--markdown h5,
275 | .content--markdown h6 {
276 |   margin-top: 0;
277 |   margin-bottom: 0;
278 | }
279 | 
280 | .content--markdown h1 {
281 |   font-size: 32px;
282 |   font-weight: 600;
283 | }
284 | 
285 | .content--markdown h2 {
286 |   font-size: 24px;
287 |   font-weight: 600;
288 | }
289 | 
290 | .content--markdown h3 {
291 |   font-size: 20px;
292 |   font-weight: 600;
293 | }
294 | 
295 | .content--markdown h4 {
296 |   font-size: 16px;
297 |   font-weight: 600;
298 | }
299 | 
300 | .content--markdown h5 {
301 |   font-size: 14px;
302 |   font-weight: 600;
303 | }
304 | 
305 | .content--markdown h6 {
306 |   font-size: 12px;
307 |   font-weight: 600;
308 | }
309 | 
310 | .content--markdown p {
311 |   margin-top: 0;
312 |   margin-bottom: 10px;
313 | }
314 | 
315 | .content--markdown blockquote {
316 |   margin: 0;
317 | }
318 | 
319 | .content--markdown ul {
320 |   list-style: disc;
321 | }
322 | .content--markdown ol {
323 |   list-style: decimal;
324 | }
325 | .content--markdown ul,
326 | .content--markdown ol {
327 |   padding-left: 0;
328 |   margin-top: 0;
329 |   margin-bottom: 0;
330 | }
331 | 
332 | .content--markdown ol ol,
333 | .content--markdown ul ol {
334 |   list-style-type: lower-roman;
335 | }
336 | 
337 | .content--markdown ul ul ol,
338 | .content--markdown ul ol ol,
339 | .content--markdown ol ul ol,
340 | .content--markdown ol ol ol {
341 |   list-style-type: lower-alpha;
342 | }
343 | 
344 | .content--markdown dd {
345 |   margin-left: 0;
346 | }
347 | 
348 | .content--markdown code {
349 |   font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
350 |   font-size: 12px;
351 | }
352 | 
353 | .content--markdown pre {
354 |   margin-top: 0;
355 |   margin-bottom: 0;
356 |   font: 12px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
357 | }
358 | 
359 | .content--markdown svg {
360 |   margin-bottom: 10px;
361 | }
362 | 
363 | .content--markdown .octicon {
364 |   vertical-align: text-bottom;
365 | }
366 | 
367 | .content--markdown .pl-0 {
368 |   padding-left: 0 !important;
369 | }
370 | 
371 | .content--markdown .pl-1 {
372 |   padding-left: 4px !important;
373 | }
374 | 
375 | .content--markdown .pl-2 {
376 |   padding-left: 8px !important;
377 | }
378 | 
379 | .content--markdown .pl-3 {
380 |   padding-left: 16px !important;
381 | }
382 | 
383 | .content--markdown .pl-4 {
384 |   padding-left: 24px !important;
385 | }
386 | 
387 | .content--markdown .pl-5 {
388 |   padding-left: 32px !important;
389 | }
390 | 
391 | .content--markdown .pl-6 {
392 |   padding-left: 40px !important;
393 | }
394 | 
395 | .content--markdown::before {
396 |   display: table;
397 |   content: "";
398 | }
399 | 
400 | .content--markdown::after {
401 |   display: table;
402 |   clear: both;
403 |   content: "";
404 | }
405 | 
406 | .content--markdown>*:first-child {
407 |   margin-top: 0 !important;
408 | }
409 | 
410 | .content--markdown>*:last-child {
411 |   margin-bottom: 0 !important;
412 | }
413 | 
414 | .content--markdown a:not([href]) {
415 |   color: inherit;
416 |   text-decoration: none;
417 | }
418 | 
419 | .content--markdown .anchor {
420 |   float: left;
421 |   padding-right: 4px;
422 |   margin-left: -20px;
423 |   line-height: 1;
424 | }
425 | 
426 | .content--markdown .anchor:focus {
427 |   outline: none;
428 | }
429 | 
430 | .content--markdown p,
431 | .content--markdown blockquote,
432 | .content--markdown ul,
433 | .content--markdown ol,
434 | .content--markdown dl,
435 | .content--markdown table,
436 | .content--markdown pre {
437 |   margin-top: 0;
438 |   margin-bottom: 16px;
439 | }
440 | 
441 | .content--markdown hr {
442 |   height: 0.25em;
443 |   padding: 0;
444 |   margin: 24px 0;
445 |   background-color: #e1e4e8;
446 |   border: 0;
447 | }
448 | 
449 | .content--markdown blockquote {
450 |   padding: 0 1em;
451 |   color: #6a737d;
452 |   border-left: 0.25em solid #dfe2e5;
453 | }
454 | 
455 | .content--markdown blockquote>:first-child {
456 |   margin-top: 0;
457 | }
458 | 
459 | .content--markdown blockquote>:last-child {
460 |   margin-bottom: 0;
461 | }
462 | 
463 | .content--markdown kbd {
464 |   display: inline-block;
465 |   padding: 3px 5px;
466 |   font-size: 11px;
467 |   line-height: 10px;
468 |   color: #444d56;
469 |   vertical-align: middle;
470 |   background-color: #fafbfc;
471 |   border: solid 1px #c6cbd1;
472 |   border-bottom-color: #959da5;
473 |   border-radius: 3px;
474 |   box-shadow: inset 0 -1px 0 #959da5;
475 | }
476 | 
477 | .content--markdown h1,
478 | .content--markdown h2,
479 | .content--markdown h3,
480 | .content--markdown h4,
481 | .content--markdown h5,
482 | .content--markdown h6 {
483 |   margin-top: 24px;
484 |   margin-bottom: 16px;
485 |   font-weight: 600;
486 |   line-height: 1.25;
487 | }
488 | 
489 | .content--markdown h1 .octicon-link,
490 | .content--markdown h2 .octicon-link,
491 | .content--markdown h3 .octicon-link,
492 | .content--markdown h4 .octicon-link,
493 | .content--markdown h5 .octicon-link,
494 | .content--markdown h6 .octicon-link {
495 |   color: #1b1f23;
496 |   vertical-align: middle;
497 |   visibility: hidden;
498 | }
499 | 
500 | .content--markdown h1:hover .anchor,
501 | .content--markdown h2:hover .anchor,
502 | .content--markdown h3:hover .anchor,
503 | .content--markdown h4:hover .anchor,
504 | .content--markdown h5:hover .anchor,
505 | .content--markdown h6:hover .anchor {
506 |   text-decoration: none;
507 | }
508 | 
509 | .content--markdown h1:hover .anchor .octicon-link,
510 | .content--markdown h2:hover .anchor .octicon-link,
511 | .content--markdown h3:hover .anchor .octicon-link,
512 | .content--markdown h4:hover .anchor .octicon-link,
513 | .content--markdown h5:hover .anchor .octicon-link,
514 | .content--markdown h6:hover .anchor .octicon-link {
515 |   visibility: visible;
516 | }
517 | 
518 | .content--markdown h1 {
519 |   padding-bottom: 0.3em;
520 |   font-size: 2em;
521 |   border-bottom: 1px solid #eaecef;
522 | }
523 | 
524 | .content--markdown h2 {
525 |   padding-bottom: 0.3em;
526 |   font-size: 1.5em;
527 |   border-bottom: 1px solid #eaecef;
528 | }
529 | 
530 | .content--markdown h3 {
531 |   font-size: 1.25em;
532 | }
533 | 
534 | .content--markdown h4 {
535 |   font-size: 1em;
536 | }
537 | 
538 | .content--markdown h5 {
539 |   font-size: 0.875em;
540 | }
541 | 
542 | .content--markdown h6 {
543 |   font-size: 0.85em;
544 |   color: #6a737d;
545 | }
546 | 
547 | .content--markdown ul,
548 | .content--markdown ol {
549 |   padding-left: 2em;
550 | }
551 | 
552 | .content--markdown ul ul,
553 | .content--markdown ul ol,
554 | .content--markdown ol ol,
555 | .content--markdown ol ul {
556 |   margin-top: 0;
557 |   margin-bottom: 0;
558 | }
559 | 
560 | .content--markdown li>p {
561 |   margin-top: 16px;
562 | }
563 | 
564 | .content--markdown li+li {
565 |   margin-top: 0.25em;
566 | }
567 | 
568 | .content--markdown dl {
569 |   padding: 0;
570 | }
571 | 
572 | .content--markdown dl dt {
573 |   padding: 0;
574 |   margin-top: 16px;
575 |   font-size: 1em;
576 |   font-style: italic;
577 |   font-weight: 600;
578 | }
579 | 
580 | .content--markdown dl dd {
581 |   padding: 0 16px;
582 |   margin-bottom: 16px;
583 | }
584 | 
585 | .content--markdown table {
586 |   display: block;
587 |   width: 100%;
588 |   overflow: auto;
589 | }
590 | 
591 | .content--markdown table th {
592 |   font-weight: 600;
593 | }
594 | 
595 | .content--markdown table th,
596 | .content--markdown table td {
597 |   padding: 6px 13px;
598 |   border: 1px solid #dfe2e5;
599 | }
600 | 
601 | .content--markdown table tr {
602 |   background-color: #fff;
603 |   border-top: 1px solid #c6cbd1;
604 | }
605 | 
606 | .content--markdown table tr:nth-child(2n) {
607 |   background-color: #f6f8fa;
608 | }
609 | 
610 | .content--markdown img {
611 |   max-width: 100%;
612 |   box-sizing: content-box;
613 |   background-color: #fff;
614 | }
615 | .content--markdown img[width],
616 | .content--markdown img[height] {
617 |   max-width: none;
618 | }
619 | 
620 | .content--markdown code {
621 |   padding: 0;
622 |   padding-top: 0.2em;
623 |   padding-bottom: 0.2em;
624 |   margin: 0;
625 |   font-size: 85%;
626 |   background-color: rgba(27,31,35,0.05);
627 |   border-radius: 3px;
628 | }
629 | 
630 | .content--markdown code::before,
631 | .content--markdown code::after {
632 |   letter-spacing: -0.2em;
633 |   content: "\00a0";
634 | }
635 | 
636 | .content--markdown pre {
637 |   word-wrap: normal;
638 | }
639 | 
640 | .content--markdown pre>code {
641 |   padding: 0;
642 |   margin: 0;
643 |   font-size: 100%;
644 |   word-break: normal;
645 |   white-space: pre;
646 |   background: transparent;
647 |   border: 0;
648 | }
649 | 
650 | .content--markdown .highlight {
651 |   margin-bottom: 16px;
652 | }
653 | 
654 | .content--markdown .highlight pre {
655 |   margin-bottom: 0;
656 |   word-break: normal;
657 | }
658 | 
659 | .content--markdown .highlight pre,
660 | .content--markdown pre {
661 |   padding: 16px;
662 |   overflow: auto;
663 |   font-size: 85%;
664 |   line-height: 1.45;
665 |   background-color: #f6f8fa;
666 |   border-radius: 3px;
667 | }
668 | 
669 | .content--markdown pre code {
670 |   display: inline;
671 |   max-width: auto;
672 |   padding: 0;
673 |   margin: 0;
674 |   overflow: visible;
675 |   line-height: inherit;
676 |   word-wrap: normal;
677 |   background-color: transparent;
678 |   border: 0;
679 | }
680 | 
681 | .content--markdown pre code::before,
682 | .content--markdown pre code::after {
683 |   content: normal;
684 | }
685 | 
686 | .content--markdown .full-commit .btn-outline:not(:disabled):hover {
687 |   color: #005cc5;
688 |   border-color: #005cc5;
689 | }
690 | 
691 | .content--markdown kbd {
692 |   display: inline-block;
693 |   padding: 3px 5px;
694 |   font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
695 |   line-height: 10px;
696 |   color: #444d56;
697 |   vertical-align: middle;
698 |   background-color: #fafbfc;
699 |   border: solid 1px #d1d5da;
700 |   border-bottom-color: #c6cbd1;
701 |   border-radius: 3px;
702 |   box-shadow: inset 0 -1px 0 #c6cbd1;
703 | }
704 | 
705 | .content--markdown :checked+.radio-label {
706 |   position: relative;
707 |   z-index: 1;
708 |   border-color: #0366d6;
709 | }
710 | 
711 | .content--markdown .task-list-item {
712 |   list-style-type: none;
713 | }
714 | 
715 | .content--markdown .task-list-item+.task-list-item {
716 |   margin-top: 3px;
717 | }
718 | 
719 | .content--markdown .task-list-item input {
720 |   margin: 0 0.2em 0.25em -1.6em;
721 |   vertical-align: middle;
722 | }
723 | 
724 | .content--markdown hr {
725 |   border-bottom-color: #eee;
726 | }
727 | 


--------------------------------------------------------------------------------
/src/css/reset.css:
--------------------------------------------------------------------------------
 1 | /* http://meyerweb.com/eric/tools/css/reset/
 2 |    v2.0 | 20110126
 3 |    License: none (public domain)
 4 | */
 5 | 
 6 | html, body, div, span, applet, object, iframe,
 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 8 | a, abbr, acronym, address, big, cite, code,
 9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed,
16 | figure, figcaption, footer, header, hgroup,
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video {
19 | 	margin: 0;
20 | 	padding: 0;
21 | 	border: 0;
22 | 	font-size: 100%;
23 | 	font: inherit;
24 | 	vertical-align: baseline;
25 | }
26 | /* HTML5 display-role reset for older browsers */
27 | article, aside, details, figcaption, figure,
28 | footer, header, hgroup, menu, nav, section {
29 | 	display: block;
30 | }
31 | body {
32 | 	line-height: 1;
33 | }
34 | ol, ul {
35 | 	list-style: none;
36 | }
37 | blockquote, q {
38 | 	quotes: none;
39 | }
40 | blockquote:before, blockquote:after,
41 | q:before, q:after {
42 | 	content: '';
43 | 	content: none;
44 | }
45 | table {
46 | 	border-collapse: collapse;
47 | 	border-spacing: 0;
48 | }
49 | strong {
50 | 	font-weight: bold;
51 | }
52 | 


--------------------------------------------------------------------------------
/src/css/tooltips.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Tooltip Styles
  3 |  *
  4 |  * Created by Chris Bracco
  5 |  * https://chrisbracco.com/a-simple-css-tooltip/
  6 |  */
  7 | 
  8 | /* Base styles for the element that has a tooltip */
  9 | [data-tooltip],
 10 | .tooltip {
 11 |     position: relative;
 12 |     cursor: pointer;
 13 | }
 14 | 
 15 | /* Base styles for the entire tooltip */
 16 | [data-tooltip]:before,
 17 | [data-tooltip]:after,
 18 | .tooltip:before,
 19 | .tooltip:after {
 20 |     position: absolute;
 21 |     visibility: hidden;
 22 |     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
 23 |     opacity: 0;
 24 |     transition:
 25 |             opacity 0.2s ease-in-out,
 26 |             visibility 0.2s ease-in-out,
 27 |             transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
 28 |     transform:         translate3d(0, 0, 0);
 29 |     pointer-events: none;
 30 |     word-wrap: break-word;
 31 | }
 32 | 
 33 | /* Show the entire tooltip on hover and focus */
 34 | [data-tooltip]:hover:before,
 35 | [data-tooltip]:hover:after,
 36 | [data-tooltip]:focus:before,
 37 | [data-tooltip]:focus:after,
 38 | .tooltip:hover:before,
 39 | .tooltip:hover:after,
 40 | .tooltip:focus:before,
 41 | .tooltip:focus:after {
 42 |     visibility: visible;
 43 |     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
 44 |     opacity: 1;
 45 | }
 46 | 
 47 | /* Base styles for the tooltip's directional arrow */
 48 | .tooltip:before,
 49 | [data-tooltip]:before {
 50 |     z-index: 1001;
 51 |     border: 6px solid transparent;
 52 |     background: transparent;
 53 |     content: "";
 54 | }
 55 | 
 56 | /* Base styles for the tooltip's content area */
 57 | .tooltip:after,
 58 | [data-tooltip]:after {
 59 |     z-index: 1000;
 60 |     padding: 8px;
 61 |     width: 160px;
 62 |     background-color: #000;
 63 |     background-color: hsla(0, 0%, 20%, 1);
 64 |     color: #fff;
 65 |     content: attr(data-tooltip);
 66 |     font-size: 14px;
 67 |     line-height: 1.2;
 68 |     text-align: center;
 69 | }
 70 | 
 71 | /* Sizes */
 72 | 
 73 | /* 200px width */
 74 | .tooltip-200:after,
 75 | .tooltip-200[data-tooltip]:after {
 76 |     width: 200px;
 77 | }
 78 | 
 79 | /* 300px width */
 80 | .tooltip-300:after,
 81 | .tooltip-300[data-tooltip]:after {
 82 |     width: 300px;
 83 | }
 84 | 
 85 | /* auto width */
 86 | .tooltip-auto:after,
 87 | .tooltip-auto[data-tooltip]:after {
 88 |     width: auto;
 89 | }
 90 | 
 91 | /* Directions */
 92 | 
 93 | /* Top (default) */
 94 | [data-tooltip]:before,
 95 | [data-tooltip]:after,
 96 | .tooltip:before,
 97 | .tooltip:after,
 98 | .tooltip-top:before,
 99 | .tooltip-top:after {
100 |     bottom: 100%;
101 |     left: 50%;
102 | }
103 | 
104 | [data-tooltip]:before,
105 | .tooltip:before,
106 | .tooltip-top:before {
107 |     margin-left: -6px;
108 |     margin-bottom: -12px;
109 |     border-top-color: #000;
110 |     border-top-color: hsla(0, 0%, 20%, 1);
111 | }
112 | 
113 | /* Horizontally align top/bottom tooltips */
114 | [data-tooltip]:after,
115 | .tooltip:after,
116 | .tooltip-top:after {
117 |     margin-left: -80px;
118 | }
119 | 
120 | [data-tooltip]:hover:before,
121 | [data-tooltip]:hover:after,
122 | [data-tooltip]:focus:before,
123 | [data-tooltip]:focus:after,
124 | .tooltip:hover:before,
125 | .tooltip:hover:after,
126 | .tooltip:focus:before,
127 | .tooltip:focus:after,
128 | .tooltip-top:hover:before,
129 | .tooltip-top:hover:after,
130 | .tooltip-top:focus:before,
131 | .tooltip-top:focus:after {
132 |     transform:         translateY(-12px);
133 | }
134 | 
135 | /* Left */
136 | .tooltip-left:before,
137 | .tooltip-left:after {
138 |     right: 100%;
139 |     bottom: 50%;
140 |     left: auto;
141 | }
142 | 
143 | .tooltip-left:before {
144 |     margin-left: 0;
145 |     margin-right: -12px;
146 |     margin-bottom: 0;
147 |     border-top-color: transparent;
148 |     border-left-color: #000;
149 |     border-left-color: hsla(0, 0%, 20%, 1);
150 | }
151 | 
152 | .tooltip-left:hover:before,
153 | .tooltip-left:hover:after,
154 | .tooltip-left:focus:before,
155 | .tooltip-left:focus:after {
156 |     transform:         translateX(-12px);
157 | }
158 | 
159 | /* Bottom */
160 | .tooltip-bottom:before,
161 | .tooltip-bottom:after {
162 |     top: 100%;
163 |     bottom: auto;
164 |     left: 50%;
165 | }
166 | 
167 | .tooltip-bottom:before {
168 |     margin-top: -12px;
169 |     margin-bottom: 0;
170 |     border-top-color: transparent;
171 |     border-bottom-color: #000;
172 |     border-bottom-color: hsla(0, 0%, 20%, 1);
173 | }
174 | 
175 | .tooltip-bottom:hover:before,
176 | .tooltip-bottom:hover:after,
177 | .tooltip-bottom:focus:before,
178 | .tooltip-bottom:focus:after {
179 |     transform:         translateY(12px);
180 | }
181 | 
182 | /* Right */
183 | .tooltip-right:before,
184 | .tooltip-right:after {
185 |     bottom: 50%;
186 |     left: 100%;
187 | }
188 | 
189 | .tooltip-right:before {
190 |     margin-bottom: 0;
191 |     margin-left: -12px;
192 |     border-top-color: transparent;
193 |     border-right-color: #000;
194 |     border-right-color: hsla(0, 0%, 20%, 1);
195 | }
196 | 
197 | .tooltip-right:hover:before,
198 | .tooltip-right:hover:after,
199 | .tooltip-right:focus:before,
200 | .tooltip-right:focus:after {
201 |     transform:         translateX(12px);
202 | }
203 | 
204 | /* Move directional arrows down a bit for left/right tooltips */
205 | .tooltip-left:before,
206 | .tooltip-right:before {
207 |     top: 3px;
208 | }
209 | 
210 | /* Vertically center tooltip content for left/right tooltips */
211 | .tooltip-left:after,
212 | .tooltip-right:after {
213 |     margin-left: 0;
214 |     margin-bottom: -16px;
215 | }


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import { BrowserRouter } from 'react-router-dom';
 4 | import App from './App';
 5 | 
 6 | ReactDOM.render(
 7 |   <BrowserRouter>
 8 |     <App />
 9 |   </BrowserRouter>
10 | , document.getElementById('root'));
11 | 


--------------------------------------------------------------------------------
/src/markdown-plugins/diagram/diagram.css:
--------------------------------------------------------------------------------
 1 | .markdown-diagram {
 2 |   margin-bottom: 20px;
 3 | }
 4 | .markdown-diagram .syntax-error {
 5 |   color: red;
 6 | }
 7 | .markdown-diagram svg {
 8 |   display: block;
 9 | }
10 | .markdown-diagram text {
11 |   font-family: sans-serif;
12 |   font-size: 10px;
13 | }
14 | 
15 | .markdown-diagram .node a text:nth-child(3),
16 | .markdown-diagram .node a text:nth-child(4),
17 | .markdown-diagram .node a text:nth-child(5),
18 | .markdown-diagram .node a text:nth-child(6),
19 | .markdown-diagram .node a text:nth-child(7),
20 | .markdown-diagram .node a text:nth-child(8),
21 | .markdown-diagram .node a text:nth-child(9),
22 | .markdown-diagram .node a text:nth-child(10) {
23 |   opacity: .5;
24 | }
25 | 
26 | .markdown-diagram .edge text {
27 |   font-size: 8px;
28 | }
29 | .markdown-diagram a text {
30 |   text-decoration: underline;
31 | }
32 | 


--------------------------------------------------------------------------------
/src/markdown-plugins/diagram/diagram.js:
--------------------------------------------------------------------------------
 1 | import Viz from 'viz.js';
 2 | import './diagram.css';
 3 | 
 4 | export default (md, options) => {
 5 |   const cachedHtml = {};
 6 |   const getLine = (state, line) => {
 7 |     var pos = state.bMarks[line] + state.blkIndent,
 8 |         max = state.eMarks[line];
 9 | 
10 |     return state.src.substr(pos, max - pos);
11 |   }
12 | 
13 |   md.block.ruler.before('code', 'diagram', (state, startLine, endLine) => {
14 |     if (getLine(state, startLine) === '[diagram]') {
15 |       let startPgn = startLine + 1;
16 |       let nextLine = startPgn;
17 |       while (nextLine < endLine) {
18 |         if (getLine(state, nextLine) === '[/diagram]') {
19 |           state.tokens.push({
20 |             type: 'diagram',
21 |             content: state.getLines(startPgn, nextLine, state.blkIndent, true),
22 |             block: true,
23 |             lines: [ startLine, nextLine ],
24 |             level: state.level
25 |           });
26 |           state.line = nextLine + 1;
27 |           return true;
28 |         }
29 |         nextLine ++;
30 |       }
31 |     }
32 |   });
33 | 
34 |   md.renderer.rules.diagram = (tokens, idx) => {
35 |     const content = tokens[idx].content;
36 |     let html = '';
37 | 
38 |     try {
39 |       let vizHtml = Viz(content);
40 |       vizHtml = vizHtml.replace(/<a /g, '<a onclick="window.navigateTo(event, event.currentTarget.getAttribute(\'xlink:href\'))"');
41 |       let googleChartsLink = `https://chart.googleapis.com/chart?chl=${encodeURIComponent(content)}&cht=gv`;
42 |       html = `${vizHtml}
43 |       <a href=${googleChartsLink} target="_blank">Open as .png</a>`;
44 | 
45 |       cachedHtml[idx] = vizHtml;
46 |     } catch (e) {
47 |       html = `<p class="syntax-error">⚠️ Syntax error - diagram not rendered</p>
48 |       ${cachedHtml[idx] || ''}`;
49 |     }
50 | 
51 |     return `<div class="markdown-diagram">${html}</div>`;
52 |   };
53 | };
54 | 


--------------------------------------------------------------------------------
/src/markdown-plugins/flowchart/flowchart.js:
--------------------------------------------------------------------------------
 1 | import flowchart from 'flowchart.js';
 2 | 
 3 | export default (md, options) => {
 4 |   const cachedFlowchart = {};
 5 |   const getLine = (state, line) => {
 6 |     var pos = state.bMarks[line] + state.blkIndent,
 7 |         max = state.eMarks[line];
 8 | 
 9 |     return state.src.substr(pos, max - pos);
10 |   }
11 | 
12 |   md.block.ruler.before('code', 'flowchart', (state, startLine, endLine) => {
13 |     if (getLine(state, startLine) === '[flowchart]') {
14 |       let startPgn = startLine + 1;
15 |       let nextLine = startPgn;
16 |       while (nextLine < endLine) {
17 |         if (getLine(state, nextLine) === '[/flowchart]') {
18 |           state.tokens.push({
19 |             type: 'flowchart',
20 |             content: state.getLines(startPgn, nextLine, state.blkIndent, true),
21 |             block: true,
22 |             lines: [ startLine, nextLine ],
23 |             level: state.level
24 |           });
25 |           state.line = nextLine + 1;
26 |           return true;
27 |         }
28 |         nextLine ++;
29 |       }
30 |     }
31 |   });
32 | 
33 |   md.renderer.rules.flowchart = (tokens, idx) => {
34 |     const content = tokens[idx].content;
35 |     const id = `flowchart-${Math.random()}`;
36 |     let error = '';
37 |     let parsedFlowchart = '';
38 | 
39 |     try {
40 |       parsedFlowchart = flowchart.parse(content);
41 |       cachedFlowchart[idx] = parsedFlowchart;
42 |     } catch (e) {
43 |       error = `<p class="syntax-error">⚠️ Syntax error - diagram not rendered</p>`;
44 |       parsedFlowchart = cachedFlowchart[idx] || '';
45 |     }
46 | 
47 |     // is there a way to invoke this in a callback?
48 |     // didn't find a way...
49 |     setTimeout(() => {
50 |       try {
51 |         parsedFlowchart.drawSVG(id);
52 |       } catch (e) {}
53 |     }, 0);
54 | 
55 |     return `<div class="markdown-diagram" id="${id}">${error}</div>`;
56 |   };
57 | };
58 | 


--------------------------------------------------------------------------------
/src/markdown-plugins/google-storage-images/google-storage-images.js:
--------------------------------------------------------------------------------
 1 | // This plugin replaces "gs://(...)" image paths to its conterpart
 2 | // loaded from firebase storage API
 3 | const googleStorageImages = (md) => {
 4 |   const originalImgRenderer = md.renderer.rules.image;
 5 |   md.renderer.rules.image = function() {
 6 |     let originalResult = originalImgRenderer.apply(null, arguments);
 7 |     return loadGoogleStorageImage(originalResult);
 8 |   };
 9 | 
10 |   const originalHtmlTagRenderer = md.renderer.rules.htmltag;
11 |   md.renderer.rules.htmltag = function() {
12 |     let originalResult = originalHtmlTagRenderer.apply(null, arguments);
13 |     if (/^<img /.test(originalResult)) {
14 |       return loadGoogleStorageImage(originalResult);
15 |     } else {
16 |       return originalResult;
17 |     }
18 |   }
19 | };
20 | 
21 | const loadGoogleStorageImage = (s) => {
22 |   return s.replace(/src="([^"]*)"/, (s, src) => {
23 |     if (/^gs:/.test(src)) {
24 |       s += ' onerror="firebase.storage().refFromURL(this.src).getDownloadURL().then((url) => this.src = url)"';
25 |     }
26 |     return s;
27 |   });
28 | }
29 | 
30 | module.exports = googleStorageImages;
31 | 


--------------------------------------------------------------------------------
/src/markdown-plugins/heading-anchors/heading-anchors.css:
--------------------------------------------------------------------------------
 1 | .headingAnchor {
 2 |     display: none;
 3 |     float: left;
 4 |     padding-right: 4px;
 5 |     margin-left: -20px;
 6 |     color: #1b1f23;
 7 |     vertical-align: middle;
 8 | }
 9 | 
10 | h1 .headingAnchor {
11 |     line-height: 1em;
12 | }
13 | 
14 | .headingAnchor svg {
15 |     margin: 0!important;
16 | }
17 | 
18 | h1:hover .headingAnchor,
19 | h2:hover .headingAnchor,
20 | h3:hover .headingAnchor,
21 | h4:hover .headingAnchor,
22 | h5:hover .headingAnchor,
23 | h6:hover .headingAnchor {
24 |     display: inline;
25 | }


--------------------------------------------------------------------------------
/src/markdown-plugins/heading-anchors/heading-anchors.js:
--------------------------------------------------------------------------------
 1 | import './heading-anchors.css';
 2 | 
 3 | const toSlug = input => {
 4 |     if (input)
 5 |         return input
 6 |             .replace(/\[(.+)\]\(.+\)/g, '$1')
 7 |             .replace(/[^-a-z0-9\s]/gi, '')
 8 |             .split(' ')
 9 |             .filter((e) => { return e === 0 || e })
10 |             .map(str => str.toLowerCase())
11 |             .join('-')
12 | };
13 | 
14 | // Used SVG icon from GitHub <https://github.com>
15 | const AnchorIcon = '<svg viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>';
16 | 
17 | const headingAnchors = (md) => {
18 |     md.renderer.rules.heading_open = function(tokens, idx) {
19 |         const anchor = toSlug(tokens[idx+1].content);
20 |         const hLevel = tokens[idx].hLevel;
21 |         return '<h' + hLevel + ' id="' + anchor + '"><a href="#' + anchor + '" class="headingAnchor">' + AnchorIcon + '</a>';
22 |     };
23 | };
24 | 
25 | export default headingAnchors;


--------------------------------------------------------------------------------
/src/markdown-plugins/react-router-links/react-router-links.js:
--------------------------------------------------------------------------------
 1 | const reactRouterLinks = (md) => {
 2 |   const originalRenderer = md.renderer.rules.link_open;
 3 |   const regexp = {
 4 |     href: /href="([^"]*)"/
 5 |   };
 6 | 
 7 |   md.renderer.rules.link_open = function() {
 8 |     let originalResult = originalRenderer.apply(null, arguments);
 9 | 
10 |     const hrefMatches = originalResult.match(regexp.href);
11 |     if (hrefMatches) {
12 |       let href = hrefMatches[1];
13 |       href = href.replace(window.location.origin, '');
14 | 
15 |       const pathnameRegexp = new RegExp('^' + window.location.pathname + '$')
16 |       if (pathnameRegexp.test(href)) {
17 |         originalResult = originalResult.replace(/ href="/, ' class="active" href="');
18 |       }
19 |     }
20 | 
21 |     return originalResult.replace(regexp.href, 'href="$1" onclick="window.navigateTo(event, event.currentTarget.getAttribute(\'href\'))"'
22 |     );
23 |   };
24 | };
25 | 
26 | module.exports = reactRouterLinks;
27 | 


--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
 1 | // In production, we register a service worker to serve assets from local cache.
 2 | 
 3 | // This lets the app load faster on subsequent visits in production, and gives
 4 | // it offline capabilities. However, it also means that developers (and users)
 5 | // will only see deployed updates on the "N+1" visit to a page, since previously
 6 | // cached resources are updated in the background.
 7 | 
 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
 9 | // This link also includes instructions on opting out of this behavior.
10 | 
11 | export default function register() {
12 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
13 |     window.addEventListener('load', () => {
14 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
15 |       navigator.serviceWorker
16 |         .register(swUrl)
17 |         .then(registration => {
18 |           registration.onupdatefound = () => {
19 |             const installingWorker = registration.installing;
20 |             installingWorker.onstatechange = () => {
21 |               if (installingWorker.state === 'installed') {
22 |                 if (navigator.serviceWorker.controller) {
23 |                   // At this point, the old content will have been purged and
24 |                   // the fresh content will have been added to the cache.
25 |                   // It's the perfect time to display a "New content is
26 |                   // available; please refresh." message in your web app.
27 |                   console.log('New content is available; please refresh.');
28 |                 } else {
29 |                   // At this point, everything has been precached.
30 |                   // It's the perfect time to display a
31 |                   // "Content is cached for offline use." message.
32 |                   console.log('Content is cached for offline use.');
33 |                 }
34 |               }
35 |             };
36 |           };
37 |         })
38 |         .catch(error => {
39 |           console.error('Error during service worker registration:', error);
40 |         });
41 |     });
42 |   }
43 | }
44 | 
45 | export function unregister() {
46 |   if ('serviceWorker' in navigator) {
47 |     navigator.serviceWorker.ready.then(registration => {
48 |       registration.unregister();
49 |     });
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/src/templates/company-structure.js:
--------------------------------------------------------------------------------
 1 | export default `# Company structure
 2 | 
 3 | [diagram]
 4 | digraph {
 5 | CEO [label="John Smith\\n(CEO)"]
 6 | CMO [label="Mary Brown\\n(CMO)"]
 7 | CTO [label="Jane Gray\\n(CTO)"]
 8 | CFO [label="William Shake\\n(CFO)"]
 9 | 
10 | CEO->CMO
11 | CEO->CTO
12 | CEO->CFO
13 | }
14 | [/diagram]
15 | 
16 | ## Marketing teams
17 | Manager: Mary Brown (CMO)
18 | 
19 | ### Teams
20 | [diagram]
21 | digraph {
22 | subgraph cluster_marketing {
23 | 	label=<<u><b>Inbound Marketing</b></u>>
24 | 
25 | 		marketing [shape=record penwidth=0 label="
26 | 		Person 1 \\n
27 | 		Person 2 \\n
28 | 		Person 3 \\n
29 | 		Person 4
30 | 	"]
31 | }
32 | 
33 | subgraph cluster_content {
34 | 	label=<<u><b>Outbound Marketing</b></u>>
35 | 
36 | 		content [shape=record penwidth=0 label="
37 | 		Person 1 \\n
38 |     Person 2 \\n
39 |     Person 3 \\n
40 | 	"]
41 | }
42 | }
43 | [/diagram]
44 | 
45 | ## Product teams
46 | Manager: Jane Gray (CTO)
47 | 
48 | ### Teams
49 | [diagram]
50 | digraph {
51 | subgraph cluster_product_1 {
52 | 	label=<<u><b>Product #1</b></u>>
53 | 
54 | 	product_1 [shape=record penwidth=0 label="
55 | 		Person 1 (Team leader) \\n
56 | 		Person 2 \\n
57 | 		Person 3 \\n
58 | 		Person 4 \\n
59 | 		Person 5
60 | 	"]
61 | }
62 | subgraph cluster_product_2 {
63 | 	label=<<u><b>Product #2</b></u>>
64 | 
65 | 	product_2 [shape=record penwidth=0 label="
66 | 		Person 1 (Team leader) \\n
67 | 		Person 2 \\n
68 | 		Person 3 \\n
69 | 		Person 4
70 | 	"]
71 | }
72 | }
73 | [/diagram]
74 | 
75 | ## Finance
76 | Manager: William Shake (CFO)
77 | 
78 | [diagram]
79 | digraph {
80 | 	finance [shape=record label="
81 | 		Person 1 \\n
82 | 		Person 2
83 | 	"]
84 | }
85 | [/diagram]
86 | `;
87 | 


--------------------------------------------------------------------------------
/src/templates/diagrams-help.js:
--------------------------------------------------------------------------------
  1 | export default `# Diagrams help
  2 | Octopus supports powerful **diagrams** feature. It lets you embed advanced graphs to your content without any external software.
  3 | 
  4 | Two diagramming tools are supported:
  5 | * [Graphviz](http://www.graphviz.org)
  6 | * [flowchart.js](http://flowchart.js.org)
  7 | 
  8 | ## Graphviz
  9 | To embed a Graphviz diagram, include the diagram definition between \`[diagram]\` and \`[/diagram]\` tags.
 10 | 
 11 | The diagrams are written in DOT language. To learn more, read the [DOT language documentation](http://www.graphviz.org/content/dot-language) or browse [Diagrams Gallery](http://www.graphviz.org/Gallery.php).
 12 | 
 13 | To learn how to build advanced graphs, read the [full article on DOT](http://www.graphviz.org/pdf/dotguide.pdf) (in PDF format).
 14 | 
 15 | ### Basic graph
 16 | Code
 17 | 
 18 | \`\`\`
 19 | [diagram]
 20 | digraph {
 21 | A->B
 22 | B->C
 23 | C->A
 24 | }
 25 | [/diagram]
 26 | \`\`\`
 27 | 
 28 | Result
 29 | 
 30 | [diagram]
 31 | digraph {
 32 | A->B
 33 | B->C
 34 | C->A
 35 | }
 36 | [/diagram]
 37 | 
 38 | ### Company structure
 39 | 
 40 | Code
 41 | 
 42 | \`\`\`
 43 | [diagram]
 44 | digraph {
 45 | CEO [label="John Smith\n(CEO)"]
 46 | CMO [label="Mary Brown\n(CMO)"]
 47 | CTO [label="Jane Gray\n(CTO)"]
 48 | CFO [label="William Shake\n(CFO)"]
 49 | 
 50 | CEO->CMO
 51 | CEO->CTO
 52 | CEO->CFO
 53 | }
 54 | [/diagram]
 55 | \`\`\`
 56 | 
 57 | Result
 58 | 
 59 | [diagram]
 60 | digraph {
 61 | CEO [label="John Smith\n(CEO)"]
 62 | CMO [label="Mary Brown\n(CMO)"]
 63 | CTO [label="Jane Gray\n(CTO)"]
 64 | CFO [label="William Shake\n(CFO)"]
 65 | 
 66 | CEO->CMO
 67 | CEO->CTO
 68 | CEO->CFO
 69 | }
 70 | [/diagram]
 71 | 
 72 | ### Process
 73 | 
 74 | Code
 75 | 
 76 | \`\`\`
 77 | [diagram]
 78 | digraph G {
 79 | 
 80 | 	subgraph cluster_0 {
 81 | 		style=filled;
 82 | 		color=lightgrey;
 83 | 		node [style=filled,color=white];
 84 | 		a0 -> a1 -> a2 -> a3;
 85 | 		label = "process #1";
 86 | 	}
 87 | 
 88 | 	subgraph cluster_1 {
 89 | 		node [style=filled];
 90 | 		b0 -> b1 -> b2 -> b3;
 91 | 		label = "process #2";
 92 | 		color=blue
 93 | 	}
 94 | 	start -> a0;
 95 | 	start -> b0;
 96 | 	a1 -> b3;
 97 | 	b2 -> a3;
 98 | 	a3 -> a0;
 99 | 	a3 -> end;
100 | 	b3 -> end;
101 | 
102 | 	start [shape=Mdiamond];
103 | 	end [shape=Msquare];
104 | }
105 | [/diagram]
106 | \`\`\`
107 | 
108 | Result
109 | 
110 | [diagram]
111 | digraph G {
112 | 
113 | 	subgraph cluster_0 {
114 | 		style=filled;
115 | 		color=lightgrey;
116 | 		node [style=filled,color=white];
117 | 		a0 -> a1 -> a2 -> a3;
118 | 		label = "process #1";
119 | 	}
120 | 
121 | 	subgraph cluster_1 {
122 | 		node [style=filled];
123 | 		b0 -> b1 -> b2 -> b3;
124 | 		label = "process #2";
125 | 		color=blue
126 | 	}
127 | 	start -> a0;
128 | 	start -> b0;
129 | 	a1 -> b3;
130 | 	b2 -> a3;
131 | 	a3 -> a0;
132 | 	a3 -> end;
133 | 	b3 -> end;
134 | 
135 | 	start [shape=Mdiamond];
136 | 	end [shape=Msquare];
137 | }
138 | [/diagram]
139 | 
140 | ### More examples
141 | Find more examples in the [Diagrams Gallery](http://www.graphviz.org/Gallery.php).
142 | 
143 | ## flowchart.js
144 | To embed a flowchart.js diagram, include the diagram definition between \`[flowchart]\` and \`[/flowchart]\` tags.
145 | 
146 | Read more on the [flowchart.js project page](http://flowchart.js.org).
147 | 
148 | ### Example
149 | 
150 | Code
151 | 
152 | \`\`\`
153 | [flowchart]
154 | st=>start
155 | e=>end
156 | op1=>operation: My operation
157 | sub1=>subroutine: My Subroutine
158 | cond=>condition: Yes
159 | or No?
160 | io=>inputoutput: catch something...
161 | 
162 | st->op1->cond
163 | cond(yes)->io->e
164 | cond(no)->sub1(right)->op1
165 | [/flowchart]
166 | \`\`\`
167 | 
168 | Result
169 | 
170 | [flowchart]
171 | st=>start
172 | e=>end
173 | op1=>operation: My operation
174 | sub1=>subroutine: My Subroutine
175 | cond=>condition: Yes
176 | or No?
177 | io=>inputoutput: catch something...
178 | 
179 | st->op1->cond
180 | cond(yes)->io->e
181 | cond(no)->sub1(right)->op1
182 | [/flowchart]
183 | `;
184 | 


--------------------------------------------------------------------------------
/src/templates/index-page.js:
--------------------------------------------------------------------------------
 1 | export default `# Hello,  world!
 2 | 
 3 | Welcome to your new Octopus-powered page! It will serve you great as an internal knowledge base or documentation.
 4 | 
 5 | It has a native **Markdown** support which makes it easy for non-technical people to contribute. No admin panel, no databases, no HTML skills required - just a simple text editor.
 6 | 
 7 | It also supports **diagrams** to make writing technical documentation a breeze. You do not need external software to include a system diagram. It will really help you communicate technical projects to other people.
 8 | 
 9 | Here's an example:
10 | 
11 | [diagram]
12 | digraph {
13 | "Web browser" [style=dashed]
14 | "REST API" [style=filled fillcolor="#eeffbb"]
15 | "back-end server" [style=filled fillcolor="#ffdddd"]
16 | 
17 | "Web browser" -> "REST API" [label="HTTP GET"]
18 | "REST API" -> "back-end server" -> "REST API" [style=dashed]
19 | "REST API" -> "Web browser" [label="HTTP 200"]
20 | }
21 | [/diagram]
22 | 
23 | Octopus supports flowcharts as well:
24 | 
25 | [flowchart]
26 | st=>start
27 | e=>end
28 | op1=>operation: My operation
29 | sub1=>subroutine: My Subroutine
30 | cond=>condition: Yes
31 | or No?
32 | io=>inputoutput: catch something...
33 | 
34 | st->op1->cond
35 | cond(yes)->io->e
36 | cond(no)->sub1(right)->op1
37 | [/flowchart]
38 | 
39 | To read more about using diagrams, go to [Diagrams Help](/diagrams-help) page.
40 | 
41 | Happy knowledge sharing!`;
42 | 


--------------------------------------------------------------------------------
/src/templates/index.js:
--------------------------------------------------------------------------------
1 | export { default as menuTemplate } from "./menu";
2 | export { default as companyStructureTemplate } from "./company-structure";
3 | export { default as productRoadmapTemplate } from "./product-roadmap";
4 | export { default as diagramsHelpTemplate } from "./diagrams-help";
5 | export { default as newPageTemplate } from "./new-page";
6 | export { default as indexPageTemplate } from "./index-page";
7 | 


--------------------------------------------------------------------------------
/src/templates/menu.js:
--------------------------------------------------------------------------------
 1 | export default `* <details><summary>Company (collapisble)</summary>
 2 | 	* [Company structure](/company-structure)
 3 | 	* [Product roadmap](/roadmap)
 4 | </details>
 5 | <!-- Double new line here is necessary! -->
 6 | 
 7 | * Projects
 8 | 	* [Project #1](/project-1)
 9 | 	* [Project #2](/project-2)
10 | `;
11 | 


--------------------------------------------------------------------------------
/src/templates/new-page.js:
--------------------------------------------------------------------------------
 1 | export default `# Title
 2 | Some text with a [link](https://www.livechatinc.com/)
 3 | 
 4 | ## Subheader
 5 | Another text
 6 | 
 7 | ## Graph
 8 | 
 9 | [diagram]
10 | digraph {
11 | A->B
12 | B->C
13 | C->A
14 | }
15 | [/diagram]
16 | 
17 | ## Tooltips
18 | 
19 | <span data-tooltip="I'm a tooltip text!">Basic tootlip</span>
20 | <span data-tooltip="I'm a tooltip text!" class="tooltip"><code>.tooltip</code> tootlip</span>
21 | <span data-tooltip="I'm a tooltip text!" class="tooltip-top"><code>.tooltip-top</code> tootlip</span>
22 | <span data-tooltip="I'm a tooltip text!" class="tooltip-right"><code>.tooltip-right</code> tootlip</span>
23 | <span data-tooltip="I'm a tooltip text!" class="tooltip-bottom"><code>.tooltip-bottom</code> tootlip</span>
24 | <span data-tooltip="I'm a tooltip text!" class="tooltip-left"><code>.tooltip-left</code> tootlip</span>
25 | <span data-tooltip="I'm a very long tooltip text!" class="tooltip-200"><code>.tooltip-200</code> tootlip</span>
26 | <span data-tooltip="I'm a very, very long tooltip text!" class="tooltip-300"><code>.tooltip-300</code> tootlip</span>
27 | <span data-tooltip="it.is.very.very.veeeeeery.long@email.address" class="tooltip-auto"><code>.tooltip-auto</code> tootlip</span>
28 | <span data-tooltip="I'm a tooltip text!" class="tooltip-200 tooltip-right"><code>.tooltip-right.tooltip-200</code> tootlip</span>
29 | `;
30 | 


--------------------------------------------------------------------------------
/src/templates/product-roadmap.js:
--------------------------------------------------------------------------------
 1 | export default `# Product roadmap
 2 | 
 3 | ## Backend libraries
 4 | Progress: 70%
 5 | Description of this project.
 6 | 
 7 | ## UI KIT
 8 | Progress: 5%
 9 | Description of this project.
10 | 
11 | ## JavaScript SDK
12 | Progress: 5%
13 | Description of this project.
14 | `;
15 | 


--------------------------------------------------------------------------------
/src/utils/Firebase.js:
--------------------------------------------------------------------------------
 1 | import * as firebase from "firebase";
 2 | 
 3 | class Firebase {
 4 |   getUser() {
 5 |     return firebase.auth().currentUser;
 6 |   }
 7 | 
 8 |   rememberFirebaseAccessToken(accessToken) {
 9 |     try {
10 |       window.localStorage.setItem("firebase.accessToken", accessToken);
11 |     } catch (e) {
12 |       console.warn("Could not save firebase accessToken in localStorage");
13 |     }
14 |   }
15 | 
16 |   getFirebaseAccessToken() {
17 |     try {
18 |       return window.localStorage.getItem("firebase.accessToken");
19 |     } catch (e) {
20 |       console.warn("Could not get firebase access token from localStorage");
21 |       return null;
22 |     }
23 |   }
24 | 
25 |   encodeFirebaseKey(key) {
26 |     return encodeURIComponent(key).replace(/\./g, "%2E");
27 |   }
28 | 
29 |   decodeFirebaseKey(key) {
30 |     return decodeURIComponent(key);
31 |   }
32 | }
33 | 
34 | export default new Firebase();
35 | 


--------------------------------------------------------------------------------
/src/utils/OnlineTracker.js:
--------------------------------------------------------------------------------
 1 | import * as firebase from "firebase";
 2 | import Firebase from "./Firebase";
 3 | 
 4 | class OnlineTracker {
 5 |   track(path) {
 6 |     const data = {};
 7 |     const user = Firebase.getUser();
 8 |     data[Firebase.encodeFirebaseKey(user.email)] = {
 9 |       lastActive: +new Date(),
10 |       path: path,
11 |       photoUrl: user.photoURL
12 |     };
13 |     firebase
14 |       .database()
15 |       .ref("online")
16 |       .update(data);
17 |   }
18 | }
19 | 
20 | export default new OnlineTracker();
21 | 


--------------------------------------------------------------------------------
/src/utils/Utils.js:
--------------------------------------------------------------------------------
1 | class Utils {
2 |   getTimestamp() {
3 |     return Math.round(new Date().getTime() / 1000);
4 |   }
5 | }
6 | 
7 | export default new Utils();
8 | 


--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
1 | export { default as Firebase } from "./Firebase";
2 | export { default as OnlineTracker } from "./OnlineTracker";
3 | export { default as Utils } from "./Utils";
4 | 


--------------------------------------------------------------------------------